/*!
Theme Name: UnicaSuite
Theme URI: https://unicasuite.com/
Author: UnicaSuite Team
Author URI: https://unicasuite.com/
Description: A professional, minimal SaaS blog theme for scientific and laboratory software. Features dark/light mode, modern card-based layout, and tools for materials science, biology, chemistry, physics, and research software reviews.
Version: 2.0.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: unicasuite
Tags: blog, education, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, one-column, two-columns, grid-layout, block-styles, wide-blocks

UnicaSuite is a scientific SaaS blog theme built on Underscores.
*/

/* ==========================================================================
   0. CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
	/* Primary palette */
	--color-primary:         #4F46E5;
	--color-primary-hover:   #4338CA;
	--color-primary-light:   #818CF8;
	--color-primary-lighter: #C7D2FE;
	--color-primary-50:      #EEF2FF;
	--color-primary-rgb:     79, 70, 229;

	/* Semantic */
	--color-success:   #10B981;
	--color-warning:   #F59E0B;
	--color-error:     #EF4444;
	--color-info:      #3B82F6;

	/* Neutrals — Light Theme */
	--color-bg:          #F8FAFC;
	--color-bg-alt:      #F1F5F9;
	--color-surface:     #FFFFFF;
	--color-surface-alt: #F8FAFC;
	--color-border:      #E2E8F0;
	--color-border-light:#F1F5F9;
	--color-text:        #0F172A;
	--color-text-secondary: #475569;
	--color-text-muted:  #94A3B8;
	--color-heading:     #0F172A;

	/* Shadows — Light */
	--shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
	--shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
	--shadow-md:  0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
	--shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
	--shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);

	/* Typography */
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

	--text-xs:   0.75rem;
	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.125rem;
	--text-xl:   1.25rem;
	--text-2xl:  1.5rem;
	--text-3xl:  1.875rem;
	--text-4xl:  2.25rem;
	--text-5xl:  3rem;

	--leading-tight:  1.25;
	--leading-normal: 1.6;
	--leading-relaxed: 1.75;

	--font-normal:   400;
	--font-medium:   500;
	--font-semibold: 600;
	--font-bold:     700;

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

	/* Radius */
	--radius-sm:   0.25rem;
	--radius-md:   0.5rem;
	--radius-lg:   0.75rem;
	--radius-xl:   1rem;
	--radius-2xl:  1.5rem;
	--radius-full: 9999px;

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

	/* Container */
	--container-max: 1200px;
	--container-narrow: 768px;
	--container-wide: 1400px;
	--container-padding: var(--space-6);

	/* Header */
	--header-height: 72px;
}

/* ==========================================================================
   Color Schemes — Light Mode Primaries
   ========================================================================== */

/* Purple (default — set in :root above) */

/* Blue */
[data-scheme="blue"] {
	--color-primary:         #2563EB;
	--color-primary-hover:   #1D4ED8;
	--color-primary-light:   #60A5FA;
	--color-primary-lighter: #BFDBFE;
	--color-primary-50:      #EFF6FF;
	--color-primary-rgb:     37, 99, 235;
}

/* Green */
[data-scheme="green"] {
	--color-primary:         #059669;
	--color-primary-hover:   #047857;
	--color-primary-light:   #34D399;
	--color-primary-lighter: #A7F3D0;
	--color-primary-50:      #ECFDF5;
	--color-primary-rgb:     5, 150, 105;
}

/* Teal */
[data-scheme="teal"] {
	--color-primary:         #0891B2;
	--color-primary-hover:   #0E7490;
	--color-primary-light:   #22D3EE;
	--color-primary-lighter: #A5F3FC;
	--color-primary-50:      #ECFEFF;
	--color-primary-rgb:     8, 145, 178;
}

/* Orange */
[data-scheme="orange"] {
	--color-primary:         #EA580C;
	--color-primary-hover:   #C2410C;
	--color-primary-light:   #FB923C;
	--color-primary-lighter: #FED7AA;
	--color-primary-50:      #FFF7ED;
	--color-primary-rgb:     234, 88, 12;
}

/* Pink */
[data-scheme="pink"] {
	--color-primary:         #DB2777;
	--color-primary-hover:   #BE185D;
	--color-primary-light:   #F472B6;
	--color-primary-lighter: #FBCFE8;
	--color-primary-50:      #FDF2F8;
	--color-primary-rgb:     219, 39, 119;
}

/* ==========================================================================
   Dark Theme — VS Code–style gray palette
   ========================================================================== */

[data-theme="dark"] {
	--color-bg:          #1E1E1E;
	--color-bg-alt:      #252526;
	--color-surface:     #252526;
	--color-surface-alt: #2D2D2D;
	--color-border:      #3E3E42;
	--color-border-light:#2D2D2D;
	--color-text:        #D4D4D4;
	--color-text-secondary: #9D9D9D;
	--color-text-muted:  #6A6A6A;
	--color-heading:     #FFFFFF;

	--shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
	--shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
	--shadow-md:  0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
	--shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.3);
	--shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.55), 0 8px 10px -6px rgba(0,0,0,0.3);
}

/* Dark + scheme overrides — brighter shades for readability on dark bg */

[data-theme="dark"] {
	--color-primary:       #818CF8;
	--color-primary-hover: #6366F1;
	--color-primary-light: #A5B4FC;
	--color-primary-50:    rgba(129,140,248,0.12);
}

[data-theme="dark"][data-scheme="blue"] {
	--color-primary:       #60A5FA;
	--color-primary-hover: #3B82F6;
	--color-primary-light: #93C5FD;
	--color-primary-50:    rgba(96,165,250,0.12);
}

[data-theme="dark"][data-scheme="green"] {
	--color-primary:       #34D399;
	--color-primary-hover: #10B981;
	--color-primary-light: #6EE7B7;
	--color-primary-50:    rgba(52,211,153,0.12);
}

[data-theme="dark"][data-scheme="teal"] {
	--color-primary:       #22D3EE;
	--color-primary-hover: #06B6D4;
	--color-primary-light: #67E8F9;
	--color-primary-50:    rgba(34,211,238,0.12);
}

[data-theme="dark"][data-scheme="orange"] {
	--color-primary:       #FB923C;
	--color-primary-hover: #F97316;
	--color-primary-light: #FDBA74;
	--color-primary-50:    rgba(251,146,60,0.12);
}

[data-theme="dark"][data-scheme="pink"] {
	--color-primary:       #F472B6;
	--color-primary-hover: #EC4899;
	--color-primary-light: #F9A8D4;
	--color-primary-50:    rgba(244,114,182,0.12);
}

/* ==========================================================================
   1. Modern CSS Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

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

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

body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
	transition: color var(--transition), background-color var(--transition);
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

input, button, textarea, select {
	font: inherit;
	color: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

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

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

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

ul, ol {
	list-style: none;
}

::selection {
	background-color: var(--color-primary);
	color: #fff;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track {
	background: var(--color-bg-alt);
}
::-webkit-scrollbar-thumb {
	background: var(--color-text-muted);
	border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
	background: var(--color-text-secondary);
}

/* ==========================================================================
   2. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	color: var(--color-heading);
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
	transition: color var(--transition);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl);  }
h5 { font-size: var(--text-lg);  }
h6 { font-size: var(--text-base); }

@media (max-width: 768px) {
	h1 { font-size: var(--text-3xl); }
	h2 { font-size: var(--text-2xl); }
	h3 { font-size: var(--text-xl);  }
}

/* ==========================================================================
   3. Layout Utilities
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.container--wide {
	max-width: var(--container-wide);
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1;
	/* padding-top: var(--space-10); */
	padding-bottom: var(--space-16);
}

.content-area {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
	padding-top: var(--space-10);
	padding-bottom: var(--space-16);
}

.has-sidebar .content-area {
	grid-template-columns: 1fr 320px;
}

@media (max-width: 1024px) {
	.has-sidebar .content-area {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   4. Screen Reader & Accessibility
   ========================================================================== */

.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;
}

.screen-reader-text:focus {
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	clip: auto !important;
	clip-path: none;
	color: var(--color-text);
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	height: auto;
	left: var(--space-2);
	padding: var(--space-3) var(--space-6);
	top: var(--space-2);
	width: auto;
	z-index: 100000;
}

.skip-link {
	position: fixed;
	top: -100%;
	left: var(--space-4);
	z-index: 10000;
	padding: var(--space-3) var(--space-6);
	background: var(--color-primary);
	color: #fff;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	font-weight: var(--font-semibold);
	transition: top var(--transition-fast);
}

.skip-link:focus {
	top: 0;
	color: #fff;
}

/* ==========================================================================
   5. SVG Icons
   ========================================================================== */

.svg-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	line-height: 1.5;
	border: 1px solid transparent;
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: all var(--transition-fast);
	text-decoration: none;
	white-space: nowrap;
}

.btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.btn--primary {
	background: var(--color-primary);
	color: #fff;
}
.btn--primary:hover {
	background: var(--color-primary-hover);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.btn--secondary {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.btn--secondary:hover {
	background: var(--color-primary);
	color: #fff;
}

.btn--ghost {
	background: transparent;
	color: var(--color-text-secondary);
	border-color: var(--color-border);
}
.btn--ghost:hover {
	background: var(--color-bg-alt);
	color: var(--color-text);
	border-color: var(--color-text-muted);
}

.btn--sm {
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-xs);
	border-radius: var(--radius-md);
}

.btn--lg {
	padding: var(--space-4) var(--space-8);
	font-size: var(--text-base);
	border-radius: var(--radius-xl);
}

.btn--icon {
	padding: var(--space-2);
	border-radius: var(--radius-lg);
	background: transparent;
	border: 1px solid transparent;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.btn--icon:hover {
	background: var(--color-bg-alt);
	color: var(--color-text);
}

/* ==========================================================================
   7. Card Component
   ========================================================================== */

.card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	transition: all var(--transition);
}

.card:hover {
	box-shadow: var(--shadow-lg);
	border-color: var(--color-primary-lighter);
	transform: translateY(-2px);
}

[data-theme="dark"] .card:hover {
	border-color: var(--color-primary);
}

.card__image {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-bg-alt);
}

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

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

.card__image-link {
	display: block;
}

.card__image-link:focus-visible {
	outline: none;
}

.card__overlay {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	z-index: 2;
}

.card__body,
.card__content {
	padding: var(--space-5) var(--space-6) var(--space-6);
}

.card__title {
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
	line-height: var(--leading-tight);
	margin-bottom: var(--space-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card__title a {
	color: var(--color-heading);
	transition: color var(--transition-fast);
}

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

.card__excerpt {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-4);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card__meta {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.card__meta .meta-item {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.card--no-image .card__body,
.card--no-image .card__content {
	padding-top: var(--space-6);
}

.card__subtitle {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-3);
	line-height: var(--leading-relaxed);
}

.card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-4);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.card__author {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.card__author img {
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	object-fit: cover;
}

.card__author-name {
	font-weight: var(--font-medium);
	color: var(--color-text);
}

.card__date-reading {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.card__separator {
	margin: 0 var(--space-1);
}

.card__reading-time {
	white-space: nowrap;
}

/* ==========================================================================
   8. Badge Component
   ========================================================================== */

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	line-height: 1.5;
	border-radius: var(--radius-full);
	white-space: nowrap;
	transition: all var(--transition-fast);
}

.badge--category {
	background: var(--color-primary-50);
	color: var(--color-primary);
}

.badge--category:hover {
	background: var(--color-primary);
	color: #fff;
}

.badge--difficulty {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.badge--difficulty-beginner {
	background: rgba(16, 185, 129, 0.1);
	color: var(--color-success);
}

.badge--difficulty-intermediate {
	background: rgba(245, 158, 11, 0.1);
	color: var(--color-warning);
}

.badge--difficulty-advanced {
	background: rgba(239, 68, 68, 0.1);
	color: var(--color-error);
}

.badge--science {
	background: var(--color-bg-alt);
	color: var(--color-text-secondary);
	border: 1px solid var(--color-border);
}

.badge--license {
	background: rgba(59, 130, 246, 0.1);
	color: var(--color-info);
}

.category-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* ==========================================================================
   9. Site Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(248, 250, 252, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--color-border);
	transition: all var(--transition);
	height: var(--header-height);
}

[data-theme="dark"] .site-header {
	background: rgba(11, 17, 32, 0.85);
}

.site-header.is-scrolled {
	box-shadow: var(--shadow-sm);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	gap: var(--space-6);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-shrink: 0;
}

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

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

.site-title {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	margin: 0;
	line-height: 1;
}

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

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

.site-description {
	display: none;
}

.main-navigation {
	display: none;
}

.main-navigation ul {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-text-secondary);
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
	white-space: nowrap;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--color-primary);
	background: var(--color-primary-50);
}

.main-navigation .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	padding: var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	flex-direction: column;
	gap: 0;
	z-index: 100;
}

.main-navigation li:hover > .sub-menu,
.main-navigation li.focus > .sub-menu {
	display: flex;
}

.main-navigation .sub-menu a {
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
}

.header-cta {
	display: none;
}

@media (min-width: 768px) {
	.main-navigation {
		display: block;
	}
	.menu-toggle {
		display: none;
	}
}

@media (min-width: 1024px) {
	.header-cta {
		display: inline-flex;
	}
}

.menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--radius-md);
	color: var(--color-text);
	cursor: pointer;
	transition: background var(--transition-fast);
}

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

.theme-toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all var(--transition-fast);
	overflow: hidden;
}

.theme-toggle:hover {
	background: var(--color-bg-alt);
	color: var(--color-text);
	border-color: var(--color-text-muted);
}

.theme-toggle .svg-icon {
	transition: transform var(--transition), opacity var(--transition);
}

.theme-toggle__sun,
.theme-toggle__moon {
	position: absolute;
}

.theme-toggle__sun {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

.theme-toggle__moon {
	opacity: 0;
	transform: rotate(90deg) scale(0);
}

[data-theme="dark"] .theme-toggle__sun {
	opacity: 0;
	transform: rotate(-90deg) scale(0);
}

[data-theme="dark"] .theme-toggle__moon {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

.search-toggle {
	display: flex;
}

/* ==========================================================================
   9b. Header Account Button & Dropdown
   ========================================================================== */

.header-account {
	position: relative;
}

/* --- Logged-out: Login Button --- */

.header-account__login-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.875rem;
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-primary);
	background: var(--color-primary-50);
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	transition: all var(--transition-fast);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}

.header-account__login-btn svg {
	flex-shrink: 0;
}

.header-account__login-btn:hover {
	background: var(--color-primary);
	color: #fff;
	box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.25);
}

/* --- Logged-in: Avatar Trigger --- */

.header-account__trigger {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 3px;
	background: transparent;
	border: 2px solid transparent;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.header-account__trigger:hover,
.header-account__trigger[aria-expanded="true"] {
	border-color: var(--color-primary-lighter);
	background: var(--color-primary-50);
}

.header-account__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.header-account__avatar--svg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--color-primary);
	background: var(--color-primary-50);
	flex-shrink: 0;
}

.header-account__avatar--svg svg {
	width: 32px;
	height: 32px;
}

.header-account__caret {
	transition: transform var(--transition-fast);
	color: var(--color-text-muted);
}

.header-account__trigger[aria-expanded="true"] .header-account__caret {
	transform: rotate(180deg);
}

/* --- Dropdown Panel --- */

.header-account__dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 260px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xl);
	padding: var(--space-2) 0;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(0.97);
	transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
	pointer-events: none;
}

.header-account__dropdown.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* User info in dropdown */

.header-account__user {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
}

.header-account__user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var(--color-primary-lighter);
}

.header-account__user-avatar--svg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 2px solid var(--color-primary-lighter);
	color: var(--color-primary);
	background: var(--color-primary-50);
}

.header-account__user-avatar--svg svg {
	width: 40px;
	height: 40px;
}

.header-account__user-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.header-account__user-name {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-heading);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.header-account__user-email {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Divider */

.header-account__divider {
	height: 1px;
	background: var(--color-border);
	margin: var(--space-1) 0;
}

/* Menu items */

.header-account__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: all var(--transition-fast);
}

.header-account__item svg {
	flex-shrink: 0;
	opacity: 0.75;
	transition: opacity var(--transition-fast);
}

.header-account__item:hover {
	background: var(--color-bg-alt);
	color: var(--color-text);
}

.header-account__item:hover svg {
	opacity: 1;
}

.header-account__item--danger {
	color: var(--color-error);
}

.header-account__item--danger:hover {
	background: rgba(239, 68, 68, 0.06);
	color: var(--color-error);
}

[data-theme="dark"] .header-account__item--danger:hover {
	background: rgba(239, 68, 68, 0.12);
}

/* ==========================================================================
   10. Mobile Drawer Menu
   ========================================================================== */

.mobile-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: all var(--transition);
}

.mobile-menu-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

.mobile-menu {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	width: min(320px, 85vw);
	background: var(--color-surface);
	border-left: 1px solid var(--color-border);
	transform: translateX(100%);
	transition: transform var(--transition);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.mobile-menu.is-active {
	transform: translateX(0);
}

.mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-6);
	border-bottom: 1px solid var(--color-border);
}

.mobile-menu__title {
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
}

.mobile-menu__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: transparent;
	border: none;
	border-radius: var(--radius-md);
	color: var(--color-text-secondary);
	cursor: pointer;
}

.mobile-menu__close:hover {
	background: var(--color-bg-alt);
	color: var(--color-text);
}

.mobile-menu__nav {
	flex: 1;
	padding: var(--space-4) var(--space-6);
}

.mobile-menu__nav ul {
	display: flex;
	flex-direction: column;
}

.mobile-menu__nav a {
	display: block;
	padding: var(--space-3) var(--space-2);
	color: var(--color-text);
	font-size: var(--text-base);
	font-weight: var(--font-medium);
	border-bottom: 1px solid var(--color-border-light);
	transition: color var(--transition-fast);
}

.mobile-menu__nav a:hover {
	color: var(--color-primary);
}

.mobile-menu__nav .sub-menu {
	padding-left: var(--space-4);
}

.mobile-menu__nav .sub-menu a {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.mobile-menu__footer {
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid var(--color-border);
}

/* --- Mobile Menu: Account Section --- */

.mobile-menu__account {
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid var(--color-border);
}

.mobile-menu__user {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.mobile-menu__user-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var(--color-primary-lighter);
}

.mobile-menu__user-avatar--svg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 2px solid var(--color-primary-lighter);
	color: var(--color-primary);
	background: var(--color-primary-50);
}

.mobile-menu__user-avatar--svg svg {
	width: 36px;
	height: 36px;
}

.mobile-menu__user-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mobile-menu__user-name {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-heading);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mobile-menu__user-email {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mobile-menu__account-links {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mobile-menu__account-link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-text-secondary);
	text-decoration: none;
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
}

.mobile-menu__account-link svg {
	flex-shrink: 0;
	opacity: 0.75;
}

.mobile-menu__account-link:hover {
	background: var(--color-bg-alt);
	color: var(--color-text);
}

.mobile-menu__account-link--danger {
	color: var(--color-error);
}

.mobile-menu__account-link--danger:hover {
	background: rgba(239, 68, 68, 0.06);
	color: var(--color-error);
}

/* ==========================================================================
   11. Hero Section
   ========================================================================== */

.hero {
	position: relative;
	padding: var(--space-16) 0 var(--space-12);
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--color-primary-rgb), 0.06) 0%, transparent 70%),
		radial-gradient(ellipse 60% 40% at 80% 20%, rgba(var(--color-primary-rgb), 0.04) 0%, transparent 60%);
	pointer-events: none;
}

[data-theme="dark"] .hero::before {
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--color-primary-rgb), 0.1) 0%, transparent 70%),
		radial-gradient(ellipse 60% 40% at 80% 20%, rgba(var(--color-primary-rgb), 0.06) 0%, transparent 60%);
}

.hero__content {
	position: relative;
}

.hero__inner {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: var(--space-12);
	align-items: center;
}

@media (max-width: 900px) {
	.hero__inner {
		grid-template-columns: 1fr;
	}
	.hero__decoration {
		display: none;
	}
	.hero__content {
		text-align: center;
	}
	.hero__actions,
	.hero__stats {
		justify-content: center;
	}
}

.hero__decoration {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.8;
}

.hero__svg {
	width: 100%;
	max-width: 380px;
	height: auto;
}

.hero__stats {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.hero__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
}

.hero__stat-number {
	font-size: var(--text-3xl);
	font-weight: var(--font-bold);
	line-height: 1;
	color: var(--color-primary);
	letter-spacing: -0.02em;
}

.hero__stat-label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: var(--font-medium);
}

.hero__stat-divider {
	width: 1px;
	height: 40px;
	background: var(--color-border);
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-4);
	margin-bottom: var(--space-6);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-primary);
	background: var(--color-primary-50);
	border: 1px solid var(--color-primary-lighter);
	border-radius: var(--radius-full);
}

[data-theme="dark"] .hero__badge {
	border-color: rgba(var(--color-primary-rgb), 0.3);
}

.hero__title {
	font-size: var(--text-5xl);
	font-weight: var(--font-bold);
	line-height: 1.1;
	margin-bottom: var(--space-6);
	letter-spacing: -0.025em;
}

.hero__title-highlight {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero__subtitle {
	font-size: var(--text-lg);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-8);
	max-width: 560px;
}

.hero__actions {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
	margin-bottom: var(--space-6);
}

.hero__search {
	width: 100%;
	max-width: 520px;
	margin: var(--space-8) auto 0;
}

.hero__search .search-form__wrapper {
	box-shadow: var(--shadow-lg);
}

@media (max-width: 768px) {
	.hero {
		padding: var(--space-10) 0 var(--space-8);
	}
	.hero__title {
		font-size: var(--text-3xl);
	}
	.hero__subtitle {
		font-size: var(--text-base);
	}
}

/* ==========================================================================
   12. Search Form
   ========================================================================== */

.search-form__wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.search-form__input {
	width: 100%;
	padding: var(--space-3) var(--space-12) var(--space-3) var(--space-4);
	font-size: var(--text-base);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	color: var(--color-text);
	transition: all var(--transition-fast);
	outline: none;
}

.search-form__input::placeholder {
	color: var(--color-text-muted);
}

.search-form__input:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-50);
}

.search-form__submit {
	position: absolute;
	right: var(--space-2);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: background var(--transition-fast);
}

.search-form__submit:hover {
	background: var(--color-primary-hover);
}

.search-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 15vh;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	visibility: hidden;
	transition: all var(--transition);
}

.search-modal.is-active {
	opacity: 1;
	visibility: visible;
}

.search-modal__inner {
	width: min(580px, 90vw);
	background: var(--color-surface);
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-xl);
	padding: var(--space-6);
	transform: translateY(-20px);
	transition: transform var(--transition);
}

.search-modal.is-active .search-modal__inner {
	transform: translateY(0);
}

.search-modal .search-form__input {
	font-size: var(--text-lg);
	padding: var(--space-4) var(--space-12) var(--space-4) var(--space-5);
}

/* ==========================================================================
   13. Posts Grid
   ========================================================================== */

.posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-8);
}

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

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

.posts-grid--featured .post-card:first-child {
	grid-column: 1 / -1;
}

.posts-grid--featured .post-card:first-child .card {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.posts-grid--featured .post-card:first-child .card__title {
	font-size: var(--text-2xl);
	-webkit-line-clamp: 3;
}

.posts-grid--featured .post-card:first-child .card__excerpt {
	-webkit-line-clamp: 4;
}

@media (max-width: 1024px) {
	.posts-grid,
	.posts-grid.columns-3 {
		grid-template-columns: repeat(2, 1fr);
	}
	.posts-grid--featured .post-card:first-child .card {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.posts-grid,
	.posts-grid.columns-2,
	.posts-grid.columns-3 {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
}

/* ==========================================================================
   14. Entry Meta
   ========================================================================== */

.entry-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

.meta-item a {
	color: var(--color-text-secondary);
}

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

.meta-item .svg-icon {
	color: var(--color-text-muted);
}

.meta-updated {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-left: var(--space-1);
}

.meta-avatar {
	width: 24px;
	height: 24px;
	border-radius: var(--radius-full);
}

/* ==========================================================================
   15. Single Post
   ========================================================================== */

/* --- Header --- */
.single-post-header {
	padding: var(--space-8) 0 var(--space-6);
	text-align: center;
}

.single-post-header .container {
	max-width: 800px;
}

.single-post-header__top {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

.single-post-header__top .category-badges {
	justify-content: center;
	margin-bottom: 0;
}

.single-post-header__badges {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.single-post-header .single-post-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: var(--font-bold);
	line-height: 1.2;
	margin-bottom: var(--space-3);
	letter-spacing: -0.025em;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.single-post-header .single-post-subtitle {
	font-size: var(--text-lg);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-5);
	line-height: var(--leading-relaxed);
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.single-post-meta {
	display: flex;
	justify-content: center;
}

.single-post-meta .entry-meta {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
	padding: var(--space-2) var(--space-4);
	background: var(--color-bg-alt);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
}

/* --- Hero Image --- */
.single-post-hero {
	margin-bottom: var(--space-8);
}

.post-hero-image {
	margin-bottom: 0;
	border-radius: var(--radius-2xl);
	overflow: hidden;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: var(--shadow-lg);
}

.post-hero-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

/* --- Content Area --- */
.single-post-content {
	max-width: 768px;
	margin: 0 auto;
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
}

.single-post-content > * + * {
	margin-top: var(--space-6);
}

/* --- Supplementary boxes wrapper --- */
.single-post-extras {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	max-width: 768px;
	margin: var(--space-8) auto;
}

@media (min-width: 640px) {
	.single-post-extras {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}
}

.single-post-extras .tutorial-download,
.single-post-extras .software-info-box {
	margin: 0;
	max-width: none;
}

/* --- Footer (Tags + Share) --- */
.single-post-footer {
	max-width: 768px;
	margin: var(--space-8) auto 0;
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.single-post-footer .tags-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.single-post-footer .social-share {
	margin: 0;
	max-width: none;
}

/* ==========================================================================
   15.1 Entry Content — Prose
   ========================================================================== */

.entry-content h2 {
	font-size: var(--text-2xl);
	margin-top: var(--space-12);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.entry-content h3 {
	font-size: var(--text-xl);
	margin-top: var(--space-8);
	margin-bottom: var(--space-3);
}

.entry-content h4 {
	font-size: var(--text-lg);
	margin-top: var(--space-6);
	margin-bottom: var(--space-2);
}

.entry-content p {
	color: var(--color-text-secondary);
}

.entry-content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--color-primary-lighter);
	transition: text-decoration-color var(--transition-fast);
}

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

.entry-content strong {
	color: var(--color-heading);
	font-weight: var(--font-semibold);
}

/* ---- Modern List Styles ---- */

.entry-content ul,
.entry-content ol {
	padding-left: 0;
	margin: var(--space-6) 0;
	color: var(--color-text-secondary);
	list-style: none;
}

.entry-content ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.entry-content ol {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	counter-reset: list-counter;
}

/* --- UL items: custom bullet --- */
.entry-content ul > li {
	position: relative;
	padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
	border-radius: var(--radius-md);
	line-height: var(--leading-relaxed);
	transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.entry-content ul > li::before {
	content: "";
	position: absolute;
	left: var(--space-3);
	top: calc(var(--space-2) + 0.55em);
	width: 7px;
	height: 7px;
	border-radius: var(--radius-full);
	background: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-50);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.entry-content ul > li:hover {
	background-color: var(--color-primary-50);
}

.entry-content ul > li:hover::before {
	transform: scale(1.25);
	box-shadow: 0 0 0 5px var(--color-primary-50);
}

/* --- OL items: custom numbered badge --- */
.entry-content ol > li {
	position: relative;
	padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-8) + var(--space-3));
	border-radius: var(--radius-md);
	line-height: var(--leading-relaxed);
	counter-increment: list-counter;
	transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.entry-content ol > li::before {
	content: counter(list-counter);
	position: absolute;
	left: var(--space-2);
	top: var(--space-2);
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	background: var(--color-primary-50);
	color: var(--color-primary);
	transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.entry-content ol > li:hover {
	background-color: var(--color-primary-50);
}

.entry-content ol > li:hover::before {
	background: var(--color-primary);
	color: #fff;
	transform: scale(1.1);
}

/* --- Nested lists --- */
.entry-content li > ul,
.entry-content li > ol {
	margin: var(--space-2) 0 0 0;
}

.entry-content ul ul > li::before {
	width: 5px;
	height: 5px;
	background: var(--color-primary-light);
	box-shadow: 0 0 0 2px var(--color-primary-50);
}

.entry-content ol ol {
	counter-reset: nested-counter;
}

.entry-content ol ol > li {
	counter-increment: nested-counter;
}

.entry-content ol ol > li::before {
	content: counter(nested-counter);
	width: 22px;
	height: 22px;
	font-size: 0.65rem;
	background: transparent;
	color: var(--color-primary-light);
	border: 1.5px solid var(--color-primary-lighter);
}

.entry-content ol ol > li:hover::before {
	background: var(--color-primary-light);
	color: #fff;
	border-color: var(--color-primary-light);
}

/* --- single-post-content scope duplicates for specificity --- */
.single-post-content ul,
.single-post-content ol {
	padding-left: 0;
	list-style: none;
}

/* --- Checkbox-style lists (for [ ] / [x] patterns via Gutenberg) --- */
.entry-content ul.has-check-items > li::before {
	content: "\2713";
	width: 20px;
	height: 20px;
	font-size: var(--text-xs);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background: var(--color-success);
	color: #fff;
	box-shadow: none;
	top: var(--space-2);
}

.entry-content blockquote {
	padding: var(--space-5) var(--space-6);
	margin: var(--space-8) 0;
	border-left: 4px solid var(--color-primary);
	background: var(--color-primary-50);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	font-style: italic;
}

.entry-content blockquote p {
	color: var(--color-text);
}

.entry-content pre {
	padding: var(--space-5);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	line-height: 1.7;
}

[data-theme="dark"] .entry-content pre {
	background: #0f172a;
}

.entry-content code {
	font-family: var(--font-mono);
	font-size: 0.875em;
	padding: 0.125em 0.375em;
	background: var(--color-bg-alt);
	border-radius: var(--radius-sm);
	color: var(--color-primary);
}

.entry-content pre code {
	padding: 0;
	background: transparent;
	color: inherit;
	border-radius: 0;
}

.entry-content img {
	border-radius: var(--radius-lg);
	margin: var(--space-6) auto;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
	margin: var(--space-6) 0;
}

.entry-content th,
.entry-content td {
	padding: var(--space-3) var(--space-4);
	text-align: left;
	border-bottom: 1px solid var(--color-border);
}

.entry-content th {
	font-weight: var(--font-semibold);
	color: var(--color-heading);
	background: var(--color-bg-alt);
}

.entry-content hr {
	border: none;
	height: 1px;
	background: var(--color-border);
	margin: var(--space-10) 0;
}

.entry-content figure {
	margin: var(--space-8) 0;
}

.entry-content figcaption {
	text-align: center;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-top: var(--space-2);
}

.entry-footer {
	max-width: 768px;
	margin: 0 auto;
}

.tags-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.tags-list .svg-icon {
	color: var(--color-text-muted);
	margin-right: var(--space-1);
}

.tags-list a {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
}

.tags-list a:hover {
	background: var(--color-primary-50);
	color: var(--color-primary);
	border-color: var(--color-primary-lighter);
}

/* ==========================================================================
   16. Software Info Box
   ========================================================================== */

.software-info-box {
	max-width: 768px;
	margin: var(--space-6) auto;
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.software-info-box__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	margin-bottom: var(--space-3);
	color: var(--color-primary);
}

.software-info-box__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.software-info-box__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-border-light);
}

.software-info-box__row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.software-info-box__row dt {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	font-weight: var(--font-medium);
}

.software-info-box__row dd {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-heading);
}

.software-info-box__row dd a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

/* ==========================================================================
   16.1 Tutorial Summary — Compact Card
   ========================================================================== */

.tutorial-summary {
	max-width: 768px;
	margin: 0 auto var(--space-8);
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	border-left: 4px solid var(--color-primary);
}

.tutorial-summary__header {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.tutorial-summary__header .svg-icon {
	color: var(--color-primary);
	flex-shrink: 0;
}

.tutorial-summary__title {
	font-size: var(--text-base);
	font-weight: var(--font-bold);
	color: var(--color-heading);
	margin: 0;
}

.tutorial-summary__goal {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
	margin: 0 0 var(--space-3);
}

.tutorial-summary__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
}

.tutorial-summary__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 3px var(--space-3);
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	border-radius: var(--radius-full);
	white-space: nowrap;
}

.tutorial-summary__chip--difficulty {
	background: var(--color-bg-alt);
	color: var(--color-heading);
}

.difficulty-dot {
	flex-shrink: 0;
	vertical-align: middle;
}

.tutorial-summary__chip--time {
	background: var(--color-primary-50);
	color: var(--color-primary);
}

.tutorial-summary__chip--time .svg-icon {
	flex-shrink: 0;
}

.tutorial-summary__chip--software {
	background: var(--color-bg-alt);
	color: var(--color-text-secondary);
	border: 1px solid var(--color-border);
}

.tutorial-summary__chip--software .svg-icon {
	flex-shrink: 0;
	color: var(--color-primary);
}

.tutorial-summary__prereq {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	padding-top: var(--space-2);
	border-top: 1px solid var(--color-border-light);
	margin-top: var(--space-2);
}

.tutorial-summary__prereq-label {
	font-weight: var(--font-semibold);
	color: var(--color-text-secondary);
	margin-right: var(--space-1);
}

/* ==========================================================================
   16.1b Tutorial Download Box
   ========================================================================== */

.tutorial-download {
	max-width: 768px;
	margin: var(--space-6) auto;
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.tutorial-download__title {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	color: var(--color-heading);
	margin-bottom: var(--space-3);
}

.tutorial-download__title .svg-icon {
	color: var(--color-primary);
}

.tutorial-download__name {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-heading);
	margin-bottom: var(--space-1);
}

.tutorial-download__desc {
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-3);
}

.tutorial-download__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: #fff;
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	border: 1px solid transparent;
	transition: all var(--transition-fast);
}

.tutorial-download__link:hover {
	color: #fff;
	background: var(--color-primary-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   16.2 Tutorial Steps & Code Copy
   ========================================================================== */

.single-post-content ol.unicasuite-steps {
	counter-reset: tutorial-step;
	list-style: none;
	padding-left: 0;
	margin: var(--space-8) 0;
	display: grid;
	gap: var(--space-4);
}

.single-post-content ol.unicasuite-steps > li {
	position: relative;
	padding: var(--space-5);
	padding-left: var(--space-12);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	line-height: var(--leading-relaxed);
	color: var(--color-text-secondary);
	counter-increment: tutorial-step;
}

.single-post-content ol.unicasuite-steps > li::before {
	content: counter(tutorial-step);
	position: absolute;
	left: var(--space-4);
	top: var(--space-4);
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	background: var(--color-primary-50);
	color: var(--color-primary);
}

.single-post-content ol.unicasuite-steps > li img {
	margin-top: var(--space-4);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
}

.single-post-content pre.has-copy-button {
	position: relative;
	padding-top: calc(var(--space-5) + 28px);
}

.code-copy-btn {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.code-copy-btn:hover {
	border-color: var(--color-primary-lighter);
	color: var(--color-primary);
}

.code-copy-btn.is-copied {
	background: var(--color-success);
	color: #fff;
	border-color: transparent;
}

/* ==========================================================================
   16.3 Per-Post FAQ — Accordion
   ========================================================================== */

.post-faq {
	max-width: 768px;
	margin: var(--space-8) auto var(--space-6);
	padding: var(--space-4) var(--space-5) var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.post-faq__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
	margin-bottom: var(--space-3);
	color: var(--color-heading);
}

.post-faq__title .svg-icon {
	color: var(--color-primary);
	flex-shrink: 0;
}

.post-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* --- Accordion Item (details/summary) --- */
.post-faq__item {
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	background: var(--color-surface-alt);
	overflow: hidden;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.post-faq__item[open] {
	border-color: var(--color-primary-lighter);
	box-shadow: 0 0 0 1px rgba(var(--color-primary-rgb), 0.08);
}

.post-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-3);
	cursor: pointer;
	list-style: none;
	user-select: none;
	-webkit-user-select: none;
	transition: background var(--transition-fast);
}

.post-faq__item summary::-webkit-details-marker {
	display: none;
}

.post-faq__item summary::marker {
	display: none;
	content: "";
}

.post-faq__item summary:hover {
	background: var(--color-bg-alt);
}

.post-faq__item summary:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
	border-radius: var(--radius-lg);
}

.post-faq__question-text {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-heading);
	line-height: var(--leading-tight);
	flex: 1;
}

.post-faq__chevron {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--radius-full);
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
	transition: transform var(--transition), background var(--transition-fast), color var(--transition-fast);
}

.post-faq__item[open] .post-faq__chevron {
	transform: rotate(180deg);
	background: var(--color-primary-50);
	color: var(--color-primary);
}

.post-faq__answer {
	padding: 0 var(--space-3) var(--space-3);
	animation: faqSlideDown 200ms ease-out;
}

@keyframes faqSlideDown {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.post-faq__answer p {
	margin: 0;
	font-size: var(--text-xs);
	line-height: var(--leading-relaxed);
	color: var(--color-text-secondary);
}

/* ==========================================================================
   17. Author Box
   ========================================================================== */

.author-box {
	max-width: 768px;
	margin: var(--space-10) auto;
	display: flex;
	align-items: flex-start;
	gap: var(--space-5);
	padding: var(--space-6);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.author-box__avatar {
	flex-shrink: 0;
}

.author-box__avatar img {
	width: 72px;
	height: 72px;
	border-radius: var(--radius-full);
	object-fit: cover;
}

.author-box__info,
.author-box__content {
	flex: 1;
}

.author-box__label {
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	margin-bottom: var(--space-1);
}

.author-box__name {
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
	margin-bottom: var(--space-2);
}

.author-box__name a {
	color: var(--color-heading);
}

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

.author-box__bio {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-3);
}

.author-box__footer {
	padding-top: var(--space-2);
}

.author-box__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-primary);
}

.author-box__link:hover {
	color: var(--color-primary-hover);
}

@media (max-width: 640px) {
	.author-box {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.author-box__footer {
		display: flex;
		justify-content: center;
	}
}

/* ==========================================================================
   18. Social Share
   ========================================================================== */

.social-share {
	max-width: 768px;
	margin: var(--space-5) auto 0;
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.social-share__label {
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-text-secondary);
	white-space: nowrap;
}

.social-share__buttons {
	display: flex;
	gap: var(--space-2);
}

.social-share__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-lg);
	color: var(--color-text-secondary);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	transition: all var(--transition-fast);
}

.social-share__btn:hover {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   18.1 Single Post — Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.single-post-header {
		padding: var(--space-6) 0 var(--space-4);
	}

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

	.single-post-header .single-post-subtitle {
		font-size: var(--text-base);
	}

	.single-post-meta .entry-meta {
		justify-content: center;
		gap: var(--space-3);
		padding: var(--space-2) var(--space-3);
	}

	.post-hero-image {
		border-radius: var(--radius-lg);
	}

	.single-post-content {
		font-size: var(--text-base);
	}

	.tutorial-summary {
		padding: var(--space-4);
	}

	.tutorial-summary__chips {
		gap: var(--space-1);
	}

	.post-faq {
		padding: var(--space-3) var(--space-3) var(--space-2);
		margin-top: var(--space-6);
	}

	.post-faq__title {
		font-size: var(--text-base);
		margin-bottom: var(--space-2);
	}

	.post-faq__question-text {
		font-size: var(--text-xs);
	}

	.post-faq__answer p {
		font-size: var(--text-xs);
	}

	.post-faq__item summary {
		padding: var(--space-2);
	}

	.post-faq__answer {
		padding: 0 var(--space-2) var(--space-2);
	}

	.single-post-footer {
		padding-top: var(--space-4);
	}

	.single-post-extras {
		grid-template-columns: 1fr;
	}

	.software-info-box,
	.tutorial-download {
		padding: var(--space-4);
	}

	.social-share {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}
}

@media (max-width: 640px) {
	.single-post-header__top {
		flex-direction: column;
		gap: var(--space-2);
	}
}

/* ==========================================================================
   19. Related Posts
   ========================================================================== */

.related-posts {
	padding: var(--space-12) 0;
	border-top: 1px solid var(--color-border);
}

.related-posts__title {
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	margin-bottom: var(--space-8);
	text-align: center;
}

.related-posts__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

@media (max-width: 768px) {
	.related-posts__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   20. Post Navigation (Prev / Next)
   ========================================================================== */

.post-navigation {
	max-width: 768px;
	margin: 0 auto var(--space-12);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
}

.post-navigation__item {
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	transition: all var(--transition);
}

.post-navigation__item:hover {
	border-color: var(--color-primary-lighter);
	box-shadow: var(--shadow-md);
}

.post-navigation__item--next {
	text-align: right;
}

.post-navigation__label {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	margin-bottom: var(--space-2);
}

.post-navigation__item--next .post-navigation__label {
	justify-content: flex-end;
}

.post-navigation__title {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-heading);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-navigation__title:hover {
	color: var(--color-primary);
}

@media (max-width: 640px) {
	.post-navigation {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   21. Archive Header
   ========================================================================== */

.archive-header {
	padding: var(--space-10) 0 var(--space-6);
	text-align: center;
}

.archive-header__title {
	font-size: var(--text-3xl);
	font-weight: var(--font-bold);
	margin-bottom: var(--space-2);
}

.archive-header__description {
	font-size: var(--text-lg);
	color: var(--color-text-secondary);
	max-width: 600px;
	margin: 0 auto;
}

/* Author Archive Header */
.author-archive-header {
	padding: var(--space-10) 0 var(--space-6);
}

.author-archive-meta {
	display: flex;
	align-items: flex-start;
	gap: var(--space-6);
}

.author-archive-avatar {
	border-radius: 50%;
	flex-shrink: 0;
	width: 120px;
	height: 120px;
	object-fit: cover;
	border: 3px solid var(--color-border);
}

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

.author-archive-name {
	font-size: var(--text-3xl);
	font-weight: var(--font-bold);
	margin-bottom: var(--space-3);
}

.author-archive-bio {
	font-size: var(--text-base);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-3);
}

.author-archive-website {
	font-size: var(--text-sm);
	color: var(--color-primary);
	text-decoration: none;
}

.author-archive-website:hover {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.author-archive-meta {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* ==========================================================================
   22. Search Results
   ========================================================================== */

.search-header {
	padding: var(--space-10) 0 var(--space-6);
	text-align: center;
}

.search-header__title {
	font-size: var(--text-3xl);
	font-weight: var(--font-bold);
	margin-bottom: var(--space-3);
}

.search-header__count {
	font-size: var(--text-base);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-6);
}

.search-header .search-form {
	max-width: 520px;
	margin: 0 auto;
}

.search-result {
	padding: var(--space-6);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	transition: all var(--transition);
}

.search-result:hover {
	border-color: var(--color-primary-lighter);
	box-shadow: var(--shadow-md);
}

.search-result + .search-result {
	margin-top: var(--space-4);
}

.search-result__title {
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	margin-bottom: var(--space-2);
}

.search-result__title a {
	color: var(--color-heading);
}

.search-result__title a:hover {
	color: var(--color-primary);
}

.search-result__excerpt {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-3);
}

/* ==========================================================================
   23. 404 Page
   ========================================================================== */

.error-404 {
	padding: var(--space-16) 0;
	text-align: center;
}

.error-404__illustration {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	margin-bottom: var(--space-8);
	background: var(--color-primary-50);
	border-radius: var(--radius-full);
	color: var(--color-primary);
}

.error-404__code {
	font-size: 6rem;
	font-weight: var(--font-bold);
	color: var(--color-primary);
	line-height: 1;
	margin-bottom: var(--space-4);
	letter-spacing: -0.05em;
}

.error-404__title {
	font-size: var(--text-2xl);
	font-weight: var(--font-semibold);
	margin-bottom: var(--space-4);
}

.error-404__message {
	font-size: var(--text-lg);
	color: var(--color-text-secondary);
	max-width: 480px;
	margin: 0 auto var(--space-8);
}

.error-404 .search-form {
	max-width: 400px;
	margin: 0 auto var(--space-8);
}

.error-404__links {
	display: flex;
	justify-content: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}

/* ==========================================================================
   24. Breadcrumbs
   ========================================================================== */

.breadcrumbs {
	padding: var(--space-4) 0;
	font-size: var(--text-sm);
}

.breadcrumbs__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-text-muted);
}

.breadcrumbs__item a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-text-secondary);
	transition: color var(--transition-fast);
}

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

.breadcrumbs__item span[aria-current="page"] {
	color: var(--color-text);
	font-weight: var(--font-medium);
}

.breadcrumbs__item .svg-icon {
	color: var(--color-text-muted);
}

/* ==========================================================================
   25. Pagination
   ========================================================================== */

.pagination {
	margin-top: var(--space-10);
	text-align: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 0;
}

.pagination .page-numbers li {
	display: inline;
}

.pagination .page-numbers a,
.pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-text-secondary);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition: all var(--transition-fast);
}

.pagination .page-numbers a:hover {
	background: var(--color-primary-50);
	color: var(--color-primary);
	border-color: var(--color-primary-lighter);
}

.pagination .page-numbers .current {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

.pagination .page-numbers .dots {
	border: none;
	background: transparent;
}

/* ==========================================================================
   26. Comments
   ========================================================================== */

.comments-area {
	max-width: 768px;
	margin: var(--space-12) auto;
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.comments-title {
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	margin-bottom: var(--space-8);
}

.comment-list {
	margin-bottom: var(--space-10);
}

.comment-list .comment {
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	margin-bottom: var(--space-4);
}

.comment-list .comment .children {
	margin-top: var(--space-4);
	padding-left: var(--space-6);
}

.comment-list .comment .children .comment {
	background: var(--color-bg-alt);
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.comment-meta .avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	flex-shrink: 0;
}

.comment-author {
	font-weight: var(--font-semibold);
	font-size: var(--text-sm);
	color: var(--color-heading);
}

.comment-author .says {
	display: none;
}

.comment-metadata {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.comment-metadata a {
	color: var(--color-text-muted);
}

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

.comment-content {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
}

.comment-content p + p {
	margin-top: var(--space-3);
}

.reply a {
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	color: var(--color-primary);
	margin-top: var(--space-2);
	display: inline-block;
}

.comment-respond {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
}

.comment-reply-title {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	margin-bottom: var(--space-5);
}

.comment-reply-title small {
	font-size: var(--text-sm);
	font-weight: var(--font-normal);
	margin-left: var(--space-2);
}

.comment-reply-title small a {
	color: var(--color-text-muted);
}

.comment-form-field {
	margin-bottom: var(--space-4);
}

.comment-form-field label,
.comment-form label {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-heading);
	margin-bottom: var(--space-1);
}

.comment-form-field .required {
	color: var(--color-error);
}

.comment-form-field input,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	color: var(--color-text);
	transition: border-color var(--transition-fast);
	outline: none;
}

.comment-form-field input:focus,
.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-50);
}

.comment-form-comment textarea,
.comment-form textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	color: var(--color-text);
	min-height: 140px;
	resize: vertical;
	outline: none;
	transition: border-color var(--transition-fast);
}

.comment-form-comment {
	margin-bottom: var(--space-4);
}

.comment-form-comment label {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-heading);
	margin-bottom: var(--space-1);
}

.form-submit {
	margin-top: var(--space-4);
}

.form-submit .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.form-submit .submit:hover {
	background: var(--color-primary-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.comment-form-cookies-consent input[type="checkbox"] {
	margin-top: 3px;
	accent-color: var(--color-primary);
}

.comment-form-cookies-consent label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-bottom: 0;
}

/* ==========================================================================
   27. Sidebar & Widgets
   ========================================================================== */

/* --- Single post layout with sidebar --- */
/* .container already sets max-width: --container-max (1200px); no override needed here */
.single-layout {
	width: 100%;
}

.single-layout.has-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: var(--space-8);
	align-items: start;
}

.single-layout__content {
	min-width: 0;
	max-width: var(--container-narrow); /* cap content at readable width (~768px) */
}

.single-layout__sidebar {
	position: sticky;
	top: calc(var(--header-height) + var(--space-6));
	max-height: calc(100vh - var(--header-height) - var(--space-12));
	overflow-y: auto;
	scrollbar-gutter: stable;
	padding-right: var(--space-2);
	overscroll-behavior: contain;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

@media (min-width: 1025px) {
	.single-layout.has-sidebar .single-layout__content {
		max-width: none;
	}
}

/* Scrollbar styling for sidebar */
.single-layout__sidebar::-webkit-scrollbar {
	width: 3px;
}

.single-layout__sidebar::-webkit-scrollbar-track {
	background: transparent;
}

.single-layout__sidebar::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: var(--radius-full);
}

/* --- ToC when inside sidebar --- */
.toc-sidebar-slot:empty {
	display: none;
}

.toc--in-sidebar {
	max-width: 100%;
	margin-bottom: 0;
	font-size: var(--text-xs);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: none;
}

.toc--in-sidebar .toc__header {
	padding: var(--space-3) var(--space-4);
}

.toc--in-sidebar .toc__title {
	font-size: var(--text-xs);
}

.toc--in-sidebar .toc__count {
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	font-size: 10px;
}

.toc--in-sidebar .toc__list {
	padding: 0 var(--space-3) var(--space-3);
}

.toc--in-sidebar .toc__sublist {
	padding-left: var(--space-3);
}

.toc--in-sidebar .toc__link {
	padding: 3px var(--space-2);
	font-size: var(--text-xs);
	gap: var(--space-2);
	line-height: 1.45;
}

.toc--in-sidebar .toc__marker {
	width: 5px;
	height: 5px;
}

.toc--in-sidebar .toc__link.is-active .toc__marker {
	box-shadow: 0 0 0 2px var(--color-primary-lighter);
}

.toc--in-sidebar .toc__item--h3 > .toc__link,
.toc--in-sidebar .toc__item--h4 > .toc__link {
	font-size: 11px;
}

.toc--in-sidebar .toc__item--h4 > .toc__link .toc__marker {
	width: 3px;
	height: 3px;
}

/* --- Inline ToC placeholder while ToC is in sidebar --- */
.toc-inline-placeholder {
	display: none;
}

/* --- Responsive: collapse sidebar below 1024px --- */
@media (max-width: 1024px) {
	.single-layout.has-sidebar {
		grid-template-columns: 1fr;
	}

	.single-layout__sidebar {
		position: static;
		max-height: none;
		overflow-y: visible;
	}

	/* Keep ToC inline on tablets/mobile */
	.toc-sidebar-slot {
		display: none !important;
	}
}

.widget-area {
	position: sticky;
	top: calc(var(--header-height) + var(--space-6));
	align-self: start;
}

/* --- Widget card wrapper --- */
.single-layout__sidebar .widget,
.widget-area .widget {
	margin-bottom: var(--space-4);
	padding: var(--space-4) var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
}

.single-layout__sidebar .widget:last-child,
.widget-area .widget:last-child {
	margin-bottom: 0;
}

.widget.card {
	padding: var(--space-4) var(--space-5);
}

.widget.card:hover {
	transform: none;
}

/* --- Widget title --- */
.widget-title,
.widget .wp-block-heading {
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--color-text-muted);
	margin: 0 0 var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--color-border);
}

/* --- Widget lists --- */
.widget ul {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li {
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-border-light);
}

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

.widget li a {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	transition: color var(--transition-fast);
	text-decoration: none;
}

.widget li a:hover {
	color: var(--color-primary);
}

/* count badge (categories, archives) */
.widget li .post-count,
.widget li a + .post-count {
	float: right;
	font-size: 11px;
	color: var(--color-text-muted);
	background: var(--color-bg-alt);
	padding: 1px 6px;
	border-radius: var(--radius-full);
	line-height: 1.6;
}

/* --- Widget select --- */
.widget select {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	outline: none;
}

/* --- Search widget (classic) --- */
.widget_search .search-form,
.widget .search-form {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.widget_search .search-form label,
.widget .search-form label {
	flex: 1;
	margin: 0;
	font-size: 0;          /* hide "Search:" label text */
}

.widget_search .search-field,
.widget .search-field {
	width: 100%;
	padding: 7px var(--space-3);
	font-size: var(--text-sm);
	font-family: var(--font-sans);
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	outline: none;
	transition: border-color 0.2s;
	appearance: none;
}

.widget_search .search-field:focus,
.widget .search-field:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}

.widget_search .search-field::placeholder,
.widget .search-field::placeholder {
	color: var(--color-text-muted);
}

.widget_search .search-submit,
.widget .search-submit {
	flex-shrink: 0;
	padding: 7px var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	font-family: var(--font-sans);
	color: #fff;
	background: var(--color-primary);
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background 0.2s;
	white-space: nowrap;
}

.widget_search .search-submit:hover,
.widget .search-submit:hover {
	background: var(--color-primary-hover);
}

/* --- Search widget (block) --- */
.widget .wp-block-search,
.single-layout__sidebar .wp-block-search {
	margin: 0;
}

.widget .wp-block-search__label,
.single-layout__sidebar .wp-block-search__label {
	display: none;
}

.widget .wp-block-search__inside-wrapper,
.single-layout__sidebar .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	border: none;
	padding: 0;
}

.widget .wp-block-search__input,
.single-layout__sidebar .wp-block-search__input {
	width: 100%;
	padding: 7px var(--space-3);
	font-size: var(--text-sm);
	font-family: var(--font-sans);
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-md) !important;
	outline: none;
	box-shadow: none !important;
	transition: border-color 0.2s;
}

.widget .wp-block-search__input:focus,
.single-layout__sidebar .wp-block-search__input:focus {
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12) !important;
}

.widget .wp-block-search__input::placeholder,
.single-layout__sidebar .wp-block-search__input::placeholder {
	color: var(--color-text-muted);
}

.widget .wp-block-search__button,
.single-layout__sidebar .wp-block-search__button {
	flex-shrink: 0;
	padding: 7px var(--space-3) !important;
	font-size: var(--text-sm) !important;
	font-weight: var(--font-medium) !important;
	font-family: var(--font-sans) !important;
	color: #fff !important;
	background: var(--color-primary) !important;
	border: none !important;
	border-radius: var(--radius-md) !important;
	cursor: pointer;
	transition: background 0.2s;
	line-height: 1.5;
}

.widget .wp-block-search__button:hover,
.single-layout__sidebar .wp-block-search__button:hover {
	background: var(--color-primary-hover) !important;
}

/* --- Recent posts widget --- */
.widget_recent_entries ul,
.widget .wp-block-latest-posts {
	gap: 0;
}

.widget_recent_entries li,
.widget .wp-block-latest-posts__list-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.widget_recent_entries .post-date,
.widget .wp-block-latest-posts__post-date {
	font-size: 11px;
	color: var(--color-text-muted);
}

/* --- Tag cloud widget --- */
.widget_tag_cloud .tagcloud,
.widget .wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding: 0;
}

.widget_tag_cloud .tagcloud a,
.widget .wp-block-tag-cloud a {
	display: inline-block;
	padding: 3px var(--space-3);
	font-size: var(--text-xs) !important;
	font-weight: var(--font-medium);
	color: var(--color-text-secondary);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	text-decoration: none;
}

.widget_tag_cloud .tagcloud a:hover,
.widget .wp-block-tag-cloud a:hover {
	background: var(--color-primary-50);
	color: var(--color-primary);
	border-color: var(--color-primary-lighter);
}

/* --- Calendar widget --- */
.widget_calendar table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-xs);
}

.widget_calendar th,
.widget_calendar td {
	text-align: center;
	padding: 4px;
	color: var(--color-text-secondary);
}

.widget_calendar th {
	color: var(--color-text-muted);
	font-weight: var(--font-semibold);
}

.widget_calendar caption {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	margin-bottom: var(--space-2);
	color: var(--color-text);
}

.widget_calendar td a {
	color: var(--color-primary);
	font-weight: var(--font-semibold);
}

/* --- RSS widget --- */
.widget_rss .rss-widget-icon {
	display: none;
}

.widget_rss li {
	line-height: 1.5;
}

.widget_rss .rss-widget-item-data,
.widget_rss .rsswidget-date {
	font-size: 11px;
	color: var(--color-text-muted);
	display: block;
	margin-top: 2px;
}

/* --- Text / HTML widget --- */
.widget_text p,
.widget_html p {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-3);
}

.widget_text p:last-child,
.widget_html p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.widget-area {
		position: static;
	}
}

/* ==========================================================================
   28. Newsletter CTA
   ========================================================================== */

.newsletter-cta {
	position: relative;
	padding: var(--space-16) 0;
	overflow: hidden;
}

.newsletter-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--color-primary) 0%, #7C3AED 100%);
	opacity: 0.04;
}

[data-theme="dark"] .newsletter-cta::before {
	opacity: 0.08;
}

.newsletter-cta__inner {
	position: relative;
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
	padding: var(--space-10) var(--space-8);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-lg);
}

.newsletter-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--space-5);
	background: var(--color-primary-50);
	color: var(--color-primary);
	border-radius: var(--radius-xl);
}

.newsletter-cta__title {
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	margin-bottom: var(--space-3);
}

.newsletter-cta__description {
	font-size: var(--text-base);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-6);
	line-height: var(--leading-relaxed);
}

.newsletter-cta__form {
	max-width: 460px;
	margin: 0 auto;
}

.newsletter-cta__input-group {
	display: flex;
	gap: var(--space-3);
}

.newsletter-cta__input-group input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
	font-family: inherit;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	color: var(--color-text);
	outline: none;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.newsletter-cta__input-group input[type="email"]::placeholder {
	color: var(--color-text-muted);
}

.newsletter-cta__input-group input[type="email"]:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-50);
}

.newsletter-cta__privacy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.newsletter-cta__privacy svg {
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.newsletter-cta__input-group {
		flex-direction: column;
	}
}

/* ==========================================================================
   29. Footer
   ========================================================================== */

.site-footer {
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	transition: background var(--transition), border-color var(--transition);
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-10);
	padding: var(--space-12) 0 var(--space-8);
}

.footer-widgets .widget-title {
	color: var(--color-heading);
	border-bottom: none;
	padding-bottom: 0;
}

@media (max-width: 768px) {
	.footer-widgets {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-4);
	padding: var(--space-6) 0;
	border-top: 1px solid var(--color-border);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.footer-copyright {
	color: var(--color-text-muted);
}

.footer-nav ul {
	display: flex;
	gap: var(--space-6);
}

.footer-nav a {
	color: var(--color-text-secondary);
	font-size: var(--text-sm);
	transition: color var(--transition-fast);
}

.footer-nav a:hover {
	color: var(--color-primary);
}

.footer-social {
	display: flex;
	gap: var(--space-3);
}

.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-lg);
	color: var(--color-text-muted);
	transition: all var(--transition-fast);
}

.footer-social a:hover {
	color: var(--color-primary);
	background: var(--color-primary-50);
}

/* ==========================================================================
   30. Back to Top
   ========================================================================== */

.back-to-top {
	position: fixed;
	bottom: var(--space-8);
	right: var(--space-8);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--color-surface);
	color: var(--color-text-secondary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all var(--transition);
}

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

.back-to-top:hover {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
	transform: translateY(-2px);
}

@media (max-width: 640px) {
	.back-to-top {
		bottom: var(--space-4);
		right: var(--space-4);
		width: 40px;
		height: 40px;
	}
}

/* ==========================================================================
   31. Page Template
   ========================================================================== */

.page-content {
	max-width: 800px;
	margin: 0 auto;
	padding: var(--space-10) 0 var(--space-16);
}

.page-content .entry-title {
	font-size: var(--text-4xl);
	font-weight: var(--font-bold);
	margin-bottom: var(--space-8);
	text-align: center;
}

.page-content .post-hero-image {
	margin-bottom: var(--space-8);
}

/* ==========================================================================
   32. Content None
   ========================================================================== */

.no-results {
	text-align: center;
	padding: var(--space-16) var(--space-6);
}

.no-results__title {
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	margin-bottom: var(--space-4);
}

.no-results__message {
	font-size: var(--text-base);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-8);
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

.no-results .search-form {
	max-width: 400px;
	margin: 0 auto;
}

/* ==========================================================================
   33. WordPress Defaults
   ========================================================================== */

.alignleft {
	float: left;
	margin-right: var(--space-6);
	margin-bottom: var(--space-4);
}

.alignright {
	float: right;
	margin-left: var(--space-6);
	margin-bottom: var(--space-4);
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignwide {
	max-width: calc(var(--container-max) + var(--space-8));
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

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

.wp-caption {
	margin-bottom: var(--space-6);
	max-width: 100%;
}

.wp-caption img {
	display: block;
	border-radius: var(--radius-lg);
}

.wp-caption-text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-align: center;
	margin-top: var(--space-2);
}

.gallery {
	display: grid;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }

.gallery-item img {
	border-radius: var(--radius-md);
}

.sticky .card {
	border-color: var(--color-primary-lighter);
	position: relative;
}

.sticky .card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.edit-link {
	display: inline-block;
	margin-top: var(--space-2);
}

.edit-link a {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	padding: var(--space-1) var(--space-2);
	background: var(--color-bg-alt);
	border-radius: var(--radius-sm);
}

.edit-link a:hover {
	color: var(--color-primary);
}

/* ==========================================================================
   34. Table of Contents
   ========================================================================== */

/* ---- Container ---- */
.toc {
	position: relative;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-xs);
	transition: box-shadow var(--transition);
}

.toc:hover {
	box-shadow: var(--shadow-sm);
}

.toc:not(.toc--in-sidebar) {
	width: 100%;
	max-width: 768px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--space-10);
}

/* ---- Header ---- */
.toc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
}

.toc__title-group {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

.toc__icon {
	color: var(--color-primary);
	flex-shrink: 0;
}

.toc__title {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-heading);
	margin: 0;
	white-space: nowrap;
}

.toc__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--color-primary-50);
	color: var(--color-primary);
	font-size: 11px;
	font-weight: var(--font-bold);
	border-radius: var(--radius-full);
	line-height: 1;
}

/* ---- Toggle button ---- */
.toc__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-text-muted);
	cursor: pointer;
	transition: all var(--transition-fast);
	flex-shrink: 0;
}

.toc__toggle:hover {
	background: var(--color-bg-alt);
	color: var(--color-primary);
}

.toc__toggle:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.toc__toggle-icon {
	transition: transform var(--transition);
}

.toc__toggle[aria-expanded="false"] .toc__toggle-icon {
	transform: rotate(-90deg);
}

/* ---- Reading progress bar ---- */
.toc__progress {
	height: 2px;
	background: var(--color-border-light);
	overflow: hidden;
}

.toc__progress-bar {
	height: 100%;
	width: 0%;
	background: var(--color-primary);
	border-radius: 0 var(--radius-full) var(--radius-full) 0;
	transition: width 120ms ease-out;
}

/* ---- Collapsible body ---- */
.toc__body {
	overflow: hidden;
	transition: max-height var(--transition), opacity var(--transition);
}

.toc__body[hidden] {
	display: block !important;
	max-height: 0;
	opacity: 0;
	pointer-events: none;
}

/* Collapsed state — hide progress bar */
.toc.is-collapsed .toc__progress {
	opacity: 0;
	height: 0;
}

.toc__progress {
	transition: opacity var(--transition-fast), height var(--transition-fast);
}

/* ---- List ---- */
.toc__list,
.toc__sublist {
	list-style: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.toc__list {
	padding: 0 var(--space-5) var(--space-5);
}

.toc__sublist {
	padding-left: var(--space-5);
	margin-top: 2px;
}

/* ---- Items ---- */
.toc__item {
	position: relative;
	list-style: none;
	list-style-type: none;
}

.toc__item::marker {
	content: none;
	display: none;
}

/* ---- Links ---- */
.toc__link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: 6px var(--space-3);
	font-size: var(--text-sm);
	line-height: 1.55;
	color: var(--color-text-secondary);
	text-decoration: none;
	border-radius: var(--radius-md);
	transition:
		color var(--transition-fast),
		background var(--transition-fast),
		padding-left var(--transition-fast);
	-webkit-font-smoothing: antialiased;
	cursor: pointer;
}

/* Marker dot — replaces the old ::before pseudo */
.toc__marker {
	position: relative;
	width: 7px;
	height: 7px;
	flex-shrink: 0;
	border-radius: var(--radius-full);
	background: var(--color-border);
	transition: all var(--transition-fast);
}

.toc__text {
	flex: 1;
	min-width: 0;
}

/* Hover */
.toc__link:hover {
	color: var(--color-primary);
	background: var(--color-primary-50);
}

.toc__link:hover .toc__marker {
	background: var(--color-primary);
	transform: scale(1.3);
}

/* Active (scroll-spy) */
.toc__link.is-active {
	color: var(--color-primary);
	background: var(--color-primary-50);
	font-weight: var(--font-medium);
}

/* Top-level (h2) entries — bold */
.toc__item--h2 > .toc__link,
.toc__item--h2 > .toc__link.is-active {
	font-weight: var(--font-bold);
}

.toc__link.is-active .toc__marker {
	background: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-lighter);
	transform: scale(1.15);
}

/* Focus */
.toc__link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
}

/* ---- Sub-heading levels ---- */
.toc__item--h3 > .toc__link {
	font-size: var(--text-xs);
	padding-top: 4px;
	padding-bottom: 4px;
}

.toc__item--h3 > .toc__link .toc__marker {
	width: 5px;
	height: 5px;
}

.toc__item--h4 > .toc__link {
	font-size: var(--text-xs);
	padding-top: 3px;
	padding-bottom: 3px;
	color: var(--color-text-muted);
}

.toc__item--h4 > .toc__link .toc__marker {
	width: 4px;
	height: 4px;
	opacity: 0.6;
}

/* ---- Dark mode ---- */
[data-theme="dark"] .toc {
	background: var(--color-surface);
	border-color: var(--color-border);
}

[data-theme="dark"] .toc__count {
	background: rgba(129, 140, 248, 0.15);
	color: var(--color-primary);
}

[data-theme="dark"] .toc__link.is-active,
[data-theme="dark"] .toc__link:hover {
	background: rgba(129, 140, 248, 0.1);
}

[data-theme="dark"] .toc__link.is-active .toc__marker {
	box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25);
}

/* ---- Print ---- */
@media print {
	.toc { display: none; }
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
	.toc__header {
		padding: var(--space-3) var(--space-4);
	}

	.toc__list {
		padding: 0 var(--space-4) var(--space-4);
	}

	.toc__sublist {
		padding-left: var(--space-4);
	}
}

/* ==========================================================================
   35. Print Styles
   ========================================================================== */

@media print {
	*,
	*::before,
	*::after {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	body {
		font-size: 12pt;
		line-height: 1.5;
	}

	.site-header,
	.site-footer,
	.sidebar,
	.widget-area,
	.back-to-top,
	.hero,
	.newsletter-cta,
	.social-share,
	.related-posts,
	.post-navigation,
	.comments-area,
	.pagination,
	.breadcrumbs,
	.search-modal,
	.mobile-menu,
	.mobile-menu-overlay,
	.theme-toggle,
	.menu-toggle,
	.header-actions {
		display: none !important;
	}

	a {
		text-decoration: underline;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}

	img {
		max-width: 100% !important;
		page-break-inside: avoid;
	}

	p, h2, h3 {
		orphans: 3;
		widows: 3;
	}

	h2, h3 {
		page-break-after: avoid;
	}
}