/* ==========================================================================
   Atlantic City FC — design system
   One stylesheet for the whole site. Edit tokens here, everything follows.
   Sections: 1 tokens · 2 base · 3 layout · 4 header · 5 footer
             6 buttons · 7 section heads · 8 match cards · 9 player cards
             10 news · 11 tables · 12 forms · 13 sponsor wall · 14 utilities
   ========================================================================== */

/* 1 — TOKENS ============================================================== */

:root{
  /* Core palette. Everything on the site comes from these six. */
  --ink:        #0D1128;   /* navy — page ground on dark sections   */
  --ink-2:      #171C3A;   /* raised navy — cards on dark           */
  --plum:       #2A0A4A;   /* deep purple — headings, primary fills */
  --violet:     #534AB7;   /* bright purple — links, hover, accents */
  --gold:       #D4AF37;   /* gold — scores, rules, active state    */
  --bone:       #F7F4ED;   /* warm off-white — light page ground    */
  --paper:      #FFFFFF;   /* cards on light                        */

  /* Text */
  --text-dark:  #1A1526;   /* body text on light                    */
  --text-muted: #5A5266;   /* secondary text on light               */
  --text-light: #F2EEE6;   /* body text on dark                     */
  --text-dim:   rgba(242,238,230,.62);

  /* Hairlines */
  --line-light: rgba(42,10,74,.16);
  --line-dark:  rgba(242,238,230,.14);

  /* Type */
  --display: "Bebas Neue", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --body:    "Barlow Condensed", "Arial Narrow", Helvetica, Arial, sans-serif;

  --t--1: 15px;
  --t-0:  18px;
  --t-1:  21px;
  --t-2:  26px;
  --t-3:  clamp(30px, 3.4vw, 38px);
  --t-4:  clamp(38px, 5vw, 54px);
  --t-5:  clamp(52px, 8vw, 86px);

  /* Space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Shape */
  --r-sm: 4px;
  --r-card: 14px;          /* playing-card corner                   */
  --r-pill: 999px;

  --shadow-card: 0 18px 40px -22px rgba(13,17,40,.55);
  --shadow-lift: 0 26px 54px -24px rgba(13,17,40,.7);

  --wrap: 1180px;          /* max content width                     */
  --wrap-narrow: 760px;    /* reading width for articles            */
}

/* 2 — BASE =============================================================== */

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

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

body{
  margin:0;
  background:var(--bone);
  color:var(--text-dark);
  font-family:var(--body);
  font-size:var(--t-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:.95;
  letter-spacing:.01em;
  color:var(--plum);
  margin:0 0 var(--s-4);
}
h1{font-size:var(--t-4);}
h2{font-size:var(--t-3);}
h3{font-size:var(--t-2);}
h4{font-size:var(--t-1);}

p{margin:0 0 var(--s-4);max-width:72ch;}

a{color:var(--violet);text-decoration-thickness:1px;text-underline-offset:2px;}
a:hover{color:var(--plum);}

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

hr{border:0;height:1px;background:var(--line-light);margin:var(--s-7) 0;}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--gold);color:var(--ink);
  padding:var(--s-3) var(--s-5);font-family:var(--display);
}
.skip-link:focus{left:0;}

/* 3 — LAYOUT ============================================================= */

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-5);}
.wrap-narrow{max-width:var(--wrap-narrow);}

.section{padding-block:var(--s-8);}
.section-tight{padding-block:var(--s-7);}

/* Dark sections invert the text tokens so components adapt automatically. */
.section-dark{
  background:var(--ink);
  color:var(--text-light);
  --text-dark:var(--text-light);
  --text-muted:var(--text-dim);
  --line-light:var(--line-dark);
  --paper:var(--ink-2);
}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:var(--text-light);}
.section-dark a{color:var(--gold);}
.section-dark a:hover{color:var(--paper);}

.section-plum{background:var(--plum);color:var(--text-light);}

.grid{display:grid;gap:var(--s-5);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
}

/* 4 — HEADER ============================================================= */

.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--ink);
  border-bottom:1px solid var(--line-dark);
}
.site-header .wrap{
  display:flex;align-items:center;gap:var(--s-5);
  min-height:74px;
}

.site-header .logo{display:block;flex:0 0 auto;}
.site-header .logo img{width:210px;}

.nav{
  display:flex;align-items:center;gap:var(--s-5);
  margin-left:auto;
}
.nav a{
  font-family:var(--display);
  font-size:var(--t-1);
  letter-spacing:.045em;
  color:var(--text-light);
  text-decoration:none;
  padding-block:var(--s-2);
  border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--gold);}
.nav a[aria-current="page"]{border-bottom-color:var(--gold);color:var(--gold);}

.nav-cta{
  font-family:var(--display);
  font-size:var(--t-1);
  letter-spacing:.045em;
  text-decoration:none;
  color:var(--ink);
  background:var(--gold);
  padding:8px 18px 6px;
  border-radius:var(--r-sm);
}
.nav-cta:hover{background:var(--paper);color:var(--ink);}

.nav-toggle{
  display:none;margin-left:auto;
  background:none;border:1px solid var(--line-dark);border-radius:var(--r-sm);
  color:var(--text-light);font-family:var(--display);font-size:var(--t-1);
  letter-spacing:.05em;padding:7px 14px 5px;cursor:pointer;
}

@media (max-width:920px){
  .site-header .logo img{width:168px;}
  .nav-toggle{display:block;}
  .nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);
    border-bottom:1px solid var(--line-dark);
    padding:var(--s-3) var(--s-5) var(--s-5);
  }
  .nav.is-open{display:flex;}
  .nav a{padding-block:var(--s-3);border-bottom:1px solid var(--line-dark);}
  .nav a[aria-current="page"]{border-bottom-color:var(--gold);}
  .nav-cta{margin-top:var(--s-4);text-align:center;}
}

/* 5 — FOOTER ============================================================= */

.site-footer{background:var(--ink);color:var(--text-light);padding-block:var(--s-8) var(--s-6);}
.site-footer h4{color:var(--gold);font-size:var(--t-1);letter-spacing:.06em;margin-bottom:var(--s-3);}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:var(--s-2);}
.site-footer a{color:var(--text-dim);text-decoration:none;}
.site-footer a:hover{color:var(--gold);}

.footer-cols{
  display:grid;gap:var(--s-6);
  grid-template-columns:1.4fr repeat(3,1fr);
  padding-bottom:var(--s-7);
  border-bottom:1px solid var(--line-dark);
}
@media (max-width:820px){.footer-cols{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-cols{grid-template-columns:1fr;}}

.footer-brand img{width:230px;margin-bottom:var(--s-4);}

.footer-bottom{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);
  padding-top:var(--s-5);
}
.lockup{
  font-family:var(--display);font-size:var(--t-1);letter-spacing:.07em;
  color:var(--text-light);margin:0;
}
.lockup a{color:var(--text-light);text-decoration:none;}
.lockup a:hover{color:var(--gold);}
.lockup .spade{color:var(--gold);margin-inline:var(--s-3);}
.tagline{font-family:var(--display);letter-spacing:.14em;color:var(--gold);margin:0;}
.copyright{margin:0 0 0 auto;font-size:var(--t--1);color:rgba(242,238,230,.42);}

.socials{display:flex;gap:var(--s-4);list-style:none;margin:0 0 var(--s-4);padding:0;}
.socials a{color:var(--text-light);opacity:.7;}
.socials a:hover{opacity:1;color:var(--gold);}
.socials svg{width:20px;height:20px;fill:currentColor;display:block;}

/* 6 — BUTTONS ============================================================ */

.btn{
  display:inline-block;
  font-family:var(--display);
  font-size:var(--t-1);
  letter-spacing:.05em;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  padding:12px 26px 9px;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn-primary{background:var(--plum);color:var(--bone);}
.btn-primary:hover{background:var(--violet);color:var(--bone);}
.btn-gold{background:var(--gold);color:var(--ink);}
.btn-gold:hover{background:var(--plum);color:var(--bone);}
.btn-ghost{background:transparent;color:var(--plum);border-color:var(--line-light);}
.btn-ghost:hover{background:var(--plum);color:var(--bone);border-color:var(--plum);}
.section-dark .btn-ghost{color:var(--text-light);border-color:var(--line-dark);}
.section-dark .btn-ghost:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.btn-sm{font-size:var(--t-0);padding:8px 16px 6px;}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);}

/* 7 — SECTION HEADS ====================================================== */
/* The spade marks a section boundary. Used only here, never as decoration. */

.section-head{
  display:flex;align-items:baseline;gap:var(--s-4);
  margin-bottom:var(--s-6);
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--line-light);
}
.section-head h2{margin:0;}
.section-head h2::before{
  content:"\2660";
  color:var(--gold);
  font-size:.62em;
  margin-right:.4em;
  vertical-align:.06em;
}
.section-head .more{
  margin-left:auto;
  font-family:var(--display);
  font-size:var(--t-0);
  letter-spacing:.05em;
  text-decoration:none;
  white-space:nowrap;
}

/* 8 — MATCH CARDS ======================================================== */

.match{
  display:grid;
  grid-template-columns:120px 1fr auto;
  align-items:center;
  gap:var(--s-5);
  background:var(--paper);
  border:1px solid var(--line-light);
  border-radius:var(--r-card);
  padding:var(--s-4) var(--s-5);
  margin-bottom:var(--s-3);
}
.match-rail{
  font-family:var(--display);
  line-height:1.05;
  color:var(--plum);
  border-right:1px solid var(--line-light);
  padding-right:var(--s-4);
}
.section-dark .match-rail{color:var(--gold);}
.match-rail .day{font-size:var(--t-2);display:block;}
.match-rail .time{font-size:var(--t-0);color:var(--text-muted);letter-spacing:.04em;}

.match-teams{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;}
.match-teams .club{font-family:var(--display);font-size:var(--t-2);color:var(--text-dark);}
.match-teams .club.us{color:var(--plum);}
.section-dark .match-teams .club.us{color:var(--gold);}
.match-score{
  font-family:var(--display);
  font-size:var(--t-3);
  color:var(--plum);
  background:var(--bone);
  border-radius:var(--r-sm);
  padding:2px 12px 0;
  letter-spacing:.06em;
}
.section-dark .match-score{background:rgba(212,175,55,.14);color:var(--gold);}
.match-meta{
  display:block;width:100%;
  font-size:var(--t--1);
  color:var(--text-muted);
  letter-spacing:.02em;
}
.match-action{text-align:right;}

.result-chip{
  display:inline-block;
  font-family:var(--display);
  font-size:var(--t-0);
  line-height:1;
  padding:6px 10px 4px;
  border-radius:var(--r-sm);
  margin-right:var(--s-3);
}
.result-w{background:var(--gold);color:var(--ink);}
.result-d{background:var(--line-light);color:var(--text-dark);}
.result-l{background:transparent;color:var(--text-muted);border:1px solid var(--line-light);}

@media (max-width:760px){
  .match{grid-template-columns:1fr;gap:var(--s-3);}
  .match-rail{border-right:0;border-bottom:1px solid var(--line-light);padding:0 0 var(--s-3);}
  .match-action{text-align:left;}
}

/* 9 — PLAYER CARDS ======================================================= */
/* Squad grid. The number sits in the corner like a card pip. */

.player{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line-light);
  border-radius:var(--r-card);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  display:block;
  transition:box-shadow .2s ease,transform .2s ease;
}
.player:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px);}
.player img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--ink-2);}
.player-body{padding:var(--s-4);}
.player-name{font-family:var(--display);font-size:var(--t-2);color:var(--plum);line-height:1;margin:0;}
.section-dark .player-name{color:var(--text-light);}
.player-pos{font-size:var(--t--1);color:var(--text-muted);letter-spacing:.06em;margin:var(--s-1) 0 0;}
.player-no{
  position:absolute;top:var(--s-3);left:var(--s-3);
  font-family:var(--display);font-size:var(--t-2);line-height:1;
  color:var(--bone);background:var(--plum);
  padding:6px 10px 3px;border-radius:var(--r-sm);
}

/* Stat readout — used on player pages and club records. */
.statline{display:flex;flex-wrap:wrap;gap:var(--s-6);margin:var(--s-5) 0;}
.stat{min-width:90px;}
.stat .num{font-family:var(--display);font-size:var(--t-4);line-height:.9;color:var(--gold);display:block;}
.stat .label{font-size:var(--t--1);color:var(--text-muted);letter-spacing:.06em;}

/* 10 — NEWS ============================================================== */

.story{
  background:var(--paper);
  border:1px solid var(--line-light);
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.story img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--ink-2);}
.story-body{padding:var(--s-5);display:flex;flex-direction:column;flex:1;}
.story-date{font-size:var(--t--1);color:var(--text-muted);letter-spacing:.05em;margin:0 0 var(--s-2);}
.story h3{margin:0 0 var(--s-3);}
.story h3 a{color:var(--plum);text-decoration:none;}
.story h3 a:hover{color:var(--violet);}
.section-dark .story h3 a{color:var(--text-light);}
.story p{font-size:var(--t-0);color:var(--text-muted);margin-bottom:var(--s-4);}
.story .btn{margin-top:auto;align-self:flex-start;}

/* Long-form article body */
.article{max-width:var(--wrap-narrow);margin-inline:auto;}
.article h2{margin-top:var(--s-7);}
.article blockquote{
  margin:var(--s-6) 0;padding-left:var(--s-5);
  border-left:3px solid var(--gold);
  font-size:var(--t-1);color:var(--text-muted);
}

/* 11 — TABLES ============================================================ */

.table-scroll{overflow-x:auto;}
table.data{width:100%;border-collapse:collapse;font-size:var(--t-0);min-width:560px;}
table.data th{
  font-family:var(--display);font-weight:400;font-size:var(--t-0);
  letter-spacing:.06em;text-align:left;color:var(--plum);
  border-bottom:2px solid var(--gold);padding:var(--s-3);
}
.section-dark table.data th{color:var(--gold);}
table.data td{padding:var(--s-3);border-bottom:1px solid var(--line-light);}
table.data tbody tr.us{background:rgba(83,74,183,.07);}
table.data tbody tr.us td{font-weight:600;}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums;}

/* 12 — FORMS ============================================================= */

.field{margin-bottom:var(--s-4);max-width:520px;}
.field label{
  display:block;font-family:var(--display);font-size:var(--t-0);
  letter-spacing:.05em;color:var(--plum);margin-bottom:var(--s-1);
}
.section-dark .field label{color:var(--gold);}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:var(--t-0);
  color:var(--text-dark);background:var(--paper);
  border:1px solid var(--line-light);border-radius:var(--r-sm);
  padding:10px 12px;
}
.field textarea{min-height:140px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--violet);}
.field .hint{font-size:var(--t--1);color:var(--text-muted);margin:var(--s-1) 0 0;}

/* 13 — SPONSOR WALL ====================================================== */

.sponsor-wall{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s-6) var(--s-8);
}
.sponsor-wall a{display:block;opacity:.85;transition:opacity .18s ease;}
.sponsor-wall a:hover{opacity:1;}
.sponsor-wall img{max-height:54px;width:auto;}
.sponsor-wall.tier-2 img{max-height:38px;}
.sponsor-wall.on-dark img{filter:brightness(0) invert(1);opacity:.9;}

/* 14 — UTILITIES ========================================================= */

.eyebrow{
  font-family:var(--display);font-size:var(--t-0);
  letter-spacing:.12em;color:var(--gold);margin:0 0 var(--s-2);
}
.lede{font-size:var(--t-1);color:var(--text-muted);max-width:60ch;}
.center{text-align:center;}
.center p,.center .lede{margin-inline:auto;}
.muted{color:var(--text-muted);}
.stack > * + *{margin-top:var(--s-4);}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* Hero — dark band with the card motif behind it. */
.hero{
  position:relative;
  /* Hero is a dark surface, so it takes the same component overrides. */
  --text-dark:var(--text-light);
  --text-muted:var(--text-dim);
  --line-light:var(--line-dark);
  --paper:var(--ink-2);
  background:
    radial-gradient(ellipse 110% 90% at 50% 0%, var(--plum) 0%, #180733 48%, var(--ink) 100%);
  color:var(--text-light);
  padding-block:var(--s-9);
  overflow:hidden;
}
.hero::before{
  content:"\2660";
  position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  font-size:min(52vw,560px);line-height:1;
  color:rgba(212,175,55,.055);
  pointer-events:none;
}
.hero .wrap{position:relative;}
.hero h1{color:var(--text-light);font-size:var(--t-5);max-width:16ch;}
.hero .lede{color:var(--text-dim);}
.hero .btn-ghost{color:var(--text-light);border-color:var(--line-dark);}
.hero .btn-ghost:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.hero .section-head h2{color:var(--text-light);}

/* 15 — CONTROLS (season / filter toggles) ================================ */

.controls{
  display:flex;flex-wrap:wrap;gap:var(--s-6);
  padding-bottom:var(--s-5);margin-bottom:var(--s-5);
  border-bottom:1px solid var(--line-light);
}
.control-group{display:flex;align-items:center;gap:var(--s-3);}
.control-label{
  font-family:var(--display);font-size:var(--t-0);
  letter-spacing:.09em;color:var(--text-muted);
}
.btn[aria-pressed="true"]{
  background:var(--plum);color:var(--bone);border-color:var(--plum);
}
.section-dark .btn[aria-pressed="true"]{
  background:var(--gold);color:var(--ink);border-color:var(--gold);
}