/*
Theme Name: Candidate Nominee
Theme URI: https://example.com/candidate-nominee
Author: Your Name
Author URI: https://example.com
Description: An original WordPress theme for political campaigns, candidates, and nonprofit organizations. Sections include hero, about, mission, timeline, abilities, portfolio, team, campaign countdown, press releases, and contact.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: candidate-nominee
Tags: blog, one-column, two-columns, right-sidebar, custom-menu, featured-images, theme-options, translation-ready
*/

/* ---------- Design tokens ---------- */
:root {
	--color-purple-950: #120820;
	--color-purple-900: #1A0A2E;
	--color-purple-800: #2D1B4E;
	--color-purple-700: #5B21B6;
	--color-purple-600: #6D28D9;
	--color-purple-500: #7C3AED;
	--color-purple-400: #A78BFA;
	--color-purple-200: #DDD6FE;
	--color-purple-100: #EDE9FE;
	--color-purple-50:  #FAF8FC;

	--color-accent:       #FF6A00;
	--color-accent-hover: #CC5200;
	--color-accent-light: #FFF4EB;

	--color-text:         #2D2D2D;
	--color-text-muted:   #6B7280;
	--color-text-light:   #9CA3AF;
	--color-heading:      #1A1A2E;
	--color-border:       #E5E7EB;
	--color-surface:      #F9FAFB;
	--color-surface-alt:  var(--color-purple-50);

	--color-white: #fff;
	--color-footer-text: #C4B5D4;

	--font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--font-size-base: 16px;
	--line-height-base: 1.7;

	--space-xs:  8px;
	--space-sm:  12px;
	--space-md:  16px;
	--space-lg:  24px;
	--space-xl:  32px;
	--space-2xl: 48px;
	--space-3xl: 64px;
	--space-section: 80px;

	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;

	--shadow-sm: 0 2px 8px rgba(26, 10, 46, .06);
	--shadow-md: 0 8px 24px rgba(26, 10, 46, .10);
	--shadow-lg: 0 12px 32px rgba(26, 10, 46, .14);

	--transition: .2s ease;
	--container-max: 1170px;
}

/* ---------- Reset & Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	color: var(--color-text);
	line-height: var(--line-height-base);
	background: var(--color-white);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition);
}
a:hover { color: var(--color-accent-hover); }
a:focus-visible {
	outline: 2px solid var(--color-purple-500);
	outline-offset: 2px;
	border-radius: 2px;
}

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family);
	font-weight: 700;
	color: var(--color-heading);
	margin: 0 0 var(--space-md);
	line-height: 1.3;
}

h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.25rem); }
h4 { font-size: 1rem; }

p { margin: 0 0 var(--space-md); }

.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--space-lg);
}

.section { padding: var(--space-section) 0; }
.section-alt { background: var(--color-surface-alt); }

.section-title {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--space-3xl);
}
.section-title--left {
	text-align: left;
	margin: 0 0 var(--space-lg);
}
.section-title span.eyebrow {
	display: inline-block;
	color: var(--color-accent);
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: .8125rem;
	font-weight: 600;
	margin-bottom: var(--space-sm);
}
.section-title h2 { margin-bottom: 0; }
.section-title--light,
.section-title--light h2 { color: var(--color-white); }

/* ---------- English text slightly smaller (Hindi/Marathi unaffected) ---------- */
body.lang-en { font-size: 15px; }
body.lang-en .hero h1 { font-size: 42px; }
body.lang-en h2 { font-size: 28px; }
body.lang-en h3 { font-size: 17px; }

/* ---------- Tricolor accent bar ---------- */
.tricolor-bar {
	height: 5px;
	width: 100%;
	background: linear-gradient(
		90deg,
		var(--color-accent) 0%,
		var(--color-accent) 33.33%,
		var(--color-white) 33.33%,
		var(--color-white) 66.66%,
		var(--color-purple-700) 66.66%,
		var(--color-purple-700) 100%
	);
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-block;
	padding: 13px 32px;
	background: var(--color-accent);
	color: var(--color-white);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-weight: 600;
	font-size: .9375rem;
	letter-spacing: .03em;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
	text-align: center;
	line-height: 1.4;
}
.btn:hover {
	background: var(--color-accent-hover);
	color: var(--color-white);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}
.btn:focus-visible {
	outline: 2px solid var(--color-purple-500);
	outline-offset: 2px;
}

.btn-outline-light {
	background: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
}
.btn-outline-light:hover {
	background: var(--color-white);
	color: var(--color-accent);
}

.btn-outline {
	background: transparent;
	border-color: var(--color-accent);
	color: var(--color-accent);
}
.btn-outline:hover {
	background: var(--color-accent);
	color: var(--color-white);
}

/* ---------- Header ---------- */
#site-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	padding: var(--space-lg) 0;
	transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
}
#site-header.no-hero {
	position: relative;
	background: var(--color-purple-900);
}
#site-header.is-scrolled {
	position: fixed;
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
	padding: var(--space-sm) 0;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
}

.site-logo { flex: 0 1 auto; min-width: 0; }
.site-logo img { max-height: 46px; }
.site-logo a {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--color-white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	max-width: 100%;
	transition: color var(--transition);
}
body.lang-en .site-logo a { font-size: 1.25rem; }
#site-header.is-scrolled .site-logo a { color: var(--color-heading); }

#primary-menu {
	display: flex;
	gap: var(--space-xl);
	flex: 1 1 auto;
	justify-content: center;
	flex-wrap: nowrap;
}
#primary-menu a {
	color: var(--color-white);
	font-weight: 600;
	font-size: .875rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	white-space: nowrap;
	padding: var(--space-xs) 0;
	position: relative;
	transition: color var(--transition), opacity var(--transition);
}
#primary-menu a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--color-accent);
	transition: width var(--transition);
}
#primary-menu a:hover::after,
#primary-menu a:focus-visible::after { width: 100%; }
#primary-menu a:hover { color: var(--color-accent-light); opacity: 1; }
#site-header.is-scrolled #primary-menu a { color: var(--color-heading); }
#site-header.is-scrolled #primary-menu a:hover { color: var(--color-accent); }

.menu-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 1.5rem;
	color: var(--color-white);
	cursor: pointer;
	flex: 0 0 auto;
	padding: var(--space-xs);
	border-radius: var(--radius-sm);
	transition: color var(--transition), background var(--transition);
}
.menu-toggle:focus-visible {
	outline: 2px solid var(--color-purple-400);
	outline-offset: 2px;
}
#site-header.is-scrolled .menu-toggle { color: var(--color-heading); }

.lang-switcher { flex: 0 0 auto; position: relative; margin-left: var(--space-sm); }

@media (max-width: 480px) {
	.site-logo a { font-size: 1.0625rem; }
	body.lang-en .site-logo a { font-size: 1rem; }
	.header-inner { gap: var(--space-xs); }
	.lang-current { padding: 7px 10px; font-size: .75rem; }
}

@media (max-width: 991px) {
	#primary-menu { display: none; }
	.menu-toggle { display: block; }
	#primary-menu.is-open {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		background: var(--color-white);
		padding: var(--space-sm) var(--space-lg) var(--space-lg);
		box-sizing: border-box;
		box-shadow: var(--shadow-lg);
		gap: 0;
		z-index: 998;
	}
	#primary-menu.is-open a {
		color: var(--color-heading);
		padding: 14px 0;
		border-bottom: 1px solid var(--color-border);
		width: 100%;
	}
	#primary-menu.is-open a::after { display: none; }
	#primary-menu.is-open li:last-child a { border-bottom: none; }
}

/* ---------- Language switcher ---------- */
.lang-current {
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .3);
	color: var(--color-white);
	padding: var(--space-xs) 14px;
	border-radius: var(--radius-pill);
	font-size: .8125rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: inherit;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.lang-current:focus-visible {
	outline: 2px solid var(--color-purple-400);
	outline-offset: 2px;
}
#site-header.is-scrolled .lang-current {
	background: var(--color-surface);
	border-color: var(--color-border);
	color: var(--color-heading);
}
.lang-dropdown {
	display: none;
	position: absolute;
	top: 110%;
	right: 0;
	background: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	min-width: 140px;
	overflow: hidden;
	z-index: 1000;
	border: 1px solid var(--color-border);
}
.lang-switcher.open .lang-dropdown { display: block; }
.lang-dropdown li a {
	display: block;
	padding: 10px var(--space-md);
	color: var(--color-text);
	font-size: .875rem;
	transition: background var(--transition), color var(--transition);
}
.lang-dropdown li a:hover { background: var(--color-surface); color: var(--color-accent); }
.lang-dropdown li.active a { color: var(--color-accent); font-weight: 700; }

@media (max-width: 767px) {
	.lang-switcher { margin-left: auto; margin-right: var(--space-sm); }
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	color: var(--color-white);
	background: linear-gradient(120deg, var(--color-purple-900), var(--color-purple-700));
	overflow: hidden;
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(18, 8, 32, .45);
}
.hero-inner { position: relative; z-index: 2; }
.hero-eyebrow {
	text-transform: uppercase;
	letter-spacing: .15em;
	font-weight: 600;
	font-size: .875rem;
	color: var(--color-purple-200);
	margin-bottom: var(--space-lg);
}
.hero h1 {
	color: var(--color-white);
	max-width: 720px;
	margin-bottom: var(--space-lg);
}
.hero p {
	max-width: 560px;
	font-size: 1.0625rem;
	opacity: .92;
	margin-bottom: var(--space-xl);
	line-height: 1.75;
}
.hero-cta {
	display: flex;
	gap: var(--space-md);
	flex-wrap: wrap;
}

/* ---------- About ---------- */
.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3xl);
	align-items: center;
}
.about-grid img { border-radius: var(--radius-md); }
.about-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg);
	margin-top: var(--space-xl);
}
.stat-box {
	text-align: center;
	padding: var(--space-lg);
	background: var(--color-surface);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	transition: box-shadow var(--transition), border-color var(--transition);
}
.stat-box:hover {
	box-shadow: var(--shadow-sm);
	border-color: var(--color-purple-200);
}
.stat-box strong {
	display: block;
	font-size: 1.875rem;
	color: var(--color-accent);
	margin-bottom: var(--space-xs);
}

/* ---------- Mission ---------- */
.mission-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
}
.mission-card {
	padding: var(--space-xl) var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-align: center;
	background: var(--color-white);
	transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.mission-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
	border-color: var(--color-purple-200);
}
.mission-card .icon {
	font-size: 2.125rem;
	color: var(--color-purple-600);
	margin-bottom: var(--space-md);
}
.mission-card h3 { margin-bottom: var(--space-sm); }
.mission-card p {
	color: var(--color-text-muted);
	font-size: .9375rem;
	margin-bottom: 0;
}

/* ---------- Timeline ---------- */
.timeline { position: relative; max-width: 800px; margin: 0 auto; }
.timeline::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--color-purple-100);
	transform: translateX(-50%);
}
.timeline-item { position: relative; width: 50%; padding: 0 var(--space-2xl) var(--space-3xl); }
.timeline-item:nth-child(odd) { left: 0; text-align: right; }
.timeline-item:nth-child(even) { left: 50%; text-align: left; }
.timeline-year {
	display: inline-block;
	background: var(--color-purple-600);
	color: var(--color-white);
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-pill);
	font-weight: 700;
	font-size: .875rem;
	margin-bottom: var(--space-sm);
}

/* ---------- Abilities / Tabs ---------- */
.abilities-tabs { display: flex; gap: var(--space-xl); }
.tab-nav { flex: 0 0 260px; display: flex; flex-direction: column; gap: var(--space-xs); }
.tab-nav button {
	text-align: left;
	background: var(--color-surface);
	border: 1px solid transparent;
	padding: var(--space-md) var(--space-lg);
	font-weight: 600;
	font-family: inherit;
	font-size: .9375rem;
	border-radius: var(--radius-sm);
	cursor: pointer;
	color: var(--color-heading);
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.tab-nav button:hover {
	background: var(--color-purple-100);
	border-color: var(--color-purple-200);
}
.tab-nav button:focus-visible {
	outline: 2px solid var(--color-purple-500);
	outline-offset: 2px;
}
.tab-nav button.active {
	background: var(--color-purple-600);
	color: var(--color-white);
	border-color: var(--color-purple-600);
}
.tab-panels { flex: 1; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.progress-bar {
	background: var(--color-border);
	border-radius: var(--radius-pill);
	height: 10px;
	margin: var(--space-xs) 0 var(--space-lg);
	overflow: hidden;
}
.progress-bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--color-purple-600), var(--color-purple-500));
	border-radius: var(--radius-pill);
	transition: width .6s ease;
}

/* ---------- Portfolio / Reformation ---------- */
.portfolio-filters {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-2xl);
	flex-wrap: wrap;
}
.portfolio-filters button {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	padding: var(--space-xs) var(--space-lg);
	border-radius: var(--radius-pill);
	cursor: pointer;
	font-weight: 600;
	font-family: inherit;
	font-size: .875rem;
	color: var(--color-heading);
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.portfolio-filters button:hover {
	border-color: var(--color-purple-400);
	color: var(--color-purple-600);
}
.portfolio-filters button:focus-visible {
	outline: 2px solid var(--color-purple-500);
	outline-offset: 2px;
}
.portfolio-filters button.active {
	background: var(--color-purple-600);
	color: var(--color-white);
	border-color: var(--color-purple-600);
}
.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.portfolio-item {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-sm);
	display: block;
}
.portfolio-item img { transition: transform .3s ease; width: 100%; }
.portfolio-item:hover img { transform: scale(1.06); }
.portfolio-overlay {
	position: absolute;
	inset: 0;
	background: rgba(91, 33, 182, .88);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .25s;
	color: var(--color-white);
	text-align: center;
	padding: var(--space-lg);
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }
.team-card { text-align: center; }
.team-photo {
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: var(--space-md);
}
.team-card h3 { margin-bottom: var(--space-xs); }
.team-card p { color: var(--color-text-muted); font-size: .9375rem; }
.team-social {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}
.team-social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
}
.team-social a.social-icon {
	color: var(--color-purple-600);
	transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.team-social a.social-icon:hover {
	background: var(--color-purple-600);
	border-color: var(--color-purple-600);
	color: var(--color-white);
	transform: translateY(-2px);
}

/* ---------- Campaign / Countdown ---------- */
.campaign-cta {
	background: linear-gradient(135deg, var(--color-purple-900), var(--color-purple-800));
	color: var(--color-white);
	padding: var(--space-section) 0;
	text-align: center;
}
.countdown {
	display: flex;
	justify-content: center;
	gap: var(--space-xl);
	margin: var(--space-xl) 0;
	flex-wrap: wrap;
}
.countdown div { min-width: 90px; }
.countdown strong {
	display: block;
	font-size: 2.5rem;
	color: var(--color-accent);
	line-height: 1.2;
}
.countdown span {
	font-size: .875rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: .85;
}
.campaign-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	margin-top: var(--space-2xl);
}
.campaign-card {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	min-height: 220px;
	display: flex;
	align-items: flex-end;
	padding: var(--space-lg);
	color: var(--color-white);
}
.campaign-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(18, 8, 32, .8), transparent);
}
.campaign-card span { position: relative; z-index: 2; font-size: .875rem; font-weight: 600; }

/* ---------- Press ---------- */
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.press-card {
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition);
}
.press-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}
.press-card img { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.press-body {
	border: 1px solid var(--color-border);
	border-top: none;
	padding: var(--space-lg);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	background: var(--color-white);
}
.press-meta {
	font-size: .8125rem;
	color: var(--color-text-light);
	margin-bottom: var(--space-sm);
}
.card-link {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}
.card-link:hover { color: var(--color-purple-600); }

/* ---------- Contact ---------- */
.contact-grid {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: var(--space-2xl);
}
.contact-form input,
.contact-form textarea,
.search-form input[type="search"] {
	width: 100%;
	padding: 14px var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-md);
	font-family: inherit;
	font-size: .9375rem;
	color: var(--color-text);
	background: var(--color-white);
	transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-form input:focus,
.contact-form textarea:focus,
.search-form input[type="search"]:focus {
	outline: none;
	border-color: var(--color-purple-500);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-info li { margin-bottom: var(--space-lg); }
.contact-info strong {
	display: block;
	color: var(--color-heading);
	margin-bottom: var(--space-xs);
	font-size: .875rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.contact-info a { word-break: break-word; }
.cn-form-response {
	margin-top: var(--space-sm);
	font-size: .9375rem;
	font-weight: 600;
}

/* ---------- Footer ---------- */
#site-footer {
	background: var(--color-purple-950);
	color: var(--color-footer-text);
	padding: var(--space-3xl) 0 var(--space-lg);
}
.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--space-2xl);
}
#site-footer h3,
#site-footer h4 {
	color: var(--color-white);
	margin-bottom: var(--space-md);
}
#site-footer p { line-height: 1.75; }
.footer-menu li { margin-bottom: var(--space-sm); }
.footer-menu a {
	color: var(--color-footer-text);
	transition: color var(--transition);
}
.footer-menu a:hover { color: var(--color-white); }

.social-icons { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); flex-wrap: wrap; }
.social-icons a.social-icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-purple-400);
	transition: background var(--transition), border-color var(--transition), transform var(--transition), color var(--transition);
}
.social-icons a.social-icon:hover {
	background: var(--color-purple-600);
	border-color: var(--color-purple-600);
	color: var(--color-white);
	transform: translateY(-2px);
}
.social-icons a.social-icon svg { display: block; }

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	text-align: center;
	font-size: .8125rem;
	color: var(--color-text-light);
}

/* ---------- Blog & inner pages ---------- */
.content-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-2xl);
	align-items: start;
}
.content-narrow { max-width: 800px; margin: 0 auto; }
.page-centered { text-align: center; }
.back-link { margin-top: var(--space-2xl); }

article.post,
article.page { margin-bottom: var(--space-2xl); }
.content-narrow img,
.story-content img,
article.post img,
article.page img { border-radius: var(--radius-md); margin-bottom: var(--space-lg); width: 100%; }

.campaign-card { background-size: cover; background-position: center; }
article.post h2 { margin-bottom: var(--space-sm); }
article.post h2 a { color: var(--color-heading); transition: color var(--transition); }
article.post h2 a:hover { color: var(--color-purple-600); }

/* ---------- Sidebar & widgets ---------- */
aside .widget {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	margin-bottom: var(--space-lg);
}
aside .widget-title {
	font-size: 1rem;
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 2px solid var(--color-purple-100);
}

/* ---------- Search form ---------- */
.search-form {
	display: flex;
	gap: var(--space-sm);
}
.search-form input[type="search"] { margin-bottom: 0; flex: 1; }
.search-form button {
	padding: 14px var(--space-lg);
	background: var(--color-purple-600);
	color: var(--color-white);
	border: none;
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-weight: 600;
	font-size: .875rem;
	cursor: pointer;
	transition: background var(--transition);
}
.search-form button:hover { background: var(--color-purple-700); }
.search-form button:focus-visible {
	outline: 2px solid var(--color-purple-500);
	outline-offset: 2px;
}

/* ---------- Comments ---------- */
.comments-area { margin-top: var(--space-2xl); padding-top: var(--space-2xl); border-top: 1px solid var(--color-border); }
.comments-area h3 { margin-bottom: var(--space-lg); }
.comment-list { margin-bottom: var(--space-xl); }
.comment-list .comment {
	padding: var(--space-lg);
	margin-bottom: var(--space-md);
	background: var(--color-surface);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
}
.comment-form input,
.comment-form textarea {
	width: 100%;
	padding: 14px var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-md);
	font-family: inherit;
	font-size: .9375rem;
}
.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--color-purple-500);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}
.comment-form .submit,
.comment-form input[type="submit"] {
	background: var(--color-purple-600);
	color: var(--color-white);
	border: none;
	padding: 13px 32px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background var(--transition);
}
.comment-form .submit:hover,
.comment-form input[type="submit"]:hover { background: var(--color-purple-700); }

/* ---------- Team single profile ---------- */
.profile-header {
	display: flex;
	gap: var(--space-xl);
	align-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: var(--space-xl);
}
.profile-photo { flex: 0 0 200px; }
.profile-photo img {
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 50%;
	border: 4px solid var(--color-purple-100);
}

/* ---------- Pagination ---------- */
.navigation.pagination {
	margin-top: var(--space-2xl);
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
}
.navigation.pagination .nav-links {
	display: flex;
	gap: var(--space-xs);
	flex-wrap: wrap;
}
.navigation.pagination a,
.navigation.pagination span {
	display: inline-block;
	padding: var(--space-xs) var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: .875rem;
	font-weight: 600;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.navigation.pagination a:hover {
	background: var(--color-purple-600);
	color: var(--color-white);
	border-color: var(--color-purple-600);
}
.navigation.pagination .current {
	background: var(--color-purple-600);
	color: var(--color-white);
	border-color: var(--color-purple-600);
}

/* ---------- Utility ---------- */
.mt-lg { margin-top: var(--space-xl); }
.mb-lg { margin-bottom: var(--space-lg); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	:root { --space-section: 64px; }
	.about-grid,
	.contact-grid,
	.content-layout,
	.footer-grid { grid-template-columns: 1fr; }
	.mission-grid,
	.portfolio-grid,
	.team-grid,
	.campaign-grid,
	.press-grid { grid-template-columns: repeat(2, 1fr); }
	.abilities-tabs { flex-direction: column; }
	.tab-nav { flex: none; }
}

@media (max-width: 767px) {
	:root { --space-section: 56px; }
	.hero {
		min-height: auto;
		padding: 130px 0 var(--space-3xl);
		align-items: flex-start;
	}
	.hero h1 { font-size: 1.875rem; }
	.hero-eyebrow { font-size: .75rem; letter-spacing: .1em; }
	.hero-cta { flex-direction: column; }
	.hero-cta .btn { width: 100%; text-align: center; }
	.mission-grid,
	.portfolio-grid,
	.team-grid,
	.campaign-grid,
	.press-grid { grid-template-columns: 1fr; }
	.about-stats { grid-template-columns: 1fr 1fr; }
	.timeline::before { left: 20px; }
	.timeline-item,
	.timeline-item:nth-child(even) {
		width: 100%;
		left: 0;
		text-align: left;
		padding-left: 50px;
		padding-right: 0;
	}
	.countdown strong { font-size: 2rem; }
	.footer-grid { gap: var(--space-xl); }
}

@media (max-width: 480px) {
	.about-stats { grid-template-columns: 1fr; }
	.container { padding: 0 var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}