/* ==========================================================================
   Cricket Live Hub - theme.css
   ========================================================================== */

:root {
	--clh-navy: #0b2d3f;
	--clh-navy-dark: #071c28;
	--clh-green: #1f8a4c;
	--clh-green-dark: #156638;
	--clh-willow: #d9a441;
	--clh-red-live: #d64545;
	--clh-bg: #f4f6f5;
	--clh-card-bg: #ffffff;
	--clh-text: #1c2b2f;
	--clh-text-muted: #5c6b6e;
	--clh-border: #e1e6e4;
	--clh-radius: 10px;
	--clh-shadow: 0 2px 10px rgba(11, 45, 63, 0.08);
	--clh-max-width: 1200px;
	--clh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--clh-font);
	background: var(--clh-bg);
	color: var(--clh-text);
	line-height: 1.55;
}

a { color: var(--clh-green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.5em; color: var(--clh-navy); }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}

/* ---------------------------------------------------------------------- */
/* Layout */
/* ---------------------------------------------------------------------- */
.clh-site { display: flex; flex-direction: column; min-height: 100vh; }
.clh-content-wrap { flex: 1; }

.clh-main, .clh-header-inner, .clh-footer {
	max-width: var(--clh-max-width);
	margin: 0 auto;
	padding: 0 20px;
}

.clh-home-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-top: 30px;
}
@media (min-width: 880px) {
	.clh-home-columns { grid-template-columns: 2.2fr 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Header */
/* ---------------------------------------------------------------------- */
.clh-header {
	background: linear-gradient(135deg, var(--clh-navy) 0%, var(--clh-navy-dark) 100%);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.clh-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	padding-bottom: 14px;
	flex-wrap: wrap;
	gap: 10px;
}
.clh-site-title {
	font-size: 1.5rem;
	font-weight: 800;
	color: #fff !important;
	text-decoration: none;
	letter-spacing: 0.5px;
}
.clh-site-description { margin: 2px 0 0; font-size: 0.85rem; color: #b9c7cd; }

.clh-primary-nav ul {
	list-style: none;
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.clh-primary-nav a {
	color: #eef3f2;
	font-weight: 600;
	font-size: 0.95rem;
}
.clh-primary-nav a:hover { color: var(--clh-willow); text-decoration: none; }

.clh-menu-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
}
.clh-menu-toggle span { width: 22px; height: 2px; background: #fff; display: block; }

@media (max-width: 700px) {
	.clh-menu-toggle { display: flex; }
	.clh-primary-nav ul {
		display: none;
		flex-direction: column;
		width: 100%;
		gap: 12px;
		padding-top: 10px;
	}
	.clh-primary-nav.is-open ul { display: flex; }
}

/* ---------------------------------------------------------------------- */
/* Live score panel */
/* ---------------------------------------------------------------------- */
.clh-live-score-panel {
	background: var(--clh-card-bg);
	border-radius: var(--clh-radius);
	box-shadow: var(--clh-shadow);
	padding: 20px;
	margin-top: 24px;
	border-top: 4px solid var(--clh-green);
}
.clh-panel-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.clh-panel-header h2 { margin: 0; font-size: 1.3rem; }
.clh-live-dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--clh-red-live);
	box-shadow: 0 0 0 rgba(214,69,69,0.5);
	animation: clh-pulse 1.8s infinite;
}
@keyframes clh-pulse {
	0% { box-shadow: 0 0 0 0 rgba(214,69,69,0.5); }
	70% { box-shadow: 0 0 0 8px rgba(214,69,69,0); }
	100% { box-shadow: 0 0 0 0 rgba(214,69,69,0); }
}
.clh-live-updated { font-size: 0.8rem; color: var(--clh-text-muted); margin-left: auto; }

.clh-matches-list { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) {
	.clh-matches-list { grid-template-columns: 1fr 1fr; }
}

.clh-match-card {
	border: 1px solid var(--clh-border);
	border-radius: 8px;
	padding: 14px;
	background: #fbfcfb;
}
.clh-match-card.is-live { border-color: var(--clh-green); background: #f2f9f4; }
.clh-match-title { font-weight: 700; font-size: 0.98rem; color: var(--clh-navy); margin-bottom: 6px; }
.clh-badge-live {
	display: inline-block;
	background: var(--clh-red-live);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: 4px;
	margin-left: 6px;
	letter-spacing: 0.5px;
	vertical-align: middle;
}
.clh-scores { list-style: none; margin: 6px 0; padding: 0; font-variant-numeric: tabular-nums; }
.clh-scores li { font-size: 0.92rem; padding: 2px 0; }
.clh-match-status { margin: 6px 0 2px; font-size: 0.88rem; color: var(--clh-green-dark); font-weight: 600; }
.clh-match-venue { margin: 0; font-size: 0.78rem; color: var(--clh-text-muted); }

.clh-notice {
	grid-column: 1 / -1;
	background: #fff7e8;
	border: 1px solid #f0dca4;
	color: #7a5b12;
	padding: 12px 14px;
	border-radius: 6px;
	font-size: 0.9rem;
}
.clh-notice-small { padding: 8px 10px; font-size: 0.82rem; }

/* Compact (widget) variant */
.clh-live-score-panel.clh-compact { padding: 12px; margin-top: 0; border-top-width: 3px; }
.clh-live-score-panel.clh-compact .clh-matches-list { grid-template-columns: 1fr; gap: 10px; }
.clh-match-card-compact { padding: 10px; }
.clh-scores-compact li { font-size: 0.85rem; }

/* ---------------------------------------------------------------------- */
/* News grid */
/* ---------------------------------------------------------------------- */
.clh-news-section { margin-top: 30px; }
.clh-news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
}
.clh-news-card {
	background: var(--clh-card-bg);
	border-radius: var(--clh-radius);
	box-shadow: var(--clh-shadow);
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.clh-news-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(11,45,63,0.14); }
.clh-news-card-link { color: inherit; text-decoration: none; display: block; }
.clh-news-thumb {
	height: 140px;
	background-size: cover;
	background-position: center;
	background-color: #dfe8e4;
}
.clh-news-thumb-placeholder {
	display: flex; align-items: center; justify-content: center;
	font-size: 2.2rem;
	background: linear-gradient(135deg, #e7f1ea, #d9ece0);
}
.clh-news-body { padding: 14px; }
.clh-news-source {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--clh-green-dark);
	margin-bottom: 6px;
}
.clh-news-title { font-size: 1rem; margin: 0 0 8px; color: var(--clh-navy); }
.clh-news-excerpt { font-size: 0.86rem; color: var(--clh-text-muted); margin: 0 0 8px; }
.clh-news-date { font-size: 0.75rem; color: #8a9698; }

/* News widget (sidebar) */
.clh-news-widget-list { list-style: none; padding: 0; margin: 0; }
.clh-news-widget-list li { padding: 8px 0; border-bottom: 1px solid var(--clh-border); font-size: 0.9rem; }
.clh-news-widget-list li:last-child { border-bottom: none; }
.clh-news-widget-meta { font-size: 0.75rem; color: var(--clh-text-muted); }

/* ---------------------------------------------------------------------- */
/* Blog posts / single / page */
/* ---------------------------------------------------------------------- */
.clh-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
	margin-top: 14px;
}
.clh-post-card {
	background: var(--clh-card-bg);
	border-radius: var(--clh-radius);
	box-shadow: var(--clh-shadow);
	overflow: hidden;
	padding-bottom: 12px;
}
.clh-post-thumb img { height: 150px; object-fit: cover; width: 100%; }
.clh-post-card h3, .clh-post-card h2 { font-size: 1rem; margin: 10px 14px 4px; }
.clh-post-card .clh-posted-on { font-size: 0.75rem; color: var(--clh-text-muted); margin: 0 14px; display: block; }
.clh-post-excerpt { font-size: 0.86rem; color: var(--clh-text-muted); margin: 6px 14px 0; }

.clh-blog-posts { margin-top: 34px; }

.clh-single-post { background: var(--clh-card-bg); border-radius: var(--clh-radius); box-shadow: var(--clh-shadow); padding: 24px; }
.clh-single-thumb { margin: 14px 0; border-radius: 8px; overflow: hidden; }
.clh-single-content { font-size: 1rem; }
.clh-single-content p { margin: 0 0 1em; }

/* ---------------------------------------------------------------------- */
/* Sidebar / widgets */
/* ---------------------------------------------------------------------- */
.clh-sidebar { display: flex; flex-direction: column; gap: 20px; }
.clh-widget {
	background: var(--clh-card-bg);
	border-radius: var(--clh-radius);
	box-shadow: var(--clh-shadow);
	padding: 16px;
}
.clh-widget-title { font-size: 1.05rem; margin: 0 0 10px; border-bottom: 2px solid var(--clh-green); padding-bottom: 8px; }

.clh-home-top-widgets { margin-top: 20px; }

/* ---------------------------------------------------------------------- */
/* Footer */
/* ---------------------------------------------------------------------- */
.clh-footer {
	background: var(--clh-navy-dark);
	color: #cfd8da;
	margin-top: 50px;
	padding-top: 30px;
}
.clh-footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.clh-footer .clh-widget { background: transparent; box-shadow: none; padding: 0; }
.clh-footer .clh-widget-title { color: #fff; border-color: var(--clh-willow); }
.clh-footer-nav ul { list-style: none; display: flex; gap: 16px; padding: 16px 0; margin: 0; flex-wrap: wrap; }
.clh-footer-nav a { color: #cfd8da; font-size: 0.88rem; }
.clh-footer-bottom { font-size: 0.8rem; padding: 14px 0; color: #8fa0a4; }

/* ---------------------------------------------------------------------- */
/* 404 */
/* ---------------------------------------------------------------------- */
.clh-404 { text-align: center; padding: 80px 20px; }
.clh-btn {
	display: inline-block;
	margin-top: 16px;
	background: var(--clh-green);
	color: #fff !important;
	padding: 10px 20px;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none !important;
}
.clh-btn:hover { background: var(--clh-green-dark); }