/*
Theme Name: StoryWeave
Theme URI: https://bikramkaji.com.np/storyweave
Author: Bikram
Author URI: https://bikramkaji.com.np/
Description: A modern, literary blog theme designed for storytelling and long-form content. StoryWeave offers a warm, elegant aesthetic with advanced layout options, dark mode, and full Gutenberg compatibility.
Version: 1.0.5
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: storyweave
Tags: blog, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, threaded-comments, translation-ready, block-patterns, block-styles, wide-blocks, grid-layout
Requires at least: 5.0
Tested up to: 7.0
Requires PHP: 7.4
*/

/* ========== CSS Custom Properties (Global) ========== */
:root {
	/* Colour Palette — Warm & Literary */
	--sw-color-primary: #c0392b;
	--sw-color-primary-dark: #a93226;
	--sw-color-primary-light: #e74c3c;

	--sw-color-bg: #fcf8f2;
	--sw-color-bg-alt: #f5efe7;
	--sw-color-text: #2c2c2c;
	--sw-color-text-light: #555555;
	--sw-color-text-muted: #888888;
	--sw-color-border: #ddd8cf;

	--sw-color-card-bg: #ffffff;
	--sw-color-card-shadow: rgba(0, 0, 0, 0.06);
	--sw-color-card-hover-shadow: rgba(0, 0, 0, 0.12);

	--sw-color-header-bg: #ffffff;
	--sw-color-header-text: #2c2c2c;
	--sw-color-footer-bg: #2c2c2c;
	--sw-color-footer-text: #dcdcdc;

	--sw-color-link: var(--sw-color-primary);
	--sw-color-link-hover: var(--sw-color-primary-dark);

	/* Typography */
	--sw-font-body: 'Georgia', 'Times New Roman', serif;
	--sw-font-headings: 'Georgia', 'Times New Roman', serif;
	--sw-font-mono: 'Courier New', monospace;

	--sw-font-size-base: 1.125rem;
	--sw-font-size-small: 0.875rem;
	--sw-font-size-large: 1.25rem;
	--sw-line-height-body: 1.8;
	--sw-line-height-headings: 1.2;

	/* Spacing */
	--sw-spacing-xs: 0.5rem;
	--sw-spacing-sm: 1rem;
	--sw-spacing-md: 2rem;
	--sw-spacing-lg: 4rem;
	--sw-spacing-xl: 6rem;

	/* Layout */
	--sw-content-width: 820px;
	--sw-sidebar-width: 35%;
	--sw-main-width: 65%;

	/* Border Radius */
	--sw-radius-sm: 4px;
	--sw-radius-md: 8px;
	--sw-radius-lg: 16px;

	/* Transitions */
	--sw-transition: 0.25s ease-in-out;

	/* Grid */
	--sw-grid-gap: 2rem;
}

/* Editor color palette presets (used by block patterns and the block editor). */
.has-primary-color {
	color: #c0392b;
}
.has-primary-background-color {
	background-color: #c0392b;
}
.has-warm-cream-color {
	color: #f5efe7;
}
.has-warm-cream-background-color {
	background-color: #f5efe7;
}
.has-white-color {
	color: #ffffff;
}
.has-white-background-color {
	background-color: #ffffff;
}
.has-black-color {
	color: #000000;
}
.has-black-background-color {
	background-color: #000000;
}

/* The "Warm Cream" preset is a fixed light color that does not change with
   light/dark mode (see .dark-mode / .light-mode overrides above). Force a
   matching dark, mode-independent text color on it and its content so text
   stays readable in dark mode instead of inheriting the page's light text
   color. This also covers any copy of the CTA block pattern that was
   inserted into content before this fix, since it applies regardless of
   whether that instance's markup includes the inline color style. */
.has-warm-cream-background-color,
.has-warm-cream-background-color h1,
.has-warm-cream-background-color h2,
.has-warm-cream-background-color h3,
.has-warm-cream-background-color h4,
.has-warm-cream-background-color h5,
.has-warm-cream-background-color h6,
.has-warm-cream-background-color p {
	color: #2c2c2c;
}

/* Dark Mode Variables */
@media (prefers-color-scheme: dark) {
	:root:not(.light-mode) {
		--sw-color-bg: #1e1e1e;
		--sw-color-bg-alt: #2a2a2a;
		--sw-color-text: #e8e8e8;
		--sw-color-text-light: #c0c0c0;
		--sw-color-text-muted: #999999;
		--sw-color-border: #3a3a3a;
		--sw-color-card-bg: #2a2a2a;
		--sw-color-card-shadow: rgba(0, 0, 0, 0.3);
		--sw-color-card-hover-shadow: rgba(0, 0, 0, 0.5);
		--sw-color-header-bg: #252525;
		--sw-color-header-text: #e8e8e8;
		--sw-color-footer-bg: #111111;
		--sw-color-footer-text: #b0b0b0;
		--sw-color-link: #e67e22;
		--sw-color-link-hover: #f39c12;
	}
}

.dark-mode {
	--sw-color-bg: #1e1e1e;
	--sw-color-bg-alt: #2a2a2a;
	--sw-color-text: #e8e8e8;
	--sw-color-text-light: #c0c0c0;
	--sw-color-text-muted: #999999;
	--sw-color-border: #3a3a3a;
	--sw-color-card-bg: #2a2a2a;
	--sw-color-card-shadow: rgba(0, 0, 0, 0.3);
	--sw-color-card-hover-shadow: rgba(0, 0, 0, 0.5);
	--sw-color-header-bg: #252525;
	--sw-color-header-text: #e8e8e8;
	--sw-color-footer-bg: #111111;
	--sw-color-footer-text: #b0b0b0;
	--sw-color-link: #e67e22;
	--sw-color-link-hover: #f39c12;
}

.light-mode {
	--sw-color-bg: #fcf8f2;
	--sw-color-bg-alt: #f5efe7;
	--sw-color-text: #2c2c2c;
	--sw-color-text-light: #555555;
	--sw-color-text-muted: #888888;
	--sw-color-border: #ddd8cf;
	--sw-color-card-bg: #ffffff;
	--sw-color-card-shadow: rgba(0, 0, 0, 0.06);
	--sw-color-card-hover-shadow: rgba(0, 0, 0, 0.12);
	--sw-color-header-bg: #ffffff;
	--sw-color-header-text: #2c2c2c;
	--sw-color-footer-bg: #2c2c2c;
	--sw-color-footer-text: #dcdcdc;
	--sw-color-link: var(--sw-color-primary);
	--sw-color-link-hover: var(--sw-color-primary-dark);
}

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

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	background-color: var(--sw-color-bg);
	color: var(--sw-color-text);
	font-family: var(--sw-font-body);
	font-size: var(--sw-font-size-base);
	line-height: var(--sw-line-height-body);
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
	transition: background-color var(--sw-transition), color var(--sw-transition);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ========== Typography ========== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--sw-font-headings);
	font-weight: 700;
	line-height: var(--sw-line-height-headings);
	margin-top: 0;
	margin-bottom: var(--sw-spacing-sm);
	color: var(--sw-color-text);
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
	margin-top: 0;
	margin-bottom: var(--sw-spacing-sm);
}

a {
	color: var(--sw-color-link);
	text-decoration: none;
	transition: color var(--sw-transition), background var(--sw-transition);
}
a:hover,
a:focus {
	color: var(--sw-color-link-hover);
	text-decoration: underline;
}

/* Prevent oversized images (featured images, content images, embeds) from
   overflowing their container and causing horizontal scroll. */
img,
embed,
iframe,
object,
video {
	max-width: 100%;
	height: auto;
}

img {
	height: auto;
}

/* ========== Utilities ========== */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--sw-spacing-sm);
}

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

/* ========== Header ========== */
.site-header {
	background-color: var(--sw-color-header-bg);
	border-bottom: 1px solid var(--sw-color-border);
	padding: var(--sw-spacing-sm) 0;
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: background-color var(--sw-transition), border-color var(--sw-transition);
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

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

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--sw-spacing-xs);
}

.site-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
}
.site-title a {
	color: var(--sw-color-header-text);
	text-decoration: none;
}
.site-title a:hover {
	color: var(--sw-color-link);
	text-decoration: none;
}

.site-description {
	margin: 0;
	font-size: var(--sw-font-size-small);
	color: var(--sw-color-text-muted);
}

/* ========== Navigation ========== */
.main-navigation {
	display: flex;
	align-items: center;
	gap: var(--sw-spacing-sm);
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--sw-spacing-sm);
	flex-wrap: wrap;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	color: var(--sw-color-header-text);
	text-decoration: none;
	padding: var(--sw-spacing-xs) 0;
	font-size: var(--sw-font-size-base);
	transition: color var(--sw-transition);
	border-bottom: 2px solid transparent;
}

.main-navigation a:hover,
.main-navigation .current-menu-item a {
	color: var(--sw-color-link);
	border-bottom-color: var(--sw-color-link);
}

/* --- Sub‑menu (dropdown) styles --- */
.main-navigation ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--sw-color-header-bg);
	border: 1px solid var(--sw-color-border);
	border-radius: var(--sw-radius-sm);
	padding: var(--sw-spacing-xs) 0;
	min-width: 200px;
	box-shadow: 0 4px 16px var(--sw-color-card-shadow);
	z-index: 999;
}

.main-navigation ul ul ul {
	top: 0;
	left: 100%;
}

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

.main-navigation ul ul li {
	width: 100%;
	border-bottom: 1px solid var(--sw-color-border);
}

.main-navigation ul ul li:last-child {
	border-bottom: none;
}

.main-navigation ul ul a {
	padding: var(--sw-spacing-xs) var(--sw-spacing-sm);
	border-bottom: none;
	display: block;
}

.main-navigation ul ul a:hover {
	background: var(--sw-color-bg-alt);
	border-bottom-color: transparent;
}

.sub-menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--sw-color-header-text);
	padding: 0 4px;
	line-height: 1;
	font-size: 1rem;
}

.sub-menu-toggle .dashicons {
	font-size: 1.2rem;
}

.menu-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: var(--sw-color-header-text);
	padding: var(--sw-spacing-xs);
	line-height: 1;
}

.dark-mode-toggle {
	background: none;
	border: none;
	font-size: 1.25rem;
	cursor: pointer;
	color: var(--sw-color-header-text);
	padding: var(--sw-spacing-xs);
	line-height: 1;
	transition: transform var(--sw-transition);
}
.dark-mode-toggle:hover {
	transform: rotate(20deg);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--sw-spacing-xs);
}

.header-social,
.site-footer .footer-social {
	display: flex;
	align-items: center;
	gap: var(--sw-spacing-xs);
}

.header-social ul,
.site-footer .footer-social ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--sw-spacing-xs);
}

.header-social li,
.site-footer .footer-social li {
	display: inline-block;
}

.header-social a,
.site-footer .footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	background: var(--sw-color-bg-alt);
	color: var(--sw-color-text-light);
	font-size: 0;
	transition: background var(--sw-transition), color var(--sw-transition);
	text-decoration: none;
	line-height: 1;
}

.header-social a::before,
.site-footer .footer-social a::before {
	font-family: 'dashicons';
	font-size: 1.2rem;
	line-height: 1;
	color: inherit;
	display: inline-block;
	width: 1.2rem;
	text-align: center;
}

/* Map social networks to Dashicons */
.header-social a[href*="twitter.com"]::before,
.site-footer .footer-social a[href*="twitter.com"]::before {
	content: "\f301";
}
.header-social a[href*="facebook.com"]::before,
.site-footer .footer-social a[href*="facebook.com"]::before {
	content: "\f304";
}
.header-social a[href*="instagram.com"]::before,
.site-footer .footer-social a[href*="instagram.com"]::before {
	content: "\f12d"; /* dashicons-instagram */
}
.header-social a[href*="youtube.com"]::before,
.site-footer .footer-social a[href*="youtube.com"]::before {
	content: "\f126"; /* dashicons-format-video (no native YouTube icon in Dashicons) */
}
.header-social a[href*="linkedin.com"]::before,
.site-footer .footer-social a[href*="linkedin.com"]::before {
	content: "\f18d"; /* dashicons-linkedin */
}
.header-social a[href*="github.com"]::before,
.site-footer .footer-social a[href*="github.com"]::before {
	content: "\f475"; /* dashicons-editor-code (no native GitHub icon in Dashicons) */
}
.header-social a[href*="pinterest.com"]::before,
.site-footer .footer-social a[href*="pinterest.com"]::before {
	content: "\f128"; /* dashicons-format-image (no native Pinterest icon in Dashicons) */
}
.header-social a::before,
.site-footer .footer-social a::before {
	content: "\f504";
}

.header-social a:hover,
.site-footer .footer-social a:hover {
	background: var(--sw-color-link);
	color: #fff;
	text-decoration: none;
}

/* ========== Layout ========== */
.site-content {
	padding: var(--sw-spacing-md) 0;
}

.content-area {
	display: flex;
	gap: var(--sw-spacing-md);
	flex-wrap: wrap;
}

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

.sidebar {
	flex: 0 0 var(--sw-sidebar-width);
	max-width: var(--sw-sidebar-width);
}

.full-width .content-area {
	display: block;
}
.full-width .main-content {
	max-width: var(--sw-content-width);
	margin: 0 auto;
}
.full-width .sidebar {
	display: none;
}

/* ========== BLOG LAYOUTS ========== */

/* --- 1. Classic List --- */
.blog-layout-classic .post {
	margin-bottom: var(--sw-spacing-lg);
	padding-bottom: var(--sw-spacing-md);
	border-bottom: 1px solid var(--sw-color-border);
	transition: opacity var(--sw-transition);
}
.blog-layout-classic .post:last-child {
	border-bottom: none;
}
.blog-layout-classic .post:hover {
	opacity: 0.95;
}
.blog-layout-classic .entry-header {
	margin-bottom: var(--sw-spacing-sm);
}
.blog-layout-classic .entry-title {
	font-size: 2rem;
	letter-spacing: -0.02em;
	margin-bottom: var(--sw-spacing-xs);
}
.blog-layout-classic .entry-title a {
	color: var(--sw-color-text);
}
.blog-layout-classic .entry-title a:hover {
	color: var(--sw-color-link);
	text-decoration: none;
}
.blog-layout-classic .entry-meta {
	font-size: var(--sw-font-size-small);
	color: var(--sw-color-text-muted);
	display: flex;
	gap: var(--sw-spacing-xs);
	flex-wrap: wrap;
}
.blog-layout-classic .entry-meta a {
	color: var(--sw-color-text-muted);
}
.blog-layout-classic .entry-meta a:hover {
	color: var(--sw-color-link);
}
.blog-layout-classic .entry-summary {
	margin-top: var(--sw-spacing-xs);
	font-size: var(--sw-font-size-large);
	line-height: 1.7;
	color: var(--sw-color-text-light);
}
.blog-layout-classic .entry-summary p:last-child {
	margin-bottom: 0;
}
.blog-layout-classic .entry-footer {
	margin-top: var(--sw-spacing-sm);
	font-size: var(--sw-font-size-small);
	color: var(--sw-color-text-muted);
}
.blog-layout-classic .entry-footer .cat-links,
.blog-layout-classic .entry-footer .tags-links,
.blog-layout-classic .entry-footer .comments-link {
	margin-right: var(--sw-spacing-sm);
}
.blog-layout-classic .entry-footer a {
	color: var(--sw-color-text-muted);
}
.blog-layout-classic .entry-footer a:hover {
	color: var(--sw-color-link);
}
.blog-layout-classic .post-thumbnail {
	display: block;
	margin: var(--sw-spacing-sm) 0;
	border-radius: var(--sw-radius-md);
	overflow: hidden;
}
.blog-layout-classic .post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- 2. Grid Layout --- */
.blog-layout-grid .posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sw-grid-gap);
}

.blog-layout-grid .grid-item {
	background: var(--sw-color-card-bg);
	border: 1px solid var(--sw-color-border);
	border-radius: var(--sw-radius-sm);
	overflow: hidden;
	transition: background var(--sw-transition), transform var(--sw-transition), box-shadow var(--sw-transition);
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 8px var(--sw-color-card-shadow);
}

.blog-layout-grid .grid-item:hover {
	background: var(--sw-color-bg-alt);
	transform: translateY(-4px);
	box-shadow: 0 8px 24px var(--sw-color-card-hover-shadow);
}

.blog-layout-grid .grid-item .post-thumbnail {
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--sw-color-bg-alt);
}

.blog-layout-grid .grid-item .post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sw-transition);
}

.blog-layout-grid .grid-item:hover .post-thumbnail img {
	transform: scale(1.05);
}

.blog-layout-grid .grid-item .entry-header {
	padding: var(--sw-spacing-sm) var(--sw-spacing-sm) 0;
}

.blog-layout-grid .grid-item .entry-title {
	font-size: 1.2rem;
	margin-bottom: var(--sw-spacing-xs);
	line-height: 1.3;
}

.blog-layout-grid .grid-item .entry-title a {
	color: var(--sw-color-text);
	transition: color var(--sw-transition);
}

.blog-layout-grid .grid-item .entry-title a:hover {
	color: var(--sw-color-link);
	text-decoration: none;
}

.blog-layout-grid .grid-item .entry-meta {
	font-size: var(--sw-font-size-small);
	color: var(--sw-color-text-muted);
	margin-bottom: var(--sw-spacing-xs);
}

.blog-layout-grid .grid-item .entry-summary {
	padding: 0 var(--sw-spacing-sm);
	font-size: var(--sw-font-size-small);
	line-height: 1.6;
	color: var(--sw-color-text-light);
	flex: 1;
}

.blog-layout-grid .grid-item .entry-footer {
	padding: var(--sw-spacing-xs) var(--sw-spacing-sm);
	border-top: 1px solid var(--sw-color-border);
	font-size: var(--sw-font-size-small);
	color: var(--sw-color-text-muted);
	margin-top: auto;
}

@media (max-width: 992px) {
	.blog-layout-grid .posts-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sw-spacing-md);
	}
}

@media (max-width: 768px) {
	.blog-layout-grid .posts-grid {
		grid-template-columns: 1fr;
		gap: var(--sw-spacing-md);
	}

	.blog-layout-grid .grid-item .entry-title {
		font-size: 1.1rem;
	}
}

@media (max-width: 480px) {
	.blog-layout-grid .posts-grid {
		gap: var(--sw-spacing-sm);
	}

	.blog-layout-grid .grid-item .entry-header {
		padding: var(--sw-spacing-xs) var(--sw-spacing-xs) 0;
	}

	.blog-layout-grid .grid-item .entry-summary {
		padding: 0 var(--sw-spacing-xs);
	}

	.blog-layout-grid .grid-item .entry-footer {
		padding: var(--sw-spacing-xs);
	}
}

/* --- 3. Bento Layout --- */
.blog-layout-bento .bento-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(260px, auto);
	grid-auto-flow: dense;
	gap: var(--sw-grid-gap);
}

.blog-layout-bento .bento-item {
	background: var(--sw-color-card-bg);
	border-radius: var(--sw-radius-md);
	overflow: hidden;
	box-shadow: 0 8px 30px var(--sw-color-card-shadow);
	transition: transform var(--sw-transition), box-shadow var(--sw-transition);
	display: flex;
	flex-direction: column;
}

.blog-layout-bento .bento-item:hover {
	transform: translateY(-8px) scale(1.01);
	box-shadow: 0 16px 48px var(--sw-color-card-hover-shadow);
}

.blog-layout-bento .bento-featured {
	grid-column: span 2;
	grid-row: span 2;
}

.blog-layout-bento .bento-tall {
	grid-row: span 2;
}

.blog-layout-bento .bento-wide {
	grid-column: span 2;
}

.blog-layout-bento .bento-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--sw-spacing-sm);
}

.blog-layout-bento .bento-item .post-thumbnail {
	margin: calc(-1 * var(--sw-spacing-sm));
	margin-bottom: var(--sw-spacing-sm);
	border-radius: var(--sw-radius-md) var(--sw-radius-md) 0 0;
	overflow: hidden;
	aspect-ratio: 16/9;
	background: var(--sw-color-bg-alt);
}

.blog-layout-bento .bento-item .post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sw-transition);
}

.blog-layout-bento .bento-item:hover .post-thumbnail img {
	transform: scale(1.05);
}

.blog-layout-bento .bento-item .entry-title {
	font-size: 1.3rem;
	margin-bottom: var(--sw-spacing-xs);
}

.blog-layout-bento .bento-item .entry-title a {
	color: var(--sw-color-text);
	transition: color var(--sw-transition);
}

.blog-layout-bento .bento-item .entry-title a:hover {
	color: var(--sw-color-link);
	text-decoration: none;
}

.blog-layout-bento .bento-item .entry-meta {
	font-size: var(--sw-font-size-small);
	color: var(--sw-color-text-muted);
	margin-bottom: var(--sw-spacing-xs);
}

.blog-layout-bento .bento-item .entry-summary {
	font-size: var(--sw-font-size-base);
	line-height: 1.6;
	color: var(--sw-color-text-light);
	flex: 1;
	margin-bottom: var(--sw-spacing-sm);
}

.blog-layout-bento .bento-item .entry-footer {
	margin-top: auto;
	padding-top: var(--sw-spacing-xs);
	border-top: 2px solid var(--sw-color-link);
	font-size: var(--sw-font-size-small);
	color: var(--sw-color-text-muted);
}

.blog-layout-bento .bento-item .entry-footer a {
	color: var(--sw-color-text-muted);
	transition: color var(--sw-transition);
}

.blog-layout-bento .bento-item .entry-footer a:hover {
	color: var(--sw-color-link);
}

.blog-layout-bento .bento-featured .bento-inner {
	background: var(--sw-color-bg-alt);
	border-radius: 0 0 var(--sw-radius-md) var(--sw-radius-md);
}

@media (max-width: 992px) {
	.blog-layout-bento .bento-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.blog-layout-bento .bento-featured,
	.blog-layout-bento .bento-tall,
	.blog-layout-bento .bento-wide {
		grid-column: span 1;
		grid-row: span 1;
	}
}

@media (max-width: 768px) {
	.blog-layout-bento .bento-grid {
		grid-template-columns: 1fr;
		gap: var(--sw-spacing-md);
	}
}

/* --- 4. Story Timeline --- */
.blog-layout-timeline .posts-timeline {
	position: relative;
	padding-left: 100px;
}

.blog-layout-timeline .posts-timeline::before {
	content: '';
	position: absolute;
	left: 40px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--sw-color-border);
}

.blog-layout-timeline .timeline-item {
	position: relative;
	margin-bottom: var(--sw-spacing-lg);
	padding-left: 20px;
}

.blog-layout-timeline .timeline-marker {
	position: absolute;
	left: -80px;
	top: 4px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.blog-layout-timeline .timeline-date {
	font-family: var(--sw-font-headings);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--sw-color-primary);
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-align: right;
	min-width: 50px;
}
.blog-layout-timeline .timeline-date .month {
	display: block;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--sw-color-text-muted);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-top: 2px;
}

.blog-layout-timeline .timeline-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--sw-color-link);
	border: 2px solid var(--sw-color-bg);
	box-shadow: 0 0 0 2px var(--sw-color-border);
	flex-shrink: 0;
	transition: background var(--sw-transition), transform var(--sw-transition), box-shadow var(--sw-transition);
}

.blog-layout-timeline .timeline-item:hover .timeline-dot {
	background: var(--sw-color-link-hover);
	transform: scale(1.3);
	box-shadow: 0 0 0 4px var(--sw-color-border);
}

.blog-layout-timeline .timeline-content-wrapper {
	background: var(--sw-color-card-bg);
	padding: var(--sw-spacing-sm);
	border-radius: var(--sw-radius-sm);
	border-left: 4px solid var(--sw-color-link);
	transition: transform var(--sw-transition), box-shadow var(--sw-transition);
}

.blog-layout-timeline .timeline-item:hover .timeline-content-wrapper {
	transform: translateX(6px);
	box-shadow: 0 4px 16px var(--sw-color-card-shadow);
}

.blog-layout-timeline .timeline-content-wrapper .post-thumbnail {
	margin: calc(-1 * var(--sw-spacing-sm));
	margin-bottom: var(--sw-spacing-sm);
	margin-left: calc(-1 * var(--sw-spacing-sm) - 4px);
	border-radius: var(--sw-radius-sm) var(--sw-radius-sm) 0 0;
	overflow: hidden;
}
.blog-layout-timeline .timeline-content-wrapper .post-thumbnail img {
	width: 100%;
	height: auto;
	transition: transform var(--sw-transition);
}
.blog-layout-timeline .timeline-item:hover .post-thumbnail img {
	transform: scale(1.01);
}

.blog-layout-timeline .entry-title {
	font-size: 1.4rem;
	margin-bottom: var(--sw-spacing-xs);
}
.blog-layout-timeline .entry-title a {
	color: var(--sw-color-text);
}
.blog-layout-timeline .entry-title a:hover {
	color: var(--sw-color-link);
	text-decoration: none;
}

.blog-layout-timeline .entry-meta {
	font-size: var(--sw-font-size-small);
	color: var(--sw-color-text-muted);
	margin-bottom: var(--sw-spacing-xs);
}

.blog-layout-timeline .entry-summary {
	font-size: var(--sw-font-size-base);
	line-height: 1.7;
	color: var(--sw-color-text-light);
}

.blog-layout-timeline .entry-footer {
	margin-top: var(--sw-spacing-sm);
	padding-top: var(--sw-spacing-xs);
	border-top: 1px solid var(--sw-color-border);
	font-size: var(--sw-font-size-small);
	color: var(--sw-color-text-muted);
}
.blog-layout-timeline .entry-footer a {
	color: var(--sw-color-text-muted);
}
.blog-layout-timeline .entry-footer a:hover {
	color: var(--sw-color-link);
}

@media (max-width: 768px) {
	.blog-layout-timeline .posts-timeline {
		padding-left: 60px;
	}
	.blog-layout-timeline .posts-timeline::before {
		left: 20px;
	}
	.blog-layout-timeline .timeline-marker {
		left: -40px;
		gap: 10px;
	}
	.blog-layout-timeline .timeline-date {
		font-size: 1.2rem;
		min-width: 35px;
	}
	.blog-layout-timeline .timeline-dot {
		width: 10px;
		height: 10px;
	}
	.blog-layout-timeline .entry-title {
		font-size: 1.2rem;
	}
}

@media (max-width: 480px) {
	.blog-layout-timeline .posts-timeline {
		padding-left: 40px;
	}
	.blog-layout-timeline .posts-timeline::before {
		left: 12px;
	}
	.blog-layout-timeline .timeline-marker {
		left: -25px;
		gap: 6px;
	}
	.blog-layout-timeline .timeline-date {
		display: none;
	}
	.blog-layout-timeline .timeline-dot {
		width: 8px;
		height: 8px;
	}
	.blog-layout-timeline .timeline-content-wrapper {
		padding: var(--sw-spacing-xs);
	}
}

/* --- 5. Chapter --- */
.blog-layout-chapter .post {
	position: relative;
	padding: var(--sw-spacing-md) var(--sw-spacing-sm);
	background: var(--sw-color-card-bg);
	border-radius: var(--sw-radius-md);
	box-shadow: 0 4px 20px var(--sw-color-card-shadow);
	margin-bottom: var(--sw-spacing-lg);
	transition: transform var(--sw-transition), box-shadow var(--sw-transition);
}
.blog-layout-chapter .post:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px var(--sw-color-card-hover-shadow);
}
.blog-layout-chapter .post .chapter-number {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--sw-color-primary);
	letter-spacing: 0.05em;
	margin-bottom: var(--sw-spacing-xs);
	position: relative;
	padding-bottom: var(--sw-spacing-xs);
}
.blog-layout-chapter .post .chapter-number::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 3px;
	background: var(--sw-color-primary);
	border-radius: 2px;
}
.blog-layout-chapter .post .post-thumbnail {
	margin: var(--sw-spacing-sm) 0;
	border-radius: var(--sw-radius-sm);
	overflow: hidden;
}
.blog-layout-chapter .post .post-thumbnail img {
	width: 100%;
	height: auto;
	transition: transform var(--sw-transition);
}
.blog-layout-chapter .post:hover .post-thumbnail img {
	transform: scale(1.02);
}
.blog-layout-chapter .post .entry-title {
	font-size: 1.8rem;
	margin-top: var(--sw-spacing-xs);
}
.blog-layout-chapter .post .entry-title a {
	color: var(--sw-color-text);
}
.blog-layout-chapter .post .entry-title a:hover {
	color: var(--sw-color-link);
	text-decoration: none;
}
.blog-layout-chapter .post .entry-meta {
	font-size: var(--sw-font-size-small);
	color: var(--sw-color-text-muted);
	margin-bottom: var(--sw-spacing-xs);
}
.blog-layout-chapter .post .entry-summary {
	font-size: var(--sw-font-size-base);
	line-height: 1.8;
	color: var(--sw-color-text-light);
}
.blog-layout-chapter .post .entry-footer {
	margin-top: var(--sw-spacing-sm);
	padding-top: var(--sw-spacing-xs);
	border-top: 1px solid var(--sw-color-border);
	font-size: var(--sw-font-size-small);
	color: var(--sw-color-text-muted);
}
.blog-layout-chapter .post .entry-footer a {
	color: var(--sw-color-text-muted);
}
.blog-layout-chapter .post .entry-footer a:hover {
	color: var(--sw-color-link);
}

@media (max-width: 768px) {
	.blog-layout-chapter .post .chapter-number {
		font-size: 1.4rem;
	}
	.blog-layout-chapter .post .entry-title {
		font-size: 1.5rem;
	}
}
@media (max-width: 480px) {
	.blog-layout-chapter .post {
		padding: var(--sw-spacing-sm);
	}
	.blog-layout-chapter .post .chapter-number {
		font-size: 1.2rem;
	}
	.blog-layout-chapter .post .entry-title {
		font-size: 1.3rem;
	}
}

/* ========== Single Post ========== */
.single-post .entry-header {
	margin-bottom: var(--sw-spacing-md);
}
.single-post .entry-title {
	font-size: 3rem;
	letter-spacing: -0.02em;
	margin-bottom: var(--sw-spacing-sm);
}
.single-post .entry-meta {
	font-size: var(--sw-font-size-small);
	color: var(--sw-color-text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sw-spacing-xs);
}
.single-post .post-thumbnail,
.page .post-thumbnail {
	display: block;
	max-width: var(--sw-content-width);
	margin: var(--sw-spacing-md) auto;
	border-radius: var(--sw-radius-md);
	overflow: hidden;
}
.single-post .post-thumbnail img,
.page .post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}
.single-post .entry-content {
	font-size: var(--sw-font-size-large);
	line-height: 1.9;
	max-width: var(--sw-content-width);
	margin: 0 auto;
}
.single-post .entry-content p {
	margin-bottom: var(--sw-spacing-md);
}
.single-post .entry-content h2,
.single-post .entry-content h3 {
	margin-top: var(--sw-spacing-md);
}
.single-post .entry-content blockquote {
	border-left: 4px solid var(--sw-color-link);
	padding-left: var(--sw-spacing-sm);
	margin-left: 0;
	margin-right: 0;
	font-style: italic;
	color: var(--sw-color-text-light);
	background: var(--sw-color-bg-alt);
	padding: var(--sw-spacing-sm);
	border-radius: var(--sw-radius-sm);
}
.single-post .entry-content .wp-block-image {
	margin: var(--sw-spacing-md) 0;
}
.single-post .entry-footer {
	margin-top: var(--sw-spacing-lg);
	padding-top: var(--sw-spacing-sm);
	border-top: 1px solid var(--sw-color-border);
}
.single-post .post-navigation {
	margin-top: var(--sw-spacing-lg);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sw-spacing-sm);
}
.single-post .post-navigation .nav-previous,
.single-post .post-navigation .nav-next {
	flex: 1 0 auto;
}
.single-post .post-navigation a {
	display: inline-block;
	padding: var(--sw-spacing-xs) var(--sw-spacing-sm);
	background: var(--sw-color-card-bg);
	border-radius: var(--sw-radius-sm);
	box-shadow: 0 2px 6px var(--sw-color-card-shadow);
	transition: background var(--sw-transition), color var(--sw-transition);
}
.single-post .post-navigation a:hover {
	background: var(--sw-color-link);
	color: #fff;
	text-decoration: none;
}

/* ========== Page Header / Empty States (404, no search results, archives) ========== */
/* These share the .page-header/.page-title/.page-content markup used by
   404.php, content-none.php, archive.php and search.php, and previously had
   no dedicated spacing, unlike the rest of the site's content areas. */
.page-header {
	max-width: var(--sw-content-width);
	margin: var(--sw-spacing-lg) auto var(--sw-spacing-md);
	padding: 0 var(--sw-spacing-sm);
	text-align: center;
}
.page-header .page-title {
	margin-bottom: var(--sw-spacing-xs);
}
.page-header .archive-description {
	color: var(--sw-color-text-light);
	font-size: var(--sw-font-size-large);
}
.page-content,
.no-results .page-content,
.error-404 .page-content {
	max-width: var(--sw-content-width);
	margin: 0 auto var(--sw-spacing-lg);
	padding: 0 var(--sw-spacing-sm);
	font-size: var(--sw-font-size-large);
	line-height: 1.8;
}
.page-content .search-form {
	margin: var(--sw-spacing-sm) 0 var(--sw-spacing-md);
}
.search-form {
	display: flex;
	max-width: 480px;
}
.search-form .search-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--sw-spacing-xs) var(--sw-spacing-sm);
	border: 1px solid var(--sw-color-border);
	border-right: none;
	border-radius: var(--sw-radius-sm) 0 0 var(--sw-radius-sm);
	background: var(--sw-color-bg);
	color: var(--sw-color-text);
	font-size: var(--sw-font-size-base);
}
.search-form .search-field:focus {
	outline: 2px solid var(--sw-color-link);
	outline-offset: -2px;
}
.search-form .search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--sw-spacing-sm);
	border: 1px solid var(--sw-color-link);
	border-radius: 0 var(--sw-radius-sm) var(--sw-radius-sm) 0;
	background: var(--sw-color-link);
	color: #fff;
	cursor: pointer;
	transition: background var(--sw-transition), border-color var(--sw-transition);
}
.search-form .search-submit:hover {
	background: var(--sw-color-link-hover);
	border-color: var(--sw-color-link-hover);
}
.search-form .search-submit .dashicons {
	font-size: 1.1rem;
	width: 1.1rem;
	height: 1.1rem;
}

/* ========== Comments ========== */
.comments-area {
	max-width: var(--sw-content-width);
	margin: var(--sw-spacing-lg) auto;
}
.comments-title {
	font-size: 1.8rem;
}
.comment-list {
	list-style: none;
	padding: 0;
}
.comment-list .comment {
	background: var(--sw-color-card-bg);
	padding: var(--sw-spacing-sm);
	margin-bottom: var(--sw-spacing-sm);
	border-radius: var(--sw-radius-sm);
	box-shadow: 0 2px 6px var(--sw-color-card-shadow);
}
.comment-meta {
	font-size: var(--sw-font-size-small);
	color: var(--sw-color-text-muted);
}
.comment-content {
	margin-top: var(--sw-spacing-xs);
}
.comment-respond {
	margin-top: var(--sw-spacing-md);
}
.comment-respond label {
	display: block;
	margin-bottom: var(--sw-spacing-xs);
}
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	width: 100%;
	padding: var(--sw-spacing-xs);
	border: 1px solid var(--sw-color-border);
	border-radius: var(--sw-radius-sm);
	background: var(--sw-color-bg);
	color: var(--sw-color-text);
}
.comment-respond .submit {
	background: var(--sw-color-link);
	color: #fff;
	border: none;
	padding: var(--sw-spacing-xs) var(--sw-spacing-md);
	border-radius: var(--sw-radius-sm);
	cursor: pointer;
	transition: background var(--sw-transition);
}
.comment-respond .submit:hover {
	background: var(--sw-color-link-hover);
}

/* ========== Sidebar Widgets ========== */
/* Also applies to widgets rendered in .page-content (e.g. the 404 template's
   Recent Posts / Categories / Archives / Tag Cloud widgets), so they get the
   same card treatment instead of rendering as unstyled default lists. */
.sidebar .widget,
.page-content .widget {
	background: var(--sw-color-card-bg);
	padding: var(--sw-spacing-sm);
	margin-bottom: var(--sw-spacing-md);
	border-radius: var(--sw-radius-sm);
	box-shadow: 0 2px 6px var(--sw-color-card-shadow);
}
.sidebar .widget-title,
.page-content .widget-title {
	font-size: 1.2rem;
	border-bottom: 2px solid var(--sw-color-link);
	padding-bottom: var(--sw-spacing-xs);
	margin-bottom: var(--sw-spacing-sm);
}
.sidebar .widget ul,
.page-content .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sidebar .widget li,
.page-content .widget li {
	margin-bottom: var(--sw-spacing-xs);
}

/* WP core's tag cloud widget sets only an inline font-size per tag with no
   other styling, so left alone it renders as plain, wildly-varying-size
   text. Give it consistent pill styling instead. */
.tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sw-spacing-xs);
}
.tagcloud a {
	display: inline-block;
	background: var(--sw-color-bg);
	border: 1px solid var(--sw-color-border);
	border-radius: 999px;
	padding: 4px 12px;
	color: var(--sw-color-text-muted);
	text-decoration: none;
	line-height: 1.6;
	/* WP core sets a per-tag font-size via an inline style attribute based on
	   tag usage count; only !important can override an inline style, and a
	   uniform size is what makes these read as consistent pills rather than
	   a chaotic mix of type sizes. */
	font-size: 0.85rem !important;
	transition: background var(--sw-transition), color var(--sw-transition), border-color var(--sw-transition);
}
.tagcloud a:hover {
	background: var(--sw-color-link);
	border-color: var(--sw-color-link);
	color: #fff;
}

/* ========== Footer ========== */
.site-footer {
	background: var(--sw-color-footer-bg);
	color: var(--sw-color-footer-text);
	padding: var(--sw-spacing-md) 0;
	margin-top: var(--sw-spacing-lg);
	transition: background var(--sw-transition), color var(--sw-transition);
}
.site-footer a {
	color: var(--sw-color-footer-text);
}
.site-footer a:hover {
	color: var(--sw-color-link);
	text-decoration: underline;
}
/* The global h1-h6 rule forces the page's body text color, which is not
   guaranteed to contrast with the footer's own background (in light mode
   the two happen to be nearly identical, making footer widget titles all
   but invisible). Force the correct footer text color on any heading that
   ends up inside the footer instead. */
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
	color: var(--sw-color-footer-text);
}
/* Each registered footer area (footer-1/2/3) is now wrapped in its own
   .footer-widget-area div in footer.php, so a grid column always represents
   one whole area - multiple widgets placed in the same area stack normally
   within their own column instead of being spread across columns as if
   they were separate areas. auto-fit now only ever has to size at most 3
   predictable items (not an arbitrary number of individual widgets), so a
   partially-used footer (e.g. only footer-1 filled in) fills the available
   width instead of leaving empty column tracks the way a hardcoded
   repeat(3, 1fr) would. */
.footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sw-spacing-md);
	margin-bottom: var(--sw-spacing-md);
	align-items: start;
}
.footer-widget-area {
	min-width: 0;
	overflow-wrap: break-word;
}
.footer-widget-area .widget {
	margin-bottom: var(--sw-spacing-sm);
}
.footer-widget-area .widget:last-child {
	margin-bottom: 0;
}
.footer-widgets .widget-title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var(--sw-spacing-sm);
}
.footer-widgets .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-widgets .widget li {
	margin-bottom: var(--sw-spacing-xs);
}
.footer-widgets .widget p {
	margin-bottom: var(--sw-spacing-xs);
}
@media (max-width: 768px) {
	.footer-widgets {
		grid-template-columns: 1fr;
	}
}
.footer-social {
	display: flex;
	gap: var(--sw-spacing-sm);
	justify-content: center;
	margin-top: var(--sw-spacing-sm);
}
.site-footer .site-info {
	text-align: center;
	font-size: var(--sw-font-size-small);
	border-top: 1px solid rgba(255,255,255,0.1);
	padding-top: var(--sw-spacing-sm);
	margin-top: var(--sw-spacing-sm);
}

/* ========== Pagination (Posts Nav) ========== */
.pagination {
	margin: var(--sw-spacing-lg) 0;
	text-align: center;
	font-family: var(--sw-font-headings);
}

.pagination .page-numbers {
	display: inline-block;
	padding: var(--sw-spacing-xs) var(--sw-spacing-sm);
	margin: 0 3px;
	background: var(--sw-color-card-bg);
	color: var(--sw-color-text);
	border: 1px solid var(--sw-color-border);
	border-radius: var(--sw-radius-sm);
	line-height: 1;
	transition: background var(--sw-transition), color var(--sw-transition), border-color var(--sw-transition);
	text-decoration: none;
	font-size: var(--sw-font-size-base);
}

.pagination .page-numbers:hover {
	background: var(--sw-color-link);
	color: #fff;
	border-color: var(--sw-color-link);
	text-decoration: none;
}

.pagination .current {
	background: var(--sw-color-link);
	color: #fff;
	border-color: var(--sw-color-link);
	font-weight: 700;
}

.pagination .dots {
	background: transparent;
	border: none;
	color: var(--sw-color-text-muted);
}

.pagination .prev,
.pagination .next {
	padding: var(--sw-spacing-xs) var(--sw-spacing-sm);
}

/* ========== Post Meta Enhancements ========== */
.entry-meta {
	font-size: var(--sw-font-size-small);
	color: var(--sw-color-text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sw-spacing-xs);
	align-items: baseline;
}

.entry-meta .posted-on,
.entry-meta .byline,
.entry-meta .cat-links,
.entry-meta .tags-links,
.entry-meta .comments-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.entry-meta .posted-on::before {
	content: "\f145"; /* dashicons-calendar */
	font-family: 'dashicons';
	font-size: 1rem;
	opacity: 0.6;
}

.entry-meta .byline::before {
	content: "\f110"; /* dashicons-admin-users */
	font-family: 'dashicons';
	font-size: 1rem;
	opacity: 0.6;
}

.entry-meta .cat-links::before {
	content: "\f318"; /* dashicons-category */
	font-family: 'dashicons';
	font-size: 1rem;
	opacity: 0.6;
}

.entry-meta .tags-links::before {
	content: "\f323"; /* dashicons-tag */
	font-family: 'dashicons';
	font-size: 1rem;
	opacity: 0.6;
}

.entry-meta .comments-link::before {
	content: "\f101"; /* dashicons-admin-comments */
	font-family: 'dashicons';
	font-size: 1rem;
	opacity: 0.6;
}

.entry-meta a {
	color: var(--sw-color-text-muted);
	text-decoration: none;
	transition: color var(--sw-transition);
}
.entry-meta a:hover {
	color: var(--sw-color-link);
	text-decoration: underline;
}

/* Edit link */
.entry-footer .edit-link {
	display: inline-block;
	margin-left: var(--sw-spacing-sm);
}

.entry-footer .edit-link a {
	background: var(--sw-color-bg-alt);
	padding: 3px var(--sw-spacing-xs);
	border-radius: var(--sw-radius-sm);
	color: var(--sw-color-text-light);
	font-size: var(--sw-font-size-small);
	text-decoration: none;
	transition: background var(--sw-transition), color var(--sw-transition);
}
.entry-footer .edit-link a:hover {
	background: var(--sw-color-link);
	color: #fff;
	text-decoration: none;
}

/* ========== Responsive ========== */
@media (max-width: 992px) {
	.sidebar {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.content-area {
		flex-direction: column;
	}
	.blog-layout-bento .posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.site-header .container {
		flex-wrap: wrap;
	}
	.main-navigation {
		order: 2;
		flex-basis: 100%;
	}
	.menu-toggle {
		display: block;
		order: 2;
	}
	.main-navigation ul {
		display: none;
		flex-direction: column;
		width: 100%;
		gap: 0;
	}
	.main-navigation ul.toggled {
		display: flex;
	}
	.main-navigation li {
		border-bottom: 1px solid var(--sw-color-border);
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.main-navigation li a {
		flex: 1;
		padding: var(--sw-spacing-xs) 0;
	}
	.main-navigation ul ul {
		position: static;
		box-shadow: none;
		border: none;
		border-left: 3px solid var(--sw-color-link);
		padding-left: var(--sw-spacing-sm);
		margin-left: var(--sw-spacing-sm);
		background: transparent;
		display: none;
		width: 100%;
	}
	.main-navigation ul ul.toggled {
		display: block;
	}
	.main-navigation ul ul a {
		padding-left: var(--sw-spacing-sm);
	}
	.main-navigation ul ul ul {
		left: 0;
	}
	.sub-menu-toggle {
		display: inline-block;
	}
	.header-social {
		order: 1;
	}
	.dark-mode-toggle {
		order: 2;
	}
	.site-title {
		font-size: 1.2rem;
	}
	.blog-layout-grid .posts-grid {
		grid-template-columns: 1fr;
	}
	.blog-layout-bento .posts-grid {
		grid-template-columns: 1fr;
	}
	.single-post .entry-title {
		font-size: 2.2rem;
	}
	.single-post .entry-content {
		font-size: var(--sw-font-size-base);
	}
	.blog-layout-timeline .posts-timeline {
		padding-left: 20px;
	}
	.blog-layout-timeline .post::before {
		left: -26px;
		width: 12px;
		height: 12px;
	}
}

@media (max-width: 480px) {
	:root {
		--sw-spacing-md: 1.5rem;
		--sw-spacing-lg: 2rem;
	}
	.site-header {
		padding: var(--sw-spacing-xs) 0;
	}
	.container {
		padding: 0 var(--sw-spacing-xs);
	}
	.blog-layout-chapter .post .entry-header {
		flex-direction: column;
		align-items: flex-start;
	}
	.blog-layout-chapter .post .entry-title {
		font-size: 1.6rem;
	}
	.blog-layout-classic .entry-title {
		font-size: 1.6rem;
	}
}

@media (min-width: 769px) {
	.main-navigation ul ul {
		display: none;
	}
	.main-navigation ul li:hover > ul {
		display: block;
	}
	.sub-menu-toggle {
		display: none !important;
	}
}

/* ========== Gutenberg Block Styles ========== */
.wp-block-image img {
	max-width: 100%;
	height: auto;
}
.wp-block-gallery {
	margin: var(--sw-spacing-md) 0;
}
.wp-block-quote {
	border-left: 4px solid var(--sw-color-link);
	padding-left: var(--sw-spacing-sm);
}
.wp-block-pullquote {
	border-top: 3px solid var(--sw-color-link);
	border-bottom: 3px solid var(--sw-color-link);
	padding: var(--sw-spacing-sm) 0;
}
.wp-block-pullquote blockquote {
	border-left: none;
}
.wp-block-button .wp-block-button__link {
	background: var(--sw-color-link);
	color: #fff;
	border-radius: var(--sw-radius-sm);
	padding: var(--sw-spacing-xs) var(--sw-spacing-sm);
}
.wp-block-button .wp-block-button__link:hover {
	background: var(--sw-color-link-hover);
}
.wp-block-separator {
	border-bottom: 2px solid var(--sw-color-border);
	margin: var(--sw-spacing-md) 0;
}
.wp-block-separator.is-style-dots {
	background: none;
	border: none;
	text-align: center;
}
.wp-block-separator.is-style-dots::before {
	content: "...";
	color: var(--sw-color-text-muted);
}
.wp-block-cover {
	color: #fff;
}
.wp-block-cover p {
	color: #fff;
}

/* ========== Accessibility ========== */
a:focus,
button:focus,
input:focus,
textarea:focus {
	outline: 2px solid var(--sw-color-link);
	outline-offset: 2px;
}
.skip-link {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}
.skip-link:focus {
	background-color: #c0392b;
	border-radius: 0 0 var(--sw-radius-sm) 0;
	clip: auto;
	clip-path: none;
	color: #fff;
	display: block;
	font-weight: 700;
	height: auto;
	left: 0;
	line-height: normal;
	padding: var(--sw-spacing-xs) var(--sw-spacing-sm);
	position: fixed;
	text-decoration: none;
	top: 0;
	width: auto;
	z-index: 100000;
}

/* ========== WordPress Core CSS Classes ========== */

/* --- Captions --- */
.wp-caption {
	max-width: 100%;
	background: var(--sw-color-bg-alt);
	padding: var(--sw-spacing-xs);
	border-radius: var(--sw-radius-sm);
	border: 1px solid var(--sw-color-border);
	margin-bottom: var(--sw-spacing-md);
	text-align: center;
}

.wp-caption img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.wp-caption-text {
	margin: var(--sw-spacing-xs) 0 0;
	font-size: var(--sw-font-size-small);
	color: var(--sw-color-text-muted);
	font-style: italic;
	text-align: center;
	padding: 0 var(--sw-spacing-xs);
}

/* --- Gallery Captions --- */
.gallery-caption {
	font-size: var(--sw-font-size-small);
	color: var(--sw-color-text-muted);
	font-style: italic;
	margin-top: var(--sw-spacing-xs);
	padding: 0 var(--sw-spacing-xs);
}

/* --- Sticky Posts --- */
.sticky {
	position: relative;
}

.sticky .entry-header::before {
	content: "📌 Featured";
	display: inline-block;
	background: var(--sw-color-link);
	color: #fff;
	font-size: var(--sw-font-size-small);
	font-weight: 600;
	padding: 2px 12px;
	border-radius: 20px;
	margin-bottom: var(--sw-spacing-xs);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* --- By Post Author (Comment author) --- */
.bypostauthor {
	background: var(--sw-color-bg-alt);
	border-radius: var(--sw-radius-sm);
	padding: var(--sw-spacing-xs);
	border-left: 3px solid var(--sw-color-link);
}

.bypostauthor .comment-meta {
	font-weight: 600;
}

.bypostauthor .comment-meta::after {
	content: " (Author)";
	font-weight: 400;
	color: var(--sw-color-link);
	font-size: var(--sw-font-size-small);
}

/* --- Alignment Classes --- */
.alignleft {
	display: block;
	float: left;
	margin-right: var(--sw-spacing-md);
	margin-bottom: var(--sw-spacing-sm);
}

.alignright {
	display: block;
	float: right;
	margin-left: var(--sw-spacing-md);
	margin-bottom: var(--sw-spacing-sm);
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--sw-spacing-sm);
	text-align: center;
}

/* --- Responsive Alignment --- */
@media (max-width: 768px) {
	.alignleft,
	.alignright {
		float: none;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: var(--sw-spacing-sm);
	}

	.alignleft img,
	.alignright img {
		max-width: 100%;
	}
}

/* ================= MOBILE MENU ================= */

@media (max-width: 768px) {
	/* --- Header container --- */
	.site-header .container {
		flex-wrap: wrap;
		gap: 6px;
		padding: 0 16px;
	}

	.site-branding {
		flex: 1 1 auto;
		max-width: 65%;
	}

	.site-title {
		font-size: 1.3rem;
		letter-spacing: -0.02em;
	}

	.header-actions {
		display: flex;
		align-items: center;
		gap: 8px;
		order: 4;
	}

	/* --- Elegant Hamburger Button --- */
	.menu-toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 1px solid var(--sw-color-border);
		border-radius: 30px;
		padding: 6px 14px;
		cursor: pointer;
		color: var(--sw-color-header-text);
		font-size: 1.2rem;
		line-height: 1;
		transition: all 0.3s ease;
		order: 3;
		margin-left: auto;
		min-height: 44px;
		min-width: 44px;
		background: var(--sw-color-card-bg);
		box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	}

	.menu-toggle:hover {
		background: var(--sw-color-bg-alt);
		border-color: var(--sw-color-link);
		color: var(--sw-color-link);
		box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	}

	.menu-toggle .dashicons {
		font-size: 1.4rem;
		width: 1.4rem;
		height: 1.4rem;
		transition: transform 0.3s ease;
	}

	.menu-toggle.open .dashicons {
		transform: rotate(90deg);
	}

	/* --- Main navigation container --- */
	.main-navigation {
		order: 2;
		flex-basis: 100%;
		width: 100%;
		margin-top: 12px;
	}

	/* --- Menu wrapper – soft card --- */
	.main-navigation ul {
		display: none;
		flex-direction: column;
		width: 100%;
		margin: 0;
		padding: 12px 0;
		list-style: none;
		background: var(--sw-color-card-bg);
		border: 1px solid var(--sw-color-border);
		border-radius: 12px;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.main-navigation ul.toggled {
		display: flex;
		animation: swSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	}

	@keyframes swSlideDown {
		from {
			opacity: 0;
			transform: translateY(-12px) scale(0.98);
		}
		to {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}

	/* --- Menu items – with refined separators --- */
	.main-navigation li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 0 16px;
		margin: 0;
		border-bottom: 1px solid var(--sw-color-border);
		position: relative;
		transition: background 0.2s ease;
	}

	.main-navigation li:last-child {
		border-bottom: none;
	}

	.main-navigation li:hover {
		background: var(--sw-color-bg-alt);
	}

	/* --- Menu links – serif, warm --- */
	.main-navigation li a {
		flex: 1;
		padding: 14px 0;
		border-bottom: none;
		font-family: var(--sw-font-body);
		font-size: 1.05rem;
		color: var(--sw-color-text);
		font-weight: 500;
		text-decoration: none;
		transition: color 0.2s ease, padding 0.2s ease;
		letter-spacing: 0.01em;
	}

	.main-navigation li a:hover,
	.main-navigation .current-menu-item > a {
		color: var(--sw-color-link);
	}

	.main-navigation .current-menu-item > a {
		font-weight: 600;
	}

	/* --- Parent item indicator – subtle --- */
	.main-navigation li.menu-item-has-children > a {
		font-weight: 600;
		letter-spacing: 0.02em;
	}

	/* --- Sub‑menus – with a literary left border --- */
	.main-navigation ul ul {
		display: none;
		width: 100%;
		padding: 0 0 0 20px;
		margin: 0;
		background: transparent;
		border: none;
		border-left: 3px solid var(--sw-color-link);
		border-radius: 0;
		box-shadow: none;
		animation: none;
	}

	.main-navigation ul ul.toggled {
		display: block;
		animation: swSlideDown 0.25s ease forwards;
	}

	.main-navigation ul ul li {
		padding: 0 12px 0 8px;
		border-bottom: 1px solid var(--sw-color-border);
	}

	.main-navigation ul ul li:last-child {
		border-bottom: none;
	}

	.main-navigation ul ul a {
		padding: 12px 0;
		font-size: 0.95rem;
		font-weight: 400;
		color: var(--sw-color-text-light);
		font-family: var(--sw-font-body);
	}

	.main-navigation ul ul a:hover {
		color: var(--sw-color-link);
		padding-left: 4px;
	}

	/* --- Sub‑menu toggle button – refined --- */
	.sub-menu-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 1px solid transparent;
		cursor: pointer;
		padding: 4px;
		margin-left: 4px;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		color: var(--sw-color-text-muted);
		transition: all 0.3s ease;
		flex-shrink: 0;
	}

	.sub-menu-toggle:hover {
		background: var(--sw-color-bg-alt);
		border-color: var(--sw-color-border);
		color: var(--sw-color-link);
	}

	.sub-menu-toggle .dashicons {
		font-size: 1rem;
		width: 1rem;
		height: 1rem;
		transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.sub-menu-toggle.open {
		transform: rotate(180deg);
		color: var(--sw-color-link);
		background: var(--sw-color-bg-alt);
		border-color: var(--sw-color-link);
	}

	.sub-menu-toggle.open .dashicons {
		transform: rotate(0deg);
	}

	/* --- Special styling for deep sub‑menus --- */
	.main-navigation ul ul ul {
		border-left: 2px solid var(--sw-color-border);
		padding-left: 16px;
	}

	.main-navigation ul ul ul a {
		font-size: 0.9rem;
		color: var(--sw-color-text-muted);
	}
}

/* --- Ultra‑small screens --- */
@media (max-width: 480px) {
	.site-title {
		font-size: 1rem;
	}

	.site-description {
		font-size: 0.65rem;
		display: none; /* optional: hide tagline on very small screens */
	}

	.menu-toggle {
		padding: 4px 10px;
		min-width: 40px;
		min-height: 40px;
	}

	.menu-toggle .dashicons {
		font-size: 1.2rem;
		width: 1.2rem;
		height: 1.2rem;
	}

	.main-navigation li a {
		font-size: 0.95rem;
		padding: 12px 0;
	}

	.main-navigation ul ul a {
		font-size: 0.85rem;
		padding: 10px 0;
	}

	.sub-menu-toggle {
		width: 32px;
		height: 32px;
	}

	.sub-menu-toggle .dashicons {
		font-size: 0.9rem;
		width: 0.9rem;
		height: 0.9rem;
	}

	.main-navigation ul ul {
		padding-left: 12px;
	}
}

/* --- Desktop overrides --- */
@media (min-width: 769px) {
	.menu-toggle {
		display: none !important;
	}

	.sub-menu-toggle {
		display: none !important;
	}

	.main-navigation ul ul {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		background: var(--sw-color-card-bg);
		border: 1px solid var(--sw-color-border);
		border-radius: var(--sw-radius-sm);
		padding: 8px 0;
		min-width: 200px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
		z-index: 999;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
	}

	.main-navigation ul ul ul {
		top: 0;
		left: 100%;
	}

	.main-navigation ul li:hover > ul,
	.main-navigation ul li.focus > ul {
		display: block;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.main-navigation ul ul li {
		border-bottom: 1px solid var(--sw-color-border);
		padding: 0 12px;
	}

	.main-navigation ul ul li:last-child {
		border-bottom: none;
	}

	.main-navigation ul ul a {
		padding: 8px 0;
		border-bottom: none;
		display: block;
		font-weight: 400;
	}

	.main-navigation ul ul a:hover {
		color: var(--sw-color-link);
		background: none;
	}

	/* Sub-menu arrow indicators - desktop only */
	.main-navigation .menu-item-has-children > a {
		padding-right: 20px;
		position: relative;
	}

	.main-navigation .menu-item-has-children > a::after {
		content: "▾";
		position: absolute;
		right: 2px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 0.7rem;
		opacity: 0.5;
		transition: transform 0.2s ease;
	}

	.main-navigation .menu-item-has-children > a:hover::after {
		opacity: 1;
		transform: translateY(-50%) rotate(180deg);
	}

	.main-navigation .menu-item-has-children .menu-item-has-children > a::after {
		content: "▸";
		right: 4px;
	}
}