/*
 * The Benson Bulletin theme (docs/plans/theme.md).
 *
 * The Bulletin's look (white pages, charcoal text, slate blue, Playfair Display headings, square corners), made
 * readable: 18 px body text in the reader's own serif fonts, lines of about 70 characters, page titles shown,
 * visible focus, 44 px targets. Dark mode follows the reader's setting. No framework, no build step.
 *
 * Contrast (WCAG 2.2 AA, 4.5:1 for text): #222 on #fff 15.9:1; #335d70 on #fff 7.1:1; #fff on #335d70 7.1:1;
 * dark mode #e8ecee on #121619 15.3:1, #9cc3d5 on #121619 9.6:1, #555b5e on #fff 6.9:1.
 */

@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( fonts/playfair-display-latin-400-normal.woff2 ) format( "woff2" );
}

@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url( fonts/playfair-display-latin-700-normal.woff2 ) format( "woff2" );
}

:root {
	--bt-bg: #fff;
	--bt-text: #222;
	--bt-muted: #555b5e;
	--bt-brand: #6393a8;          /* the site's slate blue: decoration only */
	--bt-accent: #335d70;         /* links and buttons */
	--bt-accent-hover: #2c5263;
	--bt-on-accent: #fff;
	--bt-surface: #f2f6f8;
	--bt-border: #c9d6dc;
	--bt-control: #6f8c99;        /* control edges: 3:1 against the page */
	--bt-focus: #ffdd00;
	--bt-focus-edge: #0b0c0c;
	--bt-body: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
	--bt-heading: "Playfair Display", Georgia, serif;
	--bt-measure: 42rem;          /* about 70 characters of body text */
	--bt-wide: 72rem;
	--bt-gutter: 1rem;
	color-scheme: light dark;
}

@media ( prefers-color-scheme: dark ) {
	:root {
		--bt-bg: #121619;
		--bt-text: #e8ecee;
		--bt-muted: #b5c0c5;
		--bt-accent: #9cc3d5;
		--bt-accent-hover: #c2dbe6;
		--bt-on-accent: #0b1114;
		--bt-surface: #1c2328;
		--bt-border: #34424a;
		--bt-control: #7d97a3;
	}
}

/* Base */

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

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

body {
	margin: 0;
	color: var( --bt-text );
	background: var( --bt-bg );
	font-family: var( --bt-body );
	font-size: 1.125rem;
	line-height: 1.6;
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 1.75em 0 0.5em;
	font-family: var( --bt-heading );
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
}

h1 {
	margin-top: 0;
	font-size: clamp( 2rem, 1.5rem + 2vw, 2.75rem );
}

h2 {
	font-size: clamp( 1.5rem, 1.25rem + 1vw, 2rem );
}

h3 {
	font-size: 1.375rem;
}

h4,
h5,
h6 {
	font-size: 1.125rem;
}

p,
ul,
ol,
dl,
blockquote,
figure,
table,
pre {
	margin: 0 0 1.25em;
}

a {
	color: var( --bt-accent );
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var( --bt-accent-hover );
	text-decoration-thickness: 2px;
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

blockquote {
	padding: 0 0 0 1.25rem;
	border-left: 4px solid var( --bt-brand );
	font-style: italic;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 0.5rem;
	text-align: left;
	border: 1px solid var( --bt-border );
}

hr {
	height: 0;
	margin: 2rem 0;
	border: 0;
	border-top: 1px solid var( --bt-border );
}

/* Focus: a yellow and black ring that shows on any background. */
:focus-visible {
	outline: 3px solid transparent;
	box-shadow: 0 0 0 3px var( --bt-focus ), 0 0 0 6px var( --bt-focus-edge );
}

.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect( 0 0 0 0 ) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.wrap {
	width: 100%;
	max-width: var( --bt-wide );
	margin: 0 auto;
	padding: 0 var( --bt-gutter );
}

/* Buttons and fields */

.button,
button,
input[type="submit"],
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.5rem 1.25rem;
	color: var( --bt-on-accent );
	background: var( --bt-accent );
	border: 2px solid var( --bt-accent );
	border-radius: 2px;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	color: var( --bt-on-accent );
	background: var( --bt-accent-hover );
	border-color: var( --bt-accent-hover );
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea,
select {
	min-height: 44px;
	padding: 0.5rem;
	color: var( --bt-text );
	background: var( --bt-bg );
	border: 2px solid var( --bt-control );
	border-radius: 2px;
	font: inherit;
}

/* The skip link: off screen until focused. */
.skip-link {
	position: absolute;
	top: -10rem;
	left: var( --bt-gutter );
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1rem;
	color: var( --bt-focus-edge );
	background: var( --bt-focus );
	font-weight: 700;
}

.skip-link:focus {
	top: 0.5rem;
}

/* Header */

.site-header {
	border-top: 6px solid var( --bt-brand );
	border-bottom: 1px solid var( --bt-border );
}

.top-bar {
	font-size: 0.9375rem;
	background: var( --bt-surface );
}

.top-bar ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.top-bar a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.site-header__main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.site-branding img {
	display: block;
	width: auto;
	max-height: 7.5rem;
}

.site-title {
	font-family: var( --bt-heading );
	font-size: 1.75rem;
	font-weight: 700;
	color: var( --bt-text );
	text-decoration: none;
}

/* Main menu: wide screens */

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

.main-nav a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.25rem 0.75rem;
	color: var( --bt-text );
	text-decoration: none;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
	color: var( --bt-accent );
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.submenu-toggle,
.menu-toggle {
	min-width: 44px;
	padding: 0.5rem;
	color: var( --bt-text );
	background: transparent;
	border: 0;
}

.submenu-toggle::after {
	content: "";
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	margin: 0 auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY( -0.15rem ) rotate( 45deg );
}

.submenu-toggle[aria-expanded="true"]::after {
	transform: translateY( 0.15rem ) rotate( -135deg );
}

.submenu-toggle:hover,
.menu-toggle:hover {
	color: var( --bt-accent );
	background: var( --bt-surface );
	border: 0;
}

.menu-toggle {
	display: none;
}

@media ( min-width: 56.0625rem ) {
	.main-nav > ul {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
	}

	.main-nav li {
		position: relative;
		display: flex;
		align-items: center;
	}

	.main-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 100;
		display: none;
		min-width: 16rem;
		padding: 0.5rem 0;
		background: var( --bt-bg );
		border: 1px solid var( --bt-border );
		border-top: 3px solid var( --bt-brand );
		box-shadow: 0 0.5rem 1rem rgba( 0, 0, 0, 0.15 );
	}

	.main-nav .sub-menu li {
		display: block;
	}

	/* Open under the mouse; without scripts, also while the keyboard is inside. */
	.main-nav li:hover > .sub-menu,
	html:not( .js ) .main-nav li:focus-within > .sub-menu,
	.main-nav .submenu-toggle[aria-expanded="true"] + .sub-menu {
		display: block;
	}
}

/* Main menu: phones */

@media ( max-width: 56rem ) {
	.main-nav {
		width: 100%;
	}

	.main-nav .sub-menu {
		padding-left: 1.25rem;
	}

	.main-nav li {
		border-top: 1px solid var( --bt-border );
	}

	.main-nav .sub-menu li {
		border: 0;
	}

	/* With scripts: folded behind the Menu button, submenus behind theirs. */
	.js .menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 1rem;
		border: 2px solid var( --bt-control );
		font-weight: 700;
	}

	.js .main-nav > ul,
	.js .main-nav .sub-menu {
		display: none;
	}

	.js .menu-toggle[aria-expanded="true"] + ul,
	.js .main-nav .submenu-toggle[aria-expanded="true"] + .sub-menu {
		display: block;
	}

	.js .main-nav li {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.js .main-nav li > a {
		flex: 1;
	}

	.js .main-nav li > .sub-menu {
		flex-basis: 100%;
	}
}

/* Content */

.site-main {
	padding-top: 2rem;
	padding-bottom: 3rem;
}

.entry-header,
.entry-content > *,
.entry-footer,
.page-header,
.comments-area,
.post-navigation,
.navigation.pagination {
	max-width: var( --bt-measure );
	margin-left: auto;
	margin-right: auto;
}

.entry-content > .alignwide {
	max-width: var( --bt-wide );
}

.entry-content > .alignfull {
	max-width: none;
}

/* Pages laid out in Elementor or WPBakery, and the plugin's archive and month, use the full width. */
.entry-content > .elementor,
.entry-content > .wpb-content-wrapper,
.entry-content > .vc_row,
.entry-content > .bmi-archive,
.entry-content > .bmi-month {
	max-width: var( --bt-wide );
}

.entry-meta {
	color: var( --bt-muted );
	font-size: 1rem;
}

.post-thumbnail img {
	display: block;
	margin: 0 auto 1.5rem;
}

.wp-caption-text,
figcaption {
	color: var( --bt-muted );
	font-size: 1rem;
}

.post-list {
	max-width: var( --bt-measure );
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.post-list > li {
	padding: 1.5rem 0;
	border-bottom: 1px solid var( --bt-border );
}

.post-list h2 {
	margin-top: 0;
	font-size: 1.5rem;
}

.navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
}

.navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.search-form label {
	flex: 1 1 14rem;
}

.search-form .search-field {
	width: 100%;
}

/* The home page */

.home-sections {
	display: grid;
	gap: 2rem 3rem;
	max-width: var( --bt-wide );
	margin: 0 auto 2rem;
}

@media ( min-width: 56.0625rem ) {
	.home-sections--two {
		grid-template-columns: minmax( 0, 3fr ) minmax( 0, 2fr );
	}
}

.latest-issue h2 {
	margin-top: 0;
}

.latest-issue__body {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-start;
}

.latest-issue__cover {
	flex: 0 0 12rem;
}

.latest-issue__cover img {
	display: block;
	box-shadow: 0 0.25rem 0.75rem rgba( 0, 0, 0, 0.2 );
}

.latest-issue__text {
	flex: 1 1 16rem;
}

.latest-issue__text h3 {
	margin-top: 0;
	font-size: 1.75rem;
}

/*
 * The plugin's player, lists and archive keep their own light surface in dark mode, framed. The light colours are
 * set again inside, so links the plugin leaves to the theme stay readable on white (axe-core found the flipbook's
 * PDF link at 1.87:1, 2026-11-03).
 */
@media ( prefers-color-scheme: dark ) {
	.bmi-player,
	.bmi-archive,
	.bmi-events,
	.bmi-month,
	.bmi-event,
	.bmi-flipbook {
		--bt-bg: #fff;
		--bt-text: #222;
		--bt-muted: #555b5e;
		--bt-accent: #335d70;
		--bt-accent-hover: #2c5263;
		--bt-on-accent: #fff;
		--bt-surface: #f2f6f8;
		--bt-border: #c9d6dc;
		--bt-control: #6f8c99;
		color-scheme: light;
		padding: 1rem;
		background: #fff;
		color: #222;
	}
}

/* Footer */

.site-footer {
	padding: 2rem 0;
	color: var( --bt-muted );
	background: var( --bt-surface );
	border-top: 6px solid var( --bt-brand );
	font-size: 1rem;
}

.site-footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.site-footer a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.site-info {
	margin: 0;
}

/* Comments */

.comment-list {
	padding: 0;
	list-style: none;
}

.comment-list .children {
	padding-left: 1.5rem;
	list-style: none;
}

.comment-body {
	padding: 1rem 0;
	border-bottom: 1px solid var( --bt-border );
}

/* Less movement, high contrast, print */

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

@media ( forced-colors: active ) {
	:focus-visible {
		outline: 3px solid Highlight;
	}

	.button,
	button {
		border: 2px solid ButtonText;
	}
}

@media print {
	body {
		color: #000;
		background: #fff;
		font-size: 11pt;
	}

	.skip-link,
	.top-bar,
	.main-nav,
	.site-footer,
	.comments-area,
	.post-navigation,
	.navigation,
	.bmi-listen {
		display: none !important;
	}

	a {
		color: #000;
	}

	.entry-content a[href^="http"]::after {
		content: " (" attr( href ) ")";
		font-size: 0.875em;
	}
}