/*
Theme Name: Villa Arbora (MaD Zero)
Author: mardor - MadWorks
Author URI: https://madworks.hu
Description: A Villa Arbora projekt témája — a MaD Zero FSE starterből leválasztva, a jóváhagyott arany-fekete design system tokenjeivel. Zéró felesleges bájt: alapoldalon 0 KB saját JS, minimális CSS, minden design-token a theme.json-ban.
Version: 0.6.10
Requires at least: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: madzero
*/

/*
 * ELV: ide CSAK az kerül, amit a theme.json / blokk-beállítás tényleg nem tud.
 * Blokk-specifikus stílus → wp_enqueue_block_style (functions.php), NEM ide.
 * Ez a fájl a cél szerint 2-3 KB alatt marad.
 *
 * A változásnapló: CHANGELOG.md (nem itt, hogy ez a fájl ne hízzon).
 */

/* Utility: teljes magasság/szélesség kitöltés (pattern-konvenció) */
.full-height,
.full-height img { height: 100%; }
.full-width,
.full-width img { width: 100%; }

/* Utility: háttérkép-kitöltő kép (pattern-konvenció) */
.bcg-img { height: 100%; width: 100%; }
.bcg-img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Kijelölés-szín a brandhez — arany alapon MÉLY fekete, nem a világos
   szövegszín: a #C9A961 fölött az #EDE9E1 alig olvasható. */
::selection {
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--primary);
}

/* Szedés-minőség: a címsorban ne maradjon árva szó, a bekezdés ne törjön csúnyán.
   Nem kifejezhető theme.json-ból, ezért van itt. */
h1, h2, h3, h4, h5, h6,
.wp-block-heading { text-wrap: balance; }
p { text-wrap: pretty; }

/* ARBORA — VILÁGOS-ELSŐ (v85, 2026-09-08). Az oldal alapja törtfehér, a felcím
   és a halvány szöveg ALAPBÓL a világos alap színeit hozza (gold-aa / mute-light
   — a styles/blocks változat-fájlokban). A SÖTÉT sávokon váltanak a sötét alap
   színeire. Miért itt: egy változat nem tud egy másik változatba benyúlni, a
   kombinációt csak CSS tudja kifejezni. A csere akadálymentességi: a #C9A961 a
   #F2EFE8 alapon 1,9:1, a #7A5C2C 5,4:1 — 11 px-es szövegen is AA. (T19.)
   A sötét kontextust a szekció-változat ÉS a nyers háttér-osztály is jelöli,
   hogy a beépített patternök explicit bcg-dark csoportjai is jól viselkedjenek. */
.is-style-section-dark .is-style-text-eyebrow,
.is-style-card-dark .is-style-text-eyebrow,
.has-bcg-dark-background-color .is-style-text-eyebrow,
.has-ink-background-color .is-style-text-eyebrow,
.has-surface-background-color .is-style-text-eyebrow,
.wp-block-cover .is-style-text-eyebrow {
	color: var(--wp--preset--color--primary);
}

.is-style-section-dark .is-style-text-lead,
.is-style-section-dark .is-style-text-meta,
.is-style-card-dark .is-style-text-lead,
.is-style-card-dark .is-style-text-meta,
.has-bcg-dark-background-color .is-style-text-lead,
.has-bcg-dark-background-color .is-style-text-meta,
.has-ink-background-color .is-style-text-lead,
.has-ink-background-color .is-style-text-meta,
.has-surface-background-color .is-style-text-lead,
.has-surface-background-color .is-style-text-meta {
	color: var(--wp--preset--color--txt-muted);
}

/* ARBORA — mobil betűköz (T18). A címsor-ritkítás a design szerint .16em;
   ez 375 px-en szétesik, mert a sortörés a betűközökbe csúszik. A theme.json
   tokenje egyetlen érték, `em`-ben megadva pedig a clamp() nem tud a
   betűmérettel együtt szűkülni — ezért van itt az egyetlen media query.
   ⚠️ A v85 csomag 900/760/600/560 px-es töréspontokat hoz; a végleges értéket
   a T20 mobil design-handoff hitelesíti 375 px-en. */
@media screen and (max-width: 781px) {
	:root {
		--wp--custom--letter-spacing--display: 0.06em;
		--wp--custom--letter-spacing--heading-lg: 0.05em;
		--wp--custom--letter-spacing--heading-md: 0.06em;
		--wp--custom--letter-spacing--heading-sm: 0.06em;
		--wp--custom--letter-spacing--eyebrow: 0.24em;
	}
}

/* Fókuszgyűrű — dizájnba illesztve, NEM a böngésző alap-outline-ja.
   :focus-visible és nem :focus: így egérkattintásra nem villan be, csak
   billentyűs navigációnál. A theme.json elements ága a :focus-visible-t nem
   ismeri, és ez a szabály linkre ÉS gombra is kell — ezért él itt, egy helyen.
   Világos alapon a mély arany látszik (a fő arany 1,9:1 volna). */
a:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-aa);
	outline-offset: 2px;
}

/* Sötét sávon a mély arany elvész — ott a fő arany. */
.is-style-section-dark a:focus-visible,
.is-style-section-dark .wp-element-button:focus-visible,
.is-style-section-dark .wp-block-button__link:focus-visible,
.has-bcg-dark-background-color a:focus-visible,
.has-bcg-dark-background-color .wp-block-button__link:focus-visible,
.wp-block-cover a:focus-visible,
.wp-block-cover .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--primary);
}

/* Horgony-ugrás finom görgetéssel (galéria, GYIK téma-sáv).
   Nem kifejezhető theme.json-ból vagy blokk-beállításból — a `scroll-behavior`
   nincs kitéve egyik felületen sem, ezért él itt.
   A `scroll-margin` nélkül a célcímsor a viewport LEGTETEJÉRE ugrik, és úgy néz
   ki, mintha levágták volna a szekció elejét.
   Mozgás-érzékenyeknél a lenti prefers-reduced-motion blokk `scroll-behavior:
   auto !important`-ja felülírja — a kapu tehát már megvan. */
html { scroll-behavior: smooth; }

/* A térközt a HORGONYZOTT CÍMSORRA tesszük, nem `:target`-re: a `:target` csak
   az ÉPPEN aktuális célra illeszkedik, tehát a következő kattintásnál a régi
   célon ül még — mérve: `#halo`-ra ugorva a scroll-margin 0px volt, mert a
   `:target` még a `#terasz`-t jelölte. `:where()` nulla specifikussággal, hogy
   bármelyik blokk-beállítás felülírhassa.
   Az érték a RÖGZÍTETT FEJLÉC magasságát is fedi (mérve 70 px) — enélkül a
   célcímsor pont a fejléc alá csúszna. Ha a fejléc magassága változik, ezt
   együtt kell vinni vele. */
:where(h1, h2, h3, h4, h5, h6)[id] { scroll-margin-block-start: 6.5rem; }

/* Rögzített fejléc — a foglalás gombja így végig kéznél van.
   A `position: sticky` nincs kitéve blokk-beállításként, ezért él itt; a
   HÁTTERET viszont a sablonrész adja (bcg-dark), mert az blokk-beállítás.
   Háttér nélkül a csont szekciók tartalma átgörögne a fejlécen.

   ⚠️ A SABLONRÉSZ-BURKOLÓRA kell tenni, nem a `.site-header`-re. A sticky csak
   a SZÜLŐJE dobozán belül tapad, a `.site-header` szülője viszont a
   `header.wp-block-template-part`, ami pontosan olyan magas, mint ő (mérve:
   70 px = 70 px) — nulla mozgástér, tehát azonnal elgörög. A burkoló ezzel
   szemben a `div.wp-site-blocks` közvetlen gyereke, ami a teljes lap magas
   (mérve 6362 px).
   Mérési tanulság: a panelben a `window.scrollTo` NEM görget (scrollY 0 marad),
   ezért a „fejléc a tetején van" önmagában semmit nem bizonyít — a szülő
   magasságát kell nézni, vagy valódi görgetés-eseményt küldeni.

   A fejléc ALAPBAN a normál folyamban van és együtt görög a lappal; csak egy
   küszöb után tapad meg, becsúszó mozdulattal (Dóri: „később tapadjon").
   Az osztályt az assets/js/header-pin.js teszi rá — ha az nem fut le, a fejléc
   marad a folyamban, tehát az alapállapot használható. */
/* A lábléc a lap aljához ér. A gyökér `blockGap` 24 px `margin-block-start`-ot
   ad a `wp-site-blocks` gyerekeinek, ott pedig a #FAF9F6 lap-háttér látszik ki
   a sötét lábléc fölött — Dóri: „több helyen is fehér csík, pl. a kapcsolatnál”.
   A `core/template-part` NEM támogat térköz-beállítást, ezért nem blokkból megy. */
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }

.wp-site-blocks > header.wp-block-template-part.is-pinned {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	animation: arbora-fejlec-be 260ms ease both;
}

@keyframes arbora-fejlec-be {
	from { transform: translateY( -100% ); }
	to   { transform: none; }
}

/* Mobil sorrend-csere utility (pattern-konvenció) */
@media screen and (max-width: 781px) {
	.m-order-2 { order: 2; }
}

/* ARBORA — a fejléc FOGLALÁS gombja mobilon ideiglenesen rejtve.
   MIÉRT: overlay-módban a navigáció ZÁRT reszponzív konténere is megtartja a
   teljes szélességét (mérve: 537 px egy 593 px-es viewportban), így a mellette
   álló gomb kiszorul a viewportból — vízszintes túlcsordulás.
   ⚠️ EZ IDEIGLENES ÁLLAPOT, NEM DIZÁJN-DÖNTÉS. A forgalom többsége mobil lesz,
   és a foglalás a projekt fő célja — a fejléc-CTA-nak ott a helye. A mobil
   fejléc megtervezése a T20 (mobil design-handoff) feladata; addig a menü
   „Árak és foglalás" pontja viszi a funkciót. A T20-nál ez a szabály törlendő. */
@media screen and (max-width: 781px) {
	.site-header .arbora-header-cta { display: none; }
}

/* ARBORA — márka-vízjel (v85, Dorina javaslata): a logó A-jele halványan a
   szekció jobb szélén, a tartalom mögött. Pszeudo-elem + háttérkép, ezért nem
   theme.json. Csoportra tett `arbora-watermark` osztállyal aktiválódik; a
   `isolation` a saját stacking contextet adja, hogy a z-index ne szivárogjon.
   ⚠️ Új arculati alkalmazás — az ügyfél jóváhagyása még nyitott (v85 jegyzék). */
.arbora-watermark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.arbora-watermark::after {
	content: "";
	position: absolute;
	z-index: 0;
	right: clamp(-38px, -2vw, -12px);
	top: 50%;
	width: clamp(150px, 18vw, 250px);
	height: clamp(190px, 23vw, 310px);
	background: url("assets/img/arbora-mark.svg") center / contain no-repeat;
	opacity: 0.055;
	transform: translateY(-50%);
	pointer-events: none;
}
.arbora-watermark > * { position: relative; z-index: 1; }

/* Marquee logósor (CSS-only, 0 JS) — pattern: logosor-marquee.
   Két azonos fél a trackben → a -50% transzform hézagmentesen loopol.
   A logók alt=""-esek (dekoratívak), a duplikátum így SR-nek néma. */
.madzero-marquee { overflow: hidden; }
.madzero-marquee .madzero-marquee__track {
	display: flex;
	gap: 0;
	width: max-content;
	animation: madzero-marquee 30s linear infinite;
}
.madzero-marquee .madzero-marquee__half {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--h-m);
	padding-right: var(--wp--preset--spacing--h-m);
}
.madzero-marquee:hover .madzero-marquee__track { animation-play-state: paused; }
@keyframes madzero-marquee {
	to { transform: translateX(-50%); }
}

/* Mozgás-érzékeny felhasználóknak: minden animáció/átmenet ki */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}