/* ==========================================================================
   Blog — Archive, Single & Empty State
   ==========================================================================
   Premium styling for blog list (archive.php), single post (single.php) and
   block-composed post content (entry-content). Reuses the theme's design
   tokens from variables.css — no new colors, fonts or shadows introduced.
   Loaded conditionally from inc/enqueue.php on:
     is_home() || is_archive() || is_singular( 'post' )
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Archive grid — refined card layout
   --------------------------------------------------------------------------
   The base grid markup lives in archive.php (.archive__grid / .archive__card).
   We elevate it with: stronger hover lift, smooth image zoom on hover,
   category badge support, staggered entry animation, and balanced spacing.
   -------------------------------------------------------------------------- */

.section--archive {
	padding-top: var(--space-3xl);
	padding-bottom: var(--space-4xl);
}

.archive__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 32rem, 1fr ) );
	gap: var(--space-xl);
	margin-bottom: var(--space-3xl);
}

.archive__card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow var(--transition-base),
		transform var(--transition-base),
		border-color var(--transition-base);
	/* Staggered fade-in for a polished first impression. */
	animation: tol-card-rise 0.55s ease both;
}

.archive__card:hover,
.archive__card:focus-within {
	box-shadow: var(--shadow-lg);
	border-color: var(--color-sage);
	transform: translateY( -4px );
}

/* Stagger first three rows of cards. */
.archive__card:nth-child( 2 ) { animation-delay: 0.06s; }
.archive__card:nth-child( 3 ) { animation-delay: 0.12s; }
.archive__card:nth-child( 4 ) { animation-delay: 0.18s; }
.archive__card:nth-child( 5 ) { animation-delay: 0.24s; }
.archive__card:nth-child( 6 ) { animation-delay: 0.30s; }

@keyframes tol-card-rise {
	from { opacity: 0; transform: translateY( 16px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.archive__card { animation: none; }
	.archive__card:hover { transform: none; }
}

/* ---- Card image with subtle zoom-on-hover ---- */
.archive__card-image {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--color-background-light);
}

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

.archive__card:hover .archive__card-image img,
.archive__card:focus-within .archive__card-image img {
	transform: scale( 1.06 );
}

/* Soft gradient overlay improves badge/text legibility if present. */
.archive__card-image::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 40%;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.25 ), transparent );
	opacity: 0;
	transition: opacity var(--transition-base);
	pointer-events: none;
}

.archive__card:hover .archive__card-image::after { opacity: 1; }

/* ---- Category badge (added in archive.php via the_category()) ---- */
.archive__card-category {
	position: absolute;
	top: var(--space-md);
	left: var(--space-md);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 1.2rem;
	background-color: var(--color-white);
	color: var(--color-text-dark);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 999px;
	box-shadow: var(--shadow-sm);
	transition: background-color var(--transition-base), color var(--transition-base);
}

.archive__card-category:hover,
.archive__card-category:focus {
	background-color: var(--color-sage);
	color: var(--color-white);
}

/* ---- Card content ---- */
.archive__card-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-lg) var(--space-lg) var(--space-xl);
	gap: var(--space-sm);
}

.archive__card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--fs-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.archive__card-meta > * + *::before {
	content: "•";
	margin-right: var(--space-sm);
	color: var(--color-border);
}

.archive__card-date {
	font-size: var(--fs-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.archive__card-title {
	margin: var(--space-xs) 0 var(--space-sm);
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--color-text-dark);
}

.archive__card-title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient( var(--color-sage), var(--color-sage) );
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 2px;
	transition: background-size var(--transition-base), color var(--transition-base);
	padding-bottom: 2px;
}

.archive__card-title a:hover,
.archive__card-title a:focus {
	color: var(--color-sage-hover);
	background-size: 100% 2px;
}

.archive__card-excerpt {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--color-text-muted);
	margin: 0 0 var(--space-md);
	flex: 1;
}

.archive__card .btn--link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
}

.archive__card .btn--link svg {
	transition: transform var(--transition-base);
}

.archive__card .btn--link:hover svg,
.archive__card .btn--link:focus svg {
	transform: translateX( 4px );
}

/* --------------------------------------------------------------------------
   2. Pagination polish
   -------------------------------------------------------------------------- */

.section--archive .pagination {
	margin-top: var(--space-2xl);
}

.section--archive .pagination .nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.section--archive .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 4.4rem;
	height: 4.4rem;
	padding: 0 var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background-color: var(--color-white);
	color: var(--color-text-dark);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: all var(--transition-base);
}

.section--archive .pagination .page-numbers:hover,
.section--archive .pagination .page-numbers:focus {
	border-color: var(--color-sage);
	color: var(--color-sage);
}

.section--archive .pagination .page-numbers.current {
	background-color: var(--color-sage);
	border-color: var(--color-sage);
	color: var(--color-white);
}

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

/* --------------------------------------------------------------------------
   3. Empty state — premium, friendly, on-brand
   --------------------------------------------------------------------------
   Renders inside .section--archive when have_posts() is false. The goal is
   to communicate "we're working on great content" and offer next-step CTAs
   instead of leaving the page feeling broken.
   -------------------------------------------------------------------------- */

.archive-empty {
	max-width: 64rem;
	margin: var(--space-2xl) auto;
	padding: var(--space-3xl) var(--space-xl);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-md);
	text-align: center;
	animation: tol-card-rise 0.55s ease both;
}

.archive-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 9.6rem;
	height: 9.6rem;
	margin: 0 auto var(--space-lg);
	border-radius: 50%;
	background: radial-gradient( circle at 30% 30%, var(--color-background-warm), var(--color-background-light) );
	color: var(--color-sage);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.archive-empty__icon svg {
	width: 4.8rem;
	height: 4.8rem;
}

.archive-empty__title {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	color: var(--color-text-dark);
}

.archive-empty__text {
	margin: 0 auto var(--space-xl);
	max-width: 48rem;
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--color-text-muted);
}

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

/* --------------------------------------------------------------------------
   4. Single post — refined article reading experience
   --------------------------------------------------------------------------
   The .container--narrow already constrains line length. Here we layer in
   typographic polish (lead paragraph, drop-cap option, hr separators),
   richer post-meta, and elegant blockquote/figure styling for the
   entry-content rendered by Gutenberg blocks.
   -------------------------------------------------------------------------- */

.section--post-content {
	padding-top: var(--space-3xl);
	padding-bottom: var(--space-4xl);
}

/* ---- Post meta strip ---- */
.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
	margin-bottom: var(--space-2xl);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.post-meta__date,
.post-meta__author,
.post-meta__categories {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
}

.post-meta__author span[itemprop="name"] {
	color: var(--color-text-dark);
	font-weight: var(--fw-medium);
}

.post-meta__categories a {
	color: var(--color-sage);
	text-decoration: none;
	font-weight: var(--fw-medium);
	transition: color var(--transition-base);
}

.post-meta__categories a:hover,
.post-meta__categories a:focus {
	color: var(--color-sage-hover);
	text-decoration: underline;
}

/* ---- Entry content rich typography ---- */
.entry-content {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--color-text-dark);
}

.entry-content > * + * {
	margin-top: var(--space-lg);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--font-heading);
	color: var(--color-text-dark);
	line-height: var(--lh-snug);
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-md);
}

.entry-content h2 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); }
.entry-content h3 { font-size: var(--fs-xl);  font-weight: var(--fw-semibold); }
.entry-content h4 { font-size: var(--fs-lg);  font-weight: var(--fw-medium);   }

.entry-content p {
	margin: 0 0 var(--space-lg);
}

/* First paragraph reads as a "lead" by default — gives editors a polished
   intro without requiring any extra block selection. */
.entry-content > p:first-of-type {
	font-size: var(--fs-lg);
	line-height: var(--lh-relaxed);
	color: var(--color-text-dark);
}

/* Optional drop-cap: editors can apply via Block Styles → "Lead with drop-cap"
   on a paragraph. Implemented as an opt-in class to remain accessible. */
.entry-content p.has-drop-cap::first-letter,
.entry-content p.is-style-tol-drop-cap::first-letter {
	float: left;
	font-family: var(--font-heading);
	font-size: 6.4rem;
	line-height: 0.9;
	font-weight: var(--fw-bold);
	color: var(--color-sage);
	padding: 0.6rem var(--space-md) 0 0;
}

.entry-content a:not(.btn):not(.wp-block-button__link) {
	color: var(--color-sage);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--transition-base);
}

.entry-content a:not(.btn):not(.wp-block-button__link):hover,
.entry-content a:not(.btn):not(.wp-block-button__link):focus {
	color: var(--color-sage-hover);
}

.entry-content ul,
.entry-content ol {
	padding-left: var(--space-xl);
	margin: 0 0 var(--space-lg);
}

.entry-content li + li {
	margin-top: var(--space-sm);
}

.entry-content hr,
.entry-content .wp-block-separator {
	border: 0;
	height: 1px;
	background-color: var(--color-border);
	margin: var(--space-2xl) auto;
	max-width: 12rem;
}

/* ---- Figures & images ---- */
.entry-content figure,
.entry-content .wp-block-image {
	margin: var(--space-2xl) 0;
}

.entry-content figure img,
.entry-content .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-md);
}

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

/* ---- Gallery ---- */
.entry-content .wp-block-gallery img {
	border-radius: var(--border-radius);
}

/* ---- Blockquote — editorial pull-quote feel ---- */
.entry-content blockquote,
.entry-content .wp-block-quote {
	position: relative;
	margin: var(--space-2xl) 0;
	padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-2xl);
	border-left: 4px solid var(--color-sage);
	background-color: var(--color-background-light);
	border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	color: var(--color-text-dark);
}

.entry-content blockquote p,
.entry-content .wp-block-quote p {
	margin: 0;
}

.entry-content blockquote cite,
.entry-content .wp-block-quote cite {
	display: block;
	margin-top: var(--space-md);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	font-style: normal;
	color: var(--color-text-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.entry-content blockquote cite::before,
.entry-content .wp-block-quote cite::before {
	content: "— ";
}

/* Pull-quote variant (core/pullquote) — larger, centered, no background. */
.entry-content .wp-block-pullquote {
	margin: var(--space-3xl) 0;
	padding: var(--space-xl) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	background: transparent;
	text-align: center;
}

.entry-content .wp-block-pullquote p {
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	color: var(--color-text-dark);
}

/* ---- Callout box (reusable in posts via core/group + class) ---- */
.entry-content .tol-callout,
.entry-content .is-style-tol-callout {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin: var(--space-2xl) 0;
	padding: var(--space-xl);
	background: linear-gradient( 135deg, var(--color-background-warm), var(--color-background-light) );
	border-left: 4px solid var(--color-sage);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-sm);
}

.entry-content .tol-callout > *:first-child {
	margin-top: 0;
}

.entry-content .tol-callout > *:last-child {
	margin-bottom: 0;
}

/* ---- Core button group (used in post-section-cta / post-starter-editorial
   patterns and anywhere editors drop wp:buttons in an article).
   Default Gutenberg layout is flex-row with wrap, which on narrow
   viewports (320–479px) can leave two long-label buttons clipped or
   side-by-side & truncated. We force them to stack & fill width below
   480px and shrink padding/font at 320px. */
.entry-content .wp-block-buttons {
	flex-wrap: wrap;
	gap: var(--space-sm);
}

@media (max-width: 479px) {
	.entry-content .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.entry-content .wp-block-buttons .wp-block-button {
		width: 100%;
	}

	.entry-content .wp-block-buttons .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		white-space: normal;       /* allow long labels to wrap */
		word-break: break-word;
	}
}

@media (max-width: 359px) {
	.entry-content .wp-block-buttons .wp-block-button__link {
		font-size: var(--fs-xs);
		padding: 1rem 1.4rem;
		line-height: var(--lh-snug);
	}
}

/* ---- FAQ accordion (core/details) ---- */
.entry-content details,
.entry-content .wp-block-details {
	margin: var(--space-md) 0;
	padding: var(--space-md) var(--space-lg);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.entry-content details[open],
.entry-content .wp-block-details[open] {
	box-shadow: var(--shadow-sm);
	border-color: var(--color-sage);
}

.entry-content details summary,
.entry-content .wp-block-details summary {
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-text-dark);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-md);
}

.entry-content details summary::-webkit-details-marker { display: none; }

.entry-content details summary::after {
	content: "+";
	font-size: var(--fs-xl);
	font-weight: var(--fw-regular);
	color: var(--color-sage);
	transition: transform var(--transition-base);
	line-height: 1;
}

.entry-content details[open] summary::after {
	content: "−";
}

.entry-content details > *:not( summary ) {
	margin-top: var(--space-md);
}

/* ---- Tags ---- */
.post-tags {
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.post-tags__label {
	font-weight: var(--fw-semibold);
	color: var(--color-text-dark);
	margin-right: var(--space-sm);
}

.post-tags a {
	display: inline-block;
	padding: 0.4rem 1.2rem;
	margin: 0 var(--space-xs) var(--space-xs) 0;
	background-color: var(--color-background-light);
	color: var(--color-text-dark);
	border-radius: 999px;
	text-decoration: none;
	font-size: var(--fs-xs);
	transition: background-color var(--transition-base), color var(--transition-base);
}

.post-tags a:hover,
.post-tags a:focus {
	background-color: var(--color-sage);
	color: var(--color-white);
}

/* ---- Prev/Next post navigation ---- */
.post-navigation {
	margin-top: var(--space-2xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--color-border);
}

.post-navigation__links {
	display: flex;
	justify-content: space-between;
	gap: var(--space-lg);
	flex-wrap: wrap;
}

.post-navigation__prev,
.post-navigation__next {
	flex: 1 1 24rem;
}

.post-navigation__next { text-align: right; }

.post-navigation a {
	display: inline-block;
	padding: var(--space-md) var(--space-lg);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	color: var(--color-text-dark);
	text-decoration: none;
	font-weight: var(--fw-medium);
	transition:
		border-color var(--transition-base),
		background-color var(--transition-base),
		transform var(--transition-base);
}

.post-navigation a:hover,
.post-navigation a:focus {
	border-color: var(--color-sage);
	background-color: var(--color-background-light);
	transform: translateY( -2px );
}

/* --------------------------------------------------------------------------
   5. Responsive refinements
   -------------------------------------------------------------------------- */

@media ( max-width: 768px ) {
	.section--archive {
		padding-top: var(--space-2xl);
		padding-bottom: var(--space-3xl);
	}

	.archive__grid {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.archive__card-content {
		padding: var(--space-md) var(--space-md) var(--space-lg);
	}

	.archive-empty {
		margin: var(--space-xl) auto;
		padding: var(--space-2xl) var(--space-lg);
	}

	.archive-empty__icon {
		width: 7.2rem;
		height: 7.2rem;
	}

	.archive-empty__icon svg {
		width: 3.6rem;
		height: 3.6rem;
	}

	.entry-content > p:first-of-type {
		font-size: var(--fs-md);
	}

	.entry-content blockquote,
	.entry-content .wp-block-quote {
		font-size: var(--fs-lg);
		padding: var(--space-lg);
	}

	.entry-content .wp-block-pullquote p {
		font-size: var(--fs-xl);
	}

	.post-navigation__links {
		flex-direction: column;
	}

	.post-navigation__next { text-align: left; }
}

/* ==========================================================================
   6. Editor parity & alignfull / alignwide support
   ==========================================================================
   The block editor renders content inside `.editor-styles-wrapper` instead
   of the frontend's `.entry-content` wrapper. The rules below mirror the
   key typographic and component styles so the WYSIWYG preview matches what
   the visitor sees — and add native breakout behaviour for full-width and
   wide-aligned blocks inside the narrow post container.
   ========================================================================== */

/* ---- Typography in editor ---- */
.editor-styles-wrapper {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--color-text-dark);
	font-family: var(--font-body);
}

.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4 {
	font-family: var(--font-heading);
	color: var(--color-text-dark);
	line-height: var(--lh-snug);
}

.editor-styles-wrapper h2 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); }
.editor-styles-wrapper h3 { font-size: var(--fs-xl);  font-weight: var(--fw-semibold); }
.editor-styles-wrapper h4 { font-size: var(--fs-lg);  font-weight: var(--fw-medium);   }

.editor-styles-wrapper a {
	color: var(--color-sage);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Quote / Pull-quote in editor ---- */
.editor-styles-wrapper .wp-block-quote {
	position: relative;
	padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-2xl);
	border-left: 4px solid var(--color-sage);
	background-color: var(--color-background-light);
	border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	color: var(--color-text-dark);
}

.editor-styles-wrapper .wp-block-quote cite {
	display: block;
	margin-top: var(--space-md);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	font-style: normal;
	color: var(--color-text-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.editor-styles-wrapper .wp-block-pullquote {
	padding: var(--space-xl) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	background: transparent;
	text-align: center;
}

.editor-styles-wrapper .wp-block-pullquote p {
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
}

/* ---- Callout box ---- */
.editor-styles-wrapper .tol-callout,
.editor-styles-wrapper .is-style-tol-callout {
	padding: var(--space-xl);
	background: linear-gradient( 135deg, var(--color-background-warm), var(--color-background-light) );
	border-left: 4px solid var(--color-sage);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-sm);
}

/* ---- Image & figure ---- */
.editor-styles-wrapper .wp-block-image img {
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-md);
}

/* ---- FAQ accordion ---- */
.editor-styles-wrapper .wp-block-details {
	padding: var(--space-md) var(--space-lg);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
}

.editor-styles-wrapper .wp-block-details summary {
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--color-text-dark);
}

/* --------------------------------------------------------------------------
   Alignfull / alignwide breakout
   --------------------------------------------------------------------------
   single.php wraps the_content() in `.container--narrow` for readability,
   but editors still need full-width sections (cover, image, two-column
   feature sections). These rules let `.alignfull` and `.alignwide` blocks
   escape the narrow column without changing the rest of the typography.
   -------------------------------------------------------------------------- */

.entry-content .alignfull {
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	width: 100vw;
	max-width: 100vw;
	border-radius: 0; /* Full-width sections should hit the screen edges. */
}

/* Cover blocks at alignfull get edge-to-edge with no rounded corners. */
.entry-content .alignfull.wp-block-cover,
.entry-content .alignfull.wp-block-cover-image {
	border-radius: 0;
}

/* Inner content of a full-width section stays within the global container. */
.entry-content .alignfull > .wp-block-group__inner-container,
.entry-content .alignfull .wp-block-cover__inner-container {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-lg);
	padding-right: var(--space-lg);
}

.entry-content .alignwide {
	margin-left: calc( 50% - min( 50vw, var(--container-lg) / 2 ) );
	margin-right: calc( 50% - min( 50vw, var(--container-lg) / 2 ) );
	max-width: var(--container-lg);
}

/* Editor mirror — Gutenberg already supports alignfull/alignwide in the
   canvas via theme.json layout, but we ensure consistent rounded corners
   and inner padding behaviour. */
.editor-styles-wrapper .alignfull.wp-block-cover { border-radius: 0; }

@media ( max-width: 768px ) {
	.entry-content .alignfull > .wp-block-group__inner-container,
	.entry-content .alignfull .wp-block-cover__inner-container {
		padding-left: var(--space-md);
		padding-right: var(--space-md);
	}
}

/* --------------------------------------------------------------------------
   Reusable "tol-section" — easy-to-edit themed section block
   --------------------------------------------------------------------------
   Applied via Group block → Additional CSS class. Provides consistent
   vertical rhythm, optional background colors via .is-bg-* modifiers,
   and works both at full width and within the narrow column.
   -------------------------------------------------------------------------- */

.tol-section {
	padding: var(--space-3xl) 0;
}

.tol-section.is-bg-light    { background-color: var(--color-background-light); }
.tol-section.is-bg-warm     { background-color: var(--color-background-warm); }
.tol-section.is-bg-sage     { background-color: var(--color-sage); color: var(--color-white); }
.tol-section.is-bg-dark     { background-color: var(--color-dark); color: var(--color-white); }
.tol-section.is-bg-white    { background-color: var(--color-white); }

.tol-section.is-bg-sage :is(h2, h3, h4, p),
.tol-section.is-bg-dark :is(h2, h3, h4, p) {
	color: var(--color-white);
}

.tol-section.is-bg-sage a,
.tol-section.is-bg-dark a {
	color: var(--color-white);
	text-decoration: underline;
}

/* ---- Two-column section helper (image + text) ---- */
.tol-media-text {
	align-items: center;
}

.tol-media-text .wp-block-column img,
.tol-media-text img {
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-md);
	aspect-ratio: 1 / 1;        /* Square image as requested */
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* Reserve square space for empty image placeholders so columns don't collapse
   to zero height before an editor uploads the real photo. */
.tol-media-text .wp-block-image,
.tol-media-text figure.wp-block-image {
	aspect-ratio: 1 / 1;
	width: 100%;
	margin: 0;
	background-color: var(--color-background-light);
	border-radius: var(--border-radius-lg);
	overflow: hidden;
}

.tol-media-text .wp-block-image:empty::before,
.tol-media-text .wp-block-image img:not([src]),
.tol-media-text .wp-block-image img[src=""] {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 28rem;
}

@media ( max-width: 768px ) {
	.tol-section { padding: var(--space-2xl) 0; }
}

/* ==========================================================================
   7. Inline blog & post headers (replaces hero band)
   ==========================================================================
   /blog/, category archives, and single posts no longer render the
   standard hero section. Instead the title flows inline with the page
   design via .blog-header (lists) and .post-header (single post).
   ========================================================================== */

/* ---- Blog list & archive header ---- */
.blog-header {
	max-width: 72rem;
	margin: 0 auto var(--space-3xl);
	text-align: center;
}

.blog-header__eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-sage);
	margin-bottom: var(--space-sm);
}

.blog-header__title {
	font-family: var(--font-heading);
	font-size: clamp( 2.8rem, 4.2vw, var(--fs-4xl) );
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	color: var(--color-text-dark);
	margin: 0 0 var(--space-md);
}

.blog-header__intro {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--color-text-muted);
	max-width: 60rem;
	margin: 0 auto;
}

/* ---- Single post header ---- */
.post-header {
	margin-bottom: var(--space-2xl);
	text-align: left;
}

.post-header__category {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-sage);
	text-decoration: none;
	margin-bottom: var(--space-md);
	transition: color var(--transition-base);
}

.post-header__category:hover,
.post-header__category:focus {
	color: var(--color-sage-hover);
}

.post-header__title {
	font-family: var(--font-heading);
	font-size: clamp( 3.2rem, 5vw, 5.2rem );
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	color: var(--color-text-dark);
	margin: 0 0 var(--space-lg);
}

.post-header .post-meta {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.post-meta__reading::before {
	content: "•";
	margin-right: var(--space-sm);
	color: var(--color-border);
}

/* ---- Optional featured image below header ---- */
.post-feature-image {
	margin: 0 0 var(--space-2xl);
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

.post-feature-image img {
	width: 100%;
	height: auto;
	display: block;
}

@media ( max-width: 768px ) {
	.blog-header { margin-bottom: var(--space-2xl); }
	.post-header { margin-bottom: var(--space-xl); }
}

/* ==========================================================================
   8. Reset Gutenberg block-gap between full-width content sections
   ==========================================================================
   WordPress applies a default `margin-block-start` of ~24px between adjacent
   root-level blocks inside .entry-content (via the layout/block-gap system).
   For our stacked full-width sections that creates a visible seam where the
   editor expected them to butt cleanly together. Zero out the gap between
   adjacent .alignfull / .alignwide / .tol-section blocks while preserving
   normal paragraph spacing elsewhere.
   ========================================================================== */

.entry-content > .alignfull + .alignfull,
.entry-content > .alignfull + .alignwide,
.entry-content > .alignwide + .alignfull,
.entry-content > .alignwide + .alignwide,
.entry-content > .tol-section + .tol-section,
.entry-content > .alignfull + .tol-section,
.entry-content > .tol-section + .alignfull,
.entry-content > .alignfull + .wp-block-cover,
.entry-content > .wp-block-cover + .alignfull {
	margin-top: 0 !important;
}

/* ==========================================================================
   9. Bulletproof alignfull / alignwide breakout
   ==========================================================================
   Override theme.json layout rules and any plugin CSS so .alignfull always
   spans the viewport — even when nested inside .container--narrow. The
   `!important` is necessary because WordPress emits inline `<style>` for
   theme.json layout that wins on specificity alone.
   ========================================================================== */

.entry-content > .alignfull,
.entry-content > .wp-block-group.alignfull,
.entry-content > .wp-block-cover.alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc( 50% - 50vw ) !important;
	margin-right: calc( 50% - 50vw ) !important;
	border-radius: 0;
	box-sizing: border-box;
}

.entry-content > .alignwide,
.entry-content > .wp-block-group.alignwide {
	max-width: var(--container-lg) !important;
	width: auto !important;
	margin-left: calc( 50% - min( 50vw, var(--container-lg) / 2 ) ) !important;
	margin-right: calc( 50% - min( 50vw, var(--container-lg) / 2 ) ) !important;
}

/* Inner-container constraint: keep the readable text/columns aligned with
   the global 1280px grid while the background paints edge-to-edge. */
.entry-content > .alignfull > .wp-block-group__inner-container,
.entry-content > .alignfull .wp-block-cover__inner-container,
.entry-content > .alignfull > .wp-block-columns {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-lg);
	padding-right: var(--space-lg);
	box-sizing: border-box;
}

@media ( max-width: 768px ) {
	.entry-content > .alignfull > .wp-block-group__inner-container,
	.entry-content > .alignfull .wp-block-cover__inner-container,
	.entry-content > .alignfull > .wp-block-columns {
		padding-left: var(--space-md);
		padding-right: var(--space-md);
	}
}