/*
Theme Name: Broadsheet
Theme URI: https://example.com/broadsheet
Author: Dave Ayres
Author URI: https://example.com
Description: A classic-broadsheet front page built to run on Auto News Feed. The lead story gets a full-width headline and the largest picture; the next three run around it — one flanking on the right at 65% size, headline to the right of the image, two more running the full width beneath — everything after that runs on as a dense multi-column "Further Stories" list, each with its own thumbnail. Mosaic, not grid — and it reflows down to a single column on small screens.
Version: 1.8.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: broadsheet
Tags: news, blog, one-column, custom-logo, custom-menu, featured-images, threaded-comments
*/

/* -------------------------------------------------------------------- */
/*  Design tokens                                                        */
/* -------------------------------------------------------------------- */

:root {
	/* Paper & ink */
	--bs-paper: #f1ecde;
	--bs-paper-shade: #e7e0c9;
	--bs-ink: #1b1815;
	--bs-ink-soft: #4b443b;
	--bs-rule: #c9bfa4;
	--bs-rule-strong: #1b1815;
	--bs-accent: #7a1e1e;
	--bs-accent-ink: #f1ecde;

	/* Overridable independently of --bs-ink by Appearance > Broadsheet
	   (Page Formatting) — default to the same ink tone until customised. */
	--bs-heading-color: var(--bs-ink);
	--bs-body-color: var(--bs-ink);

	/* Type */
	--bs-font-display: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
	--bs-font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--bs-font-meta: 'Barlow Condensed', 'Arial Narrow', sans-serif;

	/* Fluid headline scale — secondary headlines are literally 65% of this */
	--bs-hero-title-size: clamp(2.35rem, 1.1rem + 3.3vw, 4.75rem);
	--bs-secondary-title-size: calc(var(--bs-hero-title-size) * 0.65);

	/* Nameplate size — the masthead logo (if set) is scaled to match this,
	   on both sides, so it always sits flush with the text's own height. */
	--bs-nameplate-size: clamp(2.75rem, 1.6rem + 4vw, 5.5rem);

	/* Image sizing — secondary images are literally 65% of the hero width */
	--bs-hero-img-w: 22rem;
	--bs-secondary-img-w: calc(var(--bs-hero-img-w) * 0.65);

	--bs-gap: 2rem;
	--bs-gap-sm: 1rem;
	--bs-max-width: 1600px;
}

/* -------------------------------------------------------------------- */
/*  Reset & base                                                         */
/* -------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bs-paper);
	color: var(--bs-body-color);
	font-family: var(--bs-font-body);
	font-size: 1.0625rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

.bs-page a:not(.bs-primary-nav__list a):hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3 {
	font-family: var(--bs-font-display);
	font-weight: 700;
	line-height: 1.05;
	margin: 0;
	color: var(--bs-heading-color);
}

p {
	margin: 0 0 0.9em;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.bs-skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	clip: auto;
	background: var(--bs-ink);
	color: var(--bs-paper);
	padding: 0.6rem 1rem;
	z-index: 1000;
}

:focus-visible {
	outline: 2px solid var(--bs-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------- */
/*  Masthead                                                             */
/* -------------------------------------------------------------------- */

.bs-edition-bar {
	background: var(--bs-ink);
	color: var(--bs-paper);
	font-family: var(--bs-font-meta);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bs-edition-bar__inner {
	max-width: var(--bs-max-width);
	margin: 0 auto;
	padding: 0.45rem clamp(1rem, 3vw, 2.5rem);
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.bs-masthead {
	max-width: var(--bs-max-width);
	margin: 0 auto;
	padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2.5rem) 0;
	border-bottom: 4px double var(--bs-rule-strong);
}

.bs-masthead__inner {
	text-align: center;
	padding-bottom: 0.75rem;
}

/* Three-column row: an equal-width flank on each side of the
   nameplate/custom-logo, each centring its own logo (if set) within
   whatever space is left over — so the logo's centre naturally lands
   exactly halfway between the row's edge and the text, on both sides,
   without needing to measure the text itself. Both flanks are always
   present (even empty) so the centre column stays exactly centred
   whether or not a masthead logo is set, matching the original
   text-align:center behaviour. */
.bs-masthead__row {
	display: flex;
	align-items: center;
	justify-content: center;
}

.bs-masthead__flank {
	flex: 1 1 0;
	display: flex;
	justify-content: center;
}

.bs-masthead__flank-logo {
	height: var(--bs-nameplate-size);
	width: var(--bs-nameplate-size);
	object-fit: contain;
}

.bs-nameplate {
	margin: 0;
	font-family: var(--bs-font-display);
	font-weight: 700;
	font-size: var(--bs-nameplate-size);
	letter-spacing: -0.01em;
}

.bs-nameplate a {
	color: var(--bs-heading-color);
}

.bs-masthead__logo img {
	margin: 0 auto;
}

/* Optional sponsor banner (Appearance > Broadsheet) — an intro line and
   an uploaded image, centred under the nameplate. Hidden entirely in
   markup when no image has been chosen. */
.bs-sponsor {
	text-align: center;
	padding: 0.5rem 0 1.25rem;
}

.bs-sponsor__line {
	font-family: var(--bs-font-meta);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bs-ink-soft);
	margin: 0 0 0.5rem;
}

.bs-sponsor__image {
	display: inline-block;
	max-width: 80%;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.bs-primary-nav {
	border-top: 1px solid var(--bs-rule);
}

.bs-primary-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2.25rem);
	padding: 0.65rem 0;
	font-family: var(--bs-font-meta);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.bs-primary-nav__list a:hover,
.bs-primary-nav__list a:focus {
	color: var(--bs-accent);
}

/* -------------------------------------------------------------------- */
/*  Shared story furniture: kicker, byline, images                       */
/* -------------------------------------------------------------------- */

.bs-kicker {
	font-family: var(--bs-font-meta);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bs-accent);
	margin: 0 0 0.35rem;
}

.bs-kicker--hero {
	font-size: 1rem;
}

.bs-byline {
	font-family: var(--bs-font-meta);
	font-size: 0.85rem;
	color: var(--bs-ink-soft);
	letter-spacing: 0.02em;
	display: flex;
	gap: 0.6rem;
	margin: 0.5rem 0 0;
}

.bs-byline__source {
	font-weight: 600;
	text-transform: uppercase;
}

.bs-byline__source::after {
	content: '\2014'; /* em dash */
	margin-left: 0.6rem;
	color: var(--bs-rule);
}

.bs-hero__image img,
.bs-secondary__image img,
.bs-post-list__image img,
.bs-single__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--bs-rule-strong);
}

.bs-image-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: repeating-linear-gradient(
		135deg,
		var(--bs-paper-shade),
		var(--bs-paper-shade) 10px,
		var(--bs-rule) 10px,
		var(--bs-rule) 11px
	);
	border: 1px solid var(--bs-rule-strong);
}

/* -------------------------------------------------------------------- */
/*  The mosaic: hero + three secondary stories                           */
/* -------------------------------------------------------------------- */

.bs-main {
	max-width: var(--bs-max-width);
	margin: 0 auto;
	padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}

.bs-mosaic {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-areas:
		'h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1'
		'a1 a1 a1 a1 a1 a1 a1 a1 a2 a2 a2 a2'
		'a1 a1 a1 a1 a1 a1 a1 a1 a2 a2 a2 a2'
		'a3 a3 a3 a3 a3 a3 a4 a4 a4 a4 a4 a4';
	column-gap: var(--bs-gap);
	row-gap: 0;
}

.bs-hero {
	display: contents;
}

.bs-hero__headline {
	grid-area: h1;
	border-bottom: 1px solid var(--bs-rule-strong);
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
}

.bs-hero__title {
	font-size: var(--bs-hero-title-size);
}

.bs-hero__title a:hover {
	text-decoration-color: var(--bs-accent);
}

.bs-hero__body {
	grid-area: a1;
	border-right: 1px solid var(--bs-rule);
	padding-right: var(--bs-gap);
	padding-bottom: var(--bs-gap);
}

.bs-hero__image {
	float: left;
	width: var(--bs-hero-img-w);
	margin: 0 var(--bs-gap) 0.75rem 0;
	shape-outside: inset(0);
}

.bs-hero__dropcap {
	font-size: 1.15rem;
	line-height: 1.55;
}

.bs-hero__dropcap::first-letter {
	font-family: var(--bs-font-display);
	font-weight: 700;
	font-size: 4.2rem;
	line-height: 0.8;
	float: left;
	padding: 0.05em 0.08em 0 0;
	color: var(--bs-accent);
}

/* a2 flanks the hero as one tall tile matching its height (not a stack of
   three thumbnails in a rail); a3 and a4 then run side by side in a row
   that spans the full width beneath BOTH the hero and a2 — so the
   secondary stories wrap the lead on the right and underneath it,
   rather than sitting only in a column to the right. */
.bs-secondary {
	overflow: hidden; /* keeps the box clearing the float */
	padding-bottom: var(--bs-gap);
}

.bs-secondary--a2 {
	padding-bottom: 0;
}

.bs-secondary--a3,
.bs-secondary--a4 {
	border-top: 1px solid var(--bs-rule-strong);
	padding-top: var(--bs-gap);
	margin-top: var(--bs-gap);
}

.bs-secondary--a3 {
	border-right: 1px solid var(--bs-rule);
	padding-right: var(--bs-gap);
}

.bs-secondary__image {
	float: left;
	width: var(--bs-secondary-img-w);
	margin: 0 var(--bs-gap-sm) 0.5rem 0;
	shape-outside: inset(0);
}

.bs-secondary__title {
	font-size: var(--bs-secondary-title-size);
	line-height: 1.1;
	margin-bottom: 0.4rem;
}

.bs-secondary__summary {
	font-size: 0.95rem;
	color: var(--bs-ink-soft);
}

/* -------------------------------------------------------------------- */
/*  Further Stories — dense multi-column list beneath the mosaic         */
/* -------------------------------------------------------------------- */

.bs-further {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 4px double var(--bs-rule-strong);
}

.bs-further__heading {
	font-size: 1.5rem;
	margin-bottom: 1.25rem;
}

.bs-further__columns {
	column-count: 4;
	column-gap: var(--bs-gap);
	column-rule: 1px solid var(--bs-rule);
}

.bs-brief {
	break-inside: avoid;
	margin-bottom: 1.5rem;
	overflow: hidden; /* contain the floated image so the article's own height wraps it */
}

.bs-brief__image {
	display: block;
	float: left;
	width: 30%;
	margin: 0.15rem 0.75rem 0.5rem 0;
}

.bs-brief__image img,
.bs-brief__image .bs-image-placeholder {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.bs-brief__title {
	font-size: 1.05rem;
	line-height: 1.25;
	margin-bottom: 0.3rem;
}

.bs-brief__source {
	font-family: var(--bs-font-meta);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bs-accent);
	margin: 0 0 0.3rem;
}

.bs-brief__summary {
	font-size: 0.88rem;
	color: var(--bs-ink-soft);
	margin: 0;
}

/* -------------------------------------------------------------------- */
/*  Notices / empty states                                               */
/* -------------------------------------------------------------------- */

.bs-notice {
	max-width: 40rem;
	margin: 3rem auto;
	padding: 2rem;
	text-align: center;
	border: 1px solid var(--bs-rule);
	font-size: 1.1rem;
	color: var(--bs-ink-soft);
}

/* -------------------------------------------------------------------- */
/*  Standard post list / single / page (blog fallback templates)         */
/* -------------------------------------------------------------------- */

.bs-main--narrow {
	max-width: 46rem;
}

.bs-post-list__item {
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--bs-rule);
}

.bs-post-list__image {
	display: block;
	margin-bottom: 0.75rem;
}

.bs-post-list__title {
	font-size: 1.9rem;
	margin-bottom: 0.3rem;
}

.bs-post-list__excerpt {
	margin-top: 0.6rem;
}

.bs-pagination {
	margin-top: 2rem;
	font-family: var(--bs-font-meta);
	text-align: center;
}

.bs-single__title {
	font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem);
	margin-bottom: 0.5rem;
}

.bs-single__image {
	margin: 1.5rem 0;
}

.bs-single__content {
	margin-top: 1.5rem;
	font-size: 1.1rem;
}

.bs-single__content p {
	margin-bottom: 1.1em;
}

.bs-comments {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--bs-rule);
}

/* -------------------------------------------------------------------- */
/*  Footer                                                               */
/* -------------------------------------------------------------------- */

.bs-footer {
	background: var(--bs-ink);
	color: var(--bs-paper);
	margin-top: clamp(2rem, 5vw, 4rem);
}

.bs-footer__inner {
	max-width: var(--bs-max-width);
	margin: 0 auto;
	padding: 2rem clamp(1rem, 3vw, 2.5rem);
	text-align: center;
	font-family: var(--bs-font-meta);
}

.bs-footer__masthead {
	font-family: var(--bs-font-display);
	font-size: 1.5rem;
	margin-bottom: 0.4rem;
}

.bs-footer__colophon {
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	color: var(--bs-paper-shade);
	margin: 0;
}

/* -------------------------------------------------------------------- */
/*  Responsive: reflow the mosaic down through tablet to mobile          */
/* -------------------------------------------------------------------- */

/* Tablet: hero stays full-width on top; the three secondaries drop from
   a right-hand stack into a 3-across row beneath it — still a mosaic
   (unequal image sizes vs. the hero), just not a sidebar any more. */
@media (max-width: 1023px) {
	.bs-mosaic {
		grid-template-columns: repeat(6, 1fr);
		grid-template-areas:
			'h1 h1 h1 h1 h1 h1'
			'a1 a1 a1 a1 a1 a1'
			'a2 a2 a3 a3 a4 a4';
		row-gap: var(--bs-gap);
	}

	.bs-hero__body {
		border-right: none;
		padding-right: 0;
	}

	.bs-secondary--a2,
	.bs-secondary--a3,
	.bs-secondary--a4 {
		border: none;
		padding: 0;
		margin: 0;
	}

	:root {
		--bs-hero-img-w: 16rem;
	}
}

/* Mobile: drop the floats entirely — image sits above its own headline
   and text, full-bleed, everything stacks in reading order. */
@media (max-width: 640px) {
	.bs-mosaic {
		grid-template-columns: 1fr;
		grid-template-areas:
			'h1'
			'a1'
			'a2'
			'a3'
			'a4';
	}

	.bs-hero__image,
	.bs-secondary__image {
		float: none;
		width: 100%;
		margin: 0 0 1rem;
	}

	.bs-hero__dropcap::first-letter {
		font-size: 3rem;
	}

	.bs-further__columns {
		column-count: 1;
	}

	/* Keep the nameplate uncluttered on phones rather than squeezing two
	   more logos in beside it at an already-small size. */
	.bs-masthead__flank {
		display: none;
	}

	.bs-edition-bar__inner {
		flex-direction: column;
		gap: 0.15rem;
		text-align: center;
	}
}

@media (max-width: 860px) and (min-width: 641px) {
	.bs-further__columns {
		column-count: 2;
	}
}