/* ==========================================================================
   CricHD front-end theme v2 — REFINED for eye comfort
   --------------------------------------------------------------------------
   Changes from v1:
     - Dark mode background lightened from deep navy (#0f172a) to softer
       slate (#1a2332) — less harsh contrast cliff
     - Dark mode header green darkened from #22c55e (loud) to #166534
       (calmer, same family) — doesn't glare against dark cards
     - LIVE badge red softened in dark
     - Card surfaces slightly lighter — more readable, less "vampire mode"
     - Logo now has filter:none in dark mode since the SVG has its own colors
   ========================================================================== */

/* ---------- LIGHT MODE (default) ------------------------------------------ */
:root {
	/* brand */
	--brand:        #15803d;     /* refined green — easier on eyes than #198754 */
	--brand-dark:   #166534;
	--brand-light:  #dcfce7;

	/* accents */
	--accent:       #f59e0b;     /* warm amber for CTAs/links */
	--accent-dark:  #d97706;

	/* backgrounds */
	--bg:           #f8fafc;     /* warm off-white, not full-burn white */
	--card:         #ffffff;     /* event cards stay clean white */
	--card-2:       #f1f5f9;     /* nested rows / hover states */

	/* text */
	--text:         #0f172a;     /* near-black with subtle blue tint */
	--muted:        #64748b;     /* slate gray, calmer than pure gray */

	/* structural */
	--border:       #e2e8f0;
	--banner:       #1e293b;
	--banner-text:  #ffffff;

	/* LIVE badge */
	--live-bg:      #fee2e2;
	--live-text:    #b91c1c;
	--live-dot:     #dc2626;
	--live-pulse-rgba: 220, 38, 38;

	/* shape + motion */
	--radius-lg:    10px;
	--radius-md:    8px;
	--radius-sm:    6px;
	--shadow-sm:    0 1px 2px rgba(15,23,42,.04);
	--shadow-md:    0 2px 8px rgba(15,23,42,.06);
	--font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--ease:         cubic-bezier(.4,0,.2,1);
	--dur:          .2s;
}

/* ---------- DARK MODE (REFINED — calmer, less eye-burn) ------------------ */
[data-theme="dark"] {
	/* brand: SAME green family, just darker — won't glare against dark cards */
	--brand:        #166534;
	--brand-dark:   #14532d;
	--brand-light:  rgba(34,197,94,.10);

	/* accents */
	--accent:       #fbbf24;
	--accent-dark:  #f59e0b;

	/* backgrounds: lighter dark — not pitch black, easier on eyes */
	--bg:           #1a2332;     /* soft slate, not navy black */
	--card:         #243044;     /* slightly lighter than bg for separation */
	--card-2:       #2f3d54;     /* nested elements */

	/* text: soft off-white, not pure white */
	--text:         #e2e8f0;
	--muted:        #94a3b8;

	/* structural */
	--border:       #2f3d54;
	--banner:       #131b28;
	--banner-text:  #e2e8f0;

	/* LIVE badge — softer red glow on dark */
	--live-bg:      rgba(248,113,113,.15);
	--live-text:    #fca5a5;
	--live-dot:     #ef4444;
	--live-pulse-rgba: 239, 68, 68;

	/* softer shadows for depth without harshness */
	--shadow-sm:    0 1px 2px rgba(0,0,0,.2);
	--shadow-md:    0 2px 12px rgba(0,0,0,.3);
}

/* ---------- AUTO DARK MODE (OS preference) ------------------------------- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--brand:        #166534;
		--brand-dark:   #14532d;
		--brand-light:  rgba(34,197,94,.10);
		--accent:       #fbbf24;
		--accent-dark:  #f59e0b;
		--bg:           #1a2332;
		--card:         #243044;
		--card-2:       #2f3d54;
		--text:         #e2e8f0;
		--muted:        #94a3b8;
		--border:       #2f3d54;
		--banner:       #131b28;
		--banner-text:  #e2e8f0;
		--live-bg:      rgba(248,113,113,.15);
		--live-text:    #fca5a5;
		--live-dot:     #ef4444;
		--live-pulse-rgba: 239, 68, 68;
		--shadow-sm:    0 1px 2px rgba(0,0,0,.2);
		--shadow-md:    0 2px 12px rgba(0,0,0,.3);
	}
}

/* ---------- Smooth color transitions ------------------------------------ */
html, body, .site-header, .site-footer,
.main-card, .side-card, .league-card,
.event-row-link, .cat-league-chip,
.empty-state {
	transition: background-color var(--dur) var(--ease),
	            color var(--dur) var(--ease),
	            border-color var(--dur) var(--ease);
}

/* ---------- LIVE badge with pulsing dot --------------------------------- */
.badge-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--live-bg);
	color: var(--live-text);
	font-weight: 700;
	font-size: 11px;
	padding: 3px 8px 3px 6px;
	border-radius: 4px;
	border-left: 3px solid var(--live-dot);
	letter-spacing: .02em;
	text-transform: uppercase;
}
.badge-live::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--live-dot);
	box-shadow: 0 0 0 0 var(--live-dot);
	animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(var(--live-pulse-rgba),.6); }
	70%  { box-shadow: 0 0 0 6px rgba(var(--live-pulse-rgba),0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--live-pulse-rgba),0); }
}
@media (prefers-reduced-motion: reduce) {
	.badge-live::before { animation: none; }
}

/* ---------- Theme toggle button in header ------------------------------- */
.theme-toggle {
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.2);
	color: #fff;
	border-radius: 999px;
	width: 36px; height: 36px;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
	margin-left: 8px;
	flex: 0 0 36px;
}
.theme-toggle:hover {
	background: rgba(255,255,255,.25);
	transform: rotate(-15deg);
}
.theme-toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.theme-toggle svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	pointer-events: none;
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: block; }
	:root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* ---------- LOGO: SVG version handles its own colors ------------------ */
/* Remove brightness-invert filter (the SVG logo is already white on green) */
.brand-logo {
	filter: none !important;
	height: 40px !important;
	width: auto;
}

/* ---------- Dark mode tweaks for content elements ---------------------- */
[data-theme="dark"] .circle-logo,
[data-theme="dark"] .team-logo,
[data-theme="dark"] .cat-league-chip img {
	background: #e2e8f0;  /* light bg for team logos so they stay readable */
}
[data-theme="dark"] .event-row-link:hover {
	background: rgba(34,197,94,.08);
}
[data-theme="dark"] .side-list a:hover {
	background: rgba(255,255,255,.04);
	color: var(--brand);
}
[data-theme="dark"] .side-list a.active,
[data-theme="dark"] .side-list a[aria-current="page"] {
	background: var(--brand);
	color: #fff;
}
[data-theme="dark"] .cat-leagues {
	background: var(--card);
	border-color: var(--border);
}
[data-theme="dark"] .cat-league-chip {
	background: var(--card-2);
	color: var(--text);
	border-color: var(--border);
}
[data-theme="dark"] .cat-league-chip:hover {
	background: var(--accent);
	color: #1a2332;
	border-color: var(--accent);
}
[data-theme="dark"] .seo-copy h1,
[data-theme="dark"] .seo-copy h2,
[data-theme="dark"] .seo-copy h3 {
	color: #fca5a5;
}
[data-theme="dark"] .breadcrumb-list a { color: var(--brand); }
[data-theme="dark"] .breadcrumb-list [aria-current="page"] { color: var(--text); }
[data-theme="dark"] .breadcrumb-list .sep { color: var(--muted); }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .circle-logo,
	:root:not([data-theme="light"]) .team-logo,
	:root:not([data-theme="light"]) .cat-league-chip img {
		background: #e2e8f0;
	}
	:root:not([data-theme="light"]) .event-row-link:hover {
		background: rgba(34,197,94,.08);
	}
	:root:not([data-theme="light"]) .side-list a:hover {
		background: rgba(255,255,255,.04);
		color: var(--brand);
	}
	:root:not([data-theme="light"]) .side-list a.active {
		background: var(--brand);
		color: #fff;
	}
	:root:not([data-theme="light"]) .cat-leagues {
		background: var(--card);
		border-color: var(--border);
	}
	:root:not([data-theme="light"]) .cat-league-chip {
		background: var(--card-2);
		color: var(--text);
		border-color: var(--border);
	}
	:root:not([data-theme="light"]) .seo-copy h1,
	:root:not([data-theme="light"]) .seo-copy h2,
	:root:not([data-theme="light"]) .seo-copy h3 {
		color: #fca5a5;
	}
}

/* ---------- Normalize nav casing ---------------------------------------- */
.primary-menu a {
	text-transform: none !important;
	letter-spacing: 0;
}

/* === LIVE badge dot fix 20260617 === */
.badge-live{display:inline-flex!important;align-items:center;gap:6px;padding:3px 10px 3px 9px!important;border-left:0!important;border-radius:4px;overflow:visible!important;line-height:1}
.badge-live::before{position:static!important;margin:0!important;top:auto!important;left:auto!important;width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--live-dot)}