/* RolliPolli Header – frontend stílusok */

.rph-header {
	position: var(--rph-position, sticky);
	top: 0;
	z-index: 9999;
	background: var(--rph-bg, rgba(253, 252, 248, 0.85));
	border-bottom: 1px solid var(--rph-border, rgba(5, 80, 120, 0.1));
	-webkit-backdrop-filter: blur(var(--rph-blur, 12px));
	backdrop-filter: blur(var(--rph-blur, 12px));
	font-family: var(--rph-font-body);
	color: var(--rph-text, #055078);
}

.rph-bar {
	max-width: var(--rph-max, 1280px);
	margin: 0 auto;
	padding: var(--rph-pad-y, 12px) 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

@media (min-width: 640px) {
	.rph-bar { padding-left: 32px; padding-right: 32px; }
}

/* Logó */
.rph-logo { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.rph-logo img { height: var(--rph-logo-h-m, 40px); width: auto; display: block; }
.rph-logo-text {
	font-family: var(--rph-font-heading);
	font-weight: 600;
	font-size: 22px;
	color: var(--rph-text);
}
@media (min-width: 640px) {
	.rph-logo img { height: var(--rph-logo-h, 44px); }
}

/* Asztali navigáció */
.rph-nav {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	gap: var(--rph-menu-gap, 20px);
	font-size: var(--rph-menu-size, 13px);
	font-weight: 600;
	letter-spacing: 0.02em;
}
.rph-nav.rph-upper { text-transform: uppercase; }

.rph-item { position: relative; }
.rph-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: color-mix(in srgb, var(--rph-text) 80%, transparent);
	text-decoration: none;
	transition: color 0.15s ease;
	white-space: nowrap;
}
.rph-link:hover,
.rph-link.is-current { color: var(--rph-brand, #da3831); }
.rph-caret { transition: transform 0.15s ease; }
.rph-item:hover .rph-caret { transform: rotate(180deg); }

/* Legördülő */
.rph-dropdown {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	margin-top: 12px;
	min-width: 224px;
	background: #fff;
	border: 1px solid var(--rph-border, rgba(5, 80, 120, 0.1));
	border-radius: 16px;
	padding: 8px;
	box-shadow: 0 18px 40px -18px rgba(5, 80, 120, 0.35);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	z-index: 50;
}
.rph-item:hover > .rph-dropdown,
.rph-item:focus-within > .rph-dropdown { visibility: visible; opacity: 1; }

.rph-drop-link {
	display: block;
	padding: 10px 16px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	color: color-mix(in srgb, var(--rph-text) 90%, transparent);
	text-decoration: none;
	white-space: nowrap;
}
.rph-drop-link:hover { background: #fdfcf8; color: var(--rph-brand, #da3831); }

/* Jobb oldali műveletek */
.rph-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Nyelvválasztó */
.rph-lang {
	position: relative;
	display: flex;
	align-items: center;
	padding: 4px;
	background: #fff;
	border: 1px solid var(--rph-border, rgba(5, 80, 120, 0.1));
	border-radius: 999px;
	box-shadow: 0 6px 18px -6px rgba(5, 80, 120, 0.25);
}
.rph-lang-pill {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: 36px;
	border-radius: 999px;
	background: var(--rph-brand, #da3831);
	transition: transform 0.3s ease;
}
.rph-lang-pill[data-index="1"] { transform: translateX(36px); }
.rph-lang-btn {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	color: color-mix(in srgb, var(--rph-text) 70%, transparent);
}
.rph-lang-btn.is-active { color: #fff; }

/* CTA */
.rph-cta {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--rph-brand, #da3831);
	color: #fff;
	text-decoration: none;
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: 0 10px 24px -8px rgba(218, 56, 49, 0.55);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	white-space: nowrap;
}
.rph-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -8px rgba(218, 56, 49, 0.6); }
.rph-cta-mobile { display: inline-flex; margin-top: 10px; }

/* Hamburger */
.rph-burger {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var(--rph-border, rgba(5, 80, 120, 0.1));
	background: #fff;
	color: var(--rph-text);
	cursor: pointer;
	box-shadow: 0 6px 18px -6px rgba(5, 80, 120, 0.25);
}
.rph-burger:hover { color: var(--rph-brand, #da3831); }
.rph-burger .rph-icon-close { display: none; }
.rph-header.is-open .rph-burger .rph-icon-close { display: block; }
.rph-header.is-open .rph-burger .rph-icon-open { display: none; }

/* Mobil menü */
.rph-mobile {
	border-top: 1px solid var(--rph-border, rgba(5, 80, 120, 0.1));
	background: var(--rph-bg, rgba(253, 252, 248, 0.95));
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, opacity 0.3s ease;
}
.rph-header.is-open .rph-mobile {
	max-height: 80vh;
	opacity: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.rph-mobile-inner {
	max-width: var(--rph-max, 1280px);
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.rph-m-item { padding: 8px 12px; }
.rph-m-link {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--rph-text);
	text-decoration: none;
	padding: 4px 0;
}
.rph-m-link:hover, .rph-m-sublink:hover { color: var(--rph-brand, #da3831); }
.rph-m-sub {
	margin-top: 4px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-left: 2px solid color-mix(in srgb, var(--rph-brand) 30%, transparent);
	padding-left: 12px;
}
.rph-m-sublink {
	display: block;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 500;
	color: color-mix(in srgb, var(--rph-text) 85%, transparent);
	text-decoration: none;
}
.rph-m-sublink:hover { background: #fff; }

/* ============================================================================
   EYEBROW-CHIP — EGYSÉGES, GLOBÁLIS FORRÁS (minden szekció, minden modul).
   Kiss Ernő (2026-08-22): egy helyen módosítható, és mindenhol frissül.
   ► A SZÍNEKET ITT állítsd (ez a header.css minden oldalon betöltődik):
   --------------------------------------------------------------------------- */
:root {
	--rolli-eyebrow-bg: #feeccd;   /* eyebrow háttér */
	--rolli-eyebrow-ink: #004a6b;  /* eyebrow betűszín (globális elsődleges) */
	--rolli-text: #4f606d;         /* ÁLTALÁNOS törzsszöveg-szín (globális) — a modul-
	                                  szekciók ezt használják; a címsorok maradnak ink. */
	--rolli-bg: #fcfaf4;           /* ÁLTALÁNOS háttérszín (globális) — a Lovable general bg
	                                  KRÉM (#fcfaf4), nem fehér. Dedikált kivételek felülírják
	                                  (hero #f5efe6, services #ffffff, why navy stb.). */
}
/* Általános oldal-háttér (a Lovable-lel egyezően KRÉM #fcfaf4). A dedikált szekció-bg-k felülírják. */
body { background: var(--rolli-bg, #fcfaf4) !important; }
/* Minden modul eyebrow-chip-je ugyanazt a stílust kapja (rps/rpab/rpsv/rpct).
   !important, mert a header.css a modul-CSS-ek ELŐTT töltődik. */
.rps-chip, .rpab-chip, .rpsv-chip, .rpct-chip {
	background: var(--rolli-eyebrow-bg) !important;
	color: var(--rolli-eyebrow-ink) !important;
	border-radius: 999px !important;
	padding: 6.4px 13.6px !important;
	/* Kiss Ernő spec (2026-08-22): Plus Jakarta Sans / 600 / 12px / line-height 29px. */
	font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.25px !important;
	text-transform: uppercase !important;
	line-height: 29px !important;
	display: inline-flex !important;
	align-items: center !important;
}
/* Piros pötty — CSAK a főoldali hero eyebrow-ban (a többiben nincs). Forrás: index.tsx
   <span class="inline-block h-1.5 w-1.5 rounded-full bg-brand"> = 6px, #da3831. */
.rps-hero .rps-chip::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #da3831;
	margin-right: 8px;
	flex: none;
}

/* ============================================================================
   GOMB HOVER — GLOBÁLIS (Kiss Ernő spec 2026-08-22). A header.css minden oldalon
   betöltődik + !important, mert a modul-CSS-ek utána jönnek → egységes minden gombra.
   --------------------------------------------------------------------------- */
/* Gomb ALAP — GLOBÁLIS (nem csak hover): minden modul piros/ghost gombja UGYANÚGY néz ki,
   mint a főoldali hero (rps-btn). Kiss Ernő 2026-08-24. A rpsv/rpab/rpct modul-CSS a saját
   ghost-ját sötét kerettel / átlátszó háttérrel rajzolta → itt globálisan egységesítjük. */
/* Sortávolság egységes (a rpsv modul .rpsv-section-ből 29px-et örökölt → gomb magasabb volt). */
.rps-btn, .rpab-btn, .rpsv-btn, .rpct-btn { line-height: 21px !important; }
/* Gomb-sor: KÖZÉPRE igazít (nem stretch), különben a ghost 2px kerete a piros gombot is
   4px-el magasabbra nyújtja (a főoldali .rps-btn-row is center). */
.rps-btn-row, .rpab-btn-row, .rpsv-btn-row, .rpct-btn-row { align-items: center !important; }
.rps-btn--primary, .rpab-btn--primary,
.rpsv-btn--primary, .rpct-btn--primary {
	box-shadow: 0 8px 20px -8px rgba(218, 56, 49, 0.45) !important; /* halvány piros árnyék ALAPból */
}
.rps-btn--ghost, .rpab-btn--ghost,
.rpsv-btn--ghost, .rpct-btn--ghost {
	background: #fefdfb !important;                       /* meleg off-white alap (hoverre #fff) */
	color: #055078 !important;                            /* ink szövegszín */
	border: 2px solid rgba(5, 80, 120, 0.14) !important;  /* halvány keret, NEM a vastag sötét */
}
/* Piros (primary): enyhén kiemelkedik + halvány (piros tónusú) árnyék; betűszín NEM változik.
   A header CTA gomb (.rph-cta – desktop + mobil) is UGYANEZT a globális beállítást kapja,
   hogy hoverre NE sötétedjen el a betűszín (a téma a:hover-je felülírná). Kiss Ernő 2026-08-24. */
.rps-btn--primary:hover, .rpab-btn--primary:hover,
.rpsv-btn--primary:hover, .rpct-btn--primary:hover,
.rph-cta:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 16px 32px -8px rgba(218, 56, 49, 0.60) !important;
	color: #fff !important; /* betűszín NE változzon hoverre (a téma a:hover-t felülír) */
}
/* Fehér (ghost): CSAK a háttér vált #ffffff-re; betűszín NEM változik, NEM emelkedik. */
.rps-btn--ghost:hover, .rpab-btn--ghost:hover,
.rpsv-btn--ghost:hover, .rpct-btn--ghost:hover {
	background: #ffffff !important;
	color: #055078 !important; /* a ghost alap betűszíne — NE változzon hoverre */
}
/* Nyíl: kissé jobbra animál hoverre (minden gombban). */
.rps-arrow { transition: transform 0.18s ease; }
.rps-btn:hover .rps-arrow, .rpab-btn:hover .rps-arrow,
.rpsv-btn:hover .rps-arrow, .rpct-btn:hover .rps-arrow { transform: translateX(3px); }

/* A téma alap-fejléce (.site-header.dynamic-header) egy üres ~32px sávot hagy a RolliPolli
   header alatt, a hero fölött. A RolliPolli saját .rph-header-t használ → elrejtjük a téma
   fejlécét. Kiss Ernő (2026-08-22): „hero felett ne legyen üres sáv". */
body > header.site-header,
.site-header.dynamic-header { display: none !important; }