/* SWSA shared site chrome — base tokens, nav, dropdown, and mobile hamburger.
   Used by index.html, about.html, and everything under press/.
   Page-specific styles (hero sizing, page content components, mobile type
   scale) stay inline in each page's own <style> block — see CLAUDE.md for
   the convention this repo follows. */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Georgia,serif;background:#F5F0E8;color:#1a1a1a}
a{text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid #BF0000;outline-offset:2px}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hover-card{background:#fff;transition:background .2s}
.hover-card:hover,.hover-card:focus-visible{background:#F5F0E8}

/* "About" dropdown — desktop hover/focus-within, card-style panel */
.nav-item{position:relative;display:flex;align-items:center;align-self:stretch}
.nav-dropdown{position:absolute;top:100%;left:0;background:#fff;border:1px solid #e8e2d8;border-radius:0 0 10px 10px;min-width:270px;box-shadow:0 18px 36px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease;overflow:hidden}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop-row{display:block;padding:14px 18px;border-top:1px solid #e8e2d8}
.nav-drop-row:first-child{border-top:none}
.nav-drop-row:hover,.nav-drop-row:focus-visible{background:#F5F0E8}
.nav-drop-title{font-family:Georgia,serif;font-size:15px;color:#1a1a1a;margin-bottom:3px}
.nav-drop-desc{font-family:Arial;font-size:11px;color:#6b6b6b;line-height:1.5}

/* Current page / section indicator. Top-level links carry an inline
   color:#6b6b6b, hence the !important; .nav-drop-title takes its color from
   the rule above, so specificity alone is enough there. */
nav a[aria-current]:not(.nav-drop-row){color:#BF0000 !important}
.nav-drop-row[aria-current] .nav-drop-title{color:#BF0000}

/* Anchor sections on index/about highlight their own dropdown row when the
   URL hash targets them (progressive enhancement — no-op without :has()) */
body:has(#board:target) .nav-drop-row[href$="#board"] .nav-drop-title,
body:has(#events:target) .nav-drop-row[href$="#events"] .nav-drop-title{color:#BF0000}

/* Mobile hamburger toggle — pure CSS checkbox hack, no JS */
.nav-toggle{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}
.nav-toggle-label{display:none;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px}
.nav-toggle-label span{display:block;width:22px;height:2px;background:#1a1a1a;transition:transform .2s ease,opacity .2s ease}
.nav-toggle:focus-visible ~ .nav-toggle-label{outline:2px solid #BF0000;outline-offset:2px}
.nav-toggle:checked ~ .nav-toggle-label span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked ~ .nav-toggle-label span:nth-child(2){opacity:0}
.nav-toggle:checked ~ .nav-toggle-label span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile "About" submenu toggle — independent of the hamburger, collapsed
   by default so it doesn't auto-expand when the main menu opens. The whole
   row is the <label> (toggles on tap anywhere in it) except the nested
   "About" link, which browsers let navigate normally instead of toggling —
   the caret span inside is just a visual indicator, not a separate target. */
.nav-trigger-row{display:flex;align-items:center;gap:4px;cursor:pointer}
.sub-toggle{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}
.sub-toggle-label{font-family:Arial;font-size:11px;color:#6b6b6b;line-height:1;transition:transform .2s ease}
.sub-toggle:focus-visible ~ .nav-trigger-row{outline:2px solid #BF0000;outline-offset:2px}

@media (max-width: 900px) {
  nav, .band { padding-left: 24px !important; padding-right: 24px !important; }

  /* Nav collapses behind a hamburger on mobile */
  nav { height: auto !important; flex-wrap: wrap !important; padding-top: 14px !important; padding-bottom: 14px !important; gap: 12px !important; }
  .nav-toggle-label { display: flex !important; }
  nav > div:last-child {
    display: none !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-top: 4px !important;
  }
  .nav-toggle:checked ~ div:last-child { display: flex !important; }

  /* "About" dropdown becomes an in-place expandable section on mobile
     (there's no hover on touch, and it must not sit inside anything with
     overflow-x:auto or it gets clipped) — stays collapsed until its own
     caret toggle is tapped */
  .nav-item { width: 100% !important; flex-direction: column !important; align-items: flex-start !important; align-self: auto !important; }
  .nav-dropdown {
    display: none !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
  }
  .sub-toggle:checked ~ .nav-dropdown { display: block !important; }

  /* The whole row is the tap target (see .nav-trigger-row above), so the
     caret itself just needs to be a small, clear visual indicator */
  .nav-trigger-row {
    width: 100%;
    justify-content: space-between;
    padding: 8px 0;
  }
  .nav-trigger-row:active { background: #F5F0E8; }
  .sub-toggle-label {
    font-size: 13px;
    min-width: 26px;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e8e2d8;
    border-radius: 6px;
    transition: transform .2s ease;
  }
  .sub-toggle:checked ~ .nav-trigger-row .sub-toggle-label { transform: rotate(180deg); }
}

@media (max-width: 500px) {
  nav, .band { padding-left: 18px !important; padding-right: 18px !important; }
}