/* Community + Athletics — communityathletics.org
   Game day: black and gold from the C+A logo, the logo's own typeface (Alatsi)
   for display type, and sponsors hung like the pop-out banners they get at games.
   Logo SVGs in /img/ca-*.svg are converted from "CA Logo Circle Words.eps".
   Reading pages (privacy, terms, the text-updates form) sit on white bands so
   long text and form fields stay easy to read. Navy is CCA's color and is used
   only where the page acts on behalf of CCA (the SMS opt-in button). */

:root {
  --ink: #000000;
  --paper: #ffffff;
  --gold: #febd35;
  --gold-press: #eaa91d;
  --court: #1c1d20;
  --line: #34363b;
  --dim: #b9bdc4;
  --soft: #dcdfe4;
  --concrete: #eceef1;
  --slate: #474c55;
  --rule: #d5d9df;
  --navy: #001b71;
  --navy-press: #00144f;
  --error: #b3261e;

  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Alatsi", "Montserrat", system-ui, sans-serif;
  --measure: 62ch;
  --gutter: clamp(1rem, 4vw, 3rem);
  --band: clamp(4rem, 9vw, 8rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.65;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

/* Alatsi has one weight; never let the browser fake a bolder one. */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
}
h1, h2, h3 {
  margin: 0 0 0.5em;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}
h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1em; }

a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.14em; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.band--gold :focus-visible,
.btn--gold:focus-visible { outline-color: var(--ink); }
.band--paper :focus-visible { outline-color: var(--ink); }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  padding: 0.6rem 1rem; background: var(--gold); color: var(--ink); font-weight: 700;
}
.skip:focus { top: 1rem; }

/* Author display rules (e.g. .form grid) would otherwise beat the UA [hidden] rule. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 36rem; }

/* ── Header ─────────────────────────────────────────────── */
.site-header { background: var(--ink); color: var(--paper); }
/* On the home page the header floats over the game photo. */
body:has(.hero) .site-header { position: absolute; inset: 0 0 auto; z-index: 5; background: transparent; }
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1.5rem; padding-block: 1rem;
}
.brand { display: inline-flex; }
.brand img { width: auto; height: 48px; }
.site-nav {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem;
  font-family: var(--display); font-synthesis: none; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.site-nav a { text-decoration: none; padding-block: 0.35rem; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--gold); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--gold); }

/* ── Hero: full-bleed game photo, name bottom-left ─────── */
.hero { position: relative; display: grid; align-items: end; min-height: min(92vh, 56rem); overflow: hidden; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
/* The first photo stays put; the next two fade in over it in turn, 8s each on a 24s loop. */
.hero__photo--next { opacity: 0; animation: hero-fade 24s 8s infinite; }
.hero__photo--next:last-of-type { animation-delay: 16s; }
@keyframes hero-fade { 0% { opacity: 0; } 4.2% { opacity: 1; } 37.5% { opacity: 1; } 41.7% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__photo--next { display: none; } }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0.92) 100%);
}
.hero__text { position: relative; z-index: 1; padding-block: 8rem clamp(2.5rem, 6vw, 4.5rem); }
.wordmark { margin: 0 0 1.5rem; }
.wordmark img { width: min(100%, 46rem); filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.45)); }
.hero__lede { max-width: 30ch; font-size: clamp(1.15rem, 2.1vw, 1.45rem); font-weight: 600; line-height: 1.4; margin-bottom: 1.75rem; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.75rem 1.5rem;
  border: 2px solid transparent; border-radius: 0.3rem;
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: 1.1rem; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.03em;
  text-decoration: none; cursor: pointer;
}
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-press); }
.btn--ghost { border-color: rgba(255, 255, 255, 0.75); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper); background: rgba(255, 255, 255, 0.1); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #262626; }
.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: rgba(0, 0, 0, 0.08); }
.btn--navy { background: var(--navy); color: var(--paper); }
.btn--navy:hover { background: var(--navy-press); }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }

/* ── Scoreboard ─────────────────────────────────────────── */
.board { border-block: 4px solid var(--gold); background: var(--court); }
.board ul {
  list-style: none; margin: 0 auto; padding: 0; max-width: 78rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 52rem) { .board ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.board li { padding: clamp(1.25rem, 3vw, 2rem) var(--gutter); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.board b {
  display: block; color: var(--gold);
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: clamp(2.3rem, 5.2vw, 4.25rem); line-height: 1;
  text-shadow: 0 0 22px rgba(251, 178, 22, 0.35);
}
.board span { display: block; margin-top: 0.4rem; color: var(--dim); font-size: 1rem; font-weight: 600; line-height: 1.35; }

/* ── Bands (full-width sections) ───────────────────────── */
.band { padding-block: var(--band); }
.band--court { background: var(--court); }
.band--gold { background: var(--gold); color: var(--ink); }
.band--paper { background: var(--paper); color: var(--ink); }
.band--paper h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }

.prose { max-width: var(--measure); }
.prose > :last-child { margin-bottom: 0; }
.muted { color: var(--dim); }
.lead { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.45; font-weight: 600; }
.fine { font-size: 0.9rem; }
.band--paper .fine { color: var(--slate); }

/* heading beside text on wide screens */
.split { display: grid; gap: 0.5rem 3rem; }
@media (min-width: 52rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .split > h2 { margin-top: 0.05em; }
}

/* photo beside text */
.media-split { display: grid; gap: 2rem 4rem; align-items: center; }
.media-split img { width: 100%; border-radius: 0.3rem; }
.media-split .prose p:not(.lead) { color: var(--soft); }
@media (min-width: 52rem) {
  .media-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .media-split--flip > figure { order: 2; }
}

/* ── Quote ──────────────────────────────────────────────── */
.quote blockquote { margin: 0; }
.quote p {
  max-width: 26ch; margin: 0 0 1.25rem;
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: clamp(1.8rem, 4.2vw, 3.4rem); line-height: 1.08; text-wrap: balance;
}
.quote p::before { content: "\201C"; }
.quote p::after { content: "\201D"; }
.quote figcaption { font-size: 1.1rem; font-weight: 700; }

/* ── Sports mosaic ──────────────────────────────────────── */
.mosaic { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.5rem; }
@media (min-width: 52rem) {
  .mosaic { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .mosaic a:first-child { grid-row: span 2; }
}
.mosaic a { position: relative; display: block; min-height: 15rem; overflow: hidden; text-decoration: none; border-radius: 0.25rem; }
.mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.mosaic a:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .mosaic img { transition: none; } }
.mosaic a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.85)); }
.mosaic h3 { position: absolute; left: 1rem; right: 1rem; bottom: 0.8rem; z-index: 1; margin: 0; font-size: clamp(1.5rem, 2.8vw, 2.4rem); }
.mosaic a:hover h3 { color: var(--gold); }
/* the fifth tile fills the last row on phones */
@media (max-width: 51.99rem) { .mosaic a:last-child { grid-column: span 2; } }

/* ── Sponsors as game-day banners ──────────────────────── */
.floor {
  background: var(--court) radial-gradient(circle at 50% 120%, transparent 0 22rem, rgba(251, 178, 22, 0.18) 22rem 22.25rem, transparent 22.25rem);
}
.banners { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 2rem; }
@media (min-width: 52rem) { .banners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.banner {
  position: relative; display: grid; place-items: center; aspect-ratio: 5 / 2;
  padding: 1.5rem 2.5rem; text-decoration: none; border-radius: 0.2rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
/* grommets */
.banner::before, .banner::after {
  content: ""; position: absolute; top: 0.7rem; width: 0.7rem; height: 0.7rem;
  border-radius: 50%; background: #9aa0a8;
}
.banner::before { left: 0.7rem; }
.banner::after { right: 0.7rem; }
.banner--ink { background: var(--ink); border: 1px solid #2e3035; }
.banner--ink img { width: 70%; }
.banner--gold { background: var(--gold); color: var(--ink); text-align: center; }
.banner--gold b {
  display: block; font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; text-transform: uppercase;
}
.banner--gold span span { display: block; margin-top: 0.5rem; font-weight: 700; font-size: 1.1rem; }
/* Seth's board: his name in Figtree Heavy (free stand-in for CrossCountry's Visby CF) over their logo, both in CCM ink. */
.banner--ccm { color: #231f20; container-type: inline-size; }
.banner--ccm > span { width: 100%; }
.banner--ccm b { font-family: "Figtree", var(--font); font-weight: 900; font-size: 8.2cqi; letter-spacing: -0.01em; }
.banner--ccm img { display: block; width: 70cqi; height: auto; margin: 3.5cqi auto 0; }
.banner:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 3px var(--gold); }
.banner--gold:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 3px var(--paper); }
.cap { margin: 0.8rem 0 0; font-size: 1rem; color: var(--dim); }
.cap strong { color: var(--paper); }
.cap a { white-space: nowrap; }
.banners + .actions { margin-top: 2.5rem; }

/* ── Inner page header ─────────────────────────────────── */
.page-head { background: var(--court); border-bottom: 4px solid var(--gold); padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.page-head h1 { font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: 0.95; margin-bottom: 0.35em; }
.page-head__lede { max-width: 48ch; margin: 0; font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--soft); }

/* ── Sponsorship packages table ───────────────────────── */
.table-scroll { overflow-x: auto; margin-top: 1.5rem; }
.packages { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 1rem; }
.packages th, .packages td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.packages tbody th { font-weight: 500; color: var(--soft); }
.packages thead th {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: 1.4rem; text-transform: uppercase; border-bottom: 4px solid var(--gold);
}
.packages td { width: 17%; text-align: center; }
.tier::before {
  content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.45em;
  border-radius: 50%; vertical-align: -0.05em; border: 1px solid rgba(255, 255, 255, 0.3);
}
.tier--gold::before { background: var(--gold); }
.tier--silver::before { background: #b9bec6; }
.tier--bronze::before { background: #c9814d; }
.packages thead th.tier { text-align: center; }
/* Marks replace the words visually; the words stay for screen readers. */
.packages td.yes, .packages td.no { font-size: 0; }
.packages td.yes::before {
  content: ""; display: inline-block; width: 1.35rem; height: 1.35rem;
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.packages td.no::before { content: "\2014"; font-size: 1.1rem; color: #6b7079; }
/* Phones: all three tiers stay on screen instead of scrolling sideways. */
@media (max-width: 40rem) {
  .packages { min-width: 19rem; }
  .packages th, .packages td { padding: 0.7rem 0.35rem; }
  .packages tbody th { font-size: 0.9rem; line-height: 1.35; }
  .packages thead th { font-size: 1.05rem; }
  .tier::before { display: block; margin: 0 auto 0.35em; }
}

/* ── Forms (on white bands) ─────────────────────────────── */
.form { display: grid; gap: 1.1rem; }
.field label { display: block; margin-bottom: 0.35rem; font-weight: 700; font-size: 1rem; }
.field input {
  width: 100%; min-height: 3rem; padding: 0.65rem 0.8rem;
  border: 2px solid #8a9099; border-radius: 0.35rem; background: var(--paper);
  font: inherit; font-size: 1.05rem; color: var(--ink);
}
.field input:focus-visible { border-color: var(--ink); outline-offset: 1px; }
.consent { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.95rem; line-height: 1.5; color: var(--slate); }
.consent input { width: 1.3rem; height: 1.3rem; margin: 0.15rem 0 0; flex-shrink: 0; accent-color: var(--navy); }
.consent a { color: var(--navy); }
.form__error {
  margin: 0; padding: 0.75rem 1rem; border-left: 4px solid var(--error);
  background: #fdecea; color: var(--error); font-weight: 600; font-size: 1rem;
}
.form__success { padding: 1.5rem; border-left: 6px solid var(--gold); background: var(--concrete); }
.form__success h2 { font-size: 1.9rem; text-transform: none; }

/* ── Policies ───────────────────────────────────────────── */
.policy h2 { font-size: 1.45rem; line-height: 1.15; margin-top: 2.2em; text-transform: none; }
.policy ul { padding-left: 1.25rem; }
.policy li { margin-bottom: 0.3em; }
address { font-style: normal; margin-bottom: 1em; }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: var(--dim); font-size: 1rem; border-top: 4px solid var(--gold); padding-top: 3.5rem; }
.site-footer a { color: var(--paper); }
.site-footer a:hover { color: var(--gold); }
.site-footer__grid { display: grid; gap: 2rem 3rem; }
@media (min-width: 52rem) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-footer__org img { width: min(100%, 283px); height: auto; margin-bottom: 1.25rem; }
.site-footer strong { color: var(--paper); }
.site-footer h2 { font-size: 1.3rem; color: var(--paper); margin-bottom: 0.8rem; letter-spacing: 0.03em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.site-footer__legal { margin-top: 3rem; padding-block: 1.25rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: #a8adb5; }
.site-footer__legal p { margin: 0; }