/* =====================================================
   NAV CSS (Desktop unchanged; Mobile = purple dropdown)
   - Burger on right
   - Mobile panel is purple and sits under header, centered
   - Opening a submenu expands the container (no inner scrollbars)
   - Submenu content centered
   - Supports .w--open or aria-expanded="true"
   ===================================================== */

/* ---------- Base / Desktop ---------- */
.navbar { position: relative; z-index: 100; }
.navbar-justify-between { display:flex; align-items:center; justify-content:flex-start; gap:16px; }
.nav-menu { display:flex; gap:1rem; align-items:center; }
.nav-toggle { display:none; background:none; border:0; width:44px; height:44px; cursor:pointer; }

/* burger lines + "X" (optional) */
.nav-toggle .nav-toggle-lines,
.nav-toggle .nav-toggle-lines::before,
.nav-toggle .nav-toggle-lines::after{
  display:block; width:24px; height:2px; background:#222;
  position:relative; margin:0 auto; transition:transform 200ms ease, opacity 200ms ease;
}
.nav-toggle .nav-toggle-lines::before,
.nav-toggle .nav-toggle-lines::after{ content:""; position:absolute; left:0; }
.nav-toggle .nav-toggle-lines::before{ top:-7px; }
.nav-toggle .nav-toggle-lines::after{ top: 7px; }
.nav-toggle.w--open .nav-toggle-lines{ transform:rotate(45deg); }
.nav-toggle.w--open .nav-toggle-lines::before{ transform:rotate(-90deg) translateX(-7px); }
.nav-toggle.w--open .nav-toggle-lines::after{ opacity:0; }

/* ---------- DESKTOP: click-to-open (no hover) ---------- */
@media (min-width: 992px){
  .nav-menu .dropdown{ position: relative; }
  .dropdown-list{
    /* keep it hidden by default */
    display: none; 
/*    position: absolute; left: 0; top: 100%;*/
    min-width: 280px;
    background: #fff; color: #222;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border-radius: 10px; 
    padding: 8px 10px;
    z-index: 101;
  }

  /* OPEN when the parent gets .w--open (set by JS) */
  .dropdown.w--open > .dropdown-list{
    display: block !important;   /* override any inline display:none */
  }

  /* (Optional) turn off any hover-open rules you had before */
  /* .dropdown:hover > .dropdown-list{ display: none; } */
}


/* ---------- MOBILE (<=991px) ---------- */
@media (max-width: 991px){
  /* layout: logo left, burger right */
  .navbar-justify-between{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .nav-toggle{
    display:inline-flex; align-items:center; 
    justify-content:center; 
    margin-left:auto;
  }
  
  .nav-dropdown h4 {
    font-size:14px;
    font-weight:500;
    padding:0;
    margin:0;
  }
  
  .menu_desc {
    display:none;
  }

  /* ensure nothing clips the dropdown */
  .navbar, .navbar-right-contents{ 
    position:relativex; 
    /*overflow:visible !important;*/ 
    z-index:100; 
  }

  /* purple, centered panel UNDER the header (hidden by default) */
  .nav-menu{
    position:fixed; top:100%;
    left: 5vw; 
    right: 0; 
    width: 90vw; 
    transform: translateY(-8px);
    background:var(--tr-p2); color:#fff;
    border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.18);
    display:block; padding:10px 12px;

    /* collapsed container */
    height:0;                /* use height so the container truly collapses */
    opacity:0; pointer-events:none;
    overflow:hidden;         /* no inner scroll when closed */
    z-index:101;
    transition:transform 220ms ease, opacity 220ms ease;
  }
  
  .dropdown .button.bg-yellow-1.ml20 {
    margin:20px 0 20px 0;
  }

  /* OPEN — either .w--open or aria-expanded on the burger */
  .nav-menu.w--open{
    transform:translateX(0%) translateY(0);
    opacity:1; pointer-events:auto;
    height:auto;             /* let it grow with content */
    overflow:visible;        /* no inner scrollbars */
  }
  .nav-toggle[aria-expanded="true"] ~ .navbar-right-contents .nav-menu{
    transform:translateX(0%) translateY(0);
    opacity:1; pointer-events:auto;
    height:auto; overflow:visible;
  }

  /* top-level items centered */
  .nav-menu > .dropdown{ text-align:center;}
/*  .nav-menu > .dropdown + .dropdown{ border-top:1px solid rgba(255,255,255,.18); } */
  .dropdown-toggle{
    display:block; padding:10px 12px; font-size:18px; line-height:1;
    cursor:pointer; user-select:none; 
  }

  /* *** SUBMENU EXPANSION ***
     We avoid inner scrollbars by NOT constraining the submenu and
     letting it flow, which expands the .nav-menu container.
  */
  .dropdown-list{
    position: static !important;     /* ensure it’s in normal flow */
    display: none;                   /* closed by default */
    margin-top:6px;
    background: transparent; color:#fff; text-align:center;
    overflow: visible !important;    /* never scroll inside */
    width:inherit;
    border:none;
    box-shadow:none;
  }
  .dropdown.w--open > .dropdown-list{
    display: block !important;       /* opening pushes the container height */
  }

  /* center submenu content */
  .nav-inner.grid-3col{
    display:grid; grid-template-columns: 1fr;
    justify-items:center; align-items:start; gap:8px;
  }
  .link-block{
    display:block; width:100%; max-width:560px;
    padding:0; border-radius:8px; text-align:center; color:#fff;
  }
  .link-block:hover{ background: rgba(255,255,255,.12); }

  /* optional: headings/text on purple */
  .dropdown-list .orange{ color:#fff !important; }
  .dropdown-list .text-block-2{ color: rgba(255,255,255,.85); }

  /* if your JS toggles this to prevent page scroll */
  body.nav-lock{ overflow:hidden; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .nav-menu, .nav-toggle .nav-toggle-lines{ transition: none !important; }
}