/*
 * Navigáció — 04-navigation.css
 * ------------------------------------------------------------------
 * Fejléc, mega-menü (asztali legördülő / mobil harmonika), keresés-sáv.
 * EGY közös DOM-struktúrát stílusoz médialekérdezéssel — nincs külön
 * "mobil" és "asztali" markup, csak a megjelenés vált.
 */

/* --- Fejléc keret ------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border-halvany);
}
/* A háttérhomályt (backdrop-filter) TUDATOSAN egy ::before
   pszeudo-elemre tettük, nem közvetlenül a .site-header-re — a
   `backdrop-filter` (a `transform`/`filter`-hez hasonlóan) containing
   blockot hoz létre a `position: fixed` LESZÁRMAZOTTAKNAK, ami a
   mobil hamburger-panelt (.site-header__panel, position:fixed) a
   fejléc saját (alacsony) dobozára korlátozta volna a valós
   viewport helyett — ettől a panel csak egy pár tíz pixeles csíkban
   jelent meg a képernyő közepén, a menüpontok nagy része
   elérhetetlen volt. Lásd fejlesztesi-naplo.md, 2026-08-24. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--wp--preset--color--alap) 97%, transparent);
  backdrop-filter: blur(6px);
}

/* Topbar — két csoportra bontva: balra az elérhetőségek (cím,
   telefon, e-mail), jobbra a gyors linkek (KRÉTA, Kapcsolat) — hogy
   a fő sor (logó + navigáció) ne legyen zsúfolt.
   2026-09-05: korábban mind a négy elem egyetlen, jobbra igazított
   sorban volt — felhasználói kérésre az elérhetőségek külön
   csoportként balra kerültek, a `justify-content: space-between` a
   két csoportot a sor két szélére húzza.
   2026-08-20: telefon+e-mail hozzáadva — keskeny nézetben a
   `.site-header__topbar-link-szoveg` szöveg-rész elrejtve, csak az
   ikon marad (lásd lent, @media), hogy zsúfolás nélkül elférjen
   minden elem; a "koppintva hívható" telefonszám mobilon amúgy is
   hasznosabb, mint desktopon. */
.site-header__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 1200px;
  margin-inline: auto;
  padding: 8px var(--wp--preset--spacing--60);
  font-size: 13.5px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-halvany);
}
.site-header__topbar-csoport {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.site-header__topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  text-decoration: none;
  color: var(--wp--preset--color--tompitott);
}
.site-header__topbar-link:hover {
  color: var(--wp--preset--color--elsodleges);
}
.site-header__topbar-elvalaszto {
  width: 1px;
  height: 12px;
  background: var(--border-eros);
}

.site-header__sor {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 76px;
}

/* 2026-08-24: a logó a WP natív "Site Logo" funkcióján keresztül
   jelenik meg (core/site-logo blokk, lásd parts/header.html) — ettől
   kezdve admin oldalról (Site Editor → logóra kattintva → Csere)
   cserélhető, nem csak a header.html közvetlen szerkesztésével.
   A blokk saját "width" beállítása nem termel semmilyen frontend
   CSS-t (csak a szerkesztőn belüli átméretező fogantyúhoz kell),
   ezért a tényleges méretezést itt, a témában adjuk meg. */
.site-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* A `.site-header__brand.wp-block-site-logo .custom-logo` (3
   osztály) SZÁNDÉKOSAN specifikusabb, mint a WP saját, mag
   block-library CSS-éből jövő `.wp-block-site-logo.is-default-size
   img` szabály (2 osztály + 1 elem) — enélkül az utóbbi
   `width: 120px`-re kényszerítené a logót, felülírva a mi
   méretezésünket. Lásd fejlesztesi-naplo.md, 2026-08-24. */
.site-header__brand.wp-block-site-logo .custom-logo {
  flex: none;
  max-width: 330px;
  height: auto;
  width: 100%;
}

/* A fejléc-panel: asztalin mindig látható, vízszintes elrendezésben;
   mobilon a hamburger által vezérelt, teljes képernyős panel */
.site-header__panel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  margin-right: auto;
}

/* A dedikált bezáró sor KIZÁRÓLAG a mobil (teljes képernyős) panelben
   értelmes — asztalin, ahol a .site-header__panel egy sima vízszintes
   navigációs sor, ennek nincs helye/funkciója. */
.site-header__panel-fejlec {
  display: none;
}

.site-header__linkek {
  display: flex;
  align-items: center;
  gap: 2px;
}
.site-header__linkek a {
  text-decoration: none;
  color: var(--wp--preset--color--szoveg);
  font-weight: 400;
  font-size: 15.5px;
  padding: 12px 12px 16px;
}
.site-header__linkek a:hover {
  color: var(--wp--preset--color--elsodleges);
}

/* Jobbra tolva (margin-left: auto) + bal oldali elválasztó vonal, hogy
   vizuálisan is elkülönüljön a főmenütől — lásd 2026-08-06 visszajelzés
   ("a kereső ikon a jobb szélén legyen, elkülönítve a főmenütől"). */
.site-header__akciok {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  margin-left: auto;
  padding-left: 14px;
  border-left: 1px solid var(--border-halvany);
}

.site-header__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--erintesi-cel);
  height: var(--erintesi-cel);
  border: 2px solid var(--wp--preset--color--elsodleges-sotet);
  background: transparent;
  cursor: pointer;
  color: var(--wp--preset--color--elsodleges-sotet);
  flex: none;
}

.site-header__kereses-gomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--erintesi-cel);
  height: var(--erintesi-cel);
  color: var(--wp--preset--color--szoveg);
  background: transparent;
  border: none;
  cursor: pointer;
}
.site-header__kereses-gomb:hover {
  color: var(--wp--preset--color--elsodleges);
  background: color-mix(in srgb, var(--wp--preset--color--elsodleges) 8%, transparent);
}

/* --- Keresés-sáv -------------------------------------------------------- */

/* Lebegő (overlay) sáv — a .site-header saját position:sticky-je
   containing blockot ad az absolute pozicionáláshoz, így a sáv a
   tartalom FÖLÖTT jelenik meg, nem tolja lejjebb (lásd 2026-08-06
   visszajelzés: "ne tolja le a tartalmat, lebegjen rajta"). */
.site-header__kereso {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-top: 1px solid var(--border-halvany);
  background: var(--wp--preset--color--kozlemeny-hatter);
  box-shadow: 0 14px 30px rgba(28, 40, 48, 0.16);
}
.site-header__kereso[hidden] {
  display: none;
}
.kereses-urlap {
  max-width: 1200px;
  margin-inline: auto;
  padding: 14px var(--wp--preset--spacing--60);
  display: flex;
  gap: 10px;
  align-items: center;
}
.kereses-urlap__ikon {
  flex: none;
  color: var(--wp--preset--color--tompitott-vilagos);
}
.kereses-urlap__mezo {
  flex: 1;
  font: inherit;
  font-size: 16.5px;
  color: var(--wp--preset--color--szoveg);
  background: transparent;
  border: none;
  outline: none;
  padding: 10px 0;
  min-width: 0;
}
.kereses-urlap__gomb {
  flex: none;
}

/* --- Nav-menü (asztali: vízszintes legördülő) --------------------------- */

.nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.nav-menu__item {
  position: relative;
}

.nav-menu__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--wp--preset--color--szoveg);
  font-family: var(--wp--preset--font-family--nunito-sans);
  font-size: 15.5px;
  padding: 12px 12px 16px;
  text-decoration: none;
}
.nav-menu__link:hover {
  color: var(--wp--preset--color--elsodleges);
}

.nav-menu__nyil {
  transition: transform 0.15s ease;
}
.nav-menu__item--has-children.is-open .nav-menu__nyil {
  transform: rotate(180deg);
}

.nav-menu__submenu {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--wp--preset--color--alap);
  border: 1px solid var(--border-halvany);
  box-shadow: 0 18px 36px rgba(28, 40, 48, 0.18);
  z-index: 60;
  display: none;
  flex-direction: column;
}
.nav-menu__item--has-children.is-open .nav-menu__submenu {
  display: flex;
}

.nav-menu__submenu-link {
  text-decoration: none;
  color: var(--wp--preset--color--szoveg);
  font-size: 15.5px;
  padding: 11px 12px;
  display: block;
}
.nav-menu__submenu-link:hover {
  background: color-mix(in srgb, var(--wp--preset--color--elsodleges) 8%, transparent);
  color: var(--wp--preset--color--elsodleges-sotet);
}

.nav-menu__nincs-menu {
  font-size: 13px;
  color: var(--wp--preset--color--tompitott-vilagos);
}

/* --- Törésponti viselkedés ---------------------------------------------- */

@media (max-width: 1020px) {
  .site-header__hamburger {
    display: inline-flex;
  }

  /* A panel NYITVA a TELJES képernyőt takarja (a fejlécet és a
     közlemény-sávot is elfedi, amíg nyitva van — ezek a
     navigacio.js-ben [inert]-et kapnak, hogy ne maradjanak
     "láthatatlanul fókuszálható" csapdaként). Az "inset: 0" CSAK
     kezdeti/tartalék érték — a tényleges nyitáskor a navigacio.js
     (panelMeretez()) felülírja inline stílusként a
     window.visualViewport tényleges méretéből, mert a
     window.innerWidth ezen a site-on szélesebb tud lenni a
     ténylegesen látható képernyőnél (lásd fejlesztesi-naplo.md,
     2026-08-21/24).
     A megjelenés/eltűnés `display` helyett `transform`+`visibility`
     árnyékkal animált (beúszás felülről) — a `visibility`
     késleltetett átmenete (0s, de 0.3s késleltetéssel) biztosítja,
     hogy záráskor a panel a teljes csúszás-animáció alatt látható
     maradjon, utána viszont (akárcsak `display:none`-nal) kiessen a
     fókusz-sorrendből/akadálymentességi fából. */
  .site-header__panel {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--wp--preset--color--alap);
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 var(--wp--preset--spacing--60) 20px;
    gap: 0;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .site-header__panel.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s linear 0s;
  }

  /* Mindig látható (sticky, a panel saját görgetésén belül) bezáró
     sor — hosszú menünél is elérhető marad, nem csak a hamburgeren
     keresztül lehet bezárni a panelt. */
  .site-header__panel-fejlec {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: flex-end;
    padding-block: 8px;
    background: var(--wp--preset--color--alap);
  }
  .site-header__panel-bezar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--erintesi-cel);
    height: var(--erintesi-cel);
    border: 2px solid var(--wp--preset--color--elsodleges-sotet);
    background: transparent;
    color: var(--wp--preset--color--elsodleges-sotet);
    cursor: pointer;
  }

  .nav-menu {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .nav-menu__item {
    border-bottom: 1px solid var(--border-halvany);
  }
  .nav-menu__link {
    width: 100%;
    justify-content: space-between;
    font-weight: 700;
    font-size: 18px;
    padding: 14px 4px;
    min-height: var(--erintesi-cel);
  }
  .nav-menu__submenu {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 10px;
  }
  .nav-menu__submenu-link {
    color: var(--wp--preset--color--tompitott);
    font-size: 16.5px;
    padding: 12px 4px 12px 16px;
    border-left: 2px solid var(--border-kozepes);
    margin-left: 6px;
    min-height: var(--erintesi-cel);
    box-sizing: border-box;
  }
  .nav-menu__submenu-link:hover {
    color: var(--wp--preset--color--elsodleges-sotet);
    border-left-color: var(--wp--preset--color--elsodleges);
  }

  .site-header__linkek {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .site-header__linkek a {
    font-weight: 700;
    font-size: 18px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-halvany);
    min-height: var(--erintesi-cel);
    box-sizing: border-box;
  }

}

@media (max-width: 560px) {
  .site-header__sor {
    gap: 12px;
    padding-inline: 16px;
  }

  /* A telefon/e-mail topbar-linkek szöveges része elrejtve, csak az
     ikon marad — a koppintva hívható/írható link maga (tel:/mailto:)
     így is tökéletesen működik, csak kompaktabb. */
  .site-header__topbar-link-szoveg {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}