/*
Theme Name: XScore Matchday
Theme URI: https://xscore.co.ke
Author: XScore
Description: Lightweight matchday theme for XScore — a stadium-scoreboard front page built around the XScore Predictions plugin, fast news templates, and no jQuery or page builder.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: xscore
*/

/* ---------- Tokens ---------- */
:root{
  --navy:#0b2842;--night:#071a2c;--gold:#d6a73d;--gold-soft:#f4d37c;--pitch:#1f7a4d;
  --terrace:#e8ecea;--surface:#ffffff;--ink:#15202b;--muted:#5d6b72;--line:#d3dad7;
  --display:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif-condensed,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1140px;--gap:clamp(16px,3vw,28px);--r:12px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--terrace);color:var(--ink);font:400 1rem/1.6 var(--body);text-rendering:optimizeLegibility}
img,svg,video,iframe{max-width:100%;height:auto}
a{color:var(--navy);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:#8a6416}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.005em;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(2.1rem,5vw,3.2rem)}h2{font-size:clamp(1.6rem,3.4vw,2.2rem)}h3{font-size:1.35rem}h4{font-size:1.15rem}
p{margin:0 0 1em}
.wrap{width:min(var(--wrap),100% - 2*var(--gap));margin-inline:auto}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:999;width:auto;height:auto;clip:auto;padding:10px 14px;background:var(--gold);color:var(--night);font-weight:700}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--night);color:#fff;border-bottom:3px solid var(--gold)}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:0;position:relative}}
.header-bar{display:flex;align-items:center;gap:18px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;margin-right:auto}
.brand:hover{color:#fff}
.brand img{max-height:38px;width:auto}
.brand-mark{font:800 1.75rem/1 var(--display);letter-spacing:.02em}
.brand-mark span{color:var(--gold)}
.primary-nav ul{display:flex;gap:2px;margin:0;padding:0;list-style:none}
.primary-nav a{display:block;padding:8px 12px;border-radius:8px;color:#c9d6e0;font:600 1.06rem/1 var(--display);letter-spacing:.02em;text-decoration:none}
.primary-nav a:hover,.primary-nav .current-menu-item>a,.primary-nav .current_page_item>a{color:#fff;background:rgba(255,255,255,.08)}
.primary-nav .current-menu-item>a{box-shadow:inset 0 -2px 0 var(--gold)}
.primary-nav .sub-menu{display:none}
.header-cta{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:var(--pitch);color:#fff;font:700 .95rem/1 var(--display);letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.header-cta:hover{color:#fff;filter:brightness(1.1)}
.header-cta svg{width:16px;height:16px;fill:currentColor}
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:none;color:#fff;cursor:pointer}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:18px;height:2px;background:currentColor;position:relative;transition:transform .2s ease}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-open .nav-toggle span{background:transparent}
.nav-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
.nav-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .header-cta{padding:8px 11px}.header-cta .cta-text{display:none}
  .primary-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--night);border-bottom:3px solid var(--gold);padding:8px var(--gap) 16px}
  .nav-open .primary-nav{display:block}
  .primary-nav ul{flex-direction:column}
  .primary-nav a{padding:13px 10px;font-size:1.25rem}
}

/* ---------- Scoreboard (front page) ---------- */
.scoreboard{background:linear-gradient(180deg,var(--night),var(--navy));color:#fff;padding:clamp(22px,4vw,40px) 0 clamp(70px,9vw,96px)}
.board-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:22px}
.board-date{margin:0;color:#fff;font:800 clamp(2.4rem,7vw,4.4rem)/.92 var(--display);letter-spacing:-.01em}
.board-date small{display:block;margin-bottom:6px;color:var(--gold-soft);font-size:clamp(1rem,2vw,1.25rem);font-weight:600;letter-spacing:.01em}
.board-lede{max-width:34ch;margin:0;color:#aebfcc;font-size:.95rem}
.board-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:#04101c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.board-cell{padding:14px 16px 12px;border-radius:10px;background:
  radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.2px) 0 0/5px 5px,#0a2236}
.board-num{display:block;color:var(--gold-soft);font:800 clamp(2.3rem,6vw,3.6rem)/1 var(--display);font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(244,211,124,.28)}
.board-num.is-empty{color:#4e6a82;text-shadow:none}
.board-label{display:block;margin-top:6px;color:#9fb3c3;font-size:.82rem;font-weight:600}
.board-next{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:4px;padding:12px 16px;border-radius:0 0 12px 12px;background:#04101c;color:#cfdbe4;font-size:.92rem}
.board-next b{color:#fff;font:700 1.15rem/1.1 var(--display);letter-spacing:.01em}
.board-next .kick{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:6px;background:var(--pitch);color:#fff;font:700 1rem/1.3 var(--display);font-variant-numeric:tabular-nums}
.board-next .kick::before{content:"";width:7px;height:7px;border-radius:50%;background:#7dffb6;animation:pulse 1.8s ease-in-out infinite}
.board-next a{margin-left:auto;color:var(--gold-soft);font-weight:700;text-decoration:none}
.board-next a:hover{color:#fff}
@keyframes pulse{50%{opacity:.25}}
@media (max-width:640px){.board-grid{grid-template-columns:repeat(2,1fr)}.board-next a{margin-left:0}}

/* ---------- Front layout ---------- */
.matchday{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--gap);align-items:start;margin-top:clamp(-64px,-7vw,-48px)}
.matchday-main{min-width:0}
.matchday-main .xsp-slip-wrap{width:100%}
.matchday-aside{display:grid;gap:16px;position:sticky;top:84px}
@media (max-width:960px){.matchday{grid-template-columns:1fr}.matchday-aside{position:static}}
.panel{padding:18px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.panel h2{font-size:1.4rem;margin-bottom:.6em}
.panel-dark{background:var(--navy);border-color:var(--navy);color:#d7e2ea}
.panel-dark h2{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border:0;border-radius:10px;background:var(--navy);color:#fff;font:700 1.05rem/1 var(--display);letter-spacing:.02em;text-decoration:none;cursor:pointer}
.btn:hover{color:#fff;background:#123b5f}
.btn-whatsapp{background:var(--pitch);width:100%}
.btn-whatsapp:hover{background:#196640}
.btn-ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.headlines{margin:0;padding:0;list-style:none}
.headlines li{padding:11px 0;border-top:1px solid var(--line)}
.headlines li:first-child{border-top:0;padding-top:0}
.headlines a{display:block;color:var(--ink);font-weight:650;line-height:1.35;text-decoration:none}
.headlines a:hover{color:var(--navy);text-decoration:underline}
.headlines time{display:block;margin-top:3px;color:var(--muted);font-size:.8rem}

.section{padding:clamp(36px,6vw,64px) 0 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;padding-bottom:10px;border-bottom:3px solid var(--ink)}
.section-head h2{margin:0}
.section-head a{font:700 1.05rem/1 var(--display);text-decoration:none}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--gap);align-items:start}
@media (max-width:960px){.split{grid-template-columns:1fr}}
.rg-note{font-size:.9rem;color:var(--muted)}
.rg-note strong{color:var(--ink)}

/* ---------- Post cards ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.news-grid .card-lead{grid-column:span 2;grid-row:span 2}
@media (max-width:900px){.news-grid{grid-template-columns:repeat(2,1fr)}.news-grid .card-lead{grid-column:1/-1;grid-row:auto}}
@media (max-width:560px){.news-grid{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;min-width:0}
.card-media{display:block;text-decoration:none;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);background:#cfd8d4}
.card-media img{display:block;width:100%;height:100%;object-fit:cover}
.card-media.is-blank{display:grid;place-items:center;background:var(--navy);color:var(--gold);font:800 2rem/1 var(--display)}
.card-body{padding-top:12px}
.card-cat{display:inline-block;margin-bottom:6px;color:var(--pitch);font:700 .95rem/1 var(--display);letter-spacing:.02em;text-decoration:none}
.card-title{margin:0 0 6px;font-size:1.32rem;line-height:1.1}
.card-title a{color:var(--ink);text-decoration:none}
.card-title a::after{content:"";position:absolute;inset:0}
.card:hover .card-title a{text-decoration:underline;text-decoration-thickness:2px}
.card-meta{color:var(--muted);font-size:.82rem}
.card-excerpt{margin:6px 0 0;color:#3c4a52;font-size:.95rem}
.card-lead .card-title{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.card-cat{position:relative;z-index:1}

.post-list{display:grid;gap:22px}
.post-row{position:relative;display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start;padding-bottom:22px;border-bottom:1px solid var(--line)}
.post-row .card-body{padding-top:0}
@media (max-width:600px){.post-row{grid-template-columns:110px minmax(0,1fr);gap:12px}.post-row .card-excerpt{display:none}.post-row .card-title{font-size:1.12rem}}

/* ---------- Archive / page heads ---------- */
.page-head{background:var(--navy);color:#fff;padding:clamp(26px,5vw,48px) 0}
.page-head h1{margin:0;color:#fff}
.page-head p{margin:.5em 0 0;color:#aebfcc;max-width:60ch}
.page-head .crumbs{margin-bottom:8px;color:var(--gold-soft);font:600 1rem/1 var(--display)}
.page-head .crumbs a{color:inherit;text-decoration:none}
.content-area{padding:clamp(26px,5vw,48px) 0 clamp(40px,6vw,72px)}
.with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:960px){.with-sidebar{grid-template-columns:1fr}}
.sidebar{display:grid;gap:16px}

/* ---------- Single article ---------- */
.article-head{padding:clamp(28px,5vw,52px) 0 0}
.article-head .card-cat{font-size:1.1rem}
.article-title{max-width:22ch;font-size:clamp(2.2rem,5.6vw,3.6rem);line-height:1.02}
.article-standfirst{max-width:60ch;margin:0 0 16px;color:#3c4a52;font-size:1.15rem;line-height:1.5}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);font-size:.88rem}
.byline strong{color:var(--ink)}
.byline .share-wa{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--pitch);font-weight:700;text-decoration:none}
.byline .share-wa svg{width:17px;height:17px;fill:currentColor}
.article-hero{margin:22px 0 0}
.article-hero img{display:block;width:100%;border-radius:var(--r)}
.article-hero figcaption{margin-top:6px;color:var(--muted);font-size:.8rem}
.entry{max-width:68ch;font-size:1.08rem;line-height:1.72}
.entry>*{margin-top:0;margin-bottom:1.15em}
.entry h2{margin-top:1.6em;font-size:clamp(1.6rem,3vw,2rem)}
.entry h3{margin-top:1.4em}
.entry a{color:#0f5a8f;text-decoration:underline}
.entry blockquote{margin-left:0;padding:4px 0 4px 18px;border-left:4px solid var(--gold);font-size:1.15rem;color:#2c3a42}
.entry ul,.entry ol{padding-left:1.25em}
.entry li{margin-bottom:.35em}
.entry figure{margin-inline:0}
.entry figcaption{color:var(--muted);font-size:.82rem}
.entry table{width:100%;border-collapse:collapse;font-size:.95rem;display:block;overflow-x:auto}
.entry th,.entry td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left}
.entry th{font-family:var(--display);font-size:1.05rem}
.entry .verdict,.entry .wp-block-pullquote{padding:16px 18px;border-radius:var(--r);background:var(--navy);color:#e4ecf2;border:0}
.entry .alignwide{max-width:none}
.entry img{border-radius:8px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:28px 0 0}
.tags a{padding:5px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:.85rem;text-decoration:none}
.tags a:hover{border-color:var(--navy);color:var(--navy)}
.ad-slot{margin:1.6em 0;text-align:center}
.ad-slot .widget-title{display:none}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.post-nav a{display:block;padding:14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:650;line-height:1.3}
.post-nav small{display:block;margin-bottom:4px;color:var(--muted);font-weight:400}
.post-nav .next{text-align:right}

/* ---------- Pagination, search, comments ---------- */
.pagination{margin-top:32px}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:6px}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border-radius:9px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font:700 1.05rem/1 var(--display);text-decoration:none}
.pagination .current{background:var(--navy);border-color:var(--navy);color:#fff}
.search-form{display:flex;gap:6px}
.search-form input[type=search]{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:16px}
.comments{max-width:68ch;margin-top:40px}
.comment-list{padding:0;list-style:none}
.comment-body{padding:14px 0;border-bottom:1px solid var(--line)}
.comment-form input:not([type=submit]):not([type=checkbox]),.comment-form textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:16px}
.comment-form .submit{padding:11px 16px;border:0;border-radius:10px;background:var(--navy);color:#fff;font:700 1.05rem/1 var(--display);cursor:pointer}
.widget{padding:18px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.widget-title{margin:0 0 .6em;font-size:1.3rem}
.widget ul{margin:0;padding-left:1.1em}

/* ---------- 404 ---------- */
.lost{padding:clamp(48px,10vw,110px) 0;text-align:center}
.lost .board-num{font-size:clamp(5rem,18vw,9rem);color:var(--navy);text-shadow:none}
.lost p{max-width:44ch;margin:8px auto 22px;color:var(--muted)}
.lost .search-form{max-width:420px;margin:0 auto 18px}

/* ---------- Footer ---------- */
.site-footer{margin-top:clamp(48px,8vw,90px);background:var(--night);color:#9fb3c3;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--gap);padding:clamp(34px,6vw,56px) 0}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr}}
.site-footer h2{color:#fff;font-size:1.3rem}
.site-footer a{color:#d7e2ea;text-decoration:none}
.site-footer a:hover{color:var(--gold-soft)}
.site-footer ul{margin:0;padding:0;list-style:none}
.site-footer li{padding:4px 0}
.age-badge{display:inline-grid;place-items:center;width:44px;height:44px;margin-right:10px;float:left;border:2px solid var(--gold);border-radius:50%;color:var(--gold);font:800 1.1rem/1 var(--display)}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:16px 0 22px;border-top:1px solid rgba(255,255,255,.08);font-size:.82rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.site-header,.site-footer,.matchday-aside,.ad-slot,.byline .share-wa{display:none!important}body{background:#fff}}

/* ---------- Plugin fit on the front page ---------- */
.btn svg{width:18px;height:18px;flex:none;fill:currentColor}
.matchday .xsp-daydeck{display:none} /* the scoreboard already shows the day's numbers */
.matchday .xsp-datenav .is-current{background:var(--gold);border-color:var(--gold);color:var(--night)}
.with-sidebar>*,.sidebar>*{min-width:0}
.widget h2,.widget .wp-block-heading{margin:0 0 .6em;font-size:1.3rem}
.widget .wp-block-search__inside-wrapper{display:flex;gap:6px}
.widget .wp-block-search__input{min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font-size:16px}
.widget .wp-block-search__button{margin:0;padding:9px 12px;border:0;border-radius:8px;background:var(--navy);color:#fff;font:700 1rem/1 var(--display)}
.widget .wp-block-latest-posts{padding-left:0;list-style:none}
.widget .wp-block-latest-posts li{padding:6px 0;border-top:1px solid var(--line)}
.widget .wp-block-latest-posts li:first-child{border-top:0}
.widget .wp-block-latest-posts a{color:var(--ink);font-weight:600;text-decoration:none}