/*
 * Header, sidebar and homepage features, in the theme's own vocabulary:
 *  - colour: the one brand accent (--accent) used as solid blocks, plus ink and the
 *    neutral surfaces. No gradients, no coloured glows. W/D/L form colours are data, not decoration.
 *  - shape: cards use --r-box (20px); inner tiles and icon squares 12px; buttons/chips are pills.
 *  - motion: hover/press feedback and the theme's scroll reveal only. The single looping
 *    animation is the "live" dot, shown only while today's Bet of the Day is published.
 * ALL CAPS is used for the top navigation and the sidebar only (client request).
 */

/* ---- Bet of the Day pill (header row 1) ---- */
.botd-pill { display:none; align-items:center; gap:10px; min-width:0; max-width:480px; height:40px; margin:0 auto; padding:0 14px; border-radius:var(--r-pill); background:var(--surface); color:var(--ink); font-size:14px; box-shadow:0 0 0 1px var(--line-strong); transition:box-shadow var(--dur-1) var(--ease-out), transform var(--dur-2) var(--spring); }
.botd-pill:hover { box-shadow:0 0 0 1px var(--accent), var(--shadow-sm); }
.botd-pill:active { transform:scale(.98); }
.botd-pill.is-live { box-shadow:0 0 0 1.5px var(--accent); }
.botd-pill__dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent); animation:live-dot 1.8s var(--ease-in-out) infinite; }
@keyframes live-dot { 50% { opacity:.35; } }
.botd-pill__label { flex:none; color:var(--accent-ink); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.botd-pill__text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); font-weight:560; }
.botd-pill.is-live .botd-pill__text { color:var(--ink); font-weight:620; }
.botd-pill__arrow { flex:none; color:var(--muted); transition:transform var(--dur-2) var(--spring), color var(--dur-1) var(--ease-out); }
.botd-pill:hover .botd-pill__arrow { color:var(--accent); transform:translateX(3px); }
@media (min-width:900px) { .botd-pill { display:inline-flex; } }

/* ---- Desktop header: logo row + menu row (menu row stays pinned) ---- */
.site-header__navrow { display:none; }
@media (min-width:1181px) {
	:root { --bar-h:60px; --nav-h:50px; --header-h:var(--nav-h); }
	.site-header { top:calc(var(--bar-h) * -1); }
	.admin-bar .site-header { top:calc(32px - var(--bar-h)); }
	.site-header__bar { height:var(--bar-h); }
	.site-header__navrow { display:block; border-top:1px solid var(--line); }
	.site-header__navrow .container { max-width:none; }
	.site-header__navrow .nav { margin:0; }
	.site-header__navrow .nav__list { height:var(--nav-h); gap:2px; }
	.site-header__navrow .nav__list > li > a { position:relative; padding:8px 12px; color:var(--ink); font-size:15px; font-weight:680; letter-spacing:.03em; text-transform:uppercase; }
	.site-header__navrow .nav__list > li > a:hover,
	.site-header__navrow .nav__list > li:focus-within > a { color:var(--ink); background:var(--line); }
	/* Current section: a short accent bar, the same red as the logo. */
	.site-header__navrow .nav__list > .current-menu-item > a::after,
	.site-header__navrow .nav__list > .current-menu-ancestor > a::after { content:""; position:absolute; left:12px; right:12px; bottom:-6px; height:2px; border-radius:2px; background:var(--accent); }
	.site-header__navrow .nav .sub-menu a { font-size:13px; font-weight:620; letter-spacing:.03em; text-transform:uppercase; }
	/* Sidebar starts under both rows; moves up when row 1 has scrolled away. */
	.side-rail { top:calc(var(--bar-h) + var(--nav-h) + 1px); transition:top var(--dur-3) var(--ease-out); }
	.is-scrolled .side-rail { top:calc(var(--nav-h) + 1px); }
	.admin-bar .side-rail { top:calc(32px + var(--bar-h) + var(--nav-h) + 1px); }
	.admin-bar.is-scrolled .side-rail, .is-scrolled .admin-bar .side-rail { top:calc(32px + var(--nav-h) + 1px); }
}
@media (min-width:1181px) and (max-width:1320px) {
	.site-header__navrow .nav__list > li > a { padding:8px 8px; font-size:14px; }
	.site-header__navrow .nav__list > .current-menu-item > a::after,
	.site-header__navrow .nav__list > .current-menu-ancestor > a::after { left:8px; right:8px; }
}

/* ---- Sidebar: ALL CAPS, larger; icon tiles neutral, red when active ---- */
.side-rail__title { font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.side-rail__link { gap:12px; min-height:46px; padding:7px 10px; border-radius:12px; color:var(--ink); font-size:14px; font-weight:680; letter-spacing:.03em; text-transform:uppercase; }
.side-rail__icon { box-sizing:content-box; flex:none; width:18px; height:18px; padding:7px; border-radius:10px; background:var(--bg-2); color:var(--ink-2); transition:background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.side-rail__link:hover { background:var(--line); }
.side-rail__link:hover .side-rail__icon { background:var(--accent-soft); color:var(--accent-ink); }
.side-rail__link[aria-current] { background:var(--surface); box-shadow:0 0 0 1px var(--line), var(--shadow-sm); }
.side-rail__link[aria-current] .side-rail__icon { background:var(--accent-solid); color:#fff; }
.sheet .section-index a { text-transform:uppercase; letter-spacing:.03em; font-weight:680; }

/* Sidebar Bet of the Day: a solid brand-red block */
.botd-mini { display:grid; gap:4px; padding:14px 14px 15px; border-radius:16px; background:var(--accent-solid); color:#fff; transition:transform var(--dur-2) var(--spring), background-color var(--dur-1) var(--ease-out); }
.botd-mini:hover { background:var(--accent-solid-hover); }
.botd-mini:active { transform:scale(.98); }
body.acca .botd-mini, body.acca .botd-mini:hover { color:#fff; }
.botd-mini__label { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.9; }
.botd-mini__label .botd-pill__dot { background:#fff; }
.botd-mini strong { font-size:15px; font-weight:650; line-height:1.3; }
.botd-mini__meta { font-size:12.5px; opacity:.85; }
.botd-mini b { font-family:var(--mono); }

/* ---- Homepage spotlight: betslip + quick links ---- */
.spotlight { padding-top:clamp(28px,4vw,48px); padding-bottom:clamp(8px,2vw,16px); }
.spotlight__grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:20px; align-items:stretch; }

.betslip { display:flex; flex-direction:column; border-radius:var(--r-box); background:var(--surface); box-shadow:0 0 0 1px var(--line), var(--shadow-sm); overflow:hidden; }
.betslip__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px; background:var(--accent-solid); color:#fff; }
.betslip__title { margin:0; color:#fff; font-size:clamp(19px,1.8vw,22px); font-weight:680; letter-spacing:-.015em; }
.betslip__head time { font:560 13px var(--mono); opacity:.9; }
.betslip__body { padding:22px 24px 18px; }
.betslip__event { margin:0; color:var(--muted); font-size:14px; font-weight:560; }
.betslip__selection { margin:6px 0 0; color:var(--ink); font-size:clamp(24px,2.6vw,34px); font-weight:680; line-height:1.15; letter-spacing:-.028em; text-wrap:balance; }
.betslip__market { margin:8px 0 0; color:var(--ink-2); font-size:15px; }
/* Ticket tear: a betslip, so it reads as one. Notches cut into the card + a dashed fold. */
.betslip__tear { position:relative; height:20px; margin:0 -1px; background:radial-gradient(circle at 0 50%, var(--bg) 10px, transparent 10.5px) left / 20px 20px no-repeat, radial-gradient(circle at 100% 50%, var(--bg) 10px, transparent 10.5px) right / 20px 20px no-repeat; }
.betslip__tear::after { content:""; position:absolute; left:20px; right:20px; top:50%; border-top:1.5px dashed var(--line-strong); }
.betslip__foot { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; padding:14px 24px 22px; }
.betslip__foot .button { margin-left:auto; }
.betslip__odds, .betslip__book { display:grid; gap:2px; }
.betslip__odds span, .betslip__book span { color:var(--muted); font-size:13px; font-weight:560; }
.betslip__odds b { color:var(--accent-ink); font:650 clamp(26px,2.6vw,34px)/1.05 var(--mono); letter-spacing:-.04em; }
.betslip__book b { font-size:16px; font-weight:650; }
.betslip__odds--time b { color:var(--ink); }
.betslip__reason { margin:0; padding:0 24px 8px; color:var(--ink-2); font-size:14.5px; line-height:1.6; }
.betslip__note { margin:auto 0 0; padding:12px 24px 18px; color:var(--muted); font-size:12.5px; }
.betslip__match { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.betslip__team { display:grid; justify-items:start; gap:6px; padding:14px; border-radius:12px; background:var(--bg); }
.betslip__team .fd-logo { width:36px; height:36px; }
.betslip__team strong { font-size:18px; font-weight:650; letter-spacing:-.015em; }
.betslip__team > span:not(.fd-form) { color:var(--muted); font-size:13px; }

/* Quick links: four tiles, deliberately not identical. Lead tile solid red, second solid ink. */
.quicklinks { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.quicklink { position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:16px; min-height:128px; padding:18px; border-radius:var(--r-box); background:var(--surface); color:var(--ink); box-shadow:0 0 0 1px var(--line), var(--shadow-sm); transition:transform var(--dur-2) var(--spring), box-shadow var(--dur-2) var(--ease-out); }
.quicklink:hover { transform:translateY(-2px); box-shadow:0 0 0 1px var(--line-strong), var(--shadow-md); }
.quicklink:active { transform:scale(.98); }
.quicklink__icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--accent-soft); color:var(--accent-ink); }
.quicklink__icon .icon { width:22px; height:22px; }
.quicklink__text { display:grid; gap:3px; }
.quicklink__text strong { font-size:16px; font-weight:680; letter-spacing:-.012em; }
.quicklink__text span { color:var(--muted); font-size:13.5px; }
.quicklink__arrow { position:absolute; top:20px; right:18px; color:var(--muted); transition:transform var(--dur-2) var(--spring), color var(--dur-1) var(--ease-out); }
.quicklink:hover .quicklink__arrow { transform:translateX(4px); color:currentColor; }
.quicklinks > .quicklink:nth-child(1) { background:var(--accent-solid); color:#fff; box-shadow:none; }
.quicklinks > .quicklink:nth-child(2) { background:var(--ink); color:var(--bg); box-shadow:none; }
.quicklinks > .quicklink:nth-child(-n+2) .quicklink__icon { background:rgb(255 255 255 / .16); color:inherit; }
.quicklinks > .quicklink:nth-child(2) .quicklink__icon { background:color-mix(in srgb, var(--bg) 16%, transparent); }
.quicklinks > .quicklink:nth-child(-n+2) .quicklink__text span,
.quicklinks > .quicklink:nth-child(-n+2) .quicklink__arrow { color:inherit; opacity:.8; }
.quicklinks > .quicklink:nth-child(-n+2):hover { box-shadow:var(--shadow-md); }
body.acca .quicklinks > .quicklink:nth-child(1) { color:#fff; }
body.acca .quicklinks > .quicklink:nth-child(2) { color:var(--bg); }

/* ---- Top upcoming matches ---- */
.matches { padding-top:clamp(24px,3vw,40px); }
.matches .section__head { align-items:center; }
.matches__controls { display:flex; align-items:center; gap:6px; }
.matches__controls .text-link { margin-right:10px; }
.matches__nav { box-shadow:0 0 0 1px var(--line-strong); }
.matches__nav:disabled { opacity:.35; }
.matches__rail { grid-auto-columns:minmax(268px, 296px); gap:14px; margin:0; padding:4px 2px 14px; list-style:none; scroll-padding-inline:2px; }
.match-card { display:flex; flex-direction:column; gap:14px; height:100%; padding:16px; border-radius:var(--r-box); background:var(--surface); box-shadow:0 0 0 1px var(--line), var(--shadow-sm); transition:transform var(--dur-2) var(--spring), box-shadow var(--dur-2) var(--ease-out); }
.match-card:hover { transform:translateY(-2px); box-shadow:0 0 0 1px var(--line-strong), var(--shadow-md); }
.match-card:active { transform:scale(.98); }
.match-card__top { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:22px; }
.match-card__league { color:var(--muted); font-size:13px; font-weight:560; }
.match-card__tag { padding:3px 9px; border-radius:var(--r-pill); background:var(--accent-solid); color:#fff; font-size:12px; font-weight:650; }
.match-card__tag--today { background:var(--accent-soft); color:var(--accent-ink); }
.match-card__body { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
.match-card__teams { display:grid; gap:8px; min-width:0; }
.match-card__team { display:flex; align-items:center; gap:9px; min-width:0; }
.match-card__name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:15px; font-weight:620; }
.match-card__pos { flex:none; color:var(--muted); font:500 12px var(--mono); }
.match-card__when { display:grid; justify-items:end; gap:2px; padding-left:12px; border-left:1px solid var(--line); color:var(--muted); font-size:12px; }
.match-card__when b { color:var(--ink); font:620 17px var(--mono); }
.match-card__form { display:flex; justify-content:space-between; gap:8px; padding-top:12px; border-top:1px solid var(--line); }
.match-card__form .fd-form i { width:17px; height:17px; font-size:10px; }

@media (max-width:1024px) { .spotlight__grid { grid-template-columns:1fr; } }
@media (max-width:560px) {
	.quicklinks { gap:10px; }
	.quicklink { min-height:116px; padding:14px; }
	.quicklink__text strong { font-size:14.5px; }
	.quicklink__arrow { display:none; }
	.betslip__foot .button { margin-left:0; width:100%; justify-content:center; }
	.betslip__match { gap:10px; }
	.betslip__team { padding:12px; }
	.betslip__team strong { font-size:15.5px; }
	.betslip__team .fd-form i { width:15px; height:15px; font-size:9px; }
	.matches__controls .matches__nav { display:none; }
	.matches__controls .text-link { margin-right:0; }
}
@media (prefers-reduced-motion:reduce) { .botd-pill__dot { animation:none; } }