/* BFP public site.
 *
 * Structure borrowed from how the big league sites work: one deep brand colour
 * across the whole page, a three-panel board at the top (feature match, this
 * weekend, a scrolling fixtures rail), a partner strip, then content sections.
 * The brand colour here is BFP navy rather than PL purple, with the app's gold
 * as the single accent. */
:root{
  /* Light theme: cream page, white panels - the same palette as the app. The
     brand navy is kept for the masthead, footer and CTA block so the website and
     the app still look like one product.
     Gold has TWO tokens on purpose: --gold for filled surfaces (white text sits
     on it), and --gold-ink for gold used as TEXT, which must be far darker to
     stay readable on cream. */
  --navy:#1F4E9B; --navy-deep:#12213F;
  --bg:#FBF6EC;
  --bg-2:#FFFFFF;
  --bg-3:#F3EDE1;
  --line:#E5DDCC;
  --ink:#16233B;
  --ink-2:#5C6B85;
  --ink-3:#64738F;
  --gold:#F0921E;
  --gold-ink:#8F5410;
  --green:#2E7D32;
  --red:#C62828;
  --radius:16px;
  --shadow:0 1px 2px rgba(18,33,63,.05), 0 8px 22px rgba(18,33,63,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:min(1240px,94vw); margin-inline:auto}
h1,h2,h3{margin:0; line-height:1.15; letter-spacing:-.2px}
a{color:inherit; text-decoration:none}
.eyebrow{margin:0 0 10px; color:var(--gold); font-weight:800; font-size:12px; letter-spacing:1px; text-transform:uppercase}
.fineprint{color:var(--ink-3); font-size:12px; margin:12px 0 0}

/* ---------- utility strip + masthead ---------- */
.utility{background:var(--navy-deep); border-bottom:1px solid var(--line); font-size:12.5px}
.utility-inner{display:flex; justify-content:space-between; align-items:center; padding:7px 0; color:#AFC0DC}
.utility-links a{margin-right:20px; color:#D6E1F2; font-weight:600}
.utility-links a:hover{color:#fff}
.utility-season{letter-spacing:.5px; text-transform:uppercase; font-size:11px}

.masthead{background:var(--navy); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30}
.masthead-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{border-radius:9px; background:#fff; padding:3px; object-fit:contain}
.brand strong{display:block; font-size:15px; font-weight:800; line-height:1.1}
.brand em{display:block; font-style:normal; font-size:12px; color:#BBD0F0; letter-spacing:1.4px; text-transform:uppercase}
.nav{display:flex; align-items:center; gap:26px}
.nav a{font-size:14.5px; font-weight:700; color:#DCE7F8}
.nav a:hover{color:#fff}
.nav-cta{background:var(--gold); color:#fff !important; padding:9px 18px; border-radius:999px; font-weight:800}
.nav-cta:hover{background:#D9821A}

/* ---------- results ticker ---------- */
.ticker{background:var(--bg-2); border-bottom:1px solid var(--line); overflow:hidden}
.ticker-inner{display:flex; gap:26px; padding:9px 0; overflow-x:auto; scrollbar-width:none}
.ticker-inner::-webkit-scrollbar{display:none}
.tick{display:flex; align-items:center; gap:8px; white-space:nowrap; font-size:12.5px; color:var(--ink-2)}
.tick img{width:18px; height:18px; object-fit:contain}
.tick b{color:var(--ink); font-weight:800}
.tick .t-time{color:var(--gold-ink); font-weight:800}

/* ---------- the board (hero | weekend | rail) ---------- */
.board{padding:26px 0 6px}
.board-grid{display:grid; grid-template-columns:1.5fr 1.05fr .95fr; gap:16px; align-items:start}
.panel{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line)}
.panel-head h2{font-size:15px; font-weight:800; letter-spacing:.3px}
.panel-head span,.rail-all{font-size:12px; color:var(--ink-3); font-weight:700}
.rail-all{color:var(--gold-ink)}

/* hero / feature match */
.hero-card{background:linear-gradient(155deg,var(--navy) 0%,#1A4386 55%,var(--navy-deep) 100%); color:#fff; padding:26px 24px 24px}
.hero-round{font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--gold)}
.hero-teams{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; margin:22px 0 20px}
.hero-team{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.hero-team img{width:66px; height:66px; object-fit:contain}
.hero-team strong{font-size:15px; font-weight:800}
.hero-vs{font-size:15px; font-weight:800; color:#BBD0F0}
.hero-score{font-size:34px; font-weight:800; letter-spacing:-1px}
.hero-meta{border-top:1px solid var(--line); padding-top:16px; text-align:center}
.hero-when{font-weight:800; font-size:15px}
.hero-where{color:#FFC46B; font-size:12.5px; font-weight:700; margin-top:3px}
.hero-cta{display:inline-block; margin-top:16px; background:var(--gold); color:#fff; font-weight:800;
  font-size:13.5px; padding:10px 20px; border-radius:999px}

/* this weekend list */
.weekend-list{max-height:430px; overflow-y:auto}
.wk{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line)}
.wk:last-child{border-bottom:0}
.wk-side{display:flex; align-items:center; gap:8px; min-width:0}
.wk-side.away{flex-direction:row-reverse}
.wk-side span{font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wk-side img{width:24px; height:24px; object-fit:contain; flex:0 0 auto}
.wk-mid{text-align:center; font-size:12px; color:var(--ink-3); font-weight:800; min-width:58px}
.wk-day{padding:9px 16px; background:var(--bg-3); font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--gold-ink)}

/* fixtures rail */
.rail-list{max-height:430px; overflow-y:auto}
.rail-date{padding:10px 18px; font-size:12px; font-weight:800; color:var(--ink); background:var(--bg-3); letter-spacing:.4px}
.rail-row{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line)}
.rail-row:last-child{border-bottom:0}
.rail-team{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; min-width:0}
.rail-team.away{flex-direction:row-reverse; text-align:right}
.rail-team span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rail-team img{width:22px; height:22px; object-fit:contain; flex:0 0 auto}
.rail-time{font-size:12px; font-weight:800; color:var(--gold-ink); min-width:52px; text-align:center}

/* ---------- partners ---------- */
.partners{padding:22px 0 6px}
.partner-strip{display:flex; align-items:center; justify-content:space-around; gap:18px; flex-wrap:wrap;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px}
.partner-strip figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:8px}
.partner-strip img{height:46px; width:auto; max-width:130px; object-fit:contain; background:#fff; border-radius:8px; padding:5px}
.partner-strip figcaption{font-size:10.5px; color:var(--ink-3); letter-spacing:.6px; text-transform:uppercase}

/* ---------- content blocks ---------- */
.block{padding:34px 0}
.block-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px}
.block-head h2{font-size:24px; font-weight:800}
.block-note{font-size:12.5px; color:var(--ink-3); font-weight:700}
.two-col{display:grid; grid-template-columns:1.5fr 1fr; gap:26px}
/* Grid items default to min-width:auto, so the table's nowrap cells were pushing
   the column wider than a phone screen. Let them shrink and scroll instead. */
.two-col > *,.board-grid > *{min-width:0}
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{border:1px solid var(--line); background:var(--bg-2); color:var(--navy); font-weight:800; font-size:13px;
  padding:8px 16px; border-radius:999px; cursor:pointer}
.tab:hover{border-color:var(--navy)}
.tab[aria-selected="true"]{background:var(--navy); border-color:var(--navy); color:#fff}

/* fixtures list */
.round-head{display:flex; justify-content:space-between; align-items:center; padding:10px 16px; margin:16px 0 8px;
  background:var(--navy); color:#fff; border-radius:10px; font-size:12px; font-weight:800; letter-spacing:.6px}
.round-head span:last-child{color:#BBD0F0}
.fixture{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:7px; box-shadow:var(--shadow)}
.fx-side{display:flex; align-items:center; gap:10px; min-width:0}
.fx-side.away{flex-direction:row-reverse}
.fx-side span{font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fx-side img{width:28px; height:28px; object-fit:contain; flex:0 0 auto}
.fx-mid{text-align:center; min-width:104px}
.fx-score{font-size:19px; font-weight:800}
.fx-vs{font-size:14px; font-weight:800; color:var(--ink-3)}
.fx-when{font-size:11.5px; color:var(--ink-2); margin-top:2px}
.fx-where{font-size:11px; color:var(--gold-ink); font-weight:700; margin-top:1px}
.pill{display:inline-block; font-size:10px; font-weight:800; letter-spacing:.5px; padding:2px 9px; border-radius:999px}
.pill.live{background:#FDECEC; color:var(--red)}
.pill.ft{background:#E9F5EA; color:var(--green)}

/* table */
.table-panel{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:14px}
th,td{padding:11px 12px; text-align:right; white-space:nowrap}
th:first-child,td:first-child{text-align:left; width:36px; color:var(--ink-3)}
th:nth-child(2),td:nth-child(2){text-align:left; white-space:normal}
thead th{background:var(--bg-3); font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-2); font-weight:800}
tbody tr{border-top:1px solid var(--line)}
tbody tr.qual{background:#F0F8F1}
tbody tr.qual td:first-child{box-shadow:inset 3px 0 0 var(--green)}
td .team-cell{display:flex; align-items:center; gap:10px}
td .crest{width:26px; height:26px}
.pts{font-weight:800; color:var(--navy)}

/* scorers */
.scorer{display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--line)}
.scorer:first-child{border-top:0}
.scorer-rank{width:20px; font-weight:800; color:var(--ink-3); font-size:13px}
.scorer-name{font-weight:700; font-size:14px}
.scorer-team{font-size:12px; color:var(--ink-3)}
.scorer-goals{margin-left:auto; font-weight:800; color:var(--gold-ink); font-size:16px}
.empty{padding:26px 18px; color:var(--ink-3); font-size:14px; text-align:center}

/* clubs */
.club-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px}
.club{display:flex; align-items:center; gap:11px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; box-shadow:var(--shadow)}
.club:hover{border-color:var(--gold); box-shadow:var(--shadow)}
.club img{width:34px; height:34px; object-fit:contain; flex:0 0 auto}
.club span{font-size:13px; font-weight:700; line-height:1.25}

/* app panel */
.app-panel{display:grid; grid-template-columns:1.25fr .75fr; gap:36px; align-items:center; padding:38px 40px;
  background:linear-gradient(140deg,var(--navy),var(--navy-deep)); color:#fff}
.app-panel h2{font-size:28px}
.app-panel p{color:#CFDDF3; max-width:52ch}
.app-points{margin:18px 0 22px; padding:0; list-style:none}
.app-points li{position:relative; padding-left:26px; margin-bottom:9px; color:#EAF1FB; font-size:15px}
.app-points li::before{content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:800}
.actions{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-block; padding:12px 22px; border-radius:999px; font-weight:800; font-size:14.5px; border:2px solid transparent}
.btn-primary{background:var(--gold); color:#fff}
.btn-primary:hover{background:#D9821A}
.btn-ghost{border-color:rgba(255,255,255,.35); color:#fff}
.btn-ghost:hover{border-color:#fff}
.app-shot{display:flex; justify-content:center}
.phone{width:196px; height:376px; background:#0A1730; border-radius:28px; padding:9px; box-shadow:0 22px 46px rgba(0,0,0,.45)}
.phone-screen{background:var(--bg); border-radius:20px; height:100%; padding:12px; display:flex; flex-direction:column; gap:8px}
.ps-bar{height:26px; background:var(--navy); border-radius:6px}
.ps-row{height:34px; background:var(--bg-2); border:1px solid var(--line); border-radius:8px}
.ps-row.short{width:70%}
.ps-pitch{flex:1; background:#2F7A3D; border-radius:10px}

/* footer */
.footer{background:var(--navy-deep); color:#C7D6EE; border-top:1px solid var(--line); padding:26px 0; margin-top:20px}
.footer-inner{display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap; align-items:center}
.footer-brand{display:flex; align-items:center; gap:12px}
.footer-brand img{border-radius:8px; background:#fff; padding:3px}
.footer-links{display:flex; gap:20px; flex-wrap:wrap}
.footer-links a{font-size:13.5px; color:#C7D6EE; font-weight:600}
.footer-links a:hover{color:#fff}

/* loading */
.skeleton{height:150px; margin:16px; border-radius:12px;
  background:linear-gradient(90deg,#EFE8DA,#F8F3E9,#EFE8DA); background-size:200% 100%; animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .board-grid{grid-template-columns:1fr 1fr}
  .rail{grid-column:1 / -1}
  .rail-list,.weekend-list{max-height:none}
}
@media (max-width:820px){
  .board-grid,.two-col,.app-panel{grid-template-columns:1fr}
  .app-shot{display:none}
  .app-panel{padding:28px}
  .nav a:not(.nav-cta){display:none}
  .utility-links a{margin-right:14px}
}
@media (max-width:560px){
  .fixture{grid-template-columns:1fr; gap:8px; text-align:center}
  .fx-side,.fx-side.away{flex-direction:row; justify-content:center}
  .partner-strip img{height:34px}
  .block-head h2{font-size:20px}
  .hero-team img{width:54px; height:54px}
}

/* ---------- news / photos ---------- */
/* Lead story large on the left, the rest as a column beside it — the shape the
   league sites use, and it keeps one good photo doing the heavy lifting. */
.story-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:14px}
.story{background:var(--bg-2); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow)}
.story-lead{grid-row:span 2}
.story-img{background:var(--bg-3); aspect-ratio:16/9; overflow:hidden}
.story-lead .story-img{aspect-ratio:16/10}
.story-img img{width:100%; height:100%; object-fit:cover; display:block}
.story-copy{padding:14px 16px 16px}
.story h3{font-size:15px; font-weight:800; line-height:1.3}
.story-lead h3{font-size:22px}
.story p{margin:8px 0 0; color:var(--ink-2); font-size:13.5px}
.story-date{display:block; margin-top:10px; font-size:11px; color:var(--ink-3); letter-spacing:.5px; text-transform:uppercase}

/* division heading when "All" fixtures are shown */
.div-head{margin:26px 0 4px; font-size:13px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--gold-ink)}
.div-head:first-child{margin-top:0}

@media (max-width:900px){
  .story-grid{grid-template-columns:1fr 1fr}
  .story-lead{grid-row:auto; grid-column:1 / -1}
  .story-lead h3{font-size:18px}
}
@media (max-width:560px){ .story-grid{grid-template-columns:1fr} }

/* ---------- login + officials ---------- */
.nav-login{border:1.5px solid rgba(255,255,255,.45); padding:8px 16px; border-radius:999px; font-weight:800; color:#fff}
.nav-login:hover{border-color:#fff; background:rgba(255,255,255,.10)}
.officials{display:grid; grid-template-columns:1.1fr 1fr; gap:34px; padding:34px 38px; align-items:center}
.officials h2{font-size:24px}
.officials p{color:var(--ink-2); max-width:46ch}
.who{list-style:none; margin:0; padding:0}
.who li{display:flex; flex-direction:column; gap:2px; padding:12px 0; border-top:1px solid var(--line)}
.who li:first-child{border-top:0}
.who strong{font-size:14px; font-weight:800; color:var(--navy)}
.who span{font-size:13px; color:var(--ink-2)}
@media (max-width:820px){
  .officials{grid-template-columns:1fr; gap:22px; padding:26px}
  .nav-login{display:none}
}

/* other matches kicking off at the same minute (the second pitch) */
.hero-also{margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.18); text-align:left}
.hero-also-label{display:block; font-size:10.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#BBD0F0; margin-bottom:8px}
.hero-also-row{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:#fff; margin-bottom:6px}
.hero-also-row img{width:20px; height:20px; object-fit:contain}
.hero-also-row em{font-style:normal; color:#BBD0F0; font-weight:700}
.hero-also-row b{margin-left:auto; font-weight:800; color:#FFC46B; font-size:11px; white-space:nowrap}

/* ---------- registration banner (moving bold line) ---------- */
.reg-banner{display:block; overflow:hidden; background:var(--navy); border-bottom:3px solid var(--gold);
  text-decoration:none; cursor:pointer}
.reg-track{display:inline-flex; white-space:nowrap; padding:11px 0; will-change:transform;
  animation:reg-scroll 26s linear infinite}
.reg-banner:hover .reg-track{animation-play-state:paused}
.reg-item{display:inline-flex; align-items:center; gap:10px; margin:0 44px; color:#fff;
  font-size:14.5px; font-weight:800; letter-spacing:.2px}
.reg-item strong{background:var(--gold); color:#1A1203; font-size:11px; font-weight:900;
  letter-spacing:1px; padding:4px 10px; border-radius:999px}
.reg-arrow{color:var(--gold); font-weight:900}
@keyframes reg-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.reg-track{animation:none}}