/* ---------------------------------------------------------------
   Star Bound — site navigation (r77)
   Rev 77 — 2026-09-23 — sidebar uses its own pinned colors so pages
   that redefine --ink (Ground School explorers) no longer turn it gray.
   Desktop (>=881px): permanent left sidebar, nested accordion
   (Departments -> each department's articles).
   Mobile (<881px): hamburger opens the same sidebar as a
   left-sliding drawer with a scrim behind it.
   --------------------------------------------------------------- */

:root{
  --sbw: 272px; /* sidebar width */
}

/* Hide the old horizontal topbar link row everywhere — the sidebar
   replaces it now. Topbar keeps just the brand mark (+ hamburger
   on mobile). */
/* r80: top bar carries About, Contact and site search. */
.topbar nav{ display:flex !important; align-items:center; margin-left:auto !important; width:auto !important; flex-wrap:nowrap; }

.navToggle{
  display:none;
  width:34px; height:28px;
  margin-left:auto;
  padding:0; border:0; background:transparent;
  cursor:pointer;
  flex-direction:column; justify-content:space-between;
  z-index:80;
}
.navToggle span{
  display:block; height:2px; width:100%;
  background:var(--nav-text, #E9E5DA);
  border-radius:2px;
  transition:transform .22s ease, opacity .22s ease, background .22s ease;
}
.navToggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(13px) rotate(45deg); }
.navToggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.navToggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-13px) rotate(-45deg); }

.navScrim{
  position:fixed; inset:0;
  background:rgba(4,5,10,.6);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  z-index:70;
}
.navScrim.is-open{ opacity:1; pointer-events:auto; }

/* ---- The sidebar / drawer ---- */
.navDrawer{
  --nav-bg:#0D1018; --nav-text:#E9E5DA; --nav-dim:#9AA1B0; --nav-accent:#E8A33D;
  color:var(--nav-text);
  position:fixed; top:0; left:0; height:100vh;
  width:min(84vw, 320px);
  background:var(--nav-bg);
  border-right:1px solid rgba(233,229,218,.12);
  box-shadow:18px 0 40px rgba(0,0,0,.45);
  transform:translateX(-100%);
  transition:transform .28s ease;
  z-index:75;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.navDrawer.is-open{ transform:translateX(0); }

.navDrawer-inner{ padding:22px 20px 40px; display:flex; flex-direction:column; gap:2px; }
.navDrawer-brand{
  display:block; margin-bottom:14px; padding-bottom:14px;
  border-bottom:1px solid rgba(233,229,218,.12);
}
.navDrawer-brand img{ height:28px; width:auto; display:block; }

.navDrawer a.navLink,
.navAcc-trigger,
.navAcc-deptlink{
  display:block; width:100%; text-align:left;
  font-family:"Archivo", system-ui, sans-serif; font-variation-settings:"wdth" 100,"wght" 500;
  font-size:.9rem; letter-spacing:.03em;
  color:var(--nav-text, #E9E5DA);
  text-decoration:none;
  background:transparent; border:0;
  padding:12px 2px;
  cursor:pointer;
}
.navDrawer a.navLink{ border-bottom:1px solid rgba(233,229,218,.08); }
.navDrawer a.navLink[aria-current="page"],
.navDrawer a.navLink:hover,
.navAcc-trigger:hover,
.navAcc-deptlink:hover{ color:var(--nav-accent, #E8A33D); }

.navAccordion{ border-bottom:1px solid rgba(233,229,218,.08); }
.navAccordion .navAcc-trigger{ border-bottom:0; display:flex; align-items:center; justify-content:space-between; gap:10px; }

.navAcc-caret{
  display:inline-block; width:8px; height:8px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .2s ease; flex:none;
  opacity:.75;
}
.navAcc-trigger[aria-expanded="true"] > .navAcc-caret,
.navAcc-caretbtn[aria-expanded="true"] .navAcc-caret{ transform:rotate(-135deg); }

.navAcc-panel{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
.navAcc-panel > a{
  display:block;
  font-family:"Newsreader", Georgia, serif;
  font-size:.85rem;
  color:var(--nav-dim, #9AA1B0);
  text-decoration:none;
  padding:8px 2px 8px 14px;
  border-left:2px solid rgba(233,229,218,.14);
  margin-left:2px;
}
.navAcc-panel > a:hover, .navAcc-panel > a[aria-current="page"]{ color:var(--nav-accent, #E8A33D); border-left-color:var(--nav-accent, #E8A33D); }

/* Nested department-with-articles row */
.navAccordion--dept{ border-bottom:0; padding-left:14px; border-left:2px solid rgba(233,229,218,.14); margin-left:2px; }
.navAcc-row{ display:flex; align-items:center; gap:6px; }
.navAcc-deptlink{ flex:1; padding:8px 2px; font-size:.85rem; color:var(--nav-dim, #9AA1B0); font-family:"Newsreader", Georgia, serif; }
.navAcc-deptlink:hover, .navAcc-deptlink[aria-current="page"]{ color:var(--nav-accent, #E8A33D); }
.navAcc-caretbtn{
  border:0; background:transparent; color:var(--nav-dim, #9AA1B0);
  cursor:pointer; padding:6px; display:flex; align-items:center; justify-content:center;
}
.navAcc-caretbtn:hover{ color:var(--nav-accent, #E8A33D); }
.navAcc-subpanel{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.navAcc-subpanel > a{
  display:block;
  font-family:"Newsreader", Georgia, serif;
  font-size:.78rem;
  color:var(--nav-dim, #9AA1B0);
  opacity:.85;
  text-decoration:none;
  padding:6px 2px 6px 14px;
  border-left:2px solid rgba(233,229,218,.1);
  margin-left:6px;
}
.navAcc-subpanel > a:hover, .navAcc-subpanel > a[aria-current="page"]{ color:var(--nav-accent, #E8A33D); opacity:1; border-left-color:var(--nav-accent, #E8A33D); }

/* ---- Mobile: hamburger + off-canvas drawer (<881px) ---- */
@media (max-width:880px){
  .navToggle{ display:flex; }
  .topbar .inner{ flex-wrap:nowrap !important; }
}

/* ---- Desktop: permanent fixed left sidebar (>=881px) ---- */
@media (min-width:881px){
  body{ padding-left:var(--sbw); }
  .navToggle{ display:none !important; }
  .navScrim{ display:none !important; }
  .navDrawer{
    transform:none !important;
    width:var(--sbw);
    box-shadow:none;
  }
  .topbar{ padding-left:0; }
}

.navAcc-grouphdr{
  margin:10px 0 3px;
  padding:0 0 3px;
  font:600 10px/1.2 Archivo,system-ui,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--nav-accent);
  border-bottom:1px solid rgba(233,229,218,.18);
}
.navAcc-subpanel .navAcc-grouphdr:first-child{margin-top:4px;}


/* --- site search (r80) --- */
.topbar .siteSearch{display:flex;align-items:center;gap:0;margin-left:14px}
.topbar .siteSearch input{
  font:inherit;font-size:13px;color:#eee;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.22);border-right:0;border-radius:3px 0 0 3px;
  padding:6px 10px;width:150px;outline:none;transition:width .18s,border-color .18s}
.topbar .siteSearch input::placeholder{color:rgba(255,255,255,.45)}
.topbar .siteSearch input:focus{width:210px;border-color:#e0a340}
.topbar .siteSearch button{
  font:inherit;font-size:14px;line-height:1;cursor:pointer;color:#0b0b0b;background:#e0a340;
  border:1px solid #e0a340;border-radius:0 3px 3px 0;padding:6px 11px}
.topbar .siteSearch button:hover{background:#f0b455}
@media (max-width:820px){.topbar .siteSearch input{width:108px}.topbar .siteSearch input:focus{width:140px}}
@media (max-width:560px){.topbar .siteSearch{margin-left:8px}.topbar .siteSearch input{width:92px}}

/* --- search results page --- */
.srch-wrap{max-width:820px;margin:0 auto;padding:0 20px}
.srch-form{display:flex;margin:6px 0 26px}
.srch-form input{flex:1;font:inherit;font-size:17px;color:#f2f2f2;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.25);border-right:0;border-radius:4px 0 0 4px;padding:12px 14px;outline:none}
.srch-form input:focus{border-color:#e0a340}
.srch-form button{font:inherit;font-size:15px;font-weight:600;cursor:pointer;color:#0b0b0b;background:#e0a340;
  border:1px solid #e0a340;border-radius:0 4px 4px 0;padding:12px 22px}
.srch-count{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#9a9a9a;margin:0 0 18px}
.srch-hit{display:block;padding:18px 0;border-top:1px solid rgba(255,255,255,.13);text-decoration:none}
.srch-hit:hover .srch-t{color:#e0a340}
.srch-d{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:#e0a340;margin:0 0 5px}
.srch-t{font-family:Newsreader,Georgia,serif;font-size:22px;line-height:1.25;color:#f4f4f4;margin:0 0 6px}
.srch-x{font-size:14.5px;line-height:1.6;color:#b4b4b4;margin:0}
.srch-x mark{background:rgba(224,163,64,.28);color:#fff;padding:0 2px;border-radius:2px}
.srch-none{color:#b4b4b4;line-height:1.7}
.srch-tip{margin-top:30px;padding-top:16px;border-top:1px solid rgba(255,255,255,.13);font-size:13.5px;color:#8f8f8f;line-height:1.7}


/* --- r80 layout: About + Contact live up top on desktop, not in the sidebar --- */
@media (min-width:881px){
  .navDrawer a.navLink[href$="about.html"],
  .navDrawer a.navLink[href$="contact.html"]{ display:none !important; }
  .topbar .inner{ justify-content:flex-end; }
}
/* Phones: sidebar drawer keeps About + Contact; top bar shows search + menu only */
@media (max-width:880px){
  .topbar nav{ gap:0 !important; padding:0 !important; }
  .topbar nav > a{ display:none !important; }
  .navToggle{ margin-left:10px !important; }
}

/* --- Pioneers is a top-level section, not a department sub-item --- */
.navDrawer-inner > .navAccordion--dept{
  padding-left:0; border-left:0; margin-left:0;
  border-bottom:1px solid rgba(233,229,218,.08);
}
.navDrawer-inner > .navAccordion--dept > .navAcc-row > .navAcc-deptlink{
  font-family:"Archivo", system-ui, sans-serif; font-variation-settings:"wdth" 100,"wght" 500;
  font-size:.9rem; letter-spacing:.03em; color:var(--nav-text, #E9E5DA); padding:12px 2px;
}


/* ===== r80: top bar = logo + About + Contact + search; sidebar = content nav ===== */
@media (min-width:881px){
  body .topbar .inner{ max-width:none !important; justify-content:flex-start !important; padding:0 28px !important; }
  body .topbar nav{ display:flex !important; align-items:center; gap:24px !important; margin-left:auto !important; width:auto !important; }
  body .topbar nav > a{ display:inline-block !important; }
  body .topbar .siteSearch{ display:flex !important; }
  body .topbar .brand img{ height:64px !important; }
  body .navDrawer .navDrawer-brand{ display:none !important; }
}
@media (max-width:880px){
  body .topbar nav > a{ display:none !important; }
  body .topbar .siteSearch{ display:flex !important; }
}

/* ===== r81: logo size + no duplicate logo in sidebar ===== */
@media (min-width:881px){
  .navDrawer-brand{ display:none !important; }
  body .topbar, body .topbar .inner{ height:auto !important; min-height:84px !important; }
  body .topbar .inner{ align-items:center !important; padding-top:10px !important; padding-bottom:10px !important; }
  body .topbar .brand{ overflow:visible !important; }
}

/* ===== r82: sidebar cleanup + Articles accordion ===== */
@media (min-width:881px){
  /* About/Contact live in the top bar only, never the sidebar */
  body .navDrawer a.navLink[href$="about.html"],
  body .navDrawer a.navLink[href$="contact.html"]{ display:none !important; }
}
/* Articles accordion matches Departments */
.navAcc-sublink{ display:block; padding:5px 0 5px 14px; font-size:.82rem;
  color:var(--dust,#b9b3a6); text-decoration:none; line-height:1.3; }
.navAcc-sublink:hover{ color:var(--paper,#e9e5da); }
/* Articles list is long — let it scroll inside the drawer */
.navAccordion--articles .navAcc-panel{ overflow-y:auto; }