/* ============================================================================
   volunteer.css — the Volunteer page
   ============================================================================
   Loaded AFTER assets/campaign.css, and only for volunteer.html. It adds the
   two things the shared sheet genuinely has no class for: the dark page-title
   band (the homepage's only dark opener is the hero, which is a full-bleed
   780px slideshow and a different animal), and the tick-list of volunteer
   roles the artboard is built around.

   This page replaces the interim "sign-up opens shortly" stub, so it no longer
   loads assets/interim.css.

   Everything else on the page reuses campaign.css — .wrap, .sec, .sec-pad,
   .eyebrow, .h2, .lead, .band-tinted, .contact-inner, .contact-list,
   .contact-mono, .btn-brand and .ev-btn all come from there. No campaign
   colour is typed as a hex value below: every one is a token from that sheet's
   CAMPAIGN IDENTITY block, so re-skinning the site still re-skins this page.
   The one exception is plain white, which that block does not name — and it is
   declared page-scoped rather than in :root, so it cannot pass itself off as a
   site token. See the note directly below.
   ========================================================================= */

/* The artboard uses exactly one colour campaign.css never names: plain white.
   It does two different jobs here — a card ground and full-strength text on
   the dark green — so it is named twice. These are NOT site tokens: campaign
   .css keeps everything a different campaign re-skins in its one CAMPAIGN
   IDENTITY block, so declaring them in :root here would put two strays outside
   that block. They are declared on the three elements that consume them
   instead, and inherit no further. (The shared sheet's --on-brand-1/2/3
   already cover the MUTED text on dark grounds; this is the full-strength
   one.) If the site ever needs a real white token, it belongs upstream. */
.page-head,
.role-card,
.avail-txt {
  --vol-card:    #FFF;
  --vol-on-dark: #FFF;
}

/* #site-top-spacer's no-JS floor and the [aria-current] page marker both used
   to be copied here. campaign.css now owns them for the whole site — the
   review found three page stylesheets carrying their own copy of the spacer
   rule, two of which had already drifted. The copies are deleted, not
   duplicated with the same value. */

/* ----------------------------------------------------------- page title -- */
.page-head { background: var(--brand-deep); color: var(--vol-on-dark); }
.page-head h1 {
  margin: 0 0 12px;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.08;
  max-width: 18ch;
  text-wrap: pretty;
}
.page-head-lead {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: var(--on-brand-2);
  max-width: 56ch;
}

/* ------------------------------------------------------ the plain notice -- */
/* This page cannot send anything anywhere, and the reader is entitled to know
   that BEFORE they start ticking, not after. Gold rule so it reads as the
   page's own voice rather than an error. */
.vol-note {
  max-width: 70ch;
  margin: 0 0 34px;
  padding: 16px 18px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* The same notice used a second time, directly above the primary button, where
   it warns that the contacts it leads to are placeholders. It sits on the
   tinted band, whose ground is --panel; --paper lifts it off that ground so it
   reads as a notice and not as body copy the eye can skip. */
.vol-note-warn {
  max-width: 56ch;
  margin: 26px 0 0;
  background: var(--paper);
}

/* --------------------------------------------------------- the tick-list -- */
.pick-set { margin: 0 0 40px; padding: 0; border: 0; }
.pick-legend {
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.pick-legend span { font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--ink-3); }

/* A real <input type="checkbox"> does the work — it ticks with JavaScript off,
   announces itself as a checkbox, and answers the spacebar. It is hidden at
   1px rather than display:none so it stays focusable and reachable. */
.pick { position: relative; cursor: pointer; }
.pick-in {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  opacity: 0; pointer-events: none;
}
/* campaign.css rings every focused input in gold. On a 1px invisible box that
   would be a gold speck in the corner, so the ring moves to the card the
   reader can actually see. */
.pick-in:focus-visible { outline: none; }
.pick-in:focus-visible + .role-card,
.pick-in:focus-visible + .avail-txt {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.role-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .role-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .role-grid { grid-template-columns: repeat(3, 1fr); } }

/* display:grid on the label lets the card stretch to the tallest in its row,
   so the six cards keep a straight bottom edge whatever the copy length. */
.role-grid > .pick { display: grid; }

.role-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--vol-card);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 14px;
  transition: border-color .2s ease, background .2s ease;
}
.pick-in:not(:checked) + .role-card:hover { border-color: var(--brand); }
.pick-in:checked + .role-card {
  background: var(--brand-deep);
  color: var(--vol-on-dark);
  border-color: var(--brand);
  box-shadow: 0 12px 30px rgba(16, 51, 30, .18);
}

.role-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.role-glyph {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 10px;
  background: var(--panel-2);
  display: grid; place-items: center;
}
.role-shape { width: 16px; height: 16px; background: var(--brand); display: block; }
.shape-round   { border-radius: 999px; }
.shape-square  { border-radius: 3px; }
.shape-diamond { transform: rotate(45deg); }
.pick-in:checked + .role-card .role-glyph { background: var(--accent-bright); }
.pick-in:checked + .role-card .role-shape { background: var(--brand-deep); }

.role-tick {
  width: 26px; height: 26px; flex: 0 0 26px;
  border: 2px solid var(--line-2);
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; line-height: 1;
}
.pick-in:checked + .role-card .role-tick {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: var(--brand-deep);
}
/* The tick mark is the one state indicator that survives Windows high-contrast
   mode, where the card's background and border colours are overridden. */
.pick-in:checked + .role-card .role-tick::after { content: "\2713"; }

.role-name { font-family: var(--serif); font-size: 19px; font-weight: 700; line-height: 1.25; }
.role-sw   { font-size: 12.5px; font-style: italic; color: var(--brand); }
.role-desc { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.pick-in:checked + .role-card .role-sw   { color: var(--accent-bright); }
.pick-in:checked + .role-card .role-desc { color: var(--on-brand-2); }

/* ------------------------------------------------------- availability -- */
.avail-list { display: flex; flex-wrap: wrap; gap: 10px; }
.avail-list > .pick { display: inline-grid; }
.avail-txt {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;                     /* thumb-sized, same as the nav buttons */
  padding: 12px 22px;
  border: 2px solid var(--line-2);
  border-radius: 999px;
  background: var(--vol-card);
  color: var(--brand-dark);
  font-size: 14px; font-weight: 600;
  transition: border-color .2s ease, background .2s ease;
}
.pick-in:not(:checked) + .avail-txt:hover { border-color: var(--brand); }
.pick-in:checked + .avail-txt {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--vol-on-dark);
}

/* ------------------------------------------------------- how to join -- */
.vol-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 30px; }

/* The artboard greys its small print to #8A938C, which measures about 3.1:1 on
   this ground — under the 4.5:1 the rest of the site holds itself to. It keeps
   --ink-3 and steps down in size instead, which carries the same "quieter"
   intent without failing anyone's eyesight. */
.vol-fineprint {
  margin: 20px 0 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-3);
}
/* .contact-mono carries its own 15px for the contact block above; inside the
   fine print it should only change the typeface, not the size. */
.vol-fineprint .contact-mono { font-size: inherit; }