/* ==== tbh-dropdown-unify ==== */

/* ============================================================
   UNIFY DESKTOP DROPDOWNS to match the About the Hospital (mega) menu.
   Standard dropdowns had a flat blue bg (#C2D8F4), 4px radius, no border.
   About/mega has a near-white panel, 14px radius, soft border, refined
   shadow. This brings every standard dropdown to that same treatment.
   Scoped to desktop; .nav-mega already correct so left untouched.
   ============================================================ */
@media (min-width:980px){
  .nav-dropdown:not(.nav-mega){
    background:#EDF2F8 !important;                 /* near-white, like About */
    border:1px solid #E3ECF5 !important;
    border-radius:12px!important;
    box-shadow:0 1px 2px rgba(0,33,78,.04),
               0 18px 40px -24px rgba(0,33,78,.28) !important;
    padding:12px !important;
    margin-top:8px !important;
  }
  /* links inside: match the mega menu's item treatment */
  .nav-dropdown:not(.nav-mega) > a[role="menuitem"],
  .nav-dropdown:not(.nav-mega) > a{
    display:block !important;
    color:#333B45 !important;                      /* same ink as About items */
    font-size:15px !important;
    font-weight:500 !important;
    padding:9px 12px !important;
    border-radius:8px!important;
    text-decoration:none !important;
    transition:background .16s ease, color .16s ease !important;
  }
  .nav-dropdown:not(.nav-mega) > a[role="menuitem"]:hover,
  .nav-dropdown:not(.nav-mega) > a:hover{
    background:#F6F6F4 !important;                 /* soft blue hover wash */
    color:#00214E !important;
  }
}

/* ==== tbh-nav-tier2-fix ==== */

/* ============================================================
   DESKTOP PRIMARY NAV — fix wrapped rows rendering white-on-white.
   12 top-level items need ~2245px but the container is ~1224px, so they
   wrap. The navy .nav-tier2 background only covered the first rows, so
   wrapped items fell onto the white page = invisible. This makes the
   navy band cover ALL wrapped rows, tightens the items to a clean two
   rows, centres them, and forces every label white on the navy.
   ============================================================ */
@media (min-width:980px){
  .nav-tier2{
    background:var(--ink-rich, #00214E) !important;   /* navy behind every row */
    height:auto !important;
    min-height:0 !important;
    padding-top:4px !important;
    padding-bottom:4px !important;
    overflow:visible !important;
  }
  .nav-tier2 .wrap{
    overflow:visible !important;
    height:auto !important;
    min-height:0 !important;
    display:block !important;
  }
  /* the list must grow to its wrapped height so the navy band covers every row */
  .nav-primary{ height:auto !important; min-height:0 !important; }

  .nav-primary{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:2px 4px !important;
    row-gap:2px !important;
  }
  /* tighten each item so 12 sit on two tidy rows */
  .nav-primary-link{
    font-size:12.5px !important;
    letter-spacing:.02em !important;
    padding:7px 11px !important;
    white-space:nowrap !important;
    color:#FFFFFF !important;
  }
  .nav-primary-btn{
    padding-left:2px !important;
    padding-right:6px !important;
    color:#FFFFFF !important;
  }
  /* every label + chevron stays white on the navy, in every row */
  .nav-tier2 .nav-primary-link,
  .nav-tier2 .nav-primary-btn,
  .nav-tier2 .nav-primary-link span,
  .nav-tier2 .dd-chev{
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    stroke:#FFFFFF !important;
  }
  .nav-tier2 .dd-chev{ fill:none !important; }
}

/* ==== tbh-mega-proportional ==== */

/* ============================================================
   PROPORTIONAL MEGA MENUS — width scales with content.
   Previously .nav-mega-cols was a fixed 3-column grid at 920px, so a
   2-group menu (e.g. Mental Health) was as wide as a 30-link one.
   Now columns are fixed-width flex items and the panel sizes to fit:
     single col ~ existing 280px, 2 cols ~ 560px, 3 cols ~ 840px.
   ============================================================ */
@media (min-width:980px){
  .nav-dropdown.nav-mega{
    width:auto !important;
    min-width:0 !important;
    max-width:min(92vw, 900px) !important;
    padding:26px 30px !important;         /* 28-32px internal padding */
    border-radius:12px!important;
  }
  .nav-mega .nav-mega-cols{
    display:flex !important;
    grid-template-columns:none !important; /* kill the fixed 3-col grid */
    gap:36px !important;                    /* consistent 32-40px between columns */
    align-items:flex-start !important;      /* equal top alignment */
  }
  .nav-mega .nav-mega-col,
  .nav-mega .nav-mega-col--wide{
    flex:0 0 236px !important;
    width:236px !important;
    max-width:236px !important;
  }
  /* headings: consistent spacing above/below */
  .nav-mega .nav-mega-title{
    margin:0 0 10px !important;
    padding:0 12px !important;
  }
  /* links: comfortable, teal on hover, slide 3px (already inherited, reinforced) */
  .nav-mega .nav-mega-col > a[role="menuitem"]{
    display:block !important;
    font-size:15px !important;
    font-weight:500 !important;
    color:#333B45 !important;
    padding:8px 12px !important;
    border-radius:8px!important;
    text-decoration:none !important;
    transition:background .18s ease, color .18s ease, transform .18s ease !important;
  }
  .nav-mega .nav-mega-col > a[role="menuitem"]:hover{
    background:#F6F6F4 !important;
    color:#007D8A !important;
    transform:translateX(3px) !important;
  }

}