/*
Theme Name: GeniusBet Sports
Theme URI: https://portal.geniusbet.es
Author: FrancoGlobal
Author URI: https://francoglobal.com
Description: Custom theme for GeniusBet Sports SEO platform. No Elementor. Pure code templates with CSS variables for dark/light theming.
Version: 1.3.1
License: Proprietary
Text Domain: geniusbet-sports
Requires at least: 6.0
Requires PHP: 8.0
*/


/* ╔══════════════════════════════════════════════════════════════════════════════╗
   ║                                                                            ║
   ║   🤖 AI INSTRUCTIONS — READ THIS BEFORE MODIFYING ANYTHING                ║
   ║                                                                            ║
   ║   This is the SINGLE GLOBAL STYLESHEET for the entire site.                ║
   ║   ALL styles live here. No inline styles. No per-page CSS files.           ║
   ║                                                                            ║
   ║   STRUCTURE OF THIS FILE:                                                  ║
   ║                                                                            ║
   ║   SECTION 0 — AI Instructions & Rules (you are here)                       ║
   ║   SECTION 1 — Framework Base (universal, replicable across projects)       ║
   ║   SECTION 2 — Design Tokens (CSS custom properties, dark/light)            ║
   ║   SECTION 3 — Reset & Base Styles                                          ║
   ║   SECTION 4 — Layout System (grid, containers, page structure)             ║
   ║   SECTION 5 — Global Components (header, footer, subnav, ticker)           ║
   ║   SECTION 6 — Page Components (hero, headlines, sidebar, etc.)             ║
   ║   SECTION 7 — Data Components (scores, fixtures, transfers, tables)        ║
   ║   SECTION 8 — Utility Classes                                              ║
   ║   SECTION 9 — Animations & Transitions                                     ║
   ║   SECTION 10 — Responsive Breakpoints                                      ║
   ║   SECTION 11 — Brand Guidelines Page (internal reference)                  ║
   ║   SECTION 12 — WordPress Admin Overrides                                   ║
   ║                                                                            ║
   ║   RULES FOR AI:                                                            ║
   ║                                                                            ║
   ║   1. Font: ALWAYS 'DM Sans'. Never change. Weights 400-800.               ║
   ║   2. Header + Subnav: ALWAYS dark. Both themes. Never override.            ║
   ║   3. #BFF932 as text in light theme → FORBIDDEN. Use --accent-alt.         ║
   ║   4. Live indicators → ALWAYS #d00 with livePulse animation.              ║
   ║   5. New component? Add CSS here with section comment, never elsewhere.    ║
   ║   6. Comment format: /* ── COMPONENT: [ID] ComponentName ── */            /*
   ║   7. All spacing/colors/sizes via CSS variables, never hardcoded.          ║
   ║   8. Test BOTH dark and light themes after any change.                     ║
   ║   9. Meta key prefix: gb_ (matches, transfers, standings).                ║
   ║   10. No Elementor classes. No Bootstrap. Pure semantic CSS.               ║
   ║                                                                            ║
   ║   DATA FLOW:                                                               ║
   ║   Sports API → GeniusSEO Plugin → WordPress CPTs → Template Parts → CSS   ║
   ║                                                                            ║
   ║   NAMING CONVENTIONS:                                                      ║
   ║   CSS Classes: .component-name (hyphenated, descriptive)                   ║
   ║   States: .active, .live, .winner, .loser, .confirmed, .rumour, .loan     ║
   ║   Positions: .pos-ucl, .pos-uel, .pos-uecl, .pos-rel                     ║
   ║   Layout: .page-layout, .page-full, .sidebar, .main-content              ║
   ║   Component IDs: [CAT]-[NUM] → G-01, H-01, SC-01, etc.                   ║
   ║   Files: parts/[name].php, templates/page-[name].php                      ║
   ║                                                                            ║
   ╚══════════════════════════════════════════════════════════════════════════════╝ */


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 1 — FRAMEWORK BASE
   Universal foundation replicable across FrancoGlobal projects.
   To adapt for another project: replace Section 2 tokens + Section 5-7 components.
   ═══════════════════════════════════════════════════════════════════════════════ */

/*
   FRAMEWORK: FrancoGlobal Web System v1.0
   ────────────────────────────────────────
   This framework provides:
   - CSS custom properties architecture (dark/light theming)
   - Semantic class naming convention
   - Mobile-first responsive system
   - Component-based structure with template parts
   - AI-readable documentation in every section

   TO REPLICATE FOR A NEW PROJECT:
   1. Copy this file
   2. Replace Section 2 (tokens) with new project's design values
   3. Keep Section 1, 3, 4 as-is (framework universal)
   4. Replace Sections 5-7 with new project's components
   5. Update responsive breakpoints if needed (Section 10)
   6. Create matching Brand Guidelines page
*/


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 2 — DESIGN TOKENS
   Project: GeniusBet Sports
   Font: DM Sans (Google Fonts) — weights 400, 500, 600, 700, 800
   Base size: 14px
   Themes: dark (default), light (toggled via [data-theme="light"] on <html>)

   ⚠️  CRITICAL LEGIBILITY RULE:
   #BFF932 (Genius Green) is INVISIBLE as text on white backgrounds.
   ALL text-based accent usage in light theme MUST use --accent-alt (#5f7a00).
   This affects: see-all links, section labels, headline hovers, fixture times,
   transfer arrows, footer hovers, countdown text, sidebar badges, tab borders.
   Backgrounds, badges, and borders CAN keep #BFF932 in light theme.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Dark Theme (default) ── */
:root,
[data-theme="dark"] {
  /* ── Backgrounds ── */
  --bg-primary:       #0a0a0a;
  --bg-secondary:     #111111;
  --bg-card:          #191919;
  --bg-card-hover:    #222222;
  --bg-input:         #1e1e1e;

  /* ── Header & Subnav — ALWAYS dark, both themes ── */
  --bg-header:        #1a1a1a;
  --bg-subnav:        #252525;

  /* ── Accent ── */
  --accent:           #BFF932;
  --accent-hover:     #D4FF66;
  --accent-alt:       #BFF932;  /* In dark: same as accent */
  --accent-text:      #0a0a0a;  /* Text ON accent backgrounds */
  --accent-bg:        rgba(191, 249, 50, 0.08);
  --accent-bg-hover:  rgba(191, 249, 50, 0.14);

  /* ── Text ── */
  --text-primary:     #f5f5f5;
  --text-secondary:   #999999;
  --text-muted:       #666666;
  --text-on-dark:     rgba(255, 255, 255, 0.9);

  /* ── Borders ── */
  --border-color:     #2a2a2a;
  --border-hover:     #3a3a3a;
  --border-active:    var(--accent);

  /* ── Semantic Colors — SAME in both themes ── */
  --success:          #00c853;
  --warning:          #ff9100;
  --info:             #2196f3;
  --live-pulse:       #dd0000;

  /* ── Competition Colors ── */
  --ucl:              #1976d2;
  --uel:              #f57c00;
  --uecl:             #43a047;

  /* ── Shadows ── */
  --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:        0 8px 30px rgba(0, 0, 0, 0.5);

  /* ── Overlays ── */
  --overlay-dark:     rgba(0, 0, 0, 0.7);
  --overlay-gradient: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}

/* ── Light Theme ── */
[data-theme="light"] {
  --bg-primary:       #f5f5f7;
  --bg-secondary:     #ededf0;
  --bg-card:          #ffffff;
  --bg-card-hover:    #f7f7f9;
  --bg-input:         #f0f0f2;

  /* Header & Subnav — STILL DARK (never changes) */
  --bg-header:        #1a1a1a;
  --bg-subnav:        #252525;

  /* Accent — bg stays green, TEXT uses dark alt for legibility */
  --accent:           #BFF932;
  --accent-hover:     #D4FF66;
  --accent-alt:       #5f7a00;  /* ⚠️ TEXT accent in light theme */
  --accent-text:      #0a0a0a;
  --accent-bg:        rgba(191, 249, 50, 0.10);
  --accent-bg-hover:  rgba(191, 249, 50, 0.18);

  --text-primary:     #111114;
  --text-secondary:   #6b6b73;
  --text-muted:       #9a9aa0;
  --text-on-dark:     rgba(255, 255, 255, 0.9);

  --border-color:     rgba(0, 0, 0, 0.08);
  --border-hover:     rgba(0, 0, 0, 0.15);
  --border-active:    var(--accent);

  --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:        0 8px 30px rgba(0, 0, 0, 0.12);

  --overlay-dark:     rgba(0, 0, 0, 0.5);
  --overlay-gradient: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}

/* ── Layout Tokens (theme-independent) ── */
:root {
  /* ── Structure ── */
  --max-content:      1280px;
  --sidebar-width:    300px;
  --header-height:    48px;
  --subnav-height:    44px;
  --ticker-height:    64px;
  --footer-gap:       40px;

  /* ── Spacing Scale ── */
  --space-xs:         4px;
  --space-sm:         8px;
  --space-md:         12px;
  --space-lg:         16px;
  --space-xl:         20px;
  --space-2xl:        24px;
  --space-3xl:        32px;
  --space-4xl:        48px;

  /* ── Border Radius ── */
  --radius-xs:        2px;
  --radius-sm:        4px;
  --radius-md:        6px;
  --radius-lg:        10px;
  --radius-xl:        16px;
  --radius-full:      100px;

  /* ── Typography ── */
  --font-main:        'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:        'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --font-base:        14px;
  --line-height-body: 1.6;
  --line-height-tight: 1.15;

  /* ── Transitions ── */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:      cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:    0.15s;
  --duration-normal:  0.25s;
  --duration-slow:    0.4s;

  /* ── Z-Index Scale ── */
  --z-base:           1;
  --z-dropdown:       10;
  --z-sticky:         50;
  --z-header:         100;
  --z-overlay:        200;
  --z-modal:          300;
  --z-toast:          400;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 3 — RESET & BASE STYLES
   Universal reset. No project-specific styles here.
   ═══════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-base);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: thin;
  scrollbar-color: #333 var(--bg-primary);
}

body {
  font-family: var(--font-main);
  font-weight: 400;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  line-height: var(--line-height-body);
  min-height: 100vh;
  overflow-x: hidden;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--duration-fast);
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  outline: none;
  transition: border-color var(--duration-fast);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
}

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Selection */
::selection {
  background: var(--accent);
  color: var(--accent-text);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 4 — LAYOUT SYSTEM
   Grid patterns, containers, page structure.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Main Container ── */
.site-container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

/* ── Page Layout: Main + Sidebar ──
   Used by: page-home, page-scores, page-fixtures, page-transfers,
            page-tables, page-worldcup
   Template: <div class="page-layout"><main class="main-content">...</main><aside class="sidebar">...</aside></div>
*/
.page-layout {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--space-xl);
  align-items: start;
}

/* ── Full Width Layout ──
   Used by: page-leagues, page-teams
   Template: <div class="page-full"><main class="main-content">...</main></div>
*/
.page-full {
  display: grid;
  grid-template-columns: 1fr;
}

.main-content {
  min-width: 0; /* Prevent grid blowout */
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ── Section spacing ── */
.section {
  margin-bottom: var(--space-3xl);
}

/* ── Site wrapper ──
   Opens in header.php, closes in footer.php.
   Ensures main content flows below sticky header + subnav + ticker.
*/
.site-wrapper {
  min-height: calc(100vh - var(--header-height));
  padding-top: var(--space-xl);
  padding-bottom: var(--space-4xl);
}

/* ── Content grids ──
   AI: Use these for repeating card layouts.
   stories-grid = 3 cols (home stories)
   leagues-grid = auto-fill 200px min (league cards)
   teams-grid = auto-fill 180px min (team cards)
   groups-grid = auto-fill 280px min (WC groups)
*/
.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.leagues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-sm);
}

.groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 5 — GLOBAL COMPONENTS
   These appear on EVERY page. Loaded via header.php / footer.php.
   AI: Never recreate these. They are shared. Modify only here.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── COMPONENT: G-01 Header ──
   File: parts/header.php
   Always dark (--bg-header). Contains: logo, sport tabs, search, theme toggle, user menu.
   Height: var(--header-height) = 48px
*/
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg-header);
  height: var(--header-height);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.header-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: flex;
  align-items: center;
  height: 100%;
  gap: var(--space-xl);
}

.header-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: var(--header-height);
}

.header-logo img {
  height: 20px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ── COMPONENT: G-02 Sport Tabs ──
   File: parts/header.php (inside header)
   Horizontal tabs: Football, Basketball, Tennis, etc.
   Active tab has --accent bottom border.
   These map to WordPress menu: 'sport-tabs'
*/
.sport-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.sport-tabs::-webkit-scrollbar { display: none; }

.sport-tab {
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0 var(--space-lg);
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}

.sport-tab:hover {
  color: rgba(255, 255, 255, 0.8);
}

.sport-tab.active {
  color: #fff;
  border-bottom-color: var(--accent);
}

/* ── COMPONENT: G-03 Theme Toggle ──
   File: parts/header.php (inside header)
   Button that toggles [data-theme] on <html>.
   JS in assets/js/theme-toggle.js
*/
.theme-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--duration-fast), background var(--duration-fast);
}

.theme-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* ── Header right area (search, toggle, user) ── */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}

.header-search {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  color: rgba(255, 255, 255, 0.4);
  font-size: .78rem;
  transition: border-color var(--duration-fast);
  cursor: pointer;
}

.header-search:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.header-search svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Mobile hamburger ── */
.header-burger {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
}

.header-burger svg {
  width: 20px;
  height: 20px;
}

/* ── COMPONENT: G-04 Subnav ──
   File: parts/subnav.php
   Always dark (--bg-subnav). Contains page-level tabs.
   Example: Scores | Fixtures | Tables | Transfers | Teams | Leagues
   Maps to WordPress menu: 'football-subnav'
*/
.subnav {
  background: var(--bg-subnav);
  height: var(--subnav-height);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.subnav-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar { display: none; }

.subnav-link {
  display: flex;
  align-items: center;
  height: var(--subnav-height);
  padding: 0 var(--space-lg);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}

.subnav-link:hover {
  color: rgba(255, 255, 255, 0.75);
}

.subnav-link.active {
  color: #fff;
  border-bottom-color: var(--accent);
}

/* ── COMPONENT: G-05 Scores Ticker ──
   File: parts/ticker.php
   Horizontal scrollable strip of live/recent scores.
   Appears below subnav on all football pages.
*/
.scores-ticker {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-sm) 0;
  overflow: hidden;
}

.ticker-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scrollbar-width: none;
}
.ticker-inner::-webkit-scrollbar { display: none; }

.ticker-card {
  flex: 0 0 auto;
  min-width: 130px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  transition: border-color var(--duration-fast);
}

.ticker-card:hover {
  border-color: var(--border-hover);
}

.ticker-card.live {
  border-left: 2px solid var(--live-pulse);
}

.ticker-status {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.ticker-status.live {
  color: var(--live-pulse);
}

.ticker-team {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .72rem;
  padding: 1px 0;
}

.ticker-team-name {
  font-weight: 500;
}

.ticker-score {
  font-weight: 700;
  min-width: 12px;
  text-align: right;
}

.ticker-score.winner {
  color: var(--text-primary);
}

.ticker-score.loser {
  color: var(--text-muted);
}

/* ── COMPONENT: G-06 Footer ──
   File: parts/footer.php
   Dark background. Links, copyright, branding.
*/
.site-footer {
  background: var(--bg-header);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: var(--space-4xl) 0 var(--space-3xl);
  color: rgba(255, 255, 255, 0.4);
}

.footer-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}

.footer-col-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: var(--space-md);
}

.footer-link {
  display: block;
  font-size: .82rem;
  color: rgba(255, 255, 255, 0.45);
  padding: 3px 0;
  transition: color var(--duration-fast);
}

.footer-link:hover {
  color: var(--accent-alt);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .72rem;
}

.footer-logo-link {
  display: flex;
  align-items: center;
}

.footer-logo {
  height: 18px;
  width: auto;
  opacity: 0.5;
  transition: opacity var(--duration-fast);
}

.footer-logo-link:hover .footer-logo {
  opacity: 0.8;
}

/* ── COMPONENT: G-07 Mobile Drawer ──
   File: parts/drawer.php
   Off-canvas menu for mobile. Slides from left.
*/
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--duration-normal), visibility var(--duration-normal);
}

.mobile-drawer.open {
  visibility: visible;
  opacity: 1;
}

.drawer-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-dark);
  backdrop-filter: blur(8px);
}

.drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: var(--bg-header);
  padding: var(--space-2xl);
  transform: translateX(-100%);
  transition: transform var(--duration-normal) var(--ease-out);
  overflow-y: auto;
}

.mobile-drawer.open .drawer-panel {
  transform: translateX(0);
}

.drawer-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-2xl);
}

.drawer-link {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  padding: var(--space-md) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.drawer-link.active {
  color: var(--accent);
}

/* ── COMPONENT: G-08 Overlay (for modals, drawers) ── */
.site-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--overlay-dark);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal);
}

.site-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ── COMPONENT: G-09 Search Modal ──
   File: header.php (inline)
   Premium floating search modal with tags, results, quick actions.
   Adapted from Codegrid design. All classes prefixed with sm- to avoid conflicts.
   Opened by: #gb-search-open (header button) or Ctrl+K / ⌘K
   Closed by: ESC, clicking backdrop, or clicking a quick action
   JS: assets/js/navigation.js (search section)

   ALWAYS DARK — this modal never changes with theme toggle.
   It floats over everything like the header. Uses forced dark values
   but still references our spacing, radius, font, and transition tokens.

   Token mapping for forced-dark context:
   - Text white: var(--text-on-dark)
   - Text gray: var(--text-muted)  → resolves to #666 in dark
   - Borders: rgba(255,255,255,0.08) → glass effect, intentional
   - Backgrounds: glass gradient → intentional for overlay feel
   - Spacing: var(--space-*) tokens
   - Radius: var(--radius-*) tokens
   - Transitions: var(--duration-*) + var(--ease-*) tokens
   - Accent: var(--accent), var(--accent-text) tokens
*/

/* Backdrop — full screen, blurred dark overlay */
.sm-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--overlay-dark);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal), visibility var(--duration-normal);
}

.sm-backdrop.open {
  opacity: 1;
  visibility: visible;
}

/* Modal container — glass dark panel */
.sm-modal {
  width: 520px;
  max-width: 95vw;
  max-height: 75vh;
  background: linear-gradient(320deg, rgba(27, 27, 27, 0.92), rgba(20, 20, 20, 0.97));
  backdrop-filter: blur(20px);
  color: var(--text-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.05);
  animation: smFadeInUp var(--duration-normal) var(--ease-out);
}

.sm-modal::-webkit-scrollbar { width: 4px; }
.sm-modal::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-xs); }

@keyframes smFadeInUp {
  from { opacity: 0; transform: translateY(var(--space-lg)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Search Bar ── */
.sm-bar {
  display: flex;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: var(--space-md);
}

.sm-bar-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.sm-form {
  flex: 1;
  display: flex;
}

.sm-input {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--font-main);
  font-size: 1.07rem;
  font-weight: 400;
  padding: 0;
}

.sm-input::placeholder {
  color: var(--text-muted);
}

.sm-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

/* Close button (X) — replaces old filter icon.
   Same icon style as header SVGs: stroke-width 2, round caps/joins.
   28×28 hit target for accessibility. */
.sm-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast), background var(--duration-fast);
  padding: 0;
  cursor: pointer;
  background: none;
  border: none;
}

.sm-close-btn svg {
  pointer-events: none;
}

.sm-close-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.sm-kbd {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px var(--space-sm);
  border-radius: var(--radius-md);
  font-size: .85rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

/* ── Filter Tags ── */
.sm-tags {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sm-tags-label {
  color: var(--text-muted);
  font-size: .93rem;
  display: block;
  margin-bottom: var(--space-md);
}

.sm-tags-list {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.sm-tag {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: rgba(255, 255, 255, 0.06);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  color: rgba(255, 255, 255, 0.6);
  font-size: .93rem;
  font-weight: 500;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.sm-tag:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.sm-tag.active {
  background: var(--accent);
  color: var(--accent-text);
}

.sm-tag.active svg { stroke: var(--accent-text); }

.sm-tag-x {
  opacity: 0.4;
  margin-left: 2px;
}

.sm-tag-x:hover {
  opacity: 1;
}

/* ── Results ── */
.sm-results {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sm-results-header {
  padding: var(--space-md) var(--space-lg);
  font-size: .93rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sm-results-count {
  color: #fff;
  font-weight: 600;
}

.sm-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sm-result-item {
  display: flex;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  gap: var(--space-md);
  cursor: pointer;
  transition: background var(--duration-fast);
  text-decoration: none;
  color: #fff;
}

.sm-result-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.sm-result-crest {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--accent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
}

.sm-result-crest img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sm-result-info {
  flex: 1;
  min-width: 0;
}

.sm-result-name {
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sm-result-meta {
  font-size: .85rem;
  color: var(--text-muted);
}

.sm-result-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--duration-fast);
}

.sm-result-item:hover .sm-result-arrow {
  opacity: 1;
}

.sm-result-empty {
  padding: var(--space-xl) var(--space-lg);
  font-size: .93rem;
  color: var(--text-muted);
  text-align: center;
}

/* ── Quick Actions ── */
.sm-actions {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sm-actions-header {
  padding: var(--space-md) var(--space-lg);
  font-size: .93rem;
  color: var(--text-muted);
}

.sm-action {
  display: flex;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  gap: var(--space-md);
  transition: background var(--duration-fast);
  cursor: pointer;
  text-decoration: none;
  color: #fff;
}

.sm-action:hover {
  background: rgba(255, 255, 255, 0.04);
}

.sm-action-icon {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.sm-action-label {
  flex: 1;
  font-size: 1rem;
  font-weight: 400;
}

.sm-action-key {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: .85rem;
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 6 — PAGE COMPONENTS
   Home page widgets, sidebar blocks, section headers.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── COMPONENT: H-01 Hero Card ──
   File: parts/hero-card.php
   Featured story. 16:9 image with gradient overlay, tag, title, meta.
   Data: gb_featured_image, title, category, author, date
*/
.hero-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: pointer;
}

.hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.hero-card:hover img {
  transform: scale(1.03);
}

.hero-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-2xl) var(--space-xl);
  background: var(--overlay-gradient);
}

.hero-card-tag {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-text);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  margin-bottom: var(--space-sm);
}

.hero-card-title {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: var(--line-height-tight);
  color: #fff;
  margin-bottom: var(--space-sm);
}

.hero-card-meta {
  font-size: .72rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ── COMPONENT: H-02 Section Header ──
   File: parts/section-header.php
   Title + optional "See All →" link.
   Args: title, see_all_url, see_all_text
*/
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-color);
}

.section-header h2 {
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.2px;
}

.see-all {
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent-alt);
  transition: opacity var(--duration-fast);
}

.see-all:hover {
  opacity: 0.7;
}

/* ── COMPONENT: H-03 Headline List ──
   File: parts/headline-list.php
   Vertical list with accent dots.
*/
.headline-list {
  display: flex;
  flex-direction: column;
}

.headline-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-color);
  transition: background var(--duration-fast);
}

.headline-item:last-child {
  border-bottom: none;
}

.headline-dot {
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.headline-title {
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.3;
  transition: color var(--duration-fast);
  cursor: pointer;
}

.headline-title:hover {
  color: var(--accent-alt);
}

.headline-meta {
  font-size: .68rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── COMPONENT: H-04 Stories Grid ──
   File: parts/stories-grid.php (uses parts/story-card.php)
   3-column grid of story cards.
*/
/* Uses .stories-grid from Section 4 */

/* ── COMPONENT: H-05 Story Card ──
   File: parts/story-card.php
   Smaller card: thumbnail, tag, title, meta.
*/
.story-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out),
              border-color var(--duration-fast);
  cursor: pointer;
}

.story-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-hover);
}

.story-card-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.story-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.story-card:hover .story-card-img img {
  transform: scale(1.05);
}

.story-card-body {
  padding: var(--space-md);
}

.story-card-tag {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--accent-alt);
  margin-bottom: var(--space-xs);
}

.story-card-title {
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: var(--space-xs);
}

.story-card-meta {
  font-size: .68rem;
  color: var(--text-muted);
}

/* ── COMPONENT: S-01 Sidebar Block ──
   File: parts/sidebar-block.php
   Container: header (title + badge) + list of items.
*/
.sidebar-block {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.sidebar-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-color);
}

.sidebar-block-title {
  font-size: .82rem;
  font-weight: 700;
}

/* ── COMPONENT: S-02 Sidebar Item ──
   File: parts/sidebar-item.php
   Ranked row: number + name (+ subtitle) + value.
*/
.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  font-size: .78rem;
  transition: background var(--duration-fast);
}

.sidebar-item:last-child {
  border-bottom: none;
}

.sidebar-item:hover {
  background: var(--bg-card-hover);
}

.sidebar-rank {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-card-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-item-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.sidebar-item-sub {
  font-size: .68rem;
  color: var(--text-muted);
  font-weight: 400;
}

.sidebar-item-value {
  font-weight: 700;
  flex-shrink: 0;
}

/* ── COMPONENT: S-03 Quick Links ──
   File: parts/quick-links.php
   Simple list of links inside sidebar block.
*/
.quick-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  font-size: .78rem;
  font-weight: 500;
  border-bottom: 1px solid var(--border-color);
  transition: background var(--duration-fast), color var(--duration-fast);
}

.quick-link:last-child { border-bottom: none; }
.quick-link:hover { background: var(--bg-card-hover); color: var(--accent-alt); }

/* ── COMPONENT: S-04 Sidebar Badge ──
   File: parts/sidebar-block.php (inside header)
   Small accent badge: season, count, etc.
*/
.sidebar-badge {
  font-size: .6rem;
  font-weight: 700;
  background: var(--accent);
  color: var(--accent-text);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  letter-spacing: .3px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 7 — DATA COMPONENTS
   Sports-specific: scores, fixtures, transfers, standings, world cup.
   Data comes from GeniusSEO plugin via gb_* meta keys.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── COMPONENT: SC-01 Date Nav ──
   File: parts/date-nav.php
   Horizontal date picker for scores page.
*/
.date-nav {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--space-md) 0;
}
.date-nav::-webkit-scrollbar { display: none; }

.date-tab {
  flex: 0 0 auto;
  padding: var(--space-sm) var(--space-lg);
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: all var(--duration-fast);
}

.date-tab:hover {
  border-color: var(--border-hover);
}

.date-tab.active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

/* ── COMPONENT: SC-03 League Block ──
   File: parts/league-block.php
   Groups matches by league/competition.
*/
.league-block {
  margin-bottom: var(--space-xl);
}

.league-block-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-sm);
}

.league-block-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.league-block-name {
  font-size: .78rem;
  font-weight: 700;
}

/* ── COMPONENT: SC-04 Match Row ──
   File: parts/match-row.php
   Single match line: time + teams with scores + status.
   Meta keys: gb_home_team, gb_away_team, gb_home_score, gb_away_score,
              gb_match_status, gb_match_minute, gb_match_time
*/
.match-row {
  display: flex;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-color);
  gap: var(--space-md);
  font-size: .78rem;
  transition: background var(--duration-fast);
}

.match-row:last-child { border-bottom: none; }
.match-row:hover { background: var(--bg-card-hover); }

.match-time {
  width: 40px;
  text-align: center;
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

.match-time.live {
  color: var(--live-pulse);
  font-weight: 700;
}

.match-teams {
  flex: 1;
  min-width: 0;
}

.match-team-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 0;
}

.match-team-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-team-name.winner {
  font-weight: 700;
}

.match-score {
  font-size: .85rem;
  font-weight: 700;
  min-width: 16px;
  text-align: right;
}

.match-score.loser {
  color: var(--text-muted);
}

.match-extra {
  font-size: .62rem;
  color: var(--text-muted);
  width: 50px;
  text-align: right;
  flex-shrink: 0;
}

/* ── COMPONENT: SC-05 Live Indicator ──
   Always red. Always animating. Used inside match-row and ticker.
*/
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live-pulse);
  animation: livePulse 1.5s ease-in-out infinite;
  margin-right: 4px;
  vertical-align: middle;
}

/* ── COMPONENT: FX-01 Filter Select ──
   File: parts/filter-select.php
   Dropdown select for filtering fixtures by competition.
*/
.filter-bar {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.filter-select {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}

/* ── COMPONENT: FX-03 Fixture Row ──
   File: parts/fixture-row.php
   Similar to match-row but for upcoming games: time in accent color.
*/
.fixture-row {
  display: flex;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-color);
  gap: var(--space-md);
  font-size: .78rem;
}

.fixture-row:last-child { border-bottom: none; }

.fixture-time {
  width: 48px;
  text-align: center;
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent-alt);
  flex-shrink: 0;
}

.fixture-teams {
  flex: 1;
}

.fixture-team-line {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 2px 0;
}

.fixture-venue {
  font-size: .65rem;
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
}

/* ── COMPONENT: TR-01 Window Badge ──
   File: parts/window-badge.php
   Transfer window status indicator.
*/
.window-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.window-badge.open {
  background: rgba(0, 200, 83, 0.1);
  color: var(--success);
}

.window-badge.closed {
  background: rgba(255, 145, 0, 0.1);
  color: var(--warning);
}

/* ── COMPONENT: TR-02 Type Tabs ──
   Tabs for: All, Confirmed, Loans, Rumours
*/
.type-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.type-tab {
  padding: var(--space-sm) var(--space-md);
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast);
}

.type-tab:hover { background: var(--bg-card-hover); }
.type-tab.active { background: var(--accent); color: var(--accent-text); }

/* ── COMPONENT: TR-03 Transfer Card ──
   File: parts/transfer-card.php
   Meta keys: gb_player_name, gb_player_position, gb_transfer_from,
              gb_transfer_to, gb_transfer_fee, gb_transfer_type
*/
.transfer-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast);
}

.transfer-card:hover {
  border-color: var(--border-hover);
}

.transfer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-card-hover);
  flex-shrink: 0;
  overflow: hidden;
}

.transfer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.transfer-info {
  flex: 1;
  min-width: 0;
}

.transfer-name {
  font-size: .82rem;
  font-weight: 700;
}

.transfer-position {
  font-size: .65rem;
  color: var(--text-muted);
}

.transfer-clubs {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: .72rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.transfer-arrow {
  color: var(--accent-alt);
  font-weight: 700;
}

.transfer-fee {
  font-size: .82rem;
  font-weight: 800;
  flex-shrink: 0;
}

.transfer-fee.confirmed { color: var(--success); }
.transfer-fee.loan { color: var(--info); }
.transfer-fee.rumour { color: var(--warning); font-style: italic; }

/* ── COMPONENT: TB-01 Standings Table ──
   File: parts/standings.php
   Meta keys: gb_team_position, gb_team_points, gb_team_form, gb_qualification
*/
.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}

.standings-table thead th {
  text-align: left;
  padding: var(--space-sm) var(--space-sm);
  font-size: .62rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 2px solid var(--border-color);
}

.standings-table thead th.center {
  text-align: center;
}

.standings-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background var(--duration-fast);
}

.standings-table tbody tr:hover {
  background: var(--bg-card-hover);
}

.standings-table tbody td {
  padding: var(--space-sm);
  vertical-align: middle;
}

.standings-table tbody td.center {
  text-align: center;
  color: var(--text-secondary);
}

.standings-table .team-name {
  font-weight: 600;
}

.standings-table .points {
  font-weight: 800;
  text-align: center;
}

/* ── COMPONENT: TB-02 Form Dots ──
   File: parts/standings.php (inline)
   Last 5 results: W (green), D (gray), L (red)
*/
.form-dots {
  display: inline-flex;
  gap: 2px;
}

.form-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .52rem;
  font-weight: 700;
  color: #fff;
}

.form-dot.w { background: var(--success); }
.form-dot.d { background: var(--text-muted); }
.form-dot.l { background: var(--live-pulse); }

/* ── COMPONENT: TB-03 Position Stripe ──
   Left border indicating qualification/relegation zone.
*/
.pos-ucl  { border-left: 3px solid var(--ucl); }
.pos-uel  { border-left: 3px solid var(--uel); }
.pos-uecl { border-left: 3px solid var(--uecl); }
.pos-rel  { border-left: 3px solid var(--live-pulse); }

/* ── COMPONENT: WC-01 World Cup Hero ──
   File: parts/wc-hero.php
   Gradient banner with event info.
*/
.wc-hero {
  background: linear-gradient(135deg, #1a237e, #311b92, #4a148c);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl) var(--space-2xl);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-xl);
}

.wc-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 60%);
  pointer-events: none;
}

.wc-hero-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-sm);
}

.wc-hero-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: #fff;
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-sm);
}

.wc-hero-sub {
  font-size: .82rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ── COMPONENT: WC-02 Group Card ──
   File: parts/wc-group.php
*/
.group-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.group-card-header {
  padding: var(--space-sm) var(--space-md);
  font-size: .75rem;
  font-weight: 700;
  background: var(--bg-card-hover);
  border-bottom: 1px solid var(--border-color);
}

/* ── COMPONENT: WC-03 Countdown ──
   File: parts/countdown.php (sidebar)
*/
.countdown {
  text-align: center;
  padding: var(--space-xl);
}

.countdown-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent-alt);
}

.countdown-label {
  font-size: .68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── COMPONENT: LG-01 League Card ──
   File: parts/league-card.php
*/
.league-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  transition: transform var(--duration-normal) var(--ease-out),
              border-color var(--duration-fast);
  cursor: pointer;
}

.league-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
}

.league-card-logo {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-sm);
  object-fit: contain;
}

.league-card-name {
  font-size: .78rem;
  font-weight: 700;
}

.league-card-country {
  font-size: .65rem;
  color: var(--text-muted);
}

/* ── COMPONENT: TM-01 Team Card ──
   File: parts/team-card.php
*/
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  transition: border-color var(--duration-fast);
  cursor: pointer;
}

.team-card:hover {
  border-color: var(--border-hover);
}

.team-card-crest {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.team-card-name {
  font-size: .78rem;
  font-weight: 600;
}

/* ── COMPONENT: TM-02 Teams Search ──
   File: parts/teams-search.php
*/
.teams-search {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-xl);
}

.teams-search input {
  border: none;
  background: none;
  flex: 1;
  font-size: .82rem;
  padding: 0;
}

.teams-search svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 8 — UTILITY CLASSES
   Reusable helpers. AI: prefer component classes over utilities.
   ═══════════════════════════════════════════════════════════════════════════════ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.text-accent { color: var(--accent-alt); }
.text-muted  { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-info    { color: var(--info); }
.text-live    { color: var(--live-pulse); }

.bg-accent   { background: var(--accent); color: var(--accent-text); }
.bg-card     { background: var(--bg-card); }

.font-mono   { font-family: var(--font-mono); }
.font-bold   { font-weight: 700; }
.font-heavy  { font-weight: 800; }

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 9 — ANIMATIONS & TRANSITIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Live Pulse — ALWAYS red, ALWAYS animating ── */
@keyframes livePulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}

/* ── Fade in on scroll (JS adds .visible) ── */
.fade-in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Skeleton loading ── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ── Toast notification ── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--accent);
  color: var(--accent-text);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  font-size: .78rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: all var(--duration-normal) var(--ease-out);
  z-index: var(--z-toast);
  box-shadow: 0 8px 32px rgba(191, 249, 50, 0.25);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 10 — RESPONSIVE BREAKPOINTS
   Mobile-first approach. Break at: 480, 768, 860, 1024, 1600, 2000

   AI RULES FOR RESPONSIVE:
   - ≤768px: hamburger visible, sport-tabs hidden, search hidden, venue hidden
   - ≤860px: sidebar stacks below main as 2-col grid
   - ≤1024px: sidebar narrows to 260px, stories 2-col
   - ≥1600px: max-content → 1440px, sidebar → 360px, font → 15px
   - ≥2000px: max-content → 1600px, sidebar → 400px, font → 16px
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Mobile: ≤480px ── */
@media (max-width: 480px) {
  html { font-size: 13px; }
  .hero-card { aspect-ratio: 4 / 3; }
  .stories-grid { grid-template-columns: 1fr; }
  .groups-grid { grid-template-columns: 1fr; }
  .site-container { padding: 0 var(--space-lg); }
}

/* ── Tablet: ≤768px ── */
@media (max-width: 768px) {
  .header-burger { display: flex; }
  .sport-tabs { display: none; }
  .header-search span { display: none; }
  .header-search { padding: 8px; border-radius: var(--radius-md); min-width: 36px; justify-content: center; }
  .header-search svg { width: 16px; height: 16px; }
  .fixture-venue { display: none; }
  .stories-grid { grid-template-columns: repeat(2, 1fr); }

  /* Search modal responsive */
  .sm-backdrop { padding-top: 6vh; }
  .sm-modal { max-width: 100%; margin: 0 var(--space-md); border-radius: var(--radius-lg); }
  .sm-kbd { display: none; }
  .sm-bar { padding: var(--space-sm) var(--space-md); }
  .sm-tags { padding: var(--space-sm) var(--space-md); }
  .sm-tag { font-size: .82rem; padding: var(--space-xs) var(--space-sm); }
  .sm-results-header { padding: var(--space-sm) var(--space-md); }
  .sm-result-item { padding: var(--space-sm) var(--space-md); }
  .sm-actions-header { padding: var(--space-sm) var(--space-md); }
  .sm-action { padding: var(--space-sm) var(--space-md); }
}

/* ── Stack sidebar: ≤860px ── */
@media (max-width: 860px) {
  .page-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

/* ── Narrow sidebar: ≤1024px ── */
@media (max-width: 1024px) and (min-width: 861px) {
  :root { --sidebar-width: 260px; }
  .stories-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Wide: ≥1600px ── */
@media (min-width: 1600px) {
  html { font-size: 15px; }
  :root {
    --max-content: 1440px;
    --sidebar-width: 360px;
  }
  .stories-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Ultra wide: ≥2000px ── */
@media (min-width: 2000px) {
  html { font-size: 16px; }
  :root {
    --max-content: 1600px;
    --sidebar-width: 400px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 11 — BRAND GUIDELINES PAGE
   Internal reference page. Only visible to admins.
   Template: templates/page-brand-guidelines.php
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Reserved for brand guidelines page styles */
/* Will be populated when the guidelines template is created */
.brand-page { /* placeholder */ }


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 12 — WORDPRESS ADMIN OVERRIDES
   Styles that apply only in wp-admin context or when logged in.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Offset sticky header when admin bar is visible */
body.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   END OF STYLESHEET
   ─────────────────
   To add new components:
   1. Find the correct section (5 = global, 6 = page, 7 = data)
   2. Add comment: /* ── COMPONENT: [ID] Name ── */
/*  3. Write styles using CSS variables only
   4. Update Brand Guidelines page
   ═══════════════════════════════════════════════════════════════════════════════ */