/* ============================================================
   HATHERN FC — site theme
   Change the club colours in one place, right here:
   ============================================================ */
:root{
  --club:        #16161a;   /* primary — black            */
  --club-dark:   #0b0b0e;
  --accent:      #d61f2c;   /* accent — Hathern red       */
  --pitch:       #2e7d4f;   /* grass green, used sparingly */
  --paper:       #f7f6f2;
  --ink:         #1b2330;
  --muted:       #5b6575;
  --line:        #e3e1da;
  --radius:      10px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{
  font-family:'Barlow',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:var(--club);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

h1,h2,h3,.disp{
  font-family:'Barlow Condensed','Barlow',sans-serif;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.1;
}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
.topbar{
  background:var(--club-dark);
  color:#cfcfd6;
  font-size:.8rem;
  padding:6px 0;
}
.topbar .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.topbar a{color:#fff}

header.site{
  background:var(--club);
  color:#fff;
  border-bottom:4px solid var(--accent);
}
.brand{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;
}
.brand .crest{
  width:auto;height:60px;flex:none;
  align-self:center;
  margin:4px 0;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
@media(max-width:720px){
  .brand{padding:12px 20px}
  .brand .crest{height:54px}
}
.brand h1{font-size:1.7rem;color:#fff}
.brand small{
  display:block;font-family:'Barlow';font-weight:400;
  text-transform:none;letter-spacing:0;
  color:#b9b9bf;font-size:.8rem;
}

nav.main{background:var(--club);}
nav.main ul{
  list-style:none;display:flex;flex-wrap:wrap;
}
nav.main a{
  display:block;padding:12px 11px;font-size:1rem;
  color:#e3e3e8;font-family:'Barlow Condensed';
  font-weight:600;font-size:1.05rem;text-transform:uppercase;
  letter-spacing:.04em;border-bottom:4px solid transparent;
}
nav.main a:hover,nav.main a[aria-current]{
  color:#fff;border-bottom-color:var(--accent);
  text-decoration:none;background:rgba(255,255,255,.06);
}

/* ---------- hero / matchday board ---------- */
.hero{
  background:
    linear-gradient(rgba(13,12,14,.88), rgba(13,12,14,.82) 55%, rgba(13,12,14,.95)),
    url('hero-team.jpg') center 32%/cover no-repeat,
    var(--club);
  color:#fff;
  position:relative;overflow:hidden;
  padding:56px 0 64px;
}
/* halfway line + centre circle motif */
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 50%, transparent 118px, rgba(255,255,255,.10) 119px, rgba(255,255,255,.10) 121px, transparent 122px),
    linear-gradient(to bottom, transparent 49.8%, rgba(255,255,255,.10) 49.8%, rgba(255,255,255,.10) 50.2%, transparent 50.2%);
  pointer-events:none;
}
.hero .wrap{position:relative}
.hero .eyebrow{
  color:var(--accent);font-family:'Barlow Condensed';
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.9rem;
}
.hero h2{font-size:clamp(2.2rem,6vw,3.6rem);margin:.2em 0 .4em}
.hero p.lead{max-width:560px;color:#c9c9cf;font-size:1.05rem}
.hero .cta{
  display:inline-block;margin-top:22px;
  background:var(--accent);color:#fff;
  font-family:'Barlow Condensed';font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.1rem;
  padding:12px 26px;border-radius:6px;
}
.hero .cta:hover{text-decoration:none;filter:brightness(1.07)}

/* next match board */
.board{
  margin-top:34px;
  background:var(--club-dark);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:20px 24px;
  max-width:620px;
}
.board .tag{
  font-family:'Barlow Condensed';font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;font-size:.8rem;color:var(--accent);
}
.board .teams{
  display:flex;align-items:center;gap:18px;
  font-family:'Barlow Condensed';font-weight:700;
  font-size:clamp(1.3rem,4vw,1.9rem);text-transform:uppercase;
  margin:8px 0 4px;
}
.board .vs{color:var(--accent);font-size:.8em}
.board .meta{color:#a3a3ad;font-size:.9rem}

/* ---------- sections ---------- */
section.block{padding:48px 0}
section.block.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.block h2{
  font-size:1.9rem;margin-bottom:6px;color:var(--club);
}
.block .sub{color:var(--muted);margin-bottom:24px}

.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;
}
section.block.alt .card{background:var(--paper)}
.card h3{font-size:1.15rem;color:var(--club);margin-bottom:6px}
.card p{font-size:.95rem;color:var(--muted)}
.card a.more{
  display:inline-block;margin-top:10px;font-family:'Barlow Condensed';
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;
}

/* honours strip */
.honours{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.honour{
  border-left:4px solid var(--accent);
  background:#fff;border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 16px;border-top:1px solid var(--line);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.honour .yr{font-family:'Barlow Condensed';font-weight:800;font-size:1.3rem;color:var(--club)}
.honour .what{font-size:.9rem;color:var(--muted)}

/* ---------- Full-Time embed slots ---------- */
.ft-slot{
  background:#fff;border:2px dashed #c8c4b8;border-radius:var(--radius);
  padding:26px;text-align:center;color:var(--muted);
}
.ft-slot strong{color:var(--club)}
.ft-slot code{
  background:var(--paper);border:1px solid var(--line);
  padding:2px 6px;border-radius:4px;font-size:.85em;
}
.ft-note{font-size:.85rem;color:var(--muted);margin-top:10px}

/* tables that Full-Time injects — light restyle hooks */
.ft-slot table, .ft-embed table{
  width:100%;border-collapse:collapse;font-size:.92rem;
}
.ft-embed th{background:var(--club);color:#fff;text-align:left;padding:8px}
.ft-embed td{padding:8px;border-bottom:1px solid var(--line)}

/* ---------- news ---------- */
.news-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
article.post{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;
}
article.post time{
  font-family:'Barlow Condensed';font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;
}
article.post h3{margin:4px 0 8px;color:var(--club)}

/* ---------- contact / ground ---------- */
.split{display:grid;gap:24px;grid-template-columns:1fr 1fr}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.kv{list-style:none}
.kv li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;gap:12px}
.kv b{min-width:120px;color:var(--club)}

/* ---------- footer ---------- */
footer.site{
  background:var(--club-dark);color:#ababb4;
  padding:34px 0 26px;margin-top:56px;font-size:.9rem;
}
footer.site .cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
footer.site h3{color:#fff;font-size:1rem;margin-bottom:8px}
footer.site a{color:#e3e3e8}
footer.site .legal{margin-top:24px;border-top:1px solid rgba(255,255,255,.12);padding-top:14px;font-size:.8rem}
.socials{display:flex;gap:14px;margin-top:8px}
.socials a{
  display:inline-grid;place-items:center;width:36px;height:36px;
  border:1px solid rgba(255,255,255,.25);border-radius:50%;
  font-family:'Barlow Condensed';font-weight:700;
}
.socials a:hover{background:var(--accent);color:#fff;border-color:var(--accent);text-decoration:none}

@media (prefers-reduced-motion:no-preference){
  .card,.honour{transition:transform .15s ease}
  .card:hover{transform:translateY(-2px)}
}
@media(max-width:640px){
  .brand h1{font-size:1.3rem}
  nav.main a{padding:10px 12px;font-size:.95rem}
}


/* ---------- mobile hamburger nav ---------- */
.nav-toggle{
  display:none;
  margin-left:auto;
  background:none;border:0;cursor:pointer;
  width:46px;height:42px;padding:8px;
}
.nav-toggle span{
  display:block;height:3px;border-radius:2px;
  background:#fff;margin:6px 0;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

@media(max-width:720px){
  .nav-toggle{display:block}
  nav.main ul{
    display:none;
    flex-direction:column;
    border-top:1px solid rgba(255,255,255,.12);
  }
  nav.main ul.open{display:flex}
  nav.main a{
    padding:14px 20px;font-size:1.1rem;
    border-bottom:1px solid rgba(255,255,255,.08);
    border-left:4px solid transparent;
  }
  nav.main a:hover,nav.main a[aria-current]{
    border-bottom-color:rgba(255,255,255,.08);
    border-left-color:var(--accent);
  }
}


/* ---------- Teams submenu ---------- */
nav.main li{position:relative}
nav.main .has-sub > a::after{content:" \25BE";font-size:.75em;opacity:.7}
nav.main .sub{
  display:none;list-style:none;
  position:absolute;top:100%;left:0;z-index:60;
  background:var(--club-dark);
  min-width:210px;
  border:1px solid rgba(255,255,255,.12);
  border-top:3px solid var(--accent);
  box-shadow:0 8px 18px rgba(0,0,0,.45);
}
nav.main li:hover > .sub,
nav.main li:focus-within > .sub{display:block}
nav.main .sub a{
  padding:11px 16px;font-size:1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  border-left:4px solid transparent;
}
nav.main .sub a:hover,nav.main .sub a[aria-current]{
  border-left-color:var(--accent);
  border-bottom-color:rgba(255,255,255,.08);
}

@media(max-width:720px){
  /* inside the hamburger: show children inline, indented */
  nav.main .sub{
    display:block;position:static;
    background:rgba(255,255,255,.04);
    min-width:0;border:0;border-top:0;box-shadow:none;
  }
  nav.main .sub a{
    padding:12px 20px 12px 40px;font-size:1rem;
  }
}


/* ---------- mobile collapsible Teams submenu ---------- */
.sub-toggle{display:none}
@media(max-width:720px){
  nav.main .has-sub{display:flex;flex-wrap:wrap;align-items:center}
  nav.main .has-sub > a{flex:1}
  nav.main .has-sub > a::after{content:""}
  .sub-toggle{
    display:block;background:none;border:0;color:#e3e3e8;
    font-size:1.2rem;padding:10px 22px;cursor:pointer;
    border-bottom:1px solid rgba(255,255,255,.08);
    transition:transform .2s ease;
  }
  nav.main .has-sub.sub-open .sub-toggle{transform:rotate(180deg);border-bottom:0}
  nav.main .sub{display:none;width:100%}
  nav.main .has-sub.sub-open .sub{display:block}
}

/* ---------- footer credit ---------- */
footer.site .credit{
  margin-top:18px;text-align:center;
}
footer.site .credit a{
  display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  color:#ababb4;text-decoration:none;font-size:.85rem;
}
footer.site .credit a:hover span b{color:#fff}
footer.site .credit img{height:34px;width:auto}
footer.site .credit b{color:#e3e3e8}