/**
 * Basuto Insights — one shared stylesheet.
 *
 * Layout only. Colour, type and spacing come from the theme's own tokens
 * wherever a token exists; the hex values below are the ones read back from
 * the site's own published markup (reusable block 1375 and service page 5605)
 * and are used only as fallbacks behind a var(), so a theme.json change still
 * wins.
 *
 * No per-post CSS, no !important, and no redeclaration of the header, footer,
 * buttons, FAQ or CTA styling the theme already owns.
 *
 * Breakpoints match the approved design: 1180 / 980 / 760 / 620 / 380.
 */

:root {
	/* Fallbacks are the actual theme.json palette read from staging
	   (theme-browser-evidence.md), not guesses. Note charcoal is #1F2421, and
	   the slug named "gold" holds the deep teal #0E5C5C — an earlier revision
	   mapped the deep teal onto charcoal and would have rendered near-black
	   where the design wants teal. The var() wins whenever the theme loads. */
	--bi-cream: var(--wp--preset--color--cream, #FBF8F1);
	--bi-teal-deep: var(--wp--preset--color--gold, #0E5C5C);
	--bi-teal: var(--wp--preset--color--teal-hover, #237676);
	--bi-ink: var(--wp--preset--color--charcoal, #1F2421);
	--bi-terracotta: var(--wp--preset--color--terracotta, #A04E2C);
	--bi-hairline: #B8E0DA;
	--bi-ink-soft: #4A5A5A;

	/* Theme layout: contentSize 800, wideSize 1180. The article reading column
	   is narrower than the theme default on purpose — 800px of 15px body text
	   is well past a comfortable measure. */
	--bi-wide: 1180px;
	--bi-measure: 660px;
}

/* Cream supporting surface, to match the approved article spec. */
.section-cream {
	background-color: var(--bi-cream);
}

/* ------------------------------------------------------------------ *
 * Shared furniture
 * ------------------------------------------------------------------ */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.kicker,
.eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--bi-teal);
}

.kicker a,
.eyebrow a {
	color: inherit;
	text-decoration: none;
}

.kicker a:hover,
.kicker a:focus {
	text-decoration: underline;
}

.story-meta,
.ed-card-foot,
.article-meta {
	gap: 6px 14px;
	font-size: 14px;
	color: var(--bi-ink-soft);
}

.story-meta p,
.ed-card-foot p,
.article-meta p,
.read-time,
.article-updated {
	margin: 0;
	font-size: 14px;
}

/* An unfilled binding leaves an empty paragraph; do not reserve space. */
.read-time:empty,
.article-updated:empty,
.next-step:empty,
.filter-summary:empty,
.reset-wrap:empty,
.kicker:empty {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Hub masthead and topic navigation
 * ------------------------------------------------------------------ */

.hub-masthead-inner {
	gap: 12px 40px;
}

/* The approved spread is a wide-width row, matching the theme's wideSize
   rather than the 800px content default it would otherwise inherit. */
.spread .wp-block-columns,
.latest-hub > *,
.hub-masthead-inner,
.topicnav-scroll {
	max-width: var(--bi-wide);
	margin-left: auto;
	margin-right: auto;
}

.hub-title {
	margin: 0;
	padding-left: 16px;
	border-left: 4px solid var(--bi-terracotta);
}

.hub-intro {
	max-width: 46ch;
	margin: 0 0 4px;
	color: var(--bi-ink-soft);
}

/* One scrolling strip, not a scrolling page: the row is pinned to its
   container so the buttons' intrinsic width cannot leak out through the
   ancestors and scroll the document sideways at 320/375. */
.topicnav-scroll {
	width: 100%;
	min-width: 0;
	overflow-x: auto;
	scroll-padding-inline: 16px;
	-webkit-overflow-scrolling: touch;
}

ul.topicnav-list {
	display: flex;
	width: max-content;
	min-width: 100%;
	gap: 8px;
	margin: 0;
	padding: 4px 0 10px;
	list-style: none;
}

ul.topicnav-list li {
	margin: 0;
}

.topicnav-list a {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--bi-hairline);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--bi-teal-deep);
	text-decoration: none;
}

.topicnav-list a:hover,
.topicnav-list a:focus-visible {
	border-color: var(--bi-teal);
	background: var(--bi-cream);
}

.topicnav-list a.is-current,
.topicnav-list a[aria-current="true"] {
	border-color: var(--bi-teal-deep);
	background: var(--bi-teal-deep);
	color: #fff;
}

.topicnav-list .post-count {
	opacity: 0.7;
	font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * Editorial spread — 50 / 25 / 25 on desktop
 * ------------------------------------------------------------------ */

.spread-grid {
	gap: 32px;
}

.spread-lead {
	border-right: 1px solid var(--bi-hairline);
	padding-right: 32px;
}

/* The lead photograph is capped so the lead headline and both supporting
   headlines stay above the fold at 1280x800. */
.lead-media img {
	width: 100%;
	max-height: 260px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.lead-title {
	margin: 8px 0 8px;
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.25;
}

.lead-standfirst {
	margin: 0 0 12px;
	max-width: 52ch;
	color: var(--bi-ink-soft);
}

.lead-go {
	display: inline-block;
	margin-top: 14px;
}

.side-list .wp-block-post-template {
	gap: 24px;
}

.side-media img {
	width: 100%;
	max-height: 160px;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.side-title {
	margin: 8px 0 6px;
	font-size: 18px;
	line-height: 1.3;
}

.side-excerpt {
	margin: 0 0 6px;
	font-size: 15px;
	color: var(--bi-ink-soft);
}

/* ------------------------------------------------------------------ *
 * Latest articles: tools row, count, grid
 * ------------------------------------------------------------------ */

.latest-head {
	gap: 12px 24px;
	padding-top: 8px;
	border-top: 1px solid var(--bi-hairline);
}

.latest-tools {
	gap: 10px 16px;
}

/* The search must fit the narrowest supported viewport. At 320px, 40px of
   section padding each side leaves 240px, so a fixed 12rem input plus an
   outside button overflowed. It now flexes down instead. */
.latest-tools .wp-block-search {
	max-width: 100%;
}

.latest-tools .wp-block-search__input {
	min-width: 0;
	flex: 1 1 8rem;
}

.latest-meta {
	gap: 4px 12px;
	margin: 10px 0 18px;
	font-size: 14px;
	color: var(--bi-ink-soft);
}

.result-count {
	margin: 0;
	font-weight: 600;
}

.next-step {
	margin: 0 0 18px;
	font-size: 15px;
}

.ed-grid {
	gap: 28px 24px;
}

.ed-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 0;
}

.ed-card-media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.ed-card-body {
	padding-top: 12px;
}

.ed-card-title {
	margin: 4px 0 6px;
	font-size: 19px;
	line-height: 1.3;
}

.ed-card-excerpt {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--bi-ink-soft);
}

.ed-card-foot {
	margin-top: auto;
}

.empty-state {
	padding: 28px 0;
	border-top: 1px solid var(--bi-hairline);
}

.ed-pagination {
	margin-top: 32px;
}

/* ------------------------------------------------------------------ *
 * Article
 * ------------------------------------------------------------------ */

.article-title {
	margin: 4px 0 10px;
}

.article-standfirst {
	max-width: 62ch;
	font-size: 19px;
	line-height: 1.55;
	color: var(--bi-ink-soft);
}

.article-meta {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--bi-hairline);
}

.article-byline {
	font-weight: 600;
	color: var(--bi-teal-deep);
}

/* The review line is deliberately prominent while review is pending. */
.review-strip {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-left: 3px solid var(--bi-teal-deep);
	background: var(--bi-cream);
	font-size: 14px;
}

.review-strip p {
	margin: 0;
}

.article-columns {
	gap: 40px;
}

/* White reading surface, cream supporting panels. */
.article-main {
	background: #fff;
}

.article-media img {
	width: 100%;
	max-height: 380px;
	object-fit: cover;
}

.article-main .wp-block-post-content > * {
	max-width: var(--bi-measure);
}

.article-title,
.article-standfirst {
	max-width: var(--bi-measure);
}

/* ---- contents ---- */

.toc-list {
	margin: 8px 0 0;
	padding-left: 1.1em;
}

.toc-list li {
	margin: 0 0 6px;
	font-size: 15px;
}

.toc-level-3 {
	margin-left: 1em;
	font-size: 14px;
}

.toc-rail {
	position: sticky;
	top: 24px;
}

.rail-box {
	margin-bottom: 24px;
	padding: 18px 20px;
	border: 1px solid var(--bi-hairline);
	border-radius: 12px;
	background: var(--bi-cream);
}

.rail-box.basuto-price-card {
	border-color: var(--bi-hairline);
}

.related-services .service-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.related-services .service-link {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 500;
}

/* ---- sources ---- */

.panel.sources {
	margin-top: 40px;
	padding: 24px 28px;
	border-radius: 12px;
	background: var(--bi-cream);
}

.panel.sources h2 {
	margin: 0 0 12px;
	font-size: 20px;
}

.sources-list {
	margin: 0;
	padding-left: 1.2em;
	font-size: 15px;
}

.sources-list li {
	margin: 0 0 8px;
}

.accessed {
	color: var(--bi-ink-soft);
	font-size: 14px;
}

.related-reading h2 {
	margin: 0 0 24px;
}

/* ------------------------------------------------------------------ *
 * Focus visibility — every interactive surface in this feature
 * ------------------------------------------------------------------ */

.topicnav-list a:focus-visible,
.toc-list a:focus-visible,
.sources-list a:focus-visible,
.ed-card-title a:focus-visible,
.side-title a:focus-visible,
.lead-title a:focus-visible,
.service-link a:focus-visible,
.next-step a:focus-visible,
.btn-reset:focus-visible,
.lead-go:focus-visible {
	outline: 3px solid var(--bi-teal-deep);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Breakpoints
 * ------------------------------------------------------------------ */

@media (max-width: 1180px) {
	.ed-grid {
		gap: 24px 20px;
	}
}

@media (max-width: 980px) {
	/* The 50/25/25 proportions are desktop-only: the lead goes full width
	   with the supporting pair beneath it. */
	.spread-grid {
		flex-wrap: wrap;
	}

	.spread-lead,
	.spread-side {
		flex-basis: 100% !important;
	}

	.spread-lead {
		border-right: 0;
		padding-right: 0;
		padding-bottom: 24px;
		border-bottom: 1px solid var(--bi-hairline);
	}

	.article-columns {
		flex-wrap: wrap;
	}

	.article-main,
	.article-rail {
		flex-basis: 100% !important;
	}

	/* In-flow contents on narrow screens; the rail copy is hidden so the
	   list is not announced twice. */
	.toc-rail {
		position: static;
		display: none;
	}
}

@media (min-width: 981px) {
	.toc-inline {
		display: none;
	}
}

@media (max-width: 760px) {
	.spread-side .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}

	.ed-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.hub-title {
		font-size: clamp(26px, 6vw, 34px);
	}
}

@media (max-width: 620px) {
	.ed-grid {
		grid-template-columns: 1fr !important;
	}

	.latest-head,
	.hub-masthead-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.latest-tools {
		width: 100%;
	}

	.lead-media img {
		max-height: 220px;
	}
}

@media (max-width: 380px) {
	.topicnav-list a {
		padding: 6px 12px;
		font-size: 13px;
	}

	.article-standfirst {
		font-size: 17px;
	}

	/* Reclaim the 40px side padding the sections carry, so the search row and
	   the cards have room at 320px. */
	.hub-masthead,
	.topicnav,
	.spread,
	.latest-hub,
	.article-head,
	.article-shell,
	.related-reading {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.topicnav-scroll {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------------------ *
 * Editor sidebar — the ordered pickers. Admin only; these class names
 * appear nowhere on the front end.
 * ------------------------------------------------------------------ */

.basuto-insights-picker {
	margin-bottom: 20px;
}

.basuto-insights-picker__heading {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
}

.basuto-insights-picker__empty {
	margin: 0 0 8px;
	font-size: 12px;
	font-style: italic;
	opacity: 0.7;
}

ol.basuto-insights-picker__list {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	counter-reset: bi-pick;
}

.basuto-insights-picker__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	margin: 0;
	padding: 4px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	counter-increment: bi-pick;
}

.basuto-insights-picker__item:last-child {
	border-bottom: 0;
}

.basuto-insights-picker__label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.basuto-insights-picker__label::before {
	content: counter(bi-pick) ". ";
	opacity: 0.6;
}

.basuto-insights-picker__actions {
	display: flex;
	flex: 0 0 auto;
	gap: 0;
}