/* Navbar + mega menu + mobile drawer */

.site-header {
  position: relative;
  z-index: 100;
  width: 100%;
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.site-header--overlay {
  position: absolute;
  inset: 0 0 auto 0;
  color: var(--color-white);
  background: transparent;
}
.site-header--solid {
  position: sticky;
  top: 0;
  color: var(--color-grey-900);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-grey-400);
}

/* Overlay header turns solid when the mega menu is open OR the page is scrolled. */
.site-header--overlay.is-solid {
  background: var(--color-white);
  color: var(--color-grey-900);
  box-shadow: 0 8px 24px rgba(13, 13, 13, .06);
}
/* On scroll the navbar sticks to the top (background variant slides in). */
.site-header--overlay.is-scrolled {
  position: fixed;
  inset: 0 0 auto 0;
}

.site-header__inner {
  /* Intentionally NOT positioned: the full-width mega panel is absolutely
     positioned against .site-header (full viewport width), not this centered
     container — otherwise the white panel only spans the container and the page
     shows through on the sides. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
  padding-block: var(--space-s);
  min-height: var(--header-h);
}

/* zones */
.navbar__nav   { flex: 1 0 0; min-width: 0; }
.navbar__brand { flex: 0 0 auto; }
.navbar__cta   { flex: 1 0 0; display: flex; justify-content: flex-end; }

/* brand logo light/dark swap */
.brand-logo { display: inline-flex; align-items: center; }
.brand-logo__img { height: 12px; width: auto; }
.brand-logo__text { font-family: var(--font-heading); font-size: 20px; letter-spacing: 2px; text-transform: uppercase; }
.site-header--overlay .brand-logo__img--dark,
.site-header--solid  .brand-logo__img--light { display: none; }
.site-header--overlay.is-solid .brand-logo__img--light { display: none; }
.site-header--overlay.is-solid .brand-logo__img--dark { display: inline-block; }

/* CTA: white button over the hero, dark button once the header is solid. */
.site-header--overlay.is-solid .navbar__cta .btn,
.site-header--solid .navbar__cta .btn { background: var(--color-grey-900); color: var(--color-grey-100); }
.site-header--overlay.is-solid .navbar__cta .btn:hover,
.site-header--solid .navbar__cta .btn:hover { background: var(--color-black); }

/* desktop menu */
.nav-menu { display: flex; align-items: center; gap: var(--space-s); }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  font-weight: 500;
  white-space: nowrap;
  padding-block: var(--space-2x);
}
.nav-link:hover { opacity: .8; }
.nav-link__chev { transition: transform .2s ease; }
.menu-item.is-open > .nav-link__chev,
.menu-item:hover .nav-link__chev { transform: rotate(180deg); }

/* ---------- Mega menu ---------- */
.menu-item.has-mega { position: static; } /* allow full-width panel */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--color-white);
  color: var(--color-grey-900);
  box-shadow: 0 24px 48px rgba(13,13,13,.12);
  border-top: 1px solid var(--color-grey-400);
  /* Reveal top→bottom: grid-rows 0fr→1fr animates height without distortion. */
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.mega.is-revealed { grid-template-rows: 1fr; }
/* The grid child must have no padding/border so 0fr collapses it fully to 0 —
   otherwise the bottom padding leaves a sliver that "stops" mid-close. The
   padding lives on .mega__inner inside this wrapper, where overflow clips it. */
.mega > .mega__reveal { overflow: hidden; min-height: 0; }
.mega[hidden] { display: none; }
/* No top padding so the category divider lines start flush with the navbar's
   bottom border (the divider "connects" to the navbar — client feedback). */
.mega__inner { display: flex; gap: var(--space-l); align-items: stretch; padding-block: 0 var(--space-l); }
.mega__left  { flex: 0 0 250px; border-right: 1px solid var(--color-grey-400); }
.mega__right { flex: 1 1 auto; min-width: 0; padding-left: var(--space-l); }

.mega__cats { display: flex; flex-direction: column; }
.mega__cat {
  width: 100%;
  text-align: left;
  padding-block: var(--space-s);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  font-weight: 500;
  color: var(--color-grey-900);
  border-bottom: 1px solid var(--color-grey-400);
}
.mega__cats li:last-child .mega__cat { border-bottom: 0; }
.mega__cat.is-active { font-weight: 600; }
.mega__cat:hover { text-decoration: underline; text-underline-offset: 3px; }

.mega__panel[hidden] { display: none; }
.mega__panel-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--color-grey-400);
  font-size: var(--fs-body-s);
  font-weight: 600;
}
.mega__panel-title { min-width: 140px; }
.mega__panel-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega__see-all { color: var(--color-grey-600); font-weight: 600; }
.mega__see-all:hover { color: var(--color-accent); }

.mega__cols {
  columns: 4;
  column-gap: var(--space-3xl);
  padding-top: var(--space-xs);
}
.mega__item { break-inside: avoid; }
.mega__item a {
  display: block;
  padding-block: var(--space-2x);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  font-weight: 500;
}
.mega__item a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Mobile ---------- */
.nav-toggle { display: none; color: inherit; padding: var(--space-2x); margin-left: calc(var(--space-2x) * -1); }
.nav-toggle__close { display: none; }
.mobile-nav { display: none; }

/* Mobile: header capped at 64px (--header-h) — trim the vertical padding so
   the toggle row fits inside instead of pushing past the min-height. */
@media (max-width: 600px) {
  .site-header__inner { padding-block: var(--space-2x); }
}

@media (max-width: 1219px) {
  .navbar__nav { display: none; }
  .navbar__cta { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Logo absolutely centered to the viewport (not the flex remainder), so it
     stays centered next to the left-aligned hamburger. */
  .navbar__brand { position: absolute; left: 50%; transform: translateX(-50%); flex: 0 0 auto; }

  body.nav-open { overflow: hidden; }
  body.nav-open .nav-toggle__open { display: none; }
  body.nav-open .nav-toggle__close { display: inline-flex; }

  .mobile-nav {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--color-white);
    color: var(--color-grey-900);
    /* y scrolls; x stays hidden so the off-screen drill panels never create a
       horizontal scrollbar (overflow-y:auto alone would compute x to auto). */
    overflow: hidden auto;
    padding: var(--space-l) var(--gutter) var(--space-3xl);
    /* Slide in from the top. */
    transform: translateY(-100%);
    transition: transform .3s ease;
  }
  .mobile-nav.is-open { transform: translateY(0); }
  .mobile-nav[hidden] { display: none; }

  /* ----- Drill-down: panels stack absolutely, slide horizontally ----- */
  .mdrill { position: relative; overflow: hidden; }
  .mpanel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateX(100%);
    transition: transform .3s ease;
    pointer-events: none;
  }
  .mpanel.is-active { position: relative; transform: translateX(0); pointer-events: auto; }
  .mpanel.is-prev   { transform: translateX(-100%); }

  .mdrill__list { display: flex; flex-direction: column; }
  .mdrill__list > li { border-bottom: 1px solid var(--color-grey-400); }
  .mdrill__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    width: 100%;
    text-align: left;
    /* Buttons carry UA horizontal padding that <a> items don't — zero it so
       "Zabiegi" and the drill titles align flush with the rest. */
    padding: var(--space-s) 0;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--color-grey-900);
  }
  .mdrill__link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .mdrill__chev { flex: 0 0 auto; color: var(--color-grey-600); }

  .mdrill__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2x);
    padding: var(--space-s) 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-grey-900);
  }
  .mdrill__see-all {
    display: block;
    padding-bottom: var(--space-s);
    font-size: var(--fs-body-s);
    font-weight: 600;
    color: var(--color-grey-600);
  }
  .mdrill__see-all:hover { color: var(--color-accent); }

  /* ----- Drawer footer: CTA + locations (always under the panels) ----- */
  .mobile-nav__foot { margin-top: var(--space-l); }
  .mobile-nav__cta { width: 100%; }
  .mobile-nav__locations { display: flex; flex-direction: column; gap: var(--space-l); margin-top: var(--space-2xl); }
  .mloc__city { font-family: var(--font-heading); font-size: 28px; line-height: 1.2; margin-bottom: var(--space-3xs); }
  .mloc__addr { color: var(--color-grey-700); font-size: var(--fs-body-s); line-height: 1.5; }
  .mloc__phone { display: inline-block; color: var(--color-grey-700); font-size: var(--fs-body-s); }
  .mloc__phone:hover { text-decoration: underline; text-underline-offset: 3px; }
}