/*!
Theme Name: Carmine Bufano
Theme URI: https://carminebufano.com/
Author: Carmine Bufano
Author URI: https://carminebufano.com/
Description: Modern blog theme for carminebufano.com — clean reading-first layout with brand-blue accents, light/dark theme toggle, card-style post previews, mobile-first responsive design. Forked from Underscores (_s) and made independent.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: carminebufano
Tags: blog, two-columns, right-sidebar, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

Carmine Bufano is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Design tokens (CSS custom properties)
# Reset / base elements
# Typography
# Layout primitives (containers, page shell)
# Site header (accent bar, branding, navigation, theme toggle)
# Site footer
# Post cards (archive / index)
# Single post
# Social share row
# Comments
# Forms (search, comment, generic)
# Code & embeds
# Pagination / post navigation
# Sidebar / widgets
# Utilities & accessibility
# Animations
# Reduced motion
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Design tokens
--------------------------------------------------------------*/
:root {
	/* Brand */
	--cb-accent:        #3498db;   /* Peter River — primary brand blue from carminebufano.com */
	--cb-accent-hover:  #2980b9;   /* Belize Hole — darker for hover/active */
	--cb-accent-bar:    #3498db;   /* Top accent bar uses the primary */

	/* Surfaces — light theme */
	--cb-bg:            #ffffff;
	--cb-bg-elevated:   #fafbfc;
	--cb-bg-sidebar:    #f4f6f8;
	--cb-bg-code:       #f5f7fa;

	/* Text — light theme */
	--cb-text:          #1a1a1a;
	--cb-text-secondary:#566573;
	--cb-text-muted:    #8c95a0;
	--cb-text-on-accent:#ffffff;

	/* Borders — light theme */
	--cb-border:        #e6eaef;
	--cb-border-strong: #cfd6de;

	/* Shadows — light theme */
	--cb-shadow-sm:     0 1px 2px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.04);
	--cb-shadow-md:     0 2px 6px rgba(0,0,0,0.06), 0 6px 14px rgba(0,0,0,0.06);
	--cb-shadow-lg:     0 4px 12px rgba(0,0,0,0.08), 0 12px 24px rgba(52,152,219,0.10);

	/* Typography */
	--cb-font-sans:     "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cb-font-serif:    Georgia, "Times New Roman", Times, serif;
	--cb-font-mono:     "SF Mono", "Cascadia Code", "Roboto Mono", "Source Code Pro", Consolas, Menlo, monospace;

	--cb-fs-xs:         clamp(0.75rem, 0.74rem + 0.05vw, 0.8125rem);
	--cb-fs-sm:         clamp(0.875rem, 0.86rem + 0.1vw, 0.9375rem);
	--cb-fs-base:       clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--cb-fs-lg:         clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
	--cb-fs-xl:         clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem);
	--cb-fs-h4:         clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem);
	--cb-fs-h3:         clamp(1.5rem, 1.36rem + 0.7vw, 1.875rem);
	--cb-fs-h2:         clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
	--cb-fs-h1:         clamp(2rem, 1.6rem + 2vw, 3rem);

	--cb-lh-tight:      1.25;
	--cb-lh-snug:       1.4;
	--cb-lh-normal:     1.6;
	--cb-lh-relaxed:    1.75;

	/* Spacing scale */
	--cb-space-xxs:     0.25rem;
	--cb-space-xs:      0.5rem;
	--cb-space-sm:      0.75rem;
	--cb-space-md:      1rem;
	--cb-space-lg:      1.5rem;
	--cb-space-xl:      2rem;
	--cb-space-2xl:     3rem;
	--cb-space-3xl:     4rem;
	--cb-space-4xl:     6rem;

	/* Layout */
	--cb-container-narrow: 720px;
	--cb-container:        960px;
	--cb-container-wide:   1200px;

	--cb-radius-sm:     4px;
	--cb-radius:        8px;
	--cb-radius-lg:     14px;
	--cb-radius-pill:   999px;

	/* Motion */
	--cb-transition-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
	--cb-transition:       250ms cubic-bezier(0.4, 0, 0.2, 1);
	--cb-transition-slow:  350ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Header height (used for sticky offset if added later) */
	--cb-header-height: 64px;
}

[data-theme="dark"] {
	--cb-accent:        #58a6ff;
	--cb-accent-hover:  #79b8ff;
	--cb-accent-bar:    #58a6ff;

	--cb-bg:            #0d1117;
	--cb-bg-elevated:   #161b22;
	--cb-bg-sidebar:    #1f2937;
	--cb-bg-code:       #161b22;

	--cb-text:          #f0f6fc;
	--cb-text-secondary:#9aa6b3;
	--cb-text-muted:    #6e7681;
	--cb-text-on-accent:#0d1117;

	--cb-border:        #30363d;
	--cb-border-strong: #484f58;

	--cb-shadow-sm:     0 1px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.4);
	--cb-shadow-md:     0 2px 6px rgba(0,0,0,0.5), 0 6px 14px rgba(0,0,0,0.5);
	--cb-shadow-lg:     0 4px 12px rgba(0,0,0,0.5), 0 12px 24px rgba(88,166,255,0.15);
}


/*--------------------------------------------------------------
# Reset / base elements
--------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	padding: 0;
	background-color: var(--cb-bg);
	color: var(--cb-text);
	font-family: var(--cb-font-sans);
	font-size: var(--cb-fs-base);
	line-height: var(--cb-lh-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color var(--cb-transition), color var(--cb-transition);
}

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

a {
	color: var(--cb-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--cb-transition-fast), border-color var(--cb-transition-fast);
}

a:hover, a:focus-visible {
	color: var(--cb-accent-hover);
	border-bottom-color: var(--cb-accent-hover);
}

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

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

ul, ol { padding-left: var(--cb-space-xl); }

li > ul, li > ol { margin: var(--cb-space-xs) 0; }

dt { font-weight: 700; }
dd { margin: 0 var(--cb-space-md) var(--cb-space-md); }

figure { margin: var(--cb-space-lg) 0; }
figcaption {
	font-size: var(--cb-fs-sm);
	color: var(--cb-text-muted);
	margin-top: var(--cb-space-xs);
	text-align: center;
}

blockquote {
	margin: var(--cb-space-lg) 0;
	padding: var(--cb-space-md) var(--cb-space-lg);
	border-left: 4px solid var(--cb-accent);
	background-color: var(--cb-bg-elevated);
	color: var(--cb-text-secondary);
	font-style: italic;
	border-radius: 0 var(--cb-radius) var(--cb-radius) 0;
}

blockquote p:first-child { margin-top: 0; }
blockquote p:last-child  { margin-bottom: 0; }

table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--cb-space-lg) 0;
}

th, td {
	padding: var(--cb-space-sm) var(--cb-space-md);
	border-bottom: 1px solid var(--cb-border);
	text-align: left;
}

th {
	background-color: var(--cb-bg-elevated);
	font-weight: 700;
}


/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	font-family: var(--cb-font-sans);
	font-weight: 700;
	line-height: var(--cb-lh-tight);
	margin: 0 0 var(--cb-space-md);
	color: var(--cb-text);
	letter-spacing: -0.01em;
}

h1 { font-size: var(--cb-fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--cb-fs-h2); margin-top: var(--cb-space-2xl); }
h3 { font-size: var(--cb-fs-h3); margin-top: var(--cb-space-xl); }
h4 { font-size: var(--cb-fs-h4); margin-top: var(--cb-space-lg); }
h5, h6 { font-size: var(--cb-fs-lg); margin-top: var(--cb-space-lg); }

.entry-content > h2:first-child,
.entry-content > h3:first-child,
.entry-content > h4:first-child { margin-top: 0; }

p { margin: 0 0 var(--cb-space-md); }
.entry-content p { line-height: var(--cb-lh-relaxed); }

strong, b { font-weight: 700; }
em, i { font-style: italic; }
small { font-size: var(--cb-fs-sm); color: var(--cb-text-muted); }

mark {
	background-color: rgba(52, 152, 219, 0.15);
	color: inherit;
	padding: 0 0.2em;
	border-radius: var(--cb-radius-sm);
}


/*--------------------------------------------------------------
# Layout primitives
--------------------------------------------------------------*/
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.site-main {
	flex: 1 0 auto;
	width: 100%;
	max-width: var(--cb-container);
	margin: 0 auto;
	padding: var(--cb-space-xl) var(--cb-space-md);
}

@media (min-width: 768px) {
	.site-main { padding: var(--cb-space-2xl) var(--cb-space-lg); }
}

.entry-content {
	max-width: var(--cb-container-narrow);
	margin-left: auto;
	margin-right: auto;
}


/*--------------------------------------------------------------
# Site header
--------------------------------------------------------------*/
.site-header {
	background-color: var(--cb-bg);
	border-bottom: 1px solid var(--cb-border);
	position: relative;
}

/* The thin brand-blue accent bar at the very top */
.site-header::before {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg,
		var(--cb-accent) 0%,
		var(--cb-accent-hover) 100%);
}

.site-header-inner {
	max-width: var(--cb-container-wide);
	margin: 0 auto;
	padding: var(--cb-space-md);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cb-space-md);
}

@media (min-width: 768px) {
	.site-header-inner { padding: var(--cb-space-md) var(--cb-space-lg); }
}

.site-branding {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.site-title {
	font-size: var(--cb-fs-xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
	line-height: 1.2;
}

.site-title a {
	color: var(--cb-text);
	border-bottom: none;
}

.site-title a:hover, .site-title a:focus-visible {
	background: linear-gradient(135deg, var(--cb-accent) 0%, var(--cb-accent-hover) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.site-description {
	font-size: var(--cb-fs-sm);
	color: var(--cb-text-muted);
	margin: 0;
	line-height: 1.3;
}

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

.site-header-right {
	display: flex;
	align-items: center;
	gap: var(--cb-space-md);
}

.main-navigation { display: flex; align-items: center; }

.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius);
	color: var(--cb-text);
	cursor: pointer;
	transition: background-color var(--cb-transition-fast), border-color var(--cb-transition-fast);
}

.menu-toggle:hover, .menu-toggle:focus-visible {
	background-color: var(--cb-bg-elevated);
	border-color: var(--cb-accent);
	outline: none;
}

.menu-toggle svg { width: 20px; height: 20px; }

.menu-toggle .menu-icon-close { display: none; }
.main-navigation.toggled .menu-toggle .menu-icon-open  { display: none; }
.main-navigation.toggled .menu-toggle .menu-icon-close { display: block; }

.main-navigation > div,
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 767px) {
	.main-navigation > div {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--cb-bg);
		border-bottom: 1px solid var(--cb-border);
		box-shadow: var(--cb-shadow-md);
		padding: var(--cb-space-sm) 0;
		z-index: 50;
	}

	.main-navigation.toggled > div { display: block; }

	.main-navigation ul li a {
		display: block;
		padding: var(--cb-space-sm) var(--cb-space-md);
		color: var(--cb-text);
		border-bottom: none;
	}

	.main-navigation ul li a:hover {
		background-color: var(--cb-bg-elevated);
		color: var(--cb-accent);
	}
}

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

	.main-navigation ul {
		display: flex;
		gap: var(--cb-space-xs);
	}

	.main-navigation ul.sub-menu {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.main-navigation ul li a {
		display: inline-block;
		padding: var(--cb-space-xs) var(--cb-space-md);
		color: var(--cb-text-secondary);
		font-size: var(--cb-fs-sm);
		font-weight: 500;
		border-radius: var(--cb-radius);
		border-bottom: none;
		transition: color var(--cb-transition-fast), background-color var(--cb-transition-fast);
	}

	.main-navigation ul li a:hover,
	.main-navigation ul li.current-menu-item a {
		color: var(--cb-accent);
		background-color: var(--cb-bg-elevated);
	}

	/* Nested submenu = dropdown at desktop ----------------------------- */
	.main-navigation .menu-item-has-children {
		position: relative;
	}

	/* Chevron indicator that the parent has children */
	.main-navigation .menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		margin-left: 6px;
		vertical-align: middle;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 5px solid currentColor;
		opacity: 0.55;
		transition: transform var(--cb-transition-fast), opacity var(--cb-transition-fast);
	}

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

	.main-navigation .sub-menu {
		position: absolute;
		top: calc(100% + 4px);
		left: 0;
		min-width: 220px;
		background-color: var(--cb-bg);
		border: 1px solid var(--cb-border);
		border-radius: var(--cb-radius);
		box-shadow: var(--cb-shadow-md);
		padding: var(--cb-space-xs) 0;
		list-style: none;
		margin: 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
		z-index: 50;
	}

	.main-navigation .menu-item-has-children:hover > .sub-menu,
	.main-navigation .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 0s;
	}

	.main-navigation .sub-menu li {
		display: block;
		width: 100%;
	}

	.main-navigation .sub-menu li a {
		display: block;
		padding: var(--cb-space-xs) var(--cb-space-md);
		font-size: var(--cb-fs-sm);
		white-space: normal;
		border-radius: 0;
		color: var(--cb-text);
	}

	.main-navigation .sub-menu li a:hover {
		background-color: var(--cb-bg-elevated);
		color: var(--cb-accent);
	}
}

/* Nested submenu on mobile = nested indented list inside the hamburger drawer */
@media (max-width: 767px) {
	.main-navigation .sub-menu {
		list-style: none;
		padding-left: 0;
		margin: 0 0 0 var(--cb-space-md);
		border-left: 2px solid var(--cb-border);
	}

	.main-navigation .sub-menu li a {
		padding-left: var(--cb-space-md) !important;
		font-size: var(--cb-fs-sm);
		color: var(--cb-text-secondary) !important;
	}

	/* Small chevron on mobile parent */
	.main-navigation .menu-item-has-children > a::after {
		content: " ›";
		opacity: 0.5;
		font-size: 1.1em;
	}
}

/* Header search form (renders in every page header) */
.header-search {
	display: flex;
	align-items: center;
	background-color: var(--cb-bg-elevated);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius-pill);
	padding: 0 4px 0 var(--cb-space-sm);
	height: 38px;
	overflow: hidden;
	transition: border-color var(--cb-transition-fast), box-shadow var(--cb-transition-fast), width var(--cb-transition);
}

.header-search:focus-within {
	border-color: var(--cb-accent);
	box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.12);
}

[data-theme="dark"] .header-search:focus-within {
	box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.18);
}

.header-search-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 160px;
	background: transparent;
	border: none;
	outline: none;
	font-family: inherit;
	font-size: var(--cb-fs-sm);
	color: var(--cb-text);
	padding: 0;
	height: 100%;
}

.header-search-input::placeholder {
	color: var(--cb-text-muted);
	opacity: 1;
}

.header-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.header-search-submit {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--cb-text-secondary);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	font-weight: normal;
	transition: color var(--cb-transition-fast), background-color var(--cb-transition-fast);
}

.header-search-submit:hover,
.header-search-submit:focus-visible {
	color: var(--cb-accent);
	background-color: var(--cb-bg);
	outline: none;
}

.header-search:focus-within .header-search-submit { color: var(--cb-accent); }

.header-search-submit svg { display: block; }

/* On narrow phones, slightly narrower input but still visible (recognizable as
   a search field at a glance). The submit-icon stays prominent. */
@media (max-width: 600px) {
	.header-search-input { width: 110px; }
}

@media (max-width: 380px) {
	.header-search-input { width: 80px; font-size: var(--cb-fs-xs); }
}

/* Make the submit button always look interactive (slight bg tint) so the
   magnifier icon reads as "search button" even at small sizes. */
.header-search-submit {
	background-color: var(--cb-bg);
	color: var(--cb-accent);
}

[data-theme="dark"] .header-search-submit {
	background-color: var(--cb-bg-sidebar);
}

/* Theme toggle button */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius);
	color: var(--cb-text);
	cursor: pointer;
	transition: background-color var(--cb-transition-fast), border-color var(--cb-transition-fast), transform var(--cb-transition-fast);
}

.theme-toggle:hover, .theme-toggle:focus-visible {
	background-color: var(--cb-bg-elevated);
	border-color: var(--cb-accent);
	outline: none;
}

.theme-toggle:active { transform: scale(0.95); }

.theme-toggle svg { width: 20px; height: 20px; }

.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }

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


/*--------------------------------------------------------------
# Site footer
--------------------------------------------------------------*/
.site-footer {
	flex-shrink: 0;
	margin-top: var(--cb-space-3xl);
	padding: var(--cb-space-xl) var(--cb-space-md);
	background-color: var(--cb-bg-sidebar);
	border-top: 1px solid var(--cb-border);
	color: var(--cb-text-muted);
	font-size: var(--cb-fs-sm);
}

.site-footer-inner {
	max-width: var(--cb-container-wide);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cb-space-sm);
	text-align: center;
}

@media (min-width: 768px) {
	.site-footer-inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

.site-info { color: var(--cb-text-muted); }
.site-info a { color: var(--cb-text-secondary); }
.site-info a:hover { color: var(--cb-accent); }


/*--------------------------------------------------------------
# Post cards (archive / index)
--------------------------------------------------------------*/
.site-main > article.post,
.site-main > article.page {
	background-color: var(--cb-bg-elevated);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius-lg);
	overflow: hidden;
	box-shadow: var(--cb-shadow-sm);
	margin-bottom: var(--cb-space-lg);
	transition: transform var(--cb-transition), box-shadow var(--cb-transition), border-color var(--cb-transition);
}

body:not(.single):not(.page) .site-main > article.post:hover {
	transform: translateY(-3px);
	box-shadow: var(--cb-shadow-lg);
	border-color: rgba(52, 152, 219, 0.35);
}

.post-thumbnail {
	display: block;
	margin: 0;
	overflow: hidden;
	border-bottom: 1px solid var(--cb-border);
	border-radius: 0;
}

.post-thumbnail img {
	width: 100%;
	height: auto;
	transition: transform var(--cb-transition-slow);
}

body:not(.single) article.post:hover .post-thumbnail img {
	transform: scale(1.03);
}

/* Subtle blue border-left accent that draws on hover */
body:not(.single):not(.page) .site-main > article.post {
	position: relative;
}

body:not(.single):not(.page) .site-main > article.post::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: linear-gradient(180deg, var(--cb-accent) 0%, var(--cb-accent-hover) 100%);
	border-radius: var(--cb-radius-lg) 0 0 var(--cb-radius-lg);
	transition: width var(--cb-transition);
	pointer-events: none;
}

body:not(.single):not(.page) .site-main > article.post:hover::after {
	width: 4px;
}

body:not(.single):not(.page) .site-main > article.post .entry-header,
body:not(.single):not(.page) .site-main > article.post .entry-content,
body:not(.single):not(.page) .site-main > article.post .entry-footer {
	padding-left: var(--cb-space-lg);
	padding-right: var(--cb-space-lg);
}

body:not(.single):not(.page) .site-main > article.post .entry-header {
	padding-top: var(--cb-space-lg);
	padding-bottom: 0;
}

body:not(.single):not(.page) .site-main > article.post .entry-content {
	padding-top: var(--cb-space-sm);
	padding-bottom: var(--cb-space-sm);
	max-width: none;
}

body:not(.single):not(.page) .site-main > article.post .entry-footer {
	padding-top: var(--cb-space-md);
	padding-bottom: var(--cb-space-lg);
	border-top: 1px solid var(--cb-border);
	margin-top: var(--cb-space-md);
	display: flex;
	flex-wrap: wrap;
	gap: var(--cb-space-sm) var(--cb-space-md);
	font-size: var(--cb-fs-sm);
	color: var(--cb-text-muted);
}

.entry-title {
	font-size: var(--cb-fs-h3);
	margin: 0 0 var(--cb-space-xs);
	line-height: var(--cb-lh-tight);
}

.entry-title a {
	color: var(--cb-text);
	border-bottom: none;
}

.entry-title a:hover, .entry-title a:focus-visible { color: var(--cb-accent); }

.entry-meta {
	font-size: var(--cb-fs-sm);
	color: var(--cb-text-muted);
	margin-bottom: var(--cb-space-sm);
}

.entry-meta a {
	color: var(--cb-text-muted);
	border-bottom: none;
}

.entry-meta a:hover { color: var(--cb-accent); }

.entry-meta > span + span::before {
	content: "·";
	margin: 0 var(--cb-space-xs);
	color: var(--cb-text-muted);
	opacity: 0.6;
}

body:not(.single):not(.page) article.post .entry-content > p {
	color: var(--cb-text-secondary);
	line-height: var(--cb-lh-relaxed);
}

body:not(.single):not(.page) article.post .entry-content > p:last-child { margin-bottom: 0; }

.entry-content a.more-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--cb-space-sm);
	font-weight: 600;
	color: var(--cb-accent);
	border-bottom: none;
	transition: gap var(--cb-transition-fast), color var(--cb-transition-fast);
}

.entry-content a.more-link:hover,
.entry-content a.more-link:focus-visible {
	gap: 12px;
	color: var(--cb-accent-hover);
}

/* Category & tag pills in footer */
.cat-links a, .tags-links a {
	display: inline-block;
	padding: 2px var(--cb-space-sm);
	background-color: var(--cb-bg);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius-pill);
	color: var(--cb-text-secondary);
	font-size: var(--cb-fs-xs);
	font-weight: 500;
	margin: 0 var(--cb-space-xxs);
	transition: background-color var(--cb-transition-fast), color var(--cb-transition-fast), border-color var(--cb-transition-fast);
}

.cat-links a:hover, .tags-links a:hover {
	background-color: var(--cb-accent);
	color: var(--cb-text-on-accent);
	border-color: var(--cb-accent);
}

.comments-link a {
	color: var(--cb-text-muted);
	border-bottom: none;
}

.comments-link a:hover { color: var(--cb-accent); }


/*--------------------------------------------------------------
# Single post
--------------------------------------------------------------*/
body.single .site-main > article.post,
body.page  .site-main > article.page {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	margin-bottom: 0;
}

body.single .entry-header,
body.page  .entry-header {
	max-width: var(--cb-container-narrow);
	margin: 0 auto var(--cb-space-xl);
	text-align: center;
}

body.single .entry-breadcrumb {
	margin-bottom: var(--cb-space-md);
	font-size: var(--cb-fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

body.single .entry-breadcrumb a {
	display: inline-block;
	padding: 4px 12px;
	color: var(--cb-accent);
	background-color: rgba(52, 152, 219, 0.10);
	border-radius: var(--cb-radius-pill);
	border-bottom: none;
	transition: all var(--cb-transition-fast);
}

[data-theme="dark"] body.single .entry-breadcrumb a {
	background-color: rgba(88, 166, 255, 0.12);
}

body.single .entry-breadcrumb a:hover,
body.single .entry-breadcrumb a:focus-visible {
	background-color: var(--cb-accent);
	color: var(--cb-text-on-accent);
}

body.single .entry-title,
body.page  .entry-title {
	font-size: var(--cb-fs-h1);
	line-height: var(--cb-lh-tight);
	margin-bottom: var(--cb-space-md);
}

body.single .entry-meta,
body.page  .entry-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cb-space-xs) var(--cb-space-md);
	font-size: var(--cb-fs-sm);
}

body.single .entry-meta > span + span::before,
body.page  .entry-meta > span + span::before {
	content: "";
	margin: 0;
}

body.single .post-thumbnail,
body.page  .post-thumbnail {
	max-width: var(--cb-container-wide);
	margin: 0 auto var(--cb-space-2xl);
	border-radius: var(--cb-radius-lg);
	overflow: hidden;
	border: 1px solid var(--cb-border);
}

body.single .entry-content,
body.page  .entry-content {
	font-size: var(--cb-fs-lg);
	line-height: var(--cb-lh-relaxed);
}

body.single .entry-content h2,
body.single .entry-content h3,
body.page  .entry-content h2,
body.page  .entry-content h3 {
	margin-top: var(--cb-space-2xl);
}

body.single .entry-footer,
body.page  .entry-footer {
	max-width: var(--cb-container-narrow);
	margin: var(--cb-space-2xl) auto 0;
	padding-top: var(--cb-space-lg);
	border-top: 1px solid var(--cb-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--cb-space-sm) var(--cb-space-md);
	font-size: var(--cb-fs-sm);
	color: var(--cb-text-muted);
}

.reading-time {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}


/*--------------------------------------------------------------
# Social share row
--------------------------------------------------------------*/
.post-share {
	max-width: var(--cb-container-narrow);
	margin: var(--cb-space-2xl) auto;
	padding: var(--cb-space-lg) 0;
	border-top: 1px solid var(--cb-border);
	border-bottom: 1px solid var(--cb-border);
}

.post-share-label {
	font-size: var(--cb-fs-xs);
	color: var(--cb-text-muted);
	margin-bottom: var(--cb-space-md);
	text-align: center;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cb-space-md);
}

.post-share-label::before,
.post-share-label::after {
	content: "";
	flex: 1;
	max-width: 80px;
	height: 1px;
	background: var(--cb-border);
}

.post-share-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cb-space-sm);
}

.post-share-item { position: relative; }

.post-share-item a,
.post-share-item button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: var(--cb-bg-elevated);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius-pill);
	color: var(--cb-text-secondary);
	cursor: pointer;
	transition: all var(--cb-transition-fast);
}

.post-share-item a:hover,
.post-share-item a:focus-visible,
.post-share-item button:hover,
.post-share-item button:focus-visible {
	background-color: var(--cb-accent);
	color: var(--cb-text-on-accent);
	border-color: var(--cb-accent);
	transform: translateY(-2px);
	outline: none;
}

.post-share-item svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.post-share-item .copy-feedback {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 6px;
	background-color: var(--cb-text);
	color: var(--cb-bg);
	padding: 4px 8px;
	border-radius: var(--cb-radius-sm);
	font-size: var(--cb-fs-xs);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--cb-transition-fast);
	white-space: nowrap;
}

.post-share-item .copy-feedback.is-visible { opacity: 1; }


/*--------------------------------------------------------------
# Comments
--------------------------------------------------------------*/
.comments-area {
	max-width: var(--cb-container-narrow);
	margin: var(--cb-space-2xl) auto 0;
}

.comments-title {
	font-size: var(--cb-fs-h3);
	margin-bottom: var(--cb-space-lg);
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--cb-space-xl);
}

.comment-list ol.children {
	list-style: none;
	padding-left: var(--cb-space-lg);
	margin-top: var(--cb-space-md);
}

.comment-body {
	background-color: var(--cb-bg-elevated);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius);
	padding: var(--cb-space-md) var(--cb-space-lg);
	margin-bottom: var(--cb-space-md);
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: var(--cb-space-sm);
	margin-bottom: var(--cb-space-sm);
	font-size: var(--cb-fs-sm);
	flex-wrap: wrap;
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--cb-space-xs);
	font-weight: 600;
	color: var(--cb-text);
}

.comment-author .avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
}

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

.comment-metadata a {
	color: var(--cb-text-muted);
	border-bottom: none;
}

.comment-content { line-height: var(--cb-lh-relaxed); }
.comment-content p:last-child { margin-bottom: 0; }

.reply { margin-top: var(--cb-space-sm); }

.reply a {
	display: inline-block;
	padding: 4px var(--cb-space-sm);
	font-size: var(--cb-fs-sm);
	color: var(--cb-accent);
	background: transparent;
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius);
	border-bottom: 1px solid var(--cb-border);
	transition: all var(--cb-transition-fast);
}

.reply a:hover {
	background-color: var(--cb-accent);
	color: var(--cb-text-on-accent);
	border-color: var(--cb-accent);
}

.no-comments {
	color: var(--cb-text-muted);
	font-style: italic;
	text-align: center;
	padding: var(--cb-space-lg);
}


/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.comment-respond {
	margin-top: var(--cb-space-xl);
	padding: var(--cb-space-lg);
	background-color: var(--cb-bg-elevated);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius);
}

.comment-reply-title {
	font-size: var(--cb-fs-xl);
	margin-top: 0;
}

.comment-reply-title small a {
	font-size: var(--cb-fs-sm);
	margin-left: var(--cb-space-sm);
}

.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form .form-submit {
	margin-bottom: var(--cb-space-md);
}

.comment-form label {
	display: block;
	margin-bottom: var(--cb-space-xxs);
	font-size: var(--cb-fs-sm);
	font-weight: 600;
	color: var(--cb-text-secondary);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea {
	width: 100%;
	padding: var(--cb-space-sm) var(--cb-space-md);
	font-family: inherit;
	font-size: var(--cb-fs-base);
	color: var(--cb-text);
	background-color: var(--cb-bg);
	border: 1px solid var(--cb-border-strong);
	border-radius: var(--cb-radius);
	transition: border-color var(--cb-transition-fast), box-shadow var(--cb-transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus {
	outline: none;
	border-color: var(--cb-accent);
	box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

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

button,
input[type="submit"],
input[type="button"],
.button {
	display: inline-block;
	padding: var(--cb-space-sm) var(--cb-space-lg);
	background-color: var(--cb-accent);
	color: var(--cb-text-on-accent);
	border: 1px solid var(--cb-accent);
	border-radius: var(--cb-radius);
	font-family: inherit;
	font-size: var(--cb-fs-base);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--cb-transition-fast), border-color var(--cb-transition-fast), transform var(--cb-transition-fast);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover {
	background-color: var(--cb-accent-hover);
	border-color: var(--cb-accent-hover);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
.button:active {
	transform: translateY(1px);
}

/* Don't override theme-toggle and menu-toggle (they have their own styles above) */
.theme-toggle, .menu-toggle, .post-share-item button {
	background: transparent;
	color: inherit;
	border: 1px solid var(--cb-border);
	padding: 0;
	font-weight: normal;
}

.theme-toggle:hover, .menu-toggle:hover {
	background-color: var(--cb-bg-elevated);
	color: inherit;
}

.search-form {
	display: flex;
	gap: var(--cb-space-xs);
}

.search-form .search-field { flex: 1; }


/*--------------------------------------------------------------
# Code & embeds
--------------------------------------------------------------*/
code, kbd, samp, pre {
	font-family: var(--cb-font-mono);
	font-size: 0.9em;
}

p code, li code, h1 code, h2 code, h3 code, h4 code {
	background-color: var(--cb-bg-code);
	color: var(--cb-accent-hover);
	padding: 2px 6px;
	border-radius: var(--cb-radius-sm);
	border: 1px solid var(--cb-border);
}

pre {
	background-color: var(--cb-bg-code);
	color: var(--cb-text);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius);
	padding: var(--cb-space-md);
	margin: var(--cb-space-lg) 0;
	overflow-x: auto;
	line-height: var(--cb-lh-snug);
	font-size: var(--cb-fs-sm);
	-webkit-overflow-scrolling: touch;
}

pre code {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

/* Wrapper around <pre> with copy button (added by code-copy.js) */
.cb-pre-wrapper {
	position: relative;
	margin: var(--cb-space-lg) 0;
}

.cb-pre-wrapper pre { margin: 0; }

.cb-pre-copy {
	position: absolute;
	top: var(--cb-space-xs);
	right: var(--cb-space-xs);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	background: var(--cb-bg);
	color: var(--cb-text-secondary);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius);
	border-bottom: 1px solid var(--cb-border);
	font-family: var(--cb-font-sans);
	font-size: var(--cb-fs-xs);
	font-weight: 600;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-2px);
	transition: opacity var(--cb-transition-fast), transform var(--cb-transition-fast),
		background-color var(--cb-transition-fast), color var(--cb-transition-fast),
		border-color var(--cb-transition-fast);
}

.cb-pre-wrapper:hover .cb-pre-copy,
.cb-pre-copy:focus-visible {
	opacity: 1;
	transform: translateY(0);
	outline: none;
}

.cb-pre-copy:hover {
	background: var(--cb-accent);
	color: var(--cb-text-on-accent);
	border-color: var(--cb-accent);
}

.cb-pre-copy.is-copied {
	background: var(--cb-accent);
	color: var(--cb-text-on-accent);
	border-color: var(--cb-accent);
}

/* On touch devices (no hover): keep the button visible at low opacity */
@media (hover: none) {
	.cb-pre-copy { opacity: 0.7; transform: translateY(0); }
}

/* Embed wrappers (YouTube via youtube-embed-plus, etc.) */
.epyt-video-wrapper,
.wp-block-embed__wrapper,
.video-container {
	position: relative;
	margin: var(--cb-space-lg) 0;
	border-radius: var(--cb-radius);
	overflow: hidden;
	box-shadow: var(--cb-shadow-md);
}

.epyt-video-wrapper iframe,
.wp-block-embed__wrapper iframe {
	width: 100% !important;
	height: auto;
	aspect-ratio: 16 / 9;
	max-width: 100%;
	border: none;
}


/*--------------------------------------------------------------
# Pagination / post navigation
--------------------------------------------------------------*/
.posts-navigation,
.post-navigation,
.pagination {
	max-width: var(--cb-container-narrow);
	margin: var(--cb-space-2xl) auto;
	padding-top: var(--cb-space-xl);
	border-top: 1px solid var(--cb-border);
}

/* Numbered pagination from the_posts_pagination() */
.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: var(--cb-space-xs);
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--cb-space-sm);
	background-color: var(--cb-bg-elevated);
	color: var(--cb-text);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius);
	font-size: var(--cb-fs-sm);
	font-weight: 600;
	border-bottom: 1px solid var(--cb-border);
	transition: all var(--cb-transition-fast);
}

.pagination .page-numbers:hover {
	background-color: var(--cb-accent);
	color: var(--cb-text-on-accent);
	border-color: var(--cb-accent);
	transform: translateY(-1px);
	box-shadow: var(--cb-shadow-sm);
}

.pagination .page-numbers.current {
	background-color: var(--cb-accent);
	color: var(--cb-text-on-accent);
	border-color: var(--cb-accent);
	cursor: default;
}

.pagination .page-numbers.current:hover {
	transform: none;
}

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

.pagination .page-numbers.dots:hover {
	background: transparent;
	color: var(--cb-text-muted);
	transform: none;
	box-shadow: none;
}

.nav-links {
	display: flex;
	justify-content: space-between;
	gap: var(--cb-space-md);
	flex-wrap: wrap;
}

.nav-previous, .nav-next {
	flex: 1;
	min-width: 200px;
}

.nav-next { text-align: right; }

.nav-links a {
	display: block;
	padding: var(--cb-space-md);
	background-color: var(--cb-bg-elevated);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius);
	transition: all var(--cb-transition-fast);
	border-bottom: 1px solid var(--cb-border);
}

.nav-links a:hover {
	border-color: var(--cb-accent);
	box-shadow: var(--cb-shadow-md);
}

.nav-subtitle {
	display: block;
	font-size: var(--cb-fs-xs);
	color: var(--cb-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--cb-space-xxs);
}

.nav-title {
	color: var(--cb-text);
	font-weight: 600;
}


/*--------------------------------------------------------------
# 404 page
--------------------------------------------------------------*/
.error-404 { display: flex; justify-content: center; }

.error-404-inner {
	max-width: var(--cb-container-narrow);
	text-align: center;
	padding: var(--cb-space-2xl) var(--cb-space-md);
}

.error-404-glyph {
	font-size: clamp(5rem, 4rem + 6vw, 9rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.04em;
	background: linear-gradient(135deg, var(--cb-accent) 0%, var(--cb-accent-hover) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	margin-bottom: var(--cb-space-sm);
}

.error-404-title {
	font-size: var(--cb-fs-h2);
	margin-top: 0;
}

.error-404-lede {
	color: var(--cb-text-secondary);
	font-size: var(--cb-fs-lg);
	max-width: 50ch;
	margin: 0 auto var(--cb-space-xl);
}

.error-404-recent {
	margin-top: var(--cb-space-2xl);
	text-align: left;
}

.error-404-recent h2 {
	font-size: var(--cb-fs-lg);
	margin-bottom: var(--cb-space-md);
	margin-top: 0;
}

.error-404-recent-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.error-404-recent-list li {
	padding: var(--cb-space-sm) 0;
	border-bottom: 1px solid var(--cb-border);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--cb-space-md);
	flex-wrap: wrap;
}

.error-404-recent-list a {
	font-weight: 600;
	color: var(--cb-text);
	border-bottom: none;
}

.error-404-recent-list a:hover { color: var(--cb-accent); }

.error-404-recent-list .meta {
	font-size: var(--cb-fs-sm);
	color: var(--cb-text-muted);
}


/*--------------------------------------------------------------
# Page header (archives, categories, tags, search)
--------------------------------------------------------------*/
.page-header {
	max-width: var(--cb-container-narrow);
	margin: 0 auto var(--cb-space-xl);
	padding-bottom: var(--cb-space-md);
	border-bottom: 1px solid var(--cb-border);
	text-align: center;
}

.page-title {
	font-size: var(--cb-fs-h2);
	margin: 0 0 var(--cb-space-xs);
	letter-spacing: -0.01em;
}

/* Subtle accent on archive title — left+right short blue rules */
.page-title::before,
.page-title::after {
	display: inline-block;
	content: "";
	width: 1.5rem;
	height: 2px;
	background: var(--cb-accent);
	vertical-align: middle;
	margin: 0 var(--cb-space-md) 0.2em;
	opacity: 0.7;
}

.archive-description {
	color: var(--cb-text-secondary);
	max-width: 60ch;
	margin: var(--cb-space-md) auto 0;
}

/*--------------------------------------------------------------
# Sidebar / widgets
--------------------------------------------------------------*/
.widget-area {
	display: none; /* hidden in v1 — reading-first */
}

.widget {
	margin-bottom: var(--cb-space-lg);
	padding: var(--cb-space-md);
	background-color: var(--cb-bg-elevated);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius);
}

.widget-title {
	font-size: var(--cb-fs-lg);
	margin-top: 0;
	margin-bottom: var(--cb-space-sm);
}


/*--------------------------------------------------------------
# Utilities & accessibility
--------------------------------------------------------------*/
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	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(--cb-bg-elevated);
	border-radius: var(--cb-radius);
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.6);
	clip: auto !important;
	-webkit-clip-path: none;
	clip-path: none;
	color: var(--cb-text);
	display: block;
	font-size: var(--cb-fs-base);
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.skip-link {
	position: absolute;
	left: -9999rem;
	top: 5px;
}

.skip-link:focus {
	left: var(--cb-space-md);
	z-index: 100;
	background-color: var(--cb-accent);
	color: var(--cb-text-on-accent);
	padding: var(--cb-space-sm) var(--cb-space-md);
	border-radius: var(--cb-radius);
	border-bottom: none;
}

.alignleft   { float: left;  margin-right: var(--cb-space-md); }
.alignright  { float: right; margin-left:  var(--cb-space-md); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide   { max-width: 100%; }
.alignfull   { max-width: 100vw; margin-left: calc(50% - 50vw); }

.clearfix::after { content: ""; display: block; clear: both; }


/*--------------------------------------------------------------
# Auto table of contents (single posts)
--------------------------------------------------------------*/
.cb-toc {
	background-color: var(--cb-bg-elevated);
	border: 1px solid var(--cb-border);
	border-left: 3px solid var(--cb-accent);
	border-radius: var(--cb-radius);
	padding: var(--cb-space-md) var(--cb-space-lg);
	margin: 0 0 var(--cb-space-2xl);
	font-size: var(--cb-fs-sm);
}

.cb-toc summary {
	font-size: var(--cb-fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cb-text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--cb-space-xs);
	padding: var(--cb-space-xxs) 0;
	list-style: none;
	user-select: none;
}

.cb-toc summary::-webkit-details-marker { display: none; }

.cb-toc summary svg {
	color: var(--cb-accent);
	flex-shrink: 0;
}

.cb-toc summary:hover { color: var(--cb-text); }

.cb-toc[open] summary {
	margin-bottom: var(--cb-space-sm);
	padding-bottom: var(--cb-space-xs);
	border-bottom: 1px solid var(--cb-border);
}

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

.cb-toc ul ul {
	padding-left: var(--cb-space-md);
	margin-top: 4px;
}

.cb-toc li {
	margin: 2px 0;
	line-height: var(--cb-lh-snug);
}

.cb-toc a {
	display: block;
	padding: 4px 0;
	color: var(--cb-text-secondary);
	border-bottom: none;
	transition: color var(--cb-transition-fast), padding-left var(--cb-transition-fast);
}

.cb-toc a:hover {
	color: var(--cb-accent);
	padding-left: 4px;
}

.cb-toc a.is-active {
	color: var(--cb-accent);
	font-weight: 700;
	padding-left: 8px;
	position: relative;
}

.cb-toc a.is-active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 12px;
	background: var(--cb-accent);
	border-radius: 2px;
}

.cb-toc-h3 a { font-size: 0.95em; }


/*--------------------------------------------------------------
# Reading progress bar (single posts)
--------------------------------------------------------------*/
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 4px;
	width: 0%;
	background: linear-gradient(90deg, var(--cb-accent) 0%, var(--cb-accent-hover) 100%);
	box-shadow: 0 0 8px rgba(52, 152, 219, 0.4);
	z-index: 100;
	transition: width 80ms linear;
	pointer-events: none;
}

[data-theme="dark"] .reading-progress {
	box-shadow: 0 0 8px rgba(88, 166, 255, 0.5);
}


/*--------------------------------------------------------------
# Back-to-top button
--------------------------------------------------------------*/
.back-to-top {
	position: fixed;
	right: var(--cb-space-md);
	bottom: var(--cb-space-md);
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--cb-accent);
	color: var(--cb-text-on-accent);
	border: none;
	border-radius: var(--cb-radius-pill);
	box-shadow: var(--cb-shadow-md);
	cursor: pointer;
	opacity: 0;
	transform: translateY(20px) scale(0.85);
	pointer-events: none;
	transition: opacity var(--cb-transition), transform var(--cb-transition), background-color var(--cb-transition-fast);
	z-index: 90;
}

.back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.back-to-top:hover, .back-to-top:focus-visible {
	background-color: var(--cb-accent-hover);
	transform: translateY(-3px) scale(1);
	outline: none;
}

.back-to-top svg { width: 22px; height: 22px; }

@media (min-width: 768px) {
	.back-to-top {
		right: var(--cb-space-xl);
		bottom: var(--cb-space-xl);
		width: 48px;
		height: 48px;
	}
}


/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/
@keyframes cb-fade-in-up {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

body:not(.single):not(.page) .site-main > article.post {
	animation: cb-fade-in-up 400ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

body:not(.single):not(.page) .site-main > article.post:nth-of-type(2) { animation-delay: 50ms; }
body:not(.single):not(.page) .site-main > article.post:nth-of-type(3) { animation-delay: 100ms; }
body:not(.single):not(.page) .site-main > article.post:nth-of-type(4) { animation-delay: 150ms; }
body:not(.single):not(.page) .site-main > article.post:nth-of-type(5) { animation-delay: 200ms; }


/*--------------------------------------------------------------
# Reduced motion
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	body:not(.single):not(.page) .site-main > article.post:hover { transform: none; }
}