/* =============================================================
   Koora TV — assets/css/premium-polish.css
   Additive visual upgrade layer. Load this AFTER style.css and
   ktv-menu-pro.css (last <link> in header.php).

   Design goal: closer to ESPN / OneFootball polish — refined
   typography scale, real depth (shadows/blur), tighter spacing
   rhythm, smoother motion — WITHOUT touching structural markup,
   JS hooks (.mobile-menu-toggle, #themeToggle, .ktv-lang-switch,
   the Google-Translate-suppression rules) or breakpoints that
   the existing inline scripts depend on. Nothing here is !important
   unless it's overriding an existing !important rule — everything
   is additive, so if you ever need to roll back, just remove this
   one <link> tag and the site returns exactly to how it was.
   ============================================================= */

:root {
  /* Refined type scale (4px/8px rhythm) on top of the existing palette */
  --ktv-space-1: 4px;
  --ktv-space-2: 8px;
  --ktv-space-3: 12px;
  --ktv-space-4: 16px;
  --ktv-space-5: 24px;
  --ktv-space-6: 32px;
  --ktv-space-8: 48px;

  --ktv-radius-card: 14px;
  --ktv-shadow-1: 0 1px 2px rgba(0,0,0,.24), 0 1px 1px rgba(0,0,0,.12);
  --ktv-shadow-2: 0 8px 24px -8px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.2);
  --ktv-shadow-glow: 0 0 0 1px rgba(245,158,11,.18), 0 8px 28px -6px rgba(245,158,11,.16);
  --ktv-ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- Header: subtle depth + refined active pill ---------- */
.site-header {
  box-shadow: var(--ktv-shadow-1), 0 1px 0 rgba(245,158,11,.10);
}
.header-nav .nav-link {
  position: relative;
  transition: color .18s var(--ktv-ease), background .18s var(--ktv-ease), transform .18s var(--ktv-ease);
}
.header-nav .nav-link:hover {
  transform: translateY(-1px);
}
.header-nav .nav-link.active {
  box-shadow: inset 0 0 0 1px rgba(245,158,11,.28);
}
.header-logo .logo-img {
  transition: transform .25s var(--ktv-ease);
}
.header-logo a:hover .logo-img {
  transform: scale(1.04);
}

/* ---------- Cards: consistent premium treatment site-wide ---------- */
.match-card, .article-card, .news-card, .standings-card, .team-card,
.card, [class*="-card"] {
  border-radius: var(--ktv-radius-card);
  transition: transform .22s var(--ktv-ease), box-shadow .22s var(--ktv-ease), border-color .22s var(--ktv-ease);
}
.match-card:hover, .article-card:hover, .news-card:hover, .team-card:hover,
.card:hover, [class*="-card"]:hover {
  transform: translateY(-3px);
  box-shadow: var(--ktv-shadow-2);
  border-color: rgba(245,158,11,.25);
}

/* Live badge: real motion instead of a static red dot */
.live-badge, .badge-live, .status-live {
  position: relative;
  overflow: visible;
}
.live-badge::before, .badge-live::before, .status-live::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid var(--live-red, #ef4444);
  opacity: .6;
  animation: ktv-live-pulse 1.6s var(--ktv-ease) infinite;
}
@keyframes ktv-live-pulse {
  0%   { transform: scale(.94); opacity: .55; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ---------- Typography: tighter, more editorial hierarchy ---------- */
h1, .h1 { font-weight: 900; letter-spacing: -.01em; line-height: 1.15; }
h2, .h2 { font-weight: 850; letter-spacing: -.005em; line-height: 1.2; }
.section-title {
  position: relative;
  padding-inline-start: var(--ktv-space-3);
  font-weight: 900;
}
.section-title::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: .15em;
  bottom: .15em;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-gold, #f4a900), var(--accent-red, #e63946));
}

/* ---------- Buttons: one consistent premium style ---------- */
.btn-primary, .share-btn, button.primary {
  border-radius: 10px;
  font-weight: 800;
  transition: transform .16s var(--ktv-ease), box-shadow .16s var(--ktv-ease), filter .16s var(--ktv-ease);
}
.btn-primary:hover, button.primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: var(--ktv-shadow-glow);
}
.btn-primary:active, button.primary:active { transform: translateY(0); }

/* ---------- Section rhythm ---------- */
main > section, .container > section {
  margin-block: var(--ktv-space-6);
}
@media (max-width: 768px) {
  main > section, .container > section { margin-block: var(--ktv-space-5); }
}

/* ---------- Images: consistent radius + no layout jump ---------- */
.match-card img, .article-card img, .news-card img {
  border-radius: calc(var(--ktv-radius-card) - 4px);
}

/* ---------- Focus visibility (accessibility) — additive, doesn't fight existing styles ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-gold, #f4a900);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* =============================================================
   FIX: compact horizontal match-card (was rendering as a tall
   vertical stack — home team block, then center, then away team
   block, one under the other). style.css has THREE separate,
   partly-conflicting .match-card definitions layered from past
   edits (lines ~245, ~830, ~1744) — rather than risk breaking one
   of them by editing blind, this block loads last and wins
   outright, forcing the compact "one row per match" layout used
   by Flashscore/Sofascore/ESPN. Delete this block only once
   you've cleaned up the duplicate rules in style.css directly.
   ============================================================= */
.match-card {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 76px minmax(0,1fr) !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
  padding: 12px 14px !important;
}
.match-team {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.match-team.home { flex-direction: row-reverse !important; text-align: right !important; }
.match-team.away { flex-direction: row !important; text-align: left !important; }
.match-team .team-logo, .match-team img {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 auto !important;
}
.match-team .team-name {
  font-size: .82rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  -webkit-line-clamp: 1 !important;
}
.match-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: auto !important;
  min-width: 64px !important;
}
.match-meta { grid-column: 1 / -1 !important; }

@media (max-width: 480px) {
  .match-card { grid-template-columns: minmax(0,1fr) 64px minmax(0,1fr) !important; padding: 10px 8px !important; }
  .match-team .team-logo, .match-team img { width: 24px !important; height: 24px !important; }
  .match-team .team-name { font-size: .74rem !important; }
}