/* Spirited Energy — unified site navigation.
 *
 * Desktop (>=900px): wordmark · links · Forum (gold) · Take Action (green)
 * Mobile  (<900px):  wordmark · Forum · Take Action · hamburger
 *
 * The two actions stay visible at every width — on a phone they are the only
 * two things most readers need — and the rest of the menu folds into the panel.
 *
 * Inset is the homepage rail, not a separate clamp. A page-local padding on
 * .sitenav used to pull the home bar inward of every other page.
 */

:root {
  --se-page-inline: max(var(--se-gutter), calc((100% - var(--se-rail)) / 2));
}

/* --- header tone, derived from the bolt -------------------------------------
 *
 * The mark carries three colours: gold rim #f5c518 (hue 47), green fill
 * #1b6b3a (hue 143), deep outline #0b3d2e (hue 162). The wordmark, the Take
 * Action button and the hamburger already sat on the last two exactly. Two
 * families did not:
 *
 *   the hairline #cbd2d9 and the nav links #52606d sat at hue 209-210 — a cool
 *   blue-grey on the opposite side of the wheel from everything in the mark,
 *   which is what made the bar read as slightly cold next to its own logo;
 *
 *   the gold family sat at hue 35 — an amber a full 12 degrees browner than
 *   the rim, so the Forum button never quite rhymed with the bolt beside it.
 *
 * These are declared here rather than in report/design-tokens.css on purpose.
 * Those tokens are frozen and shared with the master report, the petition and
 * every whitepaper; retoning --se-slate globally to fix a header would repaint
 * all of them. Scoping to .sitenav keeps the blast radius at the bar.
 *
 * Every value was picked against a measured contrast ratio, not by eye:
 */
.sitenav {
  --nav-ink:        #465d55;  /* links      hue 158 · 7.10:1 on white, up from 6.46:1 */
  --nav-ink-hover:  #0b3d2e;  /* the bolt's own outline */
  --nav-rule:       #d6e1db;  /* hairline   hue 150, replaces the cool grey */
  --nav-gold:       #a3820a;  /* button rim hue 47 · 3.65:1 on white, 3.37:1 on the fill,
                                 so the edge clears WCAG 1.4.11 both ways */
  --nav-gold-bg:    #fdf6dd;  /* fill       hue 47 */
  --nav-gold-ink:   #604c06;  /* label      hue 47 · 7.66:1 on the fill */
  --nav-gold-bg-h:  #f9eec8;
  --nav-gold-ink-h: #493a04;  /* hover      9.57:1 on the hover fill */

  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
  padding: 0 var(--se-page-inline);
  background: var(--se-white);
  border-bottom: 1px solid var(--nav-rule);
}

.sitenav .wordmark {
  display: inline-flex;
  align-items: center;
  /* Tight enough to read as one lockup rather than an icon beside a title.
     The mark's artwork is inset 8% inside its own box, so the optical gap
     lands about 0.09rem wider than this number. */
  gap: 0.34rem;
  font-family: var(--se-font-display);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--se-green-900);
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
  flex: 0 0 auto;          /* never compressed by the row */
  min-width: 0;
}
.sitenav .logo-mark { width: 2.3rem; height: 2.3rem; flex-shrink: 0; display: block; }
.sitenav .wordmark-text { line-height: 1.15; white-space: nowrap; }
.sitenav .wordmark-text b { font-weight: 700; }

/* Page top titles — one bold Fraunces voice on every satellite page.
   Higher specificity than per-page `h1` rules so regenerations stay aligned.
   Does not touch the home cover (that h1 sits outside main). */
main > h1 {
  font-family: var(--se-font-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: var(--se-green-900);
  margin: 0 0 0.6rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
main > h1 b { font-weight: 700; }

/* nowrap is the point: a second row of links is never an acceptable state.
   If they no longer fit, the hamburger takes over instead. */
.sitenav .anchors { display: flex; gap: 1.05rem; flex-wrap: nowrap; }
.sitenav .anchors a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--nav-ink);
  text-decoration: none;
  white-space: nowrap;
}
.sitenav .anchors a:hover { color: var(--nav-ink-hover); text-decoration: underline; }
/* Forum and Take Action live as buttons in the bar on desktop; these are the
   same two destinations for the panel, so they stay hidden until it exists. */
.sitenav .anchors a.in-panel { display: none; }

/* --- the two persistent actions --- */
.nav-actions { display: flex; align-items: center; gap: 0.5rem; }

.btn-forum,
.btn-filing {
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--se-font-body);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.55rem 0.9rem;
  border-radius: 2px;
  white-space: nowrap;
  display: inline-block;
}

/* Gold — the forum. Dark ink on gold clears AA at this weight. */
.btn-forum {
  background: var(--nav-gold-bg);
  color: var(--nav-gold-ink);
  border: 1.5px solid var(--nav-gold);
}
.btn-forum:hover { background: var(--nav-gold-bg-h); color: var(--nav-gold-ink-h); }

.btn-filing { background: var(--se-green-900); color: var(--se-white); }
.btn-filing:hover { background: var(--se-green-700); }

/* --- hamburger --- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.4rem;
  background: var(--se-white);
  border: 1px solid var(--nav-rule);
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
}
.nav-toggle:hover { background: var(--se-paper); }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: var(--se-green-900);
  transition: transform 160ms ease, opacity 160ms ease;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before,
.nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --- collapsed --- */
/* 1150px is measured, not chosen: the eight links sit on one line at 1150
   and break to two at 1100. Collapsing here means the bar is only ever a
   full single row of links, or the hamburger. */
@media (max-width: 1150px) {
  .sitenav { gap: 0.5rem; }
  /* The wordmark used to be hidden below 900px, leaving a phone with a bare
     mark and no way to tell whose site this is. It stays visible now and gives
     up size instead of presence; the mark shrinks with it, and the anchors are
     already in the panel, so the row is wordmark + two actions + hamburger. */
  .sitenav .wordmark { font-size: 1.06rem; flex: 0 1 auto; min-width: 0; }
  .sitenav .logo-mark { width: 2.05rem; height: 2.05rem; }
  .sitenav .anchors {
    display: none;
    position: fixed;
    top: var(--se-nav-bottom, 64px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: linear-gradient(to bottom,
      #ffffff 0%, #eef7f1 45%, #fbf3d9 100%);
    border-bottom: 2px solid var(--se-sunflower);
    box-shadow: 0 10px 22px rgba(11, 61, 46, 0.12);
    padding: 0.35rem 0;
  }
  /* The page is locked while this is open, so the panel itself has to be able
     to scroll — otherwise a short screen could hide the last links with no way
     to reach them. */
  .sitenav .anchors.is-open {
    display: flex;
    max-height: calc(100dvh - var(--se-nav-bottom, 64px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sitenav .anchors a {
    padding: 0.75rem var(--se-page-inline);
    font-size: 1rem;
    border-bottom: 1px solid var(--nav-rule);
  }
  .sitenav .anchors a:last-child { border-bottom: 0; }

  /* Three destinations do the most work for someone who has just arrived: the
     plan itself, the questions, and the room where it is argued. They take
     weight rather than colour, so the list still reads as one list. */
  .sitenav .anchors a[href$="#our-plan"],
  .sitenav .anchors a[href$="faq.html"],
  .sitenav .anchors a[href$="/forum/"] { font-weight: 700; }

  /* The two that are actions rather than destinations get a frame, so the panel
     ends on something that looks pressable. Same gold and green the bar uses. */
  .sitenav .anchors a.in-panel {
    margin: .5rem var(--se-page-inline);
    padding: .7rem 1rem;
    border-radius: 2px;
    font-weight: 700;
    border-bottom: 0;
    text-align: center;
  }
  .sitenav .anchors a.in-panel[href$="/forum/"] {
    background: var(--nav-gold-bg);
    color: var(--nav-gold-ink);
    border: 1.5px solid var(--nav-gold);
  }
  .sitenav .anchors a.in-panel[href$="act.html"] {
    background: var(--se-green-900);
    color: var(--se-white);
    border: 1.5px solid var(--se-green-900);
  }
  .nav-toggle { display: inline-flex; }
  /* Left-aligned, with the mark set to the hamburger's height so the two ends
     of the bar are the same size and sit on the same margin. Normal flex flow
     does this: the wordmark keeps margin-right:auto and pushes the actions to
     the padding edge, so there is one number governing both sides rather than
     a padding and a matching offset that have to be kept in step. */
  /* The panel's links centre with it. */
  .sitenav .anchors a { text-align: center; }
  /* The bar carries the mark, the name and the hamburger — nothing else.
     Both actions move into the panel, where they read as the last two items
     of the menu rather than competing with the name for the same row. */
  .sitenav .btn-forum,
  .sitenav .btn-filing { display: none; }
  .sitenav .anchors a.in-panel { display: block; }
  .sitenav .anchors a.in-panel:first-of-type { border-top: 2px solid var(--nav-rule); }
}

/* Narrow phones: keep the name by giving up everything else that can shrink. */
/* Only the mark, the name and the hamburger share this row now, so the name
   keeps its size all the way down instead of being shrunk to make room. */
/* The mark holds 2.05rem — about 33px — at every width below 1150, rather than
   stepping down to 1.95rem and then 1.75rem as it used to. Those steps date
   from when the wordmark shared the row with two buttons; there is 130px of
   slack at 390px now, so they were shrinking the logo to solve a problem the
   bar no longer has.

   2.05rem and not the hamburger's own 2.4rem, which was tried and pulled back:
   a round mark reads larger than a square button of the same height, so
   matching them exactly overfilled the bar. At 33px the mark sits inside that
   frame with air around it, which is what being framed by it should mean. */
@media (max-width: 560px) {
  .sitenav .wordmark { font-size: 1rem; }
}

@media (max-width: 400px) {
  .sitenav .wordmark { font-size: 0.95rem; }
}

@media print { .sitenav { display: none !important; } }

/* Skip link — shared so inner pages inherit it (homepage used to own the only copy). */
.skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 50;
}
.skip:focus,
.skip:focus-visible {
  left: 1rem;
  top: 1rem;
  background: var(--se-white, #fff);
  color: var(--se-green-900, #0b3d2e);
  padding: 0.5rem 0.75rem;
  outline: 2px solid var(--se-ice-500, #1a7a9c);
  outline-offset: 2px;
}
#main {
  scroll-margin-top: 72px;
}