/* ============================================================
   Editorial layer — articles, archives, the guides index.
   Loaded only on those pages (functions.php). var(--bbc-*) only.
   ============================================================ */

/* Hello constrains .site-main; articles set their own measure. */
.bbc-article.site-main,
.bbc-archive.site-main {
	max-width: none;
	padding-inline: var(--bbc-space-4);
}

/* ---- Article head ------------------------------------------------ */
.bbc-article__head {
	max-width: 46rem;
	margin: var(--bbc-space-7) auto var(--bbc-space-5);
}
.bbc-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bbc-space-2);
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
	font-weight: var(--bbc-weight-semi);
	margin-bottom: var(--bbc-space-4);
}
.bbc-crumbs a { color: var(--bbc-brand-primary); text-decoration: none; }
.bbc-crumbs a:hover { text-decoration: underline; }
.bbc-crumbs span { color: var(--bbc-text-muted); }
.bbc-article__title {
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.022em;
	margin: 0 0 var(--bbc-space-4);
}
.bbc-article__dek {
	font-family: var(--bbc-font-serif);
	font-size: var(--bbc-text-lg);
	line-height: 1.45;
	color: var(--bbc-text-muted);
	margin: 0 0 var(--bbc-space-4);
	text-wrap: pretty;
}
.bbc-article__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bbc-space-2) var(--bbc-space-5);
	list-style: none;
	margin: 0;
	padding: var(--bbc-space-3) 0 0;
	border-top: 1px solid var(--bbc-border);
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
	color: var(--bbc-text-muted);
}
.bbc-article__facts li { display: inline-flex; align-items: center; gap: .4rem; }
.bbc-article__facts .bbc-ico { color: var(--bbc-brand-primary); }

/* ---- Featured image ------------------------------------------------ */
.bbc-article__hero {
	max-width: 64rem;
	margin: 0 auto var(--bbc-space-7);
}
.bbc-article__hero img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bbc-radius-3);
	border: 1px solid var(--bbc-border);
}

/* ---- Body: centre the measure-limited content ----------------------- */
.bbc-article__body { max-width: 46rem; margin-inline: auto; }
.bbc-article__body > * { margin-inline: auto; }
.bbc-article__body > .wp-block-table { max-width: 100%; }
.bbc-article__body h2 { font-size: var(--bbc-text-xl); line-height: var(--bbc-lh-xl); }
.bbc-article__body h2::before {
	/* Each section heading is a stop on the line. */
	content: "";
	display: block;
	width: 2.5rem;
	height: var(--bbc-line-w);
	margin-bottom: var(--bbc-space-3);
	border-radius: 2px;
	background: var(--bbc-line);
}
.bbc-article__body blockquote {
	margin: var(--bbc-space-6) 0;
	padding: var(--bbc-space-2) 0 var(--bbc-space-2) var(--bbc-space-5);
	border-left: var(--bbc-line-w) solid var(--bbc-line);
	font-family: var(--bbc-font-serif);
	font-size: var(--bbc-text-lg);
	line-height: 1.45;
}

/* ---- Postcode prompt ----------------------------------------------- */
.bbc-article__cta {
	max-width: 46rem;
	margin: var(--bbc-space-7) auto;
	padding: var(--bbc-space-5);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--bbc-space-4) var(--bbc-space-5);
	background: var(--bbc-hero-grad);
	border: 1px solid var(--bbc-border);
	border-radius: var(--bbc-radius-3);
}
.bbc-article__cta h2 { font-size: var(--bbc-text-xl); margin: 0 0 var(--bbc-space-2); }
.bbc-article__cta p { font-family: var(--bbc-font-sans); font-size: var(--bbc-text-sm); line-height: var(--bbc-lh-sm); color: var(--bbc-text-muted); margin: 0; }
.bbc-article__form { display: flex; gap: var(--bbc-space-2); }
.bbc-article__form input { width: 11rem; min-width: 0; }
.bbc-article__form button { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
@media (max-width: 40rem) {
	.bbc-article__cta { grid-template-columns: minmax(0, 1fr); padding: var(--bbc-space-4); }
	.bbc-article__form input { flex: 1; width: auto; }
}

.bbc-article__tags { max-width: 46rem; margin: 0 auto var(--bbc-space-6); display: flex; flex-wrap: wrap; gap: var(--bbc-space-2); }
.bbc-article__tags a {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-xs);
	padding: .2rem .6rem;
	border: 1px solid var(--bbc-border);
	border-radius: var(--bbc-radius-1);
	color: var(--bbc-text-muted);
	text-decoration: none;
	background: var(--bbc-surface);
}
.bbc-article__tags a:hover { border-color: var(--bbc-line); color: var(--bbc-brand-primary); }

/* ---- More guides ------------------------------------------------------ */
.bbc-article__more {
	max-width: 76rem;
	margin: var(--bbc-space-8) auto 0;
	padding-top: var(--bbc-space-6);
	border-top: 1px solid var(--bbc-border);
}
.bbc-article__more h2 { font-size: var(--bbc-text-2xl); margin: 0 0 var(--bbc-space-5); }

/* ---- Archive + guides index -------------------------------------------- */
.bbc-archive { max-width: 76rem; margin-inline: auto; }
.bbc-archive__head { max-width: 46rem; margin: var(--bbc-space-7) 0 var(--bbc-space-6); }
.bbc-archive__title { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.08; margin: 0 0 var(--bbc-space-3); }
.bbc-archive__intro, .bbc-archive__intro p { font-family: var(--bbc-font-sans); font-size: var(--bbc-text-md); line-height: 1.55; color: var(--bbc-text-muted); }
.bbc-archive .nav-links { display: flex; gap: var(--bbc-space-3); margin-top: var(--bbc-space-6); font-family: var(--bbc-font-sans); }

.bbc-guides__sections { display: flex; flex-wrap: wrap; gap: var(--bbc-space-2); margin-top: var(--bbc-space-4); }
.bbc-guides__sections a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .8rem;
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
	font-weight: var(--bbc-weight-semi);
	color: var(--bbc-text);
	text-decoration: none;
	background: var(--bbc-surface);
	border: 1px solid var(--bbc-border);
	border-radius: var(--bbc-radius-1);
}
.bbc-guides__sections a span { color: var(--bbc-text-muted); font-weight: var(--bbc-weight-regular); }
.bbc-guides__sections a:hover { border-color: var(--bbc-line); }
.bbc-guides__section { margin-top: var(--bbc-space-7); scroll-margin-top: var(--bbc-space-4); }
.bbc-guides__heading {
	display: flex;
	align-items: center;
	gap: var(--bbc-space-3);
	font-size: var(--bbc-text-xl);
	margin: 0 0 var(--bbc-space-4);
}
.bbc-guides__heading::after { content: ""; flex: 1; height: var(--bbc-line-w); border-radius: 2px; background: var(--bbc-line); }

/* ---- Plain pages: About, Contact, Privacy -------------------------- */
.bbc-page.site-main { max-width: none; padding-inline: var(--bbc-space-4); }
.bbc-page__head, .bbc-page__body { max-width: 46rem; margin-inline: auto; }
.bbc-page__head { margin-top: var(--bbc-space-7); margin-bottom: var(--bbc-space-5); }
.bbc-page__title { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.08; letter-spacing: -0.022em; margin: 0 0 var(--bbc-space-3); }
.bbc-page__dek { font-family: var(--bbc-font-serif); font-size: var(--bbc-text-lg); line-height: 1.45; color: var(--bbc-text-muted); margin: 0 0 var(--bbc-space-3); }
.bbc-page__updated { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--bbc-font-sans); font-size: var(--bbc-text-sm); color: var(--bbc-text-muted); margin: 0; padding-top: var(--bbc-space-3); border-top: 1px solid var(--bbc-border); }
.bbc-page__updated .bbc-ico { color: var(--bbc-brand-primary); }
.bbc-page__body h2 { font-size: var(--bbc-text-xl); line-height: var(--bbc-lh-xl); }
.bbc-page__body h2::before { content: ""; display: block; width: 2.5rem; height: var(--bbc-line-w); margin-bottom: var(--bbc-space-3); border-radius: 2px; background: var(--bbc-line); }
.bbc-page__body h3 { font-size: var(--bbc-text-lg); }

/* ---- Contact form ------------------------------------------------------ */
.bbc-contact { margin: var(--bbc-space-5) 0 var(--bbc-space-7); }
.bbc-form { display: grid; gap: var(--bbc-space-4); padding: var(--bbc-space-5); background: var(--bbc-surface); border: 1px solid var(--bbc-border); border-radius: var(--bbc-radius-3); font-family: var(--bbc-font-sans); }
.bbc-form p { margin: 0; font-family: var(--bbc-font-sans); font-size: var(--bbc-text-base); }
.bbc-form__row { display: grid; gap: var(--bbc-space-1); }
.bbc-form__row label { font-weight: var(--bbc-weight-semi); font-size: var(--bbc-text-sm); }
.bbc-form__row input, .bbc-form__row select, .bbc-form__row textarea { width: 100%; box-sizing: border-box; }
.bbc-form__row textarea { font-family: var(--bbc-font-sans); font-size: var(--bbc-text-base); line-height: 1.5; border: 1px solid var(--bbc-border-strong); border-radius: var(--bbc-radius-1); padding: var(--bbc-space-2) var(--bbc-space-3); background: var(--bbc-surface); color: var(--bbc-text); }
.bbc-form__hint { font-size: var(--bbc-text-xs); color: var(--bbc-text-muted); }
.bbc-form button { justify-self: start; display: inline-flex; align-items: center; gap: .45rem; }
.bbc-form__small { font-size: var(--bbc-text-xs) !important; color: var(--bbc-text-muted); }
/* The honeypot: invisible to people, present for bots. */
.bbc-form__trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bbc-form__status { padding: var(--bbc-space-3) var(--bbc-space-4); border-radius: var(--bbc-radius-2); font-family: var(--bbc-font-sans); font-size: var(--bbc-text-sm); margin: 0 0 var(--bbc-space-4); }
/* Neutral on purpose: green and amber are reserved for availability, and
   red is banned as a status colour. The words carry the meaning. */
.bbc-form__status { background: var(--bbc-surface-2); color: var(--bbc-text); font-weight: var(--bbc-weight-semi); }
.bbc-form__status--ok { border-left: var(--bbc-line-w) solid var(--bbc-line); }
.bbc-form__status--err { border-left: var(--bbc-line-w) solid var(--bbc-text); }
/* A fact only the owner can supply, left in a draft. Loud on purpose, so a
   page can never be published with one still in it unnoticed. */
.bbc-owner-todo { padding: var(--bbc-space-3) var(--bbc-space-4); border: 2px dashed var(--bbc-text); border-radius: var(--bbc-radius-2); background: var(--bbc-fun-amber-bg); font-family: var(--bbc-font-sans) !important; font-size: var(--bbc-text-sm) !important; }