/* ================================================================
   MEGA MENU — PRÉMIUM
   myfive/css/menu.css
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   Design tokenek — itt változtasd a mega menü kinézetét
   ────────────────────────────────────────────────────────────── */
:root {
  --mega-bg           : #ffffff;
  --mega-shadow       : 0 8px 40px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);
  --mega-radius       : 0 0 16px 16px;
  --mega-accent       : var(--wp--preset--color--primary);
  --mega-accent-rgb   : 140, 173, 49;   /* primary szín RGB — hover alpha-hoz */
  --mega-panel-pad    : 2rem clamp(1.5rem, 5vw, 4rem) 2.5rem;
  --mega-col-gap      : clamp(2rem, 3vw, 3.5rem);
  --mega-anim         : .22s cubic-bezier(.16, 1, .3, 1);
}

/* ================================================================
   0) BREAKPOINT — hamburger ≤ 1440px, desktop nav ≥ 1441px
   ================================================================ */
body .wp-block-navigation__responsive-container-open:not(.always-shown) {
  display: block !important;
  background: var(--wp--preset--color--primary);
  border-radius: 50%;
  padding: 10px;
  /* A hamburger a kék menüsávban, jobbra igazítva (2026.10.15.) –
     korábban abszolút pozícióval a fejléc fölé volt tolva, mobilon rácsúszott a szövegre. */
  position: relative;
  top: auto;
  right: auto;
  margin-left: auto;
}

body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
  display: none !important;
}

@media (min-width: 1441px) {
  body .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }
  body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block !important;
  }
}

/* ================================================================
   1) KÖZÖS STÍLUSOK — minden méretosztályra
   ================================================================ */
.wp-block-navigation__responsive-container.is-menu-open {
  padding: 1rem !important;
}

ul.wp-block-navigation-submenu {
  font-size: smaller;
}

header .wp-block-navigation a:hover {
  color: var(--wp--preset--color--primary) !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation__submenu-icon {
  display: flex;
  align-items: center;
}

/* ================================================================
   2) DESKTOP MEGA MENU — ≥ 1441px
   ================================================================ */
@media (min-width: 1441px) {

  /* ── 2.0 Header horgony ──
     CSAK a header legyen position:relative.
     Az intermediate nav elemeken NEM lehet position:relative,
     mert azok lennének a containing block → elcsúszik a panel. */
  header {
    position: relative;
    z-index: 1000;
  }

  header .wp-block-navigation ul.wp-block-navigation-submenu {
    font-size: smaller;
  }

  /* ── 2.1 Csak top-level li: static → panel a headerhez pozicionálódik ──
     A 2-3. szintű has-child elemek NEM kapnak position:static,
     azok maradnak a Gutenberg alapértelmezett relatív/statikus pozíciójukban. */
  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child {
    position: static !important;
  }

  /* ── 2.2 Top-level link — növekvő aláhúzás hover ── */
  header .wp-block-navigation .wp-block-navigation__container
  > .wp-block-navigation-item > a,
  header .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item > a {
    position: relative;
    padding-bottom: 3px;
  }

  header .wp-block-navigation .wp-block-navigation__container
  > .wp-block-navigation-item > a::after,
  header .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--mega-accent);
    border-radius: 2px;
    transition: width var(--mega-anim);
  }

  header .wp-block-navigation .wp-block-navigation__container
  > .wp-block-navigation-item:hover > a::after,
  header .wp-block-navigation .wp-block-navigation__container
  > .wp-block-navigation-item:focus-within > a::after,
  header .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item:hover > a::after,
  header .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item:focus-within > a::after {
    width: 100%;
  }

  /* ── 2.3 MEGA PANEL — alap / rejtett állapot ──
     CSAK top-level elemekre vonatkozik:
     .wp-block-navigation__container csak a gyökér ul-en van,
     így a > .wp-block-navigation-item.has-child kizárja a 2-3. szintet. */
  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-container,
  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child
  > ul.wp-block-navigation-submenu {

    /* elhelyezés — viewport-escape trick:
       left: calc((100% - 100vw) / 2) a szülő szélességétől
       függetlenül mindig a viewport bal széléhez igazít */
    position: absolute !important;
    top: 100% !important;
    left: calc((100% - 100vw) / 2) !important;
    transform: translateY(6px) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;

    /* megjelenés */
    background: var(--mega-bg) !important;
    border-top: 3px solid var(--mega-accent) !important;
    border-radius: var(--mega-radius) !important;
    box-shadow: var(--mega-shadow) !important;

    /* belső elrendezés */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: var(--mega-col-gap) !important;
    padding: var(--mega-panel-pad) !important;

    /* görgetés nagyon mély menünél */
    max-height: 75vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    /* animáció — zárt alapállapot */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      opacity var(--mega-anim),
      transform var(--mega-anim),
      visibility 0s var(--mega-anim) !important;
  }

  /* ── 2.4 Mega panel — nyitott állapot (csak top-level) ── */
  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child:hover
  > .wp-block-navigation__submenu-container,
  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child:hover
  > ul.wp-block-navigation-submenu,
  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child:focus-within
  > .wp-block-navigation__submenu-container,
  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child:focus-within
  > ul.wp-block-navigation-submenu,
  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child.mega-open
  > .wp-block-navigation__submenu-container,
  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child.mega-open
  > ul.wp-block-navigation-submenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition:
      opacity var(--mega-anim),
      transform var(--mega-anim),
      visibility 0s !important;
  }

  /* ── 2.5 Overflow fix — mega panel közvetlen gyerekei ne legyenek levágva ── */
  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-container
  > .wp-block-navigation-item,
  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child
  > ul.wp-block-navigation-submenu
  > li {
    overflow: visible !important;
  }

  /* ── 2.6 OSZLOPOK — mega panel közvetlen gyerekei (2. szint) ── */
  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-container
  > .wp-block-navigation-item,
  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child
  > ul.wp-block-navigation-submenu
  > li {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    min-width: 150px !important;
    max-width: 210px !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  /* ── 2.7 OSZLOPFEJ — 2. szint link ── */
  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-container
  > .wp-block-navigation-item
  > a,
  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child
  > ul.wp-block-navigation-submenu
  > li
  > a {
    display: block !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color: var(--mega-accent) !important;
    padding: 0 0 0.5rem 0 !important;
    margin-bottom: 0.5rem !important;
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
    width: 100% !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    transition: color .15s ease !important;
  }

  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-container
  > .wp-block-navigation-item
  > a:hover,
  header .wp-block-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child
  > ul.wp-block-navigation-submenu
  > li
  > a:hover {
    color: var(--wp--preset--color--secondary, #4484AF) !important;
  }

  /* ── 2.8 3. SZINT — mindig látható, inline az oszlopban ── */

  /* ne vágja le a Gutenberg az alcímet vagy a listát */
  header .wp-block-navigation .has-child .has-child {
    display: block !important;
    overflow: visible !important;
  }

  /* toggle gomb — elrejtve, az inline megjelenés miatt felesleges */
  header .wp-block-navigation .has-child .has-child a + button {
    display: none !important;
  }

  /* 3. szint kategóriafej (ha van saját alatelepe) */
  header .wp-block-navigation .has-child .has-child > a {
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: rgba(0,0,0,.52) !important;
    margin-top: 0.85rem !important;
    margin-bottom: 0.15rem !important;
    padding: 0 !important;
    transition: color .15s ease !important;
  }

  header .wp-block-navigation .has-child .has-child > a:hover {
    color: var(--mega-accent) !important;
  }

  /* 3. szint lista — mindig nyitva, Gutenberg animáció kiütve */
  header .wp-block-navigation .has-child .has-child ul {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    height: auto !important;
    max-height: none !important;
    padding: 0.1rem 0 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* ── 2.9 3. SZINT LINKEK ── */
  header .wp-block-navigation .has-child .has-child ul > li > a,
  header .wp-block-navigation .has-child .has-child ul a {
    display: block !important;
    font-size: 0.83rem !important;
    font-weight: 400 !important;
    color: rgba(0,0,0,.62) !important;
    padding: 0.22rem 0.55rem !important;
    border-radius: 6px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    transition: background .14s ease, color .14s ease, padding-left .14s ease !important;
  }

  header .wp-block-navigation .has-child .has-child ul > li > a:hover,
  header .wp-block-navigation .has-child .has-child ul a:hover {
    background: rgba(var(--mega-accent-rgb), .08) !important;
    color: var(--mega-accent) !important;
    padding-left: 0.85rem !important;
  }

  /* ── 2.10 4. SZINT (opcionális mélység) ── */
  header .wp-block-navigation .has-child .has-child .has-child ul {
    padding-left: 0.6rem !important;
    border-left: 2px solid rgba(var(--mega-accent-rgb), .18) !important;
    margin-top: 0.15rem !important;
  }

  header .wp-block-navigation .has-child .has-child .has-child ul a {
    font-size: 0.78rem !important;
    color: rgba(0,0,0,.45) !important;
    padding: 0.18rem 0.55rem !important;
  }

  header .wp-block-navigation .has-child .has-child .has-child ul a:hover {
    color: var(--mega-accent) !important;
    background: rgba(var(--mega-accent-rgb), .06) !important;
    padding-left: 0.85rem !important;
  }

  /* ── 2.11 Nyilak / toggle gombok — elrejtve desktopon ── */
  header .wp-block-navigation .wp-block-navigation__submenu-icon,
  header .wp-block-navigation .wp-block-navigation-submenu__toggle {
    display: none !important;
  }

  /* ── 2.12 CTA: "Ingyenes mintarendelés" ──────────────────────
     Gutenbergben: navigációs elem → Additional CSS class → menu-cta
     ────────────────────────────────────────────────────────────── */
  header .wp-block-navigation
  .wp-block-navigation-item.menu-cta > a,
  header .wp-block-navigation
  .wp-block-navigation-item.menu-cta > .wp-block-navigation-item__content {
    background: var(--mega-accent) !important;
    color: #fff !important;
    padding: 0.42rem 1.15rem !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 0.87rem !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 2px 10px rgba(var(--mega-accent-rgb), .32) !important;
    transition: background .2s ease, box-shadow .2s ease, transform .15s ease !important;
    white-space: nowrap !important;
  }

  header .wp-block-navigation
  .wp-block-navigation-item.menu-cta > a:hover,
  header .wp-block-navigation
  .wp-block-navigation-item.menu-cta > .wp-block-navigation-item__content:hover {
    background: var(--wp--preset--color--secondary, #4484AF) !important;
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(var(--mega-accent-rgb), .4) !important;
    transform: translateY(-1px) !important;
  }

  /* ── 2.13 ELŐKÉSZÍTETT OPCIONÁLIS OSZTÁLYOK ─────────────────────
     Ezek inaktívak, amíg nem adod hozzá a Gutenberg navigációban.
     ────────────────────────────────────────────────────────────── */

  /* .mega-promo — kiemelt promo kártya az oszlopok között */
  header .wp-block-navigation .mega-promo {
    background: linear-gradient(
      135deg,
      var(--mega-accent),
      var(--wp--preset--color--secondary, #4484AF)
    ) !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 1.25rem 1.5rem !important;
    min-width: 180px !important;
    max-width: 230px !important;
    align-self: center !important;
  }
  header .wp-block-navigation .mega-promo a {
    color: #fff !important;
    font-weight: 600 !important;
  }

  /* .mega-image-col — képes oszlop */
  header .wp-block-navigation .mega-image-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    min-width: 150px !important;
    max-width: 200px !important;
  }
  header .wp-block-navigation .mega-image-col img {
    width: 100% !important;
    height: 110px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  /* .mega-featured — kiemelt link az oszlopon belül */
  header .wp-block-navigation .mega-featured > a {
    color: var(--mega-accent) !important;
    font-weight: 600 !important;
  }

  /* .mega-divider — vizuális elválasztó oszlopok között */
  header .wp-block-navigation .mega-divider {
    width: 1px !important;
    align-self: stretch !important;
    background: rgba(0,0,0,.06) !important;
    flex: 0 0 1px !important;
    margin: 0 0.25rem !important;
  }

} /* end @media (min-width: 1441px) */

/* ================================================================
   3) MOBILE / TABLET — ≤ 1440px
   ================================================================ */
@media (max-width: 1440px) {

  .is-responsive.wp-block-navigation {
    gap: 0;
  }

  header .wp-block-navigation.is-responsive {
    justify-content: flex-end !important;
  }

  header .wp-block-navigation .wp-block-navigation-item {
    width: 100%;
    padding: 0.75rem 0;
    flex-direction: row !important;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center !important;
    min-height: 32px;
  }

  header .wp-block-navigation .wp-block-navigation-item ul {
    width: calc(100% - 1.5rem) !important;
    flex-shrink: 0;
    padding: 0 0 0 1.5rem !important;
  }

  header .wp-block-navigation-item {
    border-bottom: 1px solid var(--wp--preset--color--primary) !important;
  }

  header .wp-block-navigation-item.has-child li {
    padding: 0;
    border-bottom: none !important;
    min-height: auto;
  }

  /* ── Submenu reset: mobilon alapból ZÁRVA, Gutenberg JS toggle nyitja ──
     A desktop @media (min-width:1441px) blokk nem vonatkozik ide,
     de a Gutenberg core CSS hover-stílusai mégis megnyithatják az
     almenüket a 600px–1440px sávban. Ezt itt felülírjuk.          */
  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container,
  header .wp-block-navigation__responsive-container.is-menu-open
  ul.wp-block-navigation-submenu {
    display: none !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    width: 100% !important;
    max-height: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    z-index: auto !important;
  }

  /* Gutenberg toggle [aria-expanded="true"] nyitja ki — magasabb spec nyeri */
  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu__toggle[aria-expanded="true"]
  ~ .wp-block-navigation__submenu-container,
  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu__toggle[aria-expanded="true"]
  ~ ul.wp-block-navigation-submenu {
    display: block !important;
    padding-left: 1.5rem !important;  /* accordion indentálás visszaállítása */
    width: calc(100% - 1.5rem) !important;
  }

  /* Toggle gomb forgatása nyitva állapotban */
  header .wp-block-navigation__responsive-container button[aria-expanded="true"] {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
  }

  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
    align-items: center !important;
  }

  #main-menu {
    padding: 0 !important;
    border-bottom: 2px solid var(--wp--preset--color--primary);
  }

  header {
    --wp--preset--spacing--l: 1rem;
  }

} /* end @media (max-width: 1440px) */

/* ································································
   „Ajánlatkérés” kiemelt menügomb (2026.10.15.)
   A Navigáció blokkban a menüpont „További CSS-osztály” mezőjében: sx-menu-cta
   ································································ */
.wp-block-navigation .wp-block-navigation-item.sx-menu-cta > .wp-block-navigation-item__content {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white) !important;
  border-radius: 10px;
  padding: 0.55em 1.2em !important;
  font-weight: 600;
  text-decoration: none;
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wp-block-navigation .wp-block-navigation-item.sx-menu-cta > .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item.sx-menu-cta > .wp-block-navigation-item__content:focus-visible {
  filter: brightness(0.93);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  color: var(--wp--preset--color--white) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.sx-menu-cta {
  margin-top: 0.75rem;
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation .wp-block-navigation-item.sx-menu-cta > .wp-block-navigation-item__content:hover { transform: none; }
}