/*
 * MonirNews Main Stylesheet
 *
 * @package MonirNews
 * @since   1.0.0
 */

/* ============================================================
   CSS Custom Properties (Variables)
   ============================================================ */
:root {
	/* Brand colors — requested names */
	--primary-color:        #c0392b;
	--secondary-color:      #2c3e50;
	--accent-color:         #f39c12;

	/* Semantic aliases (keep both sets for compatibility) */
	--color-primary:        var(--primary-color);
	--color-secondary:      var(--secondary-color);
	--color-accent:         var(--accent-color);
	--color-accent-hover:   #e67e22;
	--color-danger:         #e74c3c;

	/* UI colors */
	--color-text:           #222222;
	--color-text-light:     #666666;
	--color-text-muted:     #999999;
	--color-border:         #e0e0e0;
	--color-bg:             #ffffff;
	--color-bg-light:       #f8f9fa;
	--color-bg-dark:        #16213e;
	--color-bg-darker:      #0f3460;

	/* Category colors — exact brand values */
	--cat-politics:         #e74c3c;
	--cat-tech:             #2980b9;
	--cat-sports:           #27ae60;
	--cat-entertainment:    #8e44ad;
	--cat-business:         #f39c12;
	--cat-health:           #16a085;

	/* Typography */
	--font-primary:         'Georgia', 'Times New Roman', serif;
	--font-secondary:       'Helvetica Neue', Arial, sans-serif;

	--font-size-base:       16px;
	--font-size-xs:         0.75rem;
	--font-size-sm:         0.875rem;
	--font-size-lg:         1.125rem;
	--font-size-xl:         1.25rem;
	--font-size-2xl:        1.5rem;
	--font-size-3xl:        2rem;
	--font-size-4xl:        2.5rem;

	--line-height-base:     1.6;
	--line-height-heading:  1.2;

	/* Spacing */
	--spacing-xs:           0.25rem;
	--spacing-sm:           0.5rem;
	--spacing-md:           1rem;
	--spacing-lg:           1.5rem;
	--spacing-xl:           2rem;
	--spacing-2xl:          3rem;
	--spacing-3xl:          4rem;

	/* Shape */
	--border-radius:        4px;
	--border-radius-lg:     8px;
	--border-radius-xl:     12px;

	/* Layout */
	--container-width:      1200px;
	--sidebar-width:        300px;
	--header-height:        72px;

	/* Effects */
	--transition-base:      0.2s ease-in-out;
	--transition-slow:      0.35s ease-in-out;
	--box-shadow:           0 2px 8px rgba(0, 0, 0, 0.08);
	--box-shadow-md:        0 4px 12px rgba(0, 0, 0, 0.12);
	--box-shadow-lg:        0 8px 24px rgba(0, 0, 0, 0.15);
	--box-shadow-card:      0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   Dark Mode
   ============================================================ */
@media (prefers-color-scheme: dark) {
	:root {
		--color-text:        #e8e8e8;
		--color-text-light:  #aaaaaa;
		--color-text-muted:  #777777;
		--color-border:      #2e2e2e;
		--color-bg:          #121212;
		--color-bg-light:    #1e1e1e;
		--color-bg-dark:     #0a0a0a;
		--color-bg-darker:   #050505;
		--box-shadow:        0 2px 8px rgba(0, 0, 0, 0.4);
		--box-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.5);
		--box-shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.6);
		--box-shadow-card:   0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4);
	}

	.site-header {
		background-color: #1a1a1a;
		border-bottom-color: #2e2e2e;
	}

	.site-branding .site-title a,
	.main-navigation ul li a,
	.entry-title a {
		color: #e8e8e8;
	}

	.post-card {
		background: #1e1e1e;
		border-color: #2e2e2e;
	}

	.reading-time {
		background: #2e2e2e;
		color: #aaaaaa;
	}

	.hero-section .hero-overlay {
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.95) 0%,
			rgba(0, 0, 0, 0.6) 50%,
			rgba(0, 0, 0, 0.15) 100%
		);
	}

	.entry-content blockquote {
		background: #1e1e1e;
	}

	.author-bio {
		background: #1e1e1e;
	}

	.ticker-wrap {
		background: #1a1a1a;
	}

	.section-title::after {
		opacity: 0.6;
	}

	input,
	textarea,
	select {
		background: #1e1e1e;
		border-color: #2e2e2e;
		color: #e8e8e8;
	}
}

/* ============================================================
   Reset & Base
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: var(--font-size-base);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-secondary);
	font-size: 1rem;
	line-height: var(--line-height-base);
	color: var(--color-text);
	background-color: var(--color-bg);
	margin: 0;
	padding: 0;
}

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

a {
	color: var(--primary-color);
	text-decoration: none;
	transition: color var(--transition-base);
}

a:hover,
a:focus {
	color: var(--color-accent-hover);
	text-decoration: underline;
}

a:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
	border-radius: 2px;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	line-height: var(--line-height-heading);
	margin-top: 0;
}

/* ============================================================
   Layout
   ============================================================ */
.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--spacing-lg);
}

.row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xl);
}

.col-main {
	flex: 1;
	min-width: 0;
}

.col-sidebar {
	width: var(--sidebar-width);
	flex-shrink: 0;
}

/* ============================================================
   Header Accent Bar (4px red top line)
   ============================================================ */
.header-accent-bar {
	height: 4px;
	background: var(--primary-color);
	background: linear-gradient(
		to right,
		var(--primary-color) 0%,
		var(--color-accent-hover) 50%,
		var(--primary-color) 100%
	);
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 200;
	flex-shrink: 0;
}

/* ============================================================
   Breaking News Ticker
   ============================================================ */
.breaking-news-ticker {
	background: var(--color-bg-light);
	border-bottom: 1px solid var(--color-border);
	display: flex;
	align-items: stretch;
	overflow: hidden;
	height: 40px;
	position: relative;
}

.ticker-label {
	background: var(--primary-color);
	color: #fff;
	font-size: var(--font-size-xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0 var(--spacing-md);
	display: flex;
	align-items: center;
	white-space: nowrap;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
}

.ticker-label::after {
	content: '';
	position: absolute;
	right: -10px;
	top: 0;
	bottom: 0;
	width: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 10px solid var(--primary-color);
}

.ticker-label .ticker-pulse {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%;
	margin-right: var(--spacing-sm);
	animation: monirnews-pulse 1.2s infinite;
}

@keyframes monirnews-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: 0.4; transform: scale(0.8); }
}

.ticker-wrap {
	flex: 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding-left: var(--spacing-lg);
	background: var(--color-bg-light);
}

.ticker-items {
	display: flex;
	white-space: nowrap;
	animation: monirnews-ticker 30s linear infinite;
	will-change: transform;
}

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

@keyframes monirnews-ticker {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.ticker-item {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--spacing-xl);
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--color-text);
}

.ticker-item a {
	color: var(--color-text);
	transition: color var(--transition-base);
}

.ticker-item a:hover {
	color: var(--primary-color);
	text-decoration: none;
}

.ticker-separator {
	color: var(--primary-color);
	font-weight: 700;
	margin: 0 var(--spacing-sm);
}

/* ============================================================
   Top Bar
   ============================================================ */
.top-bar {
	background-color: var(--secondary-color);
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--font-size-sm);
	padding: 6px 0;
	position: sticky;
	top: 4px; /* below accent bar */
	z-index: 150;
}

.top-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
}

.top-bar-date {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	font-size: var(--font-size-xs);
	opacity: 0.85;
}

.top-bar-date::before {
	content: '📅';
	font-size: 0.7rem;
}

.top-bar-right {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
}

.social-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--spacing-md);
	align-items: center;
}

.social-menu a {
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--font-size-sm);
	transition: color var(--transition-base);
	display: flex;
	align-items: center;
}

.social-menu a:hover {
	color: #fff;
	text-decoration: none;
}

/* ============================================================
   Site Header — Sticky
   ============================================================ */
.site-header {
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	padding: 0;
	position: sticky;
	top: 34px; /* accent bar (4px) + top bar (~30px) */
	z-index: 100;
	box-shadow: var(--box-shadow-md);
	transition: box-shadow var(--transition-slow);
}

.site-header.is-sticky {
	box-shadow: var(--box-shadow-lg);
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-xl);
	height: var(--header-height);
}

/* Branding */
.site-branding {
	flex-shrink: 0;
}

.site-branding .custom-logo-link {
	display: flex;
	align-items: center;
}

.site-branding .custom-logo {
	max-height: 52px;
	width: auto;
}

.site-title-wrap {
	line-height: 1;
}

.site-branding .site-title {
	font-family: var(--font-primary);
	font-size: var(--font-size-2xl);
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.02em;
}

.site-branding .site-title a {
	color: var(--secondary-color);
	text-decoration: none;
}

.site-branding .site-title a:hover {
	color: var(--primary-color);
}

.site-branding .site-title a span.text-accent {
	color: var(--primary-color);
}

.site-description {
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	margin: 2px 0 0;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ============================================================
   Navigation
   ============================================================ */
.main-navigation {
	display: flex;
	align-items: center;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
}

.main-navigation ul li {
	position: relative;
}

.main-navigation ul li a {
	display: flex;
	align-items: center;
	padding: 0 var(--spacing-md);
	height: var(--header-height);
	color: var(--color-text);
	font-weight: 600;
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: color var(--transition-base), border-color var(--transition-base);
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-ancestor > a {
	color: var(--primary-color);
	border-bottom-color: var(--primary-color);
	text-decoration: none;
}

/* Dropdown */
.main-navigation ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--color-bg);
	min-width: 220px;
	box-shadow: var(--box-shadow-lg);
	border-top: 3px solid var(--primary-color);
	border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
	z-index: 999;
	flex-direction: column;
	padding: var(--spacing-sm) 0;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li:focus-within > ul {
	display: flex;
}

.main-navigation ul ul li a {
	height: auto;
	padding: var(--spacing-sm) var(--spacing-lg);
	border-bottom: none;
	font-size: var(--font-size-sm);
	color: var(--color-text);
	border-left: 3px solid transparent;
	transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

.main-navigation ul ul li a:hover {
	background: var(--color-bg-light);
	color: var(--primary-color);
	border-left-color: var(--primary-color);
}

/* ============================================================
   Hamburger Menu Toggle
   ============================================================ */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 36px;
	height: 28px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 0;
	flex-shrink: 0;
}

.menu-toggle .hamburger-bar {
	display: block;
	height: 3px;
	width: 100%;
	background: var(--secondary-color);
	border-radius: 2px;
	transition: transform var(--transition-base), opacity var(--transition-base), width var(--transition-base);
	transform-origin: center;
}

/* Animate to X when open */
.main-navigation.toggled .menu-toggle .hamburger-bar:nth-child(1) {
	transform: translateY(10px) rotate(45deg);
}

.main-navigation.toggled .menu-toggle .hamburger-bar:nth-child(2) {
	opacity: 0;
	width: 0;
}

.main-navigation.toggled .menu-toggle .hamburger-bar:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
}

/* ============================================================
   Main Content Area
   ============================================================ */
.site-content {
	padding: var(--spacing-2xl) 0;
	min-height: 60vh;
}

/* ============================================================
   Section Headers
   ============================================================ */
.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--spacing-xl);
}

.section-title {
	font-family: var(--font-secondary);
	font-size: var(--font-size-xl);
	font-weight: 800;
	color: var(--secondary-color);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-left: var(--spacing-md);
	border-left: 4px solid var(--primary-color);
	line-height: 1;
}

.section-view-all {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--primary-color);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.section-view-all::after {
	content: '→';
}

.section-view-all:hover {
	text-decoration: none;
	color: var(--color-accent-hover);
}

/* ============================================================
   Hero Section
   ============================================================ */
.hero-section {
	margin-bottom: var(--spacing-2xl);
}

.hero-post {
	position: relative;
	border-radius: var(--border-radius-xl);
	overflow: hidden;
	background: var(--secondary-color);
	min-height: 520px;
	display: flex;
	align-items: flex-end;
}

.hero-post .hero-thumbnail {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero-post .hero-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.hero-post:hover .hero-thumbnail img {
	transform: scale(1.03);
}

.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.88) 0%,
		rgba(0, 0, 0, 0.55) 40%,
		rgba(0, 0, 0, 0.08) 100%
	);
}

.hero-content {
	position: relative;
	z-index: 2;
	padding: var(--spacing-2xl);
	width: 100%;
}

.hero-content .entry-category a {
	font-size: var(--font-size-xs);
	padding: 4px var(--spacing-sm);
	margin-bottom: var(--spacing-md);
	background: var(--primary-color);
}

.hero-title {
	font-family: var(--font-primary);
	font-size: var(--font-size-4xl);
	line-height: 1.15;
	color: #fff;
	margin: 0 0 var(--spacing-md);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero-title a {
	color: #fff;
}

.hero-title a:hover {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.hero-excerpt {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--font-size-lg);
	line-height: 1.6;
	margin: 0 0 var(--spacing-lg);
	max-width: 680px;
}

.hero-meta {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--font-size-sm);
}

.hero-meta a {
	color: rgba(255, 255, 255, 0.7);
}

.hero-meta a:hover {
	color: #fff;
	text-decoration: none;
}

.hero-read-more {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	background: var(--primary-color);
	color: #fff !important;
	padding: var(--spacing-sm) var(--spacing-lg);
	border-radius: var(--border-radius);
	font-weight: 700;
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: background var(--transition-base), transform var(--transition-base);
}

.hero-read-more:hover {
	background: var(--color-accent-hover);
	text-decoration: none;
	transform: translateY(-1px);
}

.hero-read-more::after {
	content: '→';
}

/* No featured image fallback */
.hero-post.no-thumbnail {
	background: linear-gradient(135deg, var(--secondary-color) 0%, var(--color-bg-darker) 100%);
	min-height: 400px;
}

/* ============================================================
   3-Column Post Grid (Homepage)
   ============================================================ */
.posts-grid-3col {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-xl);
	margin-bottom: var(--spacing-2xl);
}

.posts-grid-3col .post-card {
	margin-bottom: 0;
}

/* Featured first card spans 2 cols */
.posts-grid-3col .post-card:first-child {
	grid-column: span 2;
}

.posts-grid-3col .post-card:first-child .post-thumbnail img {
	height: 300px;
}

/* ============================================================
   Post Cards
   ============================================================ */
.post-card {
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	margin-bottom: var(--spacing-xl);
	background: var(--color-bg);
	box-shadow: var(--box-shadow-card);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
	display: flex;
	flex-direction: column;
}

.post-card:hover {
	box-shadow: var(--box-shadow-md);
	transform: translateY(-3px);
}

.post-card .post-thumbnail {
	overflow: hidden;
	flex-shrink: 0;
}

.post-card .post-thumbnail img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.post-card:hover .post-thumbnail img {
	transform: scale(1.04);
}

.entry-wrapper {
	padding: var(--spacing-lg);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.entry-category {
	margin-bottom: var(--spacing-sm);
}

.entry-category a {
	display: inline-block;
	background: var(--primary-color);
	color: #fff;
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 3px var(--spacing-sm);
	border-radius: var(--border-radius);
	transition: background var(--transition-base);
}

.entry-category a:hover {
	background: var(--color-accent-hover);
	text-decoration: none;
	color: #fff;
}

/* ============================================================
   Category Color Coding
   ============================================================ */

/* Politics — red */
.category-politics .entry-category a,
.cat-politics .entry-category a {
	background: var(--cat-politics);
}

.category-politics .entry-category a:hover,
.cat-politics .entry-category a:hover {
	background: #c0392b;
}

/* Technology — blue */
.category-technology .entry-category a,
.category-tech .entry-category a,
.cat-tech .entry-category a {
	background: var(--cat-tech);
}

.category-technology .entry-category a:hover,
.category-tech .entry-category a:hover {
	background: #1a6fa0;
}

/* Sports — green */
.category-sports .entry-category a,
.cat-sports .entry-category a {
	background: var(--cat-sports);
}

.category-sports .entry-category a:hover,
.cat-sports .entry-category a:hover {
	background: #1e8449;
}

/* Entertainment — purple */
.category-entertainment .entry-category a,
.cat-entertainment .entry-category a {
	background: var(--cat-entertainment);
}

.category-entertainment .entry-category a:hover,
.cat-entertainment .entry-category a:hover {
	background: #6c3483;
}

/* Business — gold/amber */
.category-business .entry-category a {
	background: var(--cat-business);
}

.category-business .entry-category a:hover {
	background: var(--color-accent-hover);
}

/* Health — teal */
.category-health .entry-category a {
	background: var(--cat-health);
}

/* Section accent bars — category archive pages */
.category-politics    .section-title { border-left-color: var(--cat-politics); }
.category-technology  .section-title,
.category-tech        .section-title { border-left-color: var(--cat-tech); }
.category-sports      .section-title { border-left-color: var(--cat-sports); }
.category-entertainment .section-title { border-left-color: var(--cat-entertainment); }
.category-business    .section-title { border-left-color: var(--cat-business); }

/* Front-page category section heading colour bars */
.fp-cat-title.fp-cat-politics      { border-left-color: var(--cat-politics); }
.fp-cat-title.fp-cat-technology    { border-left-color: var(--cat-tech); }
.fp-cat-title.fp-cat-sports        { border-left-color: var(--cat-sports); }
.fp-cat-title.fp-cat-entertainment { border-left-color: var(--cat-entertainment); }
.fp-cat-title.fp-cat-business      { border-left-color: var(--cat-business); }

/* ============================================================
   Entry Title, Meta, Summary
   ============================================================ */
.entry-title {
	font-family: var(--font-primary);
	font-size: var(--font-size-xl);
	line-height: var(--line-height-heading);
	margin: 0 0 var(--spacing-sm);
}

.entry-title a {
	color: var(--secondary-color);
	transition: color var(--transition-base);
}

.entry-title a:hover {
	color: var(--primary-color);
	text-decoration: none;
}

.entry-meta {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	margin-bottom: var(--spacing-sm);
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	align-items: center;
}

.entry-meta a {
	color: var(--color-text-light);
}

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

.reading-time {
	font-size: var(--font-size-xs);
	background: var(--color-bg-light);
	color: var(--color-text-muted);
	padding: 2px var(--spacing-sm);
	border-radius: 20px;
}

.entry-summary {
	color: var(--color-text-light);
	line-height: var(--line-height-base);
	flex: 1;
}

.read-more,
.read-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: var(--spacing-md);
	color: var(--primary-color);
	font-weight: 700;
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.read-more::after,
.read-more-btn::after {
	content: '→';
	transition: transform var(--transition-base);
}

.read-more:hover::after,
.read-more-btn:hover::after {
	transform: translateX(3px);
}

/* ============================================================
   Category Section Blocks (Front Page)
   ============================================================ */
.category-section {
	margin-bottom: var(--spacing-2xl);
	padding-bottom: var(--spacing-2xl);
	border-bottom: 1px solid var(--color-border);
}

.category-section:last-child {
	border-bottom: none;
}

.category-section .posts-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-lg);
}

.category-section .posts-row .post-card {
	margin-bottom: 0;
}

/* ============================================================
   Single Post
   ============================================================ */
.single-post .entry-title {
	font-size: var(--font-size-3xl);
}

.single-post .post-thumbnail {
	margin-bottom: var(--spacing-xl);
	border-radius: var(--border-radius-xl);
	overflow: hidden;
}

.single-post .post-thumbnail img {
	width: 100%;
	max-height: 500px;
	object-fit: cover;
}

.entry-content {
	font-family: var(--font-primary);
	font-size: var(--font-size-lg);
	line-height: 1.8;
	color: var(--color-text);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--font-secondary);
	color: var(--secondary-color);
	margin-top: var(--spacing-xl);
}

.entry-content p {
	margin-bottom: var(--spacing-lg);
}

.entry-content blockquote {
	border-left: 4px solid var(--primary-color);
	padding: var(--spacing-md) var(--spacing-lg);
	margin: var(--spacing-xl) 0;
	background: var(--color-bg-light);
	font-style: italic;
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

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

/* Author Bio */
.author-bio {
	display: flex;
	gap: var(--spacing-lg);
	padding: var(--spacing-xl);
	background: var(--color-bg-light);
	border-radius: var(--border-radius-lg);
	margin-top: var(--spacing-2xl);
	align-items: flex-start;
	border-left: 4px solid var(--primary-color);
}

.author-avatar img {
	border-radius: 50%;
	width: 80px;
	height: 80px;
	flex-shrink: 0;
}

.author-name {
	font-size: var(--font-size-lg);
	margin: 0 0 var(--spacing-sm);
}

.author-description {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	margin: 0;
}

/* ============================================================
   Post Navigation
   ============================================================ */
.post-navigation {
	padding: var(--spacing-xl) 0;
	border-top: 1px solid var(--color-border);
	margin-top: var(--spacing-xl);
}

.nav-links {
	display: flex;
	justify-content: space-between;
	gap: var(--spacing-lg);
}

.nav-previous,
.nav-next {
	flex: 1;
}

.nav-next {
	text-align: right;
}

.nav-subtitle {
	display: block;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--spacing-xs);
}

.nav-title {
	font-weight: 700;
	color: var(--secondary-color);
	font-size: var(--font-size-sm);
}

/* ============================================================
   Sidebar / Widgets
   ============================================================ */
.widget-area .widget {
	margin-bottom: var(--spacing-2xl);
}

.widget-title {
	font-family: var(--font-secondary);
	font-size: var(--font-size-lg);
	font-weight: 800;
	color: var(--secondary-color);
	border-bottom: 3px solid var(--primary-color);
	padding-bottom: var(--spacing-sm);
	margin-bottom: var(--spacing-lg);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ============================================================
   Page Header
   ============================================================ */
.page-header {
	margin-bottom: var(--spacing-2xl);
	padding-bottom: var(--spacing-lg);
	border-bottom: 3px solid var(--primary-color);
}

.page-title {
	font-family: var(--font-primary);
	font-size: var(--font-size-2xl);
	color: var(--secondary-color);
	margin: 0;
}

/* ============================================================
   404 Page
   ============================================================ */
.error-404 {
	padding: var(--spacing-2xl) 0;
	text-align: center;
}

/* ============================================================
   Footer — 3 Columns + Bottom Bar
   ============================================================ */
.site-footer {
	background-color: var(--color-bg-dark);
	color: rgba(255, 255, 255, 0.8);
	padding: var(--spacing-3xl) 0 0;
	border-top: 4px solid var(--primary-color);
}

/* Widget columns */
.footer-widgets {
	margin-bottom: var(--spacing-2xl);
}

.footer-widget-area {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-2xl);
}

.footer-widget-col {
	min-width: 0;
}

.site-footer .widget {
	margin-bottom: var(--spacing-xl);
}

.site-footer .widget-title {
	color: #fff;
	border-bottom-color: var(--primary-color);
	font-size: var(--font-size-base);
}

.site-footer a {
	color: rgba(255, 255, 255, 0.75);
	transition: color var(--transition-base);
}

.site-footer a:hover {
	color: #fff;
	text-decoration: none;
}

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

.site-footer ul li {
	padding: var(--spacing-xs) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Footer nav bar */
.footer-nav-bar {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: var(--spacing-lg) 0;
	margin-bottom: 0;
}

.footer-nav-bar .container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xl);
	flex-wrap: wrap;
}

.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm) var(--spacing-lg);
	align-items: center;
	justify-content: center;
}

.footer-menu li::after {
	content: '·';
	margin-left: var(--spacing-lg);
	opacity: 0.3;
}

.footer-menu li:last-child::after {
	display: none;
}

/* Bottom bar */
.footer-bottom-bar {
	background: rgba(0, 0, 0, 0.3);
	padding: var(--spacing-md) 0;
}

.footer-bottom-bar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--spacing-md);
}

.footer-copyright {
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}

.footer-copyright a {
	color: rgba(255, 255, 255, 0.7);
}

.footer-copyright a:hover {
	color: #fff;
}

.footer-powered-by {
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.5);
}

.footer-powered-by a {
	color: var(--accent-color);
	font-weight: 600;
}

.footer-powered-by a:hover {
	color: var(--color-accent-hover);
}

.footer-privacy-link {
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   Skip Link
   ============================================================ */
.skip-link {
	position: absolute;
	top: -100%;
	left: var(--spacing-md);
	background: var(--primary-color);
	color: #fff;
	padding: var(--spacing-sm) var(--spacing-md);
	z-index: 9999;
	border-radius: var(--border-radius);
}

.skip-link:focus {
	top: var(--spacing-md);
}

/* ============================================================
   Search Form
   ============================================================ */
.search-form {
	display: flex;
	gap: var(--spacing-sm);
}

.search-field {
	flex: 1;
	padding: var(--spacing-sm) var(--spacing-md);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	font-size: var(--font-size-base);
	background: var(--color-bg);
	color: var(--color-text);
}

.search-field:focus {
	outline: 2px solid var(--primary-color);
	outline-offset: 0;
	border-color: var(--primary-color);
}

.search-submit {
	padding: var(--spacing-sm) var(--spacing-lg);
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: var(--border-radius);
	cursor: pointer;
	font-weight: 700;
	font-size: var(--font-size-sm);
	letter-spacing: 0.04em;
	transition: background var(--transition-base);
}

.search-submit:hover {
	background: var(--color-accent-hover);
}

/* ============================================================
   Utility
   ============================================================ */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ============================================================
   Front Page — Hero + Sidebar Grid (70 / 30)
   ============================================================ */
.fp-hero-section {
	padding: var(--spacing-2xl) 0;
}

.fp-hero-grid {
	display: grid;
	grid-template-columns: 70fr 30fr;
	gap: var(--spacing-xl);
	align-items: stretch;
}

/* ── Hero post (left 70%) ── */
.fp-hero-main .hero-post {
	min-height: 560px;
	border-radius: var(--border-radius-xl);
}

.fp-hero-main .hero-title {
	font-family: var(--font-primary);
	font-size: 2.8rem;
	line-height: 1.15;
}

/* ── Sidebar list (right 30%) ── */
.fp-hero-sidebar {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.fp-sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.fp-sidebar-item {
	display: flex;
	gap: var(--spacing-md);
	align-items: flex-start;
	padding: var(--spacing-md) 0;
	border-bottom: 1px solid var(--color-border);
	flex: 1;
}

.fp-sidebar-item:first-child {
	padding-top: 0;
}

.fp-sidebar-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* Thumbnail: fixed 16:9 box on the left */
.fp-sidebar-thumb {
	flex-shrink: 0;
	width: 100px;
	aspect-ratio: 16 / 9;
	border-radius: var(--border-radius);
	overflow: hidden;
	background: var(--color-bg-light);
}

.fp-sidebar-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.fp-sidebar-item:hover .fp-sidebar-thumb img {
	transform: scale(1.06);
}

.fp-sidebar-thumb-placeholder {
	width: 100%;
	height: 100%;
	background: var(--color-bg-light);
}

.fp-sidebar-content {
	flex: 1;
	min-width: 0;
}

.fp-sidebar-title {
	font-family: var(--font-primary);
	font-size: var(--font-size-sm);
	line-height: 1.4;
	margin: 0 0 var(--spacing-xs);
}

.fp-sidebar-title a {
	color: var(--secondary-color);
}

.fp-sidebar-title a:hover {
	color: var(--primary-color);
	text-decoration: none;
}

.fp-sidebar-meta {
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
}

.fp-sidebar-read-time::before {
	content: '·';
	margin-right: var(--spacing-xs);
}

/* ============================================================
   Front Page — Latest News 3-Column Grid
   ============================================================ */
.fp-latest-section {
	padding: var(--spacing-2xl) 0;
	background: var(--color-bg-light);
}

.fp-posts-grid-3col {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-xl);
}

/* 16:9 thumbnails using aspect-ratio */
.fp-grid-card .post-thumbnail {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.fp-grid-card .post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.fp-grid-card:hover .post-thumbnail img {
	transform: scale(1.05);
}

.fp-grid-card .entry-title {
	font-size: var(--font-size-lg);
}

.fp-no-thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--color-bg-light), var(--color-border));
}

/* ============================================================
   Front Page — Category Row Sections (4-card horizontal)
   ============================================================ */
.fp-category-section {
	padding: var(--spacing-2xl) 0;
	border-bottom: 1px solid var(--color-border);
}

.fp-category-section:last-of-type {
	border-bottom: none;
}

.fp-cat-row {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 1.5rem;
	margin-top: 1.2rem;
}

.fp-cat-card {
	background: var(--color-bg-card, #fff);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.06 );
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	margin-bottom: 0;
}

.fp-cat-card:hover {
	transform: translateY( -4px );
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
}

/* 16:9 thumbnail for category cards */
.fp-cat-card .post-thumbnail {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.fp-cat-card .post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.fp-cat-card:hover .post-thumbnail img {
	transform: scale( 1.05 );
}

.fp-cat-card .entry-wrapper,
.fp-cat-card-content {
	padding: 1rem;
}

.fp-cat-card-title,
.fp-cat-card .entry-title {
	font-size: 0.95rem;
	line-height: 1.4;
	margin-bottom: 0.4rem;
	font-weight: 700;
}

.fp-cat-card-title a,
.fp-cat-card .entry-title a {
	color: var(--color-text, #1a1a2e);
	text-decoration: none;
}

.fp-cat-card-title a:hover,
.fp-cat-card .entry-title a:hover {
	color: var(--primary-color);
}

/* Section title: 1.1rem uppercase bold */
.section-title {
	font-size: 1.1rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-left: 4px solid var(--primary-color);
	padding-left: var(--spacing-md);
}

/* ============================================================
   Front Page — Editor's Pick (dark section)
   ============================================================ */
.fp-editors-pick {
	background: #1a1a2e;
	padding: var(--spacing-3xl) 0;
	margin-top: var(--spacing-2xl);
	color: rgba(255, 255, 255, 0.9);
}

.fp-pick-inner {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--spacing-2xl);
	align-items: center;
}

.fp-pick-image {
	border-radius: var(--border-radius-xl);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.fp-pick-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.fp-editors-pick:hover .fp-pick-image img {
	transform: scale(1.03);
}

.fp-pick-label {
	display: inline-block;
	font-size: var(--font-size-xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--accent-color);
	border: 1px solid var(--accent-color);
	padding: 3px var(--spacing-md);
	border-radius: var(--border-radius);
	margin-bottom: var(--spacing-lg);
}

.fp-pick-content .entry-category {
	margin-bottom: var(--spacing-md);
}

.fp-pick-content .entry-category a {
	background: var(--primary-color);
}

.fp-pick-title {
	font-family: var(--font-primary);
	font-size: 2.8rem;
	line-height: 1.15;
	color: #fff;
	margin: 0 0 var(--spacing-lg);
}

.fp-pick-title a {
	color: #fff;
}

.fp-pick-title a:hover {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.fp-pick-excerpt {
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--font-size-lg);
	line-height: 1.7;
	margin: 0 0 var(--spacing-xl);
}

.fp-pick-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: var(--spacing-xl);
	align-items: center;
}

.fp-pick-meta a {
	color: rgba(255, 255, 255, 0.7);
}

.fp-pick-meta a:hover {
	color: #fff;
	text-decoration: none;
}

.fp-pick-time::before {
	content: '·';
	margin-right: var(--spacing-sm);
}

.fp-pick-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	background: var(--primary-color);
	color: #fff !important;
	padding: var(--spacing-sm) var(--spacing-xl);
	border-radius: var(--border-radius);
	font-weight: 700;
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: background var(--transition-base), transform var(--transition-base);
}

.fp-pick-cta::after {
	content: '→';
}

.fp-pick-cta:hover {
	background: var(--color-accent-hover);
	text-decoration: none;
	transform: translateY(-1px);
}

/* Dark mode adjustments for Editor's Pick */
@media (prefers-color-scheme: dark) {
	.fp-editors-pick {
		background: #0d0d1a;
	}

	.fp-latest-section {
		background: var(--color-bg-light);
	}
}

/* ============================================================
   Responsive — Tablet (≤ 1024px)
   ============================================================ */
@media screen and (max-width: 1024px) {
	.posts-grid-3col {
		grid-template-columns: repeat(2, 1fr);
	}

	.posts-grid-3col .post-card:first-child {
		grid-column: span 2;
	}

	.category-section .posts-row {
		grid-template-columns: repeat(2, 1fr);
	}

	.hero-title {
		font-size: var(--font-size-3xl);
	}

	/* Front page — tablet */
	.fp-hero-grid {
		grid-template-columns: 60fr 40fr;
	}

	.fp-hero-main .hero-title,
	.fp-pick-title {
		font-size: var(--font-size-3xl);
	}

	.fp-posts-grid-3col {
		grid-template-columns: repeat(2, 1fr);
	}

	.fp-cat-row {
		grid-template-columns: repeat(2, 1fr);
	}

	.fp-pick-inner {
		grid-template-columns: 1fr;
	}

	.fp-pick-image {
		max-width: 600px;
	}
}

/* ============================================================
   Responsive — Mobile (≤ 768px)
   ============================================================ */
@media screen and (max-width: 768px) {
	.row {
		flex-direction: column;
	}

	.col-sidebar {
		width: 100%;
	}

	/* Header */
	.site-header {
		top: 4px; /* Just below accent bar on mobile (top bar hidden) */
	}

	.site-header .container {
		position: relative;
	}

	.top-bar {
		top: 4px;
	}

	/* Hamburger */
	.menu-toggle {
		display: flex;
		order: 3;
	}

	/* Mobile nav */
	.main-navigation {
		flex-wrap: wrap;
		width: 100%;
		order: 2;
	}

	.main-navigation ul {
		display: none;
		flex-direction: column;
		width: 100%;
		background: var(--color-bg);
		border-top: 1px solid var(--color-border);
		padding: var(--spacing-sm) 0;
		box-shadow: var(--box-shadow-md);
	}

	.main-navigation.toggled ul {
		display: flex;
	}

	.main-navigation ul li a {
		height: auto;
		padding: var(--spacing-sm) var(--spacing-lg);
		border-bottom: none;
		border-left: 3px solid transparent;
		font-size: var(--font-size-base);
	}

	.main-navigation ul li a:hover,
	.main-navigation ul li.current-menu-item > a {
		border-left-color: var(--primary-color);
		border-bottom-color: transparent;
		background: var(--color-bg-light);
	}

	.main-navigation ul ul {
		position: static;
		box-shadow: none;
		border: none;
		padding-left: var(--spacing-lg);
		background: var(--color-bg-light);
	}

	/* Grid */
	.posts-grid-3col {
		grid-template-columns: 1fr;
	}

	.posts-grid-3col .post-card:first-child {
		grid-column: span 1;
	}

	.category-section .posts-row {
		grid-template-columns: 1fr;
	}

	/* Hero */
	.hero-post {
		min-height: 380px;
	}

	.hero-title {
		font-size: var(--font-size-2xl);
	}

	.hero-excerpt {
		display: none;
	}

	.hero-content {
		padding: var(--spacing-lg);
	}

	/* Footer */
	.footer-widget-area {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}

	.footer-bottom-bar .container {
		flex-direction: column;
		text-align: center;
		gap: var(--spacing-sm);
	}

	.footer-nav-bar .container {
		flex-direction: column;
	}

	/* Nav */
	.nav-links {
		flex-direction: column;
	}

	.author-bio {
		flex-direction: column;
	}

	.single-post .entry-title {
		font-size: var(--font-size-2xl);
	}

	/* Ticker */
	.breaking-news-ticker {
		height: 36px;
	}

	/* Front page — mobile */
	.fp-hero-grid {
		grid-template-columns: 1fr;
	}

	.fp-hero-sidebar {
		display: none; /* sidebar list hidden on mobile — hero takes full width */
	}

	.fp-hero-main .hero-title {
		font-size: var(--font-size-2xl);
	}

	.fp-posts-grid-3col {
		grid-template-columns: 1fr;
	}

	.fp-cat-row {
		grid-template-columns: repeat(2, 1fr);
	}

	.fp-pick-inner {
		grid-template-columns: 1fr;
	}

	.fp-pick-title {
		font-size: var(--font-size-2xl);
	}

	.fp-pick-excerpt {
		display: none;
	}

	.fp-hero-section {
		padding: var(--spacing-lg) 0;
	}

	.fp-latest-section,
	.fp-category-section {
		padding: var(--spacing-lg) 0;
	}
}

/* ============================================================
   Responsive — Small Mobile (≤ 480px)
   ============================================================ */
@media screen and (max-width: 480px) {
	.container {
		padding: 0 var(--spacing-md);
	}

	.entry-wrapper {
		padding: var(--spacing-md);
	}

	.site-content {
		padding: var(--spacing-lg) 0;
	}

	.top-bar {
		display: none; /* save space on very small screens */
	}

	.ticker-label span {
		display: none;
	}

	.ticker-label .ticker-pulse {
		margin-right: 0;
	}

	.fp-cat-row {
		grid-template-columns: 1fr;
	}

	.fp-editors-pick {
		padding: var(--spacing-2xl) 0;
	}
}

/* =============================================================
 * Thumbnail placeholder — shown when a post has no featured image
 * ============================================================= */
.card-thumbnail-placeholder {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: linear-gradient(
		135deg,
		var(--secondary-color, #2c3e50) 0%,
		var(--primary-color, #c0392b) 100%
	);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: rgba( 255, 255, 255, 0.9 );
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	position: relative;
	overflow: hidden;
}

.card-thumbnail-placeholder::before {
	content: '\1F4F0'; /* 📰 newspaper emoji */
	font-size: 2rem;
	margin-bottom: 8px;
	opacity: 0.6;
	display: block;
}

.card-thumbnail-placeholder span {
	pointer-events: none;
}

.card-thumbnail-placeholder a {
	color: rgba( 255, 255, 255, 0.9 );
	text-decoration: none;
}

/* Sidebar variant — square crop, no pseudo-element */
.fp-sidebar-thumb .card-thumbnail-placeholder {
	aspect-ratio: 1 / 1;
	font-size: 0.65rem;
}

.fp-sidebar-thumb .card-thumbnail-placeholder::before {
	font-size: 1.2rem;
	margin-bottom: 4px;
}

/* =============================================================
 * NAVIGATION — search toggle + active indicator + search bar
 * ============================================================= */

/* Active menu item red underline */
.main-navigation .nav-menu li.current-menu-item > a,
.main-navigation .nav-menu li.current_page_item > a,
.main-navigation .nav-menu li.current-menu-ancestor > a {
	color: var(--primary-color);
	position: relative;
}

.main-navigation .nav-menu li.current-menu-item > a::after,
.main-navigation .nav-menu li.current_page_item > a::after,
.main-navigation .nav-menu li.current-menu-ancestor > a::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--primary-color);
	border-radius: 2px 2px 0 0;
}

/* Search toggle button */
.nav-search-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px 8px;
	color: var(--color-text, #2c3e50);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: color 0.2s, background 0.2s;
	flex-shrink: 0;
}

.nav-search-toggle:hover,
.nav-search-toggle:focus-visible {
	color: var(--primary-color);
	background: rgba( 0, 0, 0, 0.05 );
	outline: none;
}

/* Show search icon by default, hide close icon */
.nav-search-toggle .icon-search { display: block; }
.nav-search-toggle .icon-close  { display: none; }

/* When search bar is open, swap icons */
.nav-search-toggle[aria-expanded="true"] .icon-search { display: none; }
.nav-search-toggle[aria-expanded="true"] .icon-close  { display: block; }

/* Expandable search bar */
.nav-search-bar {
	background: var(--color-bg, #f4f5f7);
	border-top: 1px solid rgba( 0, 0, 0, 0.08 );
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease, padding 0.3s ease;
	padding: 0;
}

.nav-search-bar:not([hidden]) {
	max-height: 80px;
	padding: 0.75rem 0;
}

.nav-search-bar[hidden] {
	display: block !important; /* override hidden for animation */
	max-height: 0;
	padding: 0;
}

.nav-search-bar .search-form {
	display: flex;
	gap: 0;
}

.nav-search-bar .search-field {
	flex: 1;
	padding: 10px 16px;
	border: 1px solid var(--color-border, #dde1e7);
	border-right: none;
	border-radius: 4px 0 0 4px;
	font-size: 1rem;
	outline: none;
}

.nav-search-bar .search-field:focus {
	border-color: var(--primary-color);
}

.nav-search-bar .search-submit {
	padding: 10px 20px;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 0 4px 4px 0;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 600;
	transition: background 0.2s;
}

.nav-search-bar .search-submit:hover {
	background: #a93226;
}

/* Header flex: logo left, nav+search right */
.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-lg);
}

#site-navigation {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/* =============================================================
 * ADVERTISEMENT ZONES
 * ============================================================= */
.ad-zone {
	text-align: center;
	margin: 1.5rem auto;
	width: 100%;
}

.ad-label {
	display: block;
	font-size: 9px;
	color: #bbb;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-bottom: 5px;
	font-weight: 600;
}

.ad-728x90 {
	display: inline-block;
	width: 100%;
	max-width: 728px;
	height: 90px;
	overflow: hidden;
	border-radius: 4px;
}

.ad-728x90 img {
	width: 100%;
	height: 90px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
	transition: opacity 0.2s;
}

.ad-728x90 img:hover {
	opacity: 0.92;
}

.ad-300x250 {
	display: inline-block;
	width: 300px;
	max-width: 100%;
	height: 250px;
	overflow: hidden;
	border-radius: 4px;
}

.ad-300x250 img {
	width: 300px;
	height: 250px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
	transition: opacity 0.2s;
}

.ad-300x250 img:hover {
	opacity: 0.92;
}

.ad-placeholder-inner {
	width: 100%;
	height: 100%;
	background: linear-gradient( 135deg, #f0f2f5, #e4e7eb );
	border: 2px dashed #d0d5dd;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ad-placeholder-text {
	font-size: 12px;
	color: #9aa5b4;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* =============================================================
 * NEWSLETTER SECTION
 * ============================================================= */
.newsletter-section {
	background: var(--secondary-color, #2c3e50);
	padding: 4rem 0;
	color: #fff;
}

.newsletter-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 3rem;
}

.newsletter-text h3 {
	font-size: 1.8rem;
	font-weight: 800;
	margin-bottom: 0.5rem;
	color: #fff;
	line-height: 1.2;
}

.newsletter-text p {
	color: rgba( 255, 255, 255, 0.75 );
	font-size: 1rem;
	margin: 0;
}

.newsletter-input-row {
	display: flex;
	gap: 0;
}

.newsletter-form input[type="email"] {
	flex: 1;
	padding: 14px 18px;
	border: none;
	font-size: 1rem;
	border-radius: 4px 0 0 4px;
	outline: none;
	color: #333;
}

.newsletter-form input[type="email"]:focus {
	outline: 2px solid var(--accent-color, #f39c12);
	outline-offset: -2px;
}

.newsletter-form button {
	background: var(--primary-color, #c0392b);
	color: #fff;
	border: none;
	padding: 14px 24px;
	font-weight: 700;
	cursor: pointer;
	font-size: 0.95rem;
	border-radius: 0 4px 4px 0;
	transition: background 0.2s;
	white-space: nowrap;
}

.newsletter-form button:hover {
	background: #a93226;
}

.newsletter-disclaimer {
	font-size: 0.8rem;
	color: rgba( 255, 255, 255, 0.5 );
	margin-top: 0.75rem;
	margin-bottom: 0;
}

/* =============================================================
 * FOOTER — 4-column grid + recent posts + bottom bar
 * ============================================================= */

/* Override old 3-col widget area layout */
.footer-widget-area {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 2.5rem;
}

.footer-widgets {
	padding: 3rem 0 2rem;
}

/* Widget titles inside footer */
.footer-widget-title,
.site-footer .widget-title {
	font-size: 0.85rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba( 255, 255, 255, 0.55 );
	margin-bottom: 1.2rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--primary-color);
}

/* Column 1 branding */
.footer-site-name {
	font-size: 1.4rem;
	font-weight: 900;
	margin: 0 0 0.4rem;
}

.footer-site-name a {
	color: #fff;
	text-decoration: none;
}

.footer-tagline {
	color: rgba( 255, 255, 255, 0.6 );
	font-size: 0.875rem;
	margin: 0 0 1rem;
}

/* Social icons row */
.footer-social-icons {
	display: flex;
	gap: 10px;
	margin-top: 1rem;
	flex-wrap: wrap;
}

.footer-social-link {
	width: 36px;
	height: 36px;
	background: rgba( 255, 255, 255, 0.1 );
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	transition: background 0.2s, transform 0.2s;
}

.footer-social-link:hover {
	background: var(--primary-color);
	transform: translateY( -2px );
	color: #fff;
}

/* Footer quick links + category list */
.footer-quick-links,
.footer-category-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-quick-links li,
.footer-category-list li {
	border-bottom: 1px solid rgba( 255, 255, 255, 0.07 );
}

.footer-quick-links a,
.footer-category-list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.45rem 0;
	color: rgba( 255, 255, 255, 0.7 );
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.2s, padding-left 0.2s;
}

.footer-quick-links a:hover,
.footer-category-list a:hover {
	color: #fff;
	padding-left: 4px;
}

.footer-cat-count {
	font-size: 0.75rem;
	color: rgba( 255, 255, 255, 0.4 );
}

/* Footer mini newsletter form */
.footer-follow-text {
	color: rgba( 255, 255, 255, 0.6 );
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

.footer-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.footer-newsletter-form input[type="email"] {
	padding: 10px 14px;
	border: none;
	border-radius: 4px 4px 0 0;
	font-size: 0.875rem;
	outline: none;
	width: 100%;
}

.footer-newsletter-form button {
	padding: 10px 14px;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 0 0 4px 4px;
	font-weight: 700;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background 0.2s;
}

.footer-newsletter-form button:hover {
	background: #a93226;
}

/* Recent posts strip */
.footer-recent-section {
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
	padding: 1.5rem 0;
}

.footer-recent-posts {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 1.5rem;
}

.footer-recent-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.footer-recent-thumb-link {
	flex-shrink: 0;
}

.footer-recent-item img,
.footer-thumb-placeholder {
	width: 70px;
	height: 70px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.footer-thumb-placeholder {
	background: rgba( 255, 255, 255, 0.1 );
}

.footer-recent-title {
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
}

.footer-recent-title a {
	color: rgba( 255, 255, 255, 0.8 );
	text-decoration: none;
	transition: color 0.2s;
}

.footer-recent-title a:hover {
	color: #fff;
}

/* Bottom bar */
.footer-bottom-bar {
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
	font-size: 0.8rem;
	color: rgba( 255, 255, 255, 0.5 );
}

.footer-bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding: 1rem 0;
	gap: 0.5rem;
}

.footer-copyright,
.footer-powered-by {
	margin: 0;
	color: rgba( 255, 255, 255, 0.5 );
}

.footer-bottom-links {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.footer-bottom-links a {
	color: rgba( 255, 255, 255, 0.5 );
	text-decoration: none;
	transition: color 0.2s;
}

.footer-bottom-links a:hover {
	color: #fff;
}

.footer-powered-by a {
	color: var(--accent-color, #f39c12);
	text-decoration: none;
}

.footer-powered-by a:hover {
	color: #fff;
}

/* =============================================================
 * RESPONSIVE — tablet (max 1024px)
 * ============================================================= */
@media ( max-width: 1024px ) {
	.footer-widget-area {
		grid-template-columns: 1fr 1fr;
	}

	.newsletter-inner {
		gap: 2rem;
	}
}

/* =============================================================
 * RESPONSIVE — mobile (max 768px)
 * ============================================================= */
@media ( max-width: 768px ) {
	/* Newsletter */
	.newsletter-inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.newsletter-text h3 {
		font-size: 1.4rem;
	}

	/* Footer widgets */
	.footer-widget-area {
		grid-template-columns: 1fr 1fr;
	}

	/* Footer recent posts */
	.footer-recent-posts {
		grid-template-columns: 1fr 1fr;
	}

	/* Footer bottom bar */
	.footer-bottom-bar {
		flex-direction: column;
		text-align: center;
		gap: 0.75rem;
	}

	.footer-bottom-inner {
		flex-direction: column;
		text-align: center;
		gap: 0.75rem;
	}

	.footer-bottom-links {
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	/* Ad zones — reduce height on small screens */
	.ad-728x90,
	.ad-728x90 img {
		height: 60px;
	}

	/* Nav search bar */
	.nav-search-bar:not([hidden]) {
		max-height: 120px;
	}
}

@media ( max-width: 480px ) {
	.footer-widget-area {
		grid-template-columns: 1fr;
	}

	.footer-recent-posts {
		grid-template-columns: 1fr;
	}

	.newsletter-input-row {
		flex-direction: column;
	}

	.newsletter-form input[type="email"] {
		border-radius: 4px 4px 0 0;
	}

	.newsletter-form button {
		border-radius: 0 0 4px 4px;
	}
}

/* =============================================================
 * READING PROGRESS BAR
 * Fixed at top of viewport; width driven by JS scroll handler.
 * ============================================================= */
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 4px;
	background: var(--primary-color, #c0392b);
	z-index: 9999;
	transition: width 0.1s linear;
	pointer-events: none;
}

/* =============================================================
 * SINGLE POST — LAYOUT
 * ============================================================= */
.single-post-main {
	background: var(--color-bg, #f4f5f7);
}

/* Article max-width centred column */
.single-article {
	padding-bottom: 4rem;
}

.single-header {
	padding: 3rem 0 0;
	background: #fff;
}

.single-header-inner {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 1rem;
}

.single-content-wrap {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* =============================================================
 * SINGLE POST — HEADER ELEMENTS
 * ============================================================= */
.single-category-badge-wrap {
	margin-bottom: 1rem;
}

.single-category-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 3px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
	background: var(--primary-color, #c0392b);
	text-decoration: none;
	transition: opacity 0.2s;
}

.single-category-badge:hover {
	opacity: 0.85;
	color: #fff;
}

/* Category-specific badge colours (mirror front-page vars) */
.single-category-badge.cat-politics      { background: #e74c3c; }
.single-category-badge.cat-technology    { background: #2980b9; }
.single-category-badge.cat-sports        { background: #27ae60; }
.single-category-badge.cat-entertainment { background: #8e44ad; }
.single-category-badge.cat-business      { background: #f39c12; }
.single-category-badge.cat-world         { background: #16a085; }

.single-title {
	font-size: 2.2rem;
	line-height: 1.25;
	font-weight: 800;
	margin-bottom: 1rem;
	color: var(--secondary-color, #2c3e50);
}

.single-subtitle {
	font-size: 1.1rem;
	color: var(--dim-color, #6c757d);
	line-height: 1.6;
	margin-bottom: 1.25rem;
}

.single-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--dim-color, #888);
	font-size: 0.875rem;
	flex-wrap: wrap;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #eee;
	margin-bottom: 0;
}

.single-meta-avatar {
	border-radius: 50%;
	width: 36px !important;
	height: 36px !important;
	object-fit: cover;
}

.single-meta-author a {
	color: var(--secondary-color, #2c3e50);
	font-weight: 600;
	text-decoration: none;
}

.single-meta-author a:hover {
	color: var(--primary-color);
}

.single-meta-sep {
	color: #ccc;
}

/* =============================================================
 * SINGLE POST — FEATURED IMAGE
 * ============================================================= */
.single-featured-wrap {
	background: #fff;
	padding: 1.5rem 0 0;
}

.single-featured-wrap .container {
	max-width: 780px;
}

.single-featured-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.single-image-caption {
	font-size: 0.8rem;
	color: #888;
	text-align: center;
	margin: 0.5rem 0 0;
	font-style: italic;
}

/* =============================================================
 * SINGLE POST — ARTICLE TYPOGRAPHY
 * ============================================================= */
.single-content-wrap .entry-content {
	font-size: 1.05rem;
	line-height: 1.9;
	color: #2c2c2c;
	background: #fff;
	padding: 2.5rem 2rem;
	border-radius: 0 0 8px 8px;
	margin-bottom: 2rem;
}

.single-content-wrap .entry-content p:first-of-type::first-letter {
	font-size: 3.5rem;
	font-weight: 800;
	float: left;
	line-height: 0.8;
	margin: 0.1em 0.12em 0 0;
	color: var(--primary-color, #c0392b);
	font-family: Georgia, serif;
}

.single-content-wrap .entry-content blockquote {
	border-left: 4px solid var(--primary-color, #c0392b);
	margin: 2rem 0;
	padding: 1rem 1.5rem;
	background: #f9f9f9;
	font-style: italic;
	font-size: 1.1rem;
	color: #555;
	border-radius: 0 4px 4px 0;
}

.single-content-wrap .entry-content blockquote cite {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.85rem;
	font-style: normal;
	color: #888;
}

.single-content-wrap .entry-content h2,
.single-content-wrap .entry-content h3,
.single-content-wrap .entry-content h4 {
	margin: 2.5rem 0 1rem;
	color: var(--secondary-color, #2c3e50);
	line-height: 1.3;
}

.single-content-wrap .entry-content h2 {
	font-size: 1.6rem;
	border-bottom: 2px solid #f0f0f0;
	padding-bottom: 0.5rem;
}

.single-content-wrap .entry-content h3 {
	font-size: 1.3rem;
}

.single-content-wrap .entry-content a {
	color: var(--primary-color);
	text-decoration: underline;
	text-decoration-color: rgba( 192, 57, 43, 0.4 );
	text-underline-offset: 3px;
}

.single-content-wrap .entry-content a:hover {
	text-decoration-color: var(--primary-color);
}

.single-content-wrap .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.single-content-wrap .entry-content ul,
.single-content-wrap .entry-content ol {
	padding-left: 1.75rem;
	margin-bottom: 1.5rem;
}

.single-content-wrap .entry-content li {
	margin-bottom: 0.5rem;
}

/* =============================================================
 * SOCIAL SHARE BUTTONS
 * ============================================================= */
.share-buttons {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
	background: #f8f9fa;
	border-radius: 8px;
}

.share-label {
	font-weight: 700;
	font-size: 0.85rem;
	color: #555;
	margin-right: 4px;
}

.share-btn {
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: opacity 0.2s, transform 0.15s;
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	line-height: 1;
}

.share-btn:hover {
	opacity: 0.85;
	transform: translateY( -1px );
	color: #fff;
}

.share-facebook { background: #1877f2; }
.share-twitter  { background: #1da1f2; }
.share-linkedin { background: #0a66c2; }
.share-whatsapp { background: #25d366; }

.share-copy {
	background: var(--secondary-color, #2c3e50);
	color: #fff;
}

.share-copy.copied {
	background: #27ae60;
}

/* =============================================================
 * AUTHOR BIO BOX
 * ============================================================= */
.author-bio-box {
	display: flex;
	gap: 1.5rem;
	padding: 2rem;
	background: #f8f9fa;
	border-radius: 8px;
	margin: 0 0 2rem;
	border-left: 4px solid var(--primary-color, #c0392b);
}

.author-bio-box .author-avatar {
	flex-shrink: 0;
}

/* Avatar in author bio box (96px) and single-post meta bar (36px) */
.author-bio-box .avatar,
.author-bio-box img,
.author-bio-box .author-avatar-img {
	border-radius: 50%;
	width: 96px !important;
	height: 96px !important;
	object-fit: cover;
	display: block;
	border: 3px solid var(--primary-color, #c0392b);
	background: var(--secondary-color, #2c3e50);
	flex-shrink: 0;
}

.single-meta .avatar,
.single-meta .author-avatar-img,
.single-meta-avatar {
	border-radius: 50%;
	width: 36px !important;
	height: 36px !important;
	object-fit: cover;
	display: block;
	border: 2px solid var(--primary-color, #c0392b);
	background: var(--secondary-color, #2c3e50);
	flex-shrink: 0;
}

.author-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--primary-color, #c0392b);
	font-weight: 700;
	display: block;
	margin-bottom: 0.25rem;
}

.author-name {
	font-size: 1.05rem;
	font-weight: 800;
	margin: 0 0 0.5rem;
	color: var(--secondary-color, #2c3e50);
}

.author-description {
	font-size: 0.875rem;
	line-height: 1.6;
	color: #555;
	margin: 0 0 0.75rem;
}

.author-posts-link {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--primary-color);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.author-posts-link:hover {
	text-decoration: underline;
}

/* =============================================================
 * POST TAGS
 * ============================================================= */
.post-tags {
	margin: 0 0 2rem;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
}

.tags-label {
	font-size: 0.8rem;
	font-weight: 700;
	color: #555;
	margin-right: 4px;
}

.post-tags a {
	background: #f0f0f0;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 0.8rem;
	color: #555;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.post-tags a:hover {
	background: var(--primary-color);
	color: #fff;
}

/* =============================================================
 * RELATED POSTS
 * ============================================================= */
.related-posts {
	margin: 0 0 3rem;
	padding-top: 2rem;
	border-top: 2px solid #f0f0f0;
}

.related-posts-title {
	font-size: 1.05rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 1.5rem;
	padding-left: 12px;
	border-left: 4px solid var(--primary-color, #c0392b);
}

.related-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 1.5rem;
}

.related-card-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.related-card-image,
.related-card-placeholder {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 0.75rem;
	display: block;
}

.related-card-placeholder {
	background: linear-gradient(
		135deg,
		var(--secondary-color, #2c3e50),
		var(--primary-color, #c0392b)
	);
}

.related-card-title {
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 0.25rem;
	color: var(--secondary-color, #2c3e50);
	transition: color 0.2s;
}

.related-card-link:hover .related-card-title {
	color: var(--primary-color);
}

.related-card-date {
	font-size: 0.75rem;
	color: #888;
}

/* =============================================================
 * POST NAVIGATION (prev / next)
 * ============================================================= */
.post-navigation {
	padding-top: 2rem;
	border-top: 2px solid #f0f0f0;
	margin-bottom: 3rem;
}

/* WP wraps nav in .nav-links with .nav-previous / .nav-next */
.post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	padding: 1.25rem;
	background: #f8f9fa;
	border-radius: 8px;
	transition: background 0.2s;
}

.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
	background: #eef0f2;
}

.post-navigation .nav-next {
	text-align: right;
}

.post-navigation a {
	text-decoration: none;
	display: block;
}

.post-navigation .nav-label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--primary-color, #c0392b);
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.post-navigation .nav-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--secondary-color, #2c3e50);
	line-height: 1.4;
	display: block;
}

/* =============================================================
 * SINGLE POST RESPONSIVE
 * ============================================================= */
@media ( max-width: 768px ) {
	.single-title {
		font-size: 1.6rem;
	}

	.single-content-wrap .entry-content {
		padding: 1.5rem 1rem;
	}

	.single-content-wrap .entry-content p:first-of-type::first-letter {
		font-size: 2.5rem;
	}

	.related-grid {
		grid-template-columns: 1fr 1fr;
	}

	.post-navigation .nav-links {
		grid-template-columns: 1fr;
	}

	.post-navigation .nav-next {
		text-align: left;
	}

	.author-bio-box {
		flex-direction: column;
		align-items: flex-start;
	}

	.share-buttons {
		gap: 6px;
	}

	.share-btn {
		padding: 7px 12px;
		font-size: 0.75rem;
	}
}

@media ( max-width: 480px ) {
	.single-title {
		font-size: 1.35rem;
	}

	.related-grid {
		grid-template-columns: 1fr;
	}
}

/* =============================================================
 * WORDPRESS REQUIRED CSS CLASSES
 * These selectors are tested by Theme Check and must be present.
 * ============================================================= */

/* ── Alignment ── */
.alignleft {
	float: left;
	margin: 0 1.5rem 1rem 0;
	max-width: 50%;
}

.alignright {
	float: right;
	margin: 0 0 1rem 1.5rem;
	max-width: 50%;
}

.aligncenter {
	display: block;
	margin: 1rem auto;
	text-align: center;
}

.alignwide {
	margin-left: -2rem;
	margin-right: -2rem;
}

.alignfull {
	margin-left: calc( -50vw + 50% );
	margin-right: calc( -50vw + 50% );
	max-width: 100vw;
}

/* ── Captions ── */
.wp-caption {
	max-width: 100%;
	margin-bottom: 1.5rem;
}

.wp-caption img {
	display: block;
	margin: 0 auto;
}

.wp-caption-text {
	font-size: 0.85rem;
	color: #777;
	text-align: center;
	margin-top: 0.5rem;
	font-style: italic;
}

/* ── Gallery caption ── */
.gallery-caption {
	font-size: 0.85rem;
	color: #777;
	text-align: center;
	font-style: italic;
	margin-top: 0.35rem;
}

/* ── Sticky posts ── */
.sticky {
	position: relative;
}

.sticky::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var( --accent-color, #f39c12 );
}

/* ── Post author highlight ── */
.bypostauthor > .comment-body {
	background: #f8f9fa;
	border-left: 3px solid var( --primary-color );
	border-radius: 0 6px 6px 0;
	padding: 1rem;
}

/* ── Comments ── */
.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
}

.comment-list li {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #f0f0f0;
}

.comment-list li:last-child {
	border-bottom: none;
}

.comment-body {
	padding: 1.25rem;
	background: #fafafa;
	border-radius: 8px;
}

.comment-meta {
	margin-bottom: 0.75rem;
}

.comment-author {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.comment-author img {
	border-radius: 50%;
	flex-shrink: 0;
}

.comment-author-info {
	flex: 1;
}

.comment-author cite {
	font-style: normal;
	font-weight: 700;
	color: var( --secondary-color );
}

.comment-metadata {
	font-size: 0.8rem;
	color: #888;
	margin-top: 2px;
}

.comment-metadata a {
	color: #888;
	text-decoration: none;
}

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

.comment-content {
	margin-top: 0.75rem;
	line-height: 1.7;
}

.comment-reply {
	margin-top: 0.75rem;
}

.comment-reply-link {
	font-size: 0.85rem;
	color: var( --primary-color );
	text-decoration: none;
	font-weight: 600;
}

.comment-navigation {
	display: flex;
	justify-content: space-between;
	padding: 1rem 0;
	font-size: 0.9rem;
}

.comment-awaiting-moderation {
	font-size: 0.875rem;
	color: #888;
	font-style: italic;
	margin: 0.5rem 0;
}

.no-comments {
	font-size: 0.95rem;
	color: #777;
	padding: 1rem 0;
}

.comment-reply-title {
	font-size: 1.2rem;
	margin: 2rem 0 1rem;
	color: var( --secondary-color );
}

/* ── Comment form ── */
.comment-form label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: var( --secondary-color );
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 0.95rem;
	font-family: inherit;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var( --primary-color );
}

.comment-form textarea {
	min-height: 140px;
	resize: vertical;
}

.form-submit .submit {
	background: var( --primary-color );
	color: #fff;
	border: none;
	padding: 12px 28px;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s;
	font-family: inherit;
}

.form-submit .submit:hover {
	background: #a93226;
}