/* ============================================================
   Patriot Athletics — additions to the school site's version 1
   design (styles.css). Everything here uses its tokens: navy,
   crimson and gold, Lora over Lato, square corners.
   ============================================================ */

/* ---------- Top bar ---------- */
.topbar__title {
  display: inline-flex;
  align-items: center;
  color: var(--gold-lit);
}

/* ---------- Season menus in the masthead ---------- */
.nav__item { position: relative; }
.nav__menu {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-top: var(--rule) solid var(--crimson);
  box-shadow: var(--shadow-md);
}
.nav__menu a {
  display: block;
  padding: var(--space-2) var(--space-5);
  font: 700 var(--t-small)/1.3 var(--font-sans);
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.nav__menu a:hover, .nav__menu a[aria-current="page"] { background: var(--navy-soft); color: var(--crimson); }

@media (min-width: 1024px) {
  .nav__menu {
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--space-5));
    min-width: 240px;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .nav__item:hover > .nav__menu,
  .nav__item:focus-within > .nav__menu { opacity: 1; visibility: visible; transform: none; }
}
/* On phones the open menu lists every team under its season. */
@media (max-width: 1023px) {
  .nav__menu { border: 0; box-shadow: none; background: transparent; padding: 0 0 var(--space-3) var(--space-4); }
  .nav__menu li { border-top: 0 !important; }
  .nav__menu a { padding: var(--space-2) 0; font-size: var(--t-body); font-weight: 400; }
}

/* ---------- Score strip ---------- */
.strip {
  background: var(--navy);
  color: var(--on-dark);
  border-bottom: var(--rule) solid var(--gold);
  --focus: var(--focus-on-dark);
}
.strip__track {
  display: flex;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) transparent;
  max-width: var(--container-wide);
  margin: 0 auto;
}
.strip__item {
  flex: 0 0 auto;
  display: grid;
  gap: 2px;
  min-width: 170px;
  padding: var(--space-3) var(--space-4);
  border-right: var(--hairline) solid var(--line-on-dark);
  color: var(--on-dark);
  text-decoration: none;
  font: 400 var(--t-meta)/1.3 var(--font-sans);
}
.strip__item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.strip__when { font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: .6875rem; color: var(--gold-lit); }
.strip__team { font-weight: 700; color: #fff; }
.strip__vs { color: var(--on-dark-muted); }
.strip__home, .strip__result {
  justify-self: start;
  font-weight: 900;
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.strip__home { color: var(--gold-lit); }
.strip__result--W { color: #7fd69a; }
.strip__result--L { color: #f2a3b1; }
.strip__all {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  font: 900 var(--t-meta)/1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-lit);
  text-decoration: none;
  white-space: nowrap;
}
.strip__all:hover { color: #fff; }

/* ---------- Home hero ---------- */
.hero--athletics { min-height: 0; background: var(--navy-deep); }
.hero--athletics .hero__media { overflow: hidden; }
.hero__mark {
  position: absolute;
  right: -60px;
  bottom: -90px;
  width: min(520px, 70vw);
  height: auto;
  opacity: .07;
  filter: grayscale(1) brightness(3);
}
.hero__inner--split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .hero__inner--split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

.nexthome {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  background: rgba(255, 255, 255, .06);
  border: var(--hairline) solid var(--line-on-dark);
  border-top: var(--rule) solid var(--gold);
  color: var(--on-dark);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.nexthome:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nexthome__label { font: 900 var(--t-meta)/1.2 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lit); }
.nexthome__team { font: 600 var(--t-title-2)/1.15 var(--font-serif); color: #fff; }
.nexthome__vs { font: 700 var(--t-lead)/1.3 var(--font-sans); }
.nexthome__when, .nexthome__where { color: var(--on-dark-muted); font-size: var(--t-small); }

/* ---------- Section head with actions on the right ---------- */
.section-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--head-gap);
}
.section-bar .heading { margin-bottom: 0; }

.empty-note {
  padding: var(--space-5);
  background: var(--white);
  border: var(--hairline) dashed var(--line-strong);
  color: var(--ink-muted);
  max-width: none;
}

/* ---------- Game lists ---------- */
.days { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.day__label {
  margin-bottom: var(--space-2);
  font: 900 var(--t-meta)/1.3 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--crimson);
}
.games { list-style: none; margin: 0; padding: 0; border-top: var(--rule) solid var(--navy); background: var(--white); }
.game {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border-bottom: var(--hairline) solid var(--line);
  border-inline: var(--hairline) solid var(--line);
}
.game--off .game__matchup { text-decoration: line-through; color: var(--ink-faint); }
.game__main { display: grid; gap: 4px; min-width: 0; }
.game__team {
  font: 900 var(--t-meta)/1.3 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  text-decoration: none;
}
a.game__team:hover { color: var(--crimson); text-decoration: underline; }
.game__matchup { font: 600 var(--t-title-3)/1.25 var(--font-serif); color: var(--navy); overflow-wrap: anywhere; }
.game__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.game__where { font-size: var(--t-small); color: var(--ink-muted); overflow-wrap: anywhere; }
a.game__where { color: var(--navy); }
.game__side { display: grid; justify-items: end; gap: 2px; text-align: right; }
.game__time { font: 700 var(--t-lead)/1.2 var(--font-sans); color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.game__date { font-size: var(--t-meta); color: var(--ink-muted); white-space: nowrap; }
.game__status { white-space: nowrap; font: 900 var(--t-meta)/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.game__status--off { color: var(--crimson); }
.game__score {
  display: inline-block;
  padding: 4px 10px;
  font: 900 var(--t-small)/1.2 var(--font-sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--navy-soft);
  color: var(--navy);
}
.game__score--W { background: var(--success); color: #fff; }
.game__score--L { background: var(--cream); color: var(--ink); border: var(--hairline) solid var(--line-strong); }

.tag {
  display: inline-block;
  padding: 2px 8px;
  font: 900 .6875rem/1.4 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  border: var(--hairline) solid var(--line-strong);
  color: var(--ink-muted);
}
.tag--home { background: var(--gold); border-color: var(--gold); color: var(--ink-on-gold); }

.sched { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
.sched__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--t-title-2);
}
.sched__title::after { content: ""; flex: 1; height: var(--hairline); background: var(--line); }

/* ---------- Team cards ---------- */
.teams { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .teams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .teams { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.team {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-top: var(--rule) solid var(--accent);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.team:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: inherit; }
.team__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.team__name { font: 600 var(--t-title-3)/1.2 var(--font-serif); color: var(--navy); }
.team__record { font: 900 var(--t-small)/1 var(--font-sans); color: var(--crimson); font-variant-numeric: tabular-nums; }
.team__next { display: grid; gap: 2px; font-size: var(--t-small); color: var(--ink-muted); }
.team__next-label { font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: .6875rem; color: var(--accent-ink); }
.team__next-vs { font-weight: 700; color: var(--ink); }
.team__next--none { font-style: italic; }

/* ---------- Results list (home) ---------- */
.results-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--rule) solid var(--navy); background: var(--white); }
.results-list li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--line);
  border-top: 0;
}
.results-list .game__score { justify-self: start; }

/* ---------- Quick links ---------- */
.quick { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .quick { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.quick__link {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-5);
  border: var(--hairline) solid var(--line-on-dark);
  border-top: var(--rule) solid var(--gold);
  color: var(--on-dark);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.quick__link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.quick__link strong { font: 600 var(--t-title-3)/1.2 var(--font-serif); color: #fff; }
.quick__link span { font-size: var(--t-small); color: var(--on-dark-muted); }

/* ---------- Team page ---------- */
.facts {
  display: grid;
  gap: var(--space-4) var(--space-7);
  margin: var(--space-6) 0 0;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .facts { grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 1fr); } }
.facts dt { font: 900 var(--t-meta)/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.facts dd { margin: 4px 0 0; color: var(--on-dark); font-weight: 700; }

.tabs {
  position: sticky;
  top: 66px;
  z-index: 50;
  background: var(--white);
  border-bottom: var(--hairline) solid var(--line);
}
.tabs__inner { display: flex; gap: var(--space-6); overflow-x: auto; scrollbar-width: none; }
.tabs__inner::-webkit-scrollbar { display: none; }
.tabs a {
  flex: none;
  padding-block: var(--space-4);
  font: 900 var(--t-meta)/1 var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border-bottom: var(--rule) solid transparent;
}
.tabs a:hover { color: var(--crimson); border-bottom-color: var(--gold); }

.staff { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.staff li { display: grid; gap: 2px; padding: var(--space-4) var(--space-5); background: var(--white); border: var(--hairline) solid var(--line); border-left: var(--rule) solid var(--gold); }
.staff strong { font: 600 var(--t-title-3)/1.2 var(--font-serif); color: var(--navy); }
.staff span { font-size: var(--t-small); color: var(--ink-muted); }

/* ---------- Schedule filter ---------- */
.filter { display: flex; align-items: center; gap: var(--space-3); }
.filter__label { font: 900 var(--t-meta)/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.filter .input { min-width: 240px; max-width: 100%; }

/* ---------- Footer ---------- */
.footer__leagues {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
  padding-block: var(--space-5);
  border-top: var(--hairline) solid var(--line-on-dark);
  font: 900 var(--t-small)/1 var(--font-sans);
  letter-spacing: .14em;
  color: var(--on-dark);
}

@media (max-width: 560px) {
  .game { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .game__side { justify-items: start; text-align: left; grid-auto-flow: column; gap: var(--space-3); align-items: baseline; }
  .results-list li { grid-template-columns: auto minmax(0, 1fr); }
  .results-list li .meta { grid-column: 2; }
}

/* ---------- Menus: nested links (Registration information) ---------- */
.nav__sub { list-style: none; margin: 0; padding: 0 0 var(--space-2) var(--space-4); }
.nav__sub a { font-weight: 400 !important; padding-block: 4px !important; }
@media (min-width: 1024px) {
  .nav__links { gap: clamp(var(--space-3), 1.3vw, var(--space-5)); }
  .nav__item:last-child > .nav__menu { left: auto; right: calc(-1 * var(--space-5)); }
}

/* ---------- Content pages ---------- */
.attr-cloud { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.attr-cloud li {
  padding: 4px 12px;
  background: var(--white);
  border: var(--hairline) solid var(--line);
  font-size: var(--t-small);
  color: var(--navy);
}

.pledge { margin: 0; padding: 0; list-style: none; counter-reset: pledge; display: grid; gap: var(--space-4); max-width: 78ch; }
.pledge li {
  counter-increment: pledge;
  position: relative;
  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-7) + var(--space-3));
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-left: var(--rule) solid var(--crimson);
  font-size: var(--t-lead);
  line-height: 1.55;
}
.pledge li::before {
  content: counter(pledge);
  position: absolute;
  left: var(--space-5);
  top: var(--space-4);
  font: 600 var(--t-title-2)/1 var(--font-serif);
  color: var(--crimson);
}
.pledge strong { text-transform: uppercase; letter-spacing: .06em; color: var(--navy); }

.steps-list { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .steps-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.steps-list li {
  counter-increment: step;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-top: var(--rule) solid var(--gold);
}
.steps-list li::before { content: counter(step); font: 600 2rem/1 var(--font-serif); color: var(--crimson); }
.steps-list h3 { font-size: var(--t-title-3); }
.steps-list p { font-size: var(--t-small); color: var(--ink-muted); margin: 0; }

.staff--wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.titles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.titles li {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 2px var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--navy);
  color: var(--on-dark);
  border-left: var(--rule) solid var(--gold);
}
.titles__years { grid-row: span 2; align-self: center; font: 600 var(--t-title-2)/1 var(--font-serif); color: var(--gold-lit); }
.titles strong { font: 600 var(--t-title-3)/1.2 var(--font-serif); color: #fff; }
.titles span:last-child { color: var(--on-dark-muted); }

.highlights { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.highlights .minicard__title a { text-decoration: none; }
.highlights .list li { font-size: var(--t-small); }

.fans-motto { font: 600 var(--t-quote)/1.35 var(--font-serif); color: var(--navy); }
.fans-motto strong { color: var(--crimson); font-weight: 600; }

.footer__leagues a { color: var(--on-dark); text-decoration: none; }
.footer__leagues a:hover { color: var(--gold-lit); }

/* ---------- Rosters ---------- */
.roster + .roster { margin-top: var(--space-7); }
.roster__title { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--t-title-2); }
.roster__table { width: 100%; max-width: 760px; border-collapse: collapse; background: var(--white); border-top: var(--rule) solid var(--navy); font-variant-numeric: tabular-nums; }
.roster__table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font: 900 var(--t-meta)/1.2 var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: var(--hairline) solid var(--line-strong);
}
.roster__table td { padding: var(--space-3) var(--space-4); border-bottom: var(--hairline) solid var(--line); }
.roster__table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--cream) 55%, transparent); }
.roster__table td:first-child { font-weight: 700; color: var(--navy); }
.roster__num { width: 4.5em; font: 600 var(--t-lead)/1 var(--font-serif); }
.roster__captain { margin-left: var(--space-2); vertical-align: 2px; }
.table-scroll { overflow-x: auto; }

.team-blocks { display: grid; gap: var(--space-3); }
.team-block { background: var(--white); border: var(--hairline) solid var(--line); border-left: var(--rule) solid var(--gold); }
.team-block summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
}
.team-block summary::-webkit-details-marker { display: none; }
.team-block summary::after { content: "+"; margin-left: auto; font: 600 1.4rem/1 var(--font-serif); color: var(--crimson); }
.team-block[open] summary::after { content: "–"; }
.team-block__name { font: 600 var(--t-title-3)/1.2 var(--font-serif); color: var(--navy); }
.team-block > .staff, .team-block > .roster { padding: 0 var(--space-5) var(--space-5); }