/**
 * SoftPress — Main Stylesheet
 * Nordic Editorial Design System — v2.2
 *
 * Table of Contents:
 * 1.  CSS Custom Properties
 * 2.  Reset & Base
 * 3.  Container & Layout Helpers
 * 4.  Section Labels & Category Badges
 * 5.  Buttons
 * 6.  Header
 * 7.  Breaking News Ticker
 * 8.  Mobile Drawer (with backdrop)
 * 9.  Reading Progress Bar
 * 10. Search Overlay
 * 11. Top Bar
 * 12. Hero Post
 * 13. Homepage 3-Column Grid & Sidebar Layouts
 * 14. Sidebar Cards (Category Chips, Trending, Newsletter, Podcast, Picks, About, App CTA)
 * 15. Latest Stories (List / Grid / Compact / Minimal modes)
 * 16. Don't Miss Grid
 * 17. Post Card (equal-height)
 * 18. Load More
 * 19. Single Post (header, content, tags, author bio, navigation, related posts)
 * 20. Breadcrumbs
 * 21. Share Buttons
 * 22. Archive Page
 * 23. Pagination
 * 24. 404 Page
 * 25. Search Page
 * 26. Footer
 * 27. Social Icons
 * 28. Back to Top
 * 29. Scroll Animations
 * 30. Dark Mode Toggle Icons
 * 31. WordPress Block Overrides
 * 32. Comments
 * 33. Widget Styles
 * 34. Ad Slots
 * 35. Responsive — Tablet (max-width: 1024px)
 * 36. Responsive — Mobile (max-width: 768px)
 * 37. Responsive — Small Mobile (max-width: 480px)
 * 38. Print Styles
 * 39. Accessibility
 * 40. Selection
 *
 * @package SoftPress
 * @since 2.2.0
 */

/* ═══════════════════════════════════════════
   1. CSS Custom Properties
   ═══════════════════════════════════════════ */
:root {
	/* Colors */
	--sp-bg: #FAFAF7;
	--sp-fg: #1A1A1A;
	--sp-accent: #C4654A;
	--sp-accent-hover: #A8523B;
	--sp-accent-light: rgba(196, 101, 74, 0.08);
	--sp-border: #E8E5E0;
	--sp-surface: #F5F4F0;
	--sp-muted: #6B6B6B;
	--sp-white: #FFFFFF;
	--sp-dark: #1A1A1A;
	--sp-dark-surface: #2A2A28;

	/* Grid columns (overridden by Customizer) */
	--sp-stories-grid-cols: 2;
	--sp-archive-grid-cols: 2;
	--sp-dont-miss-cols: 3;
	--sp-related-cols: 3;

	/* Typography */
	--sp-font-heading: 'Instrument Serif', Georgia, 'Times New Roman', serif;
	--sp-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--sp-font-size-body: 18px;
	--sp-line-height: 1.7;

	/* Radii */
	--sp-radius-card: 12px;
	--sp-radius-btn: 8px;
	--sp-radius-sm: 6px;
	--sp-radius-full: 9999px;

	/* Shadows */
	--sp-shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
	--sp-shadow-elevated: 0 4px 12px rgba(0,0,0,0.08);
	--sp-shadow-overlay: 0 8px 30px rgba(0,0,0,0.12);

	/* Transitions */
	--sp-transition: all 0.2s ease;
	--sp-transition-slow: all 0.4s ease;

	/* Layout */
	--sp-header-height: 72px;
	--sp-footer-height: 64px;
	--sp-breaking-height: 36px;
	--sp-container-width: 1280px;
	--sp-sidebar-width: 300px;
	--sp-content-width: 720px;

	/* Logo */
	--sp-logo-max-width: 200px;
	--sp-logo-max-width-mobile: 150px;

	/* Paragraph spacing */
	--sp-paragraph-spacing: 1.25em;

	/* Header/Footer colors (overridden by Customizer) */
	--sp-header-bg: var(--sp-bg);
	--sp-header-text: var(--sp-fg);
	--sp-footer-bg: var(--sp-bg);
	--sp-footer-text: var(--sp-muted);

	/* Grid columns */
	--sp-footer-cols: 4;
}

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--sp-bg);
	color: var(--sp-fg);
	font-family: var(--sp-font-body);
	font-size: var(--sp-font-size-body);
	line-height: var(--sp-line-height);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Fixed header + footer, scrollable middle */
body.has-sticky-header {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.has-sticky-header .sp-header {
	position: sticky;
	top: 0;
	z-index: 1000;
}

body.has-sticky-header .sp-main {
	flex: 1;
	overflow-y: auto;
}

/* Reset WP block margins inside header/footer to prevent extra space */
.sp-header .wp-block-group,
.sp-footer .wp-block-group {
	margin-top: 0;
	margin-bottom: 0;
}

.sp-header p,
.sp-footer p {
	margin: 0;
}

/* Reset WP block navigation margins */
.wp-block-navigation {
	margin: 0;
}

.wp-block-navigation .wp-block-navigation__container {
	margin: 0;
	padding: 0;
}

/* Prevent WP from adding default margins to nested groups */
.sp-header .wp-block-group + .wp-block-group,
.sp-footer .wp-block-group + .wp-block-group {
	margin-top: 0;
}

/* WP columns reset for footer */
.sp-footer-widgets .wp-block-columns {
	margin-bottom: 0;
}

.sp-footer-widgets .wp-block-column {
	margin-bottom: 0;
}

/* Footer is never sticky — it stays at the bottom naturally */

/* WP Admin bar offset */
body.admin-bar.has-sticky-header .sp-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar.has-sticky-header .sp-header {
		top: 46px;
	}
}

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

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

a:hover {
	color: var(--sp-accent);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sp-font-heading);
	font-weight: 400;
	line-height: 1.2;
	margin-top: 0;
}

p {
	margin-top: 0;
	margin-bottom: var(--sp-paragraph-spacing);
}

p:last-child {
	margin-bottom: 0;
}

/* ═══════════════════════════════════════════
   3. Container & Layout Helpers
   ═══════════════════════════════════════════ */
.sp-container {
	max-width: var(--sp-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* ═══════════════════════════════════════════
   4. Section Labels & Category Badges
   ═══════════════════════════════════════════ */
.sp-section-label {
	font-family: var(--sp-font-body) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sp-muted);
	margin: 0 0 1.25rem !important;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--sp-border);
	position: relative;
	line-height: 1;
}

.sp-section-label::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 2.5rem;
	height: 2px;
	background: var(--sp-accent);
}

.sp-category-badge,
.sp-category-badge a {
	font-family: var(--sp-font-body);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sp-accent);
	text-decoration: none;
	transition: var(--sp-transition);
	margin: 0;
}

.sp-category-badge a:hover {
	color: var(--sp-accent-hover);
}

/* ═══════════════════════════════════════════
   5. Buttons
   ═══════════════════════════════════════════ */
.sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sp-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.8125rem 1.625rem;
	border-radius: var(--sp-radius-btn);
	border: none;
	cursor: pointer;
	transition: var(--sp-transition);
	text-decoration: none;
	gap: 0.5rem;
	min-height: 44px;
}

.sp-btn--accent {
	background-color: var(--sp-accent);
	color: var(--sp-white);
}

.sp-btn--accent:hover {
	background-color: var(--sp-accent-hover);
	color: var(--sp-white);
}

.sp-btn--outline {
	background: transparent;
	color: var(--sp-fg);
	border: 1px solid var(--sp-border);
}

.sp-btn--outline:hover {
	border-color: var(--sp-accent);
	color: var(--sp-accent);
}

.sp-btn--text {
	background: transparent;
	color: var(--sp-accent);
	padding: 0;
	min-height: auto;
}

.sp-btn--text:hover {
	color: var(--sp-accent-hover);
}

.sp-btn--white {
	background: var(--sp-white);
	color: var(--sp-dark);
}

.sp-btn--white:hover {
	background: var(--sp-surface);
	color: var(--sp-dark);
}

.sp-btn--white-outline {
	background: transparent;
	color: var(--sp-white);
	border: 1px solid rgba(255,255,255,0.3);
}

.sp-btn--white-outline:hover {
	border-color: var(--sp-white);
	color: var(--sp-white);
}

.sp-btn--full {
	width: 100%;
}

.sp-btn--sm {
	font-size: 0.8125rem;
	padding: 0.5625rem 1rem;
	min-height: 36px;
}

.sp-btn--lg {
	font-size: 1rem;
	padding: 1rem 2rem;
	min-height: 48px;
}

/* ═══════════════════════════════════════════
   6. Header
   ═══════════════════════════════════════════ */
.sp-header {
	background-color: var(--sp-header-bg);
	border-bottom: 1px solid var(--sp-border);
	z-index: 1000;
	transition: box-shadow 0.2s ease;
}

.sp-header__bar {
	height: var(--sp-header-height);
	display: flex;
	align-items: center;
}

.sp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 1.5rem;
}

.sp-header__brand {
	flex-shrink: 0;
}

.sp-header__logo,
.sp-header__logo a {
	font-family: var(--sp-font-heading);
	font-size: 1.625rem;
	font-weight: 400;
	font-style: normal;
	color: var(--sp-header-text);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
	letter-spacing: -0.02em;
}

.sp-header__logo img,
.sp-header__logo .custom-logo {
	max-width: var(--sp-logo-max-width);
	height: auto;
}

.sp-header__nav-wrap {
	flex: 1;
	display: flex;
	justify-content: center;
}

.sp-header__nav {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-header__nav .wp-block-navigation__container {
	gap: 0;
	flex-wrap: nowrap;
}

.sp-header__nav a,
.sp-header__nav .wp-block-navigation-item__content {
	font-family: var(--sp-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--sp-fg);
	text-decoration: none;
	transition: var(--sp-transition);
	white-space: nowrap;
	padding: 0.5rem 1rem;
	display: block;
}

.sp-header__nav a:hover,
.sp-header__nav .wp-block-navigation-item__content:hover {
	color: var(--sp-accent);
}

/* Navigation submenu */
.sp-header__nav .wp-block-navigation__submenu-container {
	background: var(--sp-bg);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-sm);
	box-shadow: var(--sp-shadow-elevated);
	padding: 0.5rem 0;
	min-width: 200px;
}

.sp-header__nav .wp-block-navigation__submenu-container a {
	padding: 0.5rem 1rem;
	display: block;
}

.sp-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.sp-header__actions button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	color: var(--sp-fg);
	cursor: pointer;
	border-radius: var(--sp-radius-sm);
	transition: var(--sp-transition);
}

.sp-header__actions button:hover {
	background: var(--sp-surface);
}

.sp-mobile-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	background: transparent;
	color: var(--sp-fg);
	cursor: pointer;
	border-radius: var(--sp-radius-sm);
	transition: var(--sp-transition);
	-webkit-tap-highlight-color: transparent;
}

.sp-mobile-menu-toggle:hover {
	background: var(--sp-surface);
}

.sp-icon-close {
	display: none;
}

.sp-mobile-menu-toggle[aria-expanded="true"] .sp-icon-menu {
	display: none;
}

.sp-mobile-menu-toggle[aria-expanded="true"] .sp-icon-close {
	display: block;
}

/* ═══════════════════════════════════════════
   7. Breaking News Ticker
   ═══════════════════════════════════════════ */
.sp-breaking-news {
	background-color: var(--sp-dark);
	color: var(--sp-white);
	height: var(--sp-breaking-height);
	overflow: hidden;
	display: none;
	align-items: center;
}

/* Only show when Customizer enables it */
body.has-breaking-news .sp-breaking-news {
	display: flex;
}

.sp-breaking-news__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
}

.sp-breaking-news__label {
	font-family: var(--sp-font-body);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: var(--sp-accent);
	color: var(--sp-white);
	padding: 0.2rem 0.6rem;
	border-radius: 3px;
	white-space: nowrap;
	margin: 0;
	flex-shrink: 0;
}

.sp-breaking-news__ticker {
	flex: 1;
	overflow: hidden;
	position: relative;
}

.sp-breaking-news__ticker p {
	margin: 0;
	font-size: 0.8125rem;
	white-space: nowrap;
	animation: sp-ticker-scroll 20s linear infinite;
}

@keyframes sp-ticker-scroll {
	0% { transform: translateX(100%); }
	100% { transform: translateX(-100%); }
}

.sp-breaking-news__close-btn {
	background: transparent;
	border: none;
	color: var(--sp-white);
	cursor: pointer;
	padding: 0.25rem;
	opacity: 0.6;
	transition: var(--sp-transition);
	flex-shrink: 0;
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-breaking-news__close-btn:hover {
	opacity: 1;
}

.sp-breaking-news.is-hidden {
	display: none;
}

/* ═══════════════════════════════════════════
   8. Mobile Drawer (with backdrop overlay)
   ═══════════════════════════════════════════ */
.sp-mobile-drawer {
	display: none;
	position: fixed;
	top: var(--sp-header-height);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	pointer-events: none;
}

.sp-mobile-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.4);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.sp-mobile-drawer__panel {
	position: absolute;
	top: 0;
	left: 0;
	width: min(320px, 85vw);
	height: 100%;
	background: var(--sp-bg);
	border-right: 1px solid var(--sp-border);
	box-shadow: var(--sp-shadow-overlay);
	padding: 1.5rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateX(-100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sp-mobile-drawer.is-open {
	pointer-events: auto;
}

.sp-mobile-drawer.is-open .sp-mobile-drawer__backdrop {
	opacity: 1;
}

.sp-mobile-drawer.is-open .sp-mobile-drawer__panel {
	transform: translateX(0);
}

/* Mobile drawer header with title and close button */
.sp-mobile-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--sp-border);
}

.sp-mobile-drawer__title {
	font-family: var(--sp-font-heading);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--sp-fg);
	line-height: 1;
}

.sp-mobile-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	color: var(--sp-fg);
	cursor: pointer;
	border-radius: var(--sp-radius-sm);
	transition: var(--sp-transition);
}

.sp-mobile-drawer__close:hover {
	background: var(--sp-surface);
}

/* Mobile nav list */
.sp-mobile-nav__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sp-mobile-nav__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.sp-mobile-nav__item > a {
	flex: 1;
}

.sp-mobile-drawer .sp-mobile-nav {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sp-mobile-drawer .sp-mobile-nav a,
.sp-mobile-drawer .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	padding: 0.875rem 0;
	font-size: 1.125rem;
	font-weight: 500;
	border-bottom: 1px solid var(--sp-border);
	color: var(--sp-fg);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	min-height: 48px;
}

.sp-mobile-drawer .sp-mobile-nav a:hover,
.sp-mobile-drawer .sp-mobile-nav a:active {
	color: var(--sp-accent);
}

/* Submenu in mobile drawer */
.sp-mobile-drawer .sp-mobile-submenu {
	display: none;
	flex-direction: column;
	padding-left: 1rem;
	border-left: 2px solid var(--sp-accent-light);
	margin-left: 0.5rem;
}

.sp-mobile-drawer .sp-mobile-submenu.is-open {
	display: flex;
}

.sp-mobile-drawer .sp-mobile-submenu a {
	font-size: 1rem;
	padding: 0.625rem 0;
	color: var(--sp-muted);
}

.sp-mobile-drawer .sp-mobile-submenu a:hover {
	color: var(--sp-accent);
}

.sp-mobile-drawer .sp-submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	background: transparent;
	border: none;
	color: var(--sp-muted);
	cursor: pointer;
	transition: var(--sp-transition);
	flex-shrink: 0;
}

.sp-mobile-drawer .sp-submenu-toggle svg {
	transition: transform 0.2s ease;
}

.sp-mobile-drawer .sp-submenu-toggle.is-open svg {
	transform: rotate(180deg);
}

/* Mobile drawer dark mode toggle & search */
.sp-mobile-drawer__footer {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sp-border);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sp-mobile-drawer__footer .sp-mobile-search {
	display: flex;
	gap: 0.5rem;
}

.sp-mobile-drawer__footer .sp-mobile-search__btn,
.sp-mobile-drawer__footer .sp-dark-mode-toggle--mobile {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	padding: 0.75rem 0;
	background: transparent;
	border: none;
	color: var(--sp-fg);
	font-family: var(--sp-font-body);
	font-size: 1rem;
	cursor: pointer;
	min-height: 48px;
	transition: var(--sp-transition);
}

.sp-mobile-drawer__footer .sp-mobile-search__btn:hover,
.sp-mobile-drawer__footer .sp-dark-mode-toggle--mobile:hover {
	color: var(--sp-accent);
}

.sp-mobile-drawer__footer .sp-mobile-search input {
	flex: 1;
	padding: 0.75rem 1rem;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-sm);
	font-family: var(--sp-font-body);
	font-size: 0.9375rem;
	background: var(--sp-bg);
	color: var(--sp-fg);
	min-height: 44px;
}

.sp-mobile-drawer__footer .sp-mobile-search button {
	padding: 0.75rem;
	background: var(--sp-accent);
	color: var(--sp-white);
	border: none;
	border-radius: var(--sp-radius-sm);
	cursor: pointer;
	min-width: 44px;
	min-height: 44px;
}

/* ═══════════════════════════════════════════
   9. Reading Progress Bar
   ═══════════════════════════════════════════ */
.sp-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 1001;
	background: transparent;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.single-post-view .sp-reading-progress {
	opacity: 1;
}

.sp-reading-progress__bar {
	height: 100%;
	width: 0;
	background: var(--sp-accent);
	transition: width 0.1s linear;
}

/* ═══════════════════════════════════════════
   10. Search Overlay (Cmd/Ctrl+K)
   ═══════════════════════════════════════════ */
.sp-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 15vh;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.sp-search-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.sp-search-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(4px);
}

.sp-search-overlay__content {
	position: relative;
	width: 100%;
	max-width: 640px;
	background: var(--sp-bg);
	border-radius: var(--sp-radius-card);
	box-shadow: var(--sp-shadow-overlay);
	overflow: hidden;
	transform: translateY(-20px);
	transition: transform 0.2s ease;
}

.sp-search-overlay.is-open .sp-search-overlay__content {
	transform: translateY(0);
}

.sp-search-overlay__header {
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--sp-border);
}

.sp-search-overlay__input-wrap {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.sp-search-overlay__input-wrap svg {
	color: var(--sp-muted);
	flex-shrink: 0;
}

.sp-search-overlay__input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--sp-font-body);
	font-size: 1.125rem;
	color: var(--sp-fg);
}

.sp-search-overlay__input::placeholder {
	color: var(--sp-muted);
}

.sp-search-overlay__kbd {
	font-family: var(--sp-font-body);
	font-size: 0.75rem;
	padding: 0.2rem 0.5rem;
	border: 1px solid var(--sp-border);
	border-radius: 4px;
	color: var(--sp-muted);
	background: var(--sp-surface);
}

.sp-search-overlay__results {
	max-height: 400px;
	overflow-y: auto;
	padding: 0;
}

.sp-search-overlay__results:empty {
	display: none;
}

.sp-search-result-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--sp-border);
	transition: var(--sp-transition);
	cursor: pointer;
	text-decoration: none;
	color: var(--sp-fg);
}

.sp-search-result-item:hover {
	background: var(--sp-surface);
}

.sp-search-result-item__image {
	width: 48px;
	height: 48px;
	border-radius: var(--sp-radius-sm);
	object-fit: cover;
	flex-shrink: 0;
}

.sp-search-result-item__content {
	flex: 1;
	min-width: 0;
}

.sp-search-result-item__category {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sp-accent);
}

.sp-search-result-item__title {
	font-family: var(--sp-font-heading);
	font-size: 1.0625rem;
	margin: 0.2rem 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sp-search-result-item__date {
	font-size: 0.8125rem;
	color: var(--sp-muted);
}

/* ═══════════════════════════════════════════
   11. Top Bar (Announcement)
   ═══════════════════════════════════════════ */
.sp-topbar {
	background: var(--sp-accent);
	color: var(--sp-white);
	font-size: 0.8125rem;
	font-weight: 500;
	text-align: center;
	padding: 0.4rem 1rem;
}

.sp-topbar a {
	color: var(--sp-white);
	text-decoration: underline;
}

/* ═══════════════════════════════════════════
   12. Hero Post
   ═══════════════════════════════════════════ */
/* Hero wrap: full-width breakout from container */
.sp-hero-wrap {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.sp-hero-section {
	margin-bottom: 2.5rem;
	contain: layout style;
}

/* CLS Protection — reserve space for images */
img {
	max-width: 100%;
	height: auto;
}

img[width][height] {
	aspect-ratio: attr(width) / attr(height);
}

.wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* CLS Protection — min-height reservations for layout stability */
.sp-header__bar {
	min-height: var(--sp-header-height);
}

.sp-breaking-news {
	min-height: 36px;
}

.sp-hero {
	min-height: 200px;
}

.sp-footer__bar {
	min-height: var(--sp-footer-height);
}

.sp-post-card__image-wrap {
	aspect-ratio: 16/10;
	overflow: hidden;
}

.sp-latest-item__image .wp-block-post-featured-image {
	width: 140px;
	height: 95px;
	flex-shrink: 0;
	overflow: hidden;
}

/* Prevent CLS from web fonts — size-adjust fallback */
.sp-header__logo,
.sp-hero__title,
.sp-section-label,
.sp-post-card__title a {
	font-display: swap;
}

/* Hero pattern — full-width, no border-radius since it's edge-to-edge */
.sp-hero {
	position: relative;
	overflow: hidden;
	margin: 0;
}

.sp-hero__link {
	display: block;
	position: relative;
	text-decoration: none;
	color: inherit;
	outline-offset: -3px;
}

.sp-hero__media {
	position: relative;
	aspect-ratio: var(--sp-hero-aspect, 16/7);
	max-height: var(--sp-hero-max-height, 580px);
	min-height: 340px;
	overflow: hidden;
}

.sp-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
	transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-hero__placeholder {
	width: 100%;
	height: 100%;
	min-height: 380px;
	background: linear-gradient(135deg, var(--sp-surface) 0%, var(--sp-border) 100%);
}

.sp-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,0.15) 40%,
		rgba(0,0,0, var(--sp-hero-overlay-opacity, 0.65)) 100%
	);
	pointer-events: none;
}

.sp-hero__body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: clamp(1.25rem, 3.5vw, 2.5rem) clamp(1.5rem, 5vw, 3.5rem);
	z-index: 2;
	max-width: var(--sp-container-width);
	margin: 0 auto;
}

.sp-hero__cat {
	display: inline-block;
	font-family: var(--sp-font-body);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sp-white);
	margin-bottom: 0.875rem;
	background: var(--sp-accent);
	padding: 0.3rem 0.75rem;
	border-radius: 3px;
}

.sp-hero__title {
	font-family: var(--sp-font-heading);
	font-size: clamp(1.875rem, 4vw, 3.25rem);
	font-weight: 400;
	color: var(--sp-white);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0 0 0.875rem;
	max-width: 760px;
	text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

.sp-hero__excerpt {
	color: rgba(255,255,255,0.85);
	font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
	line-height: 1.55;
	margin: 0 0 1.25rem;
	max-width: 560px;
}

.sp-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--sp-white);
	font-family: var(--sp-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: gap 0.2s ease;
	padding: 0.75rem 1.5rem;
	background: rgba(255,255,255,0.15);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: var(--sp-radius-btn);
}

.sp-hero__btn:hover {
	background: rgba(255,255,255,0.25);
	color: var(--sp-white);
}

.sp-hero__btn svg {
	transition: transform 0.2s ease;
}

.sp-hero__link:hover .sp-hero__btn svg {
	transform: translateX(4px);
}

.sp-hero__link:hover .sp-hero__image {
	transform: scale(1.03);
}

/* Legacy hero classes (backward compatibility) */
.sp-hero-post {
	position: relative;
	border-radius: var(--sp-radius-card);
	overflow: hidden;
}

.sp-hero-post__image,
.sp-hero-post__image img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	border-radius: var(--sp-radius-card);
}

.sp-hero-post__image .wp-block-post-featured-image {
	border-radius: var(--sp-radius-card);
	overflow: hidden;
}

.sp-hero-post__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem;
	background: linear-gradient(
		to bottom,
		rgba(0,0,0,0.1) 0%,
		rgba(0,0,0,0.55) 100%
	);
	border-radius: var(--sp-radius-card);
}

.sp-hero-post__category,
.sp-hero-post__category a {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sp-accent);
	margin-bottom: 0.75rem;
}

.sp-hero-post__title,
.sp-hero-post__title a {
	font-family: var(--sp-font-heading);
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	font-weight: 400;
	color: var(--sp-white);
	line-height: 1.15;
	margin: 0 0 1rem;
	text-decoration: none;
	max-width: 720px;
}

.sp-hero-post__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(255,255,255,0.8);
	font-size: 0.9375rem;
	margin-bottom: 1.5rem;
}

.sp-hero-post__meta a {
	color: rgba(255,255,255,0.8);
}

.sp-hero-post__meta a:hover {
	color: var(--sp-white);
}

.sp-hero-post__sep {
	margin: 0;
}

.sp-hero-post__btn {
	margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════
   13. Homepage 3-Column Grid & Sidebar Layouts
   ═══════════════════════════════════════════ */
.sp-homepage-grid {
	display: grid;
	grid-template-columns: var(--sp-sidebar-width) 1fr var(--sp-sidebar-width);
	gap: 2rem;
	align-items: start;
	padding-top: 2.5rem;
	padding-bottom: 3rem;
}

.sp-homepage-grid__left,
.sp-homepage-grid__right {
	position: sticky;
	top: calc(var(--sp-header-height) + 1.5rem);
	align-self: start;
}

/* Sidebar layout variants (body class approach) */
body.sidebar-layout-none .sp-homepage-grid {
	grid-template-columns: 1fr;
}
body.sidebar-layout-none .sp-homepage-grid__left,
body.sidebar-layout-none .sp-homepage-grid__right {
	display: none;
}

body.sidebar-layout-left-only .sp-homepage-grid {
	grid-template-columns: var(--sp-sidebar-width) 1fr;
}
body.sidebar-layout-left-only .sp-homepage-grid__right {
	display: none;
}

body.sidebar-layout-right-only .sp-homepage-grid {
	grid-template-columns: 1fr var(--sp-sidebar-width);
}
body.sidebar-layout-right-only .sp-homepage-grid__left {
	display: none;
}

/* Archive sidebar layout variants */
body.archive-sidebar-none .sp-archive-grid {
	grid-template-columns: 1fr !important;
}
body.archive-sidebar-none .sp-archive-grid__left,
body.archive-sidebar-none .sp-archive-grid__right {
	display: none !important;
}

body.archive-sidebar-left-only .sp-archive-grid {
	grid-template-columns: 240px 1fr !important;
}
body.archive-sidebar-left-only .sp-archive-grid__right {
	display: none !important;
}

body.archive-sidebar-right-only .sp-archive-grid {
	grid-template-columns: 1fr 280px !important;
}
body.archive-sidebar-right-only .sp-archive-grid__left {
	display: none !important;
}

/* Non-sticky sidebar option */
body:not(.has-sticky-sidebars) .sp-homepage-grid__left,
body:not(.has-sticky-sidebars) .sp-homepage-grid__right,
body:not(.has-sticky-sidebars) .sp-archive-grid__left,
body:not(.has-sticky-sidebars) .sp-archive-grid__right {
	position: static;
}

/* ═══════════════════════════════════════════
   14. Sidebar Cards
   ═══════════════════════════════════════════ */
.sp-sidebar-card {
	background: var(--sp-bg);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-card);
	padding: 1.25rem;
	margin-bottom: 1.25rem;
	box-shadow: var(--sp-shadow-card);
}

/* Category Chips */
.sp-category-chips .sp-category-list,
.sp-category-chips .wp-block-categories-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sp-category-chips .wp-block-categories-list li {
	padding: 0;
	margin: 0;
}

.sp-category-chips .wp-block-categories-list li a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--sp-fg);
	border-bottom: 1px solid var(--sp-border);
	text-decoration: none;
	transition: var(--sp-transition);
}

.sp-category-chips .wp-block-categories-list li a:hover {
	color: var(--sp-accent);
}

.sp-category-chips .wp-block-categories-list li a::before {
	content: '';
	display: block;
	width: 32px;
	height: 3px;
	background: var(--sp-accent);
	border-radius: 2px;
	flex-shrink: 0;
}

.sp-category-chips .wp-block-categories-list li:last-child a {
	border-bottom: none;
}

/* Numbered Posts (Trending / Most Read) */
.sp-trending-items,
.sp-trending-list,
.sp-most-read-items,
.sp-most-read-list {
	counter-reset: sp-counter;
	list-style: none;
	padding: 0;
	margin: 0;
}

.sp-trending-items .sp-numbered-post,
.sp-trending-list .sp-trending-item,
.sp-most-read-items .sp-numbered-post,
.sp-most-read-list .sp-trending-item {
	counter-increment: sp-counter;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--sp-border);
}

.sp-trending-items .sp-numbered-post:last-child,
.sp-trending-list .sp-trending-item:last-child,
.sp-most-read-items .sp-numbered-post:last-child,
.sp-most-read-list .sp-trending-item:last-child {
	border-bottom: none;
}

.sp-trending-items .sp-numbered-post::before,
.sp-trending-list .sp-trending-item::before,
.sp-most-read-items .sp-numbered-post::before,
.sp-most-read-list .sp-trending-item::before {
	content: counter(sp-counter, decimal-leading-zero);
	font-family: var(--sp-font-heading);
	font-size: 1.625rem;
	font-weight: 400;
	color: var(--sp-muted);
	line-height: 1;
	flex-shrink: 0;
	min-width: 2rem;
}

.sp-numbered-post__title,
.sp-numbered-post__title a,
.sp-trending-item__title,
.sp-trending-item__title a {
	font-family: var(--sp-font-heading);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--sp-fg);
	text-decoration: none;
	margin: 0;
}

.sp-numbered-post__title a:hover,
.sp-trending-item__title a:hover {
	color: var(--sp-accent);
}

.sp-numbered-post__date,
.sp-trending-item__date {
	font-size: 0.8125rem;
	color: var(--sp-muted);
	margin-top: 0.25rem;
}

/* Newsletter Card */
.sp-newsletter-card__title {
	font-family: var(--sp-font-heading);
	font-size: 1.375rem;
	margin: 0 0 0.5rem;
}

.sp-newsletter-card__text {
	font-size: 0.9375rem;
	color: var(--sp-muted);
	margin: 0 0 1rem;
	line-height: 1.5;
}

.sp-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sp-newsletter-form__input {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-sm);
	font-family: var(--sp-font-body);
	font-size: 0.9375rem;
	background: var(--sp-bg);
	color: var(--sp-fg);
	outline: none;
	transition: var(--sp-transition);
	min-height: 44px;
}

.sp-newsletter-form__input:focus {
	border-color: var(--sp-accent);
	box-shadow: 0 0 0 3px var(--sp-accent-light);
}

.sp-newsletter-form__btn {
	width: 100%;
	padding: 0.75rem;
	background: var(--sp-accent);
	color: var(--sp-white);
	border: none;
	border-radius: var(--sp-radius-sm);
	font-family: var(--sp-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--sp-transition);
	min-height: 44px;
}

.sp-newsletter-form__btn:hover {
	background: var(--sp-accent-hover);
}

/* Newsletter button (also matches .sp-btn--accent used in sidebar) */
.sp-newsletter-form .sp-btn--accent {
	width: 100%;
	min-height: 44px;
}

.sp-newsletter-form .sp-btn--full {
	width: 100%;
}

/* Newsletter states */
.sp-newsletter-form__message {
	font-size: 0.8125rem;
	padding: 0.5rem;
	border-radius: var(--sp-radius-sm);
	text-align: center;
	margin-top: 0.25rem;
}

.sp-newsletter-form__message--success {
	color: #15803d;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.sp-newsletter-form__message--error {
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.sp-newsletter-form.is-loading .sp-btn {
	opacity: 0.7;
	pointer-events: none;
}

/* Footer newsletter form */
.sp-footer-newsletter {
	display: flex;
	gap: 0.5rem;
	flex-direction: column;
}

.sp-footer-newsletter input[type="email"] {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-sm);
	font-family: var(--sp-font-body);
	font-size: 0.875rem;
	background: var(--sp-bg);
	color: var(--sp-fg);
	outline: none;
	transition: var(--sp-transition);
	min-height: 44px;
}

.sp-footer-newsletter input[type="email"]:focus {
	border-color: var(--sp-accent);
	box-shadow: 0 0 0 3px var(--sp-accent-light);
}

.sp-footer-newsletter .sp-btn {
	width: 100%;
	min-height: 44px;
}

/* Classic Widgets (rendered via dynamic_sidebar) */
.sp-classic-widgets {
	margin-top: 1rem;
}

.sp-classic-widgets .widget {
	background: var(--sp-surface);
	border-radius: var(--sp-radius);
	padding: 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid var(--sp-border);
}

.sp-classic-widgets .widget-title {
	font-family: var(--sp-font-heading);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sp-fg);
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--sp-accent);
}

.sp-classic-widgets .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-classic-widgets .widget ul li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--sp-border);
	font-size: 0.9375rem;
}

.sp-classic-widgets .widget ul li:last-child {
	border-bottom: none;
}

.sp-classic-widgets .widget ul li a {
	color: var(--sp-fg);
	text-decoration: none;
	transition: var(--sp-transition);
}

.sp-classic-widgets .widget ul li a:hover {
	color: var(--sp-accent);
}

/* Podcast Card */
.sp-podcast-card__title {
	font-family: var(--sp-font-heading);
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
}

.sp-podcast-card__desc,
.sp-podcast-card__text {
	font-size: 0.9375rem;
	color: var(--sp-muted);
	margin: 0 0 1rem;
	line-height: 1.5;
}

.sp-podcast-card__episode {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem;
	background: var(--sp-bg);
	border-radius: var(--sp-radius-sm);
	margin-bottom: 1rem;
}

.sp-podcast-card__play-btn {
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	background: var(--sp-accent);
	color: var(--sp-white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s;
}

.sp-podcast-card__play-btn:hover {
	background: var(--sp-accent-hover);
}

.sp-podcast-card__play-btn svg {
	margin-left: 2px;
}

.sp-podcast-card__info {
	flex: 1;
	min-width: 0;
}

.sp-podcast-card__ep-label {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sp-muted);
	margin: 0 0 0.125rem;
}

.sp-podcast-card__ep-title {
	font-family: var(--sp-font-heading);
	font-size: 0.9375rem;
	line-height: 1.3;
	margin: 0;
	color: var(--sp-fg);
}

/* Editor's Picks */
.sp-pick-item {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--sp-border);
}

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

.sp-pick-item__image,
.sp-pick-item__image img,
.sp-pick-item__image .wp-block-post-featured-image {
	width: 76px;
	height: 76px;
	border-radius: var(--sp-radius-sm);
	object-fit: cover;
	flex-shrink: 0;
	overflow: hidden;
}

.sp-pick-item__image .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-pick-item__title,
.sp-pick-item__title a {
	font-family: var(--sp-font-heading);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--sp-fg);
	text-decoration: none;
	margin: 0;
}

.sp-pick-item__title a:hover {
	color: var(--sp-accent);
}

.sp-pick-item__date {
	font-size: 0.8125rem;
	color: var(--sp-muted);
	margin-top: 0.25rem;
}

/* About Card */
.sp-about-card__text {
	font-size: 0.9375rem;
	color: var(--sp-muted);
	line-height: 1.6;
	margin: 0 0 1rem;
}

/* App CTA Card */
.sp-app-cta {
	background: var(--sp-dark);
	color: var(--sp-white);
	border-color: var(--sp-dark);
}

.sp-app-cta .sp-sidebar-card__title,
.sp-app-cta__title {
	font-family: var(--sp-font-heading);
	font-size: 1.375rem;
	color: var(--sp-white);
	margin: 0 0 0.5rem;
}

.sp-app-cta__desc,
.sp-app-cta__text {
	font-size: 0.9375rem;
	color: rgba(255,255,255,0.7);
	margin: 0 0 1.25rem;
	line-height: 1.5;
}

.sp-app-cta__buttons {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
}

.sp-app-cta__store-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	background: rgba(255,255,255,0.12);
	color: var(--sp-white);
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: var(--sp-radius-sm);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s;
	cursor: pointer;
}

.sp-app-cta__store-btn:hover {
	background: rgba(255,255,255,0.2);
	color: var(--sp-white);
}

.sp-app-cta__buttons .sp-btn {
	flex: 1;
	font-size: 0.875rem;
	padding: 0.6875rem 0.875rem;
}

/* ═══════════════════════════════════════════
   15. Latest Stories — 4 Layout Modes
   ═══════════════════════════════════════════ */

/* --- Base (List mode — default) --- */
.sp-latest-section {
	margin-bottom: 2.5rem;
}

.sp-latest-items {
	display: flex;
	flex-direction: column;
}

.sp-latest-item {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--sp-border);
}

.sp-latest-item:first-child {
	padding-top: 0;
}

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

.sp-latest-item__image,
.sp-latest-item__image img,
.sp-latest-item__image .wp-block-post-featured-image,
.sp-latest-item__image .wp-block-post-featured-image img {
	width: 140px;
	height: 95px;
	border-radius: var(--sp-radius-sm);
	object-fit: cover;
	flex-shrink: 0;
	overflow: hidden;
}

.sp-latest-item__content {
	flex: 1;
	min-width: 0;
}

.sp-latest-item__category,
.sp-latest-item__category a {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sp-accent);
	text-decoration: none;
	margin: 0 0 0.35rem;
	display: block;
}

.sp-latest-item__title,
.sp-latest-item__title a {
	font-family: var(--sp-font-heading);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--sp-fg);
	text-decoration: none;
	margin: 0 0 0.35rem;
}

.sp-latest-item__title a:hover {
	color: var(--sp-accent);
}

.sp-latest-item__excerpt {
	font-size: 0.9375rem;
	color: var(--sp-muted);
	line-height: 1.5;
	margin: 0 0 0.35rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sp-latest-item__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--sp-muted);
}

.sp-latest-item__meta a {
	color: var(--sp-muted);
}

.sp-latest-item__meta a:hover {
	color: var(--sp-accent);
}

/* --- Grid mode --- */
body.stories-layout-grid .sp-latest-items {
	display: grid;
	grid-template-columns: repeat(var(--sp-stories-grid-cols, 2), 1fr);
	gap: 1.5rem;
}

body.stories-layout-grid .sp-latest-item {
	flex-direction: column;
	gap: 0.75rem;
	padding: 0;
	border-bottom: none;
	background: var(--sp-bg);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-card);
	overflow: hidden;
}

body.stories-layout-grid .sp-latest-item__image,
body.stories-layout-grid .sp-latest-item__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16/10;
	border-radius: 0;
}

body.stories-layout-grid .sp-latest-item__content {
	padding: 0 1rem 1rem;
}

/* --- Compact mode --- */
body.stories-layout-compact .sp-latest-item {
	gap: 1rem;
	padding: 0.875rem 0;
}

body.stories-layout-compact .sp-latest-item__image,
body.stories-layout-compact .sp-latest-item__image img {
	width: 80px;
	height: 60px;
}

body.stories-layout-compact .sp-latest-item__title {
	font-size: 1rem;
}

body.stories-layout-compact .sp-latest-item__excerpt {
	display: none;
}

/* --- Minimal mode (text only, no images) --- */
body.stories-layout-minimal .sp-latest-item__image {
	display: none;
}

body.stories-layout-minimal .sp-latest-item {
	padding: 0.75rem 0;
}

body.stories-layout-minimal .sp-latest-item__title {
	font-size: 1.0625rem;
}

body.stories-layout-minimal .sp-latest-item__excerpt {
	-webkit-line-clamp: 1;
}

/* ═══════════════════════════════════════════
   16. Don't Miss Grid
   ═══════════════════════════════════════════ */
.sp-dont-miss-section {
	margin-bottom: 2.5rem;
}

.sp-dont-miss-grid {
	display: grid;
	grid-template-columns: repeat(var(--sp-dont-miss-cols, 3), 1fr);
	gap: 1.5rem;
}

/* ═══════════════════════════════════════════
   17. Post Card (equal-height)
   ═══════════════════════════════════════════ */
.sp-post-card {
	display: flex;
	flex-direction: column;
	background: var(--sp-bg);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-card);
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
	height: 100%;
	box-shadow: var(--sp-shadow-card);
}

.sp-post-card:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.10);
	transform: translateY(-3px);
	border-color: transparent;
}

.sp-post-card__image-wrap {
	width: 100%;
	aspect-ratio: 16/10;
	overflow: hidden;
	flex-shrink: 0;
}

.sp-post-card__image-wrap img,
.sp-post-card__image-wrap .wp-block-post-featured-image,
.sp-post-card__image-wrap .wp-block-post-featured-image img,
.sp-post-card__image-wrap figure,
.sp-post-card__image-wrap figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.sp-post-card:hover .sp-post-card__image-wrap img {
	transform: scale(1.03);
}

.sp-post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.125rem;
}

.sp-post-card__category,
.sp-post-card__category a {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sp-accent);
	text-decoration: none;
	margin: 0 0 0.5rem;
	display: block;
}

.sp-post-card__title,
.sp-post-card__title a {
	font-family: var(--sp-font-heading);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--sp-fg);
	text-decoration: none;
	margin: 0 0 0.5rem;
}

.sp-post-card__title a:hover {
	color: var(--sp-accent);
}

.sp-post-card__excerpt {
	font-size: 0.9375rem;
	color: var(--sp-muted);
	line-height: 1.5;
	margin: 0 0 0.75rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
}

.sp-post-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--sp-muted);
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid var(--sp-border);
}

.sp-post-card__meta a {
	color: var(--sp-muted);
}

.sp-post-card__meta a:hover {
	color: var(--sp-accent);
}

/* ═══════════════════════════════════════════
   18. Load More
   ═══════════════════════════════════════════ */
.sp-load-more-wrap {
	text-align: center;
	margin: 2rem 0;
}

.sp-load-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 2rem;
	font-family: var(--sp-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sp-fg);
	background: transparent;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-btn);
	cursor: pointer;
	transition: var(--sp-transition);
	min-height: 48px;
}

.sp-load-more-btn:hover {
	border-color: var(--sp-accent);
	color: var(--sp-accent);
}

.sp-load-more-btn.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ═══════════════════════════════════════════
   19. Single Post
   ═══════════════════════════════════════════ */

/* Single post wrapper */
.sp-single-wrap {
	padding-top: 0;
}

.sp-single {
	max-width: var(--sp-content-width);
	margin: 0 auto;
	padding: 2rem 0 3rem;
}

/* BEM aliases — template uses sp-single__* classes */
.sp-single__header,
.sp-single-header {
	text-align: center;
	max-width: var(--sp-content-width);
	margin: 0 auto 1.5rem;
	padding-top: 1.5rem;
}

.sp-single__category,
.sp-single__category a,
.sp-single-header__category,
.sp-single-header__category a {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sp-accent);
	text-decoration: none;
	margin-bottom: 0.75rem;
	display: block;
}

.sp-single__title,
.sp-single-header__title {
	font-family: var(--sp-font-heading);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 1.25rem;
}

/* ─── Single Post Meta Row ─── */
.sp-single__meta,
.sp-single-header__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: var(--sp-muted);
	white-space: nowrap;
	line-height: 1.2;
	margin: 1rem 0 1.5rem;
}

/* Force ALL children to align on the same center line — nuclear approach */
.sp-single-header__meta > *,
.sp-single-header__meta > * > *,
.sp-single-header__meta > * > * > *,
.sp-single-header__meta > * > * > * > * {
	display: inline-flex !important;
	align-items: center !important;
	vertical-align: middle !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
	float: none !important;
}

.sp-single-header__meta p {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
}

.sp-single-header__meta a {
	color: var(--sp-fg);
	text-decoration: none;
}

.sp-single-header__meta a:hover {
	color: var(--sp-accent);
}

/* WP post-author block — force completely inline on one line */
.sp-single-header__meta .wp-block-post-author {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem;
	margin: 0 !important;
	padding: 0 !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	white-space: nowrap !important;
}

.sp-single-header__meta .wp-block-post-author__avatar {
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	flex-shrink: 0;
	line-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
}

.sp-single-header__meta .wp-block-post-author__avatar img {
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	border-radius: 50% !important;
	object-fit: cover;
	display: block !important;
	margin: 0 !important;
}

.sp-single-header__meta .wp-block-post-author__content {
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0 !important;
}

.sp-single-header__meta .wp-block-post-author__name {
	font-size: 0.9375rem !important;
	font-weight: 600;
	color: var(--sp-fg);
	line-height: 1.2 !important;
	margin: 0 !important;
	padding: 0 !important;
	white-space: nowrap !important;
}

.sp-single-header__meta .wp-block-post-author__name a {
	color: var(--sp-fg);
}

.sp-single-header__meta .wp-block-post-author__name a:hover {
	color: var(--sp-accent);
}

.sp-single-header__meta .wp-block-post-author__bio {
	display: none !important;
}

/* Separator dots */
.sp-single-header__sep {
	color: var(--sp-muted);
	font-size: 0.5rem;
	line-height: 1;
	margin: 0 !important;
	opacity: 0.6;
}

/* Date */
.sp-single__date,
.sp-single-header__date {
	margin: 0 !important;
	color: var(--sp-muted);
	font-size: 0.9375rem;
}

.sp-single-header__date a {
	color: var(--sp-muted) !important;
}

/* Reading time */
.sp-single-header__reading-time {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0 !important;
	color: var(--sp-muted);
	font-size: 0.9375rem;
}

/* Featured Image */
.sp-single__featured-image,
.sp-single-featured {
	max-width: var(--sp-content-width);
	margin: 0 auto 2rem;
}

.sp-single-featured img,
.sp-single-featured .wp-block-post-featured-image,
.sp-single-featured .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	border-radius: var(--sp-radius-card);
}

/* Text Size Controls */
.sp-text-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.25rem;
	margin-bottom: 1.5rem;
	max-width: var(--sp-content-width);
	margin-left: auto;
	margin-right: auto;
}

.sp-text-controls__label {
	font-size: 0.8125rem;
	color: var(--sp-muted);
	margin-right: 0.5rem;
}

.sp-text-controls__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-sm);
	background: transparent;
	color: var(--sp-fg);
	cursor: pointer;
	font-family: var(--sp-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	transition: var(--sp-transition);
	min-width: 36px;
	min-height: 36px;
}

.sp-text-controls__btn:hover,
.sp-text-controls__btn.is-active {
	border-color: var(--sp-accent);
	color: var(--sp-accent);
}

/* Content Body */
.sp-single__content,
.sp-single-content {
	max-width: var(--sp-content-width);
	margin: 0 auto;
}

.sp-single-content__body {
	font-size: var(--sp-font-size-body);
	line-height: 1.8;
}

.sp-single-content__body p {
	margin-bottom: 1.5rem;
}

.sp-single-content__body h2 {
	font-size: 1.75rem;
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

.sp-single-content__body h3 {
	font-size: 1.375rem;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

.sp-single-content__body h4 {
	font-size: 1.125rem;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

.sp-single-content__body blockquote {
	margin: 2rem 0;
	padding: 1.5rem 2rem;
	border-left: 4px solid var(--sp-accent);
	background: var(--sp-surface);
	border-radius: 0 var(--sp-radius-sm) var(--sp-radius-sm) 0;
	font-size: 1.125rem;
	font-style: italic;
	color: var(--sp-fg);
}

.sp-single-content__body blockquote p:last-child {
	margin-bottom: 0;
}

.sp-single-content__body ul,
.sp-single-content__body ol {
	padding-left: 1.5rem;
	margin-bottom: 1.5rem;
}

.sp-single-content__body li {
	margin-bottom: 0.5rem;
}

.sp-single-content__body img {
	border-radius: var(--sp-radius-sm);
	margin: 1.5rem 0;
}

.sp-single-content__body figure {
	margin: 2rem 0;
}

.sp-single-content__body figcaption {
	font-size: 0.875rem;
	color: var(--sp-muted);
	text-align: center;
	margin-top: 0.5rem;
}

.sp-single-content__body pre {
	background: var(--sp-dark);
	color: #E8E5E0;
	padding: 1.5rem;
	border-radius: var(--sp-radius-sm);
	overflow-x: auto;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 1.5rem 0;
}

.sp-single-content__body code {
	font-size: 0.9em;
	background: var(--sp-surface);
	padding: 0.15rem 0.4rem;
	border-radius: 3px;
}

.sp-single-content__body pre code {
	background: transparent;
	padding: 0;
}

.sp-single-content__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
}

.sp-single-content__body th,
.sp-single-content__body td {
	padding: 0.75rem 1rem;
	border: 1px solid var(--sp-border);
	text-align: left;
}

.sp-single-content__body th {
	background: var(--sp-surface);
	font-weight: 600;
}

.sp-single-content__body a {
	color: var(--sp-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sp-single-content__body a:hover {
	color: var(--sp-accent-hover);
}

/* Tags */
.sp-post-tags__list,
.sp-post-tags {
	max-width: var(--sp-content-width);
	margin: 2rem auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sp-post-tags__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sp-fg);
	margin-right: 0.25rem;
}

.sp-post-tags a,
.sp-post-tags .wp-block-post-terms__link {
	display: inline-block;
	font-size: 0.8125rem;
	padding: 0.375rem 0.75rem;
	background: var(--sp-surface);
	border-radius: var(--sp-radius-full);
	color: var(--sp-muted);
	text-decoration: none;
	transition: var(--sp-transition);
}

.sp-post-tags a:hover {
	background: var(--sp-accent-light);
	color: var(--sp-accent);
}

/* ═══════════════════════════════════════════
   20. Breadcrumbs
   ═══════════════════════════════════════════ */
.sp-breadcrumbs {
	max-width: var(--sp-content-width);
	margin: 1rem auto;
	font-size: 0.8125rem;
	color: var(--sp-muted);
}

.sp-breadcrumbs a {
	color: var(--sp-muted);
	text-decoration: none;
}

.sp-breadcrumbs a:hover {
	color: var(--sp-accent);
}

.sp-breadcrumbs__sep {
	margin: 0 0.5rem;
	opacity: 0.5;
}

/* ═══════════════════════════════════════════
   21. Share Buttons
   ═══════════════════════════════════════════ */
.sp-share-buttons {
	max-width: var(--sp-content-width);
	margin: 2rem auto;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.sp-share-buttons__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sp-fg);
	margin-right: 0.25rem;
}

.sp-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	font-family: var(--sp-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-full);
	background: transparent;
	color: var(--sp-fg);
	cursor: pointer;
	transition: var(--sp-transition);
	text-decoration: none;
	min-height: 36px;
}

.sp-share-btn:hover {
	border-color: var(--sp-accent);
	color: var(--sp-accent);
}

.sp-share-btn svg {
	width: 16px;
	height: 16px;
}

.sp-share-copy {
	cursor: pointer;
}

/* ═══════════════════════════════════════════
   Author Bio Box
   ═══════════════════════════════════════════ */
.sp-single__author,
.sp-author-bio__inner,
.sp-author-bio {
	max-width: var(--sp-content-width);
	margin: 2.5rem auto;
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 2rem 0;
	border-top: 1px solid var(--sp-border);
	border-bottom: 1px solid var(--sp-border);
	background: transparent;
}

.sp-author-bio__avatar,
.sp-author-bio__avatar img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

/* WP author block inside bio — clean layout */
.sp-author-bio .wp-block-post-author__avatar,
.sp-author-bio .wp-block-post-author__avatar img {
	width: 64px !important;
	height: 64px !important;
	border-radius: 50% !important;
	object-fit: cover;
	flex-shrink: 0;
}

.sp-author-bio .wp-block-post-author {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	width: 100%;
}

.sp-author-bio .wp-block-post-author__content {
	display: block;
	flex: 1;
}

.sp-author-bio .wp-block-post-author__name {
	font-family: var(--sp-font-heading);
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--sp-fg);
	margin: 0 0 0.25rem;
	line-height: 1.2;
}

.sp-author-bio .wp-block-post-author__name a {
	color: var(--sp-fg);
	text-decoration: none;
}

.sp-author-bio .wp-block-post-author__name a:hover {
	color: var(--sp-accent);
}

.sp-author-bio .wp-block-post-author__bio {
	font-size: 0.9375rem;
	color: var(--sp-muted);
	line-height: 1.6;
	margin: 0;
}

.sp-author-bio__content {
	flex: 1;
}

.sp-author-bio__name,
.sp-author-bio__name a {
	font-family: var(--sp-font-heading);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--sp-fg);
	text-decoration: none;
	margin: 0 0 0.25rem;
}

.sp-author-bio__role {
	font-size: 0.8125rem;
	color: var(--sp-accent);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
}

.sp-author-bio__text {
	font-size: 0.9375rem;
	color: var(--sp-muted);
	line-height: 1.6;
	margin: 0;
}

/* Post Navigation (Prev/Next) */
.sp-post-nav {
	max-width: var(--sp-content-width);
	margin: 3rem auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.sp-post-nav__item {
	padding: 1.25rem;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-card);
	text-decoration: none;
	transition: var(--sp-transition);
}

.sp-post-nav__item:hover {
	border-color: var(--sp-accent);
	box-shadow: var(--sp-shadow-card);
}

.sp-post-nav__label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sp-muted);
	margin-bottom: 0.5rem;
}

.sp-post-nav__title {
	font-family: var(--sp-font-heading);
	font-size: 1.0625rem;
	color: var(--sp-fg);
	line-height: 1.3;
}

.sp-post-nav__prev {
	text-align: left;
}

.sp-post-nav__next,
.sp-post-nav__item--next {
	text-align: right;
}

/* Related Posts (equal-height grid) */
.sp-related-section {
	max-width: 100%;
	margin: 3rem 0;
	padding: 0;
}

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

.sp-related-grid .sp-post-card {
	height: 100%;
}

.sp-related-grid .sp-post-card__image-wrap {
	aspect-ratio: 16/10;
}

.sp-related-grid .sp-post-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sp-related-grid .sp-post-card__excerpt {
	flex: 1;
}

/* ═══════════════════════════════════════════
   22. Archive Page
   ═══════════════════════════════════════════ */
.sp-archive-hero {
	position: relative;
	padding: 3rem 0;
	margin-bottom: 2.5rem;
	background: var(--sp-surface);
	border-radius: var(--sp-radius-card);
	overflow: hidden;
}

.sp-archive-hero--has-image {
	background: var(--sp-dark);
	color: var(--sp-white);
}

.sp-archive-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
}

.sp-archive-hero__content {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 0 2rem;
}

.sp-archive-hero__label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sp-accent);
	margin-bottom: 0.5rem;
}

.sp-archive-hero__title {
	font-family: var(--sp-font-heading);
	font-size: clamp(2rem, 4vw, 2.75rem);
	margin: 0 0 0.75rem;
}

.sp-archive-hero__desc {
	font-size: 1.0625rem;
	color: var(--sp-muted);
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
}

.sp-archive-hero--has-image .sp-archive-hero__desc {
	color: rgba(255,255,255,0.8);
}

.sp-archive-grid {
	display: grid;
	grid-template-columns: 240px 1fr 280px;
	gap: 2.5rem;
	align-items: start;
}

.sp-archive-grid__left {
	position: sticky;
	top: calc(var(--sp-header-height) + 1.5rem);
}

.sp-archive-grid__right {
	position: sticky;
	top: calc(var(--sp-header-height) + 1.5rem);
}

/* Archive post grid — configurable columns */
.sp-archive-post-grid {
	display: grid;
	grid-template-columns: repeat(var(--sp-archive-cols, 2), 1fr);
	gap: 1.5rem;
}

.sp-archive-post-grid .sp-post-card {
	height: 100%;
}

/* Filter sidebar */
.sp-filter-sidebar .sp-sidebar-card {
	padding: 1rem;
}

.sp-filter-sidebar .sp-filter-group {
	margin-bottom: 1rem;
}

.sp-filter-sidebar .sp-filter-group:last-child {
	margin-bottom: 0;
}

.sp-filter-sidebar .sp-filter-group__title {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sp-muted);
	margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════
   23. Pagination
   ═══════════════════════════════════════════ */
.sp-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 2.5rem 0;
}

.sp-pagination .page-numbers,
.sp-pagination a,
.sp-pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.75rem;
	font-family: var(--sp-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-sm);
	color: var(--sp-fg);
	text-decoration: none;
	transition: var(--sp-transition);
}

.sp-pagination .page-numbers:hover,
.sp-pagination a:hover {
	border-color: var(--sp-accent);
	color: var(--sp-accent);
}

.sp-pagination .page-numbers.current,
.sp-pagination span.current {
	background: var(--sp-accent);
	color: var(--sp-white);
	border-color: var(--sp-accent);
}

.sp-pagination .dots {
	border: none;
	color: var(--sp-muted);
}

/* ═══════════════════════════════════════════
   24. 404 Page
   ═══════════════════════════════════════════ */
.sp-404 {
	text-align: center;
	padding: 5rem 2rem;
	max-width: 600px;
	margin: 0 auto;
}

.sp-404__number {
	font-family: var(--sp-font-heading);
	font-size: 8rem;
	font-weight: 400;
	color: var(--sp-border);
	line-height: 1;
	margin-bottom: 1rem;
}

.sp-404__title {
	font-family: var(--sp-font-heading);
	font-size: 2rem;
	margin-bottom: 1rem;
}

.sp-404__text {
	font-size: 1.0625rem;
	color: var(--sp-muted);
	margin-bottom: 2rem;
	line-height: 1.6;
}

/* ═══════════════════════════════════════════
   25. Search Page
   ═══════════════════════════════════════════ */
.sp-search-page__header {
	text-align: center;
	padding: 2rem 0;
	margin-bottom: 2rem;
}

.sp-search-page__title {
	font-family: var(--sp-font-heading);
	font-size: 2rem;
	margin-bottom: 0.5rem;
}

.sp-search-page__term {
	color: var(--sp-accent);
}

.sp-search-page__count {
	font-size: 1rem;
	color: var(--sp-muted);
}

.sp-search-page__form {
	max-width: 500px;
	margin: 1.5rem auto 0;
	display: flex;
	gap: 0.5rem;
}

.sp-search-page__form input[type="search"] {
	flex: 1;
	padding: 0.75rem 1rem;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-sm);
	font-family: var(--sp-font-body);
	font-size: 1rem;
	background: var(--sp-bg);
	color: var(--sp-fg);
	min-height: 44px;
}

.sp-search-page__form button {
	padding: 0.75rem 1.5rem;
	background: var(--sp-accent);
	color: var(--sp-white);
	border: none;
	border-radius: var(--sp-radius-sm);
	font-family: var(--sp-font-body);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--sp-transition);
	min-height: 44px;
}

.sp-search-page__form button:hover {
	background: var(--sp-accent-hover);
}

.sp-search-results-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

.sp-search-results-grid .sp-post-card {
	height: 100%;
}

/* ═══════════════════════════════════════════
   26. Footer
   ═══════════════════════════════════════════ */
.sp-footer {
	background: var(--sp-footer-bg);
	border-top: 1px solid var(--sp-border);
}

.sp-footer-widgets {
	padding: 3rem 0;
	border-bottom: 1px solid var(--sp-border);
}

/* Support both custom grid and WP columns in footer */
.sp-footer-widgets__grid {
	display: grid;
	grid-template-columns: repeat(var(--sp-footer-cols, 4), 1fr);
	gap: 2rem;
}

.sp-footer-widgets .sp-footer-widgets__columns {
	gap: 2rem;
}

.sp-footer-widgets .wp-block-column {
	min-width: 0;
}

/* Footer widget titles */
.sp-footer-widget-title,
.sp-footer-widget__title {
	font-family: var(--sp-font-heading);
	font-size: 1.125rem;
	font-weight: 400;
	margin: 0 0 1rem;
	color: var(--sp-fg);
}

/* Footer lists */
.sp-footer-widgets ul,
.sp-footer-widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sp-footer-widgets li,
.sp-footer-widget li {
	margin-bottom: 0.5rem;
}

.sp-footer-widgets a,
.sp-footer-widget a {
	font-size: 0.9375rem;
	color: var(--sp-muted);
	text-decoration: none;
	transition: var(--sp-transition);
}

.sp-footer-widgets a:hover,
.sp-footer-widget a:hover {
	color: var(--sp-accent);
}

/* Footer about text */
.sp-footer-about {
	color: var(--sp-muted);
	line-height: 1.6;
}

/* Footer categories block */
.sp-footer-categories {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sp-footer-categories li {
	margin-bottom: 0.5rem;
}

.sp-footer-categories a {
	color: var(--sp-muted);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: var(--sp-transition);
}

.sp-footer-categories a:hover {
	color: var(--sp-accent);
}

/* Footer navigation (vertical) */
.sp-footer-nav {
	gap: 0.5rem !important;
}

.sp-footer-nav a,
.sp-footer-nav .wp-block-navigation-item__content {
	color: var(--sp-muted);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: var(--sp-transition);
}

.sp-footer-nav a:hover,
.sp-footer-nav .wp-block-navigation-item__content:hover {
	color: var(--sp-accent);
}

/* Footer newsletter form */
.sp-footer-newsletter {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.sp-footer-newsletter input[type="email"] {
	flex: 1;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-sm);
	background: var(--sp-bg);
	color: var(--sp-fg);
	font-family: var(--sp-font-body);
	font-size: 0.875rem;
	min-height: 44px;
}

.sp-footer-newsletter input[type="email"]:focus {
	border-color: var(--sp-accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--sp-accent-light);
}

.sp-footer-newsletter button {
	padding: 0.625rem 1rem;
	min-height: 44px;
	white-space: nowrap;
}

.sp-footer__bar {
	min-height: var(--sp-footer-height);
	display: flex;
	align-items: center;
	padding: 1.25rem 0;
}

.sp-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 1.5rem;
}

.sp-footer__copyright {
	font-size: 0.8125rem;
	color: var(--sp-footer-text);
	flex-shrink: 0;
	margin: 0;
}

.sp-footer__nav,
.sp-footer__nav .wp-block-navigation__container {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: nowrap;
}

.sp-footer__nav a,
.sp-footer__nav .wp-block-navigation-item__content {
	font-size: 0.8125rem;
	color: var(--sp-footer-text);
	text-decoration: none;
	transition: var(--sp-transition);
}

.sp-footer__nav a:hover,
.sp-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--sp-accent);
}

/* Footer social icons */
.sp-footer__social {
	gap: 0.25rem;
}

.sp-footer__social .wp-block-social-link {
	margin: 0 !important;
}

.sp-footer__social a {
	color: var(--sp-muted) !important;
	transition: var(--sp-transition);
}

.sp-footer__social a:hover {
	color: var(--sp-accent) !important;
}

/* ═══════════════════════════════════════════
   26B. Classic Primary Nav (PHP-rendered fallback)
   ═══════════════════════════════════════════ */

/* Position the classic nav inside the header bar */
.sp-primary-nav-classic {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.sp-primary-nav__list {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
	white-space: nowrap;
	overflow: hidden;
}

.sp-primary-nav__list .sp-nav-item {
	list-style: none;
	position: relative;
}

.sp-primary-nav__list .sp-nav-item > a {
	font-family: var(--sp-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--sp-fg);
	text-decoration: none;
	transition: var(--sp-transition);
	white-space: nowrap;
	padding: 0.5rem 1rem;
	display: block;
}

.sp-primary-nav__list .sp-nav-item > a:hover,
.sp-primary-nav__list .sp-nav-item.is-active > a {
	color: var(--sp-accent);
}

/* Classic nav dropdown */
.sp-primary-nav__list .sp-has-dropdown .sp-desktop-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--sp-bg);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-sm);
	box-shadow: var(--sp-shadow-elevated);
	padding: 0.5rem 0;
	min-width: 200px;
	list-style: none;
	display: none;
	z-index: 10000;
}

.sp-primary-nav__list .sp-has-dropdown:hover .sp-desktop-submenu {
	display: block;
}

.sp-desktop-submenu li {
	list-style: none;
}

.sp-desktop-submenu a {
	font-size: 0.875rem;
	color: var(--sp-fg);
	text-decoration: none;
	padding: 0.5rem 1rem;
	display: block;
	transition: var(--sp-transition);
}

.sp-desktop-submenu a:hover {
	color: var(--sp-accent);
	background: var(--sp-surface);
}

/* Classic footer nav */
.sp-footer-nav-classic {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-footer-nav__list {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-footer-nav__list li {
	list-style: none;
}

.sp-footer-nav__list a {
	font-size: 0.8125rem;
	color: var(--sp-footer-text);
	text-decoration: none;
	transition: var(--sp-transition);
}

.sp-footer-nav__list a:hover {
	color: var(--sp-accent);
}

/* ═══════════════════════════════════════════
   27. Social Icons
   ═══════════════════════════════════════════ */
.sp-social-icons {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sp-social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--sp-radius-full);
	color: var(--sp-muted);
	transition: var(--sp-transition);
	text-decoration: none;
}

.sp-social-icon:hover {
	color: var(--sp-accent);
	background: var(--sp-accent-light);
}

.sp-social-icon svg {
	width: 18px;
	height: 18px;
}

/* ═══════════════════════════════════════════
   28. Back to Top
   ═══════════════════════════════════════════ */
.sp-back-to-top {
	position: fixed;
	bottom: calc(var(--sp-footer-height) + 1.5rem);
	right: 1.5rem;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sp-bg);
	color: var(--sp-fg);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-full);
	box-shadow: var(--sp-shadow-card);
	cursor: pointer;
	z-index: 900;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: var(--sp-transition);
}

.sp-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sp-back-to-top:hover {
	border-color: var(--sp-accent);
	color: var(--sp-accent);
}

/* ═══════════════════════════════════════════
   29. Scroll Animations
   ═══════════════════════════════════════════ */
[data-animate="fade-up"] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-animate="fade-in"] {
	opacity: 0;
	transition: opacity 0.5s ease;
}

[data-animate].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	[data-animate] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ═══════════════════════════════════════════
   30. Dark Mode Toggle Icons
   ═══════════════════════════════════════════ */
.sp-dark-mode-toggle .sp-icon-sun,
.sp-dark-mode-toggle .sp-icon-moon {
	width: 20px;
	height: 20px;
}

[data-theme="light"] .sp-dark-mode-toggle .sp-icon-sun {
	display: none;
}
[data-theme="light"] .sp-dark-mode-toggle .sp-icon-moon {
	display: block;
}

[data-theme="dark"] .sp-dark-mode-toggle .sp-icon-sun {
	display: block;
}
[data-theme="dark"] .sp-dark-mode-toggle .sp-icon-moon {
	display: none;
}

/* ═══════════════════════════════════════════
   31. WordPress Block Overrides
   ═══════════════════════════════════════════ */
.wp-block-post-template {
	padding: 0;
	list-style: none;
}

/* Remove WordPress default border/box from post-author block */
.wp-block-post-author {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	outline: none !important;
}

.wp-block-navigation {
	gap: 0;
	margin: 0;
	padding: 0;
}

.wp-block-navigation .wp-block-navigation-item {
	padding: 0;
	margin: 0;
}

/* Hide WP's built-in responsive menu toggle — we use our own */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: none !important;
}

/* Prevent WP from wrapping nav to overlay on mobile */
.wp-block-navigation__responsive-container {
	position: static !important;
	width: auto !important;
	background: none !important;
	padding: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 0 !important;
}

/* Force nav list to stay in a single row */
.sp-header__nav .wp-block-navigation__container,
.sp-header__nav .wp-block-page-list {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.wp-block-query-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 2rem 0;
}

.wp-block-separator {
	border-color: var(--sp-border);
}

.wp-block-image {
	margin: 1.5rem 0;
}

.wp-block-image img {
	border-radius: var(--sp-radius-sm);
}

.wp-block-gallery {
	gap: 0.75rem;
}

.wp-block-gallery .wp-block-image img {
	border-radius: var(--sp-radius-sm);
}

.wp-block-cover {
	border-radius: var(--sp-radius-card);
	overflow: hidden;
}

.wp-block-button .wp-block-button__link {
	font-family: var(--sp-font-body);
	border-radius: var(--sp-radius-btn);
}

.wp-block-pullquote {
	border-top: 3px solid var(--sp-accent);
	border-bottom: 3px solid var(--sp-accent);
	padding: 1.5rem 0;
}

.wp-block-pullquote blockquote {
	border: none;
	padding: 0;
	margin: 0;
}

.wp-block-pullquote p {
	font-family: var(--sp-font-heading);
	font-size: 1.5rem;
	line-height: 1.4;
}

.wp-block-pullquote cite {
	font-family: var(--sp-font-body);
	font-size: 0.9375rem;
	color: var(--sp-muted);
}

/* ═══════════════════════════════════════════
   32. Comments
   ═══════════════════════════════════════════ */
.sp-comments {
	max-width: var(--sp-content-width);
	margin: 3rem auto;
}

.sp-comments__title {
	font-family: var(--sp-font-heading);
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.comment {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--sp-border);
}

.comment .comment-author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.comment .comment-author img {
	width: 40px;
	height: 40px;
	border-radius: var(--sp-radius-full);
}

.comment .comment-author .fn {
	font-weight: 600;
}

.comment .comment-metadata {
	font-size: 0.8125rem;
	color: var(--sp-muted);
	margin-bottom: 0.75rem;
}

.comment .comment-content p {
	margin-bottom: 0.75rem;
}

.comment-respond {
	margin-top: 2rem;
}

.comment-respond .comment-reply-title {
	font-family: var(--sp-font-heading);
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

.comment-respond label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-sm);
	font-family: var(--sp-font-body);
	font-size: 0.9375rem;
	background: var(--sp-bg);
	color: var(--sp-fg);
	margin-bottom: 1rem;
	min-height: 44px;
}

.comment-respond textarea {
	min-height: 120px;
	resize: vertical;
}

.comment-respond input:focus,
.comment-respond textarea:focus {
	border-color: var(--sp-accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--sp-accent-light);
}

.comment-respond .submit {
	background: var(--sp-accent);
	color: var(--sp-white);
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: var(--sp-radius-btn);
	font-family: var(--sp-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--sp-transition);
	min-height: 44px;
}

.comment-respond .submit:hover {
	background: var(--sp-accent-hover);
}

/* BEM aliases for comment classes used in single.html template */
.sp-comment {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--sp-border);
}

.sp-comment__avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--sp-radius-full);
	object-fit: cover;
}

.sp-comment__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.sp-comment__date {
	font-size: 0.8125rem;
	color: var(--sp-muted);
	margin-bottom: 0.75rem;
}

.sp-comment__body {
	font-size: 0.9375rem;
	line-height: 1.6;
}

.sp-comment__content p {
	margin-bottom: 0.75rem;
}

.sp-comment__reply {
	font-size: 0.8125rem;
	color: var(--sp-accent);
	text-decoration: none;
	font-weight: 500;
}

.sp-comment__reply:hover {
	color: var(--sp-accent-hover);
}

.sp-comment-form {
	margin-top: 2rem;
}

.sp-comments-pagination {
	max-width: var(--sp-content-width);
	margin: 1.5rem auto;
	display: flex;
	gap: 0.5rem;
	justify-content: center;
}

/* Related query wrapper */
.sp-related-query {
	margin: 0;
}

/* Post card image alias (template uses sp-post-card__image, CSS uses sp-post-card__image-wrap) */
.sp-post-card__image {
	width: 100%;
	aspect-ratio: 16/10;
	overflow: hidden;
	flex-shrink: 0;
}

.sp-post-card__image img,
.sp-post-card__image .wp-block-post-featured-image,
.sp-post-card__image .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.sp-post-card:hover .sp-post-card__image img {
	transform: scale(1.03);
}

/* ═══════════════════════════════════════════
   33. Widget Styles
   ═══════════════════════════════════════════ */
.widget {
	margin-bottom: 1.5rem;
}

.widget-title,
.wp-block-heading {
	font-family: var(--sp-font-heading);
}

/* ═══════════════════════════════════════════
   34. Ad Slots
   ═══════════════════════════════════════════ */
.sp-ad-slot {
	text-align: center;
	margin: 1.5rem 0;
	padding: 0.5rem;
}

.sp-ad-slot--header {
	margin: 0;
	padding: 0.5rem 0;
}

.sp-ad-slot--sidebar {
	margin: 0 0 1.5rem;
}

.sp-ad-slot--in-content {
	margin: 2rem -1rem;
	padding: 1rem;
	background: var(--sp-surface);
	border-radius: var(--sp-radius-sm);
}

/* ═══════════════════════════════════════════
   35. Responsive — Tablet (max-width: 1024px)
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
	:root {
		--sp-sidebar-width: 260px;
	}

	.sp-homepage-grid {
		grid-template-columns: 1fr var(--sp-sidebar-width);
		gap: 2rem;
	}

	.sp-homepage-grid__left {
		display: none;
	}

	body.sidebar-layout-both .sp-homepage-grid {
		grid-template-columns: 1fr var(--sp-sidebar-width);
	}

	body.sidebar-layout-both .sp-homepage-grid__left {
		display: none;
	}

	body.sidebar-layout-left-only .sp-homepage-grid {
		grid-template-columns: var(--sp-sidebar-width) 1fr;
	}

	body.sidebar-layout-left-only .sp-homepage-grid__left {
		display: block;
	}

	.sp-archive-grid {
		grid-template-columns: 1fr 260px;
		gap: 2rem;
	}

	.sp-archive-grid__left {
		display: none;
	}

	.sp-dont-miss-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sp-related-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sp-search-results-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sp-footer-widgets__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sp-hero-post__title,
	.sp-hero-post__title a {
		font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	}

	.sp-hero__title {
		font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	}

	.sp-hero__body {
		padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.5rem);
	}

	.sp-hero__media {
		aspect-ratio: 16/9;
		min-height: 300px;
	}
}

/* ═══════════════════════════════════════════
   36. Responsive — Mobile (max-width: 768px)
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
	:root {
		--sp-header-height: 60px;
		--sp-footer-height: auto;
		--sp-font-size-body: 16px;
	}

	/* Show mobile menu toggle */
	.sp-mobile-menu-toggle {
		display: flex;
	}

	/* Show mobile drawer */
	.sp-mobile-drawer {
		display: block;
	}

	/* Hide desktop nav */
	.sp-header__nav-wrap {
		display: none;
	}

	/* Hide classic desktop nav on mobile */
	.sp-primary-nav-classic {
		display: none;
	}

	/* Hide desktop search/dark mode in header (moved to drawer) */
	.sp-header__actions .sp-search-trigger,
	.sp-header__actions .sp-dark-mode-toggle {
		display: none;
	}

	/* Keep hamburger visible */
	.sp-header__actions {
		gap: 0;
	}

	/* Logo */
	.sp-header__logo,
	.sp-header__logo a {
		font-size: 1.5rem;
	}

	.sp-header__logo img,
	.sp-header__logo .custom-logo {
		max-width: var(--sp-logo-max-width-mobile);
	}

	/* Homepage grid — single column */
	.sp-homepage-grid,
	body.sidebar-layout-both .sp-homepage-grid,
	body.sidebar-layout-left-only .sp-homepage-grid,
	body.sidebar-layout-right-only .sp-homepage-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	/* Hide sidebars on mobile (unless opted in) */
	body.mobile-hide-sidebars .sp-homepage-grid__left,
	body.mobile-hide-sidebars .sp-homepage-grid__right,
	body.mobile-hide-sidebars .sp-archive-grid__left,
	body.mobile-hide-sidebars .sp-archive-grid__right {
		display: none;
	}

	/* Show sidebars below content on mobile (when opted in) */
	body:not(.mobile-hide-sidebars) .sp-homepage-grid__left,
	body:not(.mobile-hide-sidebars) .sp-homepage-grid__right {
		position: static;
	}

	/* Archive grid — single column */
	.sp-archive-grid,
	body.archive-sidebar-left-only .sp-archive-grid,
	body.archive-sidebar-right-only .sp-archive-grid {
		grid-template-columns: 1fr !important;
		gap: 1.5rem;
	}

	.sp-archive-grid__left,
	.sp-archive-grid__right {
		position: static;
	}

	/* Hero */
	.sp-hero-post__overlay {
		padding: 1.5rem;
	}

	.sp-hero-post__title,
	.sp-hero-post__title a {
		font-size: clamp(1.5rem, 5vw, 2rem);
	}

	.sp-hero-post__meta {
		font-size: 0.8125rem;
	}

	.sp-hero__title {
		font-size: clamp(1.375rem, 5vw, 1.875rem);
	}

	.sp-hero__body {
		padding: 1.25rem 1.25rem;
	}

	.sp-hero__excerpt {
		display: none;
	}

	.sp-hero__media {
		aspect-ratio: 4/3;
		min-height: 260px;
		max-height: 420px;
	}

	.sp-hero__btn {
		padding: 0.625rem 1.25rem;
	}

	/* Stories grid mode — single column on mobile */
	body.stories-layout-grid .sp-latest-items {
		grid-template-columns: 1fr;
	}

	/* Don't Miss */
	.sp-dont-miss-grid {
		grid-template-columns: 1fr;
	}

	/* Related Posts */
	.sp-related-grid {
		grid-template-columns: 1fr;
	}

	/* Post Navigation */
	.sp-post-nav {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	/* Author Bio */
	.sp-author-bio {
		flex-direction: column;
		text-align: center;
		align-items: center;
	}

	/* Single Header */
	.sp-single-header {
		padding-top: 1.5rem;
	}

	.sp-single-header__title {
		font-size: clamp(1.5rem, 5vw, 2rem);
	}

	/* Search Results */
	.sp-search-results-grid {
		grid-template-columns: 1fr;
	}

	/* Footer */
	.sp-footer-widgets__grid {
		grid-template-columns: 1fr;
	}

	.sp-footer__bar {
		height: auto;
		padding: 1rem 0;
	}

	.sp-footer__inner {
		flex-direction: column;
		text-align: center;
		gap: 0.75rem;
	}

	.sp-footer__nav {
		flex-wrap: wrap;
		justify-content: center;
	}

	/* Archive post grid */
	.sp-archive-post-grid {
		grid-template-columns: 1fr;
	}

	/* Search overlay */
	.sp-search-overlay {
		padding-top: 5vh;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* Pagination */
	.sp-pagination {
		flex-wrap: wrap;
	}

	/* Breaking news — hide on mobile unless opted in */
	body:not(.mobile-show-breaking) .sp-breaking-news {
		display: none;
	}

	/* Back to top — adjust position */
	.sp-back-to-top {
		bottom: 1.5rem;
		right: 1rem;
	}

	/* Container padding */
	.sp-container {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* Sidebar cards */
	.sp-sidebar-card {
		margin-bottom: 1rem;
	}

	/* Sticky sidebars off on mobile */
	.sp-homepage-grid__left,
	.sp-homepage-grid__right {
		position: static !important;
	}
}

/* ═══════════════════════════════════════════
   37. Responsive — Small Mobile (max-width: 480px)
   ═══════════════════════════════════════════ */
@media (max-width: 480px) {
	.sp-hero-post__title,
	.sp-hero-post__title a {
		font-size: 1.375rem;
	}

	.sp-hero-post__btn {
		display: none;
	}

	.sp-hero__title {
		font-size: 1.25rem;
		text-shadow: 0 1px 8px rgba(0,0,0,0.3);
	}

	.sp-hero__btn {
		font-size: 0.8125rem;
		padding: 0.5rem 1rem;
	}

	.sp-hero__cat {
		font-size: 10px;
	}

	.sp-single-header__title {
		font-size: 1.5rem;
	}

	.sp-single-content__body h2 {
		font-size: 1.375rem;
	}

	.sp-single-content__body h3 {
		font-size: 1.125rem;
	}

	.sp-single-content__body blockquote {
		padding: 1rem 1.25rem;
		margin: 1.5rem 0;
	}

	.sp-404__number {
		font-size: 5rem;
	}

	.sp-post-card__body {
		padding: 0.875rem;
	}

	.sp-share-buttons {
		gap: 0.375rem;
	}

	.sp-share-btn {
		padding: 0.375rem 0.625rem;
		font-size: 0.75rem;
	}

	.sp-text-controls {
		gap: 0.125rem;
	}

	.sp-text-controls__btn {
		width: 32px;
		height: 32px;
		min-width: 32px;
		min-height: 32px;
	}

	.sp-app-cta__buttons {
		flex-direction: column;
	}
}

/* ═══════════════════════════════════════════
   38. Print Styles
   ═══════════════════════════════════════════ */
@media print {
	.sp-header,
	.sp-footer,
	.sp-breaking-news,
	.sp-back-to-top,
	.sp-reading-progress,
	.sp-search-overlay,
	.sp-mobile-drawer,
	.sp-share-buttons,
	.sp-text-controls,
	.sp-load-more-wrap,
	.sp-ad-slot,
	.sp-post-nav,
	.sp-related-section,
	.sp-sidebar-card,
	.sp-homepage-grid__left,
	.sp-homepage-grid__right {
		display: none !important;
	}

	body {
		background: white;
		color: black;
		font-size: 12pt;
	}

	.sp-single-content {
		max-width: 100%;
	}

	a {
		color: black;
		text-decoration: underline;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		color: #555;
	}

	img {
		max-width: 100% !important;
	}
}

/* ═══════════════════════════════════════════
   39. Accessibility
   ═══════════════════════════════════════════ */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--sp-bg);
	border-radius: var(--sp-radius-sm);
	box-shadow: var(--sp-shadow-elevated);
	clip: auto !important;
	color: var(--sp-fg);
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	height: auto;
	left: 0.5rem;
	line-height: normal;
	padding: 1rem 1.5rem;
	text-decoration: none;
	top: 0.5rem;
	width: auto;
	z-index: 100000;
}

/* Skip link */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--sp-accent);
	color: var(--sp-white);
	padding: 0.75rem 1.5rem;
	z-index: 100000;
	font-weight: 600;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 0;
}

/* Focus styles */
:focus-visible {
	outline: 2px solid var(--sp-accent);
	outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--sp-accent);
	outline-offset: 2px;
}

/* ═══════════════════════════════════════════
   40. Selection
   ═══════════════════════════════════════════ */
::selection {
	background: var(--sp-accent);
	color: var(--sp-white);
}

::-moz-selection {
	background: var(--sp-accent);
	color: var(--sp-white);
}


/* ═══════════════════════════════════════════
   41. Customizer Conditional Visibility
   (Body classes control element visibility)
   ═══════════════════════════════════════════ */

/* Hide sidebars on mobile when Customizer says so */
body.mobile-hide-sidebars .sp-homepage-grid__left,
body.mobile-hide-sidebars .sp-homepage-grid__right {
	/* Hidden via responsive section below */
}

/* Single post — hide elements based on body classes */
body:not(.sp-show-reading-progress) .sp-reading-progress { display: none !important; }
body:not(.sp-show-text-controls) .sp-text-controls { display: none !important; }
body:not(.sp-show-author-bio) .sp-author-bio { display: none !important; }
body:not(.sp-show-related-posts) .sp-related-section { display: none !important; }
body:not(.sp-show-post-nav) .sp-post-nav { display: none !important; }
body:not(.sp-show-post-tags) .sp-post-tags { display: none !important; }
body:not(.sp-show-featured-image) .sp-single-featured { display: none !important; }
body:not(.sp-show-share-buttons) .sp-share-buttons { display: none !important; }

/* Homepage — hide hero when disabled */
body:not(.sp-show-hero) .sp-hero-post { display: none !important; }
body:not(.sp-show-hero) .sp-hero { display: none !important; }
body:not(.sp-show-dont-miss) .sp-dont-miss-section { display: none !important; }

/* Breaking news — hide when disabled */
/* Breaking news visibility handled in section 7 */

/* Dark mode toggle — hide when disabled */
body:not(.has-dark-mode-toggle) .sp-dark-mode-toggle { display: none !important; }

/* Search icon — hide when disabled */
body:not(.sp-show-search-icon) .sp-header__actions > .sp-search-trigger { display: none !important; }

/* Footer widgets — hide when disabled */
body:not(.sp-show-footer-widgets) .sp-footer-widgets { display: none !important; }

/* Footer social icons — hide when disabled */
body:not(.sp-show-footer-social) .sp-footer__social { display: none !important; }

/* Load More button — hide when disabled */
body:not(.sp-show-load-more) .sp-load-more-btn { display: none !important; }

/* Breaking news — hide when not enabled */
body:not(.has-breaking-news) .sp-breaking-news { display: none !important; }

/* Archive toggles */
body.archive-hide-hero .sp-archive-hero { display: none !important; }
body.archive-hide-excerpt .sp-post-card__excerpt,
body.archive-hide-excerpt .sp-latest-item__excerpt { display: none !important; }
body.archive-hide-author .sp-post-card__meta .wp-block-post-author-name { display: none !important; }

/* Single hero alignment */
body.single-hero-align-center .sp-single-header { text-align: center; }
body.single-hero-align-center .sp-single-header .sp-breadcrumbs { justify-content: center; }
body.single-hero-align-center .sp-single-header .sp-single-meta { justify-content: center; }

/* Footer widget columns */
.sp-footer-widgets .wp-block-columns { grid-template-columns: repeat(var(--sp-footer-widget-cols, 4), 1fr); }

/* Mobile stories layout override */
@media (max-width: 768px) {
	body.mobile-stories-compact .sp-latest-item__image { display: none !important; }
	body.mobile-stories-compact .sp-latest-item__excerpt { display: none !important; }
	body.mobile-stories-grid .sp-latest-items { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
}

/* Header nav items — single line enforced in section 31 */

/* Widescreen single post (no sidebar) */
body.single-sidebar-none .sp-single-content,
body.single-sidebar-none .sp-single-header,
body.single-sidebar-none .sp-single-featured,
body.single-sidebar-none .sp-text-controls,
body.single-sidebar-none .sp-post-tags,
body.single-sidebar-none .sp-share-buttons,
body.single-sidebar-none .sp-author-bio,
body.single-sidebar-none .sp-post-nav {
	max-width: var(--sp-content-width);
}

/* Single post with sidebar */
body.single-sidebar-right .sp-single-container {
	display: grid;
	grid-template-columns: 1fr var(--sp-sidebar-width);
	gap: 2.5rem;
	max-width: var(--sp-container-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

body.single-sidebar-left .sp-single-container {
	display: grid;
	grid-template-columns: var(--sp-sidebar-width) 1fr;
	gap: 2.5rem;
	max-width: var(--sp-container-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

body.single-sidebar-right .sp-single-container .sp-single-main,
body.single-sidebar-left .sp-single-container .sp-single-main {
	min-width: 0;
}

body.single-sidebar-right .sp-single-container .sp-single-main .sp-single-header,
body.single-sidebar-right .sp-single-container .sp-single-main .sp-single-featured,
body.single-sidebar-right .sp-single-container .sp-single-main .sp-text-controls,
body.single-sidebar-right .sp-single-container .sp-single-main .sp-single-content,
body.single-sidebar-right .sp-single-container .sp-single-main .sp-post-tags,
body.single-sidebar-right .sp-single-container .sp-single-main .sp-share-buttons,
body.single-sidebar-right .sp-single-container .sp-single-main .sp-author-bio,
body.single-sidebar-right .sp-single-container .sp-single-main .sp-post-nav,
body.single-sidebar-left .sp-single-container .sp-single-main .sp-single-header,
body.single-sidebar-left .sp-single-container .sp-single-main .sp-single-featured,
body.single-sidebar-left .sp-single-container .sp-single-main .sp-text-controls,
body.single-sidebar-left .sp-single-container .sp-single-main .sp-single-content,
body.single-sidebar-left .sp-single-container .sp-single-main .sp-post-tags,
body.single-sidebar-left .sp-single-container .sp-single-main .sp-share-buttons,
body.single-sidebar-left .sp-single-container .sp-single-main .sp-author-bio,
body.single-sidebar-left .sp-single-container .sp-single-main .sp-post-nav {
	max-width: 100%;
}

@media (max-width: 1024px) {
	body.single-sidebar-right .sp-single-container,
	body.single-sidebar-left .sp-single-container {
		grid-template-columns: 1fr;
	}
}


/* ═══════════════════════════════════════════
   41. Template Class Completions
   Missing classes used in templates — ensures
   every class has at least a base rule.
   ═══════════════════════════════════════════ */

/* ── 404 Page ── */
.sp-404-wrap {
	max-width: var(--sp-container-width);
	margin: 0 auto;
	padding: 4rem 1.5rem;
	text-align: center;
}

.sp-404__code {
	font-family: var(--sp-font-heading);
	font-size: clamp(5rem, 15vw, 10rem);
	font-weight: 400;
	line-height: 1;
	color: var(--sp-border);
	margin: 0 0 1rem;
	letter-spacing: -0.04em;
}

.sp-404__desc {
	font-size: 1.125rem;
	color: var(--sp-muted);
	margin: 0 0 2rem;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

.sp-404__search {
	max-width: 480px;
	margin: 0 auto 3rem;
}

.sp-404__links {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 3rem;
}

.sp-404-posts {
	text-align: left;
	max-width: var(--sp-container-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sp-404-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
	margin-top: 1.5rem;
}

/* ── About Card ── */
.sp-about-card {
	background: var(--sp-bg);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-card);
	padding: 1.5rem;
}

/* ── Ad Label ── */
.sp-ad-label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sp-muted);
	text-align: center;
	margin-bottom: 0.25rem;
}

/* ── Archive ── */
.sp-archive-wrap {
	max-width: var(--sp-container-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sp-archive-content {
	flex: 1;
}

.sp-archive-grid__main {
	flex: 1;
	min-width: 0;
}

.sp-archive-hero__inner {
	padding: 2.5rem 1.5rem;
}

.sp-archive-query {
	margin: 0;
}

/* ── Breaking News Placeholder ── */
.sp-breaking-news__placeholder {
	height: var(--sp-breaking-height);
	background: var(--sp-dark);
}

/* ── Category Chip List ── */
.sp-category-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

/* ── Comments Section ── */
.sp-comments-section {
	max-width: var(--sp-content-width);
	margin: 3rem auto;
}

/* ── Don't Miss Query ── */
.sp-dont-miss-query {
	margin: 0;
}

/* ── Editors Picks ── */
.sp-editors-picks {
	margin-bottom: 1.5rem;
}

.sp-editors-picks-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sp-editors-picks-query {
	margin: 0;
}

/* ── Filter Categories ── */
.sp-filter-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.sp-filter-categories a {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.375rem 0.875rem;
	border-radius: var(--sp-radius-full);
	border: 1px solid var(--sp-border);
	color: var(--sp-muted);
	text-decoration: none;
	transition: var(--sp-transition);
}

.sp-filter-categories a:hover,
.sp-filter-categories a.is-active {
	border-color: var(--sp-accent);
	color: var(--sp-accent);
	background: var(--sp-accent-light);
}

/* ── Footer Brand ── */
.sp-footer-brand {
	margin-bottom: 1rem;
}

/* ── Footer Col ── */
.sp-footer-col {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* ── Footer Newsletter ── */
.sp-footer-newsletter-desc {
	font-size: 0.9375rem;
	color: var(--sp-muted);
	margin-bottom: 1rem;
}

/* ── Footer Social ── */
.sp-footer-social {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* ── Footer Widgets Inner ── */
.sp-footer-widgets__inner {
	display: grid;
	grid-template-columns: repeat(var(--sp-footer-cols, 4), 1fr);
	gap: 2rem;
	padding: 3rem 0;
}

/* ── Header Site Logo ── */
.sp-header__site-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.sp-header__site-logo img {
	max-width: var(--sp-logo-max-width);
	height: auto;
}

/* ── Homepage Grid Center ── */
.sp-homepage-grid__center {
	min-width: 0;
}

/* ── Latest Item Date ── */
.sp-latest-item__date {
	font-size: 0.8125rem;
	color: var(--sp-muted);
}

/* ── Latest Query ── */
.sp-latest-query {
	margin: 0;
}

/* ── Most Read ── */
.sp-most-read {
	margin-bottom: 1.5rem;
}

.sp-most-read-query {
	margin: 0;
}

/* ── Newsletter Card ── */
.sp-newsletter-card {
	background: var(--sp-surface);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-card);
	padding: 1.5rem;
}

/* ── No Results ── */
.sp-no-results {
	text-align: center;
	padding: 3rem 1.5rem;
	color: var(--sp-muted);
}

/* ── Page Templates ── */
.sp-page-header {
	padding: 2.5rem 0 1.5rem;
	border-bottom: 1px solid var(--sp-border);
	margin-bottom: 2rem;
}

.sp-page-header__title {
	font-family: var(--sp-font-heading);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 400;
	margin: 0;
}

.sp-page-content {
	font-size: var(--sp-font-size-body);
	line-height: var(--sp-line-height);
	max-width: var(--sp-content-width);
}

.sp-page-main {
	max-width: var(--sp-content-width);
	margin: 0 auto;
	padding: 2rem 0 3rem;
}

.sp-page-main--full {
	max-width: 100%;
	padding: 2rem 0 3rem;
}

.sp-page-with-sidebar {
	display: grid;
	grid-template-columns: 1fr var(--sp-sidebar-width);
	gap: 2.5rem;
	align-items: start;
}

.sp-page-with-sidebar__main {
	min-width: 0;
}

.sp-page-with-sidebar__sidebar {
	position: sticky;
	top: calc(var(--sp-header-height) + 1.5rem);
}

.sp-page-sidebar-main {
	min-width: 0;
}

/* ── Pick Item Content ── */
.sp-pick-item__content {
	flex: 1;
	min-width: 0;
}

/* ── Podcast Card ── */
.sp-podcast-card {
	background: var(--sp-surface);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-card);
	padding: 1.5rem;
}

/* ── Post Card Author & Date ── */
.sp-post-card__author {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	color: var(--sp-muted);
}

.sp-post-card__date {
	font-size: 0.8125rem;
	color: var(--sp-muted);
}

/* ── Search ── */
.sp-search-query {
	margin: 0;
}

.sp-search-refine {
	margin-bottom: 1.5rem;
}

/* ── Sidebar ── */
.sp-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sp-sidebar--left {
	order: -1;
}

.sp-sidebar--right {
	order: 1;
}

.sp-sidebar-ad {
	margin-bottom: 1.5rem;
}

/* ── Single Featured Image (alternate class) ── */
.sp-single-featured-image {
	max-width: var(--sp-content-width);
	margin: 0 auto 2rem;
}

.sp-single-featured-image img,
.sp-single-featured-image .wp-block-post-featured-image,
.sp-single-featured-image .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	border-radius: var(--sp-radius-card);
}

/* ── Tag Cloud ── */
.sp-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sp-tag-cloud a {
	display: inline-block;
	font-size: 0.8125rem;
	padding: 0.375rem 0.75rem;
	background: var(--sp-surface);
	border-radius: var(--sp-radius-full);
	color: var(--sp-muted);
	text-decoration: none;
	transition: var(--sp-transition);
}

.sp-tag-cloud a:hover {
	background: var(--sp-accent-light);
	color: var(--sp-accent);
}

/* ── Trending ── */
.sp-trending {
	margin-bottom: 1.5rem;
}

.sp-trending-item__content {
	flex: 1;
	min-width: 0;
}

.sp-trending-query {
	margin: 0;
}