/* ===============================
   Global Variables
   =============================== */
:root {
  /* Backgrounds */
  --color-background: #0B0B0B;
  --post-color-background:  #0B0B0B; /* medium/large screens override below */
  --color-background-alt: #000000;
  --color-calendar-bg: #000000;
  --color-navbar-bg: #252424;

  /* Text */
  --color-text: #e4e4e4;
  --color-text-muted: #bbb;
  --color-text-light: #ddd;

  /* Accent & borders */
  --color-accent: #bf1616;
  --color-accent-hover: #ff0000;
  --color-border: #252323;
  --color-border-alt: #1D1D1D;

  /* Table colors */
  --table-stripe-odd: #000000;
  --table-stripe-even: var(--post-color-background);
  --table-head-bg: #040422;
  --table-head-text: #fff;
  --table-hover-bg: #1b1b1b;

  /* Team colors */
  --team-1-color-line: rgba(91, 218, 175, 1);
  --team-1-color-error: rgba(91, 218, 175, 0.4);
  --team-1-color-bar: lightseagreen;

  --team-2-color-line: rgb(12, 73, 190);
  --team-2-color-error: rgba(12, 73, 190,0.4);
  --team-2-color-bar: royalblue;
}

@media (min-width: 768px) {
  :root {
    --post-color-background: #101010; /* medium and larger screens */
  }
}

/* ===============================
   Base Elements
   =============================== */
body {
  background-color: var(--color-background);
  color: var(--color-text);
  padding-top: 1.5rem;
}

a {
  color: var(--color-text);
  text-decoration: none;
}

.site-title {
  font-size: 1rem;
  color: var(--color-text);
}

.footer {
  background-color: var(--color-background-alt);
}

.navbar {
  background-color: var(--color-navbar-bg);
}

/* ===============================
   Carousel
   =============================== */
.carousel-dynamic {
  height: 200px;
}

@media (min-width: 576px) {
  .carousel-dynamic { height: 200px; }
}
@media (min-width: 992px) {
  .carousel-dynamic { height: 300px; }
}

.carousel-dynamic img,
.carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.carousel {
  /* border styles commented out */
}

.carousel-title,
.carousel-subtitle {
  font-size: 1rem;
  color: var(--color-text);
}

.carousel-item,
.carousel-inner {
  height: 100%;
  width: 100%;
}

.carousel-text {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--color-text-light);
}

.custom-caption {
  padding-top: 0;
  padding-bottom: 0;
  left: 5%;
  right: 12%;
}

.carousel-btn {
  font-size: 0.6rem;
  padding: 6px 14px;
  border-radius: 8px;
  background-color: #1D1D1D;
  color: #E9F0FF;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}

.carousel-btn:visited {
  color: #E9F0FF;
}

.carousel-btn:hover,
.carousel-btn:focus {
  color: #E9F0FF;
  background-color: var(--color-accent);
}

.carousel-btn:hover {
  background-color: #f0f0f0;
  color: #000;
}

/* ===============================
   Tabs & Sections
   =============================== */
.custom-tabs {
  background: var(--color-background-alt);
  border-bottom: 2px solid var(--color-text);
  gap: 1.5rem;
}

.section-title {
  text-align: center;
  border-bottom: 3px solid var(--color-accent-hover);
  padding-bottom: 0.5rem;
}

.section-title h3 {
  font-size: 1.4rem;
  font-weight: 400;
  margin: 0;
}

/* Nav-tabs full width */
.nav-tabs .nav-item {
  width: 50%;
}

.nav-tabs .nav-item .nav-link {
  width: 100%;
}

.nav-tabs .nav-item.red-border {
  border-bottom: 2px solid var(--color-accent-hover);
}

.nav-tabs .nav-item.white-border {
  border-bottom: 2px solid var(--color-text);
}

/* ===============================
   Tables
   =============================== */
.game-table th,
.topbets-table th {
  font-size: 0.8rem;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
}

.game-table td,
.topbets-table td {
  font-size: 0.65rem;
  font-weight: 400;
  text-align: center;
}

.game-table thead tr:nth-of-type(odd),
.topbets-table thead tr:nth-of-type(odd) {
  background-color: transparent !important;
}

.remove-stripe {
  border-bottom: 0 !important;
}

.border-table {
  border: 1px solid var(--color-border);
}

.border-table tbody tr {
  border-top: 2px solid var(--color-border);
}

.rounded-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}


.game-table,
.topbets-table {
  margin-bottom: 0 !important;
}

.game-table.table-striped tbody tr:nth-of-type(odd) > *,
.topbets-table.table-striped tbody tr:nth-of-type(odd) > * {
  --bs-table-bg-type: var(--table-stripe-odd);
}

.game-table.table-striped tbody tr:nth-of-type(even),
.topbets-table.table-striped tbody tr:nth-of-type(even) {
  --bs-table-bg-type: var(--table-stripe-even);
}

.game-table thead th,
.topbets-table thead th {
  background-color: var(--table-head-bg);
  color: var(--table-head-text);
}

.game-table.table-hover tbody tr:hover,
.topbets-table.table-hover tbody tr:hover {
  --bs-table-bg-type: var(--table-hover-bg);
}

/* ===============================
   Buttons
   =============================== */
.btn,
.btn:visited {
  font-weight: 600;
  background: #090909;
  color: var(--color-text-muted);
  border: 2px solid var(--color-border-alt);
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  transition: all 0.2s ease;
}

.btn.disabled,
.btn:disabled {
  background: #090909;
  color: #555;
  border-color: var(--color-border-alt);
  opacity: 0.6;
}

.btn.active,
.btn:active {
  background: #2a2a2a;
  color: var(--color-text);
  border-color: #2a2a2a;
}

/* Sport nav button size */
.sport-nav .btn,
.date-paginator .btn {
  font-size: small;
  font-weight: 400;
}

/* ===============================
   Search Bar
   =============================== */
.search-bar {
  border: 1px solid #444;
  border-radius: 50rem;
}

.search-bar .form-control {
  background-color: transparent;
  color: var(--color-text) !important;
  border: none;
  box-shadow: none;
  font-weight: 600;
}

.search-bar .input-group-text {
  background: transparent;
  border: none;
  color: var(--color-text);
}

.search-bar .form-control::placeholder {
  color: var(--color-text-muted) !important;
  opacity: 1;
}

/* ===============================
   Match Header & Game Content
   =============================== */
.match-header {
  border-bottom: 4px solid var(--color-accent);
}

.match-header h1 {
  font-size: 1.3em;
  font-weight: 400;
  padding: 0.5rem;
  margin-bottom: 0.2rem;
}

.game-content {
  margin-top: 0.4rem;
}

.match-card {
  border-radius: 3rem;
  background-color: var(--color-background-alt);
  font-size: 0.6rem;
}

.match-card h6 {
  font-size: 0.8rem;
}


.match-card p {
  font-size: 0.7rem;
}

/* ===============================
   Game Subsections & Charts
   =============================== */
.game-subsection {
  border-bottom: 0.1rem dashed rgba(111,111,111,0.4);
  border-top: 0.1rem dashed rgba(111,111,111,0.4);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.game-subsection  h4,
.game-subsection  h3  {
  font-size: 1rem;
}

.game-subsection  h3  {
  font-size: 1rem;
}


.chart-container {
  width: 100%;
  height: 30vh;
}

@media (max-width: 1200px) { .chart-container { height: 50vh; } }
@media (max-width: 768px) { .chart-container { height: 60vh; } }
@media (max-width: 576px) { .chart-container { height: 40vh; } }

/* ===============================
   Calendar
   =============================== */



.wp-block-calendar {
  background: var(--color-calendar-bg);
  border: 1px solid #252323;
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden; /* prevent overflow */
}

/* Table structure */
#wp-calendar {
  width: 100%;
  table-layout: fixed; /* evenly divides columns */
  border-collapse: separate;
  border-spacing: 4px; /* gap between cells */
  color: #555;
}

/* Header cells */
#wp-calendar thead th {
  background: #6e6e6e !important;
  color: var(--table-head-text);
  text-transform: uppercase;
  text-align: center;
  border-radius: 0.6rem;
  border: none;
}

/* Day cells */
#wp-calendar td {
  background: #090909;
  border: none;
  border-radius: 0.6rem;
  color: #555;
  text-align: center;
}

/* Active / linked day states */
#wp-calendar td:has(a) { background: #3B414A; }
#wp-calendar td:has(a.selected) { background: #0066fe; }
#wp-calendar td.pad { background: var(--color-calendar-bg); }

/* Links inside day cells */
#wp-calendar td a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

#wp-calendar td a:visited {
  color: var(--color-text-muted);
}

/* Caption (Month name) */
#wp-calendar caption {
  position: relative;
  caption-side: top;
  text-align: center;
  font-weight: bold;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: var(--color-text);
}

#wp-calendar .cal-month { display: inline-block; }

/* Prev / Next buttons */
#wp-calendar .cal-prev,
#wp-calendar .cal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  text-decoration: none;
  color: inherit;
}

#wp-calendar .cal-prev { left: 0.5rem; }
#wp-calendar .cal-next { right: 0.5rem; }

/* Hide nav (WordPress default) */
.wp-calendar-nav { display: none !important; }


/* ===============================
   Cards & Posts
   =============================== */
@media (min-width: 768px) {
  .post,
  .team {
    background: var(--post-color-background);
    padding: 20px;
    margin-top: 20px;
    border-radius: 1rem;
    border: 1px #252323 solid;
  }
}

.card {
  border-radius: 1rem;
  border: 1px #252323 solid;
}

/* ===============================
   Sidebar Categories Widget
   =============================== */
.sidebar-categories {
  background-color: var(--color-background-alt);
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--color-border-alt);
}

.sidebar-categories h3 {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: bold;
  border-bottom: 2px dashed var(--color-border-alt);
  padding-bottom: 0.25rem;
  color: var(--color-text-light);
}

.sidebar-categories ul { list-style: none; padding-left: 0; margin: 0; }
.sidebar-categories li { margin-bottom: 0.5rem; position: relative; }

.sidebar-categories a {
  text-decoration: none;
  color: var(--color-text);
  display: block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  transition: background 0.2s, color 0.2s;
}

.sidebar-categories a:hover {
  background-color: var(--color-accent);
  color: var(--color-text-light);
}

.sidebar-categories li ul { display: none; margin-left: 1rem; }

.sidebar-categories li.has-children > a::after {
  content: '▸';
  position: absolute;
  right: 0.5rem;
  color: var(--color-text-muted);
}

.sidebar-categories li.has-children.open > a::after {
  content: '▾';
}

.sidebar-categories li ul a {
  padding-left: 1rem;
  font-size: 0.95em;
  color: var(--color-text-muted);
}

.sidebar-categories li ul a:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-text-light);
}

/* ===============================
   Page Header
   =============================== */
.page-header h1 {
  font-size: 2.2rem;
  font-weight: 600;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

@media (max-width: 768px) {
  .page-header h1 { font-size: 1.8rem; }
}

/* ===============================
   Misc
   =============================== */
.xdebug-error,
.xdebug-var-dump { color:black!important; }

.game-table td,
.game-table th { vertical-align: middle !important; }

.nav-tabs { border-bottom: none; }

.predictions-table thead tr th { font-size: 0.7rem; }

.game-subtitle { font-size: 0.7rem; }

.extra-small { font-size: 0.7rem; }