/* Single post — articles (editorial) & FAQ (Q&A)
 *
 * Two layouts share one reading column width and a set of common content
 * styles (links, lists, tables, quotes, figures). Articles use a serif
 * body with a lead paragraph and drop cap; FAQ uses a clean sans-serif
 * answer plus an accordion of related questions.
 */

:root {
	--bollaert-read: 864px;     /* reading column */
}

/* =========================================================================
 * ARTICLE (editorial / magazine)
 * ===================================================================== */

.bollaert-article {
	--serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
	max-width: var(--bollaert-read);
	margin: var(--wp--preset--spacing--8) auto var(--wp--preset--spacing--12);
}

/* --- Back link (shared by article + FAQ) --- */

.bollaert-article__back {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.bollaert-article__back:hover {
	color: var(--wp--preset--color--brand);
}

.bollaert-article__back-chev {
	display: inline-flex;
	transform: rotate(180deg);
}

/* --- Head --- */

.bollaert-article__cat {
	display: inline-block;
	margin: var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.bollaert-article__cat:hover {
	color: var(--wp--preset--color--brand-dark);
}

.bollaert-article__title {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-family: var(--serif);
	font-size: clamp(1.9rem, 3.6vw, 2.7rem);
	line-height: 1.14;
	letter-spacing: -0.015em;
	font-weight: 700;
	color: var(--wp--preset--color--text);
}

.bollaert-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.bollaert-article__byline {
	font-weight: 600;
	color: var(--wp--preset--color--brand-dark);
}

.bollaert-article__dot {
	opacity: 0.5;
}

/* --- Hero image --- */

.bollaert-article__hero {
	margin: var(--wp--preset--spacing--8) 0;
	border-radius: 16px;
	overflow: hidden;
}

.bollaert-article__hero img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Body (editorial typography) --- */

.bollaert-article__body {
	font-family: var(--serif);
	font-size: 1.125rem;
	line-height: 1.78;
	color: #232a31;
}

.bollaert-article__body > p {
	margin: 0 0 1.4em;
}

/* Lead: the opening paragraph reads a touch larger. */
.bollaert-article__body > p:first-of-type {
	font-size: 1.24rem;
	line-height: 1.7;
	color: #1f262d;
}

/* Drop cap on the first paragraph */
.bollaert-article__body > p:first-of-type::first-letter {
	float: left;
	font-size: 3.4em;
	line-height: 0.74;
	font-weight: 700;
	margin: 0.06em 0.1em 0 0;
	color: var(--wp--preset--color--brand-dark);
}

/* =========================================================================
 * SHARED CONTENT STYLES (article body, FAQ answer, accordion answer)
 * ===================================================================== */

.bollaert-article__body h2,
.bollaert-article__body h3,
.bollaert-article__body h4 {
	font-family: var(--serif);
	color: var(--wp--preset--color--text);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.bollaert-article__body h2 { margin: 1.7em 0 0.55em; font-size: 1.6rem; }
.bollaert-article__body h3 { margin: 1.45em 0 0.45em; font-size: 1.3rem; }

.bollaert-article__body a,
.bollaert-faq__a a,
.bollaert-faq-acc__a a {
	color: var(--wp--preset--color--brand-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.bollaert-article__body a:hover,
.bollaert-faq__a a:hover,
.bollaert-faq-acc__a a:hover {
	color: var(--wp--preset--color--brand);
}

.bollaert-article__body strong,
.bollaert-faq__a strong,
.bollaert-faq-acc__a strong {
	font-weight: 700;
	color: var(--wp--preset--color--text);
}

.bollaert-article__body ul,
.bollaert-article__body ol,
.bollaert-faq__a ul,
.bollaert-faq__a ol,
.bollaert-faq-acc__a ul,
.bollaert-faq-acc__a ol {
	margin: 0 0 1.3em;
	padding-left: 1.3em;
}

.bollaert-article__body li,
.bollaert-faq__a li,
.bollaert-faq-acc__a li {
	margin-bottom: 0.45em;
}

.bollaert-article__body blockquote {
	margin: 1.6em 0;
	padding: 0.2em 0 0.2em 1.2em;
	border-left: 3px solid var(--wp--preset--color--brand);
	font-style: italic;
	font-size: 1.28rem;
	line-height: 1.6;
	color: var(--wp--preset--color--brand-dark);
}

.bollaert-article__body img,
.bollaert-faq__a img,
.bollaert-faq-acc__a img {
	height: auto;
	max-width: 100%;
	border-radius: 12px;
}

.bollaert-article__body figure { margin: 1.6em 0; }

.bollaert-article__body figcaption {
	margin-top: 0.5em;
	font-family: var(--wp--preset--font-family, inherit);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* Tables (key-spec tables from imported content) */
.bollaert-article__body table,
.bollaert-faq__a table,
.bollaert-faq-acc__a table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 1.6em 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.bollaert-article__body th,
.bollaert-article__body td,
.bollaert-faq__a th,
.bollaert-faq__a td,
.bollaert-faq-acc__a th,
.bollaert-faq-acc__a td {
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.6em 0.85em;
	text-align: left;
	vertical-align: top;
}

.bollaert-article__body thead th,
.bollaert-article__body tr > th,
.bollaert-faq__a thead th,
.bollaert-faq__a tr > th,
.bollaert-faq-acc__a thead th,
.bollaert-faq-acc__a tr > th {
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand-dark);
	font-weight: 700;
}

.bollaert-article__body tbody tr:nth-child(even),
.bollaert-faq__a tbody tr:nth-child(even),
.bollaert-faq-acc__a tbody tr:nth-child(even) {
	background: #f7f9fb;
}

.bollaert-article__body table p,
.bollaert-faq__a table p,
.bollaert-faq-acc__a table p { margin: 0; }

/* --- Article foot + related --- */

.bollaert-article__foot {
	margin-top: var(--wp--preset--spacing--8);
	padding-top: var(--wp--preset--spacing--4);
	border-top: 1px solid var(--wp--preset--color--border);
}

.bollaert-article-related {
	max-width: 980px;
	margin: var(--wp--preset--spacing--12) auto 0;
	padding-top: var(--wp--preset--spacing--8);
	border-top: 1px solid var(--wp--preset--color--border);
}

.bollaert-article-related__title {
	margin: 0 0 var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--xl);
	text-align: center;
}

.bollaert-article-related__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--6);
}

.bollaert-article-related__grid .bollaert-post-card {
	flex: 0 1 calc((100% - 2 * var(--wp--preset--spacing--6)) / 3);
	max-width: 380px;
}

/* =========================================================================
 * FAQ (Q&A)
 * ===================================================================== */

.bollaert-faq {
	max-width: var(--bollaert-read);
	margin: var(--wp--preset--spacing--8) auto var(--wp--preset--spacing--10);
}

.bollaert-faq__head {
	margin-top: var(--wp--preset--spacing--6);
}

.bollaert-faq__eyebrow {
	display: inline-block;
	margin-bottom: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.bollaert-faq__eyebrow:hover { color: var(--wp--preset--color--brand-dark); }

.bollaert-faq__qrow {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--4);
}

.bollaert-faq__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-top: 0.15em;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
}

.bollaert-faq__q {
	margin: 0;
	font-size: clamp(1.55rem, 3vw, 2.2rem);
	line-height: 1.22;
	letter-spacing: -0.01em;
	font-weight: 700;
	color: var(--wp--preset--color--text);
}

/* Answer — clean sans-serif, set inside a soft panel */
.bollaert-faq__a {
	margin-top: var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--7);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	font-size: 1.05rem;
	line-height: 1.72;
	color: #2a3138;
}

.bollaert-faq__a > p { margin: 0 0 1.1em; }
.bollaert-faq__a > p:last-child { margin-bottom: 0; }

.bollaert-faq__a h2 { margin: 1.4em 0 0.5em; font-size: 1.35rem; color: var(--wp--preset--color--text); }
.bollaert-faq__a h3 { margin: 1.2em 0 0.4em; font-size: 1.15rem; color: var(--wp--preset--color--text); }

/* CTA: didn't find your question? */
.bollaert-faq__cta {
	margin-top: var(--wp--preset--spacing--7);
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--7);
	border-radius: 14px;
	background: var(--wp--preset--color--brand-tint);
	text-align: center;
}

.bollaert-faq__cta-title {
	margin: 0 0 0.25em;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	color: var(--wp--preset--color--brand-dark);
}

.bollaert-faq__cta-text {
	margin: 0 0 var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--muted);
}

.bollaert-faq__cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--3);
}

.bollaert-faq__cta-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.7em 1.5em;
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.bollaert-faq__cta-btn:hover { background: var(--wp--preset--color--brand-dark); transform: translateY(-1px); }

.bollaert-faq__cta-btn.is-ghost {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand-dark);
	border: 1px solid var(--wp--preset--color--brand);
}

.bollaert-faq__cta-btn.is-ghost:hover { background: #fff; color: var(--wp--preset--color--brand); }

/* --- Other questions (accordion) --- */

.bollaert-faq-related {
	max-width: var(--bollaert-read);
	margin: var(--wp--preset--spacing--12) auto 0;
	padding-top: var(--wp--preset--spacing--8);
	border-top: 1px solid var(--wp--preset--color--border);
}

.bollaert-faq-related__title {
	margin: 0 0 var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--xl);
}

.bollaert-faq-acc {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	overflow: hidden;
	background: var(--wp--preset--color--white);
}

.bollaert-faq-acc__item + .bollaert-faq-acc__item {
	border-top: 1px solid var(--wp--preset--color--border);
}

.bollaert-faq-acc__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	color: var(--wp--preset--color--text);
	cursor: pointer;
	list-style: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.bollaert-faq-acc__q::-webkit-details-marker { display: none; }
.bollaert-faq-acc__q:hover { color: var(--wp--preset--color--brand); background: #fafcfe; }

.bollaert-faq-acc__chev {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--wp--preset--color--brand);
	transform: rotate(90deg);
	transition: transform 0.2s ease;
}

.bollaert-faq-acc__item[open] .bollaert-faq-acc__chev { transform: rotate(-90deg); }
.bollaert-faq-acc__item[open] > .bollaert-faq-acc__q { color: var(--wp--preset--color--brand-dark); }

.bollaert-faq-acc__a {
	padding: 0 var(--wp--preset--spacing--6) var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.7;
	color: #2a3138;
}

.bollaert-faq-acc__a > p:first-child { margin-top: 0; }

.bollaert-faq-acc__more {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-top: var(--wp--preset--spacing--2);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.bollaert-faq-acc__more:hover { color: var(--wp--preset--color--brand-dark); }

.bollaert-faq-related__all {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-top: var(--wp--preset--spacing--5);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.bollaert-faq-related__all:hover { color: var(--wp--preset--color--brand-dark); }

/* =========================================================================
 * RESPONSIVE
 * ===================================================================== */

@media (max-width: 860px) {
	.bollaert-article-related__grid .bollaert-post-card {
		flex-basis: calc((100% - var(--wp--preset--spacing--6)) / 2);
	}
}

@media (max-width: 560px) {
	.bollaert-article-related__grid .bollaert-post-card {
		flex-basis: 100%;
		max-width: none;
	}

	.bollaert-article__body { font-size: 1.0625rem; }
	.bollaert-article__body > p:first-of-type { font-size: 1.15rem; }

	.bollaert-faq__badge { width: 38px; height: 38px; }
	.bollaert-faq__a { padding: var(--wp--preset--spacing--5); }
}
