/* ============================================================================
   WATER POLO CANADA — RAMP WEB PARTS DESIGN SYSTEM
   Version 3.2 · Owner: Corey Conroy, Education & Events
   ----------------------------------------------------------------------------
   Generalised, reusable version of the scoped block already live on
   waterpolo.ca/content/committees (the ".wpcbc" block). Same tokens, same
   component patterns — so any new web part drops in looking native.

   *** THIS IS THE SINGLE SOURCE OF TRUTH ***
   Upload THIS file to the site once (RAMP file/media manager) and reference it
   from every page. Editing this one hosted file updates every page at once.

   HOSTED URL (fill in after upload — this becomes the canonical link):
     https://cloud.rampinteractive.com/waterpoloca/files/wpc-design-system.css
   CACHE-BUSTING: link it with a version query, e.g. "...css?v=3.2". When you
   change this file, bump BOTH the Version line above and the ?v= number so
   browsers/CDN fetch the new copy.

   HOW TO USE (RAMP is page-by-page HTML, so once per page):
   1. Edit the content card, switch to HTML / source view.
   2. Paste the reference snippet ONCE at the top:
        <link rel="stylesheet" href="…/wpc-design-system.css?v=3.2">
      (If RAMP strips <link> on save, use the <style>@import> fallback instead.)
   3. Wrap your web-part markup in <div class="wpc"> … </div>. Everything is
      scoped under .wpc so it will NOT restyle the RAMP theme, and the RAMP
      theme is far less likely to leak into your parts.
   4. Copy component markup from templates/wpc-web-parts/WpcWebParts.dc.html.

   OFFLINE FALLBACK: if a page can't reach the hosted file, you can still paste
   the whole file inline inside <style>…</style> (the original method).

   FONTS
   Cerebri Sans Pro is already loaded site-wide on waterpolo.ca via Typekit
   (use.typekit.net/uai7zfu.css), so inside RAMP it is available for both
   headings and body. The stack below falls back gracefully off-RAMP.
   The big skewed page title at the very top of a RAMP page is RAMP's own
   .content-card-header / .font-title — leave that to RAMP; style only the
   body content inside .wpc.
   ========================================================================== */


@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@600;700;800&display=swap");

/* ---- 0. FONT — Cerebri Sans Pro ----------------------------------------------
   ON RAMP (waterpolo.ca): already loaded site-wide via Typekit
   (use.typekit.net/uai7zfu.css) — you get it for free, no action needed.
   OFF RAMP (platform, prototypes, exports): the @font-face below self-hosts it.
   Point src at wherever the file lives relative to this stylesheet.
   NOTE: only ONE weight (400) is supplied. Headings ask for 700/800, so the
   browser is currently synthesizing faux-bold. Supply the real 600/700/800
   files and add a @font-face block per weight to fix.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Cerebri Sans Pro";
  src: url("../wpc-shared/cerebri-sans-pro.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- 1. TOKENS (match the live committees block exactly) ---------------- */
/* Tokens are shared with .wpc-brand — the token-only scope used by PLATFORM
   screens, which must NOT inherit the website element styling below. */
.wpc, .wpc-brand {
  --wpc-navy:      #1D2951;   /* primary — headings, table headers, footer */
  --wpc-navy-800:  #172140;
  --wpc-red:       #E6202C;   /* accent — sampled from the logo (brand red) */
  --wpc-red-ink:   #C8151F;   /* red for SMALL TEXT on white — 5.86:1 (brand red is 4.56:1) */
  --wpc-red-700:   #B8151F;
  --wpc-gold:      #C9A227;   /* Chair / lead highlight */
  --wpc-silver:    #9AA0A6;
  --wpc-bronze:    #B5732A;
  --wpc-ink:       #1B2230;   /* body text */
  --wpc-ink-soft:  #647088;   /* secondary text / meta */
  --wpc-zebra:     #F5F6FA;   /* tinted panel / even table rows */
  --wpc-border:    #E4E8F0;   /* card + divider borders */
  --wpc-white:     #FFFFFF;

  /* Grey / slate family — for calmer hero & footer bands (is-slate variant) */
  --wpc-slate:     #3B4252;   /* slate hero/footer top */
  --wpc-slate-800: #2A2F3B;   /* slate hero/footer bottom */
  --wpc-steel:     #566073;   /* mid grey accent line on slate */
  --wpc-mist:      #EDEFF3;   /* very light grey panel */

  /* Tints + status colours — for tags, badges, notices (event-page parts) */
  --wpc-red-tint:  #FDEAEC;   /* soft red pill background */
  --wpc-navy-tint: #EEF1F5;   /* soft navy/grey pill background */
  --wpc-warm-bg:   #FFF6E9;   /* amber notice / TBC background */
  --wpc-warm-ink:  #8A6A12;   /* amber notice / TBC text */
  --wpc-ok-bg:     #E3F4E8;   /* confirmed / success background */
  --wpc-ok-ink:    #1F7A3D;   /* confirmed / success text */

  --wpc-hero-kicker:       #9FB0E0;   /* kicker on the navy hero band */
  --wpc-hero-kicker-slate: #C6CCDA;   /* kicker on the slate hero band */

  --wpc-radius:    10px;
  --wpc-radius-lg: 14px;
  --wpc-radius-pill: 100px;
  --wpc-maxw:  1100px;

  --wpc-font: "Cerebri Sans Pro", "Cerebri Sans", -apple-system,
              "Segoe UI", Roboto, Arial, sans-serif;
  /* Display face — headings and metric values at 20px+, and uppercase labels
     at any size. League Spartan is Google-hosted, so no licence question. */
  --wpc-font-display: "League Spartan", "Cerebri Sans Pro", system-ui, sans-serif;

  /* Watermark source. Path is relative to THIS stylesheet — repoint it once
     when hosting on RAMP, e.g. url("/media/wpc-mark-white.png"). Any solid
     mark with real alpha works; the alpha drives the mask, not the colour. */
  --wpc-mark-url: url("../wpc-shared/wpc-mark-white.png");
  --wpc-lockup-url: url("../wpc-shared/wpc-lockup-h-white.png");

}

/* Presentational base — .wpc ONLY. Platform screens use .wpc-brand and keep
   their own NCLDS element styles; only the token values cross over. */
.wpc {
  box-sizing: border-box;
  color: var(--wpc-ink);
  font-family: var(--wpc-font);
  line-height: 1.5;
  text-align: left;
}
.wpc *, .wpc *::before, .wpc *::after { box-sizing: border-box; }
/* Element styling stops at a .wpc-brand island.
   A platform demo nested inside a website page (a component shown in context,
   a type trial, the audit's live proof) roots at .wpc-brand. Without the
   :not() guard these rules tie NCLDS's own specificity and win on load order,
   silently repainting component headings and links with website styles. */
.wpc main:not(.wpc-brand *) { max-width: var(--wpc-maxw); margin: 0 auto; }
.wpc :is(h1, h2, h3, h4, h5):not(.wpc-brand *) { font-weight: 700; color: var(--wpc-ink); margin: 0; }
.wpc p:not(.wpc-brand *) { margin: 0 0 12px; }
.wpc a:not(.wpc-brand *) { color: var(--wpc-red); text-decoration: none; font-weight: 700; }
.wpc a:not(.wpc-brand *):hover, .wpc a:not(.wpc-brand *):focus-visible { text-decoration: underline; }
.wpc :focus-visible:not(.wpc-brand *) { outline: 3px solid var(--wpc-red); outline-offset: 2px; border-radius: var(--wpc-radius); }
@media (prefers-reduced-motion: reduce) { .wpc * { transition: none !important; } }

/* ---- 2. SECTION SCAFFOLD (mirrors the live .section-head) --------------- */
.wpc section.block { margin-bottom: 56px; }
.wpc .section-head { margin-bottom: 22px; }
.wpc .section-head .kicker {
  display: inline-block; font-size: 14px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--wpc-red); font-weight: 700; margin-bottom: 8px;
}
.wpc .section-head h2 { font-size: 28px; margin: 0 0 8px; text-transform: uppercase; }
.wpc .section-head p { color: var(--wpc-ink-soft); margin: 0; max-width: 72ch; font-size: 16px; }

/* ---- 3. HERO (new part; navy band for a landing/program page) ----------- */
.wpc .wpc-hero {
  background: linear-gradient(180deg, var(--wpc-navy) 0%, var(--wpc-navy-800) 100%);
  color: #fff; padding: 48px 24px 38px; border-radius: var(--wpc-radius); overflow: hidden;
}
/* Uppercase: every other kicker in the system is caps, and rule 2 (uppercase
   label text may use the display face at any size) only holds if this is too.
   Was mixed-case, which put 16px League Spartan below the floor with caps
   tracking applied to lowercase — the exact error corrected in the type trial. */
.wpc .wpc-hero .kicker { color: var(--wpc-hero-kicker); text-transform: uppercase; }
.wpc .wpc-hero h1 { color: #fff; font-size: clamp(30px, 5vw, 46px); text-transform: uppercase; letter-spacing: .01em; margin-bottom: 10px; }
.wpc .wpc-hero p { color: rgba(255,255,255,.82); max-width: 70ch; margin: 0; font-size: 15.5px; }
.wpc .wpc-hero .red-stripe, .wpc .red-stripe { height: 6px; width: 100%; background: var(--wpc-red); border-radius: 3px; }
/* grey/slate hero — calmer than full navy; keeps a red accent kicker */
.wpc .wpc-hero.is-slate { background: linear-gradient(180deg, var(--wpc-slate) 0%, var(--wpc-slate-800) 100%); }
.wpc .wpc-hero.is-slate .kicker { color: var(--wpc-hero-kicker-slate); }
/* light hero (from 19U) — white/grey with a red top rule; dark text */
.wpc .wpc-hero.is-light { background: linear-gradient(180deg, #fff 0%, var(--wpc-zebra) 100%); color: var(--wpc-ink); border: 1px solid var(--wpc-border); border-top: 5px solid var(--wpc-red); }
.wpc .wpc-hero.is-light h1 { color: var(--wpc-navy); }
.wpc .wpc-hero.is-light p { color: var(--wpc-ink-soft); }
.wpc .wpc-hero.is-light .kicker { color: var(--wpc-red); background: var(--wpc-red-tint); padding: 6px 14px; border-radius: var(--wpc-radius-pill); }

/* ---- 4. BUTTONS (new part) --------------------------------------------- */
.wpc .wpc-btn {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; font-size: 13.5px; line-height: 1;
  padding: 13px 22px; border-radius: var(--wpc-radius); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.wpc .wpc-btn:hover { text-decoration: none; }
.wpc .wpc-btn-primary { background: var(--wpc-red); color: #fff; }
.wpc .wpc-btn-primary:hover { background: var(--wpc-red-700); color: #fff; }
.wpc .wpc-btn-secondary { background: var(--wpc-navy); color: #fff; }
.wpc .wpc-btn-secondary:hover { background: var(--wpc-navy-800); color: #fff; }
.wpc .wpc-btn-ghost { background: transparent; color: var(--wpc-navy); border-color: var(--wpc-navy); }
.wpc .wpc-btn-ghost:hover { background: var(--wpc-navy); color: #fff; }
/* pill shape (from 19U) — add is-pill to any button; drops the uppercase too */
.wpc .wpc-btn.is-pill { border-radius: var(--wpc-radius-pill); text-transform: none; letter-spacing: 0; }

/* ---- 5. CARD + GRID (generalised .committee-card) ---------------------- */
.wpc .wpc-grid { display: grid; gap: 14px; }
.wpc .wpc-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.wpc .wpc-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.wpc .wpc-grid.auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 860px) { .wpc .wpc-grid.cols-2, .wpc .wpc-grid.cols-3 { grid-template-columns: 1fr; } }

.wpc .wpc-card, .wpc .committee-card {
  border: 1px solid var(--wpc-border); border-radius: var(--wpc-radius);
  padding: 18px 20px; margin-bottom: 14px; background: #fff;
}
.wpc .wpc-card:last-child, .wpc .committee-card:last-child { margin-bottom: 0; }
.wpc .committee-card-head h5, .wpc .wpc-card h5 { font-size: 18px; margin: 0 0 10px; }
.wpc .committee-card-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--wpc-ink-soft); margin-bottom: 18px; }
.wpc .committee-card-meta b { color: var(--wpc-ink); font-weight: 600; }
.wpc .viewfile { color: var(--wpc-red); font-weight: 700; }

/* ---- 6. MEMBER CHIPS (from live .member-chip / chip-chair / chip-tag) --- */
.wpc .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.wpc .member-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 10px 9px 16px;
  border-radius: var(--wpc-radius-pill); border: 1.5px solid var(--wpc-border);
  background: #fff; font-size: 14px; font-weight: 600; color: var(--wpc-ink);
}
.wpc .member-chip.chip-chair { border-color: var(--wpc-gold); background: rgba(201,162,39,.08); }
.wpc .member-chip.chip-vacant { border-style: dashed; background: var(--wpc-zebra); color: var(--wpc-ink-soft); font-style: italic; }
.wpc .chip-tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--wpc-ink-soft); background: var(--wpc-zebra); padding: 4px 9px; border-radius: var(--wpc-radius-pill);
}
.wpc .member-chip.chip-chair .chip-tag { color: #8A6C14; background: rgba(201,162,39,.18); }

.wpc .chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 0 0 20px; }
.wpc .member-chip-detailed { border: 1.5px solid var(--wpc-border); border-radius: var(--wpc-radius); padding: 10px 14px; background: #fff; }
.wpc .member-chip-detailed.chip-vacant { border-style: dashed; background: var(--wpc-zebra); }
.wpc .member-chip-detailed .mcd-name { font-weight: 700; font-size: 15px; }
.wpc .member-chip-detailed .mcd-role { font-size: 13px; color: var(--wpc-ink-soft); margin-top: 3px; }

/* ---- 7. PERSON CARD (from live .board-card) ---------------------------- */
.wpc .board-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.wpc .board-card {
  border: 2.5px solid var(--wpc-border); border-radius: var(--wpc-radius-lg);
  padding: 14px; display: flex; align-items: center; gap: 14px; background: #fff;
}
.wpc .board-card.vacant { border-style: dashed; background: var(--wpc-zebra); }
.wpc .board-card-photo {
  width: 56px; height: 70px; flex-shrink: 0; background: var(--wpc-zebra);
  border-radius: 8px; border: 1px solid var(--wpc-border); overflow: hidden;
}
.wpc .board-card-photo img { width: 56px; height: 70px; object-fit: cover; object-position: center top; display: block; }
.wpc .board-card .bname { font-size: 14px; font-weight: 700; }
.wpc .board-card .btitle { font-size: 12.5px; color: var(--wpc-ink-soft); margin-top: 2px; }
.wpc .board-card .bterm, .wpc .board-card .bhistory { font-size: 11px; color: var(--wpc-ink-soft); margin-top: 3px; }
.wpc .board-card .bterm b { color: var(--wpc-ink); }

/* ---- 8. ROSTER LIST (from live .roster-card) --------------------------- */
.wpc .roster-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.wpc .roster-card { border: 1px solid var(--wpc-border); border-radius: var(--wpc-radius); padding: 12px 14px; display: flex; align-items: center; gap: 10px; background: #fff; }
.wpc .roster-card.vacant { background: var(--wpc-zebra); border-style: dashed; }
.wpc .roster-card .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--wpc-navy); }
.wpc .roster-card .rname { font-size: 13.5px; font-weight: 700; }
.wpc .roster-card .rrole { font-size: 11.5px; color: var(--wpc-ink-soft); }

/* ---- 9. TABLE (from live table.committee-table) ------------------------ */
.wpc table.wpc-table, .wpc table.committee-table {
  width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 13px;
}
.wpc table.wpc-table caption, .wpc table.committee-table caption { text-align: left; color: var(--wpc-ink-soft); font-size: 13px; margin-bottom: 8px; }
.wpc table.wpc-table th, .wpc table.committee-table th {
  text-align: left; padding: 10px 12px; background: var(--wpc-navy); color: #fff;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
}
.wpc table.wpc-table td, .wpc table.committee-table td { padding: 9px 12px; border-bottom: 1px solid var(--wpc-border); vertical-align: top; }
.wpc table.wpc-table tr:nth-child(even) td, .wpc table.committee-table tr:nth-child(even) td { background: var(--wpc-zebra); }
.wpc table.committee-table .dash { color: #C7CDD3; }
/* red-header table (from 19U) — add is-red for a red header band instead of navy */
.wpc table.wpc-table.is-red th { background: var(--wpc-red); }

/* ---- 10. ACCORDION (native <details>, from live details.year-details) --- */
.wpc details.wpc-details, .wpc details.year-details {
  border: 1px solid var(--wpc-border); border-radius: var(--wpc-radius-lg); margin-bottom: 10px; overflow: hidden;
}
.wpc details.wpc-details summary, .wpc details.year-details summary {
  list-style: none; cursor: pointer; padding: 16px 22px; font-weight: 700; font-size: 15px;
  color: var(--wpc-ink); display: flex; align-items: center; gap: 10px; background: var(--wpc-zebra);
}
.wpc details summary::-webkit-details-marker { display: none; }
.wpc details.wpc-details summary::before, .wpc details.year-details summary::before {
  content: "+"; font-size: 14px; color: var(--wpc-red); transition: transform .15s ease; display: inline-block; font-weight: 700;
}
.wpc details[open].wpc-details summary::before, .wpc details[open].year-details summary::before { content: "\2013"; }
.wpc details .wpc-details-body { padding: 20px 22px; border-top: 1px solid var(--wpc-border); }

/* ---- 11. CALLOUT (new part) -------------------------------------------- */
.wpc .wpc-callout { border-radius: var(--wpc-radius); padding: 16px 20px; border-left: 5px solid var(--wpc-navy); background: var(--wpc-zebra); }
.wpc .wpc-callout h4 { margin: 0 0 6px; font-size: 16px; }
.wpc .wpc-callout p { margin: 0; }
.wpc .wpc-callout.is-accent  { border-left-color: var(--wpc-red); }
.wpc .wpc-callout.is-gold    { border-left-color: var(--wpc-gold); }
/* warm/amber notice (from 19U ev-notice-warm) — advisories, "to be confirmed" */
.wpc .wpc-callout.is-warm { border-left-color: var(--wpc-red); background: var(--wpc-warm-bg); color: var(--wpc-warm-ink); }
.wpc .wpc-callout.is-warm h4 { color: var(--wpc-warm-ink); }

/* ---- 12. EVENT CARD (new part; mirrors "Upcoming Events") --------------- */
.wpc .wpc-event { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--wpc-border); border-left: 4px solid var(--wpc-red); border-radius: var(--wpc-radius); padding: 16px; margin-bottom: 12px; }
.wpc .wpc-event .wpc-date { flex: 0 0 auto; text-align: center; min-width: 60px; line-height: 1; }
.wpc .wpc-event .wpc-date .d { display: block; font-size: 28px; font-weight: 700; color: var(--wpc-navy); }
.wpc .wpc-event .wpc-date .m { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--wpc-red); }
.wpc .wpc-event h4 { font-size: 16px; margin: 0 0 2px; }
.wpc .wpc-event .wpc-loc { color: var(--wpc-ink-soft); font-size: 13.5px; margin: 0 0 4px; }

/* ---- 12b. EVENT-PAGE PARTS (ported from the 19U Championships page) ----- */
/* Info chips — a row of pill facts under a hero (dates, venue, format). */
.wpc .wpc-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.wpc .wpc-chip { display: inline-block; background: #fff; border: 1px solid var(--wpc-border); padding: 9px 15px; border-radius: var(--wpc-radius); font-weight: 600; font-size: 14px; color: var(--wpc-ink); }

/* Fact grid — the "at a glance" strip: label / big value / sub, in a bordered grid. */
.wpc .wpc-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--wpc-border); border: 1px solid var(--wpc-border); border-radius: var(--wpc-radius); overflow: hidden; }
.wpc .wpc-fact { background: #fff; padding: 18px 20px; }
.wpc .wpc-fact .k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--wpc-red); font-weight: 700; }
.wpc .wpc-fact .v { font-size: 17px; font-weight: 700; color: var(--wpc-navy); margin-top: 4px; line-height: 1.25; }
.wpc .wpc-fact .s { color: var(--wpc-ink-soft); font-size: 13px; margin-top: 2px; }
@media (max-width: 860px) { .wpc .wpc-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .wpc .wpc-facts { grid-template-columns: 1fr; } }

/* Key-value list — labelled rows inside a card (red label above value, divided). */
.wpc .wpc-kv { margin: 0; padding: 0; list-style: none; }
.wpc .wpc-kv li { padding: 9px 0; border-top: 1px solid var(--wpc-border); }
.wpc .wpc-kv li:first-child { border-top: 0; }
.wpc .wpc-kv .lbl { display: block; font-weight: 700; color: var(--wpc-red); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }

/* Timeline list — date column + description; for daily outlines / schedules. */
.wpc .wpc-timeline { margin: 0; padding: 0; list-style: none; }
.wpc .wpc-timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid var(--wpc-border); }
.wpc .wpc-timeline li:first-child { border-top: 0; }
.wpc .wpc-timeline .d { font-weight: 700; color: var(--wpc-red); font-size: 14px; }
.wpc .wpc-timeline .d small { display: block; color: var(--wpc-ink-soft); font-weight: 600; }
.wpc .wpc-timeline .w strong { color: var(--wpc-navy); display: block; }
.wpc .wpc-timeline .w span { color: var(--wpc-ink-soft); font-size: 14px; }
@media (max-width: 520px) { .wpc .wpc-timeline li { grid-template-columns: 1fr; gap: 2px; } }

/* Tags + status badges — small coloured pills for labels and states. */
.wpc .wpc-tag { display: inline-block; padding: 3px 11px; border-radius: var(--wpc-radius-pill); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.wpc .wpc-tag.is-red  { background: var(--wpc-red-tint);  color: var(--wpc-red); }
.wpc .wpc-tag.is-navy { background: var(--wpc-navy-tint); color: var(--wpc-navy); }
.wpc .wpc-tag.is-gold { background: rgba(201,162,39,.18); color: #8A6C14; }
.wpc .wpc-badge { display: inline-block; padding: 2px 9px; border-radius: var(--wpc-radius-pill); font-size: 11px; font-weight: 700; letter-spacing: .04em; vertical-align: middle; }
.wpc .wpc-badge.is-tbc { background: var(--wpc-warm-bg); color: var(--wpc-warm-ink); }
.wpc .wpc-badge.is-ok  { background: var(--wpc-ok-bg);   color: var(--wpc-ok-ink); }

/* Pill sub-nav — jump links across the top of a long page. */
.wpc .wpc-subnav { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--wpc-border); }
.wpc .wpc-subnav a { white-space: nowrap; color: var(--wpc-navy); font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: var(--wpc-radius-pill); background: var(--wpc-zebra); border: 1px solid var(--wpc-border); }
.wpc .wpc-subnav a:hover, .wpc .wpc-subnav a:focus-visible { background: var(--wpc-red); border-color: var(--wpc-red); color: #fff; text-decoration: none; }

/* CTA card — centered call-to-action block. */
.wpc .wpc-cta { background: #fff; border: 1px solid var(--wpc-border); border-radius: var(--wpc-radius); padding: 36px; text-align: center; }
.wpc .wpc-cta h4 { color: var(--wpc-navy); font-size: 22px; margin: 0 0 6px; }
.wpc .wpc-cta p { color: var(--wpc-ink-soft); max-width: 640px; margin: 0 auto 18px; }

/* ---- 13. PAGE-META FOOTER ---------------------------------------------- */
/* Standard closing strip for a program/content page: who manages it, who to
   contact, and when it was last updated. Default = slate grey; add nothing
   for grey, or .is-navy for the darker navy band. */
.wpc .wpc-footer { background: linear-gradient(180deg, var(--wpc-slate) 0%, var(--wpc-slate-800) 100%); color: rgba(255,255,255,.82); padding: 26px 28px; border-radius: var(--wpc-radius); font-size: 13px; }
.wpc .wpc-footer.is-navy { background: linear-gradient(180deg, var(--wpc-navy) 0%, var(--wpc-navy-800) 100%); }
.wpc .wpc-footer h4 { color: #fff; font-size: 15px; margin: 0 0 6px; }
.wpc .wpc-footer a { color: #C6CCDA; font-weight: 700; }
.wpc .wpc-footer a:hover { color: #fff; }
/* meta layout: three labelled fields, top-border accent */
.wpc .wpc-footer-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 32px; border-top: 3px solid var(--wpc-red); padding-top: 20px; }
@media (max-width: 720px) { .wpc .wpc-footer-meta { grid-template-columns: 1fr; gap: 16px; } }
.wpc .wpc-footer-meta .fm-label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #9AA6BE; margin-bottom: 4px; }
.wpc .wpc-footer-meta .fm-value { display: block; color: #fff; font-size: 14px; font-weight: 600; }
.wpc .wpc-footer-meta .fm-sub { display: block; color: rgba(255,255,255,.7); font-size: 12px; margin-top: 2px; }

/* ---- 14. UTILITIES ----------------------------------------------------- */
.wpc .wpc-center { text-align: center; }
.wpc .wpc-mt0 { margin-top: 0; } .wpc .wpc-mb0 { margin-bottom: 0; }
.wpc .wpc-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ============================================================================
   15. RECOMMENDED ADDITIONS (v2.3) — proposed by design, same tokens/patterns
   ----------------------------------------------------------------------------
   Drop-in web parts that fill gaps in the live set. All scoped under .wpc and
   built only from existing tokens, so they inherit any future token change.
   No JavaScript. Added: breadcrumb, stat band, document/download list,
   numbered steps, pricing tiers, sponsor strip, captioned figure, pull quote.
   See templates/wpc-web-parts/WpcWebParts.dc.html for live markup to copy.
   ========================================================================== */

/* ---- 15a. BREADCRUMB — trail nav under the RAMP page title -------------- */
.wpc .wpc-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--wpc-ink-soft); padding: 12px 0; }
.wpc .wpc-breadcrumb a { color: var(--wpc-ink-soft); font-weight: 600; }
.wpc .wpc-breadcrumb a:hover, .wpc .wpc-breadcrumb a:focus-visible { color: var(--wpc-red-ink); }
.wpc .wpc-breadcrumb .sep { color: var(--wpc-silver); font-weight: 700; }
.wpc .wpc-breadcrumb .here, .wpc .wpc-breadcrumb [aria-current] { color: var(--wpc-navy); font-weight: 700; }

/* ---- 15b. STAT BAND — big "by the numbers" figures on a light strip ------ */
.wpc .wpc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.wpc .wpc-stat { background: var(--wpc-zebra); border: 1px solid var(--wpc-border); border-radius: var(--wpc-radius); padding: 24px 18px; text-align: center; }
.wpc .wpc-stat .num { display: block; font-size: 40px; font-weight: 700; color: var(--wpc-red); line-height: 1; }
.wpc .wpc-stat .lbl { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--wpc-ink-soft); margin-top: 8px; }
.wpc .wpc-stat.is-navy .num { color: var(--wpc-navy); }
@media (max-width: 860px) { .wpc .wpc-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .wpc .wpc-stats { grid-template-columns: 1fr; } }

/* ---- 15c. DOCUMENT LIST — downloadable files (type, name, meta, action) -- */
.wpc .wpc-docs { display: grid; gap: 10px; }
.wpc .wpc-doc { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--wpc-border); border-radius: var(--wpc-radius); padding: 14px 16px; }
.wpc .wpc-doc .ext { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 8px; background: var(--wpc-navy); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.wpc .wpc-doc .ext.is-red { background: var(--wpc-red); }
.wpc .wpc-doc .doc-main { flex: 1 1 auto; min-width: 0; }
.wpc .wpc-doc .doc-name { font-weight: 700; font-size: 15px; color: var(--wpc-ink); }
.wpc .wpc-doc .doc-meta { font-size: 12.5px; color: var(--wpc-ink-soft); margin-top: 2px; }
.wpc .wpc-doc .doc-dl { flex: 0 0 auto; color: var(--wpc-red-ink); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }

/* ---- 15d. STEPS — numbered process (registration, how to enter) --------- */
.wpc .wpc-steps { display: grid; gap: 14px; counter-reset: step; }
.wpc .wpc-steps.is-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.wpc .wpc-step { position: relative; background: #fff; border: 1px solid var(--wpc-border); border-radius: var(--wpc-radius); padding: 18px 20px 18px 66px; }
.wpc .wpc-step::before { counter-increment: step; content: counter(step); position: absolute; left: 16px; top: 16px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--wpc-red); color: #fff; font-weight: 700; font-size: 16px; }
.wpc .wpc-step h4 { font-size: 15px; margin: 0 0 4px; color: var(--wpc-navy); }
.wpc .wpc-step p { margin: 0; font-size: 14px; color: var(--wpc-ink-soft); }

/* ---- 15e. PRICING TIERS — entry fees / registration options ------------- */
.wpc .wpc-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.wpc .wpc-price { background: #fff; border: 1px solid var(--wpc-border); border-radius: var(--wpc-radius-lg); padding: 24px 22px; }
.wpc .wpc-price.is-featured { border: 2px solid var(--wpc-red); box-shadow: 0 6px 20px rgba(230,32,44,.10); }
.wpc .wpc-price .tier { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--wpc-red-ink); }
.wpc .wpc-price .amt { font-size: 34px; font-weight: 700; color: var(--wpc-navy); line-height: 1; margin: 8px 0 2px; }
.wpc .wpc-price .amt small { font-size: 14px; font-weight: 600; color: var(--wpc-ink-soft); }
.wpc .wpc-price ul { list-style: none; margin: 16px 0 0; padding: 0; }
.wpc .wpc-price li { font-size: 14px; padding: 8px 0 8px 24px; position: relative; border-top: 1px solid var(--wpc-border); color: var(--wpc-ink); }
.wpc .wpc-price li::before { content: "\2713"; position: absolute; left: 0; top: 8px; color: var(--wpc-ok-ink); font-weight: 700; }

/* ---- 15f. SPONSOR STRIP — partner logos --------------------------------- */
.wpc .wpc-sponsors { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; background: var(--wpc-zebra); border: 1px solid var(--wpc-border); border-radius: var(--wpc-radius); padding: 22px 24px; }
.wpc .wpc-sponsors .sp { height: 44px; display: grid; place-items: center; padding: 0 8px; color: var(--wpc-ink-soft); font-weight: 700; letter-spacing: .02em; }

/* ---- 15g. FIGURE — captioned media with a red caption rule -------------- */
.wpc .wpc-figure { margin: 0; }
.wpc .wpc-figure .fig-media { border-radius: var(--wpc-radius); overflow: hidden; border: 1px solid var(--wpc-border); background: var(--wpc-zebra); }
.wpc .wpc-figure img { display: block; width: 100%; height: auto; }
.wpc .wpc-figure figcaption { border-left: 4px solid var(--wpc-red); padding: 4px 0 4px 12px; margin-top: 12px; font-size: 13.5px; color: var(--wpc-ink-soft); }
.wpc .wpc-figure figcaption b { color: var(--wpc-ink); }

/* ---- 15h. PULL QUOTE — testimonial / highlight -------------------------- */
.wpc .wpc-quote { border-left: 5px solid var(--wpc-red); padding: 6px 0 6px 22px; margin: 0; }
.wpc .wpc-quote p { font-size: 20px; font-weight: 600; color: var(--wpc-navy); line-height: 1.45; margin: 0 0 10px; }
.wpc .wpc-quote cite { font-style: normal; font-size: 13px; font-weight: 700; color: var(--wpc-red-ink); text-transform: uppercase; letter-spacing: .04em; }
.wpc .wpc-quote cite small { display: block; color: var(--wpc-ink-soft); font-weight: 600; text-transform: none; letter-spacing: 0; margin-top: 3px; }


/* ============================================================================
   16. PROGRAM SKINS (v2.4) — parity with the platform's 9 program themes
   ----------------------------------------------------------------------------
   The platform (NCLDS) themes each subprogram by overriding its brand tokens.
   These classes give the WEBSITE the same capability, so an OTCP page on
   waterpolo.ca reads as OTCP instead of generic WPC red.

   USE: add the program class alongside .wpc —  <div class="wpc is-otcp">
   Every part in sections 1-15 re-themes automatically. No other markup change.

   ROLES
     --wpc-navy    program brand — headings, table headers, footers, buttons
     --wpc-red     accent for TEXT and borders (contrast-safe on white, >=4.5:1)
     --wpc-accent  vivid accent for RULES/FILLS ONLY — never for text on white
     --wpc-hero-kicker  kicker text on the hero band — overridden per skin so
                        every program clears WCAG AA (4.5:1) on its own hero
   Brand values are taken from the platform skins so both surfaces agree.
   ========================================================================== */

.wpc, .wpc-brand { --wpc-accent: var(--wpc-red); }

.wpc.is-hub, .wpc-brand.is-hub   { --wpc-navy: #171717; --wpc-navy-800: #0D0D0D; }
.wpc.is-ncl, .wpc-brand.is-ncl   { --wpc-navy: #1B2A4A; --wpc-navy-800: #14203A; }
.wpc.is-cc, .wpc-brand.is-cc    { --wpc-navy: #3C444D; --wpc-navy-800: #2C3238; }
.wpc.is-otcp, .wpc-brand.is-otcp  { --wpc-navy: #0E7490; --wpc-navy-800: #0A5A70; --wpc-red: #0E7490; --wpc-red-700: #0A5A70; --wpc-accent: #06B6D4; --wpc-red-tint: #ECFEFF; --wpc-hero-kicker: #FFFFFF; --wpc-hero-kicker-slate: #FFFFFF; --wpc-red-ink: #0A5A70; }
.wpc.is-nt, .wpc-brand.is-nt    { --wpc-navy: #101828; --wpc-navy-800: #0A0F1A; --wpc-red: #8A6C14; --wpc-red-700: #6B5310; --wpc-accent: #C79A3A; --wpc-red-tint: #FDF6E3; --wpc-hero-kicker: #FFFFFF; --wpc-hero-kicker-slate: #FFFFFF; --wpc-red-ink: #6B5310; }
.wpc.is-agd, .wpc-brand.is-agd   { --wpc-navy: #15803D; --wpc-navy-800: #106430; --wpc-red: #15803D; --wpc-red-700: #106430; --wpc-accent: #22C55E; --wpc-red-tint: #EAFAF1; --wpc-hero-kicker: #FFFFFF; --wpc-hero-kicker-slate: #FFFFFF; --wpc-red-ink: #106430; }
.wpc.is-coach, .wpc-brand.is-coach { --wpc-navy: #5B2A86; --wpc-navy-800: #47206A; --wpc-red: #6B21A8; --wpc-red-700: #551A85; --wpc-accent: #8B5CF6; --wpc-red-tint: #F3E8FF; --wpc-hero-kicker: #FFFFFF; --wpc-hero-kicker-slate: #FFFFFF; --wpc-red-ink: #551A85; }
.wpc.is-event, .wpc-brand.is-event { --wpc-navy: #1C5D8C; --wpc-navy-800: #154870; --wpc-red: #1C5D8C; --wpc-red-700: #154870; --wpc-accent: #2E9BD6; --wpc-red-tint: #EBF5FB; --wpc-hero-kicker: #FFFFFF; --wpc-hero-kicker-slate: #FFFFFF; --wpc-red-ink: #154870; }
.wpc.is-admin, .wpc-brand.is-admin { --wpc-navy: #334155; --wpc-navy-800: #252F3F; }

/* Parts that should use the VIVID accent (fills/rules), not the text accent. */
.wpc .red-stripe, .wpc .wpc-hero.is-light::before { background: var(--wpc-accent); }
.wpc .wpc-step::before { background: var(--wpc-accent); }
.wpc .wpc-stat .num { color: var(--wpc-red); }


/* ============================================================================
   17. FORMS (v2.5) — registration, contact, clinic sign-up
   ----------------------------------------------------------------------------
   Public-facing flows had no compliant markup, so each page styled its own.
   Focus ring is 2px + offset (never removed), labels are real <label for>,
   errors are text not just colour. Works inside any program skin.
   ========================================================================== */
.wpc .wpc-form { display: grid; gap: 18px; }
.wpc .wpc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .wpc .wpc-form-row { grid-template-columns: 1fr; } }

.wpc .wpc-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 18px; }
.wpc .wpc-fieldset > legend { font-size: 15px; font-weight: 700; color: var(--wpc-navy); padding: 0 0 4px; border-bottom: 2px solid var(--wpc-border); width: 100%; margin-bottom: 4px; }

.wpc .wpc-field { display: grid; gap: 6px; }
.wpc .wpc-field > label { font-size: 13px; font-weight: 700; color: var(--wpc-ink); letter-spacing: .01em; }
.wpc .wpc-field > label .req { color: var(--wpc-red-ink); margin-left: 2px; }
.wpc .wpc-field .hint { font-size: 12.5px; color: var(--wpc-ink-soft); line-height: 1.45; }
.wpc .wpc-field .err { font-size: 12.5px; font-weight: 600; color: var(--wpc-red-ink); display: flex; align-items: center; gap: 5px; }
.wpc .wpc-field .err::before { content: "!"; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--wpc-red-ink); color: #fff; font-size: 10px; font-weight: 700; flex: 0 0 auto; }

.wpc .wpc-input, .wpc .wpc-select, .wpc .wpc-textarea {
  font: inherit; font-size: 15px; color: var(--wpc-ink); width: 100%; box-sizing: border-box;
  padding: 11px 13px; background: #fff; border: 1px solid var(--wpc-silver); border-radius: 8px;
  transition: border-color .12s, box-shadow .12s;
}
.wpc .wpc-textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.wpc .wpc-input::placeholder, .wpc .wpc-textarea::placeholder { color: #98A2B3; }
.wpc .wpc-input:hover, .wpc .wpc-select:hover, .wpc .wpc-textarea:hover { border-color: var(--wpc-ink-soft); }
.wpc .wpc-input:focus-visible, .wpc .wpc-select:focus-visible, .wpc .wpc-textarea:focus-visible {
  outline: 2px solid var(--wpc-navy); outline-offset: 1px; border-color: var(--wpc-navy);
}
.wpc .wpc-input.is-error, .wpc .wpc-select.is-error, .wpc .wpc-textarea.is-error { border-color: var(--wpc-red-ink); background: #FFFBFB; }
.wpc .wpc-input.is-error:focus-visible { outline-color: var(--wpc-red-ink); }
.wpc .wpc-input:disabled, .wpc .wpc-select:disabled, .wpc .wpc-textarea:disabled { background: var(--wpc-zebra); color: var(--wpc-ink-soft); cursor: not-allowed; border-color: var(--wpc-border); }

.wpc .wpc-select { appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23647088' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 12px 8px; }

/* checkbox / radio rows — 44px hit target, label is the target */
.wpc .wpc-choices { display: grid; gap: 4px; }
.wpc .wpc-choice { display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px; border-radius: 8px; cursor: pointer; min-height: 44px; box-sizing: border-box; }
.wpc .wpc-choice:hover { background: var(--wpc-zebra); }
.wpc .wpc-choice input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--wpc-navy); cursor: pointer; }
.wpc .wpc-choice .ch-main { display: grid; gap: 2px; }
.wpc .wpc-choice .ch-label { font-size: 14.5px; font-weight: 600; color: var(--wpc-ink); }
.wpc .wpc-choice .ch-sub { font-size: 12.5px; color: var(--wpc-ink-soft); line-height: 1.45; }
.wpc .wpc-choice:has(input:focus-visible) { outline: 2px solid var(--wpc-navy); outline-offset: 1px; }

/* boxed choice — for the "pick one option" case (entry category, division) */
.wpc .wpc-choice.is-boxed { border: 1px solid var(--wpc-border); background: #fff; }
.wpc .wpc-choice.is-boxed:has(input:checked) { border-color: var(--wpc-navy); background: var(--wpc-navy-tint); box-shadow: inset 0 0 0 1px var(--wpc-navy); }

.wpc .wpc-form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 4px; }
.wpc .wpc-form-actions .spacer { flex: 1 1 auto; }
.wpc .wpc-form-note { font-size: 12.5px; color: var(--wpc-ink-soft); }

/* whole-form error summary — announce failures at the top, not just inline */
.wpc .wpc-form-summary { border: 1px solid var(--wpc-red-ink); background: var(--wpc-red-tint); border-radius: var(--wpc-radius); padding: 14px 16px; }
.wpc .wpc-form-summary h4 { margin: 0 0 6px; font-size: 14px; color: var(--wpc-red-700); }
.wpc .wpc-form-summary ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--wpc-ink); }
.wpc .wpc-form-summary a { color: var(--wpc-red-ink); font-weight: 600; }

/* ============================================================================
   18. TABS · PAGINATION · EMPTY STATE (v2.5) — the remaining coverage gaps
   ========================================================================== */
.wpc .wpc-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--wpc-border); margin-bottom: 20px; }
.wpc .wpc-tabs a, .wpc .wpc-tabs button { font: inherit; font-size: 14px; font-weight: 600; color: var(--wpc-ink-soft); background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 11px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.wpc .wpc-tabs a:hover, .wpc .wpc-tabs button:hover { color: var(--wpc-navy); }
.wpc .wpc-tabs .is-active { color: var(--wpc-navy); font-weight: 700; border-bottom-color: var(--wpc-accent); }
.wpc .wpc-tabs .tab-count { background: var(--wpc-zebra); color: var(--wpc-ink-soft); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: var(--wpc-radius-pill); }
.wpc .wpc-tabs .is-active .tab-count { background: var(--wpc-red-tint); color: var(--wpc-red-ink); }

.wpc .wpc-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 18px 0; }
.wpc .wpc-pager .p-info { font-size: 13px; color: var(--wpc-ink-soft); margin-right: auto; }
.wpc .wpc-pager a, .wpc .wpc-pager button { font: inherit; font-size: 13.5px; font-weight: 600; min-width: 38px; height: 38px; padding: 0 11px; display: inline-grid; place-items: center; border: 1px solid var(--wpc-border); background: #fff; border-radius: 8px; color: var(--wpc-ink); cursor: pointer; text-decoration: none; box-sizing: border-box; }
.wpc .wpc-pager a:hover, .wpc .wpc-pager button:hover { border-color: var(--wpc-navy); color: var(--wpc-navy); }
.wpc .wpc-pager .is-current { background: var(--wpc-navy); border-color: var(--wpc-navy); color: #fff; }
.wpc .wpc-pager .is-disabled { color: var(--wpc-silver); background: var(--wpc-zebra); cursor: not-allowed; pointer-events: none; }
.wpc .wpc-pager .gap { color: var(--wpc-silver); padding: 0 2px; }

.wpc .wpc-empty { text-align: center; background: var(--wpc-zebra); border: 1px dashed var(--wpc-silver); border-radius: var(--wpc-radius-lg); padding: 44px 28px; }
.wpc .wpc-empty .em-mark { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; background: #fff; border: 2px solid var(--wpc-border); display: grid; place-items: center; color: var(--wpc-ink-soft); font-size: 20px; font-weight: 700; }
.wpc .wpc-empty h4 { margin: 0 0 6px; font-size: 17px; color: var(--wpc-navy); }
.wpc .wpc-empty p { margin: 0 auto 16px; font-size: 14.5px; color: var(--wpc-ink-soft); max-width: 46ch; line-height: 1.55; }


/* ============================================================================
   19. FOUR MORE PROGRAM SKINS (v2.6)
   ----------------------------------------------------------------------------
   High Performance sits ABOVE National Team, so it gets its own identity rather
   than a shade of it: oxblood carrying the same gold performance accent, so the
   two read as family without being interchangeable.
   Safe Sport, Learn to Swim and Provincial Associations are cross-cutting
   layers, given hues no competition program owns.
   All four verified: white on band and brand-as-text both clear WCAG AA.
   ========================================================================== */
.wpc.is-hp, .wpc-brand.is-hp        { --wpc-navy: #6B1F2A; --wpc-navy-800: #551620; --wpc-red: #8A6C14; --wpc-red-ink: #6B5310; --wpc-red-700: #6B5310; --wpc-accent: #C79A3A; --wpc-red-tint: #FDF6E3; --wpc-hero-kicker: #FFFFFF; --wpc-hero-kicker-slate: #FFFFFF; }
.wpc.is-safesport, .wpc-brand.is-safesport { --wpc-navy: #312E81; --wpc-navy-800: #272463; --wpc-red: #3730A3; --wpc-red-ink: #312E81; --wpc-red-700: #272463; --wpc-accent: #6366F1; --wpc-red-tint: #EEF0FF; --wpc-hero-kicker: #FFFFFF; --wpc-hero-kicker-slate: #FFFFFF; }
.wpc.is-lts, .wpc-brand.is-lts       { --wpc-navy: #C2410C; --wpc-navy-800: #9A3412; --wpc-red: #9A3412; --wpc-red-ink: #9A3412; --wpc-red-700: #7C2D12; --wpc-accent: #F97316; --wpc-red-tint: #FFF3EC; --wpc-hero-kicker: #FFFFFF; --wpc-hero-kicker-slate: #FFFFFF; }
.wpc.is-pso, .wpc-brand.is-pso       { --wpc-navy: #57534E; --wpc-navy-800: #44403C; --wpc-red: #44403C; --wpc-red-ink: #44403C; --wpc-red-700: #292524; --wpc-accent: #78716C; --wpc-red-tint: #F5F5F4; --wpc-hero-kicker: #FFFFFF; --wpc-hero-kicker-slate: #FFFFFF; }


/* ============================================================================
   20. TYPOGRAPHY — League Spartan display face (v3.0)
   ----------------------------------------------------------------------------
   THREE RULES, all keyed off CASE rather than a list of exceptions:

   1. HEADINGS + METRIC VALUES at 20px and above  -> League Spartan
        mixed-case  -0.01em      all-caps  +0.02em
   2. UPPERCASE LABEL TEXT at any size            -> League Spartan  +0.06em
        Caps sidestep the tight-aperture lowercase problem that makes League
        Spartan fail below 20px, so table headers/kickers/eyebrows qualify.
   3. EVERYTHING 18px AND UNDER that is not caps  -> Cerebri Sans at 800
        One weight heavier than usual: that is what holds hierarchy without
        borrowing League Spartan's density.

   Tracking is set by CASE, not size. Negative tracking flatters mixed-case
   display but crowds all-caps, whose sidebearings are already even.
   ========================================================================== */

/* ---- 1. display: headings + metric values, 20px and up ------------------ */
.wpc .wpc-hero h1:not(.wpc-brand *),
.wpc .section-head h2:not(.wpc-brand *) { font-family: var(--wpc-font-display); font-weight: 800; letter-spacing: .02em; }
.wpc .wpc-cta h4:not(.wpc-brand *) { font-family: var(--wpc-font-display); font-weight: 800; letter-spacing: -.01em; }
.wpc .wpc-quote p:not(.wpc-brand *) { font-family: var(--wpc-font-display); font-weight: 700; letter-spacing: -.01em; }
.wpc .wpc-stat .num:not(.wpc-brand *),
.wpc .wpc-price .amt:not(.wpc-brand *),
.wpc .wpc-event .wpc-date .d:not(.wpc-brand *) { font-family: var(--wpc-font-display); font-weight: 800; letter-spacing: -.01em; }

/* ---- 2. uppercase labels, any size ------------------------------------- */
.wpc .section-head .kicker:not(.wpc-brand *),
.wpc .wpc-hero .kicker:not(.wpc-brand *),
.wpc table.wpc-table th:not(.wpc-brand *),
.wpc table.committee-table th:not(.wpc-brand *),
.wpc .wpc-stat .lbl:not(.wpc-brand *),
.wpc .wpc-fact .k:not(.wpc-brand *),
.wpc .wpc-kv .lbl:not(.wpc-brand *),
.wpc .wpc-price .tier:not(.wpc-brand *),
.wpc .wpc-doc .doc-dl:not(.wpc-brand *),
.wpc .wpc-doc .ext:not(.wpc-brand *),
.wpc .wpc-quote cite:not(.wpc-brand *),
.wpc .wpc-event .wpc-date .m:not(.wpc-brand *),
.wpc .chip-tag:not(.wpc-brand *),
.wpc .wpc-footer-meta .fm-label:not(.wpc-brand *) { font-family: var(--wpc-font-display); letter-spacing: .06em; }

/* ---- 3. below the floor: Cerebri, one weight up ------------------------- */
.wpc .wpc-card h5:not(.wpc-brand *),
.wpc .wpc-fact .v:not(.wpc-brand *),
.wpc .wpc-doc .doc-name:not(.wpc-brand *),
.wpc .wpc-fieldset > legend:not(.wpc-brand *),
.wpc details.wpc-details summary:not(.wpc-brand *),
.wpc .board-card .bname:not(.wpc-brand *),
.wpc .roster-card .rname:not(.wpc-brand *),
.wpc .member-chip-detailed .mcd-name:not(.wpc-brand *),
/* These six inherit their weight from .wpc h1..h5 rather than declaring it,
   so they were missed on the first pass. A Callout title sat a weight lighter
   than a Card title at the same size. */
.wpc .wpc-callout h4:not(.wpc-brand *),
.wpc .wpc-event h4:not(.wpc-brand *),
.wpc .wpc-empty h4:not(.wpc-brand *),
.wpc .wpc-step h4:not(.wpc-brand *),
.wpc .wpc-footer h4:not(.wpc-brand *),
.wpc .wpc-timeline strong:not(.wpc-brand *) { font-family: var(--wpc-font); font-weight: 800; }


/* ============================================================================
   21. WATERMARKS (v3.1)
   ----------------------------------------------------------------------------
   The mark as texture, not signage. Built as a CSS MASK so the fill comes from
   a token — the watermark inherits each program's colour with no per-skin
   asset. One file serves all 13 skins.

   RULES, and they are the whole design:
     - 4-8% opacity. Never above 8.
     - Oversize and crop: BLEED, don't float. A contained, fully-visible mark
       reads as a placeholder. The empty state is the ONE exception.
     - One per view. Never one per card — repetition turns texture into noise.
     - Never behind tables, forms or dense data.

   USE: the host needs position + overflow clipping. .wpc-hero, .wpc-cta and
   .wpc-empty already provide it; anything else gets .wpc-wm-host.
     <div class="wpc-hero wpc-wm-host">
       <div class="wpc-watermark is-hero on-dark"></div>
       …
     </div>
   Content inside a watermarked host needs position:relative to sit above it.
   ========================================================================== */

.wpc .wpc-wm-host { position: relative; overflow: hidden; }

.wpc .wpc-watermark {
  position: absolute; pointer-events: none; z-index: 0;
  background: var(--wpc-navy);
  -webkit-mask: var(--wpc-mark-url) no-repeat center / contain;
  mask: var(--wpc-mark-url) no-repeat center / contain;
}
.wpc .wpc-watermark.on-dark { background: #fff; }
.wpc .wpc-watermark.use-lockup { -webkit-mask-image: var(--wpc-lockup-url); mask-image: var(--wpc-lockup-url); }

/* placements — each one crops against a different edge */
.wpc .wpc-watermark.is-hero    { width: 440px; height: 440px; right: -110px; bottom: -160px; opacity: .07; }
.wpc .wpc-watermark.is-panel   { width: 560px; height: 560px; right: -180px; top: -150px; opacity: .06; }
.wpc .wpc-watermark.is-cta     { width: 300px; height: 300px; left: -90px; top: -60px; opacity: .08; }
.wpc .wpc-watermark.is-section { width: 900px; height: 900px; left: -260px; top: -330px; opacity: .045; }
/* the one that centres and stays whole — an empty state is ABOUT absence */
.wpc .wpc-watermark.is-empty   { width: 200px; height: 200px; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .06; }

@media (max-width: 640px) {
  .wpc .wpc-watermark.is-hero    { width: 300px; height: 300px; right: -90px; bottom: -110px; }
  .wpc .wpc-watermark.is-panel   { width: 340px; height: 340px; right: -120px; top: -100px; }
  .wpc .wpc-watermark.is-section { width: 520px; height: 520px; left: -160px; top: -190px; }
}
@media print { .wpc .wpc-watermark { display: none; } }

/* --- baked in where the treatment is ALWAYS right, so authors get it free -- */
.wpc .wpc-empty { position: relative; overflow: hidden; }
.wpc .wpc-empty::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 200px; height: 200px;
  transform: translate(-50%, -50%); pointer-events: none; opacity: .06; z-index: 0;
  background: var(--wpc-navy);
  -webkit-mask: var(--wpc-mark-url) no-repeat center / contain;
  mask: var(--wpc-mark-url) no-repeat center / contain;
}
.wpc .wpc-empty > * { position: relative; z-index: 1; }

.wpc .wpc-cta { position: relative; overflow: hidden; }
/* Navy, NOT white: .wpc-cta's own ground is white, so a white fill composites
   to a delta of zero and renders nothing. Navy at 6% matches the .wpc-empty
   precedent below and is skin-aware for free. */
.wpc .wpc-cta::after {
  content: ""; position: absolute; left: -90px; top: -60px; width: 300px; height: 300px;
  pointer-events: none; opacity: .06; z-index: 0; background: var(--wpc-navy);
  -webkit-mask: var(--wpc-mark-url) no-repeat center / contain;
  mask: var(--wpc-mark-url) no-repeat center / contain;
}
.wpc .wpc-cta > * { position: relative; z-index: 1; }


/* ---- 20b. TYPE UTILITIES ------------------------------------------------
   For hand-written type that no component class covers — a bare <span> label,
   an inline stat figure. The class rules in section 20 reach elements with a
   known class; these are the opt-in escape hatch so authored markup can still
   land on the right face. Defined for BOTH scopes: a utility is explicit, so
   unlike the element rules it should work inside a .wpc-brand island too.
   Inline letter-spacing still wins, which is intended — the authored tracking
   is preserved and only the family is inherited.
   -------------------------------------------------------------------------- */
.wpc .wpc-display, .wpc-brand .wpc-display { font-family: var(--wpc-font-display); letter-spacing: -.01em; }
.wpc .wpc-display-caps, .wpc-brand .wpc-display-caps { font-family: var(--wpc-font-display); letter-spacing: .02em; }
.wpc .wpc-label, .wpc-brand .wpc-label { font-family: var(--wpc-font-display); letter-spacing: .06em; }


/* ---- 20c. INHERITANCE STOPS --------------------------------------------
   Section 20 sets font-family on parents, so nested children inherit the
   display face into sizes and cases the rules forbid. These reset it.
   The general test: computed family is League Spartan, font-size < 20px,
   text-transform is not uppercase. Anything matching that is a bug.
   -------------------------------------------------------------------------- */
.wpc .wpc-price .amt small:not(.wpc-brand *) { font-family: var(--wpc-font); letter-spacing: normal; }
.wpc .wpc-quote cite small:not(.wpc-brand *) { font-family: var(--wpc-font); letter-spacing: normal; }


/* ============================================================================
   22. ICONS (v3.2)
   ----------------------------------------------------------------------------
   SCOPE IS NARROW ON PURPOSE. The custom set covers only the concepts no icon
   library carries — ball, cap, pool, goal, whistle, period, card, official,
   roster, standings, scoreboard, certified, compliance, incident, venue,
   schedule. For generic UI (search, filter, chevron, download, close, plus)
   use an established set; Lucide matches this grid and stroke almost exactly.
   Hand-drawing those would be maintenance for no gain.

   Stroke and colour live HERE, not in the sprite, so one change re-weights
   every icon and they inherit whatever token colour they sit in.
     <svg class="wpc-icon"><use href="#wpc-ball"></use></svg>
   Load wpc-shared/wpc-icons.js in <helmet> first.
   ========================================================================== */
.wpc .wpc-icon, .wpc-brand .wpc-icon {
  width: 20px; height: 20px; flex: 0 0 auto; display: inline-block; vertical-align: -.22em;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
/* Sizes. Stroke scales DOWN as the icon grows so optical weight stays even —
   a 1.75 stroke that reads right at 20px looks heavy at 40px. */
.wpc .wpc-icon.is-sm, .wpc-brand .wpc-icon.is-sm { width: 16px; height: 16px; stroke-width: 2; }
.wpc .wpc-icon.is-lg, .wpc-brand .wpc-icon.is-lg { width: 28px; height: 28px; stroke-width: 1.6; }
.wpc .wpc-icon.is-xl, .wpc-brand .wpc-icon.is-xl { width: 40px; height: 40px; stroke-width: 1.4; }

/* Tones — default inherits from the parent, these are explicit overrides. */
.wpc .wpc-icon.is-red, .wpc-brand .wpc-icon.is-red { color: var(--wpc-red-ink); }
.wpc .wpc-icon.is-navy, .wpc-brand .wpc-icon.is-navy { color: var(--wpc-navy); }
.wpc .wpc-icon.is-soft, .wpc-brand .wpc-icon.is-soft { color: var(--wpc-ink-soft); }

/* Icon in a tinted tile — for KPI headers, list rows, feature cards. */
.wpc .wpc-icon-tile, .wpc-brand .wpc-icon-tile {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 10px; background: var(--wpc-navy-tint); color: var(--wpc-navy);
}
.wpc .wpc-icon-tile.is-accent, .wpc-brand .wpc-icon-tile.is-accent { background: var(--wpc-red-tint); color: var(--wpc-red-ink); }
.wpc .wpc-icon-tile.is-solid, .wpc-brand .wpc-icon-tile.is-solid { background: var(--wpc-navy); color: #fff; }
.wpc .wpc-icon-tile.is-lg, .wpc-brand .wpc-icon-tile.is-lg { width: 52px; height: 52px; border-radius: 12px; }

/* Buttons and badges pick up icons without extra markup. */
.wpc .wpc-btn .wpc-icon { margin-right: 7px; margin-left: -2px; }
.wpc .wpc-badge .wpc-icon, .wpc .wpc-tag .wpc-icon { width: 13px; height: 13px; stroke-width: 2.2; margin-right: 4px; }