/* ========================================
   BLOWFISH — a Bludit theme inspired by Blowfish
   Monochrome palette with light & dark modes
   ======================================== */

/* ----------------------------------------
   INTER — self-hosted (no third-party font request)
   ---------------------------------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-700.woff2') format('woff2');
}

/* ----------------------------------------
   THEME TOKENS — Light Mode (default)
   ---------------------------------------- */
:root {
	color-scheme: light;

	/* Accent (monochrome: near-black in light mode) */
	--accent: #1f1f1f;
	--accent-hover: #000000;
	--accent-contrast: #ffffff;

	/* Surfaces */
	--bg-body: #ffffff;
	--bg-surface: #ffffff;
	--bg-subtle: #f5f5f5;
	--bg-hover: #f0f0f0;

	/* Text */
	--text-primary: #1f1f1f;
	--text-secondary: #595959;
	--text-muted: #8c8c8c;

	/* Borders */
	--border-color: #e5e5e5;
	--border-subtle: #ededed;

	/* Chrome (navbar / footer) — fixed dark in both modes */
	--chrome-bg: #1f1f1f;
	--chrome-text: rgba(255, 255, 255, 0.92);
	--chrome-text-hover: #ffffff;
	/* The reading progress bar sits on the chrome, not the page, so it needs a
	   colour that reads against --chrome-bg. Light's --accent is #1f1f1f, the
	   same value as --chrome-bg, which left the bar invisible. Every theme
	   below re-points this at its own --accent. */
	--progress-accent: #ffffff;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12);

	/* Code */
	--code-bg: #f5f5f5;
	--code-text: #1f1f1f;

	/* Spacing scale */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2rem;
	--space-xl: 3rem;

	/* Radii */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 18px;

	/* Typography */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-size-base: 1.05rem;
	--font-size-sm: 0.875rem;
	--font-size-xs: 0.78rem;
	--line-height-base: 1.7;

	/* The social SVGs are baked white (rgba(255,255,255,.5)). On the light theme
	   the hero sits on a light background, so darken them to black; dark themes
	   keep them white via brightness(0) invert(1). (The navbar tints its own.) */
	--social-icon-filter: brightness(0);
}

/* ----------------------------------------
   THEME TOKENS — Dark Mode
   ---------------------------------------- */
[data-theme="dark"] {
	color-scheme: dark;

	--accent: #e5e5e5;
	--accent-hover: #ffffff;
	--accent-contrast: #171717;

	--bg-body: #171717;
	--bg-surface: #1f1f1f;
	--bg-subtle: #262626;
	--bg-hover: #2e2e2e;

	--text-primary: #ededed;
	--text-secondary: #b0b0b0;
	--text-muted: #808080;

	--border-color: #333333;
	--border-subtle: #2a2a2a;

	--chrome-bg: #1f1f1f;
	--chrome-text: rgba(255, 255, 255, 0.88);
	--chrome-text-hover: #ffffff;
	--progress-accent: var(--accent);

	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
	--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5);

	--code-bg: #262626;
	--code-text: #ededed;

	--social-icon-filter: brightness(0) invert(1);
}

/* ----------------------------------------
   THEME TOKENS — Nord (arctic)
   ---------------------------------------- */
[data-theme="nord"] {
	color-scheme: dark;

	--accent: #88c0d0;
	--accent-hover: #8fbcbb;
	--accent-contrast: #2e3440;

	--bg-body: #2e3440;
	--bg-surface: #3b4252;
	--bg-subtle: #434c5e;
	--bg-hover: #4c566a;

	--text-primary: #eceff4;
	--text-secondary: #d8dee9;
	--text-muted: #8b95a8;

	--border-color: #434c5e;
	--border-subtle: #3b4252;

	--chrome-bg: #3b4252;
	--chrome-text: rgba(236, 239, 244, 0.9);
	--chrome-text-hover: #eceff4;
	--progress-accent: var(--accent);

	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
	--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.4);

	--code-bg: #3b4252;
	--code-text: #eceff4;

	--social-icon-filter: brightness(0) invert(1);
}

/* ----------------------------------------
   THEME TOKENS — Dracula
   ---------------------------------------- */
[data-theme="dracula"] {
	color-scheme: dark;

	--accent: #bd93f9;
	--accent-hover: #caa6fa;
	--accent-contrast: #282a36;

	--bg-body: #282a36;
	--bg-surface: #343746;
	--bg-subtle: #44475a;
	--bg-hover: #44475a;

	--text-primary: #f8f8f2;
	--text-secondary: #c4c6d6;
	--text-muted: #6272a4;

	--border-color: #44475a;
	--border-subtle: #383b4a;

	--chrome-bg: #343746;
	--chrome-text: rgba(248, 248, 242, 0.9);
	--chrome-text-hover: #f8f8f2;
	--progress-accent: var(--accent);

	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);

	--code-bg: #21222c;
	--code-text: #f8f8f2;

	--social-icon-filter: brightness(0) invert(1);
}

/* ----------------------------------------
   THEME TOKENS — Catppuccin Mocha
   ---------------------------------------- */
[data-theme="catppuccin"] {
	color-scheme: dark;

	--accent: #cba6f7;
	--accent-hover: #d7bdf9;
	--accent-contrast: #1e1e2e;

	--bg-body: #1e1e2e;
	--bg-surface: #313244;
	--bg-subtle: #45475a;
	--bg-hover: #585b70;

	--text-primary: #cdd6f4;
	--text-secondary: #bac2de;
	--text-muted: #a6adc8;

	--border-color: #45475a;
	--border-subtle: #313244;

	--chrome-bg: #313244;
	--chrome-text: rgba(205, 214, 244, 0.9);
	--chrome-text-hover: #cdd6f4;
	--progress-accent: var(--accent);

	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);

	--code-bg: #181825;
	--code-text: #cdd6f4;

	--social-icon-filter: brightness(0) invert(1);
}

/* ========================================
   VIEW TRANSITIONS (cross-document)
   Smooth fade between page navigations on supporting browsers
   (Chrome/Edge 126+); silently ignored elsewhere. Disabled for
   users who prefer reduced motion.
   ======================================== */
@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* ========================================
   BASE
   ======================================== */
html {
	position: relative;
	min-height: 100%;
	scroll-behavior: smooth;
	background-color: var(--bg-body);
}

body {
	font-family: var(--font-sans);
	padding-top: 56px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--bg-body);
	color: var(--text-primary);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Main content grows so the footer is pushed to the bottom (sticky footer) */
body > .container,
body > .container-wide {
	flex: 1 0 auto;
	width: 100%;
	padding-bottom: var(--space-xl);
}

/* Wider container used on article pages that have a ToC sidebar.
   Same gutter behaviour as Bootstrap's .container but with more breathing room. */
.container-wide {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
	max-width: 1400px;
}

/* Align the navbar's inner container with the wider article layout so the
   brand lines up with the ToC and the nav items line up with the right sidebar. */
body.has-toc .navbar .container {
	max-width: 1400px;
}

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

::selection {
	background: var(--accent);
	color: var(--accent-contrast);
}

/* ========================================
   LINKS
   ======================================== */
a {
	color: var(--text-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--text-secondary);
	text-decoration: none;
}

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

/* ========================================
   TYPOGRAPHY
   ======================================== */
h1, h2, h3, h4, h5, h6 {
	color: var(--text-primary);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

h1.title {
	font-size: 2.4rem;
	margin-bottom: var(--space-md);
}

h2.title {
	font-size: 1.85rem;
	margin-bottom: var(--space-sm);
}

.content {
	margin-top: var(--space-md);
}

.content h2 { font-size: 1.6rem; margin-top: var(--space-xl); }
.content h3 { font-size: 1.3rem; margin-top: var(--space-lg); }

.content p,
.content ul,
.content ol {
	margin-bottom: var(--space-md);
}

/* Justified body text on wide screens, where long lines keep the word gaps
   tidy — helped by auto-hyphenation. Below 576px the lines are too short for
   justification (rivers of whitespace), so mobile falls back to left-aligned. */
.content p {
	text-align: justify;
	text-align-last: left; /* never stretch a paragraph's final line */
	hyphens: auto;
	-webkit-hyphens: auto;
}

@media (max-width: 575.98px) {
	.content p {
		text-align: left;
		hyphens: none;
		-webkit-hyphens: none;
	}
}

/* In-content links: underlined so they're distinguishable from body text.
   The palette is monochrome (accent ≈ text colour), so colour alone can't
   signal a link — the underline does. Heading anchors and image links opt out. */
.content a:not(.heading-anchor) {
	text-decoration: underline;
	text-decoration-color: var(--text-muted);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.content a:not(.heading-anchor):hover {
	color: var(--text-primary);
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
}

/* Links that wrap an image (lightbox) shouldn't draw an underline stub */
.content a:has(> img) {
	text-decoration: none;
}

.content img {
	border-radius: var(--radius-md);
	margin: var(--space-md) 0;
}

hr {
	border: none;
	border-top: 1px solid var(--border-color);
	margin: var(--space-xl) 0;
}

/* ========================================
   FORMS
   ======================================== */
input,
textarea,
select,
.form-control {
	background-color: var(--bg-surface);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
}

.form-control:focus {
	background-color: var(--bg-surface);
	color: var(--text-primary);
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(127, 127, 127, 0.18);
}

/* ========================================
   CODE
   ======================================== */
pre,
code {
	background: var(--code-bg);
	color: var(--code-text);
	border-radius: var(--radius-sm);
	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	transition: background-color 0.25s ease, color 0.25s ease;
}

pre {
	border: 1px solid var(--border-color);
	border-left: 3px solid var(--accent);
	padding: var(--space-md);
	overflow-x: auto;
	/* max-width + min-width:0 on flex ancestors is required for overflow-x:auto
	   to actually scroll rather than expand or clip the flex column. */
	max-width: 100%;
	white-space: pre;
	line-height: 1.5; /* denser than body text — reads better for code */
}

/* Bootstrap flex columns default to min-width:auto, which lets them grow past
   their grid width and breaks overflow-x:auto on pre/code blocks inside them. */
.row > [class*="col-"] {
	min-width: 0;
}

code {
	display: inline-block;
	padding: 0.15em 0.45em;
	font-size: 0.875em;
}

pre code {
	display: block; /* not inline-block — avoids the baseline gap below the code */
	padding: 0;
	background: transparent;
	border: none;
}

/* Always-visible scrollbar on code blocks.
   -webkit-appearance: none disables macOS overlay/auto-hide behaviour;
   a non-transparent track ensures the slot is always painted. */
pre {
	scrollbar-width: thin;
	scrollbar-color: var(--text-muted) var(--bg-subtle);
}
pre::-webkit-scrollbar {
	-webkit-appearance: none;
	height: 8px;
}
pre::-webkit-scrollbar-track {
	background: var(--bg-subtle);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
pre::-webkit-scrollbar-thumb {
	background: var(--text-muted);
	border-radius: 4px;
}
pre::-webkit-scrollbar-thumb:hover {
	background: var(--text-secondary);
}

/* ========================================
   TABLES
   ======================================== */
table {
	empty-cells: show;
	border: 1px solid var(--border-color);
	width: 100%;
	font-size: 0.95em;
	margin-bottom: var(--space-md);
	border-radius: var(--radius-sm);
	overflow: hidden;
	border-collapse: collapse;
}

thead {
	background: var(--bg-subtle);
	color: var(--text-primary);
	text-align: left;
}

tbody tr {
	transition: background-color 0.2s ease;
}

tbody tr:hover {
	background-color: var(--bg-hover);
}

th, td {
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--border-color);
}

/* ========================================
   BLOCKQUOTES
   ======================================== */
blockquote {
	padding: var(--space-md) var(--space-lg);
	margin: 0 0 var(--space-lg) 0;
	border-left: 4px solid var(--accent);
	background-color: var(--bg-subtle);
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
	font-style: italic;
}

/* ========================================
   NAVBAR
   ======================================== */
.navbar-modern {
	background: var(--chrome-bg) !important;
	box-shadow: var(--shadow-sm);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	min-height: 56px;
}

.navbar-brand {
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: -0.01em;
}

.navbar-brand .text-white {
	color: #ffffff !important;
}

.navbar .nav-link {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--chrome-text) !important;
	padding: 0.4rem 0.85rem !important;
	border-radius: var(--radius-sm);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar .nav-link:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--chrome-text-hover) !important;
}

.navbar .nav-link.active {
	background-color: rgba(255, 255, 255, 0.18);
	color: var(--chrome-text-hover) !important;
}

.navbar .nav-link .bi,
.navbar .nav-link .bd-icon {
	font-size: 1.15rem;
	margin-right: 0;
	vertical-align: -0.05em;
}

/* Social SVG icons (img/<network>.svg) — rendered white on the dark navbar */
img.nav-svg-icon {
	width: 1.2rem;
	height: 1.2rem;
	filter: brightness(0) invert(1);
	opacity: 0.85;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-link:hover img.nav-svg-icon {
	opacity: 1;
	transform: translateY(-1px);
}

/* Theme toggle button */
.theme-toggle {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--chrome-text) !important;
	border-radius: var(--radius-sm);
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.4);
	color: #ffffff !important;
}

.theme-toggle .bi,
.theme-toggle .bd-icon {
	font-size: 1.1rem;
	margin-right: 0;
}

/* ----------------------------------------
   THEME PICKER DROPDOWN
   ---------------------------------------- */
.theme-picker-wrap {
	position: relative;
}

.theme-picker {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	display: flex;
	gap: 2px;
	padding: 10px 8px;
	background: #111111;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-md);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
	z-index: 1051;
	/* hidden by default */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px) scale(0.95);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
	pointer-events: none;
}

.theme-picker.is-open {
	visibility: visible;
	opacity: 1;
	transform: translateY(0) scale(1);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
	pointer-events: auto;
}

.swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	padding: 6px 7px;
	cursor: pointer;
	border-radius: 8px;
	transition: background 0.12s;
}

.swatch:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* --sb = swatch background (bg-body of that theme)
   --sa = swatch accent colour                       */
.swatch-dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sb);
	border: 2px solid var(--sa);
	transition: box-shadow 0.15s;
}

.swatch.is-active .swatch-dot {
	box-shadow: 0 0 0 2px var(--sa), 0 0 0 4px rgba(255, 255, 255, 0.18);
}

.swatch-label {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.45);
	transition: color 0.12s;
}

.swatch.is-active .swatch-label {
	color: rgba(255, 255, 255, 0.9);
}

/* ========================================
   PROFILE HERO (Blowfish-style homepage)
   ======================================== */
.profile {
	padding: var(--space-lg) 0 var(--space-md);
	margin-bottom: var(--space-md);
	border-bottom: 1px solid var(--border-color);
}

.profile-avatar {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--bg-surface);
	box-shadow: var(--shadow-md);
	margin-bottom: var(--space-md);
}

.profile-name {
	font-size: 2.1rem;
	margin-bottom: var(--space-xs);
}

.profile-bio {
	color: var(--text-secondary);
	font-size: 1.1rem;
	margin-bottom: var(--space-md);
}

.profile-social {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-md);
}

.profile-social a {
	display: inline-flex;
}

.profile-social-icon {
	width: 1.4rem;
	height: 1.4rem;
	opacity: 0.65;
	filter: var(--social-icon-filter);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.profile-social a:hover .profile-social-icon {
	opacity: 1;
	transform: translateY(-2px);
}

@media (max-width: 767.98px) {
	.profile-avatar { width: 120px; height: 120px; }
	.profile-name { font-size: 1.7rem; }
}

/* ========================================
   HOME SEARCH (relocated under the hero)
   ======================================== */
.home-search {
	margin: 0 0 var(--space-md);
}

.home-search .plugin,
.home-search .plugin-content {
	border: none;
	padding: 0;
	margin: 0;
}

/* Hide the "Search" label — Popeye-style bare search bar */
.home-search .plugin-label {
	display: none;
}

.home-search .plugin-content,
.home-search form {
	display: flex;
	width: 100%;
	gap: var(--space-sm);
	align-items: stretch;
	margin: 0;
}

/* Force the theme palette over the plugin's own / Bootstrap defaults */
.home-search input,
.home-search .form-control {
	flex: 1 1 auto;
	margin: 0 !important;
	background-color: var(--bg-surface) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: var(--radius-sm) !important;
}

.home-search input::placeholder,
.home-search .form-control::placeholder {
	color: var(--text-muted) !important;
}

.home-search button,
.home-search .btn {
	flex: 0 0 auto;
	width: auto !important;          /* cancel Bootstrap's btn-block */
	margin: 0 !important;
	white-space: nowrap;
	background-color: var(--accent) !important;
	border: 1px solid var(--accent) !important;
	color: var(--accent-contrast) !important;
	border-radius: var(--radius-sm) !important;
}

@media (max-width: 575.98px) {
	.home-search .plugin-content,
	.home-search form {
		flex-direction: column;
	}

	.home-search button,
	.home-search .btn {
		width: 100% !important;
	}
}

/* ========================================
   POST LIST (titles only)
   ======================================== */
.post-list {
	margin-top: var(--space-xl);
}

.post-list-item {
	padding: var(--space-lg) 0;
	border-bottom: 1px solid var(--border-subtle);
}

.post-list-item:first-child {
	padding-top: 0;
}

.post-list-item:last-child {
	border-bottom: none;
}

/* Stacked: title, then date right beneath it */
.post-list-title {
	font-size: 1.4rem;
	font-weight: 600;
	margin: 0 0 0.2rem;
	color: var(--text-primary);
	transition: color 0.2s ease;
}

.post-list-head a:hover .post-list-title {
	color: var(--text-secondary);
}

.post-list-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	white-space: nowrap;
}

.post-list-meta .bi,
.post-list-meta .bd-icon {
	margin-right: 0.25rem;
}

/* Excerpt: 1-2 lines of the page description, clamped so long ones can't
   push the list around */
.post-list-excerpt {
	margin: 0.6rem 0 0;
	color: var(--text-secondary);
	font-size: 0.95rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-list-item .post-taxonomy {
	margin-top: var(--space-sm);
}

/* Cover thumbnail: text left, image right (Blowfish-style) */
.post-list-row {
	display: flex;
	gap: var(--space-md);
	align-items: flex-start;
}

.post-list-main {
	flex: 1 1 auto;
	min-width: 0; /* allow long titles/URLs to wrap instead of pushing the thumb */
}

.post-list-thumb {
	flex: 0 0 auto;
	display: block;
}

.post-list-thumb img {
	width: 168px;
	height: 112px;
	object-fit: cover;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-subtle);
	background: var(--bg-subtle);
	transition: transform 0.2s ease;
}

.post-list-thumb:hover img {
	transform: scale(1.03);
}

@media (max-width: 575.98px) {
	.post-list-thumb img {
		width: 96px;
		height: 72px;
	}
}

/* "+N" overflow badge — muted, links to the post (where all tags are shown) */
.taxonomy-badge-more {
	color: var(--text-muted);
	border-style: dashed;
}

/* ========================================
   POST CARDS (single page / post)
   ======================================== */
.card-modern {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: var(--space-xl);
	margin-bottom: var(--space-xl);
}

.card-modern:last-child {
	border-bottom: none;
}

.card-modern .card-img-top {
	border-radius: var(--radius-md);
}

.card-modern .card-body {
	padding: 0;
	margin-top: var(--space-md);
}

.card-modern .title {
	color: var(--text-primary);
	transition: color 0.2s ease;
}

.card-modern a:hover .title {
	color: var(--text-secondary);
}

.cover-image-wrapper {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-md);
	/* Reserve space at a fixed ratio so the cover doesn't shift layout while it
	   loads (Cumulative Layout Shift). */
	aspect-ratio: 16 / 9;
}

.cover-image-wrapper .card-img-top {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.card-modern:hover .cover-image-wrapper .card-img-top {
	transform: scale(1.03);
}

/* ========================================
   METADATA (date, reading time)
   ======================================== */
.metadata {
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	align-items: center;
}

.metadata i,
.metadata .bd-icon {
	color: var(--text-muted);
	margin-right: 0.35rem;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn-primary-gradient {
	background: var(--accent);
	border: none;
	color: var(--accent-contrast);
	padding: 0.6rem 1.3rem;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: var(--font-size-sm);
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: var(--shadow-sm);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.btn-primary-gradient:hover {
	background: var(--accent-hover);
	color: var(--accent-contrast);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	text-decoration: none;
}

.btn-primary-gradient .bi,
.btn-primary-gradient .bd-icon {
	margin-right: 0;
	transition: transform 0.2s ease;
}

.btn-primary-gradient:hover .bi,
.btn-primary-gradient:hover .bd-icon {
	transform: translateX(3px);
}

/* ========================================
   TAXONOMY (tags & categories)
   ======================================== */
.post-taxonomy {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}

.taxonomy-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	font-size: var(--font-size-xs);
	font-weight: 500;
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
	background: transparent;
	transition: all 0.2s ease;
}

.taxonomy-badge .bi,
.taxonomy-badge .bd-icon {
	margin-right: 0.35rem;
	font-size: 0.85em;
}

.taxonomy-badge:hover {
	background: var(--accent);
	color: var(--accent-contrast);
	border-color: var(--accent);
}

/* ========================================
   PAGINATION
   ======================================== */
.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}

/* Use .page-item .page-link (3 classes) so we beat Bootstrap's own
   .page-item:first-child/:last-child rules that round only the outer corners
   and add -1px margins — otherwise the buttons look like a connected group
   with mismatched corners. Every button is a uniform, evenly-rounded box. */
.pagination .page-item .page-link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 2.6rem;
	min-height: 2.6rem;
	margin: 0 !important;
	padding: 0.5rem 0.7rem;
	background: var(--bg-surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm) !important;
	color: var(--text-primary);
	font-weight: 500;
	line-height: 1;
	transition: all 0.2s ease;
}

/* Chevrons sit centred (the shared icon margin would push them off-centre) */
.pagination .page-item .page-link .bd-icon {
	margin-right: 0;
}

.pagination .page-item .page-link:hover {
	background: var(--accent);
	color: var(--accent-contrast);
	border-color: var(--accent);
	transform: translateY(-2px);
}

/* Current page: highlighted, non-interactive */
.pagination .page-item.active .page-link {
	background: var(--accent);
	color: var(--accent-contrast);
	border-color: var(--accent);
	transform: none;
	cursor: default;
}

.pagination .page-item.disabled .page-link {
	background: var(--bg-subtle);
	color: var(--text-muted);
	border-color: var(--border-color);
}

/* ========================================
   SIDEBAR + PLUGINS
   ======================================== */
.sidebar-container {
	margin-top: var(--space-xl);
	background: var(--bg-surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	font-size: 0.9rem;
}

/* Author card inside the sidebar (article view) */
.sidebar-author {
	padding-bottom: 1.2rem;
	margin-bottom: 1.2rem;
	border-bottom: 1px solid var(--border-subtle);
	text-align: center;
}

.sidebar-author-label {
	display: block;
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
	margin-bottom: 0.85rem;
}

.sidebar-author-identity {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
}

.sidebar-author-avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--border-color);
	transition: transform 0.2s ease;
}

.sidebar-author-avatar:hover {
	transform: translateY(-2px);
}

.sidebar-author-name {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--text-primary);
	line-height: 1.3;
}

.sidebar-author-bio {
	color: var(--accent);
	font-size: var(--font-size-xs);
	margin: 0.15rem 0 0;
	line-height: 1.4;
	opacity: 0.75;
	text-shadow: 0 0 12px var(--accent);
}

.plugin {
	padding-bottom: 1.2rem;
	margin-bottom: 1.2rem;
	border-bottom: 1px solid var(--border-subtle);
}

.plugin:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* The navigation plugin is wrapped in .js-random-nav, so it matches
   .plugin:last-child even when it isn't last — restore its divider/spacing. */
.js-random-nav .plugin {
	border-bottom: 1px solid var(--border-subtle);
	margin-bottom: 1.2rem;
	padding-bottom: 1.2rem;
}

/* …unless the wrapped navigation really is the last item in the sidebar. */
.sidebar-container > .js-random-nav:last-child .plugin {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.plugin-label {
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
	margin-bottom: var(--space-sm);
}

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

.plugin ul li {
	padding: 0.15rem 0;
}

.plugin ul li a {
	color: var(--text-secondary);
	display: block;
	transition: color 0.2s ease;
}

.plugin ul li a:hover {
	color: var(--text-primary);
}

/* Tags & categories in sidebar — badge style */
.plugin.plugin-tags ul,
.plugin.plugin-categories ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.plugin.plugin-tags li,
.plugin.plugin-categories li {
	padding: 0;
}

.plugin.plugin-tags li a,
.plugin.plugin-categories li a {
	background: var(--bg-subtle);
	color: var(--text-secondary);
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	font-size: var(--font-size-xs);
	font-weight: 500;
	display: inline-block;
	transition: all 0.2s ease;
}

.plugin.plugin-tags li a:hover,
.plugin.plugin-categories li a:hover {
	background: var(--accent);
	color: var(--accent-contrast);
}

/* Categories grid: as many ~7rem columns as fit — 2 on the wider article-page
   sidebar, automatically 1 on the narrower homepage sidebar — so names are never
   crushed into a too-small cell. */
.plugin.plugin-categories ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: 0.4rem;
}

.plugin.plugin-categories li {
	min-width: 0; /* let grid items shrink rather than overflow */
}

.plugin.plugin-categories li a {
	/* fill the cell and centre the label; equal-height pills per row */
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
	padding: 0.3rem 0.55rem;
	line-height: 1.25;
	/* wrap only at spaces (e.g. "Security" / "(1)"), never mid-word */
	overflow-wrap: normal;
	word-break: normal;
}

/* Search plugin — target input directly in case the plugin omits form-control */
.plugin.plugin-search input,
.plugin.plugin-search .form-control {
	border: 1px solid var(--border-color) !important;
	border-radius: var(--radius-sm) !important;
	padding: 0.6rem 0.9rem !important;
	background: var(--bg-surface) !important;
	background-color: var(--bg-surface) !important;
	color: var(--text-primary) !important;
	width: 100%;
}

.plugin.plugin-search input::placeholder,
.plugin.plugin-search .form-control::placeholder {
	color: var(--text-muted) !important;
}

.plugin.plugin-search input:focus,
.plugin.plugin-search .form-control:focus {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px rgba(127, 127, 127, 0.18) !important;
	outline: none !important;
	background: var(--bg-surface) !important;
	background-color: var(--bg-surface) !important;
}

.plugin.plugin-search button,
.plugin.plugin-search .btn {
	background: var(--accent) !important;
	background-color: var(--accent) !important;
	border: 1px solid var(--accent) !important;
	color: var(--accent-contrast) !important;
	padding: 0.55rem 1.2rem;
	border-radius: var(--radius-sm);
	font-weight: 600;
	transition: background-color 0.2s ease, transform 0.2s ease;
	margin-top: var(--space-sm);
}

/* Higher-specificity rule for the sidebar context so we beat any plugin-bundled
   CSS that gets loaded after style.css and re-sets the button colour. */
.sidebar-container .plugin.plugin-search button,
.sidebar-container .plugin.plugin-search .btn {
	background: var(--accent) !important;
	background-color: var(--accent) !important;
	border-color: var(--accent) !important;
	color: var(--accent-contrast) !important;
}

.plugin.plugin-search button:hover,
.plugin.plugin-search .btn:hover {
	background: var(--accent-hover) !important;
	background-color: var(--accent-hover) !important;
	border-color: var(--accent-hover) !important;
	transform: translateY(-2px);
}

/* ========================================
   FOOTER
   ======================================== */
footer.footer-modern {
	flex-shrink: 0;
	width: 100%;
	min-height: 64px;
	line-height: 1.6;
	background: var(--chrome-bg);
	color: var(--chrome-text);
	padding: 1rem 0;
	font-size: var(--font-size-xs);
}

footer.footer-modern a {
	color: var(--chrome-text);
	transition: color 0.2s ease;
}

footer.footer-modern a:hover {
	color: var(--chrome-text-hover);
}

.mini-logo {
	height: 22px;
	vertical-align: middle;
	filter: brightness(0) invert(1);
}

/* ========================================
   ICON SPACING
   ======================================== */
.bi,
.bd-icon {
	margin-right: 0.4rem;
}

/* Inline SVG icons: sized to 1em via their width/height attrs, aligned like
   the old icon font, and never shrink inside flex rows. */
.bd-icon {
	vertical-align: -0.125em;
	flex: 0 0 auto;
}

/* ========================================
   TABBED CODE BLOCKS  (```tabs fences)
   ======================================== */
.tab-group {
	margin: var(--space-md) 0;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.tab-list {
	display: flex;
	background: var(--bg-subtle);
	border-bottom: 1px solid var(--border-color);
	overflow-x: auto;
	scrollbar-width: none;
}

.tab-list::-webkit-scrollbar { display: none; }

.tab-btn {
	padding: 0.45rem 1rem;
	font-size: var(--font-size-sm);
	font-weight: 600;
	font-family: var(--font-sans);
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--text-muted);
	cursor: pointer;
	white-space: nowrap;
	margin-bottom: -1px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.tab-btn:hover {
	color: var(--text-primary);
}

.tab-btn.is-active {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* Copy button pinned to the right of the tab bar (copies the active tab) */
.tab-copy {
	align-self: center;
	margin-left: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.7rem;
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-size: var(--font-size-xs);
	font-weight: 600;
	font-family: var(--font-sans);
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease;
}

.tab-copy:hover { color: var(--text-primary); }
.tab-copy.is-copied { color: var(--accent); }
.tab-copy svg { display: block; }
.tab-copy-label { line-height: 1; }

.tab-panel {
	display: none;
}

.tab-panel.is-active {
	display: block;
}

/* Inherit code-block look; remove double borders with the group container */
.tab-panel pre {
	margin: 0;
	border: none;
	border-radius: 0;
	padding: 0.7rem var(--space-md);
}

/* ========================================
   IMAGE CAROUSEL  (```carousel fences)
   ======================================== */
.carousel {
	position: relative;
	margin: var(--space-md) 0;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.carousel-slide {
	display: none;
	position: relative;
}

.carousel-slide.is-active {
	display: block;
}

.carousel-slide img {
	width: 100%;
	height: auto;
	display: block;
	cursor: zoom-in;
}

/* Caption: hidden by default, fades in on hover */
.carousel-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0.3rem 1rem;
	background: rgba(0, 0, 0, 0.6);
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.75rem;
	text-align: center;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.carousel-slide:hover .carousel-caption {
	opacity: 1;
}

/* Arrows */
.carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: rgba(0, 0, 0, 0.4);
	color: #ffffff;
	border: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease;
}

.carousel-arrow:hover { background: rgba(0, 0, 0, 0.75); }
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }

/* Dots: overlaid at the bottom of the image, no separate strip */
.carousel-dots {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	pointer-events: none;
	z-index: 5;
}

.carousel-dot {
	pointer-events: auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.carousel-dot.is-active {
	background: #ffffff;
	transform: scale(1.5);
}

/* ========================================
   LIGHTBOX
   ======================================== */
.lightbox-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: rgba(0, 0, 0, 0.88);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: zoom-out;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.lightbox-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.lightbox-overlay img {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: var(--radius-sm);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
	transform: scale(0.94);
	transition: transform 0.2s ease;
	cursor: zoom-out;
}

.lightbox-overlay.is-open img {
	transform: scale(1);
}

.lightbox-arrow {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2001;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	border: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 2rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease;
}

.lightbox-arrow:hover {
	background: rgba(255, 255, 255, 0.28);
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

/* Zoomable image wrapper — JS wraps each content image in this span */
.zoomable-wrap {
	position: relative;
	display: inline-block;
	cursor: zoom-in;
	overflow: hidden; /* clips both pseudo-elements to image bounds */
}

/* ::before — dark overlay */
.zoomable-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.38);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
	z-index: 1;
}

/* ::after — stroke-based magnifier, centred, fixed 36 px.
   Strokes render as vectors so no pixelation at any display size. */
.zoomable-wrap::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 36px;
	height: 36px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
	z-index: 2;
}

.zoomable-wrap:hover::before,
.zoomable-wrap:hover::after {
	opacity: 1;
}

/* ========================================
   TABLE OF CONTENTS (left sidebar, article view)
   ======================================== */
.toc-sidebar {
	margin-top: var(--space-xl);
	position: sticky;
	/* 56px = fixed navbar height; extra gap so the ToC doesn't hug it */
	top: calc(56px + var(--space-sm));
	max-height: calc(100vh - 56px - var(--space-md));
	overflow-y: auto;
	font-size: var(--font-size-sm);
}

.toc-title {
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
	margin-bottom: 0.75rem;
}

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

.toc-item {
	padding: 0.15rem 0;
}

.toc-h3 {
	padding-left: 0.75rem;
}

.toc-h4 {
	padding-left: 1.5rem;
}

.toc-link {
	color: var(--text-muted);
	text-decoration: none;
	line-height: 1.5;
	display: block;
	transition: color 0.15s ease;
}

.toc-link:hover {
	color: var(--text-primary);
	text-decoration: none;
}

.toc-link.active {
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}

/* ========================================
   SKIP-TO-CONTENT LINK (keyboard / a11y)
   ======================================== */
.skip-link {
	position: fixed;
	top: -120px;
	left: 1rem;
	z-index: 3000;
	padding: 0.6rem 1rem;
	background: var(--accent);
	color: var(--accent-contrast);
	border-radius: var(--radius-sm);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--shadow-md);
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 1rem;
	color: var(--accent-contrast);
	text-decoration: none;
	outline: 2px solid var(--accent-contrast);
	outline-offset: 2px;
}

/* The skip target shouldn't paint a focus ring when jumped to */
#main-content:focus {
	outline: none;
}

/* ========================================
   READING PROGRESS BAR
   ======================================== */
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 1040; /* above the fixed-top navbar (Bootstrap z-index 1030) */
	background: transparent;
	pointer-events: none;
}

.reading-progress-fill {
	height: 100%;
	width: 0;
	background: var(--progress-accent, var(--accent));
	transition: width 0.05s linear;
}

/* ========================================
   BACK-TO-TOP BUTTON
   ======================================== */
.back-to-top {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 1035;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-contrast);
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s, background 0.15s ease;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s, background 0.15s ease;
}

.back-to-top:hover {
	background: var(--accent-hover);
}

/* Inline SVG arrow — centred in its own viewBox, so no font baseline/bearing
   offsets. grid place-items on the button does the rest. */
.back-to-top svg {
	display: block;
}

/* ========================================
   CODE BLOCKS — header bar (language label + copy button)
   ======================================== */
.code-block {
	margin: var(--space-md) 0;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

/* The frame is owned by .code-block, so the inner <pre> drops its own.
   Tighter vertical padding (the header already bounds the top) so there's no
   tall empty band reading as a blank line above/below the numbered code. */
.code-block pre {
	margin: 0;
	border: none;
	border-radius: 0;
	padding: 0.7rem var(--space-md);
}

.code-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.3rem 0.5rem 0.3rem 0.9rem;
	background: var(--bg-subtle);
	border-bottom: 1px solid var(--border-color);
}

.code-lang {
	font-size: var(--font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
	font-family: var(--font-sans);
}

.code-copy {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text-secondary);
	font-size: var(--font-size-xs);
	font-weight: 600;
	font-family: var(--font-sans);
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.code-copy:hover { color: var(--text-primary); background: var(--bg-hover); }

.code-copy.is-copied {
	color: var(--accent-contrast);
	background: var(--accent);
	border-color: var(--accent);
}

.code-copy svg { display: block; }
.code-copy-label { line-height: 1; }

/* ========================================
   GPU HINTS — promote animated layers ahead of time
   ======================================== */
.lightbox-overlay img,
.carousel-slide img {
	will-change: transform;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.reading-progress-fill { transition: none; }
	.back-to-top,
	.back-to-top.is-visible { transform: none; }
}

/* ========================================
   SYNTAX HIGHLIGHTING (highlight.js)
   Use only the theme's token colours; keep the code block's own
   background/padding (set on pre / --code-bg) rather than hljs's.
   ======================================== */
pre code.hljs {
	padding: 0 !important;
	background: transparent !important;
	/* Each palette's base colour is paired with the palette's own background,
	   which the rule above replaces — so take the block's base text from the
	   theme instead, matching inline code. Token colours still come from the
	   palette. No !important needed here, unlike the two above: those collide
	   with the palettes' own `pre code.hljs` base block at equal specificity,
	   whereas the colour is set by `.hljs` / `code.hljs`, which this outranks. */
	color: var(--code-text);
	/* Not every palette ships hljs's base block — catppuccin-mocha only carries
	   token colours. Without overflow-x the inner code stops being a scroll
	   container, pre scrolls instead, and the block's height changes on theme
	   switch. Set it here so the layout can't depend on the palette. */
	overflow-x: auto;
}

/* ========================================
   ANCHOR OFFSET — clear the fixed navbar on ToC / hash jumps
   Without this, jumping to a heading lands it at y=0, hidden behind the
   fixed-top navbar. scroll-margin-top stops the jump below the bar.
   ======================================== */
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
	scroll-margin-top: 5rem;
}

/* ========================================
   KEYBOARD FOCUS — visible ring for keyboard users only
   ======================================== */
a:focus-visible,
button:focus-visible,
.swatch:focus-visible,
.tab-btn:focus-visible,
.carousel-arrow:focus-visible,
.carousel-dot:focus-visible,
.lightbox-arrow:focus-visible,
.code-copy:focus-visible,
.back-to-top:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Don't show the ring for mouse clicks */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

/* ========================================
   PRINT — clean, ink-friendly article output
   ======================================== */
@media print {
	.navbar-modern,
	.footer,
	.sidebar-container,
	.toc-sidebar,
	.skip-link,
	.reading-progress,
	.back-to-top,
	.code-copy,
	.code-copy-toast,
	.theme-picker-wrap {
		display: none !important;
	}

	html, body {
		background: #ffffff !important;
		color: #000000 !important;
	}

	/* Use the full page width once the chrome is gone */
	.container,
	.container-wide {
		max-width: 100% !important;
		width: 100% !important;
	}

	.card-modern {
		box-shadow: none !important;
		border: none !important;
	}

	a {
		color: #000000 !important;
		text-decoration: underline;
	}

	/* Keep code blocks readable on paper */
	pre, code {
		background: #f5f5f5 !important;
		color: #000000 !important;
		border-color: #cccccc !important;
	}

	pre {
		white-space: pre-wrap;
		word-wrap: break-word;
	}

	/* Avoid awkward page breaks */
	h1, h2, h3, h4 { page-break-after: avoid; }
	pre, blockquote, table, figure, img { page-break-inside: avoid; }
}

/* ========================================
   HEADING ANCHOR LINKS
   ======================================== */
.content h2,
.content h3,
.content h4 { position: relative; }

.heading-anchor {
	margin-left: 0.4rem;
	color: var(--text-muted);
	font-weight: 400;
	text-decoration: none;
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.content h2:hover .heading-anchor,
.content h3:hover .heading-anchor,
.content h4:hover .heading-anchor,
.heading-anchor:focus { opacity: 0.55; }

.heading-anchor:hover { color: var(--accent); opacity: 1; text-decoration: none; }

@media (hover: none) { .heading-anchor { opacity: 0.4; } }

/* ========================================
   SHARE BUTTONS
   ======================================== */
.post-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--border-subtle);
}

.post-share-label {
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
	margin-right: 0.3rem;
}

.post-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--border-color);
	border-radius: 999px;
	background: transparent;
	color: var(--text-secondary);
	font-size: var(--font-size-xs);
	font-weight: 600;
	font-family: var(--font-sans);
	cursor: pointer;
	transition: all 0.2s ease;
}

.post-share-btn:hover,
.post-share-btn.is-copied {
	background: var(--accent);
	color: var(--accent-contrast);
	border-color: var(--accent);
	text-decoration: none;
}

.post-share-btn .bd-icon { margin-right: 0; }

/* Separate the comments widget from the share row so it doesn't feel cramped. */
.utterances { margin-top: var(--space-xl) !important; }

/* ========================================
   PREV / NEXT POST NAVIGATION
   ======================================== */
.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
	margin: var(--space-lg) 0 0;
}

.post-nav-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	background: var(--bg-surface);
	transition: border-color 0.2s ease, background 0.2s ease;
}

.post-nav-item:hover {
	background: var(--bg-hover);
	border-color: var(--text-muted);
}

.post-nav-newer { text-align: right; align-items: flex-end; }

.post-nav-label {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--text-muted);
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.post-nav-title {
	color: var(--text-primary);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.35;
}

.post-nav-empty {
	border: none;
	background: transparent;
	pointer-events: none;
}

@media (max-width: 575.98px) {
	.post-nav { grid-template-columns: 1fr; }
	.post-nav-empty { display: none; }
}

/* ========================================
   RELATED POSTS
   ======================================== */
.related-posts { margin: var(--space-xl) 0 var(--space-lg); }

.related-posts-title { font-size: 1.15rem; margin-bottom: var(--space-md); }

.related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--space-sm);
}

.related-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	background: var(--bg-surface);
	color: var(--text-primary);
	transition: all 0.2s ease;
}

.related-card:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	text-decoration: none;
}

.related-cover {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-color: var(--bg-subtle);
}

.related-card-title {
	padding: 0.7rem 0.85rem;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.3;
}

/* ========================================
   CALLOUTS / ADMONITIONS  (> [!NOTE] etc.)
   ======================================== */
.callout {
	margin: var(--space-md) 0;
	padding: var(--space-sm) var(--space-md);
	border-left: 4px solid var(--cl-color, var(--accent));
	border-radius: var(--radius-sm);
	background: var(--cl-bg, var(--bg-subtle));
	color: var(--text-primary);
	font-style: normal;
}

.callout > :last-child { margin-bottom: 0; }

.callout-title {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: 0.4rem;
	font-weight: 700;
	color: var(--cl-color, var(--accent));
}

.callout-icon { flex: 0 0 auto; }

.callout-note      { --cl-color: #3b82f6; --cl-bg: rgba(59, 130, 246, 0.08); }
.callout-tip       { --cl-color: #22c55e; --cl-bg: rgba(34, 197, 94, 0.08); }
.callout-important { --cl-color: #a855f7; --cl-bg: rgba(168, 85, 247, 0.08); }
.callout-warning   { --cl-color: #f59e0b; --cl-bg: rgba(245, 158, 11, 0.10); }
.callout-caution   { --cl-color: #ef4444; --cl-bg: rgba(239, 68, 68, 0.09); }

/* Collapsible callouts — "> [!TIP]+ Title". The summary IS the title row, so
   it keeps .callout-title's styling and only adds the affordances. */
.callout-details > .callout-title {
	margin-bottom: 0;
	cursor: pointer;
	list-style: none; /* Firefox marker */
}
.callout-details > .callout-title::-webkit-details-marker { display: none; }
.callout-details[open] > .callout-title { margin-bottom: 0.4rem; }
.callout-details > .callout-title:focus-visible {
	outline: 2px solid var(--cl-color, var(--accent));
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}
/* Chevron: down when closed, up when open. margin-left:auto parks it right. */
.callout-details > .callout-title::after {
	content: '';
	flex: 0 0 auto;
	margin-left: auto;
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-0.1em, -0.1em);
	transition: transform 0.2s ease;
}
.callout-details[open] > .callout-title::after {
	transform: rotate(-135deg) translate(-0.1em, -0.1em);
}
/* .callout > :last-child can't reach through <details> */
.callout-details > :last-child { margin-bottom: 0; }

/* ========================================
   MERMAID DIAGRAMS (```mermaid fences)
   ======================================== */
.mermaid-block {
	margin: var(--space-md) 0;
	padding: var(--space-md);
	background: var(--bg-subtle);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	overflow-x: auto;
	text-align: center;
}

.mermaid-block svg {
	max-width: 100%;
	height: auto;
}

/* The library is large and fetched on demand, so the wait is visible often
   enough to deserve a placeholder rather than a collapsing gap. */
.mermaid-block.is-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 5rem;
}

.mermaid-block.is-loading::after {
	content: '';
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid var(--border-color);
	border-top-color: var(--text-muted);
	border-radius: 50%;
	animation: bd-mermaid-spin 0.7s linear infinite;
}

@keyframes bd-mermaid-spin { to { transform: rotate(360deg); } }

/* Failed render falls back to the source: let the normal <pre> framing show
   instead of nesting one bordered box inside another. */
.mermaid-block.is-error {
	padding: 0;
	background: none;
	border: 0;
	text-align: left;
}

@media (prefers-reduced-motion: reduce) {
	.mermaid-block.is-loading::after { animation: none; }
	.callout-details > .callout-title::after { transition: none; }
}

/* ========================================
   BREADCRUMBS
   ======================================== */
.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: var(--space-sm);
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.breadcrumbs a { color: var(--text-secondary); }
.breadcrumbs a:hover { color: var(--accent); text-decoration: none; }
.breadcrumb-sep { color: var(--text-muted); }
.breadcrumb-current {
	color: var(--text-muted);
	max-width: 50ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ========================================
   CUSTOM 404
   ======================================== */
.page-404 .error-body {
	text-align: center;
	padding: var(--space-xl) var(--space-md);
}

.error-code {
	margin: 0;
	font-size: 5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--accent);
}

.error-text { color: var(--text-secondary); margin-bottom: var(--space-lg); }
.error-search { max-width: 420px; margin: 0 auto var(--space-lg); }
.error-home { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ========================================
   FIGURES (image + caption)
   ======================================== */
.content figure,
.content-figure {
	margin: var(--space-md) 0;
	text-align: center;
}

.content figcaption,
.content-figure figcaption {
	margin-top: 0.5rem;
	font-size: var(--font-size-sm);
	font-style: italic;
	color: var(--text-muted);
}

/* ========================================
   MOBILE TABLE OF CONTENTS (floating button + drawer)
   ======================================== */
.toc-fab {
	position: fixed;
	left: 1.5rem;
	bottom: 1.5rem;
	z-index: 1035;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: none;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-contrast);
	box-shadow: var(--shadow-md);
	cursor: pointer;
}

.toc-fab svg { display: block; }

.toc-drawer {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: flex-end;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.toc-drawer.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.2s ease;
}

.toc-drawer-panel {
	width: 100%;
	max-height: 70vh;
	overflow-y: auto;
	padding: var(--space-lg);
	background: var(--bg-surface);
	border-top-left-radius: var(--radius-lg);
	border-top-right-radius: var(--radius-lg);
	transform: translateY(100%);
	transition: transform 0.25s ease;
}

.toc-drawer.is-open .toc-drawer-panel { transform: translateY(0); }

.toc-drawer-title {
	margin-bottom: var(--space-sm);
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
}

.toc-drawer .toc-list { list-style: none; padding: 0; margin: 0; }
/* Resting colour keeps --text-secondary rather than the sidebar's --text-muted:
   the panel sits on --bg-surface, where muted falls below WCAG AA in four of the
   five themes. Hover and active match the sidebar so both lists agree on what
   the states mean. The active rule sets colour only — font-weight stays with
   .toc-link.active — and needs .toc-drawer's specificity to beat the resting
   rule above it, which would otherwise win on source order. */
.toc-drawer .toc-link { display: block; padding: 0.5rem 0; color: var(--text-secondary); }
.toc-drawer .toc-link:hover { color: var(--text-primary); text-decoration: none; }
.toc-drawer .toc-link.active { color: var(--accent); }

/* The sidebar ToC covers desktop, so the floating button is mobile-only */
@media (min-width: 768px) {
	.toc-fab,
	.toc-drawer { display: none !important; }
}

/* ========================================
   SEARCH OVERLAY
   ======================================== */
.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 2500;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 12vh 1rem 1rem;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.search-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.15s ease;
}

.search-box {
	width: 100%;
	max-width: 560px;
	overflow: hidden;
	background: var(--bg-surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}

.search-field {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0 1.1rem;
	border-bottom: 1px solid var(--border-color);
}

.search-icon { flex: 0 0 auto; color: var(--text-muted); }

.search-input {
	flex: 1;
	min-width: 0;
	padding: 0.95rem 0;
	border: none;
	background: transparent;
	color: var(--text-primary);
	font-family: var(--font-sans);
	font-size: 1.05rem;
	outline: none;
}

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

.search-hint {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 1.1rem;
	border-top: 1px solid var(--border-subtle);
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.search-hint kbd {
	padding: 0.05em 0.4em;
	font-family: var(--font-sans);
	font-size: 0.95em;
	color: var(--text-secondary);
	background: var(--bg-subtle);
	border: 1px solid var(--border-color);
	border-radius: 4px;
}

/* Navbar search button — hidden until JS reveals it (no on-page search in view) */
.nav-search { display: none; }
.nav-search.is-visible { display: block; }

.search-results {
	list-style: none;
	margin: 0;
	padding: 0.4rem;
	max-height: 50vh;
	overflow-y: auto;
}

.search-result a {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.55rem 0.8rem;
	border-radius: var(--radius-sm);
	color: var(--text-primary);
}

.search-result a:hover,
.search-result.is-active a {
	background: var(--bg-hover);
	text-decoration: none;
}

.search-result-title { font-weight: 600; }
.search-result-meta {
	margin-left: auto;
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	white-space: nowrap;
}

.search-empty { padding: 1rem 1.2rem; color: var(--text-muted); }

/* ========================================
   SERIES BOX
   ======================================== */
.series-box {
	margin: 0 0 var(--space-lg);
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--border-color);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-sm);
	background: var(--bg-subtle);
}

.series-box-title {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: 0.4rem;
	font-weight: 700;
	color: var(--text-primary);
}

.series-box-title .bd-icon { color: var(--accent); flex: 0 0 auto; }
.series-list { margin: 0; padding-left: 1.5rem; }
.series-item { padding: 0.12rem 0; color: var(--text-secondary); }
.series-item a { color: var(--text-secondary); }
.series-item a:hover { color: var(--accent); }
.series-item.is-current span { color: var(--accent); font-weight: 600; }

/* ========================================
   CONTENT EXTRAS (kbd, mark, task lists, footnotes, external links)
   ======================================== */
.content kbd {
	display: inline-block;
	padding: 0.1em 0.45em;
	font-family: var(--font-sans);
	font-size: 0.8em;
	line-height: 1.4;
	color: var(--text-primary);
	background: var(--bg-subtle);
	border: 1px solid var(--border-color);
	border-bottom-width: 2px;
	border-radius: 5px;
	white-space: nowrap;
}

.content mark {
	padding: 0.05em 0.2em;
	border-radius: 3px;
	background: rgba(245, 200, 66, 0.35);
	color: inherit;
}

/* Small ↗ after outbound links (JS adds target=_blank to external links) */
.content a[target="_blank"]::after {
	content: "↗";
	margin-left: 0.15em;
	font-size: 0.8em;
	color: var(--text-muted);
}

/* Task lists (- [ ] / - [x]) — rendered by JS into real checkboxes */
.content ul.task-list { list-style: none; padding-left: 0.2rem; }
.content .task-list-item { display: flex; align-items: flex-start; gap: 0.5rem; }
.content .task-list-item input[type="checkbox"] { margin-top: 0.35em; flex: 0 0 auto; }

/* Footnotes (when the parser emits them) */
.content .footnotes {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--border-subtle);
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

/* Definition lists */
.content dt { font-weight: 700; }
.content dd { margin: 0 0 0.6rem; color: var(--text-secondary); }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 767.98px) {
	h1.title { font-size: 1.9rem; }
	h2.title { font-size: 1.5rem; }

	body { font-size: 1rem; }

	.sidebar-container {
		position: static;
		margin-top: var(--space-lg);
	}

	.btn-primary-gradient {
		width: 100%;
		justify-content: center;
	}

	.navbar-nav .theme-toggle {
		width: 100%;
		margin-top: 0.5rem;
		height: 42px;
	}
}