/* ==========================================================================
   Chilowaji – Main Design System
   Health Blog WordPress Theme
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
	/* Brand */
	--clr-accent:       #08044FFA;
	--clr-accent-dark:  #040228;
	--clr-accent-light: #d2d0f3;
	--clr-accent-pale:  #f0effb;

	/* Neutrals */
	--clr-bg:           #f8faf9;
	--clr-surface:      #ffffff;
	--clr-border:       #e5ebe8;
	--clr-text:         #1a2b22;
	--clr-text-muted:   #5e7568;
	--clr-text-light:   #93a89e;

	/* Dark */
	--clr-dark:         #0f1f17;
	--clr-dark-2:       #162d20;

	/* Typography */
	--ff-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ff-display: 'Playfair Display', Georgia, serif;

	/* Type scale */
	--fs-xs:   0.75rem;
	--fs-sm:   0.875rem;
	--fs-base: 1rem;
	--fs-md:   1.125rem;
	--fs-lg:   1.25rem;
	--fs-xl:   1.5rem;
	--fs-2xl:  1.875rem;
	--fs-3xl:  2.25rem;
	--fs-4xl:  3rem;
	--fs-5xl:  3.75rem;

	/* Spacing */
	--sp-1:  0.25rem;
	--sp-2:  0.5rem;
	--sp-3:  0.75rem;
	--sp-4:  1rem;
	--sp-5:  1.25rem;
	--sp-6:  1.5rem;
	--sp-8:  2rem;
	--sp-10: 2.5rem;
	--sp-12: 3rem;
	--sp-16: 4rem;
	--sp-20: 5rem;
	--sp-24: 6rem;

	/* Radius */
	--radius-sm:   6px;
	--radius-md:   12px;
	--radius-lg:   20px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--shadow-md:   0 4px 16px rgba(0,0,0,.08);
	--shadow-lg:   0 12px 40px rgba(0,0,0,.10);
	--shadow-card: 0 2px 12px rgba(8,4,79,.07);

	/* Transitions */
	--tr-fast:   150ms ease;
	--tr-normal: 250ms ease;
	--tr-slow:   400ms ease;

	/* Layout */
	--container-max: 1200px;
	--container-pad: clamp(1rem, 4vw, 2rem);
	--sidebar-w:     300px;
	--header-h:      68px;
}

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

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

body {
	font-family: var(--ff-sans);
	font-size: var(--fs-base);
	line-height: 1.7;
	color: var(--clr-text);
	background: var(--clr-bg);
	-webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-accent-dark); text-decoration: none; transition: color var(--tr-fast); }
a:hover { color: var(--clr-accent); }

button, input, select, textarea {
	font-family: inherit;
	font-size: inherit;
}

ul, ol { list-style: none; }

/* Screen reader only */
.screen-reader-text {
	clip: rect(1px,1px,1px,1px);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	overflow: hidden;
	position: absolute;
	word-wrap: normal;
}

/* --------------------------------------------------------------------------
   3. Container
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* --------------------------------------------------------------------------
   4. Header – Logo left | Icons right
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255,255,255,.95);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--clr-border);
	height: var(--header-h);
	transition: box-shadow var(--tr-normal);
}
.site-header.is-sticky { box-shadow: 0 2px 24px rgba(0,0,0,.07); }

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

/* ── Logo / Branding ── */
.site-branding { display: flex; align-items: center; flex-shrink: 0; }

.site-branding .custom-logo {
	height: 40px;
	width: auto;
	border-radius: var(--radius-sm);
}

/* site-title is now an <a> directly */
.site-title {
	font-family: var(--ff-display);
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--clr-dark);
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
}
.site-title span { color: var(--clr-accent); }
.site-title:hover { color: var(--clr-dark); opacity: .85; }

/* ── Header right: icon buttons ── */
.header-actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.header-icon-btn {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border-radius: var(--radius-md);
	color: var(--clr-text-muted);
	transition: background var(--tr-fast), color var(--tr-fast), transform var(--tr-fast);
	position: relative;
}
.header-icon-btn:hover {
	background: var(--clr-accent-pale);
	color: var(--clr-accent-dark);
}
.header-icon-btn:active { transform: scale(.92); }
.header-icon-btn svg { width: 20px; height: 20px; display: block; }

/* ── Menu toggle – bars → × animation ── */
.menu-toggle {
	width: 44px; height: 44px;
	gap: 0;
	padding: 12px;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}
.menu-toggle__bar {
	display: block;
	width: 20px; height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--tr-normal), opacity var(--tr-normal), width var(--tr-normal);
	transform-origin: center;
}
/* Active state – becomes × */
.menu-toggle.is-active .menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.menu-toggle.is-active .menu-toggle__bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.menu-toggle.is-active .menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}
.menu-toggle.is-active {
	background: var(--clr-accent-pale);
	color: var(--clr-accent-dark);
}

/* ── Backdrop overlay ── */
.nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15,31,23,.45);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	z-index: 1099;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tr-slow);
}
.nav-overlay.is-visible {
	opacity: 1;
	pointer-events: all;
}

/* ── Side Nav Panel ── */
.nav-panel {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(380px, 88vw);
	background: var(--clr-surface);
	z-index: 1100;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--tr-slow) cubic-bezier(.4,0,.2,1);
	box-shadow: -8px 0 48px rgba(0,0,0,.14);
	overscroll-behavior: contain;
}
.nav-panel.is-open {
	transform: translateX(0);
}

/* Panel head */
.nav-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-5) var(--sp-6);
	border-bottom: 1px solid var(--clr-border);
	height: var(--header-h);
	flex-shrink: 0;
}
.nav-panel__logo a {
	font-family: var(--ff-display);
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--clr-dark);
	letter-spacing: -.02em;
	text-decoration: none;
}
.nav-panel__logo span { color: var(--clr-accent); }

.nav-panel__close {
	background: none;
	border: none;
	cursor: pointer;
	width: 38px; height: 38px;
	border-radius: var(--radius-sm);
	color: var(--clr-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--tr-fast), color var(--tr-fast), transform var(--tr-fast);
}
.nav-panel__close:hover { background: var(--clr-bg); color: var(--clr-text); }
.nav-panel__close:active { transform: scale(.88); }
.nav-panel__close svg { width: 20px; height: 20px; }

/* Panel search */
.nav-panel__search {
	padding: var(--sp-4) var(--sp-6);
	border-bottom: 1px solid var(--clr-border);
	flex-shrink: 0;
}
.nav-panel__search form {
	display: flex;
	gap: var(--sp-2);
	align-items: center;
	background: var(--clr-bg);
	border: 1.5px solid var(--clr-border);
	border-radius: var(--radius-md);
	padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4);
	transition: border-color var(--tr-fast);
}
.nav-panel__search form:focus-within { border-color: var(--clr-accent); }
.nav-panel__search input[type="search"] {
	flex: 1;
	border: none;
	background: transparent;
	outline: none;
	font-size: var(--fs-sm);
	color: var(--clr-text);
	padding: var(--sp-2) 0;
}
.nav-panel__search button[type="submit"] {
	background: var(--clr-accent);
	color: #fff;
	border: none;
	border-radius: var(--radius-sm);
	padding: var(--sp-2) var(--sp-3);
	cursor: pointer;
	font-size: var(--fs-xs);
	font-weight: 600;
	white-space: nowrap;
	transition: background var(--tr-fast);
}
.nav-panel__search button[type="submit"]:hover { background: var(--clr-accent-dark); }

/* Panel navigation menu */
.nav-panel__menu {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--sp-3) var(--sp-4);
}

/* Nav-menu items inside panel */
.nav-panel__menu .nav-menu,
.nav-panel__menu #primary-menu {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: stretch;
}
.nav-panel__menu .nav-menu li,
.nav-panel__menu #primary-menu li {
	width: 100%;
}
.nav-panel__menu .nav-menu > li > a,
.nav-panel__menu #primary-menu > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--clr-text);
	border-radius: var(--radius-md);
	transition: background var(--tr-fast), color var(--tr-fast);
	white-space: normal;
}
.nav-panel__menu .nav-menu > li > a:hover,
.nav-panel__menu #primary-menu > li > a:hover,
.nav-panel__menu .nav-menu > li.current-menu-item > a,
.nav-panel__menu #primary-menu > li.current-menu-item > a,
.nav-panel__menu .nav-menu > li.current_page_item > a,
.nav-panel__menu #primary-menu > li.current_page_item > a {
	background: var(--clr-accent-pale);
	color: var(--clr-accent-dark);
}

/* Submenu toggle inside panel */
.nav-panel__menu .submenu-toggle {
	min-width: 40px; min-height: 40px;
	border-radius: var(--radius-sm);
}

/* Sub-menu inside panel – stacked */
.nav-panel__menu .sub-menu {
	position: static;
	box-shadow: none;
	border: none;
	border-radius: 0;
	padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
	background: transparent;
	display: none;
	animation: none;
}
.nav-panel__menu .sub-menu.is-open,
.nav-panel__menu .menu-item-has-children.sub-open > .sub-menu { display: block; }
.nav-panel__menu .sub-menu a {
	font-size: var(--fs-sm);
	color: var(--clr-text-muted);
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius-sm);
}
.nav-panel__menu .sub-menu a:hover { background: var(--clr-bg); color: var(--clr-accent-dark); }

/* Divider between top-level items */
.nav-panel__menu .nav-menu > li + li,
.nav-panel__menu #primary-menu > li + li {
	border-top: 1px solid var(--clr-border);
	padding-top: 2px;
	margin-top: 2px;
}

/* Panel footer */
.nav-panel__footer {
	padding: var(--sp-5) var(--sp-6);
	border-top: 1px solid var(--clr-border);
	flex-shrink: 0;
	background: var(--clr-bg);
}
.nav-panel__tagline {
	font-size: var(--fs-xs);
	color: var(--clr-text-muted);
	margin-bottom: var(--sp-4);
	line-height: 1.5;
}
.nav-panel__social {
	display: flex;
	gap: var(--sp-2);
}
.np-social-link {
	width: 36px; height: 36px;
	border-radius: var(--radius-full);
	border: 1.5px solid var(--clr-border);
	background: var(--clr-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--clr-text-muted);
	transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
}
.np-social-link:hover {
	background: var(--clr-accent);
	color: #fff;
	border-color: var(--clr-accent);
}

/* Legacy: keep existing desktop nav hidden (nav is panel-only now) */
.main-navigation { display: none; }
.search-drawer,
.search-toggle-btn,
.hamburger { display: none; }


/* --------------------------------------------------------------------------
   5. Hero Banner
   -------------------------------------------------------------------------- */
.hero-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 60vh, 680px);
	overflow: hidden;
	background: var(--clr-dark);
}

.hero-bg {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%; height: 100%;
	opacity: .45;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(15,31,23,.80) 0%, rgba(8,4,79,.15) 100%);
}

.hero-content {
	position: relative;
	z-index: 1;
	color: #fff;
	max-width: 640px;
	padding-block: var(--sp-24);
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	background: rgba(8,4,79,.2);
	border: 1px solid rgba(8,4,79,.35);
	color: #605dfa;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--radius-full);
	margin-bottom: var(--sp-5);
}

.hero-heading {
	font-family: var(--ff-display);
	font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl));
	line-height: 1.1;
	letter-spacing: -.03em;
	margin-bottom: var(--sp-5);
}

.hero-heading em {
	font-style: normal;
	color: var(--clr-accent);
}

.hero-subtext {
	font-size: var(--fs-md);
	color: rgba(255,255,255,.8);
	line-height: 1.7;
	margin-bottom: var(--sp-8);
	max-width: 500px;
}

.hero-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-6);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	transition: background var(--tr-fast), transform var(--tr-fast), box-shadow var(--tr-fast);
	cursor: pointer;
	border: none;
	text-decoration: none;
}
.btn:active { transform: scale(.97); }

.btn-primary {
	background: var(--clr-accent);
	color: #fff;
	box-shadow: 0 4px 20px rgba(8,4,79,.35);
}
.btn-primary:hover {
	background: var(--clr-accent-dark);
	box-shadow: 0 6px 28px rgba(8,4,79,.45);
	color: #fff;
}

.btn-outline {
	background: transparent;
	border: 1.5px solid rgba(255,255,255,.5);
	color: #fff;
}
.btn-outline:hover {
	background: rgba(255,255,255,.1);
	border-color: #fff;
	color: #fff;
}

.btn-ghost {
	background: var(--clr-accent-pale);
	color: var(--clr-accent-dark);
}
.btn-ghost:hover {
	background: var(--clr-accent-light);
	color: var(--clr-accent-dark);
}

.btn-sm {
	padding: var(--sp-2) var(--sp-4);
	font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   7. Category Badge
   -------------------------------------------------------------------------- */
.cat-badge {
	display: inline-block;
	padding: 3px 10px;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: var(--clr-accent-light);
	color: var(--clr-accent-dark);
	border-radius: var(--radius-full);
	transition: background var(--tr-fast);
}
.cat-badge:hover {
	background: var(--clr-accent);
	color: #fff;
}

/* --------------------------------------------------------------------------
   8. Post Card Grid (Home / Archive)
   -------------------------------------------------------------------------- */
.posts-section { padding-block: var(--sp-16); }
.section-header { margin-bottom: var(--sp-10); }
.section-label {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--clr-accent-dark);
	margin-bottom: var(--sp-2);
}
.section-title {
	font-family: var(--ff-display);
	font-size: var(--fs-2xl);
	color: var(--clr-dark);
	line-height: 1.2;
}

.posts-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-6);
}

/* Featured post (full-width span 2) */
.posts-grid .post-card:first-child {
	grid-column: 1 / 3;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}
@media (min-width: 768px) {
	.posts-grid .post-card:first-child {
		grid-column: 1 / -1;
		grid-template-columns: 1.5fr 1fr;
	}
}
.posts-grid .post-card:first-child .card-thumb {
	aspect-ratio: 16/9;
	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.posts-grid .post-card:first-child .card-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--sp-8);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.posts-grid .post-card:first-child .card-title { font-size: var(--fs-xl); }

/* Post card */
.post-card {
	background: var(--clr-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--clr-border);
	transition: transform var(--tr-normal), box-shadow var(--tr-normal);
	display: flex;
	flex-direction: column;
}
.post-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.card-thumb {
	position: relative;
	aspect-ratio: 3/2;
	overflow: hidden;
}
.card-thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--tr-slow);
}
.post-card:hover .card-thumb img { transform: scale(1.05); }

.card-thumb-placeholder {
	width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--clr-accent-pale), var(--clr-accent-light));
	display: flex;
	align-items: center;
	justify-content: center;
}
.card-thumb-placeholder svg { width: 48px; height: 48px; color: var(--clr-accent); opacity: .5; }

.card-cat { position: absolute; top: var(--sp-3); left: var(--sp-3); }

.card-body { padding: var(--sp-4); flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }

.card-meta {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--clr-text-muted);
}
.card-meta span { display: flex; align-items: center; gap: 4px; }
.card-meta svg { width: 13px; height: 13px; flex-shrink: 0; }

.card-title {
	font-family: var(--ff-display);
	font-size: var(--fs-base);
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--clr-dark);
}
.card-title a { color: inherit; }
.card-title a:hover { color: var(--clr-accent-dark); }

.card-excerpt { font-size: var(--fs-xs); color: var(--clr-text-muted); line-height: 1.6; display: none; }

.card-footer {

	margin-top: auto;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--clr-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.card-author {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-xs);
	color: var(--clr-text-muted);
}
.card-author img {
	width: 28px; height: 28px;
	border-radius: var(--radius-full);
	object-fit: cover;
	border: 2px solid var(--clr-accent-light);
}

.read-more-link {
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--clr-accent-dark);
	display: flex;
	align-items: center;
	gap: 4px;
}
.read-more-link svg { width: 14px; height: 14px; transition: transform var(--tr-fast); }
.read-more-link:hover svg { transform: translateX(3px); }
.read-more-link:hover { color: var(--clr-accent); }

/* --------------------------------------------------------------------------
   9. Sidebar Layout
   -------------------------------------------------------------------------- */
.content-sidebar-wrap {
	display: grid;
	grid-template-columns: 1fr var(--sidebar-w);
	gap: var(--sp-10);
	align-items: start;
	padding-block: var(--sp-16);
}
.no-sidebar .content-sidebar-wrap {
	grid-template-columns: 1fr;
	max-width: 820px;
	margin-inline: auto;
}

/* Sidebar */
.widget-area { display: flex; flex-direction: column; gap: var(--sp-8); }

.widget {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: var(--sp-6);
}

.widget-title {
	font-family: var(--ff-display);
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 2px solid var(--clr-accent-light);
}

.widget ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.widget li a {
	font-size: var(--fs-sm);
	color: var(--clr-text-muted);
	transition: color var(--tr-fast);
}
.widget li a:hover { color: var(--clr-accent-dark); }

.widget_search form { display: flex; gap: var(--sp-2); }
.widget_search input[type="search"] {
	flex: 1;
	padding: var(--sp-2) var(--sp-3);
	border: 1.5px solid var(--clr-border);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	outline: none;
}
.widget_search input[type="search"]:focus { border-color: var(--clr-accent); }
.widget_search button {
	padding: var(--sp-2) var(--sp-3);
	background: var(--clr-accent);
	color: #fff;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--tr-fast);
}
.widget_search button:hover { background: var(--clr-accent-dark); }

/* --------------------------------------------------------------------------
   9b. Nav-Panel Search Icon (expands to form)
   -------------------------------------------------------------------------- */
.nav-panel__search {
	padding: 0;
	border-bottom: 1px solid var(--clr-border);
	flex-shrink: 0;
}

/* Icon toggle button */
.nps-icon-btn {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	width: 100%;
	padding: var(--sp-4) var(--sp-6);
	background: none;
	border: none;
	cursor: pointer;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--clr-text-muted);
	transition: color var(--tr-fast), background var(--tr-fast);
}
.nps-icon-btn:hover { color: var(--clr-accent-dark); background: var(--clr-accent-pale); }
.nps-icon-btn span { flex: 1; text-align: left; }
.nps-caret {
	transition: transform var(--tr-normal);
	flex-shrink: 0;
}
.nps-icon-btn[aria-expanded="true"] .nps-caret { transform: rotate(180deg); }
.nps-icon-btn[aria-expanded="true"] {
	color: var(--clr-accent-dark);
	background: var(--clr-accent-pale);
}

/* Collapsible form wrapper */
.nps-form-wrap {
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--tr-slow) cubic-bezier(.4,0,.2,1),
	            padding var(--tr-normal);
	padding: 0 var(--sp-6);
}
.nps-form-wrap.is-open {
	max-height: 140px;
	padding: var(--sp-3) var(--sp-6) var(--sp-4);
}
.nps-form-wrap form {
	display: flex;
	gap: var(--sp-2);
	align-items: center;
	background: var(--clr-bg);
	border: 1.5px solid var(--clr-border);
	border-radius: var(--radius-md);
	padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4);
	transition: border-color var(--tr-fast);
}
.nps-form-wrap form:focus-within { border-color: var(--clr-accent); }
.nps-form-wrap input[type="search"] {
	flex: 1;
	border: none;
	background: transparent;
	outline: none;
	font-size: var(--fs-sm);
	color: var(--clr-text);
	padding: var(--sp-2) 0;
}
.nps-form-wrap button[type="submit"] {
	background: var(--clr-accent);
	color: #fff;
	border: none;
	border-radius: var(--radius-sm);
	padding: var(--sp-2) var(--sp-3);
	cursor: pointer;
	font-size: var(--fs-xs);
	font-weight: 600;
	white-space: nowrap;
	transition: background var(--tr-fast);
}
.nps-form-wrap button[type="submit"]:hover { background: var(--clr-accent-dark); }

/* --------------------------------------------------------------------------
   9c. Table of Contents
   -------------------------------------------------------------------------- */
.single-content-wrap { position: relative; }

.toc {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-left: 4px solid var(--clr-accent);
	border-radius: var(--radius-lg);
	margin-bottom: var(--sp-8);
	overflow: hidden;
}

/* Toggle button */
.toc__toggle {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	width: 100%;
	padding: var(--sp-4) var(--sp-5);
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
}
.toc__toggle:hover { background: var(--clr-accent-pale); }
.toc__title {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--ff-display);
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--clr-dark);
	flex: 1;
}
.toc__title svg { color: var(--clr-accent); flex-shrink: 0; }
.toc__caret {
	color: var(--clr-text-muted);
	transition: transform var(--tr-normal);
	flex-shrink: 0;
}
.toc__toggle[aria-expanded="false"] .toc__caret { transform: rotate(-90deg); }

/* List */
.toc__list {
	list-style: none;
	padding: 0 var(--sp-5) var(--sp-4);
	margin: 0;
	overflow: hidden;
	transition: max-height var(--tr-slow) cubic-bezier(.4,0,.2,1);
	max-height: 1200px; /* generous max — collapsed by JS */
	counter-reset: toc-counter;
}
.toc__list.is-collapsed { max-height: 0; padding-bottom: 0; }

/* h2 items */
.toc__item {
	counter-increment: toc-counter;
	padding: var(--sp-1) 0;
	border-top: 1px solid var(--clr-border);
}
.toc__item:first-child { border-top: none; }

.toc__link {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-2);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--clr-text-muted);
	transition: color var(--tr-fast), background var(--tr-fast);
	text-decoration: none;
}
.toc__item > .toc__link::before {
	content: counter(toc-counter, decimal-leading-zero);
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--clr-accent);
	flex-shrink: 0;
	min-width: 1.5rem;
}
.toc__link:hover {
	color: var(--clr-accent-dark);
	background: var(--clr-accent-pale);
}

/* h3 sub-items */
.toc__item--sub {
	counter-increment: none;
	padding-left: var(--sp-8);
}
.toc__item--sub > .toc__link {
	font-size: var(--fs-xs);
	font-weight: 400;
}
.toc__item--sub > .toc__link::before {
	content: '›';
	font-size: var(--fs-base);
	color: var(--clr-text-light);
}

/* Active link */
.toc__link.is-active {
	color: var(--clr-accent-dark);
	background: var(--clr-accent-pale);
	font-weight: 600;
}
.toc__link.is-active::before { color: var(--clr-accent-dark); }

/* --------------------------------------------------------------------------
   10. Single Post
   -------------------------------------------------------------------------- */

.post-hero {
	position: relative;
	aspect-ratio: 21/9;
	overflow: hidden;
	border-radius: var(--radius-lg);
	margin-bottom: var(--sp-10);
	max-height: 520px;
}
.post-hero img { width: 100%; height: 100%; object-fit: cover; }
.post-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 60%);
}

.post-header { margin-bottom: var(--sp-8); }

.post-cats { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }

.entry-title {
	font-family: var(--ff-display);
	font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
	line-height: 1.15;
	letter-spacing: -.03em;
	color: var(--clr-dark);
	margin-bottom: var(--sp-5);
}

.post-meta {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--clr-text-muted);
	flex-wrap: wrap;
}
.post-meta svg { width: 15px; height: 15px; }
.post-meta span { display: flex; align-items: center; gap: 5px; }
.post-meta a { color: var(--clr-text-muted); }
.post-meta a:hover { color: var(--clr-accent-dark); }

/* Entry content */
.entry-content {
	font-size: var(--fs-md);
	line-height: 1.85;
	color: var(--clr-text);
	max-width: 72ch;
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--ff-display);
	color: var(--clr-dark);
	margin-top: var(--sp-10);
	margin-bottom: var(--sp-4);
	line-height: 1.25;
}
.entry-content h2 { font-size: var(--fs-2xl); }
.entry-content h3 { font-size: var(--fs-xl); }
.entry-content h4 { font-size: var(--fs-lg); }
.entry-content p { margin-bottom: var(--sp-5); }
.entry-content a { color: var(--clr-accent-dark); border-bottom: 1px solid var(--clr-accent-light); }
.entry-content a:hover { color: var(--clr-accent); border-color: var(--clr-accent); }
.entry-content ul, .entry-content ol { padding-left: var(--sp-6); margin-bottom: var(--sp-5); }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: var(--sp-2); }
.entry-content img { border-radius: var(--radius-md); }
.entry-content figure { margin-block: var(--sp-8); }
.entry-content figcaption { font-size: var(--fs-sm); color: var(--clr-text-muted); text-align: center; margin-top: var(--sp-2); }
.entry-content blockquote {
	border-left: 4px solid var(--clr-accent);
	padding: var(--sp-4) var(--sp-6);
	margin-block: var(--sp-8);
	background: var(--clr-accent-pale);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-family: var(--ff-display);
	font-size: var(--fs-lg);
	font-style: italic;
	color: var(--clr-dark);
}
.entry-content pre {
	background: var(--clr-dark);
	color: #e2e8f0;
	padding: var(--sp-5);
	border-radius: var(--radius-md);
	overflow-x: auto;
	font-size: var(--fs-sm);
	margin-block: var(--sp-6);
}
.entry-content code {
	background: var(--clr-accent-pale);
	color: var(--clr-accent-dark);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: .9em;
}
.entry-content pre code { background: none; color: inherit; padding: 0; }

/* Post tags */
.post-tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-8); }
.tag-link {
	padding: 4px 12px;
	background: var(--clr-bg);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-full);
	font-size: var(--fs-xs);
	color: var(--clr-text-muted);
	transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
}
.tag-link:hover {
	background: var(--clr-accent-pale);
	color: var(--clr-accent-dark);
	border-color: var(--clr-accent-light);
}

/* --------------------------------------------------------------------------
   11. Author Box
   -------------------------------------------------------------------------- */
.author-box {
	display: flex;
	gap: var(--sp-6);
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: var(--sp-6);
	margin-top: var(--sp-12);
}
.author-avatar img {
	width: 80px; height: 80px;
	border-radius: var(--radius-full);
	object-fit: cover;
	border: 3px solid var(--clr-accent-light);
}
.author-info { flex: 1; }
.author-name {
	font-family: var(--ff-display);
	font-size: var(--fs-lg);
	color: var(--clr-dark);
	margin-bottom: var(--sp-2);
}
.author-bio { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height: 1.6; }

/* --------------------------------------------------------------------------
   12. Post Navigation
   -------------------------------------------------------------------------- */
.post-navigation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-4);
	margin-top: var(--sp-12);
	padding-top: var(--sp-8);
	border-top: 1px solid var(--clr-border);
}
.nav-previous, .nav-next {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-md);
	padding: var(--sp-4);
	transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.nav-previous:hover, .nav-next:hover {
	border-color: var(--clr-accent-light);
	box-shadow: var(--shadow-sm);
}
.nav-next { text-align: right; }
.nav-label { display: block; font-size: var(--fs-xs); color: var(--clr-text-muted); margin-bottom: 4px; }
.nav-title { font-size: var(--fs-sm); font-weight: 600; color: var(--clr-dark); line-height: 1.3; }

/* --------------------------------------------------------------------------
   13. Comments
   -------------------------------------------------------------------------- */
.comments-area { margin-top: var(--sp-12); }
.comments-title {
	font-family: var(--ff-display);
	font-size: var(--fs-2xl);
	color: var(--clr-dark);
	margin-bottom: var(--sp-8);
}
.comment-list { display: flex; flex-direction: column; gap: var(--sp-6); }
.comment-body {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-md);
	padding: var(--sp-5);
}
.comment-author { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.comment-author img { width: 36px; height: 36px; border-radius: var(--radius-full); }
.comment-author .fn { font-weight: 600; font-size: var(--fs-sm); }
.comment-metadata { font-size: var(--fs-xs); color: var(--clr-text-muted); }
.comment-content p { font-size: var(--fs-sm); line-height: 1.7; }
.reply a {
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--clr-accent-dark);
	display: inline-block;
	margin-top: var(--sp-3);
}
.children { margin-left: var(--sp-8); margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }

/* Comment form */
.comment-respond { margin-top: var(--sp-10); }
.comment-reply-title {
	font-family: var(--ff-display);
	font-size: var(--fs-xl);
	color: var(--clr-dark);
	margin-bottom: var(--sp-6);
}
.comment-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.comment-form label { font-size: var(--fs-sm); font-weight: 500; display: block; margin-bottom: var(--sp-1); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: var(--sp-3) var(--sp-4);
	border: 1.5px solid var(--clr-border);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	color: var(--clr-text);
	background: var(--clr-surface);
	transition: border-color var(--tr-fast);
	outline: none;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--clr-accent); }
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form-cookies-consent label { font-size: var(--fs-xs); font-weight: 400; display: inline; margin-left: var(--sp-2); }
.comment-form .submit {
	background: var(--clr-accent);
	color: #fff;
	padding: var(--sp-3) var(--sp-8);
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
	align-self: flex-start;
	transition: background var(--tr-fast), transform var(--tr-fast);
}
.comment-form .submit:hover { background: var(--clr-accent-dark); }
.comment-form .submit:active { transform: scale(.97); }

/* --------------------------------------------------------------------------
   14. Page / Static Page
   -------------------------------------------------------------------------- */
.page-header { padding-block: var(--sp-16); text-align: center; }
.page-title {
	font-family: var(--ff-display);
	font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl));
	color: var(--clr-dark);
}

/* --------------------------------------------------------------------------
   15. Archive / Search
   -------------------------------------------------------------------------- */
.archive-header, .search-header {
	background: linear-gradient(135deg, var(--clr-accent-pale) 0%, #fff 100%);
	padding-block: var(--sp-12);
	border-bottom: 1px solid var(--clr-border);
	margin-bottom: var(--sp-10);
}
.archive-title, .search-title {
	font-family: var(--ff-display);
	font-size: var(--fs-3xl);
	color: var(--clr-dark);
	margin-bottom: var(--sp-2);
}
.archive-description, .search-description { color: var(--clr-text-muted); font-size: var(--fs-md); }
.search-form-wrap { max-width: 560px; margin-top: var(--sp-6); }
.search-form-wrap form { display: flex; gap: var(--sp-3); }
.search-form-wrap input[type="search"] {
	flex: 1;
	padding: var(--sp-3) var(--sp-4);
	border: 1.5px solid var(--clr-border);
	border-radius: var(--radius-md);
	font-size: var(--fs-base);
	outline: none;
}
.search-form-wrap input[type="search"]:focus { border-color: var(--clr-accent); }
.search-form-wrap button {
	padding: var(--sp-3) var(--sp-6);
	background: var(--clr-accent);
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--tr-fast);
}
.search-form-wrap button:hover { background: var(--clr-accent-dark); }

/* --------------------------------------------------------------------------
   16. 404 Page
   -------------------------------------------------------------------------- */
.error-404 {
	text-align: center;
	padding-block: var(--sp-24);
	max-width: 500px;
	margin-inline: auto;
}
.error-404 .error-code {
	font-family: var(--ff-display);
	font-size: 8rem;
	line-height: 1;
	color: var(--clr-accent-light);
	font-weight: 700;
}
.error-404 h1 { font-family: var(--ff-display); font-size: var(--fs-2xl); color: var(--clr-dark); margin-block: var(--sp-4); }
.error-404 p { color: var(--clr-text-muted); margin-bottom: var(--sp-8); }

/* --------------------------------------------------------------------------
   17. Pagination
   -------------------------------------------------------------------------- */
.navigation.pagination {
	margin-top: var(--sp-12);
	display: flex;
	justify-content: center;
}
.nav-links {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}
.nav-links a, .nav-links span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px; height: 40px;
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	font-weight: 500;
}
.nav-links a {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	color: var(--clr-text);
	transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
}
.nav-links a:hover {
	background: var(--clr-accent-pale);
	border-color: var(--clr-accent-light);
	color: var(--clr-accent-dark);
}
.nav-links .current {
	background: var(--clr-accent);
	color: #fff;
	border: 1px solid var(--clr-accent);
}
.nav-links .dots { color: var(--clr-text-muted); }

/* --------------------------------------------------------------------------
   18. Topics / Topics Strip
   -------------------------------------------------------------------------- */
.topics-strip {
	background: var(--clr-surface);
	border-bottom: 1px solid var(--clr-border);
	padding-block: var(--sp-4);
}
.topics-inner {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.topics-inner::-webkit-scrollbar { display: none; }
.topic-label {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--clr-text-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
	white-space: nowrap;
}
.topic-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--radius-full);
	font-size: var(--fs-xs);
	font-weight: 500;
	background: var(--clr-bg);
	border: 1px solid var(--clr-border);
	color: var(--clr-text-muted);
	white-space: nowrap;
	transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
}
.topic-chip:hover {
	background: var(--clr-accent-pale);
	color: var(--clr-accent-dark);
	border-color: var(--clr-accent-light);
}

/* --------------------------------------------------------------------------
   19. Newsletter Section
   -------------------------------------------------------------------------- */
.newsletter-section {
	background: linear-gradient(135deg, var(--clr-dark) 0%, var(--clr-dark-2) 100%);
	padding-block: var(--sp-16);
	text-align: center;
	color: #fff;
}
.newsletter-inner { max-width: 520px; margin-inline: auto; }
.newsletter-icon {
	width: 56px; height: 56px;
	background: rgba(8,4,79,.15);
	border: 1.5px solid rgba(8,4,79,.3);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--sp-5);
}
.newsletter-icon svg { width: 24px; height: 24px; color: var(--clr-accent); }
.newsletter-heading {
	font-family: var(--ff-display);
	font-size: var(--fs-2xl);
	margin-bottom: var(--sp-3);
}
.newsletter-sub { color: rgba(255,255,255,.7); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.newsletter-form { display: flex; gap: var(--sp-3); max-width: 440px; margin-inline: auto; }
.newsletter-form input[type="email"] {
	flex: 1;
	padding: var(--sp-3) var(--sp-4);
	border: 1.5px solid rgba(255,255,255,.15);
	border-radius: var(--radius-md);
	background: rgba(255,255,255,.08);
	color: #fff;
	font-size: var(--fs-sm);
	outline: none;
	transition: border-color var(--tr-fast);
}
.newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,.4); }
.newsletter-form input[type="email"]:focus { border-color: var(--clr-accent); }
.newsletter-form button {
	padding: var(--sp-3) var(--sp-6);
	background: var(--clr-accent);
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--tr-fast);
}
.newsletter-form button:hover { background: var(--clr-accent-dark); }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-footer {
	background: var(--clr-dark);
	color: rgba(255,255,255,.75);
	padding-block: var(--sp-12) var(--sp-6);
}

.footer-logo {
	font-family: var(--ff-display);
	font-size: var(--fs-xl);
	font-weight: 700;
	color: #fff;
	margin-bottom: var(--sp-4);
}
.footer-logo span { color: var(--clr-accent); }

.footer-about-text {
	max-width: 480px;
	margin: 0 auto var(--sp-6);
}
.footer-about-text p {
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.footer-social-links {
	display: flex;
	justify-content: center;
	gap: var(--sp-4);
	margin-bottom: var(--sp-8);
}
.footer-social-links .social-link {
	width: 40px; height: 40px;
	border-radius: var(--radius-full);
	border: 1px solid rgba(255,255,255,.15);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,.65);
	transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
}
.footer-social-links .social-link:hover {
	background: var(--clr-accent);
	border-color: var(--clr-accent);
	color: #fff;
}
.footer-social-links svg { width: 18px; height: 18px; }

/* Copyright */
.footer-copyright {
	padding-top: var(--sp-6);
	border-top: 1px solid rgba(255,255,255,.1);
}
.footer-copyright p { font-size: var(--fs-xs); }




/* --------------------------------------------------------------------------
   21. Scroll-to-top
   -------------------------------------------------------------------------- */
#scroll-top {
	position: fixed;
	bottom: var(--sp-8);
	right: var(--sp-8);
	width: 44px; height: 44px;
	border-radius: var(--radius-full);
	background: var(--clr-accent);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-md);
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity var(--tr-normal), transform var(--tr-normal);
	z-index: 900;
}
#scroll-top.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
#scroll-top:hover { background: var(--clr-accent-dark); }
#scroll-top svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   22. Content None
   -------------------------------------------------------------------------- */
.no-results {
	text-align: center;
	padding-block: var(--sp-20);
}
.no-results .no-results-icon { font-size: 4rem; margin-bottom: var(--sp-4); }
.no-results h2 { font-family: var(--ff-display); font-size: var(--fs-2xl); color: var(--clr-dark); margin-bottom: var(--sp-3); }
.no-results p { color: var(--clr-text-muted); margin-bottom: var(--sp-6); }

/* --------------------------------------------------------------------------
   23. Utility
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-auto { margin-top: auto; }
.visually-hidden {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
	position: absolute;
	top: -100%;
	left: var(--sp-4);
	background: var(--clr-accent);
	color: #fff;
	padding: var(--sp-3) var(--sp-6);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	font-size: var(--fs-sm);
	font-weight: 600;
	z-index: 9999;
	transition: top var(--tr-fast);
}
.skip-link:focus { top: 0; }

/* Alignments */
.alignleft { float: left; margin-right: var(--sp-6); margin-bottom: var(--sp-4); }
.alignright { float: right; margin-left: var(--sp-6); margin-bottom: var(--sp-4); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { margin-inline: -var(--sp-8); }
.alignfull { margin-inline: calc(-1 * var(--container-pad)); border-radius: 0; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--fs-sm); color: var(--clr-text-muted); text-align: center; margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   24. Submenu (desktop hover + touch toggle)
   -------------------------------------------------------------------------- */

/* Desktop: submenus are absolute dropdowns */
.sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 210px;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--sp-2);
	z-index: 200;
}
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children.sub-open > .sub-menu { display: block; animation: fadeSlideDown .18s ease; }
@keyframes fadeSlideDown {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.sub-menu a {
	display: flex;
	align-items: center;
	padding: var(--sp-2) var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--clr-text);
	border-radius: var(--radius-sm);
	transition: background var(--tr-fast), color var(--tr-fast);
	gap: var(--sp-2);
}
.sub-menu a:hover { background: var(--clr-accent-pale); color: var(--clr-accent-dark); }

/* Nested third-level sub-menu */
.sub-menu .sub-menu { top: 0; left: 100%; }

/* --------------------------------------------------------------------------
   25. Responsive – 5-tier breakpoint system

   NOTE: The nav panel is a fixed side-drawer managed by JS on ALL screen sizes.
   No breakpoint-specific nav show/hide overrides are needed here.

   Breakpoints:
     lg  : 1024px (tablets / small laptops)
     md  : 768px  (portrait tablets)
     sm  : 600px  (large phones / landscape)
     xs  : 375px  (small phones)
   -------------------------------------------------------------------------- */

/* ── lg: 1024px ── */
@media (max-width: 1024px) {
	/* 3-col → 2-col card grid */
	.posts-grid { grid-template-columns: repeat(2, 1fr); }
	.posts-grid .post-card:first-child { grid-column: 1 / -1; }

	/* Sidebar collapses on tablets */
	.content-sidebar-wrap { grid-template-columns: 1fr; }
	.content-sidebar-wrap .widget-area { display: none; }
	.no-sidebar .content-sidebar-wrap { max-width: 100%; }

	/* Footer 2-col */
	.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }

	/* Slightly smaller hero padding */
	.hero-content { padding-block: var(--sp-16); }

	/* Single-post: let content go full width */
	.entry-content { max-width: 100%; }
}

/* ── md: 768px ── */
@media (max-width: 768px) {
	:root {
		--header-h: 60px;
		--sp-24:    4rem;
	}

	/* Nav panel: narrower on portrait tablet */
	.nav-panel { width: min(360px, 92vw); }

	/* Single-column card grid */
	.posts-grid { grid-template-columns: 1fr; }
	.posts-grid .post-card:first-child { grid-template-columns: 1fr; }
	.posts-grid .post-card:first-child .card-thumb {
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		aspect-ratio: 16 / 9;
	}
	.posts-grid .post-card:first-child .card-body {
		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
		padding: var(--sp-5);
		justify-content: flex-start;
	}

	/* Footer single-col */
	.footer-grid { grid-template-columns: 1fr; }

	/* Hero: stacked CTA buttons */
	.hero-actions { flex-direction: column; align-items: stretch; }
	.hero-actions .btn { width: 100%; justify-content: center; }

	/* Post nav / newsletter / footer bar */
	.post-navigation { grid-template-columns: 1fr; }
	.newsletter-form { flex-direction: column; }
	.newsletter-form input[type="email"],
	.newsletter-form button { width: 100%; }
	.footer-bar { flex-direction: column; text-align: center; gap: var(--sp-3); }
	.footer-nav { flex-wrap: wrap; justify-content: center; }

	/* Scroll-to-top */
	#scroll-top { bottom: var(--sp-5); right: var(--sp-4); }

	/* Author box: stacked */
	.author-box { flex-direction: column; align-items: center; text-align: center; }

	/* Sidebar shown as a horizontal widget row below content at tablet */
	.content-sidebar-wrap .widget-area {
		display: flex;
		order: 2;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--sp-4);
	}
	.content-sidebar-wrap .widget-area .widget { flex: 1 1 280px; }

	/* Post hero less tall */
	.post-hero { aspect-ratio: 16 / 7; max-height: 320px; }

	/* Site title slightly smaller */
	.site-title { font-size: var(--fs-lg); }
}

/* ── sm: 600px ── */
@media (max-width: 600px) {
	:root { --sp-16: 3rem; --sp-12: 2.5rem; }

	/* Panel full-width on small phones */
	.nav-panel { width: 100%; box-shadow: none; }

	/* Hero tighter */
	.hero-banner { min-height: clamp(300px, 70vw, 480px); }
	.hero-content { padding-block: var(--sp-12); }
	.hero-badge { font-size: 0.65rem; }
	.hero-subtext { font-size: var(--fs-base); }

	/* Cards */
	.card-body { padding: var(--sp-4); }

	/* Topics strip */
	.topics-inner { gap: var(--sp-2); }

	/* Newsletter heading */
	.newsletter-heading { font-size: var(--fs-xl); }

	/* Post meta wraps */
	.post-meta { flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }

	/* Section header */
	.section-title { font-size: var(--fs-xl); }

	/* Footer */
	.site-footer { padding-top: var(--sp-10); }

	/* Comments indentation */
	.children { margin-left: var(--sp-4); }

	/* Tags */
	.post-tags { gap: var(--sp-1); }
}

/* ── xs: 375px ── */
@media (max-width: 375px) {
	:root {
		--container-pad: 0.875rem;
		--sp-16:         2.5rem;
		--header-h:      56px;
	}

	/* Logo text */
	.site-title { font-size: var(--fs-base); }

	/* Card footer stacked */
	.card-footer { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

	/* Hero heading tighter */
	.hero-content { padding-block: var(--sp-10); }

	/* Comment font */
	.comment-content p, .comment-author { font-size: var(--fs-sm); }

	/* Widget stacks */
	.content-sidebar-wrap .widget-area .widget { flex: 1 1 100%; }

	/* 404 */
	.error-404 .error-code { font-size: 5rem; }

	/* Bigger touch buttons */
	.hero-actions .btn, .error-404 .btn { min-height: 48px; }

	/* Icon buttons in header slightly smaller */
	.header-icon-btn { width: 38px; height: 38px; }
	.menu-toggle { width: 38px; height: 38px; padding: 10px; }
}

/* ── Print ── */
@media print {
	.site-header, .site-footer, .widget-area,
	.newsletter-section, #scroll-top, .post-navigation,
	.nav-panel, .nav-overlay, .header-actions { display: none !important; }
	.content-sidebar-wrap { grid-template-columns: 1fr; }
	.entry-content { max-width: 100%; font-size: 12pt; line-height: 1.6; }
	a { color: inherit; border: none; }
	.entry-content a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}