/* ============================================================================
   WATER POLO CANADA — RAMP WEB PARTS DESIGN SYSTEM
   Version 2.3 · Owner: Corey Conroy, Education & Events
   ----------------------------------------------------------------------------
   Single source of truth for WPC web parts. Scoped under .wpc so it never
   restyles the RAMP theme (and the theme is far less likely to leak in).

   HOSTING (recommended): deploy this file to an HTTPS static host that serves
   it as text/css (a Netlify site — e.g. wpc-assets) and link it from every page:
       <link rel="stylesheet" href="https://wpc-assets.netlify.app/wpc-design-system.css?v=2.3">
   Cross-origin stylesheet loading is allowed; just needs HTTPS + text/css +
   a public URL. (A SharePoint share link will NOT work as a stylesheet.)
   If a page can't link it, paste this whole file inline in <style>...</style>
   (the self-contained method). Bump the Version + ?v= on every change.

   FONTS: Cerebri Sans Pro is loaded site-wide on waterpolo.ca via Typekit,
   so it is available in RAMP for headings and body.

   v2.3: tables are outlined with rounded corners (+ optional .wpc-tablewrap).
   ========================================================================== */

/* ---- 1. TOKENS (match the live committees block exactly) ---------------- */
.wpc {
  --wpc-navy:      #1D2951;   /* primary — headings, table headers, footer */
  --wpc-navy-800:  #172140;
  --wpc-red:       #C0392B;   /* accent — kickers, CTAs, links, active state */
  --wpc-red-700:   #9E2E22;
  --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:  #FCE9EC;   /* 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 */

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

  --wpc-font: "Cerebri Sans Pro", "Cerebri Sans", -apple-system,
              "Segoe UI", Roboto, Arial, sans-serif;

  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; }
.wpc main { max-width: var(--wpc-maxw); margin: 0 auto; }
.wpc h1, .wpc h2, .wpc h3, .wpc h4, .wpc h5 { font-weight: 700; color: var(--wpc-ink); margin: 0; }
.wpc p { margin: 0 0 12px; }
.wpc a { color: var(--wpc-red); text-decoration: none; font-weight: 700; }
.wpc a:hover, .wpc a:focus-visible { text-decoration: underline; }
.wpc :focus-visible { outline: 3px solid var(--wpc-red); outline-offset: 2px; border-radius: var(--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(--radius); overflow: hidden;
}
.wpc .wpc-hero .kicker { color: #9FB0E0; }
.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: #C6CCDA; }
/* 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(--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(--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(--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(--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(--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(--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(--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(--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(--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: separate; border-spacing: 0;
  border: 1px solid var(--wpc-border); border-radius: var(--radius-lg); overflow: hidden;
  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-top: 1px solid var(--wpc-border); vertical-align: top; }
.wpc table.wpc-table thead th, .wpc table.committee-table thead th { border-top: 0; }
.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); }
/* optional wrapper for wide tables — bulletproof rounding + horizontal scroll on mobile */
.wpc .wpc-tablewrap { border: 1px solid var(--wpc-border); border-radius: var(--radius-lg); overflow: hidden; overflow-x: auto; margin-bottom: 22px; }
.wpc .wpc-tablewrap > table.wpc-table { margin-bottom: 0; border: 0; border-radius: 0; }

/* ---- 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(--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(--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(--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(--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(--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(--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(--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(--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(--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(--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; }