/* nav.css — shared nav/footer chrome, referenced by every page.
   Rendered content comes from nav.js; this file only styles it.
   Brand tokens match INTERNAL_style-guide.md. */

nav{background:#EEEDFE;border-bottom:1px solid #CECBF6;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between}
.nav-brand{font-size:18px;font-weight:700;color:#3C3489;text-decoration:none}
.nav-brand span{color:#0F6E56}
.nav-links{display:flex;gap:1.5rem;align-items:center}
.nav-links > a{font-size:13px;font-weight:700;color:#534AB7;text-decoration:none}
.nav-links > a:hover{opacity:0.8}
.nav-links > a[aria-current="page"]{color:#3C3489;text-decoration:underline;text-underline-offset:3px}

.nav-dropdown{position:relative}
.nav-dropdown-toggle{font-size:13px;font-weight:700;color:#534AB7;background:none;border:none;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:3px;padding:0}
.nav-dropdown-toggle:hover{opacity:0.8}
.nav-dropdown-menu{display:none;position:absolute;top:100%;left:0;margin-top:12px;background:#fff;border:1px solid #CECBF6;border-radius:10px;padding:8px;min-width:180px;box-shadow:0 6px 20px rgba(60,52,137,0.14);z-index:30}
.nav-dropdown-menu.open{display:block}
.nav-dropdown-menu a{display:block;padding:8px 10px;font-size:13px;font-weight:700;color:#3C3489;border-radius:6px;text-decoration:none}
.nav-dropdown-menu a:hover{background:#EEEDFE;opacity:1}
.nav-dropdown-menu a[aria-current="page"]{background:#EEEDFE}

footer{background:#EEEDFE;border-top:1px solid #CECBF6;padding:1.25rem 2rem;text-align:center}
footer p{font-size:11px;color:#534AB7;line-height:1.8}
footer a{color:#3C3489;font-weight:700;text-decoration:none}
footer a:hover{opacity:0.8}
footer .links{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-bottom:0.5rem}
footer .links a{color:#534AB7;font-size:11px}

/* ── SECONDARY NAV: RAIL (desktop) / BOTTOM BAR (mobile) ──
   Parallel to the top nav, not a replacement for it. Fixed-position so it
   doesn't require restructuring every page's existing layout. */

body{ padding-left: 0; padding-bottom: 0; }

.rail{
  position:fixed; top:0; left:0; bottom:0; width:64px; z-index:40;
  background:#fff; border-right:1px solid #CECBF6;
  padding:16px 0; display:flex; flex-direction:column; align-items:center; gap:14px;
  overflow-y:auto;
}
.rail a{
  display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none;
  color:#888780; font-size:9.5px; font-weight:700; width:52px; text-align:center;
  padding:6px 2px; border-radius:12px; line-height:1.2;
}
.rail a:hover{ background:#F5F5F0; }
.rail a.active{ background:#EEEDFE; color:#3C3489; }
.rail .rail-icon{ font-size:17px; }

.mobile-nav{ display:none; }

@media (min-width: 901px){
  body.sa-has-rail { padding-left: 64px; }
}

@media (max-width: 900px){
  .rail{ display:none; }
  .mobile-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:100;
    background:#fff; border-top:1px solid #CECBF6;
    justify-content:space-around; padding:6px 2px calc(6px + env(safe-area-inset-bottom));
  }
  .mobile-nav a{
    display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none;
    color:#888780; font-size:9px; font-weight:700; padding:5px 4px; border-radius:10px;
    flex:1; text-align:center;
  }
  .mobile-nav a.active{ background:#EEEDFE; color:#3C3489; }
  .mobile-nav .rail-icon{ font-size:16px; }
  body.sa-has-mobile-nav { padding-bottom: 56px; }
}