/* -----------------------------------------------------------------------------
 * Boson Group — layout and composition.
 *
 * Implements the design system's §4 colour usage ratio, §5 typographic
 * principles, §6 grid and spacing, and §7 graphic language. Every value comes
 * from tokens.css; there is not a literal in this file.
 *
 * The system's own restraint is the brief: "Stable layouts, confident language,
 * no hype" (Permanence) and "Proof-led messaging, exact claims, restrained
 * design" (Trust). The job is composure, not decoration.
 * -------------------------------------------------------------------------- */

/* --- Page shell ----------------------------------------------------------
 * GeneratePress caps .site-content at 1200px and paints .inside-article white,
 * which produced a white card floating on grey and made full-bleed section
 * bands impossible. Released here so each section spans the viewport and
 * controls its own inner measure.
 * ------------------------------------------------------------------------ */

.page #page.grid-container,
.page .site-content,
.page .site-content > .content-area,
.page .site-main,
.page .inside-article,
.page .entry-content {
	background: none;
	border: 0;
	box-shadow: none;
	margin: 0;
	max-width: none;
	padding: 0;
	width: 100%;
}

.entry-content > * {
	margin-block: 0;
}

/* One text column, shared by headings and body so both align to the same left
 * edge. Set in rem, not ch: a ch measure resolves against the element's own
 * font size, so 68ch on an h1 computed to 2140px and the heading ran the full
 * width of the page. */
:root {
	--bsn-container-text: 44rem;
}

/* --- Sections ------------------------------------------------------------ */

.bsn-section {
	padding-block: var( --bsn-space-8 );
	padding-inline: var( --bsn-margin-mobile );
}

@media ( min-width: 768px ) {

	.bsn-section {
		padding-block: var( --bsn-space-9 );
	}
}

@media ( min-width: 768px ) {

	.bsn-section {
		padding-inline: var( --bsn-gutter-desktop );
	}
}

.bsn-section > * {
	margin-inline: auto;
	max-width: var( --bsn-container-text );
}

/* Alternating surfaces carry the §4 ratio: light dominates, midnight anchors,
 * accent appears sparingly. */
.bsn-section--plain {
	background: var( --bsn-color-surface );
}

.bsn-section--band {
	background: var( --bsn-color-surface-light );
}

/* --- The lead ------------------------------------------------------------
 * Midnight ground, which the system reserves for 15–25% of a composition. On a
 * page this length that is roughly the first screen — which is also where a
 * sceptical reader decides whether to continue.
 * ------------------------------------------------------------------------ */

.bsn-section--lead {
	background: var( --bsn-color-midnight );
	color: var( --bsn-color-white );
	padding-block: 0 var( --bsn-space-8 );
	position: relative;
}

/* The Boson Spectrum, used as the system permits: a single large accent edge,
 * never behind text, never on a small element. One beam per composition. */
.bsn-section--lead::after {
	background: var( --bsn-gradient-spectrum );
	bottom: 0;
	content: '';
	display: block;
	height: var( --bsn-space-1 );
	left: 0;
	position: absolute;
	width: 100%;
}

.bsn-section--lead p {
	color: var( --bsn-color-white );
	font-size: var( --bsn-font-size-body-large );
}

.bsn-section--lead a {
	color: var( --bsn-color-white );
	text-decoration-thickness: var( --bsn-border-width );
	text-underline-offset: 0.2em;
}

/* --- Type ---------------------------------------------------------------- */

.entry-title,
.bsn-section--lead .entry-title {
	font-size: var( --bsn-font-size-h1 );
	line-height: var( --bsn-line-height-h1 );
	margin-block-end: 0;
	text-wrap: balance;
}

.page .entry-header {
	background: var( --bsn-color-midnight );
	margin: 0;
	padding-block: var( --bsn-space-8 ) var( --bsn-space-5 );
	padding-inline: var( --bsn-margin-mobile );
}

@media ( min-width: 768px ) {

	.page .entry-header {
		padding-inline: var( --bsn-gutter-desktop );
	}
}

.page .entry-header .entry-title {
	color: var( --bsn-color-white );
	margin-inline: auto;
	max-width: var( --bsn-container-text );
}

.bsn-section h2 {
	font-size: var( --bsn-font-size-h2 );
	line-height: var( --bsn-line-height-h2 );
	margin-block-end: var( --bsn-space-5 );
}

/* Body copy at 18px rather than 16. The system permits 18-20px for body-large,
 * and against an h2 of up to 40px, 16px read as fine print. */
.bsn-section p,
.bsn-section li {
	font-size: var( --bsn-font-size-body-large );
}

.bsn-section h3 {
	font-size: var( --bsn-font-size-h3 );
	line-height: var( --bsn-line-height-h3 );
	margin-block: var( --bsn-space-6 ) var( --bsn-space-3 );
}

.bsn-section p {
	margin-block-end: var( --bsn-space-4 );
}

.bsn-section p:last-child {
	margin-block-end: 0;
}

/* --- Link cues -----------------------------------------------------------
 * Body copy points at other pages constantly. These were rendering as italic
 * text that looked like a link and did nothing.
 * ------------------------------------------------------------------------ */

.bsn-cue {
	font-size: var( --bsn-font-size-small );
	margin-block-start: var( --bsn-space-5 );
}

/* Boson Blue measures 4.20:1 on Boson Mist and fails AA at 14px, while passing
 * at only 4.56:1 on white. Indigo clears both grounds — 6.89:1 on white, 6.35:1
 * on Mist — so text links use Indigo and Blue is kept for non-text roles. The
 * design system's §4 accessibility rule asked for exactly this test. */
.bsn-cue a {
	border-block-end: var( --bsn-border-width ) solid currentColor;
	color: var( --bsn-color-indigo );
	display: inline-block;
	font-weight: 500;
	min-height: var( --bsn-target-min );
	text-decoration: none;
}

.bsn-cue a::before {
	content: '→ ';
}

.bsn-cue a:hover {
	color: var( --bsn-color-purple );
}

/* Cyan on Midnight is 4.34:1 and also fails. On the dark ground, links are white
 * with a rule under them — 13.72:1, and the underline carries the affordance
 * without relying on colour at all. Cyan keeps its system role of momentum and
 * gradient end, which is not a text role. */
.bsn-section--lead .bsn-cue a {
	color: var( --bsn-color-white );
}

/* --- Call to action ------------------------------------------------------ */

.bsn-cta {
	margin-block-start: var( --bsn-space-6 );
}

.bsn-cta .wp-block-button__link.wp-element-button,
.bsn-cta .wp-block-button__link {
	background: var( --bsn-color-purple );
	border-radius: var( --bsn-radius-control );
	color: var( --bsn-color-white );
	font-size: var( --bsn-font-size-body );
	font-weight: 500;
	line-height: var( --bsn-line-height-label );
	min-height: 48px;
	padding: var( --bsn-space-4 ) var( --bsn-space-6 );
	text-decoration: none;
}

.bsn-cta .wp-block-button__link.wp-element-button:hover,
.bsn-cta .wp-block-button__link:hover {
	background: var( --bsn-color-indigo );
}

/* White on Purple is 8.94:1 and works on either ground, so the CTA is the same
 * button everywhere rather than a cyan variant that failed at 4.34:1. */
.bsn-section--lead .bsn-cta .wp-block-button__link.wp-element-button,
.bsn-section--lead .bsn-cta .wp-block-button__link {
	background: var( --bsn-color-purple );
	color: var( --bsn-color-white );
}

/* --- Header --------------------------------------------------------------- */

.site-header {
	background: var( --bsn-color-white );
	border-block-end: var( --bsn-border-width ) solid var( --bsn-color-border );
}

.main-navigation .main-nav ul li a {
	font-size: var( --bsn-font-size-label );
	font-weight: 500;
}

/* The enquiry CTA is the last nav item and is treated as a button, so the one
 * action the site exists to prompt does not look like a fourth link. */
.main-navigation .main-nav ul li:last-child a {
	background: var( --bsn-color-midnight );
	border-radius: var( --bsn-radius-control );
	color: var( --bsn-color-white );
	margin-inline-start: var( --bsn-space-3 );
	padding-inline: var( --bsn-space-4 );
}

.main-navigation .main-nav ul li:last-child a:hover {
	background: var( --bsn-color-purple );
}

/* Nav rule N-7: the branch state leaves four items including the CTA, so they
 * all show and the mobile menu control is dropped entirely. GeneratePress
 * collapses to a hamburger by default; this overrides that. The measured
 * penalty for hidden navigation — 15% slower, rated 21% harder — is worse than
 * a wrapped row of four short links. */
@media ( max-width: 768px ) {

	.main-navigation .menu-toggle,
	.mobile-menu-control-wrapper {
		display: none;
	}

	/* GeneratePress hides the list at (0,4,1). The previous rule here was (0,2,1)
	 * and lost the cascade by two class selectors, so N-7 removed the hamburger
	 * and never delivered the replacement: no navigation at all, on every page,
	 * below 769px. The enquiry CTA was unreachable on a phone. Selector matched
	 * to the parent's, verified in-browser. */
	.main-navigation:not( .slideout-navigation ):not( .toggled ) .main-nav > ul {
		display: flex;
		flex-wrap: wrap;
		gap: var( --bsn-space-2 );
		justify-content: center;
		padding-block: var( --bsn-space-3 );
	}

	.main-navigation .main-nav ul li a {
		padding-inline: var( --bsn-space-3 );
	}
}

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

.site-footer {
	background: var( --bsn-color-midnight );
}

.site-footer,
.site-footer a {
	color: var( --bsn-color-white );
}

.site-info {
	font-size: var( --bsn-font-size-small );
	padding-block: var( --bsn-space-6 );
}