/* 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: a DSA player cut out and bursting through the headline */
.cut-hero { position: relative; overflow: hidden; background: var(--sideline); color: var(--kit-black); --fs: clamp(5.5rem, 12.6vw, 12.5rem); }
.cut-hero::before, .cut-hero::after { content: ""; position: absolute; width: 22rem; height: 16rem; background-image: radial-gradient(rgba(0,0,0,.16) 1.4px, transparent 1.6px); background-size: 16px 16px; pointer-events: none; }
.cut-hero::before { left: -2rem; bottom: -2rem; -webkit-mask-image: radial-gradient(circle at 0 100%, #000 30%, transparent 75%); mask-image: radial-gradient(circle at 0 100%, #000 30%, transparent 75%); }
.cut-hero::after { right: -2rem; top: -2rem; -webkit-mask-image: radial-gradient(circle at 100% 0, #000 30%, transparent 75%); mask-image: radial-gradient(circle at 100% 0, #000 30%, transparent 75%); }
.cut-stage { position: relative; min-height: clamp(40rem, calc(100vh - 88px), 54rem); }
.cut-title { margin: 0; font-family: var(--font-anton); font-weight: 900; text-transform: uppercase; font-size: var(--fs); line-height: .8; letter-spacing: -.01em; }
.cut-title span { position: absolute; z-index: 1; white-space: nowrap; }
.cut-l1 { left: clamp(1.25rem, 3vw, 2.5rem); top: 7%; }
.cut-l2 { right: clamp(1.25rem, 3vw, 2.5rem); top: 43%; }
.cut-title .cut-l2 { z-index: 4; color: #d6a100; -webkit-text-stroke: 2px var(--kit-black); paint-order: stroke fill; }
@media (max-width: 1023px) { .cut-title .cut-l2 { -webkit-text-stroke-width: 1.5px; } }
.cut-copy { position: absolute; z-index: 4; left: clamp(1.25rem, 3vw, 2.5rem); top: calc(7% + var(--fs) * .8 + 1.75rem); max-width: 23rem; }
.cut-copy p { margin: 0; font-size: 1.1rem; line-height: 1.55; color: #222; }
.cut-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.cut-hero .btn-primary { background: var(--kit-black); color: var(--chalk); }
.cut-hero .btn-primary:hover { background: #2a2a2a; }
.btn-line-cut { display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.4rem; border-radius: 4px; border: 2px solid var(--kit-black); font-weight: 700; color: var(--kit-black); }
.btn-line-cut:hover { background: var(--kit-black); color: var(--chalk); }

.cut-figure { position: absolute; z-index: 3; left: 52%; bottom: 0; height: 96%; aspect-ratio: 947 / 1275; translate: -50% 0; pointer-events: none; }
.cut-player { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 30px 30px rgba(0,0,0,.18)); translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 8px); animation: cut-rise 1s .15s cubic-bezier(.2,.8,.2,1) both; }
.cut-side { position: absolute; z-index: 1; bottom: 0; width: auto; filter: drop-shadow(0 18px 18px rgba(0,0,0,.16)) saturate(.92); translate: calc(var(--px, 0) * 5px) calc(var(--py, 0) * 4px); animation: cut-rise 1s cubic-bezier(.2,.8,.2,1) both; }
.cut-side.s-keeper { height: 52%; right: 80%; animation-delay: .35s; }
.cut-side.s-throw { height: 76%; left: 70%; animation-delay: .45s; }
.cut-side.s-hs { height: 75%; left: 104%; animation-delay: .55s; }
.cut-ball { position: absolute; width: 15%; left: -4%; top: -3%; filter: drop-shadow(0 14px 14px rgba(0,0,0,.25)); translate: calc(var(--px, 0) * 26px) calc(var(--py, 0) * 20px); animation: cut-ball-in .9s .55s cubic-bezier(.3,1.4,.5,1) both, cut-float 3.2s 1.5s ease-in-out 3 alternate; }
.hatch { position: absolute; height: 1.6rem; width: 6.5rem; background: repeating-linear-gradient(-55deg, var(--kit-gold) 0 7px, transparent 7px 14px); translate: calc(var(--px, 0) * 18px) calc(var(--py, 0) * 14px); animation: cut-hatch .8s .5s cubic-bezier(.2,.8,.2,1) both; }
.hatch.h1 { right: 2%; top: 21%; }
.hatch.h2 { left: 4%; top: 52%; width: 4.5rem; }

.cut-news { position: absolute; z-index: 4; right: clamp(1.25rem, 3vw, 2.5rem); top: 5%; width: 16.5rem; display: block; background: var(--chalk); border-radius: 6px; padding: .5rem; box-shadow: 0 10px 30px -18px rgba(0,0,0,.5); color: var(--kit-black); }
.cut-news img { display: block; width: 100%; aspect-ratio: 5 / 2; object-fit: cover; border-radius: 4px; }
.cut-news .k { display: block; margin: .65rem .4rem 0; font-size: .85rem; font-weight: 700; color: var(--gold-ink); }
.cut-news .t { display: block; margin: .15rem .4rem .35rem; font-weight: 700; line-height: 1.3; }
.cut-news:hover .t { text-decoration: underline; text-decoration-color: var(--kit-gold); text-decoration-thickness: 3px; text-underline-offset: 3px; }

.cut-stats { position: absolute; z-index: 4; left: clamp(1.25rem, 3vw, 2.5rem); bottom: 2.25rem; margin: 0; display: grid; grid-template-columns: repeat(3, auto); background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(0,0,0,.08); border-radius: 6px; padding: 1.1rem .5rem; }
.cut-stats div { padding: 0 1.4rem; text-align: center; }
.cut-stats div + div { border-left: 2px solid var(--kit-gold); }
.cut-stats dd { margin: 0; font-family: var(--font-anton); font-weight: 900; font-size: 2.1rem; line-height: 1; }
.cut-stats dt { margin-top: .3rem; font-size: .85rem; color: #333; }
.cut-stats div { display: flex; flex-direction: column-reverse; }

.cut-note { position: absolute; z-index: 4; right: clamp(1.25rem, 3vw, 2.5rem); bottom: 2.5rem; width: 16rem; margin: 0; font-size: .95rem; color: #333; }
.cut-note a { font-weight: 700; color: var(--kit-black); text-decoration: underline; text-decoration-color: var(--kit-gold); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.cut-scroll { position: absolute; z-index: 4; left: 50%; bottom: 1.25rem; translate: -50% 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(0,0,0,.35); color: var(--kit-black); background: rgba(255,255,255,.5); }
.cut-scroll:hover { border-color: var(--kit-black); }

.cut-l1 { animation: cut-left .9s cubic-bezier(.2,.8,.2,1) both; }
.cut-l2 { animation: cut-right .9s .08s cubic-bezier(.2,.8,.2,1) both; }
.cut-copy, .cut-news, .cut-stats, .cut-note { animation: cut-fade .7s .6s ease both; }
@keyframes cut-left { from { opacity: 0; transform: translateX(-6%); } }
@keyframes cut-right { from { opacity: 0; transform: translateX(6%); } }
@keyframes cut-rise { from { opacity: 0; transform: translateY(8%) scale(.97); } }
@keyframes cut-ball-in { from { opacity: 0; transform: translate(-40%, -60%) rotate(-120deg) scale(.6); } }
@keyframes cut-float { to { transform: translateY(-14%) rotate(14deg); } }
@keyframes cut-hatch { from { opacity: 0; transform: translateX(-30%); } }
@keyframes cut-fade { from { opacity: 0; transform: translateY(10px); } }

.cut-note { display: none; }
@media (max-width: 1279px) { .cut-news { display: none; } }
@media (max-width: 1023px) {
  .cut-hero { --fs: clamp(4.4rem, 21vw, 8rem); }
  .cut-stage { min-height: 0; display: flex; flex-direction: column; padding-top: 2.25rem; padding-bottom: 2rem; }
  .cut-title span { position: relative; display: block; left: auto; right: auto; top: auto; }
  .cut-l1 { align-self: flex-start; }
  .cut-title { display: flex; flex-direction: column; }
  .cut-l2 { align-self: flex-end; text-align: right; }
  .cut-figure { position: relative; left: auto; bottom: auto; translate: none; height: min(48vh, 24rem); align-self: center; margin-top: calc(var(--fs) * -.35); order: 2; }
  .cut-title { order: 1; }
  .cut-copy { position: relative; left: auto; top: auto; order: 3; margin-top: 1.5rem; max-width: none; }
  .cut-stats { position: relative; left: auto; bottom: auto; order: 4; margin-top: 1.75rem; align-self: flex-start; }
  .cut-news, .cut-scroll { display: none; }
  .cut-ball { display: none; }
  .cut-side.s-hs { display: none; }
}
@media (max-width: 420px) {
  .cut-stats div { padding: 0 .8rem; }
  .cut-stats dd { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cut-l1, .cut-l2, .cut-player, .cut-side, .cut-ball, .hatch, .cut-copy, .cut-news, .cut-stats, .cut-note { animation: 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; }

/* ---------- Homepage dark mode ---------- */
.home-dark { --d1: #0e0f0e; --d2: #161716; --d3: #1f201f; --d-line: rgba(255,255,255,.12); --d-text: rgba(255,255,255,.78); background: var(--d1); }
/* hero */
.home-dark .cut-hero { background: var(--d2); color: var(--chalk); }
.home-dark .cut-hero::before, .home-dark .cut-hero::after { background-image: radial-gradient(rgba(255,255,255,.14) 1.4px, transparent 1.6px); }
.home-dark .cut-l1 { color: var(--chalk); }
.home-dark .cut-copy p { color: var(--d-text); }
.home-dark .cut-hero .btn-primary { background: var(--kit-gold); color: var(--kit-black); }
.home-dark .cut-hero .btn-primary:hover { background: #ffcb2e; }
.home-dark .btn-line-cut { border-color: rgba(255,255,255,.6); color: var(--chalk); }
.home-dark .btn-line-cut:hover { border-color: var(--chalk); background: rgba(255,255,255,.08); color: var(--chalk); }
.home-dark .cut-stats { background: rgba(255,255,255,.06); border-color: var(--d-line); }
.home-dark .cut-stats dt { color: rgba(255,255,255,.65); }
.home-dark .cut-news { background: var(--d3); color: var(--chalk); box-shadow: 0 14px 34px -18px rgba(0,0,0,.9); }
.home-dark .cut-news .k { color: var(--kit-gold); }
.home-dark .cut-scroll { border-color: rgba(255,255,255,.35); color: var(--chalk); background: rgba(0,0,0,.3); }
.home-dark .cut-player, .home-dark .cut-side { filter: drop-shadow(0 26px 30px rgba(0,0,0,.55)); }
/* light sections go dark, alternating tones */
.home-dark main > section.bg-white:not(.keep-light) { background: var(--d1); color: var(--chalk); }
.home-dark main > section.bg-sideline { background: var(--d2); color: var(--chalk); }
.home-dark main > section.bg-ink-900 { background: var(--d3); }
.home-dark .home-head h2, .home-dark .pathway h3, .home-dark .news-lead h3, .home-dark .news-list h3 { color: var(--chalk); }
.home-dark .home-head p, .home-dark .pathway p, .home-dark .news-lead p, .home-dark .news-list p { color: var(--d-text); }
.home-dark .pathway li, .home-dark .news-list a { border-color: var(--d-line); }
.home-dark .pathway .level { color: var(--kit-gold); }
.home-dark .pathway .badge { box-shadow: 0 0 0 6px var(--d1); border-color: var(--kit-gold); }
.home-dark .text-link { color: var(--chalk); }
.home-dark .text-link:hover { text-decoration-color: var(--chalk); }
.home-dark main .bg-white:not(.keep-light) .btn-dark, .home-dark main .bg-white:not(.keep-light) .btn-outline { background: transparent; color: var(--chalk); border: 2px solid rgba(255,255,255,.6); }
.home-dark main .bg-white:not(.keep-light) .btn-dark:hover { border-color: var(--chalk); background: rgba(255,255,255,.08); }
.home-dark main .bg-white:not(.keep-light) .eyebrow { color: var(--kit-gold); }
.home-dark .keep-light { color: var(--kit-black); }
.home-dark .keep-light .home-head h2 { color: var(--kit-black); }
.home-dark .keep-light .home-head p { color: #3a3a3a; }