/* ====== Dark palette (mobile-first) ====== */
:root{
  --gh-bg:#0F1116; --gh-surface:#161A23; --gh-surface-2:#1A1D26;
  --gh-text:#E4E6EB; --gh-muted:#9BA3B0;
  --gh-primary:#1E90FF; --gh-primary-600:#4AA3FF;
  --gh-border:#2A2E3B; --gh-success:#27AE60; --gh-danger:#FF4C4C;
  --gh-radius:14px; --gh-radius-lg:18px;
  --gh-pad:14px; --gh-gap:12px;
}

/* Respect user prefers-color-scheme if needed */
@media (prefers-color-scheme: light){
  /* you can invert to light if you ever need it */
}

body.gh-dark{
  background:var(--gh-bg);
  color:var(--gh-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:var(--gh-primary); text-decoration:none; }
a:hover{ color:var(--gh-primary-600); }

/* ====== Header ====== */
.gh-header .navbar{
  background:var(--gh-surface);
  padding:.5rem .75rem;
}
.navbar-brand{ font-size:1.25rem; letter-spacing:.2px; }
.navbar-nav .nav-link{
  padding:.5rem .75rem; border-radius:10px;
}
.navbar-nav .nav-link:focus, .navbar-nav .nav-link:hover{
  background:rgba(255,255,255,.06);
}

/* ====== Page title ====== */
.gh-title{ line-height:1.25; }

/* ====== Fixtures wrapper ====== */
.gh-fixtures{
  display:grid; gap:var(--gh-gap);
}

/* Generic item targets (works with many shortcode markups) */
.gh-fixtures .match,
.gh-fixtures .fixture,
.gh-fixtures .row,
.gh-fixtures li,
.gh-fixtures .gh-match{
  background:var(--gh-surface-2);
  border:1px solid var(--gh-border);
  border-radius:var(--gh-radius);
  padding:var(--gh-pad);
  display:flex; flex-direction:column; gap:10px;
}

/* Meta + teams + actions blocks (opt-in if classes exist) */
.gh-fixtures .meta{ color:var(--gh-muted); font-size:.95rem; }
.gh-fixtures .teams{ font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gh-fixtures .teams img{ width:24px; height:24px; object-fit:contain; }
.gh-fixtures .actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Status badges */
.gh-badge{
  padding:.28rem .6rem; border-radius:10px; font-weight:700;
  font-size:.82rem; background:#2a2e3b; color:#d6d9df;
}
.gh-badge.live{ background:var(--gh-danger); color:#fff; }
.gh-badge.finished{ background:var(--gh-success); color:#fff; }

/* CTA button */
.gh-btn{
  background:var(--gh-primary); color:#fff; border-radius:10px;
  padding:.5rem .9rem; font-weight:600;
}
.gh-btn:hover{ background:var(--gh-primary-600); color:#fff; }

/* ====== Larger screens: lay out horizontally ====== */
@media (min-width: 640px){
  .gh-fixtures .match,
  .gh-fixtures .fixture,
  .gh-fixtures .row,
  .gh-fixtures li,
  .gh-fixtures .gh-match{
    flex-direction:row; justify-content:space-between; align-items:center;
  }
}

/* ====== Touch targets & forms ====== */
button, .btn, .nav-link, a { -webkit-tap-highlight-color: transparent; }
.navbar-toggler{ padding:.6rem .7rem; }

/* ====== Tables from shortcode (if any) ====== */
.gh-fixtures table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--gh-surface-2); border:1px solid var(--gh-border);
  border-radius:var(--gh-radius); overflow:hidden;
}
.gh-fixtures th, .gh-fixtures td{
  padding:.7rem .8rem; border-bottom:1px solid var(--gh-border);
}
.gh-fixtures tr:last-child td{ border-bottom:none; }
.gh-fixtures th{ color:#fff; background:#12151c; }


/* Dropdowns in dark header (Understrap + Bootstrap 5) */
.gh-header .navbar .dropdown-menu{
  background: var(--gh-surface-2);
  border: 1px solid var(--gh-border);
  border-radius: 12px;
  padding: .4rem;
  min-width: 12rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  z-index: 1080; /* поверх навбару */
}

/* align to the right under the toggle */
.gh-header .navbar .dropdown-menu[data-bs-popper]{
  right: 0;
  left: auto;
}

.gh-header .navbar .dropdown-item{
  color: var(--gh-text);
  border-radius: 8px;
  padding: .5rem .8rem;
}
.gh-header .navbar .dropdown-item:hover,
.gh-header .navbar .dropdown-item:focus{
  background: rgba(255,255,255,.08);
  color: #fff;
}

.gh-header .navbar .dropdown-divider{
  border-top-color: var(--gh-border);
}

/* make the little caret visible on dark bg */
.gh-header .navbar .dropdown-toggle::after{
  border-top-color: var(--gh-text);
  border-right-color: var(--gh-text);
  border-left-color: var(--gh-text);
}

/* optional: remove default link underline inside dropdowns */
.gh-header .navbar .dropdown-item,
.gh-header .navbar .dropdown-item:hover{
  text-decoration: none;
}