/**
 * Berim Blog — Phase 2: blog templates & reading experience.
 * RTL-first, logical properties throughout. Builds on tokens.css + theme.css.
 */

:root {
	--reading-width: 70ch;
	--toc-width: 19.5rem;
}

/* -------------------------------------------------------------------------- */
/* Layout primitives                                                          */
/* -------------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--content-max-width);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

.site-main {
	flex: 1 0 auto;
	padding-block: var(--space-8);
}

.site-main--single {
	padding-block: var(--space-6) var(--space-12);
}

.page-header {
	margin-block-end: var(--space-8);
}

.page-title {
	font-size: var(--font-size-2xl);
	margin-block-end: var(--space-2);
}

.page-title .search-query {
	color: var(--content-primary);
}

.archive-description {
	color: var(--content-neutral);
	max-width: var(--reading-width);
	line-height: var(--line-height-body);
}

/* Category pill */
.category-pill {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	background: var(--background-primary);
	color: var(--brand-strong);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

.category-pill:hover,
.category-pill:focus {
	color: var(--brand-strong);
	filter: brightness(0.97);
}

/* -------------------------------------------------------------------------- */
/* Post grid + cards                                                          */
/* -------------------------------------------------------------------------- */

.post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 600px) {
	.post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.post-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-8);
	}
}

.post-card {
	display: flex;
	flex-direction: column;
	background: var(--background-surface-0);
	border: 1px solid var(--border-1);
	border-radius: var(--radius-2xl);
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.post-card:hover,
.post-card:focus-within {
	box-shadow: var(--shadow-md);
	border-color: var(--border-2);
	transform: translateY(-2px);
}

.post-card__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--background-surface-1);
}

.post-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.post-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4);
	flex: 1 0 auto;
}

.post-card__cat {
	margin: 0;
}

.post-card__title {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-heading);
	margin: 0;
}

.post-card__title a {
	color: var(--content-dark);
}

.post-card__title a:hover,
.post-card__title a:focus {
	color: var(--content-primary);
}

.post-card__excerpt {
	margin: 0;
	color: var(--content-neutral);
	font-size: var(--font-size-sm);
	line-height: 1.9;
}

.post-card__meta {
	margin-block-start: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	color: var(--content-lowemphasis);
	font-size: var(--font-size-sm);
}

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

.post-card__author a {
	color: var(--content-neutral);
}

.post-card__avatar,
.single-post__avatar {
	border-radius: var(--radius-full);
	display: block;
}

.meta-sep {
	color: var(--border-2);
}

/* -------------------------------------------------------------------------- */
/* Pagination                                                                 */
/* -------------------------------------------------------------------------- */

.pagination {
	margin-block-start: var(--space-10);
}

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

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--space-3);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-1);
	color: var(--content-neutral);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus {
	color: var(--content-primary);
	border-color: var(--border-2);
	background: var(--background-neutral);
}

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

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

/* -------------------------------------------------------------------------- */
/* Single post                                                                */
/* -------------------------------------------------------------------------- */

.single-post__header {
	text-align: start;
}

.single-post__cat {
	margin-block-end: var(--space-3);
}

.single-post__title {
	font-size: var(--font-size-3xl);
	line-height: 1.4;
	margin-block-end: var(--space-4);
	max-width: 28ch;
}

.single-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	color: var(--content-lowemphasis);
	font-size: var(--font-size-sm);
}

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

.single-post__author a {
	color: var(--content-neutral);
	font-weight: var(--font-weight-medium);
}

.single-post__featured {
	margin: var(--space-6) auto var(--space-8);
	max-width: var(--content-max-width);
	padding-inline: var(--space-4);
}

.single-post__featured-img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-2xl);
	display: block;
}

/* Layout: content + TOC sidebar on desktop */
.single-post__layout {
	display: block;
}

@media (min-width: 1024px) {
	.single-post__layout--with-toc {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--toc-width);
		gap: var(--space-10);
		align-items: start;
	}

	.single-post__layout--with-toc .single-post__content {
		order: 1;
	}

	.single-post__layout--with-toc .single-post__toc-wrap {
		order: 2;
	}
}

.single-post__content {
	max-width: var(--reading-width);
}

/* -------------------------------------------------------------------------- */
/* Long-form prose                                                            */
/* -------------------------------------------------------------------------- */

.single-post__content {
	font-size: var(--font-size-lg);
	line-height: 2;
	color: var(--content-dark);
}

.single-post__content > * + * {
	margin-block-start: var(--space-5);
}

.single-post__content h2 {
	font-size: var(--font-size-2xl);
	line-height: 1.5;
	margin-block: var(--space-10) var(--space-4);
	scroll-margin-block-start: calc(var(--header-height) + var(--space-4));
}

.single-post__content h3 {
	font-size: var(--font-size-xl);
	line-height: 1.5;
	margin-block: var(--space-8) var(--space-3);
	scroll-margin-block-start: calc(var(--header-height) + var(--space-4));
}

.single-post__content h4 {
	font-size: var(--font-size-lg);
	margin-block: var(--space-6) var(--space-2);
}

.single-post__content p {
	margin-block: 0;
}

.single-post__content a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.single-post__content ul,
.single-post__content ol {
	padding-inline-start: var(--space-6);
	margin-block: 0;
}

.single-post__content li + li {
	margin-block-start: var(--space-2);
}

.single-post__content img {
	border-radius: var(--radius-xl);
	height: auto;
}

.single-post__content figure {
	margin-inline: 0;
}

.single-post__content figcaption,
.single-post__content .wp-caption-text {
	font-size: var(--font-size-sm);
	color: var(--content-lowemphasis);
	text-align: center;
	margin-block-start: var(--space-2);
}

.single-post__content blockquote {
	margin-inline: 0;
	padding-inline-start: var(--space-4);
	border-inline-start: 3px solid var(--brand);
	color: var(--content-neutral);
	font-size: var(--font-size-lg);
}

.single-post__content pre {
	background: var(--background-surface-1);
	border: 1px solid var(--border-1);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	overflow-x: auto;
	direction: ltr;
	text-align: left;
}

.single-post__content code {
	background: var(--background-neutral);
	border-radius: var(--radius-md);
	padding: 0.1em 0.4em;
	font-size: 0.9em;
}

.single-post__content pre code {
	background: none;
	padding: 0;
}

.single-post__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-base);
}

.single-post__content th,
.single-post__content td {
	border: 1px solid var(--border-1);
	padding: var(--space-2) var(--space-3);
	text-align: start;
}

.single-post__content th {
	background: var(--background-neutral);
}

/* Tags under the article */
.single-post__tags {
	margin-block-start: var(--space-8);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.single-post__tags a {
	display: inline-flex;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	background: var(--background-surface-1);
	color: var(--content-neutral);
	font-size: var(--font-size-sm);
}

.single-post__tags a:hover,
.single-post__tags a:focus {
	color: var(--content-primary);
}

/* -------------------------------------------------------------------------- */
/* Table of contents                                                          */
/* -------------------------------------------------------------------------- */

.toc {
	background: var(--background-surface-1);
	border: 1px solid var(--border-1);
	border-radius: var(--radius-xl);
	padding: var(--space-4);
	margin-block-end: var(--space-6);
}

.toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	color: var(--content-dark);
	cursor: pointer;
}

.toc__toggle::after {
	content: '';
	width: 0.6rem;
	height: 0.6rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.toc.toc--open .toc__toggle::after {
	transform: rotate(-135deg);
}

.toc__list {
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: 0;
	display: none;
	flex-direction: column;
	gap: var(--space-1);
}

.toc.toc--open .toc__list {
	display: flex;
}

.toc__item--h3 {
	padding-inline-start: var(--space-4);
}

.toc__list a {
	display: block;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-md);
	color: var(--content-neutral);
	font-size: var(--font-size-sm);
	line-height: 1.7;
	border-inline-start: 2px solid transparent;
}

.toc__list a:hover,
.toc__list a:focus,
.toc__list a.is-active {
	color: var(--content-primary);
	background: var(--background-neutral);
	border-inline-start-color: var(--brand);
}

/* Desktop: always-open sticky sidebar TOC */
@media (min-width: 1024px) {
	.toc {
		position: sticky;
		inset-block-start: calc(var(--header-height) + var(--space-4));
		margin-block-end: 0;
	}

	.toc__toggle {
		cursor: default;
	}

	.toc__toggle::after {
		display: none;
	}

	.toc__list {
		display: flex;
	}
}

/* -------------------------------------------------------------------------- */
/* Author box + post navigation + related                                     */
/* -------------------------------------------------------------------------- */

.author-box {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
	margin-block-start: var(--space-12);
	padding: var(--space-6);
	background: var(--background-neutral);
	border-radius: var(--radius-2xl);
	max-width: var(--reading-width);
}

.author-box__avatar img {
	border-radius: var(--radius-full);
	display: block;
}

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

.author-box__eyebrow {
	font-size: var(--font-size-sm);
	color: var(--content-lowemphasis);
}

.author-box__name {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--content-dark);
}

.author-box__bio {
	margin: 0;
	color: var(--content-neutral);
	line-height: var(--line-height-body);
}

.author-box__archive-link {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

.post-navigation {
	width: 100%;
	max-width: var(--content-max-width);
	margin-inline: auto;
	padding-inline: var(--space-4);
	margin-block-start: var(--space-10);
}

.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: space-between;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	flex: 1 1 45%;
	min-width: 12rem;
	text-align: center;
}

.post-navigation a {
	display: block;
	padding: var(--space-4);
	border: 1px solid var(--border-1);
	border-radius: var(--radius-xl);
	color: var(--content-dark);
}

.post-navigation a:hover,
.post-navigation a:focus {
	border-color: var(--border-2);
	background: var(--background-neutral);
}

.post-navigation .nav-subtitle {
	display: block;
	font-size: var(--font-size-sm);
	color: var(--content-lowemphasis);
	margin-block-end: var(--space-1);
}

.post-navigation .nav-title {
	font-weight: var(--font-weight-semibold);
}

.related-posts {
	margin-block-start: var(--space-12);
}

.related-posts__title {
	font-size: var(--font-size-xl);
	margin-block-end: var(--space-6);
}

/* -------------------------------------------------------------------------- */
/* Author archive header                                                      */
/* -------------------------------------------------------------------------- */

.author-header {
	display: flex;
	gap: var(--space-5);
	align-items: center;
	flex-wrap: wrap;
}

.author-header__avatar img {
	border-radius: var(--radius-full);
	display: block;
}

.author-header__eyebrow {
	color: var(--content-lowemphasis);
	font-size: var(--font-size-sm);
}

.author-header__bio {
	margin: var(--space-2) 0 0;
	color: var(--content-neutral);
	max-width: var(--reading-width);
	line-height: var(--line-height-body);
}

/* -------------------------------------------------------------------------- */
/* 404                                                                        */
/* -------------------------------------------------------------------------- */

.error-404 {
	text-align: center;
	max-width: 48rem;
	margin-inline: auto;
}

.error-404__code {
	font-size: 5rem;
	font-weight: var(--font-weight-bold);
	line-height: 1;
	color: var(--background-primary);
	margin: 0;
}

.error-404__lead {
	color: var(--content-neutral);
	max-width: 40ch;
	margin-inline: auto;
}

.error-404__search {
	max-width: 28rem;
	margin: var(--space-6) auto var(--space-10);
}

.error-404__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	text-align: start;
}

@media (min-width: 600px) {
	.error-404__cols {
		grid-template-columns: 1fr 1fr;
	}
}

.error-404__cats,
.error-404__recent ul {
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.error-404__home {
	margin-block-start: var(--space-10);
}

/* -------------------------------------------------------------------------- */
/* Search form                                                                */
/* -------------------------------------------------------------------------- */

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

.search-form .search-field {
	flex: 1;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border-2);
	border-radius: var(--radius-lg);
	background: var(--background-surface-0);
	color: var(--content-dark);
	font-family: inherit;
	font-size: var(--font-size-base);
}

.search-form .search-field:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--button-shade);
}

.search-form .search-submit {
	padding: var(--space-3) var(--space-5);
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--button-primary);
	color: var(--button-primary-content);
	font-family: inherit;
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
}

/* Widget titles (404 etc.) */
.widget-title {
	font-size: var(--font-size-lg);
}

/* -------------------------------------------------------------------------- */
/* Static pages                                                               */
/* -------------------------------------------------------------------------- */

.site-main--page .entry-header {
	margin-block-end: var(--space-6);
}

.site-main--page .entry-title {
	font-size: var(--font-size-3xl);
	line-height: 1.4;
}

.site-main--page .post-thumbnail {
	margin-block-end: var(--space-6);
}

.site-main--page .post-thumbnail img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-2xl);
}

/* -------------------------------------------------------------------------
 * Breadcrumbs (Phase 3)
 * Styles both the theme fallback (.breadcrumbs__list) and Rank Math's
 * markup (.rank-math-breadcrumb). RTL handled by logical properties; the
 * page is dir="rtl" so the trail reads right-to-left naturally.
 * ---------------------------------------------------------------------- */
.breadcrumbs-wrap {
	margin-block: var(--space-4) var(--space-2);
}

.single-post .breadcrumbs-wrap {
	max-width: var(--content-max-width);
	margin-inline: auto;
}

.breadcrumbs,
.rank-math-breadcrumb {
	font-size: var(--font-size-sm);
	color: var(--content-lowemphasis);
	line-height: var(--line-height-body);
}

/* Rank Math renders the trail as inline text in a <p>; Latin category/post
 * names inside the RTL line get visually reordered by the bidi algorithm
 * (the trail can look like Home › Post › Category). Flexbox lays the items out
 * in DOM order along the RTL axis, immune to bidi reordering. */
.rank-math-breadcrumb p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	margin: 0;
}

.rank-math-breadcrumb .separator {
	white-space: nowrap;
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__item {
	display: inline-flex;
	align-items: center;
}

.breadcrumbs a,
.rank-math-breadcrumb a {
	color: var(--content-lowemphasis);
	text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus,
.rank-math-breadcrumb a:hover,
.rank-math-breadcrumb a:focus {
	color: var(--brand);
	text-decoration: underline;
}

.breadcrumbs [aria-current="page"],
.rank-math-breadcrumb .last {
	color: var(--content-primary);
	font-weight: var(--font-weight-medium);
}

.breadcrumbs__sep,
.rank-math-breadcrumb .separator {
	color: var(--content-lowemphasis);
	margin-inline: var(--space-1);
	user-select: none;
	/* The angle-quote separator (‹ U+2039) is a bidi-mirrored glyph, so in the
	 * RTL run it flips to point left-to-right. Isolate it in an LTR context so
	 * it renders as authored: pointing right-to-left for the Persian trail. */
	direction: ltr;
	unicode-bidi: isolate;
}

/* ==========================================================================
 * Phase 4 — AEO/GEO content blocks
 * Key Takeaways, answer-first callout, branded CTA, cluster links, plus
 * styling for Rank Math's native FAQ & HowTo blocks. All RTL via logical props.
 * The block selectors are scoped to .single-post__content so they inherit the
 * article reading width and rhythm.
 * ========================================================================== */

/* Key Takeaways box ------------------------------------------------------- */
.single-post__content .berim-takeaways {
	max-width: var(--reading-width);
	margin-block: var(--space-8);
	padding: var(--space-5) var(--space-6);
	background: var(--background-neutral);
	border: 1px solid var(--border-1);
	border-inline-start: 4px solid var(--brand);
	border-radius: var(--radius-xl);
}

.berim-takeaways__title {
	margin: 0 0 var(--space-3);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-lg);
	color: var(--content-dark);
}

.single-post__content .berim-takeaways__list {
	margin: 0;
	padding-inline-start: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.berim-takeaways__list li {
	color: var(--content-neutral);
	line-height: var(--line-height-body);
}

/* Answer-first callout («خلاصه») ------------------------------------------ */
.single-post__content .berim-answer {
	max-width: var(--reading-width);
	margin-block: var(--space-6);
	padding: var(--space-4) var(--space-5);
	background: var(--background-primary);
	border-radius: var(--radius-lg);
}

.berim-answer__label {
	display: inline-block;
	margin-block-end: var(--space-2);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	background: var(--brand);
	color: var(--button-primary-content);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

.single-post__content .berim-answer__text {
	margin: 0;
	color: var(--content-dark);
	line-height: var(--line-height-body);
}

/* Branded planner CTA ----------------------------------------------------- */
.single-post__content .berim-cta {
	max-width: var(--reading-width);
	margin-block: var(--space-10);
	padding: var(--space-6);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	background: var(--brand-ink);
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-sm);
}

.berim-cta__brand {
	display: block;
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-sm);
	color: var(--content-light);
	opacity: 0.85;
	margin-block-end: var(--space-1);
}

.single-post__content .berim-cta__text {
	margin: 0;
	color: var(--content-light);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-heading);
}

.berim-cta__button {
	flex-shrink: 0;
	display: inline-block;
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-full);
	background: var(--content-light);
	color: var(--brand-ink);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.berim-cta__button:hover,
.berim-cta__button:focus {
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
	color: var(--brand-ink);
}

/* Cluster link list ------------------------------------------------------- */
.berim-clusters {
	max-width: var(--reading-width);
	margin-block: var(--space-8);
	padding: var(--space-5) var(--space-6);
	background: var(--background-surface-1);
	border-radius: var(--radius-xl);
}

.berim-clusters__title {
	margin: 0 0 var(--space-3);
	font-weight: var(--font-weight-bold);
	color: var(--content-dark);
}

.berim-clusters__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.berim-clusters__link {
	display: block;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	color: var(--content-secondary);
	text-decoration: none;
	border-inline-start: 2px solid transparent;
}

.berim-clusters__link:hover,
.berim-clusters__link:focus {
	background: var(--background-neutral);
	border-inline-start-color: var(--brand);
	color: var(--content-primary);
}

/* Rank Math blocks are re-rendered server-side into .rank-math-block with the
 * canonical classes below (NOT the editor save-markup classes). Verified
 * against live output. */
.single-post__content .rank-math-block {
	max-width: var(--reading-width);
	margin-block: var(--space-8);
}

/* FAQ block: .rank-math-list > .rank-math-list-item > question + answer ---- */
.single-post__content .rank-math-list-item {
	margin-block-end: var(--space-3);
	padding: var(--space-4) var(--space-5);
	background: var(--background-surface-1);
	border: 1px solid var(--border-1);
	border-radius: var(--radius-lg);
}

.single-post__content .rank-math-question {
	margin: 0 0 var(--space-2);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-lg);
	color: var(--content-dark);
}

.single-post__content .rank-math-answer {
	color: var(--content-neutral);
	line-height: var(--line-height-body);
}

.single-post__content .rank-math-answer > :last-child {
	margin-block-end: 0;
}

/* HowTo block: .rank-math-steps > .rank-math-step > title + content -------- */
.single-post__content .rank-math-howto-description {
	margin-block-end: var(--space-4);
	color: var(--content-neutral);
	line-height: var(--line-height-body);
}

.single-post__content .rank-math-step {
	margin-block-end: var(--space-4);
	padding: var(--space-4) var(--space-5);
	padding-inline-start: var(--space-4);
	background: var(--background-surface-1);
	border-inline-start: 3px solid var(--brand);
	border-radius: var(--radius-lg);
}

.single-post__content .rank-math-step-title {
	margin: 0 0 var(--space-2);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--content-dark);
}

.single-post__content .rank-math-step-content > :last-child {
	margin-block-end: 0;
}

/* Pillar page treatment --------------------------------------------------- */
.pillar-badge {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	background: var(--brand);
	color: var(--button-primary-content);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	margin-inline-end: var(--space-2);
}

.single-post--pillar .single-post__lead {
	max-width: var(--reading-width);
	margin-block: var(--space-4) 0;
	color: var(--content-neutral);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-body);
}

.pillar-clusters {
	margin-block-start: var(--space-12);
}

.pillar-clusters .berim-clusters {
	max-width: none;
	background: var(--background-neutral);
}

@media (min-width: 600px) {
	.pillar-clusters .berim-clusters__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2) var(--space-5);
	}
}

/* ==========================================================================
 * Phase 5 — author profiles, comments, sharing
 * ========================================================================== */

/* Author role + social links --------------------------------------------- */
.author-box__role,
.author-header__role {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--content-primary);
}

.author-socials {
	list-style: none;
	margin: var(--space-1) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.author-socials__link {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--border-2);
	border-radius: var(--radius-full);
	font-size: var(--font-size-sm);
	color: var(--content-secondary);
	text-decoration: none;
}

.author-socials__link:hover,
.author-socials__link:focus {
	background: var(--background-neutral);
	border-color: var(--brand);
	color: var(--content-primary);
}

/* Share buttons ----------------------------------------------------------- */
.share {
	max-width: var(--reading-width);
	margin-block-start: var(--space-8);
	padding-block-start: var(--space-5);
	border-block-start: 1px solid var(--border-1);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

.share__title {
	font-weight: var(--font-weight-semibold);
	color: var(--content-neutral);
}

.share__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.share__link {
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--border-2);
	border-radius: var(--radius-full);
	background: var(--background-surface-0);
	color: var(--content-secondary);
	font-size: var(--font-size-sm);
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.share__link:hover,
.share__link:focus {
	background: var(--background-neutral);
	border-color: var(--brand);
	color: var(--content-primary);
}

.share__link.is-copied {
	background: var(--background-success);
	border-color: var(--content-success);
	color: var(--content-success);
}

/* Comments ---------------------------------------------------------------- */
.comments-area {
	max-width: var(--reading-width);
	margin-block-start: var(--space-12);
	padding-block-start: var(--space-8);
	border-block-start: 1px solid var(--border-1);
}

.comments-title {
	font-size: var(--font-size-xl);
	margin-block-end: var(--space-6);
}

.comment-list {
	list-style: none;
	margin: 0 0 var(--space-8);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.comment-list .children {
	list-style: none;
	margin: var(--space-5) 0 0;
	padding-inline-start: var(--space-5);
	border-inline-start: 2px solid var(--border-1);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.comment-body {
	padding: var(--space-5);
	background: var(--background-surface-1);
	border-radius: var(--radius-xl);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-block-end: var(--space-2);
}

.comment-author .avatar {
	border-radius: var(--radius-full);
}

.comment-author .fn {
	font-weight: var(--font-weight-semibold);
	color: var(--content-dark);
	font-style: normal;
}

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

.comment-metadata {
	font-size: var(--font-size-sm);
	color: var(--content-lowemphasis);
	margin-block-end: var(--space-3);
}

.comment-metadata a {
	color: inherit;
	text-decoration: none;
}

.comment-content {
	color: var(--content-neutral);
	line-height: var(--line-height-body);
}

.comment-content > :last-child {
	margin-block-end: 0;
}

.comment-awaiting-moderation {
	display: inline-block;
	margin-block-end: var(--space-2);
	font-size: var(--font-size-sm);
	color: var(--content-caution);
}

.reply {
	margin-block-start: var(--space-3);
}

.comment-reply-link {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--content-primary);
	text-decoration: none;
}

/* Comment form ------------------------------------------------------------ */
.comment-respond {
	margin-block-start: var(--space-8);
	padding: var(--space-6);
	background: var(--background-neutral);
	border-radius: var(--radius-2xl);
}

.comment-reply-title {
	font-size: var(--font-size-lg);
	margin-block-end: var(--space-4);
}

.comment-reply-title small {
	margin-inline-start: var(--space-3);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
}

.comment-form-comment,
.comment-form-author,
.comment-form-email {
	margin-block-end: var(--space-4);
}

.comment-form label {
	display: block;
	margin-block-end: var(--space-2);
	font-weight: var(--font-weight-medium);
	color: var(--content-dark);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border-2);
	border-radius: var(--radius-lg);
	background: var(--background-surface-0);
	color: var(--content-dark);
	font-family: inherit;
	font-size: var(--font-size-base);
	line-height: var(--line-height-body);
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--button-shade);
}

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

.comment-notes,
.comment-form-cookies-consent label {
	font-size: var(--font-size-sm);
	color: var(--content-lowemphasis);
}

.form-submit .submit {
	padding: var(--space-3) var(--space-8);
	border: 0;
	border-radius: var(--radius-full);
	background: var(--button-primary);
	color: var(--button-primary-content);
	font-family: inherit;
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-base);
	cursor: pointer;
}

.form-submit .submit:hover,
.form-submit .submit:focus {
	background: var(--brand-strong);
}

/* Honeypot: visually removed but not display:none (some bots skip those). */
.berim-hp {
	position: absolute;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.no-comments {
	color: var(--content-lowemphasis);
	font-style: italic;
}

@media (min-width: 600px) {
	.comment-form-author,
	.comment-form-email {
		display: inline-block;
		width: calc(50% - var(--space-2));
	}

	.comment-form-author {
		margin-inline-end: var(--space-4);
	}
}

/* ==========================================================================
 * ELEVATION PASS — editorial home, premium cards, and a refined single-post
 * reading experience. Warm + trustworthy on the product purple palette.
 * Mobile-first; RTL via logical properties; tokens only.
 * ========================================================================== */

/* --- Editorial masthead (blog home) -------------------------------------- */
.blog-masthead {
	margin-block: var(--space-2) var(--space-8);
	max-width: 46rem;
}

.blog-masthead__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	color: var(--accent-strong);
	letter-spacing: 0.02em;
}

.blog-masthead__eyebrow::before {
	content: '';
	width: 1.5rem;
	height: 2px;
	border-radius: var(--radius-full);
	background: var(--accent);
}

.blog-masthead__title {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-black);
	line-height: 1.25;
	margin: 0 0 var(--space-4);
	letter-spacing: -0.02em;
}

.blog-masthead__sub {
	margin: 0;
	font-size: var(--font-size-lg);
	line-height: var(--line-height-body);
	color: var(--content-neutral);
}

@media (max-width: 600px) {
	.blog-masthead__title { font-size: var(--font-size-3xl); }
	.blog-masthead__sub { font-size: var(--font-size-base); }
}

/* --- Category navigation chips ------------------------------------------- */
.cat-nav {
	margin-block-end: var(--space-8);
	border-block-end: 1px solid var(--border-1);
	padding-block-end: var(--space-5);
}

.cat-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cat-nav__link {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	border: 1px solid var(--border-2);
	background: var(--background-surface-1);
	color: var(--content-secondary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.cat-nav__link:hover,
.cat-nav__link:focus {
	color: var(--brand-strong);
	border-color: var(--brand);
	background: var(--brand-soft);
}

.cat-nav__link.is-current {
	color: #fff;
	background: var(--brand-strong);
	border-color: var(--brand-strong);
	box-shadow: var(--shadow-sm);
}

/* On narrow screens, let the chips scroll horizontally rather than wrap tall. */
@media (max-width: 600px) {
	.cat-nav {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.cat-nav::-webkit-scrollbar { display: none; }
	.cat-nav__list { flex-wrap: nowrap; }
}

/* --- Featured hero card --------------------------------------------------- */
.featured-card {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--background-surface-0);
	border: 1px solid var(--border-1);
	border-radius: var(--radius-2xl);
	overflow: hidden;
	margin-block-end: var(--space-10);
	box-shadow: var(--shadow-md);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.featured-card {
	position: relative;
}

.featured-card:hover,
.featured-card:focus-within {
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
}

/* Stretch the title link across the whole card so it's clickable everywhere. */
.featured-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Keep the explicit "read more" link interactive above the stretched overlay. */
.featured-card__more {
	position: relative;
	z-index: 2;
}

.featured-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--background-surface-1);
}

.featured-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.featured-card:hover .featured-card__img {
	transform: scale(1.03);
}

.featured-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
}

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

.featured-card__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	background: var(--accent-soft);
	color: var(--accent-strong);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
}

.featured-card__badge::before {
	content: '★';
	font-size: 0.85em;
}

.featured-card__title {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-extrabold);
	line-height: 1.35;
	margin: 0;
}

.featured-card__title a { color: var(--content-dark); }
.featured-card__title a:hover,
.featured-card__title a:focus { color: var(--brand-strong); }

.featured-card__excerpt {
	margin: 0;
	color: var(--content-neutral);
	line-height: var(--line-height-body);
}

.featured-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	color: var(--content-lowemphasis);
	font-size: var(--font-size-sm);
}

.featured-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-block-start: var(--space-1);
	color: var(--brand-strong);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-sm);
}

.featured-card__more::after {
	content: '←';
	transition: transform 0.15s ease;
}

.featured-card:hover .featured-card__more::after {
	transform: translateX(-4px);
}

/* No featured image → the body spans the full card on a calm flat panel. */
.featured-card--no-media {
	background: var(--brand-soft);
}

.featured-card--no-media .featured-card__body {
	padding: var(--space-8);
}

@media (min-width: 980px) {
	.featured-card {
		grid-template-columns: 1.15fr 1fr;
		align-items: stretch;
	}

	.featured-card--no-media {
		grid-template-columns: 1fr;
	}

	.featured-card--no-media .featured-card__body {
		padding: var(--space-10) var(--space-12);
	}
	.featured-card__media { aspect-ratio: auto; height: 100%; min-height: 22rem; }
	.featured-card__body {
		padding: var(--space-10);
		justify-content: center;
	}
	.featured-card__title { font-size: var(--font-size-3xl); }
}

/* --- Post card upgrades (override Phase 2) ------------------------------- */
.post-card {
	box-shadow: var(--shadow-xs);
}

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

.post-card__thumb { position: relative; }

.post-card__img { transition: transform 0.4s ease; }

.post-card:hover .post-card__img { transform: scale(1.04); }

.post-card__body { padding: var(--space-5); gap: var(--space-3); }

.post-card__title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
}

/* --- Unified pill / chip system ------------------------------------------ */
.category-pill {
	gap: var(--space-1);
	border: 1px solid transparent;
	background: var(--brand-soft);
	transition: background 0.15s ease, color 0.15s ease;
}

.category-pill::before {
	content: '';
	width: 0.4rem;
	height: 0.4rem;
	border-radius: var(--radius-full);
	background: var(--accent);
}

.category-pill:hover,
.category-pill:focus {
	background: var(--brand-tint);
}

/* --- Pagination polish --------------------------------------------------- */
.pagination .page-numbers {
	background: var(--background-surface-0);
	box-shadow: var(--shadow-xs);
	font-weight: var(--font-weight-semibold);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus {
	transform: translateY(-2px);
	border-color: var(--brand);
}

.pagination .page-numbers.current {
	background: var(--brand-ink);
	border-color: var(--brand-ink);
	box-shadow: var(--shadow-xs);
}

/* --- Meta separators: attach a leading dot to each item instead of using
 * standalone "·" spans, so nothing strands when the row wraps on mobile. ---- */
.single-post__meta .meta-sep,
.post-card__meta .meta-sep,
.featured-card__meta .meta-sep {
	display: none;
}

.single-post__meta,
.post-card__meta,
.featured-card__meta {
	gap: var(--space-2);
}

.single-post__meta > *:not(:first-child):not(.meta-sep)::before,
.post-card__meta > *:not(:first-child):not(.meta-sep)::before,
.featured-card__meta > *:not(:first-child):not(.meta-sep)::before {
	content: '·';
	margin-inline-end: var(--space-2);
	color: var(--border-2);
}

/* --- Reading progress bar (single posts) --------------------------------- */
.reading-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	z-index: 1100;
	background: transparent;
	pointer-events: none;
}

.reading-progress__bar {
	height: 100%;
	width: 0;
	background: var(--brand);
	transition: width 0.1s linear;
}

/* --- Single post: hero + meta ------------------------------------------- */
.single-post__title {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-black);
	line-height: 1.3;
	letter-spacing: -0.02em;
	max-width: 22ch;
}

@media (max-width: 600px) {
	.single-post__title { font-size: var(--font-size-3xl); }
}

.single-post__meta {
	gap: var(--space-3);
	margin-block-start: var(--space-5);
	color: var(--content-lowemphasis);
}

.single-post__author {
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3) var(--space-1) var(--space-4);
	background: var(--background-surface-0);
	border: 1px solid var(--border-1);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-xs);
}

.single-post__avatar {
	box-shadow: 0 0 0 2px var(--brand-soft);
}

.single-post__featured {
	position: relative;
}

.single-post__featured-img {
	box-shadow: var(--shadow-lg);
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* --- Table of contents: numbered, accent active, card -------------------- */
.toc {
	background: var(--background-surface-0);
	border: 1px solid var(--border-1);
	box-shadow: var(--shadow-sm);
}

.toc__toggle {
	gap: var(--space-2);
}

.toc__toggle::before {
	content: '';
	width: 1.1rem;
	height: 1.1rem;
	flex-shrink: 0;
	background: var(--accent);
	-webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
	mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
}

.toc__toggle {
	margin-inline-end: auto;
}

.toc__list { counter-reset: toc; gap: var(--space-1); }

.toc__list a {
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.toc__list a.is-active {
	font-weight: var(--font-weight-semibold);
	border-inline-start-color: var(--accent);
}

/* --- Long-form prose refinements ----------------------------------------- */
.single-post__content h2 {
	position: relative;
	padding-inline-start: var(--space-4);
}

.single-post__content h2::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0.15em 0.15em;
	width: 4px;
	border-radius: var(--radius-full);
	background: var(--accent);
}

.single-post__content blockquote {
	position: relative;
	margin-block: var(--space-6);
	padding: var(--space-4) var(--space-6);
	border-inline-start: 4px solid var(--accent);
	background: var(--accent-tint);
	border-radius: var(--radius-lg);
	font-weight: var(--font-weight-medium);
	color: var(--content-dark);
}

.single-post__content table {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-xs);
	border: 1px solid var(--border-1);
}

.single-post__content thead th {
	background: var(--brand-ink);
	color: #fff;
	border-color: var(--brand-ink);
}

.single-post__content tbody tr:nth-child(even) {
	background: var(--surface-warm);
}

.single-post__tags a {
	border: 1px solid var(--border-1);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.single-post__tags a::before {
	content: '#';
	color: var(--accent);
	margin-inline-end: 2px;
}

.single-post__tags a:hover,
.single-post__tags a:focus {
	border-color: var(--brand);
	background: var(--brand-soft);
}

/* --- Callouts: answer-first + key takeaways ------------------------------ */
.single-post__content .berim-answer {
	position: relative;
	background: var(--brand-soft);
	border: 1px solid var(--brand-tint);
	border-inline-start: 4px solid var(--brand);
	border-radius: var(--radius-xl);
	padding: var(--space-5) var(--space-6);
}

.berim-answer__label {
	gap: var(--space-1);
	background: var(--brand-ink);
	color: #fff;
}

.berim-answer__label::before {
	content: '✦';
	font-size: 0.9em;
}

.single-post__content .berim-takeaways {
	background: var(--accent-tint);
	border: 1px solid var(--accent-soft);
	border-inline-start: 4px solid var(--accent);
}

.berim-takeaways__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--accent-strong);
}

.berim-takeaways__title::before {
	content: '';
	width: 1.4rem;
	height: 1.4rem;
	flex-shrink: 0;
	background: var(--accent);
	-webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
	mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
}

.single-post__content .berim-takeaways__list {
	list-style: none;
	padding-inline-start: 0;
}

.berim-takeaways__list li {
	position: relative;
	padding-inline-start: var(--space-7);
}

.berim-takeaways__list li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.35em;
	width: 1.1rem;
	height: 1.1rem;
	background: var(--accent);
	-webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
	mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

/* --- FAQ accordion (Rank Math FAQ block) --------------------------------- */
.single-post__content .rank-math-list-item {
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.single-post__content .rank-math-block.faq-enhanced .rank-math-question {
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	margin: 0;
	user-select: none;
}

.single-post__content .rank-math-block.faq-enhanced .rank-math-question::after {
	content: '';
	margin-inline-start: auto;
	flex-shrink: 0;
	width: 0.7rem;
	height: 0.7rem;
	margin-block-start: 0.35em;
	border-inline-end: 2.5px solid var(--brand-strong);
	border-block-end: 2.5px solid var(--brand-strong);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.single-post__content .rank-math-block.faq-enhanced .rank-math-list-item.is-open .rank-math-question::after {
	transform: rotate(-135deg);
}

.single-post__content .rank-math-block.faq-enhanced .rank-math-list-item.is-open {
	border-color: var(--brand);
	box-shadow: var(--shadow-sm);
}

.single-post__content .rank-math-block.faq-enhanced .rank-math-answer {
	overflow: hidden;
	margin-block-start: var(--space-3);
}

.single-post__content .rank-math-block.faq-enhanced .rank-math-list-item:not(.is-open) .rank-math-answer {
	display: none;
}

/* --- HowTo steps: numbered ---------------------------------------------- */
.single-post__content .rank-math-steps { counter-reset: howto; }

.single-post__content .rank-math-step {
	position: relative;
	padding-inline-start: var(--space-12);
	border-inline-start-width: 0;
	background: var(--surface-warm);
	border: 1px solid var(--border-1);
}

.single-post__content .rank-math-step::before {
	counter-increment: howto;
	content: counter(howto);
	position: absolute;
	inset-inline-start: var(--space-4);
	inset-block-start: var(--space-4);
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border-radius: var(--radius-full);
	background: var(--brand-ink);
	color: #fff;
	font-weight: var(--font-weight-bold);
	box-shadow: var(--shadow-xs);
}

/* --- Branded CTA refinement ---------------------------------------------- */
.berim-cta__body { position: relative; z-index: 1; }
.single-post__content .berim-cta__button {
	position: relative;
	z-index: 1;
	box-shadow: var(--shadow-md);
	text-decoration: none;
}
.single-post__content .berim-clusters__link,
.single-post__content .berim-cta__brand { text-decoration: none; }

/* --- Author box: premium card ------------------------------------------- */
.author-box {
	background: var(--background-surface-0);
	border: 1px solid var(--border-1);
	box-shadow: var(--shadow-md);
	position: relative;
	overflow: hidden;
}

.author-box::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--brand);
}

.author-box__avatar img {
	box-shadow: 0 0 0 3px var(--background-surface-0), 0 0 0 5px var(--brand-soft);
}

.author-box__archive-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-block-start: var(--space-2);
	color: var(--brand-strong);
}

.author-box__archive-link::after { content: '←'; }

/* --- Related + section headings ------------------------------------------ */
.related-posts__title,
.comments-title {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.related-posts__title::before,
.comments-title::before {
	content: '';
	width: 1.5rem;
	height: 3px;
	border-radius: var(--radius-full);
	background: var(--accent);
}

/* --- Post navigation prev/next ------------------------------------------- */
.post-navigation a {
	background: var(--background-surface-0);
	box-shadow: var(--shadow-xs);
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.post-navigation a:hover,
.post-navigation a:focus {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--brand);
}

/* --- Comments polish ----------------------------------------------------- */
.comment-body {
	background: var(--background-surface-0);
	border: 1px solid var(--border-1);
	box-shadow: var(--shadow-xs);
}

.comment-author .avatar {
	box-shadow: 0 0 0 2px var(--brand-soft);
}

/* --- 404 + states -------------------------------------------------------- */
.error-404__code {
	color: var(--brand-strong);
	font-weight: var(--font-weight-black);
	font-size: 7rem;
}

.error-404__col {
	background: var(--background-surface-0);
	border: 1px solid var(--border-1);
	border-radius: var(--radius-xl);
	padding: var(--space-5);
	box-shadow: var(--shadow-xs);
}

.no-results.not-found,
.error-404 {
	background: var(--background-surface-0);
	border: 1px solid var(--border-1);
	border-radius: var(--radius-2xl);
	padding: var(--space-10) var(--space-6);
	box-shadow: var(--shadow-sm);
}

.no-results .page-content a { color: var(--brand-strong); font-weight: var(--font-weight-semibold); }

/* --- Page header (archives) ---------------------------------------------- */
.page-header:not(.screen-reader-text) .page-title {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-extrabold);
}

.archive-description {
	font-size: var(--font-size-lg);
}

/* --- Mobile menu polish -------------------------------------------------- */
@media (max-width: 768px) {
	.main-navigation .menu {
		border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
		box-shadow: var(--shadow-lg);
		padding: var(--space-4);
		gap: var(--space-1);
	}
	.main-navigation .menu a {
		border-radius: var(--radius-lg);
		font-weight: var(--font-weight-semibold);
	}
	.main-navigation .menu .current-menu-item > a {
		background: var(--brand-soft);
		color: var(--brand-strong);
	}
	/* Keep the header CTA compact on phones. */
	.site-header__cta .berim-btn {
		padding: var(--space-2) var(--space-4);
		font-size: 0.8125rem;
	}
}

/* ==========================================================================
 * CRAFT PASS — quiet, flat, readable. Depth comes from a warm paper surface,
 * crisp hairlines and soft single-layer shadows — no gradients.
 * ========================================================================== */

/* Cards read as layered objects via a soft shadow + hairline (no gradient). */
.post-card,
.featured-card {
	box-shadow: var(--shadow-sm);
}

.post-card:hover,
.post-card:focus-within {
	box-shadow: var(--shadow-md);
	border-color: var(--brand);
}

/* No featured image → a calm, flat brand-tinted panel. */
.featured-card--no-media {
	background: var(--brand-soft);
}

/* Prose links: a real, readable underline (accessible) tinted to the brand. */
.single-post__content a:not(.berim-cta__button):not(.berim-clusters__link) {
	text-decoration-color: color-mix(in srgb, var(--brand-ink) 50%, transparent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.22em;
	transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.single-post__content a:not(.berim-cta__button):not(.berim-clusters__link):hover,
.single-post__content a:not(.berim-cta__button):not(.berim-clusters__link):focus {
	text-decoration-color: var(--brand-ink);
	color: var(--brand-strong);
}

/* ============================================================
   Live accommodation listings — [berim_listings] (agent-driven)
   ============================================================ */
.single-post__content .berim-listings {
	margin: 2.5rem 0;
	padding: 1.25rem 1.25rem 1.35rem;
	border: 1px solid var(--border-1, #e6e6e6);
	border-radius: 20px;
	background: var(--background-surface-1, #fafafa);
}

.berim-listings__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.1rem;
}

.berim-listings__title {
	margin: 0;
	font-weight: 800;
	font-size: 1.1rem;
	line-height: 1.4;
	color: var(--content-primary, #1a1a1a);
}

.berim-listings__brand {
	flex: none;
	font-weight: 800;
	font-size: 0.78rem;
	color: #fff;
	background: var(--brand, #6a3df0);
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(106, 61, 240, 0.3);
}

.berim-listings__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.15rem;
}

/* The card is an <a>; neutralize the content link styling. */
.single-post__content .berim-listing {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--border-2, #ececec);
	border-radius: 16px;
	overflow: hidden;
	background: var(--background-surface-0, #fff);
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.single-post__content .berim-listing:hover,
.single-post__content .berim-listing:focus {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(16, 24, 40, 0.12);
	border-color: var(--brand, #6a3df0);
}

.berim-listing__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--background-surface-2, #f0f0f0);
	overflow: hidden;
}

/* Specificity bump (two classes) so it beats `.single-post__content img { height:auto }`. */
.single-post__content .berim-listing__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform 0.4s ease;
}

.single-post__content .berim-listing:hover .berim-listing__img {
	transform: scale(1.05);
}

.berim-listing__img--empty {
	display: block;
	width: 100%;
	height: 100%;
}

.berim-listing__instant {
	position: absolute;
	inset-inline-end: 0.55rem;
	inset-block-start: 0.55rem;
	font-size: 0.7rem;
	font-weight: 700;
	color: #fff;
	background: var(--brand-strong, #5a2fd0);
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.berim-listing__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.45rem;
	padding: 0.8rem 0.85rem 0.9rem;
}

.berim-listing__head {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.berim-listing__rating {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--content-highemphasis, #222);
}

.berim-listing__rating--new {
	color: var(--brand, #6a3df0);
}

.berim-listing__head {
	flex-wrap: wrap;
}

.berim-listing__reviews {
	font-size: 0.74rem;
	color: var(--content-lowemphasis, #888);
}

/* Successful-stay trust signal — sits at the far (logical-end) side of the head. */
.berim-listing__stays {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	margin-inline-start: auto;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--success, #1a9f6b);
}

.berim-listing__stays-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 0.95rem;
	height: 0.95rem;
	border-radius: 999px;
	background: var(--success, #1a9f6b);
	color: #fff;
	font-size: 0.6rem;
	line-height: 1;
}

/* Empty-summary placeholder — recede quietly so cards keep a consistent shape. */
.berim-listing__summary--empty {
	background: var(--background-surface-2, rgba(0, 0, 0, 0.04));
	border-color: transparent;
}

.berim-listing__summary--empty .berim-listing__summary-text {
	font-size: 0.74rem;
	color: var(--content-lowemphasis, #999);
	opacity: 0.8;
	-webkit-line-clamp: 2;
}

.berim-listing__title {
	font-size: 0.98rem;
	font-weight: 800;
	line-height: 1.55;
	color: var(--content-secondary, #1a1a1a);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.berim-listing__meta {
	font-size: 0.78rem;
	color: var(--content-lowemphasis, #777);
	line-height: 1.6;
}

/* AI guest-comment summary — a one-glance digest, styled like the PDP block. */
.berim-listing__summary {
	display: block;
	margin-top: 0.2rem;
	padding: 0.7rem 0.75rem;
	border-radius: 12px;
	background: var(--brand-tint, rgba(106, 61, 240, 0.12));
	border: 1px solid var(--brand-tint-border, rgba(106, 61, 240, 0.24));
}

.berim-listing__summary-label {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 0.45rem;
}

.berim-listing__summary-label::before {
	content: "✦";
	color: var(--brand, #6a3df0);
	font-size: 0.9rem;
	line-height: 1;
}

.berim-listing__summary-title {
	font-size: 0.82rem;
	font-weight: 800;
	color: var(--content-primary, #1a1a1a);
}

.berim-listing__summary-ai {
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #fff;
	background: var(--brand, #6a3df0);
	padding: 0.06rem 0.38rem;
	border-radius: 999px;
	line-height: 1.6;
}

/* Use the high-contrast content color (same as the readable card title) so the
   digest stays legible on both the light and dark blog themes. */
.berim-listing__summary-text {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.92rem;
	line-height: 1.95;
	color: var(--content-primary, #1a1a1a);
	opacity: 0.95;
}

.berim-listing__price {
	margin-top: auto;
	padding-top: 0.55rem;
	font-size: 0.9rem;
	color: var(--content-primary, #1a1a1a);
	border-top: 1px solid var(--border-2, #f0f0f0);
}

.berim-listing__price del {
	color: var(--content-lowemphasis, #aaa);
	font-size: 0.78rem;
	margin-inline-end: 0.3rem;
}

.berim-listing__price strong {
	font-weight: 800;
	color: var(--brand, #6a3df0);
}

/* Mobile: a swipeable carousel, like the Berim app (audience is mostly on phones). */
@media (max-width: 640px) {
	.berim-listings__grid {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: 86%;
		gap: 0.85rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		margin-inline: -0.5rem;
		padding: 0.25rem 0.5rem 0.5rem;
		scrollbar-width: none;
	}

	.berim-listings__grid::-webkit-scrollbar {
		display: none;
	}

	.single-post__content .berim-listing {
		scroll-snap-align: start;
	}

	.single-post__content .berim-listings {
		padding: 1.1rem 0.9rem 1.2rem;
	}
}

/* Smaller phones: keep accommodation cards short enough to use one-handed.
   The image, the AI guest-comment digest and the inner paddings are the main
   height drivers, so trim each so a whole card fits the viewport. */
@media (max-width: 480px) {
	.berim-listing__media {
		aspect-ratio: 16 / 10;
	}

	.single-post__content .berim-listing__body {
		gap: 0.35rem;
		padding: 0.65rem 0.7rem 0.7rem;
	}

	.berim-listing__title {
		font-size: 0.92rem;
		line-height: 1.4;
	}

	.berim-listing__summary {
		margin-top: 0.1rem;
		padding: 0.5rem 0.6rem;
	}

	.berim-listing__summary-label {
		margin-bottom: 0.3rem;
	}

	.berim-listing__summary-text {
		font-size: 0.82rem;
		line-height: 1.6;
		-webkit-line-clamp: 3;
	}

	.berim-listing__summary--empty .berim-listing__summary-text {
		-webkit-line-clamp: 2;
	}

	.berim-listing__price {
		padding-top: 0.45rem;
	}
}