/* DSA theme: the club's black-and-gold kit, chalked onto a pitch. Loaded after main.css. */
:root {
  --kit-black: #000000;
  --kit-panel: #161616;
  --kit-gold: #f2b705;
  --gold-ink: #7d5a00;
  --chalk: #ffffff;
  --sideline: #eff1ec;
  --line: #d8dbd3;
  --font-anton: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-inter: "Atkinson Hyperlegible", system-ui, sans-serif;
}

html { font-size: 106.25%; } /* 17px base */
body { font-family: var(--font-inter); line-height: 1.6; color: var(--kit-black); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--kit-gold); outline-offset: 3px; }

/* Type: condensed kit lettering for display, hyperlegible text for parents reading fees and schedules */
.font-display { font-family: var(--font-anton); font-weight: 800; letter-spacing: .005em; }
h1.font-display, h2.font-display { font-weight: 900; line-height: .92; }
.uppercase:not(.font-display) { text-transform: none; }
.tracking-wide:not(.font-display), .tracking-widest:not(.font-display),
.tracking-\[0\.3em\]:not(.font-display) { letter-spacing: 0; }

/* Palette remap of the compiled utilities */
.bg-ink-900 { background-color: var(--kit-black); }
.bg-ink-800 { background-color: var(--kit-panel); }
.bg-ink-700 { background-color: #232323; }
.text-ink-900 { color: var(--kit-black); }
.border-ink-900 { border-color: var(--kit-black); }
.bg-gold-400 { background-color: var(--kit-gold); }
.text-gold-400 { color: var(--kit-gold); }
.bg-gold-50 { background-color: var(--sideline); }
.bg-gold-100 { background-color: #fbe6a6; }
.text-gold-600, .text-gold-700, .hover\:text-gold-600:hover { color: var(--gold-ink); }
.border-black\/10 { border-color: var(--line); }

/* Labels: sentence case, no tracking, readable size */
.eyebrow { text-transform: none; letter-spacing: 0; font-size: .9375rem; line-height: 1.4; font-weight: 700; color: var(--kit-gold); }
.bg-white .eyebrow, .bg-gold-50 .eyebrow, .bg-sideline .eyebrow { color: var(--gold-ink); }

/* Buttons: squared kit tags, not pills */
.btn-primary, .btn-dark, .btn-outline { text-transform: none; letter-spacing: 0; border-radius: 4px; font-size: 1rem; font-weight: 700; padding: .8rem 1.4rem; }
.btn-primary { background-color: var(--kit-gold); color: var(--kit-black); }
.btn-primary:hover { background-color: #ffcb2e; box-shadow: none; }
.btn-dark { background-color: var(--kit-black); }
.btn-dark:hover { background-color: #2a2a2a; }
.btn-outline { border-color: rgba(255,255,255,.55); }
.btn-outline:hover { border-color: var(--chalk); color: var(--chalk); background: rgba(255,255,255,.08); }
.bg-white .btn-outline, .bg-sideline .btn-outline { color: var(--kit-black); border-color: var(--kit-black); }
.bg-white .btn-outline:hover, .bg-sideline .btn-outline:hover { background: var(--kit-black); color: var(--chalk); }

/* Surfaces: one small radius, no floating shadows, no hover lift */
.rounded-2xl, .rounded-xl { border-radius: 4px; }
.shadow-card, .hover\:shadow-glow:hover { box-shadow: none; }
.hover\:-translate-y-1\.5:hover { transform: none; }

/* Header and nav */
#site-header { background: var(--kit-black); border-bottom: 3px solid var(--kit-gold); }
#site-header nav a { font-family: var(--font-anton); font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; padding-left: .45rem; padding-right: .45rem; color: rgba(255,255,255,.88); }
#site-header nav a:hover { color: var(--kit-gold); }
#site-header nav [data-dropdown-panel] a { font-family: var(--font-inter); font-size: .95rem; font-weight: 700; }
@media (min-width:1280px) and (max-width:1439px) {
  #site-header nav a { font-size: 1rem; padding-left: .35rem; padding-right: .35rem; }
}
#site-header .btn-primary { padding: .6rem 1.1rem; font-size: .95rem; }

/* Interior page headers: halfway line and centre circle chalked off the right edge */
main > section:first-child.bg-ink-900 {
  background-color: var(--kit-black);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='3'%3E%3Ccircle cx='300' cy='300' r='210'/%3E%3Cline x1='300' y1='-400' x2='300' y2='1000'/%3E%3Ccircle cx='300' cy='300' r='6' fill='%23ffffff' fill-opacity='.16' stroke='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: auto 150%;
  background-position: right -14rem center;
  border-bottom: 6px solid var(--kit-gold);
}
@media (max-width: 767px) {
  main > section:first-child.bg-ink-900 { background-position: right -20rem center; }
}

/* Footer */
footer { border-top: 6px solid var(--kit-gold); }

/* ---------- Homepage ---------- */
.bg-sideline { background-color: var(--sideline); }

/* Homepage hero: tilted film strips of club photos behind the club name */
.strips-hero { position: relative; overflow: hidden; display: grid; place-items: center; min-height: min(90vh, 52rem); background: var(--kit-black); color: var(--chalk); text-align: center; }
.strip-field { position: absolute; inset: -20% -10%; display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; transform: rotate(-7deg); }
.strip { display: flex; gap: 1.25rem; width: max-content; animation: strip-left 60s linear infinite; }
.strip.rev { animation-name: strip-right; }
.strip img { width: clamp(14rem, 24vw, 22rem); aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }
.strips-hero.is-paused .strip { animation-play-state: paused; }
@keyframes strip-left { to { transform: translateX(-50%); } }
@keyframes strip-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.strips-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.25) 100%); }
.strips-center { position: relative; z-index: 2; padding: 5rem 1.25rem; }
.strips-hero h1 { margin: 0; font-family: var(--font-anton); font-weight: 900; text-transform: uppercase; font-size: clamp(4.25rem, 13vw, 11rem); line-height: .82; }
.strips-hero p { max-width: 32rem; margin: 1.5rem auto 2rem; font-size: 1.2rem; line-height: 1.55; color: rgba(255,255,255,.9); }
.strips-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .875rem; }
.strips-pause { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: rgba(0,0,0,.25); color: var(--chalk); cursor: pointer; }
.strips-pause:hover { border-color: var(--chalk); }
.strips-pause svg { fill: currentColor; }
.strips-pause .i-play, .strips-hero.is-paused .strips-pause .i-pause { display: none; }
.strips-hero.is-paused .strips-pause .i-play { display: inline; }
@media (prefers-reduced-motion: reduce) {
  .strip { animation: none; }
  .strips-pause { display: none; }
}

/* Section headings on the homepage */
.home-head { max-width: 40rem; }
.home-head h2 { font-family: var(--font-anton); font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 5.2vw, 4rem); line-height: .92; margin: 0; }
.home-head p { margin-top: 1rem; font-size: 1.125rem; color: #3a3a3a; max-width: 36rem; }
.text-link { font-weight: 700; color: var(--kit-black); text-decoration: underline; text-decoration-color: var(--kit-gold); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.text-link:hover { text-decoration-color: var(--kit-black); }
.on-dark .text-link { color: var(--chalk); }
.on-dark .text-link:hover { text-decoration-color: var(--chalk); }

/* Program pathway: a real sequence, Recreation to Premier */
.pathway { margin-top: 3.5rem; list-style: none; padding: 0; position: relative; }
.pathway::before { content: ""; position: absolute; left: 2.75rem; top: 2.75rem; bottom: 2.75rem; width: 3px; background: var(--kit-gold); }
.pathway li { position: relative; display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.5rem; align-items: center; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.pathway li:last-child { border-bottom: 1px solid var(--line); }
.pathway .badge { position: relative; z-index: 1; width: 5.5rem; height: 5.5rem; border-radius: 50%; background: var(--chalk); border: 3px solid var(--kit-black); display: grid; place-items: center; box-shadow: 0 0 0 6px var(--chalk); }
.pathway .badge img { width: 72%; height: 72%; object-fit: contain; }
.pathway .row { display: grid; gap: .35rem 2rem; align-items: baseline; }
@media (min-width: 900px) { .pathway .row { grid-template-columns: 13rem 1fr auto; } }
.pathway h3 { font-family: var(--font-anton); font-weight: 900; text-transform: uppercase; font-size: 2.1rem; line-height: 1; margin: 0; }
.pathway .level { display: block; font-size: .95rem; font-weight: 700; color: var(--gold-ink); margin-top: .3rem; font-family: var(--font-inter); text-transform: none; }
.pathway p { margin: 0; color: #333; max-width: 34rem; }

/* News: one lead story, the rest as a list */
.news-grid { margin-top: 3rem; display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .news-grid { grid-template-columns: 1.25fr 1fr; gap: 3.5rem; } }
.news-lead img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; background: #ddd; }
.news-lead h3 { font-family: var(--font-anton); font-weight: 900; text-transform: uppercase; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: .95; margin: 1.25rem 0 0; }
.news-lead p { margin: .75rem 0 0; color: #333; max-width: 36rem; }
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list a { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.1rem; align-items: center; padding: 1.1rem 0; border-top: 1px solid var(--line); color: inherit; }
.news-list li:first-child a { border-top: 0; padding-top: 0; }
.news-list img { width: 6.5rem; height: 5rem; object-fit: cover; border-radius: 4px; background: #ddd; }
.news-list h3 { font-family: var(--font-anton); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; line-height: 1; margin: 0; }
.news-list p { margin: .3rem 0 0; font-size: .95rem; color: #444; }
.news-lead a:hover h3, .news-list a:hover h3 { text-decoration: underline; text-decoration-color: var(--kit-gold); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* Club in numbers */
.numbers { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.5rem 2rem; }
@media (min-width: 1024px) { .numbers { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.numbers div { border-top: 3px solid var(--kit-gold); padding-top: 1rem; }
.numbers strong { display: block; font-family: var(--font-anton); font-weight: 900; font-size: clamp(3.2rem, 6vw, 4.75rem); line-height: .9; color: var(--chalk); }
.numbers span { display: block; margin-top: .5rem; color: rgba(255,255,255,.72); }

.staff-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }

/* Interior page titles: larger, kit lettering */
main > section:first-child h1.font-display, main > section:first-child h2.font-display { font-size: clamp(3.2rem, 7vw, 5.75rem); line-height: .88; }
main > section:first-child .eyebrow { font-size: 1rem; }

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