/* nav-menu.css — the grouped main menu, for EVERY page that has it.
   Linked by scripts/sync-partials.js (static pages) and by blog-post.js /
   author-page.js. Kept out of styles.css because tool, checklist, compare,
   quiz, scenario and guide pages carry their own inline styles and do not
   load styles.css. Colours fall back to literals for the same reason. */
/* ── Grouped main menu (2026-10) ─────────────────────────────────────────
   Learn / Tools / About open dropdowns: on hover, or on click/Enter (nav.js
   sets aria-expanded). "For Colleges" is the one highlighted link (data-cta).
   In the mobile drawer every group is shown open, as a labelled section. */
.nav-group{position:relative}
.nav-group-btn{background:transparent;border:0;color:var(--white,#fbfbfb);font:inherit;font-weight:600;padding:0.35rem 0.6rem;border-radius:6px;cursor:pointer;opacity:0.95}
.nav-group-btn::after{content:"";display:inline-block;margin-left:6px;border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.nav-group-btn:hover,.nav-group-btn[aria-expanded="true"]{background:rgba(255,255,255,0.05)}
.nav-group:has(a.active)>.nav-group-btn{color:var(--gold,#d4a941)}
.nav-menu{display:none;position:absolute;top:100%;left:0;min-width:200px;flex-direction:column;background:var(--navy-2,#0b2634);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:6px;box-shadow:0 18px 40px rgba(2,6,9,0.6);z-index:50}
.nav-group:hover>.nav-menu,.nav-group-btn[aria-expanded="true"]+.nav-menu{display:flex}
/* Closed by click or Escape while the pointer is still on it (nav.js). */
.nav-group.sg-nohover:hover>.nav-group-btn[aria-expanded="false"]+.nav-menu{display:none}
.main-nav .nav-menu a{display:block;padding:0.5rem 0.7rem;white-space:nowrap}
/* One size for the whole menu: some pages set their own .main-nav a size. */
.main-nav .nav-group-btn,.main-nav .nav-menu a,.main-nav a[data-cta]{font-size:1rem}
/* The current page, inside a dropdown or the drawer. */
.main-nav .nav-menu a.active{color:var(--gold,#d4a941);background:rgba(212,169,65,0.12)}
.main-nav a[data-cta]{background:var(--gold,#d4a941);color:var(--navy,#071827);padding:0.45rem 0.95rem;border-radius:8px;opacity:1}
.main-nav a[data-cta]:hover,.main-nav a[data-cta].active{background:#e3bd5c}
@media (max-width:900px){
  /* The drawer scrolls when it is taller than the screen (short phones);
     nav.js also keeps it above the cookie banner and moves "For Colleges"
     to the top while in drawer mode. */
  .main-nav{min-width:230px;align-items:stretch;max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain}
  .main-nav .nav-group{width:100%}
  .main-nav .nav-group-btn{pointer-events:none;cursor:default;color:var(--gold,#d4a941);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;padding:0.7rem 0.6rem 0.15rem;opacity:1;background:transparent}
  .main-nav .nav-group-btn::after{display:none}
  .main-nav .nav-menu{display:flex;position:static;min-width:0;background:transparent;border:0;box-shadow:none;padding:0}
  .main-nav .nav-menu a{white-space:normal}
  .main-nav a[data-cta]{text-align:center;margin:2px 0 6px}
}