/*
 * Villa Arbora — navigáció: alap, aktuális oldal, hover.
 *
 * A design a menüben két állapotot különböztet meg (Main.dc.html, NAV szekció):
 * az aktuális oldal `var(--text)` = #EDE9E1, a többi `var(--mute)` = #9B968C.
 * Dóri kérése (2026-08-27): hoverre is a világos szín.
 *
 * MIÉRT NEM A theme.json-BÓL — mérve, ez a navigáció csapdája:
 * a WordPress a theme.json `elements.link` szabályát `:where()`-be csomagolja,
 * ami NULLA specifikusságú:
 *     :root :where(.wp-block-navigation a:where(:not(.wp-element-button)))   -> (0,1,0)
 * a core viszont szándékosan MEGDUPLÁZZA az osztályt, hogy nyerjen:
 *     .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
 *     { color: inherit }                                                     -> (0,3,0)
 * Emiatt a theme.json link-színe a navigációnál SOSEM érvényesül — a link a
 * szülőtől örököl, az pedig a `overlayTextColor` osztályát viseli. A blokk
 * szintű `color.text` a theme.json-ban marad (az az örökölt érték, és a
 * szerkesztőben is helyes); a link-állapotok itt élnek, a core saját
 * duplázott-osztály trükkjével.
 *
 * Blokk-specifikus, ezért wp_enqueue_block_style-lal jön (functions.php) —
 * csak azokon az oldalakon töltődik, ahol van navigáció.
 */

/* --- ALAP: tompított (0,3,0 — pont annyi, amennyi a core `inherit`-je) --- */
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--txt-muted);
	transition: color 200ms ease;
}

/* --- AKTUÁLIS OLDAL és HOVER: világos (0,4,0 — egy fokkal a fenti fölött).
       A `current_page_item` a klasszikus menüké, a `current-menu-*` a
       navigation blokké — mindkettő kell, mert a WP forrástól függően más. --- */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.wp-block-navigation .current_page_item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--txt-light);
}

/* ==========================================================================
 * MOBIL OVERLAY-MENÜ  (T20, Dóri referenciája alapján, 2026-09-10)
 *
 * Sorszámozott, teljes szélességű tételek hajszálvonallal elválasztva, jobbra
 * nyíllal, alul kiemelt foglalás-hívással. A core alapértelmezett overlaye
 * középre zárt link-oszlop — az itteni szabályok formálják listává.
 *
 * MINDEN A `.is-menu-open`-RE VAN HORGONYOZVA, nem töréspontra. A core az
 * overlayt ugyanabban a DOM-ban tartja nyitva és zárva is; az `is-menu-open`
 * osztály pontosan akkor van kint, amikor a felület tényleg overlayként
 * látszik. Így nem kell kitalálni a core töréspontját (ami verzióról verzióra
 * változhat), és a „mobile / always / never" overlay-beállítás bármelyikével
 * helyes marad.
 *
 * ⚠️ SPECIFIKUSSÁG: a core a link-színt megduplázott osztállyal tolja (0,3,0),
 * lásd a fenti kommentet — az itteni szabályok ezért szintén duplázott
 * `__content`-tel horgonyoznak, ahol színt vagy tipográfiát írnak felül.
 * ========================================================================== */

/* ==========================================================================
 * ⚠️ A RÖGZÍTETT FEJLÉC ELTÖRI AZ OVERLAYT — a legfontosabb szabály itt
 *
 * TÜNET (Dóri, 2026-09-10): „ha nem az oldal tetején vagyok, és a rögzített
 * menüből hívom, csak egy csíkban nyílik meg, és megjelenik a görgetősáv".
 *
 * MÉRVE: a fejléc nélkül az overlay 500×812 (teljes viewport); rögzített
 * fejléccel 500×78 — pontosan a FEJLÉC magassága.
 *
 * OK: a becsúszó animáció (`arbora-fejlec-be`, style.css) `animation-fill-mode:
 * both`-tal fut, ezért a fejlécen az animáció után is MARAD egy transzform
 * (mérve: `matrix(1,0,0,1,0,-77.5)`). Egy transzformált ős pedig átveszi a
 * `position: fixed` leszármazottak VISZONYÍTÁSI KERETÉT — így a core overlaye
 * nem a képernyőhöz, hanem a fejléc dobozához igazodik.
 * Ugyanez igaz a `filter`-re és a `will-change: transform`-ra is; ha valaha
 * ilyen kerül a fejlécre, ez a hiba visszajön.
 *
 * MEGOLDÁS: amíg a menü nyitva van, a fejléc ne transzformáljon. A core a
 * `has-modal-open` osztályt a gyökérelemre teszi, tehát pontosan a nyitott
 * állapotra tudunk horgonyozni. A fejléc `position: fixed` marad (az önmagában
 * NEM hoz létre viszonyítási keretet fixed gyerekeknek), csak a mozgás áll le
 * arra az időre — ami észrevehetetlen, mert közben az overlay takarja.
 * ========================================================================== */
.has-modal-open .wp-site-blocks > header.wp-block-template-part.is-pinned {
	animation: none;
	transform: none;
}

/* ---------- az overlay belső térköze ----------
   A core alapértelmezése a képernyő szélére tapasztja a tételeket. A vízszintes
   érték a témában használt `h-s` nagyságrendje, a felső pedig elfér a záró
   gomb mellett. */
.main-navigation .wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(1.25rem, 5vw, 2.25rem);
}

/* ---------- a lista ---------- */

/* ⚠️ DUPLÁZOTT OSZTÁLY a `gap` miatt: a core nyitott overlayben 24px rés-t ad a
   listára, azonos (0,3,0) specifikussággal — de az ő CSS-e később tölt, tehát
   döntetlennél ő nyer. Mérve: `gap: 0`-t írtunk, a számított érték mégis 24px
   maradt, és a hajszálvonalak elúsztak a tételektől. A duplázás (0,4,0)-ra emel.
   Ugyanaz a trükk, amit a core maga is használ a link-színnél — lásd fent. */
.main-navigation .is-menu-open .wp-block-navigation__container.wp-block-navigation__container {
	counter-reset: arbora-menu;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.main-navigation .is-menu-open .wp-block-navigation-item {
	counter-increment: arbora-menu;
	width: 100%;
	border-top: 1px solid var(--wp--preset--color--separator);
}

.main-navigation .is-menu-open .wp-block-navigation-item:first-child {
	border-top: 0;
}

.main-navigation .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	width: 100%;
	/* A core `content-box`-ot hagy a linken: a `width: 100%` mellé a vízszintes
	   térköz KÍVÜLRE kerül. A sima tételeknél ez nem látszik (nincs bal-jobb
	   térközük), a gombbá formázott CTA viszont pont a 2×24px-szel lógott túl
	   a soron (mérve: 383px link egy 335px-es tételben). */
	box-sizing: border-box;
	padding: 0.9rem 0;
	color: var(--wp--preset--color--txt-light);
	/* ⚠️ A Cormorant preset-slugja `header`, NEM `heading` — a rossz névvel a
	   változó nem oldódik fel, és a szabály némán visszaesik az örökölt
	   Manrope-ra (mérve 2026-09-10: a tételek sans-szal jöttek ki). */
	font-family: var(--wp--preset--font-family--header);
	font-size: clamp(1.25rem, 5vw, 1.6rem);
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 1.2;
}

/* A sorszám CSS-számlálóból jön, nem beírt szövegből: a menü átrendezésekor
   magától újraszámozódik, és nem lehet elfelejteni frissíteni. A
   `decimal-leading-zero` adja a referencia 01/02 alakját. */
.main-navigation .is-menu-open .wp-block-navigation-item__content::before {
	content: counter(arbora-menu, decimal-leading-zero);
	flex: 0 0 auto;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
}

/* Ereszték-jel (chevron) két szegélyből, 45 fokra forgatva. Nem szövegkarakter
   és nem box-shadow-s nyílhegy: az előbbi betűtípusonként máshogy ül, az
   utóbbi a `clip-path`-szal együtt egyszerű vonallá lapult (mérve 2026-09-10). */
.main-navigation .is-menu-open .wp-block-navigation-item__content::after {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-inline-start: auto;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	opacity: 0.45;
	transform: rotate(45deg);
	transition: opacity 200ms ease, transform 200ms ease;
}

.main-navigation .is-menu-open .wp-block-navigation-item__content:hover::after,
.main-navigation .is-menu-open .wp-block-navigation-item__content:focus-visible::after {
	opacity: 1;
	transform: rotate(45deg) translate(2px, -2px);
}

/* Az aktuális oldal aranyra vált — az overlayben a világos/tompa
   megkülönböztetés kevés, mert ott minden tétel nagy és világos. */
.main-navigation .is-menu-open .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.main-navigation .is-menu-open .current_page_item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

/* ---------- „MENÜ" felcím ----------
   UI-felirat, nem szerkeszthető tartalom — ezért CSS-ből. Ha valaha második
   nyelv jön (II. ütem), ezt fordíthatóvá kell tenni, vagy ki kell venni. */
.main-navigation .is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: "Menü";
	display: block;
	margin-bottom: 1.75rem;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.main-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
	display: block;
	width: 100%;
	padding-top: 1rem;
}

/* ---------- a záró gomb ---------- */

.main-navigation .is-menu-open .wp-block-navigation__responsive-container-close {
	padding: 0.625rem;
	border: 1px solid var(--wp--preset--color--separator);
	color: var(--wp--preset--color--txt-light);
	transition: border-color 200ms ease, color 200ms ease;
}

.main-navigation .is-menu-open .wp-block-navigation__responsive-container-close:hover,
.main-navigation .is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
 * A FOGLALÁS-HÍVÁS AZ OVERLAY ALJÁN
 *
 * MIÉRT `navigation-link` ÉS NEM GOMB: a `core/buttons` befér a navigációba,
 * de a gomb href-je beégetett URL volna — a fejléc CTA-ja épp ezért PHP-pattern
 * (`home_url()`), és a check.js hordozhatóság-kapuja is tiltja. A
 * `navigation-link` viszont a LAP-AZONOSÍTÓBÓL oldja fel a címet, tehát
 * domain-váltáskor is helyes marad. Gombbá itt formázzuk.
 *
 * EZ OLDJA MEG A T20-at: a fejléc FOGLALÁS gombja 781px alatt rejtve van
 * (style.css), mert az overlay zárt konténere kiszorítaná — így mobilon eddig
 * EGYÁLTALÁN nem volt CTA. Mostantól itt van, a menü alján.
 *
 * A rejtés töréspont-mentes: a tétel alapból nincs kint, és csak nyitott
 * overlayben jelenik meg. Desktopon tehát sosem duplázza a fejléc gombját.
 * ========================================================================== */

.main-navigation .wp-block-navigation-item.arbora-nav-cta {
	display: none;
}

.main-navigation .is-menu-open .wp-block-navigation-item.arbora-nav-cta {
	display: block;
	margin-top: 2rem;
	border-top: 0;
}

.main-navigation .is-menu-open .arbora-nav-cta .wp-block-navigation-item__content.wp-block-navigation-item__content {
	justify-content: center;
	padding: 1.05rem 1.5rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: background 200ms ease;
}

.main-navigation .is-menu-open .arbora-nav-cta .wp-block-navigation-item__content:hover,
.main-navigation .is-menu-open .arbora-nav-cta .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--txt-light);
}

/* A CTA-n nincs sorszám és nincs nyíl — az nem menüpont, hanem cselekvés. */
.main-navigation .is-menu-open .arbora-nav-cta .wp-block-navigation-item__content::before,
.main-navigation .is-menu-open .arbora-nav-cta .wp-block-navigation-item__content::after {
	content: none;
}

@media (prefers-reduced-motion: reduce) {
	.main-navigation .is-menu-open .wp-block-navigation-item__content::after {
		transition: none;
	}
}