/* ============================================================
   site.css — shared look for every page
   Every HTML page loads this file with: <link rel="stylesheet" href="site.css">
   A class only does something where the HTML uses that class name.
   To reuse a block on another page, copy the HTML that has the class.
   Do not copy these CSS rules onto the other page. They are already shared.
   Comments like this one do not change the look of the site.
   ============================================================ */

/* Colors and fonts live in theme.css. This line pulls that file in. Used by every page. */
@import "theme.css";

/* --- Base page. Used by every page. Do not copy this onto one page. --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: only light; background-color: #f7f3ea !important; }
body {
  margin: 0;
  background-color: #f7f3ea !important;
  color: #1a2333;
  color: var(--ink, #1a2333);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
}
@media (prefers-color-scheme: dark) {
  html, body { background-color: #f7f3ea !important; color-scheme: only light; }
}
img { max-width: 100%; height: auto; display: block; }
body { overflow-x: hidden; }
a { color: var(--navy); }
p { margin: 0 0 1rem; }

/* --- Top of every page: red/silver/blue stripe, then the dark header. --- */
.flag { height: 5px; background: linear-gradient(90deg, #b22234 0%, #e8edf2 48%, #1b3a6f 100%); }
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  color: #fff;
  background:
    radial-gradient(900px 220px at 18% 0%, rgba(178, 34, 52, 0.45), transparent 60%),
    radial-gradient(700px 180px at 88% 0%, rgba(27, 58, 111, 0.7), transparent 55%),
    linear-gradient(180deg, #10161f 0%, #1a2333 100%);
}

/* Logo, academy name, and phone number. The HTML class is "identity". Used in the header of every page. */
.identity {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
  padding: 8px 16px;
}
.identity img { height: 96px; width: auto; }
.identity .name { text-align: center; min-width: 0; }
.identity .name strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
}
.identity .champ {
  margin: 4px 0 0;
  color: var(--crimson);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(0.68rem, 1.4vw, 0.9rem);
}
.identity .sub {
  margin: 4px 0 0;
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(0.62rem, 1.3vw, 0.85rem);
}
.phone {
  color: var(--silver);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  font-size: 0.85rem;
}
.phone:hover { color: #fff; }

/* Main menu under the logo. "more" is the About dropdown. "burger" is the Menu button on a phone. */
.menu-bar {
  background: #243044;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  max-width: 72rem;
  margin: 0 auto;
  padding: 8px 16px;
  list-style: none;
}
.menu a, .menu summary {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  font-size: 0.86rem;
  cursor: pointer;
}
.menu a:hover, .menu a[aria-current="page"], .menu summary:hover, .menu summary[aria-current="page"] { color: var(--crimson); }
.more { position: relative; }
.more summary { list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more details > div { display: none; }
.more.is-open details > div {
  display: block;
  position: absolute;
  right: 0;
  z-index: 30;
  min-width: 14rem;
  margin-top: 8px;
  padding: 8px;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.more div a { display: block; padding: 8px; }
.burger { display: none; }

/* Small "Home / Page name" line under the menu. Class "crumbs". Not on the home page. */
.crumbs {
  max-width: 72rem;
  margin: 0 auto;
  padding: 10px 16px;
  color: var(--mute);
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.crumbs a { color: var(--navy); text-decoration: none; }

/* "wrap" keeps a section from stretching wider than the reading column. Used inside almost every section. */
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 16px; }

/* --- Top of the page content: small red label, big title, intro line, then the wide photo. Class "hero". --- */
.hero { padding: 28px 0 8px; }
.kicker {
  margin: 0;
  color: var(--crimson);
  font-family: var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
}
h1, h2, h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
h1 { margin: 8px 0; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 0.95; color: var(--navy); }
h2 { margin: 0 0 16px; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; color: var(--navy); }
.lede { color: var(--mute); font-size: 1.15rem; }
.hero.wrap > h1,
.hero.wrap > p,
.hero.wrap > .lede,
.hero.wrap > div {
  max-width: none !important;
  width: auto !important;
}
/* The hero photo breaks out of the column and runs edge to edge. */
.hero.wrap > img {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: auto;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Photos: hero (top banner), split (photo beside text), card (photo in a program box), frame (a boxed photo). */
.hero img, .split img, .card img, .frame img { width: 100%; object-fit: cover; border: 1px solid var(--line); }
.hero img { margin-top: 18px; aspect-ratio: 21 / 8; }
.split img, .card img, .frame img, figure img {
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(16, 22, 31, 0.16);
}

/* A normal content band. Class "section". */
.section { padding: 28px 0; }
.with-alerts { display: grid; gap: 32px; align-items: start; }
.alerts {
  padding: 0 0 0 16px;
  border-left: 3px solid var(--crimson);
  background: transparent;
  color: inherit;
}
.alerts h2 { color: var(--navy); }
.alerts p { color: inherit; }
.alerts a { color: var(--navy); }
.alerts strong { display: block; margin-bottom: 2px; }

/* Photo on one side, words on the other. Class "split".
   Add "match" when the photo should be the same height as the words beside it.
   Home page Champions block uses "split match". Add class "tall" on an image to show the whole photo. */
.split { display: grid; gap: 24px; }
.split img { aspect-ratio: 4 / 3; }
.split img.tall { aspect-ratio: auto; height: auto; object-fit: contain; }

/* A row of boxes. Class "cards".
   Add "three" for three boxes across on a wide screen. Their photos share one height and sit on the same bottom line.
   Add "two" for two across.
   "pillars" is the same lineup. The home page can use either "cards three" or "cards three pillars".
   To reuse it, put class="cards three" on that page's card group. */
.cards { display: grid; gap: 16px; align-items: stretch; }
.card { background: var(--card); border: 1px solid var(--line); }
.card div, .panel { padding: 20px; }
.card h3 { margin: 0; color: var(--gold); font-size: 1.25rem; }
.card p, .prose { color: var(--mute); }
.cards.two .card,
.cards.three .card,
.cards.pillars .card { display: flex; flex-direction: column; min-height: 100%; }
.cards.two .card > div,
.cards.three .card > div,
.cards.pillars .card > div { flex: 1 1 auto; }
.cards.two .card > img,
.cards.three .card > img,
.cards.pillars .card > img {
  display: block;
  width: 100%;
  height: auto;
  margin: auto 0 0;
  flex: 0 0 auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

/* Quote boxes. Class "reviews" around them, class "review" on each quote. */
.reviews { display: grid; gap: 16px; }
.review {
  margin: 0;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--crimson);
}
.review p { margin: 0 0 12px; color: var(--ink); }
.review footer {
  color: var(--mute);
  font-family: var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* A highlighted quote with a gold line. Class "pullquote". Used on the competition page. */
.pullquote {
  margin: 1.75rem 0 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border: 0;
  border-left: 2px solid var(--gold);
  background: transparent;
}
.pullquote p {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.pullquote footer {
  margin-top: 0.75rem;
  color: var(--gold);
  font-family: var(--display);
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Dark band with a button, usually at the bottom of the page content. Class "cta".
   When it sits inside "wrap", it runs edge to edge. */
.cta {
  margin: 0 0 28px;
  padding: 28px;
  background: #1a2333;
  color: #fff;
}
.wrap > .cta {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  padding: 36px max(16px, calc((100vw - 72rem) / 2));
}
.cta h2, .cta p { color: #fff; }
main > :last-child { margin-bottom: 0; }

/* Red button. Class "btn". Used in the dark band, the footer, and forms. */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--crimson);
  color: #fff;
  font-family: var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

/* --- Footer on every page: logo, page links, social links, newsletter, free tour. --- */
.site-footer {
  width: 100%;
  background: #10161f;
  color: #f7f3ea;
}
.site-footer .champ {
  margin: 0 0 8px;
  color: #c6a15a;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.foot {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 40px 32px;
  box-sizing: border-box;
}
.foot img.foot-logo { width: 220px; height: auto; margin: 0 0 12px; }
.foot .btn { margin-top: 8px; }
.foot .btn + .champ { margin-top: 18px; }
.site-footer a { color: #c6a15a; text-decoration: none; }
.site-footer .btn { color: #fff; }
.news { margin-top: 8px; }
.fine { border-top: 1px solid rgba(255, 255, 255, 0.15); padding: 12px 16px 20px; text-align: center; color: rgba(247, 243, 234, 0.75); font-size: 0.85rem; }

/* Class hours list. Class "hours". Used on the contact page. */
.hours { margin: 0; }
.hours div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 8px 0; }

/* Contact form and newsletter form. "hp" is a hidden spam field. "note" is the thank-you line after a form is sent. */
form { display: grid; gap: 12px; }
label { display: grid; gap: 4px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  color: var(--ink);
}
.hp { position: absolute; left: -9999px; }
.note { padding: 12px; background: #e7f0e4; color: #1d3b24; }
.age-filter { display: grid; gap: 12px; max-width: 16rem; margin-top: 14px; }
.cal-year { display: grid; grid-template-columns: 1fr; gap: 48px; }
.month { background: #fff; border: 1px solid #dadce0; padding: 8px 8px 0; scroll-margin-top: 9rem; }
.month > h3 { margin: 0 0 8px; padding: 4px 4px 0; background: transparent; color: #3c4043; text-align: left; font-family: "Literata", Georgia, serif; font-size: 1.7rem; font-weight: 500; letter-spacing: 0; }
.month table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.month th { padding: 6px 0; border: none; border-bottom: 1px solid #dadce0; background: #fff; color: #70757a; font-family: var(--display); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
.month td { height: auto; min-height: 7.5rem; vertical-align: top; border: 1px solid #e8eaed; padding: 4px; overflow: hidden; background: #fff; }
.dayhead { text-align: right; background: transparent; }
.num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.55rem; height: 1.55rem; padding: 0 4px; font-family: var(--display); font-size: 0.78rem; font-weight: 500; color: #3c4043; line-height: 1; }
.month td.out .num { color: #70757a; }
.month td.today .num { background: #1a73e8; color: #fff; border-radius: 999px; }
.daybody { min-height: 0; padding: 2px 0 0; background: transparent; }
.chip { display: block; margin-top: 3px; padding: 2px 6px; border-radius: 4px; font-size: 0.72rem; line-height: 1.25; text-align: left; overflow: hidden; }
.event-search { max-width: 28rem; margin-top: 14px; }
.event-search input { width: 100%; }
.click-note { margin: 10px 0 0; }
.month-jump { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; }
.month-jump a { font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; }
button.chip-title { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.chip-title { display: block; font-weight: 700; }
.chip-more { margin-top: 4px; }
.chip-row { display: block; }
.chip-row b { font-weight: 600; }
[data-search][hidden] { display: none; }
.chip.holiday { background: #fce8e6; color: #c5221f; }
.chip.event.tone-0 { background: #e8f0fe; color: #1967d2; }
.chip.event.tone-1 { background: #f3e8fd; color: #7627bb; }
.chip.event.tone-2 { background: #e6f4ea; color: #137333; }
.chip.event.tone-3 { background: #fef7e0; color: #b06000; }
.quarter-list { margin-top: 6px; }
.event { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.event h3 { margin: 0 0 4px; font-size: 1.05rem; }
.event .when { margin: 0 0 4px; color: var(--crimson); font-family: var(--display); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; }
.facts { display: grid; grid-template-columns: 6.5rem 1fr; gap: 4px 12px; margin: 8px 0 0; }
.facts dt { margin: 0; color: var(--gold); font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.facts dd { margin: 0; }

/* Wide screens: logo bigger, photo beside text, three cards across, footer in four columns.
   A fourth card in a three-card row stretches across the full width. That is the SP³ARC card on the home page. */
@media (min-width: 800px) {
  .identity img { height: 112px; }
  .split { grid-template-columns: 1fr 1fr; align-items: center; }
  .split.match { align-items: stretch; }
  .split.match > img {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .cards.three { grid-template-columns: repeat(3, 1fr); }
  .cards.three .card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .cards.two { grid-template-columns: 1fr 1fr; }
  .with-alerts { grid-template-columns: 1.5fr 0.75fr; }
  .reviews { grid-template-columns: 1fr 1fr; }
  .foot { grid-template-columns: 1.15fr 0.9fr 1.15fr 1fr; }
}

/* Phone screens: stacked logo, red phone button, Menu button instead of the full menu, shorter hero photo. */
@media (max-width: 799px) {
  .identity { grid-template-columns: 72px 1fr; }
  .identity img { height: 72px; width: 72px; object-fit: contain; }
  .phone {
    display: flex;
    grid-column: 1 / -1;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    color: #fff;
    background: var(--crimson);
  }
  .menu { display: none; }
  .menu.open { display: grid; }
  .menu a, .menu summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .burger {
    display: inline-flex;
    align-items: center;
    margin: 8px 16px;
    min-height: 44px;
    padding: 0 14px;
    color: #fff;
    background: transparent;
    border: 1px solid var(--silver);
    font-family: var(--display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .more.is-open details > div { position: static; margin-top: 0; border: 0; padding: 0 0 0 8px; background: transparent; }
  .hero img { aspect-ratio: 4 / 3; }
  h1 { font-size: 2.4rem; }
  input, select, textarea { font-size: 16px; }
}