/*
Theme Name: Bricks Child — Peanut Gallery
Theme URI: https://thepeanutgallery.com.au
Description: Child theme for The Peanut Gallery — brand palette, fonts, custom templates.
Author: The Peanut Gallery
Template: bricks
Version: 2.0.0
Text Domain: bricks-child
*/

:root{
  --navy:#0D1B38; --navy-2:#0a1426; --panel:#102145; --line:rgba(255,255,255,.10);
  --gold:#E8A020; --gold-2:#f4b53e; --cream:#F5F0E9; --muted:#9fb0cf;
  --f-display:"Anton",system-ui,sans-serif;
  --f-kicker:"Oswald",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--cream);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-2)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip-link{position:absolute;left:-9999px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,20,38,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:18px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand img{width:34px;height:34px}
.brand b{font-family:var(--f-display);font-weight:400;font-size:21px;letter-spacing:.5px;color:var(--cream);line-height:1;text-transform:uppercase}
.brand b span{color:var(--gold)}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-family:var(--f-kicker);font-weight:600;font-size:13px;letter-spacing:1.3px;text-transform:uppercase;color:var(--cream)}
.nav a:hover{color:var(--gold)}
.nav a.pill{background:var(--gold);color:var(--navy);padding:9px 17px;border-radius:999px}
.nav a.pill:hover{background:var(--gold-2);color:var(--navy)}

/* ---------- hero ---------- */
.hero{text-align:center;padding:74px 0 60px;background:radial-gradient(120% 120% at 50% -10%,#13284f 0%,var(--navy) 60%)}
.hero .mark{width:96px;height:96px;margin:0 auto 22px;filter:drop-shadow(0 6px 20px rgba(0,0,0,.4))}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2.8rem,8vw,5.4rem);line-height:.92;margin:0;letter-spacing:1px;text-transform:uppercase}
.hero h1 .g{color:var(--gold)}
.hero .tag{font-family:var(--f-kicker);font-weight:500;letter-spacing:4px;text-transform:uppercase;color:var(--muted);font-size:14px;margin-top:16px}
.hero .cta{margin-top:30px}
.btn{display:inline-block;background:var(--gold);color:var(--navy);font-family:var(--f-kicker);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:15px;padding:14px 30px;border-radius:999px}
.btn:hover{background:var(--gold-2);color:var(--navy)}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid var(--line)}

/* ---------- section ---------- */
.section{padding:54px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:26px;border-bottom:1px solid var(--line);padding-bottom:12px}
.section-head h2{font-family:var(--f-display);font-weight:400;font-size:1.9rem;letter-spacing:.5px;text-transform:uppercase;margin:0}
.section-head a{font-family:var(--f-kicker);text-transform:uppercase;letter-spacing:1px;font-size:13px}

/* ---------- edition cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.ed-card{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel),var(--navy-2));border:1px solid var(--line);border-radius:14px;padding:22px 22px 20px;position:relative;overflow:hidden;transition:transform .15s ease,border-color .15s ease}
.ed-card:hover{transform:translateY(-3px);border-color:rgba(232,160,32,.5)}
.ed-card .kicker{font-family:var(--f-kicker);font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-size:12px}
.ed-card h3{font-family:var(--f-display);font-weight:400;font-size:1.5rem;line-height:1.06;margin:8px 0 0;color:var(--cream);text-transform:uppercase;letter-spacing:.3px}
.ed-card .date{color:var(--muted);font-size:12.5px;margin-top:8px;font-family:var(--f-kicker);letter-spacing:.6px}
.ed-card .ex{color:#cdd7ea;font-size:14.5px;line-height:1.55;margin-top:12px;flex:1}
.ed-card .more{margin-top:14px;font-family:var(--f-kicker);font-weight:600;letter-spacing:1px;text-transform:uppercase;font-size:12.5px}
.ed-card .ball{position:absolute;right:-26px;bottom:-26px;width:120px;opacity:.05}

/* ---------- single edition ---------- */
.edition{padding:46px 0 60px}
.edition .crumbs{font-family:var(--f-kicker);text-transform:uppercase;letter-spacing:1.4px;font-size:12px;color:var(--muted);margin-bottom:18px}
.edition .kicker{font-family:var(--f-kicker);font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-size:14px}
.edition h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,5.5vw,3.4rem);line-height:1.04;margin:10px 0 0;text-transform:none;letter-spacing:.3px;max-width:20ch}
.edition .meta{color:var(--muted);font-size:13.5px;margin-top:16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.edition .rule{height:3px;width:70px;background:var(--gold);margin:22px 0 0;border-radius:2px}
.entry{max-width:none;margin-top:26px;font-size:1.12rem;line-height:1.8;color:#e9e3da}
.entry-wrap{display:grid;grid-template-columns:minmax(0,720px);justify-content:center}
.entry p{margin:0 0 1.25em}
.entry h2,.entry h3,.entry h4{font-family:var(--f-display);font-weight:400;color:var(--gold);text-transform:uppercase;letter-spacing:.4px;line-height:1.1;margin:1.7em 0 .5em}
.entry h2{font-size:1.7rem}.entry h3{font-size:1.4rem}.entry h4{font-size:1.18rem;color:var(--cream)}
.entry strong,.entry b{color:#fff}
.entry a{text-decoration:underline}
.entry ul,.entry ol{padding-left:1.3em;margin:0 0 1.25em}
.entry li{margin:.3em 0}
.entry blockquote{margin:1.6em 0;padding:.2em 0 .2em 22px;border-left:3px solid var(--gold);font-family:var(--f-display);font-weight:400;font-size:1.5rem;line-height:1.2;color:var(--cream);text-transform:none}
.entry img{border-radius:10px;margin:1.4em auto}
.entry table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.95rem}
.entry th,.entry td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.entry th{background:var(--navy-2);font-family:var(--f-kicker);text-transform:uppercase;letter-spacing:.5px;color:var(--gold)}
.edition-foot{max-width:720px;margin:40px auto 0;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- subscribe band ---------- */
.subband{background:linear-gradient(180deg,var(--navy-2),#0c1830);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;padding:56px 0}
.subband h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.8rem,5vw,2.8rem);text-transform:uppercase;margin:0 0 6px}
.subband p{color:var(--muted);margin:0 0 22px}

/* ---------- page (generic) ---------- */
.page-body{padding:46px 0 60px}
.page-body h1{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(2rem,5vw,3rem);margin:0 0 18px}
.page-body .entry{max-width:720px;margin-inline:auto}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-2);border-top:1px solid var(--line);padding:40px 0 30px;color:var(--muted);font-size:14px}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.site-footer .fbrand{display:flex;align-items:center;gap:10px}
.site-footer .fbrand img{width:30px;height:30px}
.site-footer .fbrand b{font-family:var(--f-display);font-weight:400;color:var(--cream);letter-spacing:.5px;text-transform:uppercase;font-size:17px}
.site-footer nav{display:flex;gap:18px;flex-wrap:wrap}
.site-footer nav a{color:var(--muted);font-family:var(--f-kicker);text-transform:uppercase;letter-spacing:1px;font-size:12.5px}
.site-footer nav a:hover{color:var(--gold)}
.site-footer .copy{width:100%;border-top:1px solid var(--line);margin-top:8px;padding-top:16px;font-size:12.5px;color:#6f80a0}

@media(max-width:760px){
  .nav{gap:15px}.nav a:not(.pill){display:none}
  .brand b{font-size:18px}
  .section-head h2{font-size:1.5rem}
}

/* ===== ported edition enrichment (result bars, player cards, pull-quotes) ===== */
:root{
  --line-strong:rgba(255,255,255,.18);
  --cream-dim:var(--muted);
  --font-display:var(--f-display);
  --font-ui:var(--f-kicker);
  --font-body:var(--f-body);
  --ease:cubic-bezier(.4,0,.2,1);
  --gold-text:var(--gold);
  --radius-sm:10px;
  --shadow:0 16px 44px rgba(0,0,0,.5);
}
/* ===== match result header (built by reading.js from the scoreline) ===== */
.result{display: inline-flex; align-items: center; gap: 16px; margin: .2em 0 1.25em; padding: 9px 18px; background: var(--navy-2); border: 1px solid var(--line-strong); border-radius: 999px; font-family: var(--font-display); line-height: 1;}
.result .r-team{font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cream-dim);}
.result .r-team.r-win{color: var(--cream);}
.result .r-score{display: inline-flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums;}
.result .r-score b{font-weight: 600; font-size: 1.3rem; color: var(--gold);}
.result .r-score i{font-style: normal; color: var(--cream-dim);}
.result .r-score span{font-weight: 600; font-size: 1.3rem; color: var(--cream-dim);}
.result{gap: 12px; padding: 8px 14px;}
.result .r-team{font-size: .9rem;}
.result .r-score b, .result .r-score span{font-size: 1.15rem;}
/* ===== pull-quote (curated, built by reading.js) ===== */
.prose blockquote.pull{margin: 1.8em 0; padding: 6px 0 6px 26px; border: 0; border-left: 4px solid var(--gold); font-family: var(--font-display); font-weight: 600; font-style: normal; font-size: clamp(1.55rem, 1rem + 1.7vw, 2.1rem); line-height: 1.16; letter-spacing: -.01em; color: var(--cream);}
.prose blockquote.pull{padding-left: 18px;}
/* ===== player cards (player-cards.js) ===== */
.player-link{color: var(--cream); border-bottom: 1px dotted rgba(232,160,32,.7); cursor: help; transition: color .12s var(--ease), border-color .12s var(--ease);}
.player-link:hover, .player-link:focus-visible{color: var(--gold); border-bottom-color: var(--gold); outline: none;}
.player-card{position: fixed; z-index: 80; width: 268px; max-width: calc(100vw - 16px); background: var(--navy-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 14px 15px; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .14s var(--ease), transform .14s var(--ease); font-family: var(--font-body);}
.player-card.show{opacity: 1; transform: none; pointer-events: auto;}
.pc-head{display: flex; align-items: center; gap: 10px; margin-bottom: 12px;}
.pc-dot{width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.08);}
.pc-name{display: flex; flex-direction: column; line-height: 1.2; min-width: 0;}
.pc-name strong{font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--cream);}
.pc-club{font-size: .8rem; color: var(--cream-dim);}
.pc-stats{display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 8px; margin-bottom: 12px;}
.pc-stat{background: var(--navy); border: 1px solid var(--line); border-radius: 8px; padding: 7px 4px; text-align: center;}
.pc-stat b{display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1;}
.pc-stat span{display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cream-dim); margin-top: 4px;}
.pc-source{display: block; font-size: .72rem; color: var(--cream-dim); border-top: 1px solid var(--line); padding-top: 9px;}
.pc-source:hover{color: var(--gold); text-decoration: none;}
.pc-club-link{color: inherit;}
.pc-club-link:hover{color: var(--gold-text);}
.pc-cta{display: block; margin-bottom: 11px; font-family: var(--font-display); font-weight: 600; font-size: .82rem; letter-spacing: .02em; color: var(--gold-text);}
.pc-cta:hover{color: var(--gold); text-decoration: none;}
.pc-form{display: flex; gap: 4px; margin-bottom: 11px;}
/* ===== In-article match-detail drawer (click a result bar to expand) ===== */
.result-toggle{-webkit-appearance: none; appearance: none; cursor: pointer; color: inherit; transition: border-color .14s var(--ease);}
.result-toggle:hover, .result-toggle:focus-visible{border-color: var(--gold); outline: none;}
.result-toggle:focus-visible{box-shadow: 0 0 0 2px rgba(232,160,32,.35);}
.result-toggle .r-caret{display: inline-flex; align-items: center; margin-left: 2px; color: var(--cream-dim); font-size: .8rem; line-height: 1; transition: transform .2s var(--ease), color .14s var(--ease);}
.result-toggle:hover .r-caret{color: var(--gold);}
.result-toggle[aria-expanded="true"] .r-caret{transform: rotate(180deg); color: var(--gold);}
.md-strip .pc-stat{border: 0; border-radius: 0; background: var(--navy-2); padding: 12px 6px;}
.md-line .pc-dot{display: inline-block; width: 9px; height: 9px; margin-right: 7px; box-shadow: none;}
.md-line .player-link{color: var(--cream);}
.md-panel .pc-source{padding: 0; border-top: 0; margin-top: 14px;}
.player-link:focus-visible, .team-link:focus-visible{outline: 2px solid var(--gold); outline-offset: 2px;}
.result-toggle:focus-visible, .md-tab:focus-visible{outline: 2px solid var(--gold); outline-offset: 2px;}