@font-face {
  font-family: "SiteInter";
  src: url("/wp-content/themes/twentytwentyfour/assets/fonts/inter/Inter-VariableFont_slnt,wght.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --site-font-family: "SiteInter", Arial, sans-serif;
}

/*
 * isports-unified.css — Global overrides for consistent look across all isports pages
 * Injected into all isports-*.php via mu-plugins
 * Must load AFTER each page's own <style> block
 * Version: 20260324
 */

/* ============================================================
   1. CONSISTENT TABLE HEADERS — match homepage bangkeo style
   ============================================================ */
table th,
.tbl th,
.card .head,
.standings-table th,
.league-header,
.cmp-table th {
  background: linear-gradient(90deg, #133058, #1b3f73) !important;
  color: #e8f0fe !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .2px;
}

/* Table rows consistent */
table td,
.tbl td,
.standings-table td,
.cmp-table td {
  font-size: 13px;
  color: #1f2733;
  border-bottom: 1px solid #e5e8ee;
}
table tbody tr:nth-child(even) td,
.standings-table tbody tr:nth-child(even) td {
  background: #f7f9fc;
}
table tbody tr:hover td,
.standings-table tbody tr:hover td {
  background: #eaf4ff;
}

/* ============================================================
   2. CARD / BLOCK HEADERS — consistent dark blue gradient
   ============================================================ */
.card .head,
.head,
.cs-head {
  background: linear-gradient(90deg, #133058, #0f2540) !important;
  color: #e8f0fe !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* ============================================================
   3. MOBILE RESPONSIVE — prevent overflow, ensure readability
   ============================================================ */
@media (max-width: 640px) {
  /* All data tables scroll horizontally */
  .wrap,
  .card,
  .league-block,
  .cmp-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Main wrap padding */
  .wrap {
    padding: 0 4px !important;
    margin: 6px auto !important;
  }

  /* Cards */
  .card {
    border-radius: 8px !important;
    margin-bottom: 8px !important;
  }

  /* Tables */
  table, .standings-table, .cmp-table {
    font-size: 11px !important;
  }
  table th, table td,
  .standings-table th, .standings-table td,
  .cmp-table th, .cmp-table td {
    padding: 6px 4px !important;
    font-size: 11px !important;
  }

  /* Match page hero */
  .hero {
    min-height: 170px !important;
    border-radius: 6px !important;
  }
  .hero-team {
    font-size: 16px !important;
  }
  .hero-score {
    font-size: 36px !important;
  }

  /* Match page bars */
  .bar-row {
    grid-template-columns: 36px 1fr 90px 1fr 36px !important;
    gap: 4px !important;
  }
  .bar-row.total-row {
    grid-template-columns: 80px 1fr 80px 1fr 80px !important;
  }
  .team-name {
    font-size: 11px !important;
  }
  .team-pct {
    font-size: 14px !important;
  }

  /* Company odds table */
  .cmp-table {
    min-width: 600px !important;
  }
  .cmp-company {
    min-width: 60px !important;
    font-size: 11px !important;
  }

  /* Events */
  .ev-row {
    grid-template-columns: 1fr 70px 1fr !important;
    font-size: 11px !important;
    padding: 5px 6px !important;
  }

  /* H2H */
  .h2h-goals {
    grid-template-columns: 40px 1fr 40px !important;
  }

  /* Upcoming */
  .upcoming-grid {
    grid-template-columns: 1fr !important;
  }

  /* Lineup pitch */
  .pitch {
    height: 300px !important;
  }
  .team-side .pname {
    display: none !important;
  }
  .bench {
    grid-template-columns: 1fr !important;
  }

  /* Stats rows */
  .ms-row {
    grid-template-columns: 28px 1fr 80px 1fr 28px !important;
    gap: 3px !important;
  }
  .ms-bar {
    height: 10px !important;
  }
  .ms-val {
    font-size: 11px !important;
  }
  .ms-label {
    font-size: 10px !important;
  }
}

@media (max-width: 420px) {
  .hero-team {
    font-size: 14px !important;
  }
  .hero-score {
    font-size: 30px !important;
  }
  .hero-mid {
    grid-template-columns: minmax(0,1fr) 80px minmax(0,1fr) !important;
  }
  .cmp-table {
    min-width: 520px !important;
  }
  .bar-row.total-row {
    grid-template-columns: 60px 1fr 60px 1fr 60px !important;
  }
  .total-label {
    font-size: 10px !important;
  }
}

/* ============================================================
   4. ACCENT / ACTION COLORS — consistent green/red
   ============================================================ */
.up, .cs-odd.up {
  color: #1b5e20 !important;
}
.down, .cs-odd.down {
  color: #c62828 !important;
}

/* ============================================================
   5. BREADCRUMB / NAV PANEL — when embedded in WP
   ============================================================ */
.isp-panel {
  max-width: 100% !important;
  overflow: hidden !important;
}
.isp-tabs {
  background: linear-gradient(90deg, #133058, #1b3f73) !important;
}
.isp-tab {
  color: #b8d0e8 !important;
  border-right-color: rgba(255,255,255,.1) !important;
}
.isp-tab:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.isp-tab--active {
  background: #2f9156 !important;
  color: #fff !important;
}