/* Static-site overrides. Everything else comes from css/components.css, which is
   the design system's own CSS extracted verbatim — this file is the short list of
   places where "a React prototype with JavaScript" and "a static site without it"
   genuinely differ. Keep it short; if it grows, the divergence is the problem.

   Loaded after components.css, so these win on equal specificity. */

/* The prototype collapsed the nav into a burger below 920px and opened the sheet
   with React state. These pages ship no JavaScript, so a burger would be a button
   that does nothing. The links stay visible and wrap onto their own row instead —
   fewer moving parts, and it works with scripting off, which is the whole point of
   a static site. Scoped to the breakpoint, so wider viewports are untouched. */
@media (max-width: 920px) {
  .wcaa-nav__in {
    height: auto;
    flex-wrap: wrap;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    gap: var(--space-3);
  }
  .wcaa-nav__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-left: 0;
    width: 100%;
  }
}

/* Single-column below the phone breakpoint. The prototype only ever ran at
   desktop widths in the design tool, so its grids had no mobile case at all and
   a 3-up card row squeezed to ~100px columns on a phone.

   The column counts live in a style attribute because they vary per block, so
   overriding them needs !important — that is exactly the case !important exists
   for, and it is scoped to one breakpoint. */
@media (max-width: 720px) {
  .wcaa-grid {
    grid-template-columns: 1fr !important;
  }
  .wcaa-gal {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* The result line the two public forms write into after a submit. Hidden in the
   markup and revealed by js/forms.js, so a page with scripting off shows a form
   that cannot submit rather than an empty box claiming something happened. */
.wcaa-form__msg {
  margin: var(--space-4) 0 0;
  padding: 12px 16px;
  border-radius: var(--radius-xs);
  font: 600 14px/1.4 var(--font-body);
}
.wcaa-form__msg--ok {
  background: var(--surface-success);
  color: var(--color-success);
}
.wcaa-form__msg--bad {
  background: #fdecea;
  color: var(--color-error);
}
/* The Turnstile widget reserves its own height; give it room without letting it
   push the submit button off a narrow screen. */
.cf-turnstile { min-height: 65px; }

/* A .wcaa-btn renders as <a> when it has a destination and <button> when it does
   not — the design system's own Button does the same. But .wcaa-btn sets no
   box-sizing and no line-height, and the two elements disagree on both defaults:
   a <button> gets border-box and line-height:normal from the UA stylesheet, an
   <a> gets content-box and the inherited body line-height. So .wcaa-btn--full
   (width:100%) renders ~67px WIDER as a link than as a button, and ~2px taller.

   The design system knew about this trap — .wcaa-field__input is the one other
   width:100% element and it carries box-sizing:border-box. .wcaa-btn was just
   missed, and the prototype never surfaced it because a mock's buttons had no
   destinations, so they were always <button>. */
.wcaa-btn { box-sizing: border-box; }

/* ponytail: box-sizing only, deliberately NOT line-height. line-height would make
   <a> and <button> pixel-identical, but it moves EVERY page carrying an
   <a class="wcaa-btn"> by ~3px, and five of those are gated at 0 pixels against
   the prototype. box-sizing only affects elements with an explicit width, i.e.
   .wcaa-btn--full, which exists on join.html alone. The residue is that the three
   dues links stand 2px taller than a <button> would. Add line-height if the button
   family is ever unified deliberately -- not as a side effect of this fix. */