/* ========================
   HEADER / NAVIGATION (scoped)
   ======================== */

/* Header-only custom properties (used only by selectors inside .site-header) */
.site-header{
  /* Desktop dropdown width (affects top-level dropdowns) */
  --submenu-width: 300px;

  /* Mobile/tablet header heights for the drawer */
  --drawer-top-mobile: 72px;
  --drawer-top-tablet: 100px;

  /* Mobile drawer spacing – airy pass */
  --drawer-section-gap: 28px;
  --drawer-parent-child-gap: 10px;
  --drawer-item-gap: 11px;
  --drawer-item3-gap: 8px;
  --drawer-indent-2: 24px;
  --drawer-indent-3: 16px;

  /* Burger sizing */
  --burger-size: 40px;
  --burger-bar: 4px;

  /* Squeeze band knobs (1024–1239px) */
  --container-pad-squeeze: 15px;
  --nav-gap: 28px;
  --menu-gap: 28px;
}

/* Shell */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999; /* ensures it always beats sections */
  background: var(--white);
  box-shadow: 0 1px 0 var(--border-light);
}

/* Container (scoped) */
.site-header .container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: var(--container-pad-mobile);
}
@media (min-width:768px){ .site-header .container{ padding-inline: var(--container-pad-tablet); } }
@media (min-width:1440px){ .site-header .container{ padding-inline: 0; } }

/* Row */
.site-header .nav{
  display:flex;
  align-items:center;
  gap: var(--nav-gap);
  min-height: var(--header-h-desktop);
  flex-wrap:nowrap;
}

/* Brand */
.site-header .nav__brand{ flex:0 0 auto; }
.site-header .nav__brand img,
.site-header .nav__brand svg{
  height: clamp(50px, 6vw, 70px);
  width:auto; display:block;
}

/* Brand micro-interaction */
.site-header .nav__brand,
.site-header .custom-logo-link{ display:inline-flex; align-items:center; }
.site-header .nav__brand img,
.site-header .nav__brand svg,
.site-header .custom-logo{
  transition: transform .50s ease, filter .22s ease;
  transform-origin:center; will-change:transform;
}
.site-header .nav__brand:hover img,
.site-header .nav__brand:hover svg,
.site-header .nav__brand:focus-within img,
.site-header .nav__brand:focus-within svg,
.site-header .custom-logo-link:hover .custom-logo,
.site-header .custom-logo-link:focus-visible .custom-logo{
  transform: translateY(-1px) scale(1.02);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.10));
}
@media (prefers-reduced-motion: reduce){
  .site-header .nav__brand img,
  .site-header .nav__brand svg,
  .site-header .custom-logo{ transition:none; }
}

/* Menu wrapper (desktop) */
.site-header .nav__menu{
  margin-left:auto;
  display:flex; align-items:center; gap: var(--menu-gap);
  flex:1 1 auto; min-width:0;
}

/* Menu list (desktop baseline) */
.site-header .menu{
  list-style:none; display:flex; align-items:center; gap: var(--menu-gap);
  margin:0; padding:0; flex-wrap:nowrap; white-space:nowrap;
}
.site-header .menu > li{ display:flex; flex:0 0 auto; }

/* Neutralise global list rhythm inside the header menu */
.site-header .menu > li + li{ margin-top: 0 !important; }


/* Links (desktop) */
.site-header .menu > li > a{
  display:inline-flex; align-items:center;
  height:48px; line-height:1; font-weight:600;
  color:var(--black); position:relative; padding:0; text-decoration:none;
  white-space:nowrap;
}
/* Hover/active color + underline accent */
.site-header .menu > li > a:hover,
.site-header .menu > li.current-menu-item > a,
.site-header .menu > li.current_page_parent > a{ color:var(--primary-red); }
.site-header .menu > li > a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:3px; background:var(--primary-red); border-radius:3px;
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.site-header .menu > li > a:hover::after,
.site-header .menu > li.current-menu-item > a::after{ transform:scaleX(1); }

/* CTA (Book a visit) */
.site-header .menu > li.is-cta > a{
  background:var(--primary-red); color:#fff;
  padding:0 32px; border-radius:30px;
  box-shadow:0 10px 30px rgba(0,0,0,.1);
  transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
}
.site-header .menu > li.is-cta > a:hover,
.site-header .menu > li.is-cta > a:focus-visible{
  transform: translateY(-1px) scale(1.01);
  box-shadow:0 16px 40px rgba(0,0,0,.16);
  filter: brightness(1.05);
}
.site-header .menu > li.is-cta > a::after{ display:none; }
.site-header .menu > li.is-cta > a:hover,
.site-header .menu > li.is-cta.current-menu-item > a{ color:#fff; }

/* ---------- Desktop squeeze band (1239–1024) ---------- */
@media (max-width:1239px) and (min-width:1024px){
  .site-header .nav{ justify-content:center; }
  .site-header .nav__brand{ flex:0 1 auto; }
  .site-header .nav__menu{ flex:0 1 auto; margin-left:0; min-width:0; }
  .site-header .container{ padding-inline: var(--container-pad-squeeze); }

  .site-header .nav__brand img, .site-header .nav__brand svg{ height: clamp(46px, 5.2vw, 70px); }
  .site-header .menu > li > a{ font-size: clamp(14px, 1.2vw, 16px); }

  .site-header{
    --nav-gap: 24px;
    --menu-gap: 22px;
  }
  .site-header .menu > li.is-cta > a{ padding: 0 clamp(14px, 1.6vw, 20px); }
}

/* ========================
   DESKTOP DROPDOWNS
   ======================== */
.site-header .menu > li.menu-item-has-children{ position:relative; }
.site-header .menu > li.menu-item-has-children > a{ padding-right:18px; position:relative; }
.site-header .menu > li.menu-item-has-children > a::before{
  content:""; position:absolute; right:0; top:50%;
  width:9px; height:6px; background:currentColor;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: translateY(calc(-50% + 1px)); transition: transform .18s ease; opacity:.9;
}
.site-header .menu > li.menu-item-has-children > a:hover::before,
.site-header .menu > li.menu-item-has-children > a:focus-visible::before,
.site-header .menu > li.menu-item-has-children:has(> a:focus) > a::before{
  transform: translateY(calc(-50% + 1px)) rotate(180deg);
}
.site-header .menu > li.is-cta.menu-item-has-children > a::before{ display:none; }

/* Dropdown panel */
.site-header .menu > li > .sub-menu{
  position:absolute; top:100%; left:0;
  min-width:260px; padding:16px 20px;
  background:#fff; border-radius:12px; box-shadow:var(--shadow-1);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index:200; list-style:none; pointer-events:none;
}
.site-header .menu > li > a:hover + .sub-menu,
.site-header .menu > li > a:focus-visible + .sub-menu,
.site-header .menu > li:has(> a:focus) > .sub-menu,
.site-header .menu > li:has(> .sub-menu:hover) > .sub-menu{
  opacity:1; visibility:visible; transform:translateY(0);
  transition-delay:0s; pointer-events:auto;
}
.site-header .sub-menu li{ display:block; }
.site-header .sub-menu a{ display:block; padding:10px 0; height:auto; line-height:1.3; color:var(--black); }
.site-header .sub-menu a:hover{ color:var(--primary-red); }
.site-header .sub-menu a::after{ display:none; }
.site-header .menu > li:last-child > .sub-menu{ right:0; left:auto; }
@media (prefers-reduced-motion: reduce){
  .site-header .menu > li > .sub-menu{ transition:none; }
  .site-header .menu > li.menu-item-has-children > a::before{ transition:none; }
}

/* Dropdown type hierarchy */
.site-header .menu > li.menu-item-has-children > .sub-menu > li > a{ font-weight:600; }
.site-header .menu > li.menu-item-has-children > .sub-menu > li > .sub-menu a{ font-weight:400; }

/* Nursery dropdown: single-column style (desktop only) */
@media (min-width:1024px){
  .site-header .menu > li.menu-item-has-children:has(> a[href*="/nursery"]) > .sub-menu{
    width: min(var(--submenu-width), calc(100vw - 64px));
    padding:24px 28px; display:block;
  }
  .site-header .menu > li.menu-item-has-children:has(> a[href*="/nursery"]) > .sub-menu > li + li{ margin-top:10px; }
  .site-header .menu > li.menu-item-has-children:has(> a[href*="/nursery"]) > .sub-menu > li:first-child > a{
    font-weight:600; padding-bottom:6px; pointer-events:auto; cursor:pointer;
  }
  .site-header .menu > li.menu-item-has-children:has(> a[href*="/nursery"]) > .sub-menu > li:first-child .sub-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border-radius:0; display:block; padding:6px 0 0 14px; margin:0;
  }
  .site-header .menu > li.menu-item-has-children:has(> a[href*="/nursery"]) > .sub-menu > li:first-child .sub-menu li{ padding:6px 0; }
  .site-header .menu > li.menu-item-has-children:has(> a[href*="/nursery"]) > .sub-menu > li:first-child .sub-menu a::before{ display:none !important; }
}

/* ========================
   MOBILE (≤1023px)
   ======================== */

/* Burger only on ≤1023px */
.site-header .nav__toggle{ display:none; background:none; border:0; margin-left:auto; padding:8px; }
@media (max-width:1023px){ .site-header .nav__toggle{ display:inline-flex; } }

/* Burger styling + animation */
.site-header .nav__toggle{
  flex-direction:column; justify-content:center; gap:6px;
  width:var(--burger-size); height:var(--burger-size); cursor:pointer; z-index:var(--z-header);
}
.site-header .nav__toggle span{
  display:block; height:var(--burger-bar); width:100%;
  background:var(--primary-red); border-radius:3px;
  transition: transform .3s ease, opacity .3s ease;
}
.site-header .nav__toggle.is-active span:nth-child(1){ transform: translateY(calc(var(--burger-size)/4.0)) rotate(45deg); }
.site-header .nav__toggle.is-active span:nth-child(2){ opacity:0; }
.site-header .nav__toggle.is-active span:nth-child(3){ transform: translateY(calc(var(--burger-size)/-4.0)) rotate(-45deg); }

/* Overlay (renamed to avoid collisions) */
@media (max-width:1023px){
  .nav-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.4);
    opacity:0; visibility:hidden; transition:opacity .3s ease; z-index:var(--z-overlay);
  }
  .nav-overlay.is-active{ opacity:1; visibility:visible; }
}

/* Header height for drawer offset */
@media (max-width:1023px){
  .site-header .nav{ min-height: var(--drawer-top-mobile); }
}
@media (min-width:768px) and (max-width:1023px){
  .site-header .nav{ min-height: var(--drawer-top-tablet); }
}

/* Drawer layout + scroll */
@media (max-width:1023px){
  .site-header .nav__menu{
    position:fixed; left:0; right:0;
    top:var(--drawer-top-mobile);
    height:calc(100dvh - var(--drawer-top-mobile));
    background:var(--cream);
    transform:translateX(100%); transition:transform .3s ease;
    display:flex; flex-direction:column; align-items:stretch;
    gap:var(--drawer-section-gap); padding:24px;
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    z-index:var(--z-drawer); margin-left:0;
  }
}
@media (min-width:768px) and (max-width:1023px){
  .site-header .nav__menu{
    top:var(--drawer-top-tablet);
    height:calc(100dvh - var(--drawer-top-tablet));
  }
}
@media (max-width:1023px){
  .site-header .nav__menu.is-open{ transform:translateX(0); }

  /* Normalise spacing (variables control gaps) */
  .site-header .menu > li,
  .site-header .menu > li > .sub-menu,
  .site-header .menu > li > .sub-menu > li,
  .site-header .menu > li > .sub-menu > li > .sub-menu{
    margin:0; padding:0;
  }

  /* Stack sections and children */
  .site-header .menu{
    flex-direction:column; align-items:stretch;
    gap:var(--drawer-section-gap);
    padding:0 0 24px;
  }
  .site-header .menu > li{
    display:flex; flex-direction:column; align-items:flex-start;
    row-gap:var(--drawer-parent-child-gap);
  }

  /* Section labels */
  .site-header .menu > li > a{
    font-size:20px; font-weight:600; height:auto; line-height:1.35; padding:0;
  }
  .site-header .menu > li > a::after{ display:none; }
  .site-header .menu > li.menu-item-has-children > a::before{ display:none; }

  /* Children */
  .site-header .menu > li > .sub-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    background:transparent; box-shadow:none; border-radius:0; width:auto;
    padding-left:var(--drawer-indent-2);
    pointer-events:auto !important;
  }
  .site-header .menu > li > .sub-menu > li + li{ margin-top:var(--drawer-item-gap); }
  .site-header .menu > li > .sub-menu > li > a{ font-weight:500; padding:0; height:auto; }

  /* Level-3 */
  .site-header .menu > li > .sub-menu > li > .sub-menu{ display:block; padding-left:var(--drawer-indent-3); }
  .site-header .menu > li > .sub-menu > li > .sub-menu li + li{ margin-top:var(--drawer-item3-gap); }
  .site-header .menu > li > .sub-menu > li > .sub-menu a{ font-weight:400; padding:0; }

  .site-header .menu > li > .sub-menu > li.menu-item-has-children{
    display:flex; flex-direction:column; row-gap: var(--drawer-parent-child-gap);
  }

  /* CTA full width + touch target */
  .site-header .menu > li.is-cta > a{ min-height:46px; display:flex; align-items:center; justify-content:center; }

  /* Keep text rhythm consistent */
  .site-header .menu > li > a,
  .site-header .menu > li > .sub-menu a{ line-height:1.35; }

  .site-header .menu a{ position:relative; z-index:1; }
}

/* Desktop reset (if any drawer styles leak) */
@media (min-width:1024px){
  .nav-overlay{ display:none !important; }
  .site-header .nav__menu{ position:static; transform:none; background:transparent; padding:0; gap:var(--menu-gap); display:flex; }
  .site-header .menu{ flex-direction:row; gap:var(--menu-gap); }
  .site-header .menu > li > a{ height:48px; padding:0; font-size:inherit; }
}

/* Minor mobile type tweaks */
@media (max-width:1023px){
  .site-header .menu > li > .sub-menu a{ line-height:1.45; }
  .site-header .menu > li > a{ font-size:19px; line-height:1.35; }
}