/* ============================================================================
   CricHD — DARK HUB theme polish
   Loads after front-template.css + cards-v3.css. Uses theme-v2 variables.
   Dark mode = premium hub look (dark header, teal Watch). Light keeps green.
   ============================================================================ */

/* ---------- accent tokens (teal Watch in dark, green in light) ---------- */
:root { --watch-bg: var(--brand); --watch-bg-h: var(--brand-dark); --watch-fg: #fff; }
[data-theme="dark"] { --watch-bg: #14b8a6; --watch-bg-h: #0d9488; --watch-fg: #042f2e; }

/* ---------- dark header (hub look) in dark mode only -------------------- */
[data-theme="dark"] .site-header { background: #131b28 !important; border-bottom: 1px solid #243044; }

/* ---------- homepage H1 (SEO + a clean page title) --------------------- */
.home-h1 {
	margin: 2px 0 14px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text);
}
@media (max-width: 600px) { .home-h1 { font-size: 16px; } }

/* ---------- clearer clickable rows -------------------------------------- */
.event-row { position: relative; transition: background .15s ease; border-radius: var(--radius-sm); }
.event-row:hover { background: var(--card-2); }

/* ---------- time column: GMT fits, no overlap with team names ---------- */
.event-row-link { grid-template-columns: 92px minmax(0,1fr) auto !important; column-gap: 12px; }
.event-status { min-width: 0; }
.event-time { display: inline-block; white-space: nowrap; font-size: 12px; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--muted); }
.event-teams { min-width: 0; }

/* ---------- Watch button (replaces the right-side arrow) ---------------- */
.event-cta {
	display: inline-flex !important; align-items: center; justify-content: center; gap: 5px;
	background: var(--watch-bg); color: var(--watch-fg) !important;
	font-size: 12px; font-weight: 700; line-height: 1;
	padding: 7px 14px; border-radius: var(--radius-md); white-space: nowrap;
}
.event-cta i { display: none; }
.event-cta::before { content: "\25B6"; font-size: 8px; }
.event-cta::after { content: "Watch"; }
.event-row-link:hover .event-cta { background: var(--watch-bg-h); color: var(--watch-fg) !important; }

@media (max-width: 600px) {
	.event-row-link { grid-template-columns: 76px minmax(0,1fr) auto !important; }
	.event-cta { padding: 6px 11px; font-size: 11px; }
}

/* ---------- cleaner cards / sidebars for the hub feel ------------------- */
.main-card, .side-card { border-radius: var(--radius-lg); }
.league-card { border-radius: var(--radius-lg); }

/* ---------- "Bookmark this site" bar ------------------------------------ */
.site-bm-bar {
	display: flex; align-items: center; gap: 12px;
	background: var(--brand-light); border: 1px solid var(--brand);
	color: var(--text); border-radius: var(--radius-md);
	padding: 10px 14px; margin: 0 0 14px;
}
.site-bm-text { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 500; }
.site-bm-text .fa { color: var(--accent); margin-right: 4px; }
.site-bm-btn {
	flex: 0 0 auto; border: none; cursor: pointer;
	background: var(--watch-bg); color: var(--watch-fg); font-size: 12px; font-weight: 600;
	padding: 7px 14px; border-radius: var(--radius-sm);
}
.site-bm-btn:hover { background: var(--watch-bg-h); }
.site-bm-close {
	flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
	color: var(--muted); font-size: 20px; line-height: 1;
	width: 28px; height: 28px; border-radius: var(--radius-sm);
}
.site-bm-close:hover { background: rgba(128,128,128,.18); color: var(--text); }
.site-bm-hint {
	margin: 0 0 14px; padding: 8px 14px; font-size: 13px;
	background: var(--card-2); border: 1px solid var(--border);
	border-radius: var(--radius-md); color: var(--text);
}
.site-bm-hint b { color: var(--watch-bg); }
@media (max-width: 600px) {
	.site-bm-text { font-size: 12px; }
	.site-bm-bar { gap: 8px; padding: 9px 11px; }
}
/* CRICHD-VSLINE — teams on one line: Team A vs Team B */
.event-teams { display:flex !important; flex-direction:row !important; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
.event-teams .team { display:inline-flex; align-items:center; gap:6px; flex:0 1 auto; min-width:0; }
.event-teams .team .team-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* insert "vs" between the two teams */
.event-teams:has(.team + .team) .team:first-of-type::after { content:"vs"; margin-left:6px; color:var(--muted); font-size:11px; font-weight:500; }
/* league tag drops to its own line under the teams */
.event-teams .event-league-tag { flex-basis:100%; margin-top:2px; }
@media (max-width:600px){
  .event-teams .team .team-name { font-size:12.5px; }
}
/* END-VSLINE */
/* CRICHD-HIDE-TOGGLE */
#theme-toggle, .theme-toggle { display: none !important; }
/* END-HIDE-TOGGLE */
/* CRICHD-POLISH2 */
/* #1 tighten the status/time column so live rows aren't sparse */
.event-row-link { grid-template-columns: 80px minmax(0,1fr) auto !important; column-gap: 10px; }
.event-status { display:flex; align-items:center; justify-content:flex-start; }
@media (max-width:600px){ .event-row-link { grid-template-columns: 74px minmax(0,1fr) auto !important; } }

/* #2 sidebar logos: show the full logo, no squashing */
.side-card .circle-logo img,
.left-column .circle-logo img,
.right-column .circle-logo img { width:100% !important; height:100% !important; object-fit:contain !important; padding:3px; box-sizing:border-box; }

/* #4 homepage H1: one solid color (kills any gradient/highlight) */
.home-h1, .home-h1 * {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  background: none !important;
  opacity: 1 !important;
}
/* END-POLISH2 */