/*
Theme Name: KHEK
Description: A Kertvárosi Helytörténeti és Emlékezet Központ egyedi block theme-je, a projekt Figma tervei (grafika/ mappa) és az "A" színpaletta alapján.
Author: KHEK
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: khek
*/

/* A "Helyszínek" görgetésjelzőre (.khek-scroll-hint) kattintva sima gördüléssel
   ugorjon a #helyszinek horgonyhoz (a "khek/location-cards" blokk), ne
   ugrásszerűen. */
html {
  scroll-behavior: smooth;
}

/* Tartalmi (fő) rész oldalso terkoze - 1024px-tol felfele a theme.json
   gyoker-paddingja (200px) ervenyes, itt csak lejjebb irjuk felul. A
   "useRootPaddingAwareAlignments" (theme.json) miatt ez a
   --wp--style--root--padding-*-en keresztul automatikusan csak a tartalmi
   (constrained) resznek ad paddingot - a teljes szelesegu (alignfull)
   blokkok hattere tovabbra is a teljes oldalszelesseget kitolti, csak a
   BENNE levo tartalom kap ugyanennyi behuzast (lasd a WP core
   ".has-global-padding" szabalyait). Az "html body" (nagyobb
   specificitasu, mint a globalis stilusok sima "body" szelektora) itt
   biztositja, hogy ez a felulirás nyerjen. */
@media (max-width: 1023px) {
  html body {
    --wp--style--root--padding-left: 100px;
    --wp--style--root--padding-right: 100px;
  }
}

@media (max-width: 549px) {
  html body {
    --wp--style--root--padding-left: 30px;
    --wp--style--root--padding-right: 30px;
  }
}

/* A fejléc saját vízszintes térköze (".khek-header__inner", lásd
   header.html) ne maradjon fixen 110px minden törésponton - a
   tartalmi résszel (fent) megegyező töréspontokon ugyanúgy
   csökkenjen, különben a fejléc és a legördülő mobil menü (lásd
   ".khek-mobile-menu__topbar" lejjebb, ami ugyanezt a változót
   használja) széliránya eltérne a tartalomtól/egymástól. */
:root {
  --khek-header-padding-x: 110px;

  /* A h1-ek meretezesi "egysege". 540px felett pontosan 1px, 540px alatt a
     viewport szelessegevel ARANYOSAN kevesebb (540px-en meg 1px, 320px-en
     0,59px). Azert egy kozos egyseg es nem kesz betumeret, mert a h1-ek
     alapmerete kulonbozo (a Hero cime 52px, a tobbi 36px) - igy mindegyik a
     sajat meretebol indul, es a kicsinyites merteke garantaltan ugyanaz.
     Hasznalata (a szam MERTEKEGYSEG NELKUL, mert azt mar a valtozo hozza):
     "font-size: calc(52 * var(--khek-h1-scale))".
     Miert nem egy sima, mertekegyseg nelkuli szorzo? Mert azt a CSS nem tudja
     eloallitani: a "100vw / 540" eredmenye hosszusag, hosszusagot pedig
     hosszusaggal osztani (ami mertekegyseg nelkuli szamot adna) a calc()-ban
     nem lehet - a "calc(36px * <hosszusag>)" viszont ervenytelen, es a
     betumeret nemán az oroklott ertekre (18px) esne vissza. */
  --khek-h1-scale: 1px;

  /* A lenyilo menuk "MUI elevation" arnyeka. Azert valtozoban, mert ket
     kulonbozo helyen kell PONTOSAN ugyanannak lennie: az asztali legordulo
     almenu-kartyakon (".khek-header .wp-block-navigation__submenu-container",
     lasd lejjebb) es a legordult MOBIL menu alatt
     (".wp-block-navigation__responsive-container.is-menu-open"). Ugyanez az
     arnyek szerepel a Programok oldal Datum lenyilojan is
     (".khek-mui-select__menu", templates/archive-program.css) - az kulon
     fajlban van, ezert ott meg sajat masolatkent all. */
  --khek-menu-shadow:
    0 5px 5px -3px color-mix(in srgb, var(--wp--preset--color--green) 20%, transparent),
    0 8px 10px 1px color-mix(in srgb, var(--wp--preset--color--green) 14%, transparent),
    0 3px 14px 2px color-mix(in srgb, var(--wp--preset--color--green) 12%, transparent);
}

@media (max-width: 1023px) {
  :root {
    --khek-header-padding-x: 100px;
  }
}

/* 540px alatt a h1-ek a viewport szelessegevel aranyosan zsugorodnak (lasd a
   "--khek-h1-scale" magyarazatat feljebb). A "100vw / 540" pontosan 540px-en
   ad 1-et, alatta linearisan kevesebbet - tehat a betumeret ugyanolyan
   aranyban csokken, ahogy a kijelzo. */
@media (max-width: 540px) {
  :root {
    --khek-h1-scale: calc(100vw / 540);
  }
}

/* Amint a fejléc MOBIL (hamburger) nézetre vált, a bal/jobb térköz onnantól
   lefelé végig fix 35px. Ez szándékosan nem egy újabb @media-töréspont: a
   váltást nem fix szélesség dönti el, hanem a header-nav.js, ami akkor teszi
   fel a "khek-header--force-mobile" osztályt, ha a menüpontok a legszűkebb
   (30px-es) rés mellett sem férnek ki egy sorban (lásd lejjebb). Ezért maga
   az ÁLLAPOT állítja át a változót.
   A változót a ".khek-header"-en (nem a ":root"-on) írjuk felül: az egyedi
   tulajdonságok öröklődnek, és mindig a legközelebbi ős értéke nyer, ezért ez
   a fenti @media-s :root értékektől függetlenül érvényesül a fejléc egész
   fáján (".khek-header__inner" és ".khek-mobile-menu__topbar" - csak ők
   használják ezt a változót).
   A második szabály a 600px alatti sávot fedi le: ott a core saját
   töréspontja ("@media (min-width: 600px)", wp-includes/blocks/navigation/style.css)
   jeleníti meg a hamburgert, a JS-nek pedig nincs dolga (a becsukott menü már
   kifér), tehát a "force-mobile" osztály sem kerül fel. A 599.98px a core
   600px-es min-width-jének pontos párja, hogy törtpixeles (pl. 599.5px)
   szélességnél se maradjon rés a kettő között.
   Emiatt a korábbi "@media (max-width: 549px) { :root { ...: 30px } }" blokk
   elhagyható volt: 600px alatt úgyis ez a 35px érvényesül. */
.khek-header.khek-header--force-mobile {
  --khek-header-padding-x: 35px;
}

@media (max-width: 599.98px) {
  .khek-header {
    --khek-header-padding-x: 35px;
  }
}

/* main .wp-block-group {
    max-width: 1920px !important;
    padding: 0 30px !important;
    margin: 0 auto !important;
} */

.error404 .wp-block-group-is-layout-constrained {
  margin-top: 200px;
  margin-bottom: 100px;
}

.error404 .wp-block-group-is-layout-constrained .wp-block-paragraph {
  margin-bottom: 100px;
}

.wp-block-list, .wp-block-post-content {
  margin-block-start: 0 !important;
}

/* A page.html sablon post-title blokkja (H1) csak akkor jelenik meg
   ténylegesen, ha az oldal NEM tartalmaz Hero blokkot - ha igen, a Hero adja
   a saját címét, és ez a blokk üres HTML-t ad ki (lásd
   class-hero-block.php render_block_core/post-title szűrőjét). Emiatt itt a
   .wp-block-post-title-re biztonságosan rá lehet tenni a plusz felső margót:
   csak azokon az oldalakon fut le, ahol nincs Hero fejléc.
   Az osztály duplázva (specificitás-növelés): a WP globális stílusai
   ":root :where(.is-layout-constrained) > :first-child { margin-block-start: 0; }"
   szabálya - mivel a :root és :first-child a :where()-en KÍVÜL van - nagyobb
   specificitású (0,2,0), mint egy sima ".wp-block-post-title" (0,1,0), ezért
   az nullázná a margót (a H1 tényleg az első gyerek, ha nincs kiemelt kép). */
.wp-block-post-title.wp-block-post-title {
  margin-top: 80px;
  margin-bottom: 50px;
}

/* Lábléc: a globális címsor-szín (sötétzöld) felülírná a krém szöveget - itt öröklődjön a szülőtől. */
.khek-footer .wp-block-heading {
  color: inherit;
}

.khek-footer a {
  color: inherit;
  text-decoration: underline;
}

/* Helyszínek linkek a láblécben: alapból nincs aláhúzás, csak hoverre, illetve azon a
   linken, amelyik az éppen megnyitott oldalra mutat (a WP body page-id-* class-a alapján). */
.khek-footer a.khek-footer-location-link {
  text-decoration: none;
}

.khek-footer a.khek-footer-location-link:hover {
  text-decoration: underline;
}

body.page-id-50
  a.khek-footer-location-link[href*="kertvarosi-helytorteneti-gyujtemeny"],
body.page-id-51 a.khek-footer-location-link[href*="toth-ilonka-emlekhaz"],
body.page-id-49 a.khek-footer-location-link[href*="cinkotai-tajhaz"],
body.page-id-46 a.khek-footer-location-link[href*="latogatoi-informaciok"] {
  text-decoration: underline;
}

/* Kártya-címsorok (Helyszínek, Szolgáltatások stb.): a link ne legyen automatikusan narancs,
   csak hover-re - a design szerint a cím alapból sötétzöld/fehér, az aláhúzás/narancs a kiemelt állapot. */
.wp-block-heading a {
  color: inherit;
  text-decoration: none;
}

.wp-block-heading a:hover {
  color: var(--wp--preset--color--orange);
  text-decoration: underline;
}

/* Bekezdésen belüli link csak hoverre legyen aláhúzva. */
.wp-block-paragraph a {
  text-decoration: none;
}

.wp-block-paragraph a:hover {
  text-decoration: underline;
}

/* Core "Kép" blokk (wp-block-image): minden ilyen kép 4px lekerekítést és
   zöld szegélyt kapjon, ugyanabban a stílusban, mint a Kiadványok
   borítóképei (lásd publication-fields/style.css, publication-table/style.css). */
.wp-block-image img {
  border-radius: 4px;
  border: 1px solid var(--wp--preset--color--green);
}

/* "Ikon + szöveg" blokk linkje (pl. az automatikus mailto:) is csak hoverre legyen
   aláhúzva - a .khek-contact-row helyett szándékosan a blokk saját class-ára szűkítve,
   hogy a lábléc saját (mindig aláhúzott) kapcsolat-linkjeit ne érintse. */
.wp-block-khek-icon-text a {
  text-decoration: none;
}

.wp-block-khek-icon-text a:hover {
  text-decoration: underline;
}

/* Fejléc navigáció: legördülő almenük krém hátterű "kártyaként" jelenjenek meg, sötétzöld szöveggel.
   A hátteret/szöveget maga a core navigation block adja (overlayBackgroundColor/overlayTextColor:
   cream/green-deep) - a WP core ".has-*-color/-background-color" class-ai !important-tal jönnek,
   ezért itt csak a lekerekítést és a pozicionálást kell hozzáadni, nem a színeket felülírni. */
.khek-header .wp-block-navigation__submenu-container {
  border-radius: 10px;
  margin-top: 5px;
  right: 20px !important;
  /* Keret helyett drop shadow, ugyanaz a "MUI elevation" arnyek, mint a
     Programok oldal Datum lenyilo menujen (lasd .khek-mui-select__menu,
     templates/archive-program.css) es a legordult mobil menu alatt
     (lasd lejjebb) - az erteket a ":root"-beli valtozo adja. */
  border: none;
  box-shadow: var(--khek-menu-shadow);
}

/* Láthatatlan "híd" a trigger és a lejjebb tolt doboz között, hogy a kurzort lefelé
   mozgatva a hover ne szakadjon meg a rés miatt (a doboz gyereke, tehát hover-elhető). */
.khek-header .wp-block-navigation__submenu-container::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
  z-index: 100;
}

.khek-header
  .wp-block-navigation-item.open-on-hover-click:hover
  > .wp-block-navigation__submenu-container,
.khek-header
  .wp-block-navigation-item.open-on-click.is-menu-open
  > .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
}

/* Legördülő menüpont trigger ("Helyszínek", "Szolgáltatások"): a padding megmarad,
   mert a top:100%-os legördülő pozíciót a li (paddinggel együtt vett) alsó szélétől
   számítja - eltávolítása elmozdítaná a legördülő dobozt. Nyitott/hover állapotban
   háttér helyett a szöveg aláhúzást kap. */
.khek-header .wp-block-navigation-item.has-child {
  padding: 10px 20px;
}

.khek-header .wp-block-navigation__submenu-icon svg {
  width: 12px;
  height: 12px;
  position: relative;
  top: -3px;
}

.khek-header .wp-block-navigation-item.open-on-hover-click:hover > .wp-block-navigation-item__content,
.khek-header .wp-block-navigation-item.open-on-click.is-menu-open > .wp-block-navigation-item__content {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Sima (nem legördülő) menüpontok hover-je is 2px-es alsó vonal legyen, ugyanúgy, mint a
legördülő trigger fenti hover-je. */
.khek-header .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* A legördülő popup-ban a __content a teljes sor szélességét kitölti, ezért a
   fenti box-shadow ott a teljes soron végigfutna - a popup-ban ehelyett a
   (szöveg szélességéhez igazodó, inline) __label span kapja a vonalat, a
   __content-ét pedig kikapcsoljuk, hogy csak a szöveg alatt jelenjen meg. */
.khek-header
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item:not(.has-child)
  > .wp-block-navigation-item__content:hover {
  box-shadow: none;
}


/* Kikommentezve. FIGYELEM: a CSS nem ismeri az egymasba agyazott
   kommentet - korabban a lenti "text-decoration-thickness..." harom sor
   sajat komment-jelolokkel allt EZEN a blokkon belul, ezert a kulso
   komment mar ott lezarult. Az utana maradt zaro kapcsos zarojel es
   komment-veg jelolo elo CSS-se valt, es a hibas prelude miatt a
   bongeszo az utana kovetkezo TELJES szabalyt is eldobta (itt eppen a
   fejlec-linkek krem szinet). Ezert itt csak EGY komment-blokk van, es
   ide sosem szabad ujabb komment-jelolot tenni.

  .khek-header
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item:not(.has-child)
  > .wp-block-navigation-item__content:hover
  .wp-block-navigation-item__label {
  text-decoration: underline;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px;
  font-weight: 400;
} */

/* Fejléc szinten a link-elemek stílusa (nem a legördülőben) maradjon krém. */
.khek-header .wp-block-navigation-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--cream);
}

/* ...de a mobil teljes képernyős overlay (cream/green-deep overlay-
   színekkel) NYITOTT állapotában a linkek sötétzöldek legyenek, ne
   krémek. FONTOS: csak ".is-menu-open" eseten - asztali nezetben
   ugyanez a ".wp-block-navigation__responsive-container" a NORMAL
   (zold hatteru) sor resze (a core >=600px-nel igy jeleniti meg), ott
   a fenti szabaly szerint kremnek KELL maradnia - enelkul a scope
   nelkul a fejlec sotetzold szovegre valtott volna a zold hatteren
   (majdnem lathatatlan). A legordulo almenu-kartyak (asztali dropdown)
   szinet kulon, mindig ervenyes szabaly adja (lasd lejjebb,
   ".khek-header .wp-block-navigation__submenu-container ..."). */
.khek-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
    cursor: pointer;
  color: var(--wp--preset--color--green-deep);
  white-space: nowrap;
}

/* A kozti tavolsagot a __content helyett magan a li-n (wp-block-navigation-item)
   adjuk hozza, hogy a szimmetrikus 10px padding (lasd .has-child, feljebb) miatt
   a szoveg kozepen maradjon, es a legordulo doboz top:100% pozicioja is a
   paddinggel egyutt vett also szelhez igazodjon. */
.khek-header
  .wp-block-navigation__responsive-container
  .wp-block-navigation-item {
  margin-top: 0;
}
.khek-header
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  color: var(--wp--preset--color--green);
}

/* A fejléc navigáció lineHeight:1-je a felső sávnak való - a legördülő almenüben ez
   túl szorossá teszi a sorokat (a tördelt, két soros elemeket is). A terven mért érték
   szerint az elemek között ~35px a távolság, egy elemen belüli tördelt sorok között
   viszont a normál (nem összenyomott) sorköz jár. */
.khek-header .wp-block-navigation__submenu-container {
  padding-top: 20px;
  padding-bottom: 30px;
  gap: 30px;
  border-radius: 6px;
}
.wp-block-navigation
  .has-child
  .wp-block-navigation__submenu-container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
  padding: 0 1em;
  white-space: nowrap;
}

/* A fejlec logoja SOSEM zsugorodhat: flex-shrink:0 nelkul a
   ".khek-header__inner" (flexWrap:nowrap, lasd header.html) az osszes
   flex-gyereket (logo+navigacio) aranyosan osszenyomna, ha a menüpontok
   nem fernenek ki - ez zsugoritotta eddig a logot is. A navigacio is
   flex-shrink:0-t kap, hogy zsugorodas helyett a sajat termeszetes
   (nem osszenyomott) szelesseget tartsa - ha ez igy sem fer ki, a
   ".khek-header__inner" tenylegesen tulcsordulna. A header-nav.js ezt
   ugy elozi meg, hogy a gyerekek (logo + navigacio) egyuttes szelesseget
   meri a doboz TARTALOM-szelessegehez (padding nelkul), es sorban
   szukiti a menupontok kozti rest, majd a fejlec bal/jobb terkozet -
   utolso lepeskent teszi fel a "khek-header--force-mobile" osztalyt
   (lasd lejjebb). Szandekosan NINCS itt "overflow:hidden" - az levagna a
   lefele nyilo legordulo almenu-kartyakat is, amik szinten ennek a
   doboznak a gyerekei. */
/* A header.html sajat INLINE "padding:22px 110px"-jet irja felul (ezert
   kell az !important - inline style-t kulonben semmilyen stilluslap-
   szabaly specificitasa nem tudna legyozni), hogy a
   "--khek-header-padding-x" valtozon keresztul (lasd a fajl elejen) a
   tartalmi reszhez hasonloan toresponttol fuggoen valtozzon, ne
   maradjon fixen 110px minden szelessegnel. */
/* A max-width + auto margo korabban a header.html-be kezzel beleirt inline
   style-ban allt. Az viszont a blokk attributumaibol NEM vezetheto le, ezert a
   Gutenberg blokk-validacioja elbukott rajta: a szerkesztoben a fejlec helyen
   "A blokk váratlan vagy érvénytelen tartalmat tartalmaz" figyelmeztetes
   allt, es a blokk csak nyers HTML-kent (nem szerkesztheto blokkfakent)
   jelent meg. Innen, CSS-bol ugyanaz az eredmeny, validacios hiba nelkul. */
.khek-header__inner {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--khek-header-padding-x) !important;
  padding-right: var(--khek-header-padding-x) !important;
}

.khek-header__inner > .wp-block-site-logo {
  flex-shrink: 0;
}

.khek-header__inner > .wp-block-navigation {
  flex-shrink: 0;
}

/* A menüpontok kozotti res (blockGap) alapertelmezetten az eredeti,
   szerkesztoben beallitott 120px marad. A header-nav.js mereses alapjan
   (nem viewport-szelesseg alapjan) allitja at a "--khek-nav-gap" valtozot,
   ha 120px-szel mar nem fer ki a menü: fokozatosan 30px-ig csokkentheti,
   hogy megprobalja kiferni tordeles/mobil-valtas nelkul. Az auto-generalt
   "wp-container-core-navigation-is-layout-*" class instabil (a WP
   ujra-generalja, ha a navigacio blokk layout-beallitasait szerkesztik) -
   ha ez a szabaly egyszer csak nem hatna, valoszinuleg ez a class valtozott
   meg a szerkesztoben, es ujra ki kell olvasni az uj hash-t. */
.wp-container-core-navigation-is-layout-d71b59a4 {
  gap: var(--khek-nav-gap, 120px);
}

/* A fenti "gap" a NAV elemen (<nav class="wp-block-navigation ...
   wp-container-core-navigation-is-layout-*">) van beallitva, a core
   sajat CSS-e pedig innen "gap:inherit" lancolattal viszi tovabb a
   .wp-block-navigation__responsive-container-en, ...-close-on,
   ...-dialog-on, ...-container-content-en at egeszen a tenyleges
   UL-ig (lasd wp-includes/blocks/navigation/style.css). Legordult
   mobil overlay-ben (ahol a core flex-direction:column-ra valt) ez
   ugyanazt a 120px-et FUGGOLEGES resse tenne, ami "flex-wrap:nowrap"
   mellett (a desktop-sor oroksege) tobb oszlopba tordelne az
   elemeket, es vizszintesen tulcsordulna a kepernyon. A lancot itt,
   a legelso elemen ("responsive-container", ahova a core sajat
   "gap:inherit" szabalya csak 1 osztalynyi specificitassal van
   felveve) szakitjuk meg egy konkret ertekkel - az elemek kozotti
   tert innentol sajat (border-bottom-alapu) tavolsag adja, lasd
   lejjebb. */
.khek-header .wp-block-navigation__responsive-container.is-menu-open {
  gap: 0;
}

/* A WP core navigacio blokk sajat torespontja fixen 600px (lasd
   wp-includes/blocks/navigation/style.css "@media (min-width: 600px)") -
   ezt hasznaljuk mobil alatt (valtozatlan). 600px felett viszont NEM fix
   torespont donti el a mobil/asztali nezetet, hanem a header-nav.js:
   ha a menüpontok (a fenti flex-shrink:0 es responsziv res mellett is)
   nem fernek ki egy sorban, a script felteszi ezt az osztalyt, ami
   ugyanazokat a szabalyokat alkalmazza, mint a core alapertelmezetten
   600px alatt hasznal. A szelektorok specificitasa (.khek-header
   hozzaadasaval) szandekosan >= a core sajat "min-width:600px"
   szabalyaienal, hogy garantaltan felulirja azokat. */
.khek-header.khek-header--force-mobile .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.khek-header.khek-header--force-mobile .wp-block-navigation__responsive-container-open:not(.always-shown) {
  display: flex;
}

/* ============================================================
   Mobil (overlay) menü - egyedi "belefúrható" (drill-down) nézet.
   A WP core mobil overlay-je alapértelmezetten egyetlen hosszú,
   lapos listát mutat, amiben MINDEN almenü mindig nyitva van (lásd
   wp-includes/blocks/navigation/style.css: ".is-menu-open ...
   .has-child .wp-block-navigation__submenu-container" mindig
   opacity:1/visibility:visible/height:auto-t kap, a toggle-gombokat
   (chevron) pedig teljesen elrejti mobil nézetben - tehát nincs
   natív "becsukott" állapot, amire építeni lehetne). Ehelyett a
   header-mobile-menu.js saját osztályokkal (khek-mobile-menu__*)
   vezérli, melyik almenü látszik - az itt lévő szabályok ezekre az
   osztályokra épülnek, a ".khek-header .../is-menu-open" előtaggal
   a core fenti, kényszerítő szabályánál nagyobb specificitással. */

/* Perzisztens zöld sáv (logó + bezáró X) a legördült overlay tetején -
   a header-mobile-menu.js szúrja be (klónozott logó + a core saját,
   áthelyezett bezáró gombja, hogy a data-wp-on--click kötése megmaradjon).
   A negatív margó a dialog saját (clamp-alapú) paddingját "engedi el",
   hogy a zöld sáv a valódi oldalszélig fusson - ugyanaz az elv, mint a
   ".khek-band-inner" tartalmi sávok bal/jobb kifutásánál. */
/* A padding-left/right ugyanazt a "--khek-header-padding-x" valtozot
   hasznalja, mint a ".khek-header__inner" (lasd a fajl elejen es
   feljebb) - igy a ket allapot (zart fejlec / legordult overlay)
   MINDIG szinkronban marad, barmelyik toresponton, es a logo/X
   vizszintesen nem "ugrik" a legordules pillanataban. */
/* A topbar (JS altal beszurt elem) ALAPBOL rejtve van - a JS mindig
   letrehozza, fuggetlenul attol, hogy eppen nyitva van-e az overlay
   vagy egyaltalan mobil nezetben vagyunk-e. Enelkul a szabaly nelkul
   asztali nezetben is megjelenne (a core a ".responsive-container"-t
   >=600px-nel a sima sor reszekent jeleniti meg, csak a bezaro
   GOMBOT rejti el, a korulötte levo dialogot/topbart nem) - ez adott
   ~1700px plusz szelesseget a fejlecnek, ami miatt a header-nav.js
   folyamatosan "nem fer ki"-nek erzekelte a tartalmat, es MINDEN
   szelessegnel mobil nezetre valtott. */
.khek-header .khek-mobile-menu__topbar {
  display: none;
}

.khek-header .wp-block-navigation__responsive-container.is-menu-open .khek-mobile-menu__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background-color: var(--wp--preset--color--green);
  color: var(--wp--preset--color--cream);
  padding-top: 22px;
  padding-bottom: 22px;
  padding-left: var(--khek-header-padding-x);
  padding-right: var(--khek-header-padding-x);
  margin-top: calc(-1 * clamp(1rem, var(--wp--style--root--padding-top, 0px), 20rem));
  /* A bal/jobb negativ margo PONTOSAN annyi, amennyi a dialogus sajat
     vizszintes paddingja (lasd lejjebb, ".is-menu-open" szabaly:
     "--khek-header-padding-x") - igy fut ki a zold sav a kepernyo
     szeleig. A ket erteknek egyutt kell valtoznia, kulonben a sav pont
     a kulonbseggel maradna el a szeltol. */
  margin-right: calc(-1 * var(--khek-header-padding-x));
  margin-left: calc(-1 * var(--khek-header-padding-x));
}

/* A legordult mobil menu vizszintes terkoze is a fejlecevel egyezzen
   ("--khek-header-padding-x", mobil nezetben 35px). A core ezt alapbol a
   TARTALMI resz gyoker-paddingjabol szamolja
   ("padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20rem)",
   lasd wp-includes/blocks/navigation/style.css), ami mas ertek (30px, ill.
   100px) - emiatt a menupontok nem a logohoz/hamburgerhez igazodtak.
   Csak a bal/jobb erteket irjuk felul: a fuggoleges paddingot a topbar
   negativ felso margoja szamolja ki (lasd feljebb), azt nem szabad
   elmozditani.
   A ":not(.disable-default-overlay)" resz KIZAROLAG specificitas miatt van
   itt: a core padding-szabalya is 3 osztalynyi, igy viszont 4 - tehat a
   betoltesi sorrendtol fuggetlenul nyerunk. */
.khek-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  /* Ugyanaz a drop shadow, mint az asztali legordulo almenu-kartyakon (lasd
     a ":root"-beli "--khek-menu-shadow"-t). Az arnyek gyakorlatilag csak a
     menu ALATT latszik: a panel a kepernyo tetejerol indul es teljes
     szelessegu, tehat a felso/oldalso arnyek a nezeten kivulre esik - az
     also viszont pont az utolso menupont alatti elre kerul (lasd lejjebb a
     "bottom: auto"-t, ami a panelt a tartalma magassagara zsugoritja). */
  box-shadow: var(--khek-menu-shadow);
  padding-left: var(--khek-header-padding-x);
  padding-right: var(--khek-header-padding-x);
}

.khek-header .khek-mobile-menu__topbar img {
  display: block;
}

/* A core a bezáró gombot position:absolute-tal a dialog jobb-felső
   sarkába pozicionálja - a topbar flex-sorába áthelyezve ez felülírandó,
   hogy rendes flex-elemként a "space-between" végére kerüljön. */
.khek-header .khek-mobile-menu__topbar .wp-block-navigation__responsive-container-close {
  position: static;
  z-index: auto;
}

/* Alapállapotban (semmi sincs "belefúrva") minden almenü zárva - a core
   fent említett, mindig-nyitott szabályát írja felül. A core sajat
   "nyitott" szabalya "width:auto;min-width:200px;position:static"-ot is
   ad (lasd wp-includes/blocks/navigation/style.css) - ezt is nullazni
   kell, kulonben a (lathatatlanul is layout-ban maradó, pl. "Kertvárosi
   Helytörténeti Gyűjtemény" hosszúságú) szöveg min-content szélessége
   szétfeszítené a teljes (fixed pozíciójú) overlay-t. A padding is
   nullázandó: az asztali legördülő "kártya" sajat
   padding-top/bottom-ja (lásd feljebb, ".khek-header
   .wp-block-navigation__submenu-container") height:0 mellett is
   helyet foglalt volna (a padding nem "overflow" tartalom, azt nem
   vágja le az overflow:hidden), ez okozta az egyenetlen, túl nagy
   réseket a főmenü-elemek és az elválasztó vonaluk között. */
.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
  opacity: 0;
  visibility: hidden;
  height: 0;
  width: 0;
  min-width: 0;
  padding: 0;
  margin-top: 0;
  overflow: hidden;
}

/* A JS által megjelölt, épp "belefúrt" elem almenüje látszódjon. A
   ".khek-header .wp-block-navigation__submenu-container" szabály (lásd
   feljebb) az ASZTALI legördülő "kártyát" stílusozza (kerekítés,
   árnyék, jobbra igazítás, right:20px !important) - ugyanaz az elem,
   ezért itt vissza kell állítani a mobil, teljes szélességű, síkban
   megjelenő listás nézethez. */
.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child.khek-mobile-menu__submenu-open .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  height: auto;
  width: 100%;
  min-width: 0;
  overflow: visible;
  position: static;
  right: auto !important;
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  align-items: stretch;
}

.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child.khek-mobile-menu__submenu-open .wp-block-navigation__submenu-container::before {
  display: none;
}

.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child.khek-mobile-menu__submenu-open .wp-block-navigation__submenu-container > li {
  align-items: stretch;
}

.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child.khek-mobile-menu__submenu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  justify-content: flex-start;
}

/* Amíg egy elem "belefúrva" nyitva van, a főmenü többi eleme elrejtőzik -
   csak a nyitott elem (cím+almenü) és a "Vissza" gomb látszik. A
   ".is-menu-open" elengedhetetlen: e nélkül a header-mobile-menu.js
   kattintás-figyelője (ami a JS-t mérettől függetlenül, MINDIG
   felteszi minden "has-child" elemre) asztali nézetben is elrejtette
   volna a többi menüpontot, amint valaki rákattintott egy legördülő
   triggerre (pl. "Helyszínek") - ez törte el teljesen az asztali
   menüt. */
.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.khek-mobile-menu__drilldown-active > li:not(.khek-mobile-menu__submenu-open) {
  display: none;
}

/* "Vissza a főmenübe" gomb - a JS szúrja be egyszer, a főmenü-lista
   elején, alapból elrejtve. */
.khek-mobile-menu__back {
  display: none;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 20px 0;
  border: none;
  border-bottom: 1px solid var(--wp--preset--color--green-deep);
  background: none;
  color: var(--wp--preset--color--green-deep);
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.khek-mobile-menu__drilldown-active .khek-mobile-menu__back {
  display: flex;
}

/* A nav blokk sajat "items-justified-right" beallitasa (asztali nezetben
   jobbra rendezi a menüpontokat) a core "--navigation-layout-align"
   valtozojan keresztul TOBB egymasba agyazott flex-szinten is
   (".../responsive-container-content", ".../wp-block-navigation__container"
   ES maguk a fomenu <li>-k, lasd core style.css) jobbra/osszezsugoritva
   igazitanak - mindegyik szinten teljes szelessegre nyujtjuk, balra
   rendezve, kulonben csak az elvalaszto vonalak lennenek teljes
   szelesek, a szoveg/nyil sor pedig zsugorodva jobbra tolodna. */
.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li {
  align-items: stretch;
  justify-content: flex-start;
}

/* A core sajat "padding-top:calc(2rem + 24px)"-je (lasd
   wp-includes/blocks/navigation/style.css) a menüsor felett hagy egy
   plusz teret - a sajat zold topbarunk (lasd feljebb) mar ad sajat
   also paddingot/vizualis elvalasztast, ezert ez a plusz core-térköz
   itt feleslegesen nagy rest hagyott a topbar es az elso menüpont
   kozott. */
.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 0;
}

/* A <li> (flex, oszlop-irány) ket gyereke a .content sor es a
   (zart allapotban 0 magassagu) submenu-container - az oroklodo "gap"
   (lasd a "--khek-nav-gap" hasonlo problemajat feljebb) meg 0
   magassagu gyerekek KOZOTT is helyet foglalna, ez okozta, hogy az
   almenüs elemeknek (Helyszínek, Szolgáltatások, Rólunk...) nagyobb
   volt a sortávolsága, mint az egyszerű linkeknek (Programok). Az
   asztali legordulo trigger sajat "padding:10px 20px"-je (lásd
   ".khek-header .wp-block-navigation-item.has-child" feljebb) ugyanezt
   a plusz teret adta hozza - a terkozt itt kizarolag a .content sajat
   "padding:20px 0"-ja adja (lásd lejjebb), ezert mindkettot nullazni
   kell. */
.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li {
  gap: 0;
  padding: 0;
}

.khek-mobile-menu__back svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transform: scaleX(-1);
}
/* Főmenü-elemek: vékony elválasztó vonal, bőséges füg­gőleges tér. */
.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li {
  border-bottom: 1px solid var(--wp--preset--color--green-deep);
}

.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li > .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  /* Vizszintesen nincs sajat padding: a menupont szovege igy pontosan a
     dialogus (fejleccel megegyezo, 35px-es) terkozehez igazodik - vagyis a
     logohoz, a hamburgerhez es a "Vissza" gombhoz (ami szinten
     "padding: 20px 0"-val all). A korabbi 10px ezt mind eltolta. */
  padding: 30px 0 !important;
  font-size: 20px;
  font-weight: 700;
}

/* ">" jelzés az almenüvel rendelkező elemeken - a core saját
   toggle-gombját/ikonját mobil nézetben elrejti (lásd fent), ezért ez
   saját, mask-image-vel (currentColor-ral színezett) ikon. */
.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li.has-child > .wp-block-navigation-item__content::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url(assets/icons/chevron-right.svg) no-repeat center / contain;
  mask: url(assets/icons/chevron-right.svg) no-repeat center / contain;
}

/* Nyitott ("belefúrt") állapotban a cím alahúzást kap, a nyilat pedig
   elrejtjük - abban a nézetben már nincs értelme (már "bent" vagyunk). */
.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li.khek-mobile-menu__submenu-open > .wp-block-navigation-item__content {
  text-decoration: none !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: 0 !important;
  border-bottom: 3px solid var(--wp--preset--color--green-deep);
}

.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li.khek-mobile-menu__submenu-open > .wp-block-navigation-item__content::after {
  display: none;
}

/* Almenü-elemek (a "belefúrt" nézetben látszó linkek): normál betűsúly,
   saját alsó elválasztó vonallal. */
.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
  border-bottom: 1px solid var(--wp--preset--color--green-deep);
}

.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  /* Vizszintes padding nelkul - ugyanaz az igazitas, mint a fomenu-elemeknel
     (lasd feljebb). */
  padding: 30px 0 !important;
  font-weight: 400;
  font-size: 20px;
}

/* Az UTOLSO menupont utan mar ne legyen elvalaszto vonal (a lista vegen
   lezaro vonalkent hatott, kulonosen mióta a legordult menü csak a
   tartalma magassagaig er, lasd lejjebb). Harom helyen kell levenni:

   1) fomenu utolso eleme - a "li:last-child" biztonsagos, mert a
      header-mobile-menu.js a "Vissza" gombot a lista ELEJERE szurja be
      (topList.insertBefore(backButton, topList.firstChild)), tehat az
      utolso gyerek mindig a legalso menupont;
   2) almenu ("belefurt" nezet) utolso linkje;
   3) maga a nyitott (belefurt) fomenu-elem: a vonala nem a cime alatt,
      hanem a TELJES elem aljan - vagyis az almenu utolso linkje utan -
      jelenik meg, igy ott ket vonal futott egymas alatt.

   Mindharom szabaly a megfelelo alap (vonalat ado) szabaly UTAN all, es
   a ":last-child"/".khek-mobile-menu__submenu-open" miatt nagyobb is a
   specificitasa, tehat biztosan nyer. */
.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li:last-child,
.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li.khek-mobile-menu__submenu-open,
.khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
  border-bottom: none;
}

/* 530px alatt (kis mobil) a menüpontok 30px-es függőleges térköze már túl
   sok: a fő- és almenü-elemek együtt nem fértek ki egy képernyőre. Itt
   21px-re csökken - a vízszintes 10px változatlan. Mindkét menüszint
   (főmenü-elemek és a "belefúrt" nézet almenü-linkjei) ugyanazt az
   értéket használja, ezért közös szabály; az "!important" azért kell,
   mert a felülírt alap szabályok is azzal jönnek (a core saját
   ".wp-block-navigation-item__content" paddingja miatt), és e nélkül a
   rövidebb (nem !important) érték veszítene. */
@media (max-width: 540px) {
  .khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > li > .wp-block-navigation-item__content,
  .khek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    padding-top: 21px !important;
    padding-bottom: 21px !important;
  }
}

/* 540px alatt a legordult menu ne fusson a kepernyo aljaig, hanem az utolso
   menupont also elvalaszto vonalanal vegzodjon. A teljes kepernyos dobozt a
   core alap szabalya adja ("position:fixed" + top/left/right/bottom:0, lasd
   wp-includes/blocks/navigation/style.css ".wp-block-navigation__responsive-container") -
   a "bottom:auto" elengedi az also szelt, igy a magassagot a tartalom
   (topbar + menupontok) hatarozza meg, a krem hatter pedig pontosan ott er
   veget. A "padding-bottom:0" a core clamp-alapu also dialogus-paddingjat
   veszi le, kulonben az utolso vonal alatt maradna meg egy krem sav.
   A ":not(.disable-default-overlay)" resz KIZAROLAG specificitas miatt van
   itt: a core padding-szabalya (".wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)")
   is 3 osztalynyi, tehat egy ".khek-header"-es szelektorunk csak dontetlent
   erne el (a betoltesi sorrend dontene) - igy viszont 4 osztaly, ami mindig nyer. */
@media (max-width: 540px) {
  .khek-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    bottom: auto;
    padding-bottom: 0;
    /* Sok menupont (vagy fekvo tajolasu, alacsony kepernyo) eseten se logjon
       ki a kepernyobol - ilyenkor a core sajat "overflow:auto"-ja gorgeti a
       tartalmat. A "dvh" a mobil bongeszok be-/kicsuszo cimsavjat is
       figyelembe veszi, ezert ha van ra tamogatas, azt hasznaljuk. */
    max-height: 100vh;
  }
}

@supports (max-height: 100dvh) {
  @media (max-width: 540px) {
    .khek-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
      max-height: 100dvh;
    }
  }
}

/* Lábléc kapcsolat-sorok: ikon + szöveg egy sorban, függőlegesen középre igazítva. */
.khek-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.khek-icon-contact {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Lábléc social ikonok: SVG-k egy sorban, egyenletes távolsággal. */
.khek-social-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.khek-social-links a {
  display: inline-flex;
  color: var(--wp--preset--color--cream);
}

.khek-social-links a:hover {
  color: var(--wp--preset--color--orange);
}

.khek-icon-social {
  width: 30px;
  height: 30px;
}

/* Ikonnal ellátott címsorok/linkek (kártyák "chevron-right"-ja): szöveg + ikon egy sorban. */
.khek-heading-with-icon a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.khek-heading-with-icon svg {
  flex-shrink: 0;
}

/* Szolgáltatások kártyák könyv ikonja: narancssárga, a szöveg fölött. */
.khek-service-icon {
  margin-bottom: 14px;
}

.khek-service-icon svg {
  color: var(--wp--preset--color--orange);
}

/* Hero "Helyszínek" görgetésjelző: szöveg + lefelé mutató nyíl, egymás alatt,
   a hero aljához rögzítve (a .khek-hero position:relative-je viszonyítási
   alap). Kattintva a #helyszinek horgonyra (khek/location-cards blokk) ugrik. */
.khek-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: absolute;
  left: 50%;
  bottom: 62px;
  transform: translateX(-50%);
  z-index: 1;
  color: var(--wp--preset--color--cream);
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
}

.khek-scroll-hint:hover {
  color: var(--wp--preset--color--orange);
}

/* Lábléc: teljes szerkezet CSS class-okból, a Landing terv (SVG) mért értékei alapján.
   A vízszintes (94px) és függőleges padding a tartalmi résszel megegyező
   töréspontokon (1023px, 549px) csökken - enelkul pl. 320-390px-es
   mobilokon a 2*94px padding a tartalomnak alig 130-200px-et hagyott
   volna, ami szükségtelenül tördelte a szöveget (pl. e-mail cím,
   "Partnerintézmények" cím szavak közepén tört volna). */
.khek-footer__inner {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding: 64px 94px 159px;
}

@media (max-width: 1023px) {
  .khek-footer__inner {
    padding: 50px 50px 100px;
  }
}

@media (max-width: 549px) {
  .khek-footer__inner {
    padding: 40px 30px 60px;
  }
}

.khek-footer__columns {
  column-gap: 50px;
  row-gap: 30px;
}

/* Oszlopszélességek: Kapcsolat/Helyszínek szélesebb, Partnerintézmények/Fenntartó keskenyebb (a terv szerint nem egyenlő ötödök).
   A wp-core reszponzív oszlop-szabálya (.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:0;flex-grow:1})
   3 osztálynyi specificitású - ezért kell ide is legalább ennyi (a .khek-footer előtag adja a negyediket biztonsági ráhagyásként).
   A core sajat "@media(max-width:781px){...flex-basis:100%!important}" szabalya
   781px alatt mindig teljes szelessegre allitja (stackeli) az oszlopokat -
   az itteni szazalekos ertekek csak 781px felett ervenyesulnek. */
.khek-footer .khek-footer__columns > .khek-footer__col {
  flex: 0 1 37%;
  display: flow-root;
}

.khek-footer .khek-footer__columns > .khek-footer__col:nth-child(3) {
  flex: 0 1 28%;
}

.khek-footer .khek-footer__columns > .khek-footer__col:nth-child(4) {
  flex: 0 0 100px;
}

/* 781px alatt (core stack-torespont) a "Fenntartó" oszlop is teljes
   szelesseget kap (flex-basis:100% !important a core-tol) - a sajat
   fix "flex:0 0 100px"-unk flex-grow/shrink resze (0 0) itt mar nem
   szamit, csak a logo sajat merete hatarozza meg a tenyleges
   szelesseget (lasd ".khek-footer-logo--large" lejjebb). */

/* A core csak 781px alatt allitja teljes szelessegre (stackeli) az
   oszlopokat - eddig a pontig viszont a 4 oszlop (37/37/28/100px)
   782-1024px kozott mar tul szuknek bizonyult (pl. a "Partnerintézmények"
   cim, vagy a "kapcsolat@..." email sortores kozepen tordelodott). Itt,
   1024px-nel (a leggyakoribb tablet/iPad fekvo szelesseg, hogy azt is
   lefedje - a tartalmi resz sajat 1023px-es toresponja ettol
   szandekosan elter) mar korabban (a core sajat 781px-e elott) egy
   oszlopba rendezzuk. A core a ".wp-block-columns"-t 782px-tol
   "flex-wrap:nowrap !important"-tal latja el (a sajat, csak 781px
   ALATT ervenyes stack-szabalya "wrap"-ot hagyna) - ez itt, a
   flex-basis:100% MELLETT, mind a negy oszlopot egyetlen (nowrap)
   sorba kenyszeritette volna, ami a flex-shrink miatt szinte 0
   szelessegre nyomta ossze oket (a szoveg emiatt betunkent tordelt,
   fuggolegesen). A wrap-et ezert itt vissza kell allitani. */
@media (max-width: 1024px) {
  .khek-footer .khek-footer__columns {
    flex-wrap: wrap !important;
    gap: 35px;
  }

  .khek-footer .khek-footer__columns > .khek-footer__col,
  .khek-footer .khek-footer__columns > .khek-footer__col:nth-child(3),
  .khek-footer .khek-footer__columns > .khek-footer__col:nth-child(4) {
    flex-basis: 100%;
  }
}

.khek-footer-heading {
  font-size: 15px;
  border-bottom: 2px solid var(--wp--preset--color--cream);
  padding-bottom: 19px;
  margin-bottom: 24px;
}

/* A ":root" parositasa (0,1,1) a bekezdes-margo miatt kell: a theme.json
   "styles.blocks.core/paragraph.spacing.margin" erteke ":root :where(p)
   {margin-bottom:20px}"-kent jelenik meg, ami ugyanolyan (0,1,0)
   specificitasu, mint egy sima ".khek-footer-row" lenne - vagyis csak a
   betoltesi sorrend dontene. A frontenden a tema style.css-e kesobb toltodik
   be (nyert), a SZERKESZTOBEN (Site Editor - Lablec) viszont korabban
   (vesztett): ott a lablec sorai 17 helyett 20px-es kozzel latszottak. */
:root .khek-footer-row {
  font-size: 15px;
  margin-top: 0;
  margin-bottom: 17px;
}

/* 1024px alatt (a fenti oszlop-stackeles toresponja) a sorok kozotti
   terkoz szukebb - a szabalynak a ".khek-footer-row--last" ELE kell
   kerulnie (forras-sorrendben), kulonben (azonos specificitas mellett)
   a kesobb allo "--last" szabalyt irna felul, es az utolso sor is
   12px also margot kapna 0 helyett. */
@media (max-width: 1024px) {
  :root .khek-footer-row {
    margin-bottom: 12px;
  }
}

/* A ":root" itt is kell - lasd a ".khek-footer-row" fenti megjegyzeset -, hogy
   ugyanabban a specificitasi osztalyban maradjon, es a sorrend dontson. */
:root .khek-footer-row--last {
  margin-bottom: 0;
}

.khek-footer-separator {
  margin-top: 24px;
  margin-bottom: 27px;
}

.khek-footer-legal {
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 30px;
}

.khek-footer-copyright {
  font-size: 15px;
  margin-top: 18px;
}

/* Copyright + keszito ("Készítette: Axeri Labs") egy sorban: a copyright
   balra, a keszito jobbra (a csoport "space-between" elrendezese miatt, lasd
   parts/footer.html). Ahol mar nem fernek ki egymas mellett, a "flexWrap:
   wrap" a keszitot a kovetkezo sorba viszi - ilyenkor a "row-gap" adja a ket
   sor kozotti terkozt.
   A ket bekezdes sajat fuggoleges margoit nullazzuk: a sor feletti terkozt
   egyben a csoport "margin-top"-ja adja, kulonben a flex-elemek sajat margoi
   melle adodna. */
.khek-footer__copyright-row {
  margin-top: 18px;
  column-gap: 30px;
  row-gap: 6px;
}

.khek-footer__copyright-row .khek-footer-copyright,
.khek-footer__copyright-row .khek-footer-credit {
  margin-top: 0;
  margin-bottom: 0;
}

.khek-footer-logo {
  display: block;
  height: 48px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  background-color: #FFFFFF;
  border-radius: 4px;
  padding: 4px;
}

.khek-footer-logo--large {
  height: 96px;
  max-width: 240px;
  align-self: flex-start;
}

/* A global styles a theme.json gyökér blockGap-jéből (1.5rem) ad térközt a header/main/footer
   közé (:where(.wp-site-blocks) > *) - a :where() miatt 0 specificitású, ezért egy sima
   class-szelektor felülírja, a blockGap értékét viszont nem kell emiatt máshol megváltoztatni. */
.wp-site-blocks > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.wp-site-blocks > header {
  margin-block-end: 0;
}

.wp-site-blocks > main {
  padding-bottom: 60px;
}

.home .wp-site-blocks > main {
  padding-bottom: 0;
}

/* A h2/h3/h4 "line-height: normal" erteke MAR A FORRASNAL, a theme.json-ban
   van beallitva (styles.elements.h2/h3/h4.typography.lineHeight) - itt
   szandekosan NINCS hozza CSS szabaly.

   Miert? Korabban itt allt egy " h2, h3, h4 { line-height: normal; }" szabaly,
   ami a theme.json-bol generalt "h3{line-height:1}"-et irta felul. Mindketto
   (0,0,1) specificitasu, tehat a sorrend dontott: a FRONTENDEN a tema
   style.css-e a global styles UTAN toltodik be (nyert), a SZERKESZTOBEN
   viszont ELOTTE (vesztett) - vagyis a szerkesztoben minden cimsor
   osszepréselt (line-height:1) sorkozzel latszott, a frontendtol elteroen.
   A specificitas emelese (pl. ":root h3") nem jo megoldas: az a blokkok sajat,
   egy osztalynyi (0,1,0) sorkoz-szabalyait is elutne (pl.
   ".khek-location-cards__title { line-height: 34px }"). A theme.json-ban
   viszont a forrasnal szunik meg az utkozes, a kaszkad valtozatlan marad. */

/* A theme.json h4-nek szant margin-bottom:20px-et felulirna a WP global styles
   layout-flow/constrained szabalya (":root :where(.is-layout-flow) > *{margin-block-end:0}") -
   a :root miatt (0,1,0) specificitasu, tobb, mint egy sima "h4" (0,0,1). Ide ezert
   kell egy valodi class a :where()-en kivul, hogy legalabb egyenlo specificitasu
   legyen, es a kesobb betoltodo style.css nyerje a dontetlent. */
.is-layout-flow > h3,
.is-layout-constrained > h3 {
  margin-top: 30px;
  margin-bottom: 20px;
}

.is-layout-flow > h4,
.is-layout-constrained > h4 {
  padding-top: 10px;
  margin-top: 0;
  margin-bottom: 20px;
}

/* "KHEK elválasztó" block style (lasd functions.php register_block_style) - csak
   az .is-style-khek-separator valasztasakor aktiválódik, a sima Separator
   alapertelmezett kinezete erintetlen marad. */
.wp-block-separator.is-style-khek-separator {
  border-top-width: 1px;
  border-top-color: #259254;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* Ez az "Araink" soroknal (pl. "Belepojegy" / "500 Ft/fo") hasznalt Csoport
   blokk grid-elrendezese - a WP alapertelmezett "repeat(auto-fill,
   minmax(12rem, 1fr))" ket oszlopa akkor kollabalna 1 oszlopra (a ket sor
   egymas ala tordelve), ha a rendelkezesre allo hely a 2*12rem alá csokken
   (ez tortent 1470px alatt). A ket bekezdes sajat columnSpan-je (3 es 2)
   alapjan itt fix, sosem kollabalo aranyt adunk.

   A szabaly korabban KIZAROLAG az auto-generalt
   "wp-container-core-group-is-layout-7d05cc0d" class-ra vonatkozott. Ez ket
   okbol rossz: (1) a WP ujra-generalja a hash-t, ha a blokk layout-beallitasai
   valtoznak, (2) a SZERKESZTOBEN egeszen mas (sorszamozott) class-t kap
   ugyanez a blokk, vagyis ott a szabaly egyaltalan nem ervenyesult - a
   csoportok mas margoval es (keskenyebb vasznon) mas oszlopszammal latszottak,
   mint a valo eletben. Ezert a stabil, elrendezes szerinti class is szerepel
   itt. Jelenleg a teljes oldalon EZ az egyetlen grid-elrendezesu Csoport blokk
   (Latogatoi informaciok, 6 db "Araink" sor) - ha kesobb mas celra is kellene
   grid-csoport, annak sajat class-t kell adni, es ezt a szabalyt szukiteni. */
.wp-container-core-group-is-layout-7d05cc0d,
.wp-block-group.is-layout-grid {
  margin-top: 0;
  margin-bottom: 20px;
  /* A ket bekezdes columnSpan-je (3 es 2) osszesen 5 - ide ezert PONTOSAN 5
     track kell (nem 2, pl. "3fr 2fr"), kulonben a span:3 elem betolti az
     osszes explicit oszlopot, a grid egy implicit 3. oszlopot general neki,
     es a span:2 elemnek mar nem marad hely az 1. soron - ez korabban EPPEN
     azt a hibat okozta, hogy mindig (meg nagy felbontason is) 2 sorba
     tordelt.
     A "container-type:inline-size" (WP core adja a grid-layoutu Csoport
     blokkoknak) miatt a ket bekezdes sajat generalt class-a is kap egy
     "@container (max-width: 39rem)" szabalyt, ami ~624px alatti CSOPORT-
     szelessegnel (nem viewport-szelessegnel!) mindket bekezdest teljes
     sorszelessegre ("grid-column:1/-1") kenyszeriti - ez okozta az ujbóli
     tordelest ~840px viewport alatt. A "container-type:normal"-lal
     megszuntetjuk ezt a container-query kontextust, igy az a szabaly
     tobbe nem tud ervenybe lepni. */
  container-type: normal !important;
  grid-template-columns: repeat(5, 1fr) !important;
}

/* Kozos tartalmi szelesseg-korlat: onmagaban kozepre igazitja magat (margin
   auto + max-width), fuggetlenul attol, hogy milyen szeles a szulo-eleme.
   Ezt hasznalja pl. a Helyszinek/location-cards blokk (nem alignfull, a
   normal tartalmi oszlopban all), valamint - a fejlec/pontozo resze erejeig -
   a Programok/Szolgaltatasok alignfull lapozo-savok is (lasd lejjebb). */
.khek-band-inner {
  box-sizing: border-box;
  max-width: 1600px;
  /* margin-left: auto; */
  margin-right: auto;
  margin-top: 80px !important;
}

@media (min-width: 2000px) {
  .khek-band-inner {
    margin-left: auto;
  }
}

/* A Programok/Szolgaltatasok savok gorgetheto kartyasora (overflow-x:auto)
   a bongeszo jobb szeleig fusson ki, ne alljon meg a khek-band-inner jobb
   behuzasanal - a fejlec/pontozo behuzasa (fenti szabaly) valtozatlan marad.
   A savok (.khek-program-slider/.khek-services) alignfull blokkok, ezert a
   "useRootPaddingAwareAlignments" (theme.json) automatikusan ad nekik
   --wp--style--root--padding-*-nyi sajat paddingot (lasd a WP core
   ".has-global-padding > .alignfull" szabalyait) - ez pontosan ugyanaz az
   ertek, amivel a khek-band-inner (a tobbi, nem-alignfull blokknal, pl.
   Helyszinek/location-cards) balra igazodik, igy a "Programok" cimsora is
   ugyanoda igazodik, mint a tobbi blokk. A negativ jobb margo ezt a
   PONTOSAN ennyi paddingot semlegesiti, hogy a kartyasor a bongeszo tenyleges
   jobb szeleig fusson ki. A kartyasor sajat jobb padding-je (128px, lasd
   __track/__row) adja meg a gorgetesi vegteret, igy nem all meg korabban
   ures savval, es a levagott utolso kartya is jelzi, hogy tovabb gorgetheto. */
.khek-program-slider__viewport,
.khek-services__viewport {
  /* margin-right: calc(-1 * var(--wp--style--root--padding-right)); */
}


/* KHEK egyedi táblázat stílus (szerkesztőben "KHEK táblázat" névvel választható).
   A sima .wp-block-table szelektort szándékosan NEM írjuk felül, hogy az alap WP
   stílus érintetlen maradjon - ez a stílus csak az .is-style-khek-table osztállyal
   aktiválódik. */
.wp-block-table.is-style-khek-table {
  overflow-x: auto;
}

.wp-block-table.is-style-khek-table table {
  border-collapse: collapse;
  max-width: 1200px;
  font-size: 18px;
  letter-spacing: 0;
  /* A WP core "has-fixed-layout" osztálya table-layout:fixed-et és egyenlő
     oszlopszélességet ad - ezt írjuk itt felül, hogy az oszlopok szélessége
     ismét a tartalmuk alapján számolódjon. */
  table-layout: auto;
}

/* A második oszlop mindig csak a tartalma szerinti szélességet foglalja el
   (nem tágul a fennmaradó hellyel) - a "width:1%" + "white-space:nowrap"
   trükk a tartalom saját szélességére zsugorítja, az első (jellemzően
   hosszabb szövegű) oszlop pedig felveszi a maradék helyet. */
.wp-block-table.is-style-khek-table tr > :nth-child(2) {
  width: 1%;
  white-space: nowrap;
}

.wp-block-table.is-style-khek-table tr > :nth-child(2) div {
  white-space: nowrap !important;
}

.wp-block-table.is-style-khek-table th,
.wp-block-table.is-style-khek-table td {
  padding: 7px 0;
  text-align: left;
  border: none;
  vertical-align: top;
}

.wp-block-table.is-style-khek-table th.has-text-align-left,
.wp-block-table.is-style-khek-table td.has-text-align-left {
  text-align: left;
}

.wp-block-table.is-style-khek-table th.has-text-align-right,
.wp-block-table.is-style-khek-table td.has-text-align-right {
  text-align: right;
}

.wp-block-table.is-style-khek-table thead th {
  color: var(--wp--preset--color--cream);
  font-weight: 600;
}

/* KHEK megjegyzés stílus (paragraph blokk).
   Szerkesztőben "Megjegyzés" névvel választható. */
.wp-block-paragraph.is-style-khek-note {
  position: relative;
  padding: 14px 16px 14px 54px;
  border-left: 4px solid var(--wp--preset--color--green);
  background-color: color-mix(in srgb, var(--wp--preset--color--green) 8%, transparent);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: inherit;
  box-sizing: border-box;
  margin-left: 10px;
  left:0;
}

.wp-block-paragraph.is-style-khek-note::before {
  content: "!";
  position: absolute;
  left: 10px;
  top: 12px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--wp--preset--color--green);
  color: var(--wp--preset--color--cream);
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

/* 100px üres hely (spacer helyett paragraph stílusként) */
.wp-block-paragraph.is-style-khek-spacer {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 80px;
  font-size: 0;
  line-height: 0;
  min-height: 0;
}

/* Az oszlopok alap hasabkoze. A ":root" parositasa (0,1,1) azert kell, mert a
   WP global styles ":root :where(.is-layout-flex){gap:1.5rem}" szabalya
   ugyanolyan (0,1,0) specificitasu, mint egy sima ".wp-block-columns" lenne -
   vagyis csak a betoltesi sorrend dontene. A FRONTENDEN a tema style.css-e a
   global styles utan toltodik be (nyert), a SZERKESZTOBEN viszont elotte
   (vesztett): ott minden oszlopblokk 80px helyett 24px-es hasabkozzel, vagyis
   szelesebb oszlopokkal latszott, mint a valo eletben.
   A sajat, ket osztalynyi (0,2,0) stilusvaltozatokat (is-style-khek-columns-*)
   ez tovabbra sem uti el. */
:root .wp-block-columns {
  gap: 80px;
}

/* Kétoszlopos blokk – széles hasábköz (200px gap, 80px top / 100px bottom) */
.wp-block-columns.is-style-khek-columns-wide-gap {
  padding-top: 50px;
  padding-bottom: 80px;
  gap: 50px 200px;
  margin-block-start: 0 !important;
}

/* 781px alatt (a core sajat stack-torespontja, lasd lejjebb a
   ".is-style-khek-columns-block" azonos toresponttal vegzett
   szabalyat) a ket oszlop mar egymas ALA kerul (egy hasabos) - ilyenkor
   a also 80px padding felesleges (a kovetkezo blokk sajat margoja/
   paddingja adja a terkozt), ezert nullazzuk. */
@media (max-width: 781px) {
  .wp-block-columns.is-style-khek-columns-wide-gap {
    padding-top: 50px;
    padding-bottom: 0;
  }
}

/* Kétoszlopos blokk – széles hasábköz (200px gap, 80px top / 100px bottom) */
.wp-block-columns.is-style-khek-columns-wide-gap-no-padding {
  padding-top: 0;
  padding-bottom: 0;
  gap: 30px 200px;
}

/* Blokk */
.wp-block-columns.is-style-khek-columns-block {
  margin-bottom: 50px;
}

/* Mobilon (a core sajat 781px-es stack-torespontja alatt, ahol a
   ".wp-block-columns" oszlopai mar egymas ALA kerulnek) a fenti globalis
   80px-es gap fuggoleges terkozze valik - egymasba agyazott oszlopoknal
   (pl. Elerhetoseg / Cim / Nyitvatartas) ez halmozodva tul nagy ures
   savokat hagy, ezert itt nullazzuk. Ket osztalynyi specificitas kell,
   hogy a core layout-tamogatasa altal generalt (egy osztalynyi)
   ".wp-container-core-columns-is-layout-*" gap-szabalyt is felulirja. */
@media (max-width: 781px) {
  .wp-block-columns.is-style-khek-columns-block {
    gap: 0;
  }
}

/* A theme.json a "core/paragraph" blokknak szant fontSize:18px erteket a
   settings.typography.fluid:true miatt automatikusan folyekony clamp()-kent
   adja ki (":root :where(p){font-size:clamp(14px, ..., 18px)}") - igy a
   betumeret a viewport szelessegetol fuggoen 14-18px kozott valtozik,
   nem allando 18px. A ":root" miatt (0,1,0) specificitasu, ezert egy sima
   "p" szelektor nem irna felul - a ":root" parositasaval (0,1,1) mar tobb,
   es nyer.
   A "li"-nek nincs sajat (fluid) szabalya - a "body{font-size:var(--wp--preset--font-size--medium)}"
   (szinten fluid clamp) szamit rea oroklodessel -, de mivel bekerul ide,
   sajat, kozvetlen szabalykent mar ez nyer az oroklott ertekkel szemben.

   MIERT ":root" ES NEM ".wp-site-blocks"? A ".wp-site-blocks" a WP altal a
   FRONTENDEN minden oldalra kiadott gyoker-wrapper class - a blokk-szerkeszto
   vasznan viszont NINCS ilyen elem, ezert ott ez a szabaly egyaltalan nem
   ervenyesult, es a bekezdesek a folyekony (14-18px kozott valtozo) meretet
   kaptak, a frontendtol elteroen. A ":root" (vagyis a <html>) mindket
   kornyezetben letezik, es pontosan ugyanannyi (0,1,1) a specificitasa, mint
   a ".wp-site-blocks"-e volt - a frontenden tehat semmi nem valtozik. */
:root p,
:root li {
  font-size: 18px;
}

/* Lablec: a fenti ":root p/li" (0,1,1) 18px-e felulirna a lablec
   sajat, egy osztalynyi (0,1,0) 15px-es szabalyait (".khek-footer-row",
   ".khek-footer-legal", ".khek-footer-copyright") - a terv szerint viszont
   a lablec alap betumerete MINDEN toresponton 15px. Ezert kell ide a
   ":root .khek-footer" paros (0,2,1), ami biztosan tobb. Az "a"
   azert szerepel kulon, mert a ".khek-footer a" (0,2,0) szabaly ugyan nem
   allit betumeretet, de a linkek igy is garantaltan a bekezdes meretet
   kapjak. */
:root .khek-footer p,
:root .khek-footer li,
:root .khek-footer a {
  font-size: 15px;
}

/* FIGYELEM - fix (nem folyekony) betumeretek a theme.json-ban, itt NINCS
   hozzajuk CSS szabaly, csak ez a magyarazat:

   1) h3: a "styles.elements.h3.typography.fontSize" erteke szandekosan
      "calc(26px)" es nem "26px". A settings.typography.fluid:true miatt a WP
      minden ELEMEZHETO (szam+egyseg) betumeretet automatikusan clamp()-re
      cserel (lasd wp_get_typography_font_size_value() -
      wp-includes/block-supports/typography.php), a "calc(...)"-ot viszont nem
      tudja ertelmezni, ezert valtozatlanul adja ki: ":root :where(h3)
      {font-size:calc(26px)}" - vagyis fix 26px, viewporttol fuggetlenul.
      Miert igy, es nem egy itteni felulirassal? Egy ".wp-site-blocks h3"
      szabaly (0,1,1) a blokkok sajat, egy osztalynyi (0,1,0) cimsor-meretet
      is elutne (".khek-service-card__title", ".khek-location-cards__title",
      ".khek-csatolmanyok__cim", ".khek-helyszin-info__cim") - a theme.json-ban
      viszont a forrasnal szunik meg a folyekonysag, a kaszkad valtozatlan marad.

   2) strong (es minden mas, sajat betumeret nelkuli, oroklodo szoveg):
      a "medium" preset kapott '"fluid": false'-t. A body betumerete ezt a
      presetet hasznalja ("styles.typography.fontSize:
      var(--wp--preset--font-size--medium)"), a <strong> pedig - sajat
      betumerete nem leven - mindig a szulojetol orokol. Amig a preset fluid
      volt, a bekezdesen/listan KIVUL allo szoveg (es a benne levo <strong>)
      a viewporttal valtozott; a preset fix 1.125rem (18px) ertekevel ez is
      allando. Bekezdesben/listaban a fenti 18px-es, a lablecben a 15px-os
      szabaly az orokolt ertek - a <strong> automatikusan ezeket koveti. */


/* A h1-ek alapmerete 36px (a Hero sajat, 52px-es cimet lasd a
   plugins/.../blocks/hero/style.css-ben): ide tartozik az oldalcim
   (".wp-block-post-title"), a Kiadvany- es a Program-reszletezo cime is -
   mindegyik 36px-es volt eddig is, tehat 540px felett semmi nem valtozik.
   540px alatt viszont a "--khek-h1-scale" (lasd a fajl elejen) aranyosan
   kicsinyiti oket: 320px-es kijelzon pl. 36 * 0,59 = 21px.
   A ":root" parositasa (0,1,1) azert kell, hogy a blokkok sajat,
   egy osztalynyi (0,1,0) cimsor-szabalyait is felulirja - azoknal az ertek
   ugyanez a 36px, tehat ez nem valtoztat a megjelenesen, csak a
   kicsinyitest terjeszti ki rajuk is. (Korabban ".wp-site-blocks h1" allt itt,
   ugyanezzel a specificitassal - a ":root"-ra valtas azert kell, hogy a
   szabaly a blokk-szerkeszto vasznan is ervenyes legyen, ahol nincs
   ".wp-site-blocks" wrapper; lasd a ":root p / :root li" szabalyt feljebb.) */
:root h1 {
  font-size: calc(36 * var(--khek-h1-scale));
}