/* =========================
   OVERLAY SHELL (mobile-only baseline)
   ========================= */
body.no-scroll {
  overflow: hidden;
}

#site-navigation {
  position: fixed;
  overflow: scroll;
  inset: 0;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);   /* small lift */
  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility 0s linear .3s;   /* delay visibility toggle until fade out finishes */
}
#site-navigation.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility 0s linear 0s;   /* make visible immediately */
}

/*
#site-navigation .align-full-inner {
  max-width: 1124px;
  margin: 0 auto;
  padding: 16px;
}
  */

/* Hide the original WP <ul> when the panel UI is present */
#site-navigation .menu-source-hidden { display: none !important; }

/* =========================
   PANEL STAGE + PANELS
   ========================= */
#site-navigation .panel-stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

#site-navigation .menu-panel {
  position: absolute;
  inset: 0;
/*   background: var(--overlay-bg, rgba(0,0,0,.9)); */
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .28s ease, opacity .28s ease, visibility 0s linear .28s;
  overscroll-behavior: contain;
}

#site-navigation .menu-panel.is-active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#site-navigation .menu-panel.is-left {
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
}
#site-navigation .menu-panel.is-right {
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
}

/* Header (Back + Title) */
#site-navigation .panel-header {
  /*display: flex;
  align-items: center;
  gap: .75rem;
   */
  padding: 1rem 0 .5rem;
  margin-top:5.5em;
}
#site-navigation .menu-back {
  border: 0; 
  background: transparent; 
  color: #fff;
  cursor: pointer; 
  padding: .5rem .25rem; line-height: 1;
}

#site-navigation .panel-title {
  margin: 0; 
  margin-top:.5em;
  font: inherit; 
  font-weight: 700;
  color:#fff;
  font-size:1.5em;
}

.header-buttons{
    position:relative;
    z-index: 1001;
}

/* List */
#site-navigation .panel-list {
  list-style: none;
  margin: 0; padding: .25rem 0 2rem;
}
#site-navigation .panel-list > li {
  display: flex; align-items: center; gap: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
#site-navigation .menu-link {
  flex: 1 1 auto;
  display: block;
  padding: .7rem 0;
  color: #fff; text-decoration: none;
}

/* Chevron button (opens child panel) */
#site-navigation .menu-expand {
  flex: 0 0 auto;
  border: 0; background: transparent; color: #fff;
  cursor: pointer; padding: 1rem 0 1rem .5rem; line-height: 1;
}
#site-navigation .menu-expand [aria-hidden="true"] {
  font-size: 1.25rem; transform: translateY(1px);
}

/* Screen-reader utility (fallback if theme lacks it) */
#site-navigation .screen-reader-text,
#site-navigation .visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #site-navigation .menu-panel { transition: none; }
}


/* =========================
   DESKTOP MEGA (≥ 900px)
   ========================= */
@media (min-width: 900px) {



  /* hide mobile panels on desktop */
  #site-navigation .panel-stage { display: none !important; }

  /* show the desktop mega stage */
  #site-navigation .mega-stage { display: block; }

  #site-navigation {
  transform: translateY(-3em);   /* small lift */
  opacity:0;
  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility 0s linear .3s;   /* delay visibility toggle until fade out finishes */
}
#site-navigation.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility 0s linear 0s;   /* make visible immediately */

    /* 🔑 creates the blur effect */
    /*
  backdrop-filter: blur(1px); 
  -webkit-backdrop-filter: blur(1px); 
  */
}


  #site-navigation .mega-stage {
    position: relative;
    min-height: 40vh;         /* grow as needed; panel controls its height */
  }

  /* top row of first-level items */
  #site-navigation .mega-top {
    display: flex;
    gap: 2rem;
    align-items: center;
    padding: 1rem 0 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.7);
  }
  #site-navigation .mega-top-list { 
    display: flex; 
    gap: 2rem; 
    list-style: 
    none; margin: 0; 
    padding: 0;
    align-items: center;
  }
  #site-navigation .mega-top-link {
    border: 0; 
    background: transparent; 
    color: #fff; 
    cursor: pointer;
    font-size: 1rem;
    /* padding: .25rem .5rem; */

    font-weight: 500;
    font-size: 20px;
    letter-spacing: .03em;
  }
  #site-navigation .mega-top-link[aria-expanded="true"], #site-navigation .mega-top-link:hover {
    /* text-decoration: underline; */
    transform:translateY(-2px);
    transition:.3s;
    color:#2B74FF;
  }

  /* body region that holds the panel(s) */
  #site-navigation .mega-body {
    position: relative;
    padding-top: 1.25rem;
    
  }

  .mega-panel{
    min-height:12em;
  }

  /* panels stack in place; only active shows */
  #site-navigation .mega-panel {
   
    position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 270ms ease,
    transform 290ms ease;
  will-change: opacity, transform;
  padding-top:2em;
  
  }
  #site-navigation .mega-panel.is-active {
    opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  }


/* Put this near your existing .mega-cols rules (desktop section) */
#site-navigation .mega-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* you already have 5 */
  gap: 2.5rem 3rem;
  /* new: expose a custom property for offset */
  --offset: 0; /* number of columns to skip (0 = start at col 1) */
}

/* Spacer pseudo-item that takes up the first --offset columns */
/* Only create spacer when offset is actually set */
#site-navigation .mega-cols[data-offset]:before {
  content: "";
  grid-column: 1 / span var(--offset);
  width: 0;
  height: 0;
  pointer-events: none;
}



/* Only create spacer when offset is actually set */
  /* column title = second-level link */
  #site-navigation .mega-col-title {
    margin: 0 0 1rem 0;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .03em;
    line-height: 1.2;
    color: #fff;


  }
  #site-navigation .mega-col-title a {
    color: inherit; text-decoration: none;
  }
  #site-navigation .mega-col-title a:hover {
    text-decoration: underline;
    text-underline-offset: 5px; /* adjust spacing */
  }

  /* third-level links list */
  #site-navigation .mega-col-list {
    list-style: none; margin: 0; padding: 0;
  }
  /* nav list padding. */
  #site-navigation .mega-col-list > li { 
    line-height:1.2;
    margin-bottom: .75rem;
  }

  #site-navigation .mega-col-list a {
    color: #fff; 
    text-decoration: none; 
    /* font-weight: 400; */
  }
  #site-navigation .mega-col-list a:hover { 
    text-decoration: underline; 
    text-underline-offset: 5px; /* adjust spacing */
  }

  /* optional: subtle divider between columns 
  #site-navigation .mega-col + .mega-col { position: relative; }
  #site-navigation .mega-col + .mega-col::before {
    content: ""; position: absolute; left: -1.5rem; top: .25rem; bottom: .25rem;
    width: 1px; background: rgba(255,255,255,.1);
  }
    */
}

/* ---- MOBILE FIX: force panel system, hide mega ---- */
@media (max-width: 899px) {
  /* show mobile panel system */
  #site-navigation .panel-stage { display: block !important; }

  /* hide desktop mega system on mobile */
  #site-navigation .mega-stage { display: none !important; }

  /* keep the original WP menu hidden (we only read from it) */
  #site-navigation #primary-menu.menu-source-hidden,
  #site-navigation .menu-source-hidden { display: none !important; }

  /* restore panel layout/animation */
  #site-navigation .panel-stage { 
    position: relative; 
    min-height: 100svh; 
    overflow: hidden; 
}

  #site-navigation .menu-panel {
    position: absolute; inset: 0;
   /*  background: var(--overlay-bg, rgba(0,0,0,.9)); */
    transform: translateX(100%);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .28s ease, opacity .28s ease, visibility 0s linear .28s;
  }
  #site-navigation .menu-panel.is-active {
    transform: translateX(0);
    opacity: 1; 
    visibility: visible; 
    pointer-events: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
    padding-bottom:7em;
  }
  #site-navigation .menu-panel.is-left  { transform: translateX(-100%); opacity: 0; visibility: hidden; }
  #site-navigation .menu-panel.is-right { transform: translateX(100%);  opacity: 0; visibility: hidden; }

  /* kill bullets + restore row layout */
  #site-navigation .panel-list { list-style: none !important; margin: 0; padding: .25rem 0 2rem; }
  #site-navigation .panel-list > li {
    display: flex; align-items: center; gap: .5rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  #site-navigation .menu-link {
    flex: 1 1 auto; 
    display: block; 
    /* padding: 1rem 0;  */
    color: #fff; 
    text-decoration: none;
  }
  #site-navigation .menu-expand {
    flex: 0 0 auto; border: 0; background: transparent; color: #fff;
    padding: 1rem 0 1rem .5rem; line-height: 1; cursor: pointer;
  }
  #site-navigation .menu-expand [aria-hidden="true"] { font-size: 1.25rem; transform: translateY(1px); }

  /* header */
  /* #site-navigation .panel-header { display: flex; align-items: center; gap: .75rem; padding: 1rem 0 .5rem; } */
  /* #site-navigation .panel-title  { margin: 0; font: inherit; font-weight: 600; } */
  #site-navigation .menu-back    { border: 0; background: transparent; color: #fff; cursor: pointer; padding: .5rem .25rem; }
}

/* Only apply the two-column treatment on desktop */
@media (min-width: 900px) {
  .mega-col .mega-col-list.is-two-col {
    column-count: 2;
    column-gap: 2rem;
    column-fill: balance;
  }
  .mega-col .mega-col-list.is-two-col > li,
  .mega-col .mega-col-list.is-two-col > li > ul {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
  }
  /* If you allow nested ULs (your level 4), keep them together too */
  .mega-col .mega-col-list.is-two-col > li > ul {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: .35rem 0 .25rem .75rem; /* your existing spacing */
    list-style: none;
    padding: 0;
  }

  /* Respect start-col-N (you already set --offset on .mega-cols) */
  .mega-cols[data-offset] > .mega-col:first-child {
    grid-column-start: calc(1 + var(--offset, 0));
  }

  /* Default: each column spans one track */
  .mega-col { grid-column: span 1; min-width: 10rem; }

  /* Long section: take 2 tracks for breathing room */
  .mega-col.span-2 { grid-column: span 2; }
}




/* ---- DESKTOP FIX: hide panels, show mega ---- */
@media (min-width: 900px) {
  #site-navigation .panel-stage { 
    display: none !important; 
}
  #site-navigation .mega-stage  { 
    display: block !important;
    margin-top: 13em;

 }
}