/* ==========================================================================
   KRANTIPATRA (क्रान्तिपत्र) — CORE THEME STYLESHEET
   ========================================================================== */

:root {
	/* Color System */
	--color-primary: #C8102E;      /* Deep Crimson Red */
	--color-primary-dark: #990000;
	--color-primary-hover: #A00B24;
	
	--color-dark-1: #111827;       /* Rich Charcoal / Black */
	--color-dark-2: #1F2937;
	--color-dark-3: #374151;

	--color-gray-1: #4B5563;       /* Body Text Gray */
	--color-gray-2: #6B7280;
	--color-gray-light: #F3F4F6;  /* Neutral Background */
	--color-gray-border: #E5E7EB; /* Rule & Grid Lines */

	--color-white: #FFFFFF;
	--color-offwhite: #FAFAFA;

	/* Typography */
	--font-sans: 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-serif: 'Noto Serif Devanagari', Georgia, Times, serif;

	/* Layout Dimensions */
	--container-width: 1320px;
	--header-height: 80px;
	--nav-height: 48px;

	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-normal: 0.3s ease;
}

/* CSS RESET */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-dark-1);
	background-color: var(--color-offwhite);
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-primary);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* LAYOUT CONTAINER */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 16px;
}

.site-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* 1. TOP UTILITY BAR */
.top-bar {
	background-color: var(--color-dark-1);
	color: var(--color-gray-2);
	font-size: 13px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	padding: 6px 0;
}

.top-bar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.top-bar-left .top-date {
	color: #D1D5DB;
}

.social-links a {
	color: #9CA3AF;
	margin-left: 12px;
	font-size: 12px;
	font-weight: 500;
}

.social-links a:hover {
	color: var(--color-white);
}

/* 2. MAIN BRAND HEADER */
.main-header {
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-gray-border);
	padding: 18px 0;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.brand-container {
	display: flex;
	flex-direction: column;
}

.site-logo-link {
	display: flex;
	flex-direction: column;
}

.brand-name-en {
	font-family: var(--font-sans);
	font-weight: 900;
	font-size: 32px;
	letter-spacing: 1.5px;
	color: var(--color-primary);
	line-height: 1;
}

.brand-name-np {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 36px;
	color: var(--color-dark-1);
	line-height: 1.1;
	margin-top: -2px;
}

.site-tagline {
	font-size: 13px;
	color: var(--color-gray-2);
	font-weight: 500;
	margin-top: 4px;
}

/* Header Ad Placeholder */
.ad-placeholder {
	background: #EBF0F5;
	border: 1px dashed #CBD5E1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #64748B;
	font-size: 12px;
	border-radius: 4px;
}

.banner-728 {
	width: 728px;
	height: 90px;
}

.banner-970 {
	width: 100%;
	height: 90px;
}

.banner-300 {
	width: 100%;
	height: 250px;
}

.ad-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	color: #94A3B8;
}

.header-actions {
	display: flex;
	gap: 10px;
}

.search-toggle-btn, .mobile-menu-btn {
	background: var(--color-gray-light);
	border: 1px solid var(--color-gray-border);
	padding: 8px 14px;
	border-radius: 4px;
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-dark-1);
	transition: background var(--transition-fast);
}

.search-toggle-btn:hover, .mobile-menu-btn:hover {
	background: #E5E7EB;
}

.mobile-menu-btn {
	display: none;
	font-size: 18px;
}

/* 3. BREAKING NEWS TICKER */
.breaking-news-bar {
	background-color: var(--color-dark-1);
	color: var(--color-white);
	padding: 8px 0;
	border-bottom: 3px solid var(--color-primary);
}

.breaking-inner {
	display: flex;
	align-items: center;
}

.breaking-label {
	background-color: var(--color-primary);
	color: var(--color-white);
	font-size: 13px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 3px;
	white-space: nowrap;
	margin-right: 16px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.pulse-dot {
	animation: blink 1.2s infinite;
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

.breaking-ticker-wrapper {
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}

.breaking-ticker {
	display: inline-block;
	animation: ticker 25s linear infinite;
}

.breaking-ticker:hover {
	animation-play-state: paused;
}

@keyframes ticker {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-50%, 0, 0); }
}

.breaking-item {
	color: #E5E7EB;
	font-size: 14px;
	margin-right: 32px;
}

.breaking-item:hover {
	color: var(--color-white);
	text-decoration: underline;
}

.breaking-time {
	color: var(--color-primary);
	font-weight: 700;
	margin-right: 6px;
}

/* 4. NAVIGATION BAR */
.main-nav-bar {
	background-color: var(--color-dark-2);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	position: sticky;
	top: 0;
	z-index: 100;
}

.nav-menu-list {
	display: flex;
	list-style: none;
	overflow-x: auto;
	white-space: nowrap;
}

.nav-menu-list li a {
	display: block;
	padding: 12px 16px;
	color: #F3F4F6;
	font-size: 15px;
	font-weight: 600;
	border-bottom: 3px solid transparent;
	transition: all var(--transition-fast);
}

.nav-menu-list li a:hover, .nav-menu-list li a.active {
	color: var(--color-white);
	background-color: var(--color-primary);
	border-bottom-color: var(--color-white);
}

/* SECTION HEADERS */
.section-header {
	margin-bottom: 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--color-gray-border);
	position: relative;
}

.section-header.border-red::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 80px;
	height: 3px;
	background-color: var(--color-primary);
}

.section-title {
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 700;
	color: var(--color-dark-1);
}

.flex-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.view-all-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--color-primary);
}

/* GRID LAYOUTS */
.hero-grid-layout {
	display: grid;
	grid-template-columns: 8fr 4fr;
	gap: 24px;
	margin-top: 24px;
}

.two-column-layout {
	display: grid;
	grid-template-columns: 8fr 4fr;
	gap: 24px;
}

.category-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.category-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* HERO CARDS */
.hero-primary-card {
	background: var(--color-white);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0,0,0,0.06);
	margin-bottom: 20px;
}

.hero-image-wrap {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.hero-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-normal);
}

.hero-image-wrap:hover img {
	transform: scale(1.03);
}

.category-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 3px;
}

.hero-primary-body {
	padding: 20px;
}

.hero-primary-title {
	font-family: var(--font-serif);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 12px;
}

.hero-excerpt {
	color: var(--color-gray-1);
	font-size: 15px;
	margin-bottom: 14px;
}

.meta-row {
	display: flex;
	gap: 16px;
	font-size: 13px;
	color: var(--color-gray-2);
}

.hero-secondary-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.hero-secondary-card {
	display: flex;
	gap: 12px;
	background: var(--color-white);
	padding: 12px;
	border-radius: 6px;
	border: 1px solid var(--color-gray-border);
}

.secondary-thumb {
	width: 100px;
	height: 70px;
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
}

.secondary-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.secondary-title {
	font-family: var(--font-serif);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

/* TRENDING SIDEBAR */
.trending-list {
	background: var(--color-white);
	border: 1px solid var(--color-gray-border);
	border-radius: 8px;
	padding: 16px;
}

.trending-item {
	display: flex;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--color-gray-border);
}

.trending-item:last-child {
	border-bottom: none;
}

.rank-number {
	font-family: var(--font-sans);
	font-size: 24px;
	font-weight: 900;
	color: var(--color-primary);
	line-height: 1;
}

.trending-title {
	font-family: var(--font-serif);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

/* LATEST NEWS STREAM */
.latest-news-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.latest-news-card {
	display: flex;
	gap: 16px;
	background: var(--color-white);
	padding: 14px;
	border-radius: 8px;
	border: 1px solid var(--color-gray-border);
}

.latest-news-thumb {
	width: 180px;
	height: 115px;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
}

.latest-news-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.latest-news-title {
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 700;
	margin: 6px 0;
}

.card-meta {
	display: flex;
	gap: 10px;
	font-size: 12px;
	color: var(--color-gray-2);
}

.category-tag {
	color: var(--color-primary);
	font-weight: 700;
}

/* OPINION WIDGET */
.opinion-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.opinion-card {
	display: flex;
	gap: 12px;
	background: var(--color-white);
	padding: 12px;
	border-radius: 6px;
	border: 1px solid var(--color-gray-border);
}

.author-avatar img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}

.author-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-primary);
}

.opinion-headline {
	font-family: var(--font-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

/* SPECIAL REPORT */
.special-report-block {
	background: var(--color-dark-1);
	color: var(--color-white);
	padding: 32px;
	border-radius: 12px;
	border-left: 6px solid var(--color-primary);
}

.special-badge {
	color: #FBBF24;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 16px;
}

.special-content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: center;
}

.special-image img {
	border-radius: 8px;
	width: 100%;
	height: 260px;
	object-fit: cover;
}

.special-headline {
	font-family: var(--font-serif);
	font-size: 26px;
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: 12px;
}

.special-desc {
	color: #D1D5DB;
	font-size: 15px;
	margin-bottom: 20px;
}

.btn-read-special {
	display: inline-block;
	background: var(--color-primary);
	color: var(--color-white);
	padding: 10px 20px;
	border-radius: 4px;
	font-weight: 700;
}

/* VIDEO SECTION */
.video-grid-layout {
	display: grid;
	grid-template-columns: 8fr 4fr;
	gap: 20px;
	background: var(--color-dark-2);
	padding: 20px;
	border-radius: 10px;
	color: var(--color-white);
}

.video-embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	border-radius: 8px;
	overflow: hidden;
}

.video-embed-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-featured-title {
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 700;
	margin-top: 12px;
}

.playlist-card {
	display: flex;
	gap: 10px;
	margin-bottom: 12px;
	cursor: pointer;
}

.playlist-thumb {
	position: relative;
	width: 100px;
	height: 65px;
	border-radius: 4px;
	overflow: hidden;
}

.playlist-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(200, 16, 46, 0.85);
	color: white;
	font-size: 12px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* PHOTO FEATURE */
.photo-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.photo-card {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	height: 220px;
}

.photo-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photo-card-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
	padding: 16px;
	color: white;
}

.photo-count {
	background: var(--color-primary);
	font-size: 11px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 3px;
}

/* NEWSLETTER */
.newsletter-block {
	background: var(--color-gray-light);
	border: 1px solid var(--color-gray-border);
	padding: 32px;
	border-radius: 8px;
}

.newsletter-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.newsletter-form {
	display: flex;
	gap: 10px;
}

.newsletter-form input {
	padding: 10px 16px;
	border: 1px solid var(--color-gray-border);
	border-radius: 4px;
	width: 280px;
	font-family: var(--font-sans);
}

.newsletter-form button {
	background: var(--color-primary);
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	font-weight: 700;
	cursor: pointer;
}

/* FOOTER */
.site-footer {
	background: var(--color-dark-1);
	color: #9CA3AF;
	margin-top: auto;
}

.footer-top {
	padding: 48px 0;
}

.footer-grid {
	display: grid;
	grid-template-columns: 4fr 2fr 2fr 4fr;
	gap: 32px;
}

.footer-brand {
	font-family: var(--font-serif);
	font-size: 28px;
	color: var(--color-white);
}

.footer-tagline {
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 12px;
}

.footer-title {
	font-family: var(--font-sans);
	font-size: 16px;
	color: var(--color-white);
	margin-bottom: 16px;
	border-bottom: 2px solid var(--color-primary);
	display: inline-block;
	padding-bottom: 4px;
}

.footer-links ul {
	list-style: none;
}

.footer-links li {
	margin-bottom: 8px;
}

.footer-links a:hover {
	color: var(--color-white);
}

.footer-bottom {
	background: #0B0F17;
	padding: 16px 0;
	font-size: 13px;
	border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-bottom-inner {
	display: flex;
	justify-content: space-between;
}

/* MOBILE DRAWER & MODALS */
.mobile-drawer {
	position: fixed;
	top: 0;
	left: -300px;
	width: 280px;
	height: 100vh;
	background: var(--color-dark-1);
	color: white;
	z-index: 1000;
	transition: left var(--transition-normal);
	box-shadow: 4px 0 16px rgba(0,0,0,0.3);
}

.mobile-drawer.open {
	left: 0;
}

.drawer-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

.drawer-close {
	background: none;
	border: none;
	color: white;
	font-size: 20px;
	cursor: pointer;
}

.mobile-nav-list {
	list-style: none;
	padding: 16px;
}

.mobile-nav-list li a {
	display: block;
	padding: 10px 0;
	color: #D1D5DB;
	border-bottom: 1px solid rgba(255,255,255,0.05);
}

.search-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 2000;
	align-items: center;
	justify-content: center;
}

.search-modal.open {
	display: flex;
}

.search-modal-content {
	background: white;
	padding: 32px;
	border-radius: 8px;
	width: 90%;
	max-width: 500px;
	position: relative;
}

.search-close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
}

/* MARGIN UTILITIES */
.margin-bottom-lg { margin-bottom: 26px; }
.margin-bottom-md { margin-bottom: 18px; }
.margin-top-lg { margin-top: 26px; }

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
	.banner-728 { width: 100%; height: 70px; }
	.hero-grid-layout, .two-column-layout, .special-content-grid, .video-grid-layout {
		grid-template-columns: 1fr;
	}
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	.category-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.mobile-menu-btn { display: block; }
	.header-ad-space { display: none; }
	.nav-menu-list { display: none; }
	.photo-grid-3, .category-grid-3 {
		grid-template-columns: 1fr;
	}
	.newsletter-inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.newsletter-form {
		width: 100%;
		flex-direction: column;
	}
	.newsletter-form input {
		width: 100%;
	}
	.footer-grid {
		grid-template-columns: 1fr;
	}
	.footer-bottom-inner {
		flex-direction: column;
		gap: 8px;
		text-align: center;
	}
}

/* ==========================================================================
   DARK MODE & READER ACCESSIBILITY STYLES (PHASE 3)
   ========================================================================== */

/* Theme Toggle Button (Floating) */
.theme-toggle-btn {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9999;
	background: var(--color-primary);
	color: #FFFFFF;
	border: none;
	border-radius: 50px;
	padding: 12px 18px;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.theme-toggle-btn:hover {
	transform: scale(1.05);
	background: var(--color-primary-dark);
}

/* Dark Theme Variables & Component Rules */
body.dark-mode {
	--color-dark-1: #F9FAFB;
	--color-dark-2: #E5E7EB;
	--color-dark-3: #D1D5DB;

	--color-gray-1: #9CA3AF;
	--color-gray-2: #6B7280;
	--color-gray-light: #1F2937;
	--color-gray-border: #374151;

	--color-white: #111827;
	--color-offwhite: #0B0F19;

	color: #F3F4F6;
	background-color: #0B0F19;
}

body.dark-mode .site-header,
body.dark-mode .main-navigation,
body.dark-mode .hero-primary-card,
body.dark-mode .hero-secondary-card,
body.dark-mode .latest-news-card,
body.dark-mode .cat-card,
body.dark-mode .opinion-card,
body.dark-mode .trending-item,
body.dark-mode .article-header,
body.dark-mode .single-article-container,
body.dark-mode .search-modal-content {
	background-color: #111827 !important;
	color: #F3F4F6 !important;
	border-color: #374151 !important;
}

body.dark-mode .hero-primary-title a,
body.dark-mode .secondary-title a,
body.dark-mode .latest-news-title a,
body.dark-mode .cat-card-title a,
body.dark-mode .trending-title a,
body.dark-mode .article-main-title,
body.dark-mode .opinion-headline a {
	color: #FFFFFF !important;
}

body.dark-mode .hero-excerpt,
body.dark-mode .latest-news-excerpt,
body.dark-mode .article-sub-title,
body.dark-mode .article-entry-content p {
	color: #D1D5DB !important;
}

body.dark-mode .journalist-bio-card {
	background-color: #1F2937 !important;
	border-color: #374151 !important;
}

body.dark-mode .ad-placeholder {
	background-color: #1F2937 !important;
	border-color: #374151 !important;
	color: #9CA3AF !important;
}

/* ==========================================================================
   CATEGORY / CARD / ARCHIVE COMPONENTS
   ========================================================================== */

.cat-card {
	background: var(--color-white);
	border: 1px solid var(--color-gray-border);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.cat-card-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.cat-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-normal);
}

.cat-card-thumb:hover img { transform: scale(1.04); }

.cat-card-body { padding: 12px 14px; }

.cat-card-title {
	font-family: var(--font-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 6px;
}

.cat-card-body .meta-date {
	font-size: 12px;
	color: var(--color-gray-2);
}

.mini-category {
	font-size: 11px;
	font-weight: 700;
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* Category archive lead + sub-grid */
.category-posts-grid { display: flex; flex-direction: column; }

.cat-featured-card {
	background: var(--color-white);
	border: 1px solid var(--color-gray-border);
	border-radius: 8px;
	overflow: hidden;
}

.cat-featured-thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.cat-featured-thumb img { width: 100%; height: 100%; object-fit: cover; }

.cat-featured-body { padding: 20px; }

.cat-featured-title {
	font-family: var(--font-serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 10px;
}

.cat-featured-excerpt {
	color: var(--color-gray-1);
	font-size: 15px;
	margin-bottom: 10px;
}

.category-sub-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-top: 20px;
}

.category-header-banner,
.search-header-banner {
	background: var(--color-white);
	border: 1px solid var(--color-gray-border);
	border-left: 5px solid var(--color-primary);
	border-radius: 8px;
	padding: 20px 24px;
	margin-top: 24px;
}

.category-header-title,
.search-header-title {
	font-family: var(--font-serif);
	font-size: 26px;
	font-weight: 800;
	color: var(--color-dark-1);
}

.search-header-title span { color: var(--color-primary); }

.category-description {
	margin-top: 8px;
	color: var(--color-gray-1);
	font-size: 14px;
}

.no-results-box,
.no-posts-found {
	background: var(--color-white);
	border: 1px solid var(--color-gray-border);
	border-radius: 8px;
	padding: 32px;
	text-align: center;
	color: var(--color-gray-1);
}

.no-results-box h3,
.no-posts-found h2 {
	font-family: var(--font-serif);
	margin-bottom: 8px;
	color: var(--color-dark-1);
}

/* ==========================================================================
   SINGLE ARTICLE
   ========================================================================== */

.breadcrumb-nav {
	font-size: 13px;
	color: var(--color-gray-2);
	margin: 24px 0 16px;
}

.breadcrumb-nav a { color: var(--color-primary); font-weight: 600; }

.article-header { margin-bottom: 20px; }

.category-badge-lg {
	display: inline-block;
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 13px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 3px;
	margin-bottom: 12px;
}

.article-main-title {
	font-family: var(--font-serif);
	font-size: 34px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--color-dark-1);
	margin-bottom: 12px;
}

.article-author-bar {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 12px 0;
	border-top: 1px solid var(--color-gray-border);
	border-bottom: 1px solid var(--color-gray-border);
	font-size: 13px;
	color: var(--color-gray-2);
}

.article-author-bar .author-name { color: var(--color-dark-1); }
.post-timestamps { display: flex; flex-direction: column; text-align: right; gap: 2px; }

.social-share-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.share-label { font-size: 13px; font-weight: 700; color: var(--color-gray-1); }

.share-btn {
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	padding: 6px 12px;
	border-radius: 4px;
	background: var(--color-gray-1);
}

.share-btn.fb { background: #1877F2; }
.share-btn.tw { background: #111827; }
.share-btn.wa { background: #25D366; }
.share-btn:hover { color: #fff; opacity: 0.9; }

.article-featured-media { margin: 20px 0; }
.article-featured-media img { width: 100%; border-radius: 8px; }
.article-featured-media figcaption,
.wp-caption-text {
	font-size: 12px;
	color: var(--color-gray-2);
	margin-top: 6px;
	font-style: italic;
}

/* Article body typography */
.article-entry-content {
	font-size: 17px;
	line-height: 1.85;
	color: var(--color-dark-1);
}

.article-entry-content p { margin-bottom: 20px; }

.article-entry-content h2,
.article-entry-content h3,
.article-entry-content h4 {
	font-family: var(--font-serif);
	color: var(--color-dark-1);
	line-height: 1.35;
	margin: 28px 0 12px;
}

.article-entry-content h2 { font-size: 24px; }
.article-entry-content h3 { font-size: 20px; }

.article-entry-content a { color: var(--color-primary); text-decoration: underline; }

.article-entry-content ul,
.article-entry-content ol { margin: 0 0 20px 24px; }
.article-entry-content li { margin-bottom: 8px; }

.article-entry-content img { border-radius: 6px; margin: 12px 0; }

.article-entry-content blockquote {
	border-left: 4px solid var(--color-primary);
	background: var(--color-gray-light);
	padding: 14px 20px;
	margin: 20px 0;
	font-family: var(--font-serif);
	font-size: 19px;
	color: var(--color-dark-2);
}

.article-entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	font-size: 15px;
}

.article-entry-content th,
.article-entry-content td {
	border: 1px solid var(--color-gray-border);
	padding: 10px 12px;
	text-align: left;
}

.article-entry-content th { background: var(--color-gray-light); font-weight: 700; }

.article-footer-meta { margin-top: 24px; }

.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: 13px;
}

.article-tags a {
	background: var(--color-gray-light);
	border: 1px solid var(--color-gray-border);
	padding: 4px 10px;
	border-radius: 20px;
	color: var(--color-gray-1);
	font-weight: 600;
}

.article-tags a:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* ==========================================================================
   STATIC PAGE
   ========================================================================== */

.static-page-container { max-width: 820px; margin: 0 auto; }
.static-page-title {
	font-family: var(--font-serif);
	font-size: 32px;
	font-weight: 800;
	margin-bottom: 20px;
	color: var(--color-dark-1);
}
.static-page-media { margin-bottom: 20px; }
.static-page-media img { width: 100%; border-radius: 8px; }
.static-page-content { font-size: 17px; }

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pagination .nav-links,
.pagination-wrapper .nav-links {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
}

.page-numbers {
	display: inline-block;
	min-width: 40px;
	text-align: center;
	padding: 8px 12px;
	border: 1px solid var(--color-gray-border);
	border-radius: 4px;
	background: var(--color-white);
	font-weight: 600;
	color: var(--color-dark-1);
}

.page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.page-numbers:hover:not(.current) { border-color: var(--color-primary); color: var(--color-primary); }

/* ==========================================================================
   FORMS (Newsletter, Contact) + COMMENTS
   ========================================================================== */

.kp-form-msg {
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 14px;
	margin-bottom: 12px;
}
.kp-form-success { background: #ECFDF5; border: 1px solid #A7F3D0; color: #047857; }
.kp-form-notice  { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1D4ED8; }
.kp-form-error   { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; }

.newsletter-form-compact { flex-direction: column; }
.newsletter-form-compact input { width: 100%; }

.sidebar-newsletter {
	background: var(--color-gray-light);
	border: 1px solid var(--color-gray-border);
	border-radius: 8px;
	padding: 16px;
	margin-top: 24px;
}
.sidebar-newsletter h4 {
	font-family: var(--font-serif);
	font-size: 16px;
	margin-bottom: 10px;
	color: var(--color-dark-1);
}

.kp-contact-form { max-width: 720px; }
.kp-field { margin-bottom: 16px; display: flex; flex-direction: column; }
.kp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kp-field label { font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--color-dark-1); }
.kp-field label span { color: var(--color-primary); }
.kp-field input,
.kp-field textarea {
	padding: 10px 12px;
	border: 1px solid var(--color-gray-border);
	border-radius: 6px;
	font-family: var(--font-sans);
	font-size: 15px;
	background: var(--color-white);
	color: var(--color-dark-1);
}
.kp-field input:focus,
.kp-field textarea:focus { outline: 2px solid var(--color-primary); border-color: var(--color-primary); }

.search-submit,
.comment-submit {
	background: var(--color-primary);
	color: #fff;
	border: none;
	padding: 10px 22px;
	border-radius: 6px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}
.search-submit:hover { background: var(--color-primary-dark); }

.krantipatra-comments { margin-top: 40px; }
.comment-list { list-style: none; margin: 0 0 24px; padding: 0; }
.comment-list .comment { border-bottom: 1px solid var(--color-gray-border); padding: 16px 0; }
.comment-list .children { list-style: none; margin-left: 32px; }
.comment-notes { font-size: 13px; color: var(--color-gray-2); margin-bottom: 12px; }
.comment-form-comment textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--color-gray-border);
	border-radius: 6px;
	font-family: var(--font-sans);
	margin-bottom: 12px;
	background: var(--color-white);
	color: var(--color-dark-1);
}

/* ==========================================================================
   404 ERROR PAGE
   ========================================================================== */

.error-404-block {
	text-align: center;
	padding: 48px 16px;
	max-width: 720px;
	margin: 0 auto;
}
.error-404-code {
	font-family: var(--font-sans);
	font-size: 96px;
	font-weight: 900;
	color: var(--color-primary);
	line-height: 1;
}
.error-404-title {
	font-family: var(--font-serif);
	font-size: 30px;
	font-weight: 800;
	margin: 8px 0 12px;
}
.error-404-text { color: var(--color-gray-1); font-size: 16px; margin-bottom: 24px; }
.error-404-actions { margin-bottom: 24px; }
.error-404-search { max-width: 420px; margin: 0 auto 40px; }
.error-404-search .search-form { display: flex; gap: 8px; }
.error-404-search .search-field {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid var(--color-gray-border);
	border-radius: 6px;
}
.error-404-suggestions { text-align: left; }

/* Search modal + generic search field */
.search-form { display: flex; gap: 8px; }
.search-field {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid var(--color-gray-border);
	border-radius: 6px;
	font-family: var(--font-sans);
}

/* ==========================================================================
   RESPONSIVE ADDITIONS
   ========================================================================== */

@media (max-width: 1024px) {
	.category-sub-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.latest-news-card { flex-direction: column; }
	.latest-news-thumb { width: 100%; height: 200px; }
	.article-main-title { font-size: 26px; }
	.article-author-bar { flex-direction: column; align-items: flex-start; }
	.post-timestamps { text-align: left; }
	.kp-field-row { grid-template-columns: 1fr; }
	.hero-primary-title { font-size: 22px; }
}

/* Dark-mode coverage for added components */
body.dark-mode .category-header-banner,
body.dark-mode .search-header-banner,
body.dark-mode .cat-featured-card,
body.dark-mode .no-results-box,
body.dark-mode .no-posts-found,
body.dark-mode .sidebar-newsletter,
body.dark-mode .page-numbers,
body.dark-mode .kp-field input,
body.dark-mode .kp-field textarea,
body.dark-mode .comment-form textarea,
body.dark-mode .comment-form input {
	background-color: #111827 !important;
	border-color: #374151 !important;
	color: #F3F4F6 !important;
}

body.dark-mode .article-entry-content,
body.dark-mode .static-page-content,
body.dark-mode .cat-featured-title,
body.dark-mode .cat-card-title a,
body.dark-mode .category-header-title { color: #F3F4F6 !important; }

body.dark-mode .article-entry-content blockquote,
body.dark-mode .article-tags a { background-color: #1F2937 !important; }

/* =========================================================================
   NAV UTILITY BUTTONS + TRENDING TOPICS STRIP (Onlinekhabar-style)
   ========================================================================= */

.nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.nav-inner .nav-menu-list {
	flex: 1 1 auto;
	min-width: 0;
}

.nav-utility {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding-left: 8px;
}

.nav-util-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 32px;
	padding: 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: #F3F4F6;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 4px;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.nav-util-btn:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* Trending topics strip */
.trending-tags-bar {
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-gray-border);
}

.trending-tags-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.trending-tags-label {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-primary);
	white-space: nowrap;
}

.trending-tags-scroll {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: thin;
}

.trending-tags-scroll::-webkit-scrollbar { height: 4px; }
.trending-tags-scroll::-webkit-scrollbar-thumb { background: var(--color-gray-border); border-radius: 4px; }

.trending-tag-pill {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 12px 4px 4px;
	border: 1px solid var(--color-gray-border);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-dark-1);
	background: var(--color-offwhite);
	transition: all var(--transition-fast);
}

.trending-tag-pill:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.trending-tag-pill .tag-thumb {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-color: var(--color-gray-light);
	flex: 0 0 auto;
}

.trending-tag-pill .tag-thumb-fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: var(--color-primary);
	font-size: 13px;
	font-weight: 700;
}

.trending-search-form {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	max-width: 230px;
}

.trending-search-input {
	height: 34px;
	width: 170px;
	max-width: 46vw;
	padding: 0 12px;
	font-size: 13px;
	color: var(--color-dark-1);
	background: var(--color-offwhite);
	border: 1px solid var(--color-gray-border);
	border-right: 0;
	border-radius: 4px 0 0 4px;
	outline: none;
}

.trending-search-input:focus { border-color: var(--color-primary); }

.trending-search-btn {
	height: 34px;
	padding: 0 12px;
	background: var(--color-primary);
	color: #fff;
	border: 1px solid var(--color-primary);
	border-radius: 0 4px 4px 0;
	cursor: pointer;
	font-size: 14px;
}

@media (max-width: 768px) {
	.trending-tags-label { display: none; }
	.trending-search-form { display: none; }
	.nav-util-lang { display: none; }
	.trending-tags-inner { gap: 10px; }
}

/* =========================================================================
   CATEGORY BLOCK — "lead + headline list" (Onlinekhabar / Setopati / Ratopati)
   ========================================================================= */

.cat-block-grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 26px;
	align-items: start;
}

/* Solo block (category has only the lead story) — fill the width with a
   horizontal card instead of leaving the headline-list column blank. */
.cat-block-grid.cat-block-solo {
	grid-template-columns: 1fr;
}

.cat-block-solo .cat-lead {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 24px;
	align-items: center;
}

.cat-block-solo .cat-lead-title { margin-top: 0; }

@media (max-width: 700px) {
	.cat-block-solo .cat-lead { grid-template-columns: 1fr; gap: 12px; }
	.cat-block-solo .cat-lead-title { margin-top: 12px; }
}

/* Lead story (left) */
.cat-lead-thumb {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
	background: var(--color-gray-light);
}

.cat-lead-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-fast);
}

.cat-lead-thumb:hover img { transform: scale(1.04); }

.cat-lead-title {
	margin: 12px 0 8px;
	font-size: 22px;
	line-height: 1.35;
	font-weight: 700;
}

.cat-lead-title a { color: var(--color-dark-1); }
.cat-lead-title a:hover { color: var(--color-primary); }

.cat-lead-excerpt {
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-gray-1);
	margin-bottom: 8px;
}

.cat-lead .meta-date {
	font-size: 13px;
	color: var(--color-gray-2);
}

/* Headline list (right) */
.cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cat-list-item {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--color-gray-border);
}

.cat-list-item:first-child { padding-top: 0; }
.cat-list-item:last-child { border-bottom: 0; }

.cat-list-thumb {
	flex: 0 0 auto;
	width: 92px;
	height: 66px;
	overflow: hidden;
	border-radius: 5px;
	background: var(--color-gray-light);
}

.cat-list-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cat-list-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	min-width: 0;
}

.cat-list-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-dark-1);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cat-list-title:hover { color: var(--color-primary); }

.cat-list-body .meta-time {
	font-size: 12px;
	color: var(--color-gray-2);
}

@media (max-width: 860px) {
	.cat-block-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.cat-lead-title { font-size: 20px; }
}

/* =========================================================================
   LEAD STORY — full-width centered headline + big image (Onlinekhabar-style)
   ========================================================================= */

.lead-story {
	padding-top: 8px;
}

.lead-story-head {
	max-width: 900px;
	margin: 0 auto 20px;
	text-align: center;
}

.lead-category {
	display: inline-block;
	margin-bottom: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.lead-title {
	margin: 0 0 16px;
	font-size: 40px;
	line-height: 1.28;
	font-weight: 800;
}

.lead-title a { color: var(--color-dark-1); }
.lead-title a:hover { color: var(--color-primary); }

.lead-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px;
	font-size: 14px;
	color: var(--color-gray-2);
}

.lead-author {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--color-dark-1);
}

.lead-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

.lead-image {
	display: block;
	width: 100%;
	max-height: 540px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--color-gray-light);
}

.lead-image img {
	width: 100%;
	height: 100%;
	max-height: 540px;
	object-fit: cover;
	display: block;
}

.lead-excerpt {
	max-width: 900px;
	margin: 18px auto 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--color-gray-1);
	text-align: center;
}

@media (max-width: 768px) {
	.lead-title { font-size: 26px; }
	.lead-excerpt { font-size: 15px; text-align: left; }
	.lead-byline { gap: 12px; font-size: 13px; }
}

/* Brand logo image (bundled default) */
.site-logo-img {
	display: block;
	width: auto;
	height: auto;
	max-height: 64px;
	max-width: 260px;
}

/* Keep the logo legible on the dark header in dark mode (renders it white). */
body.dark-mode .site-logo-img {
	filter: brightness(0) invert(1);
}

@media (max-width: 600px) {
	.site-logo-img { max-height: 48px; max-width: 190px; }
}


/* =========================================================================
   SIDEBAR "ताजा अपडेट" — compact numbered headline list (fills the sidebar)
   ========================================================================= */

.sidebar-headlines {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: sbh;
}

.sidebar-headline-item {
	position: relative;
	padding: 11px 0 11px 30px;
	border-bottom: 1px solid var(--color-gray-border);
	counter-increment: sbh;
}

.sidebar-headline-item:last-child { border-bottom: 0; }

.sidebar-headline-item::before {
	content: counter(sbh);
	position: absolute;
	left: 0;
	top: 10px;
	font-size: 15px;
	font-weight: 800;
	color: var(--color-primary);
}

.sidebar-headline-link {
	display: block;
	margin-bottom: 4px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--color-dark-1);
}

.sidebar-headline-link:hover { color: var(--color-primary); }

.sidebar-headline-item .meta-time {
	font-size: 12px;
	color: var(--color-gray-2);
}