/**
 * app.css — the thin layer of CSS a canvas site still needs.
 *
 * This does not style the site. The site is painted. What CSS does here is:
 *   1. stack the canvas under the document layer,
 *   2. make the document layer's text transparent so the painting shows through
 *      while the text stays real — selectable, findable, readable by a screen
 *      reader, crawlable,
 *   3. give interactive elements a real, visible focus indicator.
 *
 * Point 3 matters more than it looks. The focus ring is native and renders in
 * the DOM layer, which sits ABOVE the canvas — so keyboard focus is visible even
 * if the canvas never paints, the GPU context is lost, or a painter throws.
 */

:root {
  --olive: #59632b;
  --olive-deep: #3d4420;
  --gold: #c8a865;
  --blue-deep: #325a76;
  --ink: #1c1f16;
  --paper: #ffffff;
  --header-h: 72px;
  color-scheme: light;
}

@media (max-width: 900px) {
  :root { --header-h: 60px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* The app owns scroll position per route. */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--olive-deep);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  overscroll-behavior-y: none;
}

/* ---------------------------------------------------------------- the picture */

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  /* Every interaction belongs to the real elements above. */
  pointer-events: none;
}

/* -------------------------------------------------------------- the document */

#app {
  position: relative;
  z-index: 1;
}

#main { outline: none; }
#main:focus-visible { outline: none; }

#doc {
  position: relative;
  /* Height is set from the measured content height, in JS. */
}

/*
 * A mirror section is positioned over the band its painter drew. Its text is
 * transparent: present in the accessibility tree and to a crawler, invisible to
 * the eye because the canvas already drew it.
 */
.mir {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
}

/*
 * `a` is in this list. It was not, and the footer's five legal/social anchors —
 * which are plain <a>, not .hit proxies — rendered as default blue underlined
 * UA links stacked over the painted wordmark, on all 53 routes.
 */
.mir-copy,
.mir a,
.mir h1, .mir h2, .mir h3, .mir h4, .mir h5, .mir h6,
.mir p, .mir li, .mir dt, .mir dd, .mir figcaption, .mir caption, .mir th, .mir td {
  color: transparent;
  margin: 0;
  /* Selection still highlights, which is the honest behavior: the text is there. */
  -webkit-user-select: text;
  user-select: text;
}

.mir ul, .mir ol { margin: 0; padding: 0; list-style: none; }
.mir img { opacity: 0; }

/*
 * Interactive regions. A transparent box at the exact coordinates the painter
 * reported, carrying a real <a href> or <button>. Its label lives inside so the
 * accessible name and the crawlable anchor text are the same string the canvas
 * painted.
 */
.hit {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: transparent;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  /* Never let a hit box become a scroll container or a layout influence. */
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.hit-label {
  /* Present for crawlers and assistive tech, never painted by the browser. */
  color: transparent;
  pointer-events: none;
}

/*
 * The focus indicator, deliberately native and deliberately in the DOM layer.
 * Two rings so it reads on both the paper surfaces and the olive ones.
 */
.hit:focus-visible,
.skip:focus-visible,
#doc a:focus-visible,
#doc button:focus-visible,
#doc input:focus-visible,
#doc select:focus-visible,
#doc textarea:focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgb(255 255 255 / 0.9);
  border-radius: 8px;
}

@media (forced-colors: active) {
  .hit:focus-visible { outline: 3px solid CanvasText; }
}

/* -------------------------------------------------------------------- header */

#masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 3;
  pointer-events: none;
}

#masthead .hit { pointer-events: auto; }

/* The mobile navigation sheet: a real dialog, for a real focus trap. */
#navsheet {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

#navsheet::backdrop { background: rgb(28 31 22 / 0.55); }
#navsheet[open] { display: block; }

/*
 * 🔴 The sheet is a REAL styled panel, not a transparent mirror.
 *
 * These rules were missing entirely, so the dialog's 23 links inherited the UA
 * stylesheet — blue, underlined, bulleted, 13px Arial, flowing from the top-left
 * — and rendered *beside* the olive panel the canvas painted. Every mobile
 * visitor saw the navigation twice, in two different visual languages. It was
 * the most visually severe defect on the site and no gate could see it: no
 * console error, no failed request, and it lives inside a fixed-position dialog
 * so it never registers as horizontal overflow.
 *
 * The sheet is styled in CSS rather than painted because a <dialog> gives us the
 * focus trap, Escape handling, inertness and backdrop for free — and those are
 * worth more than visual consistency with the canvas.
 */
#navsheet nav {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(100%, 420px);
  padding: calc(var(--header-h) + 12px) 28px 32px;
  background: var(--olive-deep);
  overflow-y: auto;
  overscroll-behavior: contain;
}

#navsheet ul { margin: 0 0 18px; padding: 0; list-style: none; }
#navsheet > nav > div { margin-bottom: 18px; }

#navsheet .sheet-link,
#navsheet .sheet-label {
  display: block;
  padding: 10px 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  color: #f6f5ef;
  text-decoration: none;
  margin: 0;
}

#navsheet li .sheet-link {
  padding: 9px 0 9px 16px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: #c8cbbe;
}

#navsheet .sheet-link:hover { color: var(--gold); }

#navsheet .sheet-close {
  position: absolute;
  top: 14px;
  right: 24px;
  z-index: 1;
  padding: 10px 18px;
  font: 600 15px/1 Inter, system-ui, sans-serif;
  color: var(--olive-deep);
  background: var(--gold);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

/* Chrome that floats above the page: mobile call bar, toasts. */
#chrome {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 4;
  pointer-events: none;
}

#chrome .hit,
#chrome button,
#chrome a { pointer-events: auto; }

/* --------------------------------------------------------------------- forms */

/*
 * Form controls are the one place real, visible browser UI beats anything we
 * could paint: native keyboards, autofill, password managers, dictation, and
 * the platform's own validation affordances. They are styled to match the
 * painted card they sit inside rather than hidden behind it.
 */
.field {
  position: absolute;
  display: block;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  height: 100%;
  padding: 0 14px;
  font: 400 16px/1.4 Inter, system-ui, sans-serif; /* 16px: iOS zooms below it */
  color: var(--ink);
  background: rgb(255 255 255 / 0.92);
  border: 1px solid #cfd2c6;
  border-radius: 8px;
}

.field textarea { padding: 12px 14px; resize: none; line-height: 1.5; }

.field input::placeholder,
.field textarea::placeholder { color: #8b9082; }

.field input[aria-invalid='true'],
.field select[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
  border-color: #a8332a;
  background: #fbeeed;
}

.field-error {
  position: absolute;
  color: #a8332a;
  font: 500 13px/1.4 Inter, system-ui, sans-serif;
}

/*
 * The escape hatch. If boot fails — no 2D context, a module that throws, an
 * engine we cannot start — the DOM layer is still a complete, correct document.
 * Making it visible turns a catastrophic failure into a plain-looking page,
 * which for a club whose visitors are trying to find a phone number is the
 * difference between degraded and useless.
 */
.no-canvas #stage { display: none; }

.no-canvas #doc,
.no-canvas .mir {
  position: static !important;
  height: auto !important;
}

.no-canvas #doc {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  background: var(--paper);
}

.no-canvas .mir-copy,
.no-canvas .mir h1, .no-canvas .mir h2, .no-canvas .mir h3, .no-canvas .mir h4,
.no-canvas .mir p, .no-canvas .mir li, .no-canvas .mir dt, .no-canvas .mir dd,
.no-canvas .mir th, .no-canvas .mir td, .no-canvas .mir figcaption,
.no-canvas .hit, .no-canvas .hit-label {
  color: var(--ink);
  position: static;
  margin: 0 0 0.75em;
  font: 400 17px/1.6 Inter, system-ui, sans-serif;
}

.no-canvas .mir h1, .no-canvas .mir h2, .no-canvas .mir h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  line-height: 1.2;
}

.no-canvas .mir h1 { font-size: 2.2rem; }
.no-canvas .mir h2 { font-size: 1.7rem; margin-top: 1.5em; }
.no-canvas .mir h3 { font-size: 1.3rem; }
.no-canvas .mir ul, .no-canvas .mir ol { list-style: disc; padding-left: 1.4em; }
.no-canvas .hit { display: inline-block; width: auto !important; height: auto !important; color: var(--blue-deep); text-decoration: underline; }
.no-canvas .mir img { opacity: 1; max-width: 100%; height: auto; }
.no-canvas #masthead { position: static; height: auto; pointer-events: auto; }

/* ------------------------------------------------------------------ utility */

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10;
  /* 44px tall, so the first interactive element on every page is not also the
     smallest. It measured 181x35 in the audit. */
  padding: 14px 16px;
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  background: var(--paper);
  color: var(--ink);
  font: 600 15px/1 Inter, system-ui, sans-serif;
  border-radius: 8px;
  transform: translateY(-200%);
  transition: transform 120ms ease-out;
}

.skip:focus { transform: translateY(0); }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.noscript {
  position: relative;
  z-index: 5;
  max-width: 40rem;
  margin: 12vh auto;
  padding: 2rem;
  background: var(--paper);
  border-radius: 14px;
  font: 400 17px/1.6 Inter, system-ui, sans-serif;
  color: var(--ink);
}

.noscript h1 { font-family: 'Cormorant Garamond', Georgia, serif; }
.noscript a { color: var(--blue-deep); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------- lightbox */

#lightbox {
  width: min(96vw, 1200px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--olive-deep);
  color: #f6f5ef;
  overflow: hidden;
}

#lightbox::backdrop { background: rgb(28 31 22 / 0.82); }

#lightbox figure { margin: 0; display: flex; flex-direction: column; }

#lightbox img {
  display: block;
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  background: #1c1f16;
}

#lightbox figcaption {
  padding: 14px 20px;
  font: 400 15px/1.5 Inter, system-ui, sans-serif;
  color: #c8cbbe;
}

#lightbox .lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 9px 16px;
  font: 600 14px/1 Inter, system-ui, sans-serif;
  color: var(--olive-deep);
  background: var(--gold);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

/*
 * The mirror's text is invisible, but it still participates in layout — so a
 * long unbreakable token in it (a URL in the privacy policy, an email address)
 * spills past the viewport and creates a horizontal scrollbar on a page that
 * *looks* perfectly fine, because the canvas wrapped its own copy correctly.
 *
 * Found at 390px on /legal/privacy/ and /legal/terms/. The canvas is the real
 * render; the mirror must never be the thing that decides the page's width.
 */
.mir-copy,
.mir p, .mir li, .mir dd, .mir td, .mir a,
.hit-label {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/*
 * Footer legal and social anchors are plain <a>, not .hit proxies, so they get
 * no painted region and inherit only the line box — 20px tall in the audit.
 * WCAG 2.5.5 asks for 44. Inline-flex keeps them on one line while the box
 * grows around the text rather than moving it.
 */
#doc footer a,
.mir footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/*
 * 🔴 The lead form's intent step wraps its choices in a <fieldset> with a
 * <legend>, which is the correct grouping semantics — and the UA stylesheet
 * draws a 2px border and a notched outline around it. That border rendered as
 * a stray empty box floating above the form card on every page carrying a
 * form, at every width. It is invisible to every gate: no console error, no
 * failed request, no overflow. It was found by taking the 360px battery
 * screenshot and looking at it, which is the same way the footer's blue
 * underlined UA anchors were found.
 *
 * The grouping stays; only the browser's drawing of it goes.
 */
.mir fieldset,
#doc fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.mir legend,
#doc legend {
  padding: 0;
  color: transparent;
}