/**
 * Layout: containers, grid, header, footer, hero, page furniture.
 */

/* ------------------------------------------------------------ containers */

.bsl-container {
	width: 100%;
	max-width: var(--bsl-container);
	margin-inline: auto;
	padding-inline: var(--bsl-gutter);
}

.bsl-container--wide {
	max-width: var(--bsl-container-wide);
}

.bsl-container--narrow {
	max-width: 48rem;
}

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

.bsl-section + .bsl-section {
	padding-top: 0;
}

.bsl-section--sunken {
	background-color: var(--bsl-bg-sunken);
}

.bsl-section--sunken + .bsl-section {
	padding-top: var(--bsl-space-section);
}

/* Reading column for long-form content. */
.bsl-prose {
	max-width: var(--bsl-measure);
}

.bsl-prose > * + * {
	margin-top: var(--bsl-space-5);
}

.bsl-prose h2 {
	margin-top: var(--bsl-space-8);
}

.bsl-prose h3 {
	margin-top: var(--bsl-space-6);
}

.bsl-prose > :first-child {
	margin-top: 0;
}

/* Gutenberg alignment inside a constrained column. */
.bsl-prose .alignwide {
	/* Was `margin-inline: calc(50% - 50vw)`. 50vw counts the scrollbar, so on any
	   page tall enough to scroll the block was pulled further left than the
	   viewport and its left edge fell off the screen — which is exactly what
	   happened to the impact figures. Centre it inside the wide container
	   instead: slightly less dramatic, and it cannot overflow. */
	max-width: var(--bsl-container-wide);
	width: 100%;
	margin-inline: auto;
	padding-inline: 0;
}

.alignfull {
	max-width: none;
	margin-inline: calc(50% - 50vw);
	width: 100vw;
}

.alignwide {
	max-width: var(--bsl-container-wide);
}

/* ------------------------------------------------------------------ grid */

.bsl-grid {
	display: grid;
	gap: var(--bsl-space-6);
}

.bsl-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.bsl-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.bsl-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

/* Content + sidebar, collapsing to one column on small screens. */
.bsl-split {
	display: grid;
	gap: var(--bsl-space-8);
	grid-template-columns: 1fr;
}

@media (min-width: 60em) {
	.bsl-split {
		grid-template-columns: minmax(0, 1fr) 20rem;
		align-items: start;
	}

	.bsl-split__aside {
		position: sticky;
		top: 6rem;
	}
}

/* ---------------------------------------------------------- site header */

.bsl-site-header {
	position: sticky;
	top: 0;
	z-index: var(--bsl-z-header);
	background-color: var(--bsl-bg);
	border-bottom: var(--bsl-rule);
	/* Discreet: only a hairline and a slight shadow once scrolled. */
	transition: box-shadow var(--bsl-duration) var(--bsl-ease);
}

.bsl-site-header[data-scrolled="true"] {
	box-shadow: var(--bsl-shadow-sm);
}

.bsl-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bsl-space-4);
	min-height: 4.25rem;
	padding-block: var(--bsl-space-3);
	/* The header carries eight menu items plus a call to action and the language
	 * switcher, so it uses the wide container rather than the reading one. */
	max-width: var(--bsl-container-wide);
}

.bsl-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--bsl-space-3);
	/* Shrinkable: at 320px the site name has to give way to the menu button,
	 * not the other way round. */
	min-width: 0;
	flex-shrink: 1;
	text-decoration: none;
	color: var(--bsl-text);
}

.bsl-brand img,
.bsl-brand svg {
	max-height: 2.25rem;
	width: auto;
}

.bsl-brand__text {
	font-family: var(--bsl-font-display);
	font-size: var(--bsl-text-md);
	font-weight: var(--bsl-weight-bold);
	letter-spacing: var(--bsl-tracking-tight);
}

.bsl-header__actions {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--bsl-space-3);
	min-width: 0;
}

.bsl-lang-wrap {
	flex-shrink: 0;
}

/* ------------------------------------------------------- primary nav */

.bsl-nav {
	display: none;
}

.bsl-nav__list {
	display: flex;
	align-items: center;
	gap: var(--bsl-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bsl-nav__list li {
	margin: 0;
	position: relative;
}

.bsl-nav__list a {
	display: block;
	padding: var(--bsl-space-2) calc(var(--bsl-space-2) + 2px);
	color: var(--bsl-text);
	font-size: var(--bsl-text-sm);
	font-weight: var(--bsl-weight-medium);
	text-decoration: none;
	border-radius: var(--bsl-radius);
}

.bsl-nav__list a:hover {
	background-color: var(--bsl-bg-sunken);
	color: var(--bsl-text);
}

/* Active state uses an underline as well as colour. */
.bsl-nav__list .current-menu-item > a,
.bsl-nav__list .current-menu-ancestor > a,
.bsl-nav__list .current-menu-parent > a,
.bsl-nav__list [aria-current="page"] {
	color: var(--bsl-accent-text);
	box-shadow: inset 0 -3px 0 0 var(--bsl-accent);
}

/* The highlighted "Partner with us" item. */
.bsl-nav__list .bsl-menu-cta > a {
	background-color: var(--bsl-accent-text);
	color: #fff;
	padding-inline: var(--bsl-space-4);
}

.bsl-nav__list .bsl-menu-cta > a:hover {
	background-color: var(--bsl-accent-strong);
	color: #fff;
}

/* Submenus: keyboard reachable, shown on hover and on focus-within. */
.bsl-nav__sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--bsl-z-menu);
	min-width: 15rem;
	margin: 0;
	padding: var(--bsl-space-2);
	list-style: none;
	background-color: var(--bsl-bg-raised);
	border: var(--bsl-rule);
	border-radius: var(--bsl-radius);
	box-shadow: var(--bsl-shadow);
	display: none;
}

.bsl-nav__list li:hover > .bsl-nav__sub,
.bsl-nav__list li:focus-within > .bsl-nav__sub,
.bsl-nav__sub[data-open="true"] {
	display: block;
}

.bsl-nav__sub a {
	padding: var(--bsl-space-2) var(--bsl-space-3);
	font-weight: var(--bsl-weight-regular);
}

.bsl-nav__toggle-sub {
	display: none;
}

/* ------------------------------------------------- mobile menu */

/* At 320px the brand, the language switcher and a "Menu" label do not fit on
 * one row. Below 26em the word is hidden and only the icon remains; the button
 * keeps its accessible name from the same span, so nothing is lost for screen
 * reader or keyboard users. */
@media (max-width: 26em) {
	.bsl-menu-toggle [data-bsl-menu-label] {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.bsl-site-header__inner {
		gap: var(--bsl-space-2);
	}

	.bsl-header__actions {
		gap: var(--bsl-space-2);
	}

	.bsl-brand__text {
		font-size: var(--bsl-text-base);
	}

	/* The two language codes do not need 36px of width each at this size. */
	.bsl-lang a,
	.bsl-lang span {
		min-width: 1.75rem;
		padding-inline: var(--bsl-space-1);
		font-size: var(--bsl-text-xs);
	}

	.bsl-menu-toggle {
		padding-inline: var(--bsl-space-2);
	}

	/* The menu button must never be clipped, so the BRAND yields instead: it
	 * truncates with an ellipsis while the button keeps its full width. Clipping
	 * the header was tried first and left half the button unreachable. */
	.bsl-brand {
		min-width: 0;
		overflow: hidden;
	}

	.bsl-brand__text {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.bsl-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	gap: var(--bsl-space-2);
	min-width: 2.75rem;
	padding: var(--bsl-space-2) var(--bsl-space-3);
	background-color: transparent;
	border: var(--bsl-border-width) solid var(--bsl-line);
	border-radius: var(--bsl-radius);
	font-size: var(--bsl-text-sm);
	font-weight: var(--bsl-weight-medium);
}

.bsl-menu-toggle__bars {
	display: block;
	width: 1.15rem;
	height: 2px;
	position: relative;
	background-color: currentColor;
}

.bsl-menu-toggle__bars::before,
.bsl-menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
}

.bsl-menu-toggle__bars::before {
	top: -5px;
}

.bsl-menu-toggle__bars::after {
	top: 5px;
}

.bsl-mobile-nav {
	display: none;
	border-top: var(--bsl-rule);
	background-color: var(--bsl-bg);
	max-height: calc(100vh - 4.25rem);
	max-height: calc(100dvh - 4.25rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.bsl-mobile-nav[data-open="true"] {
	display: block;
}

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

.bsl-mobile-nav li {
	margin: 0;
	border-bottom: var(--bsl-rule);
}

.bsl-mobile-nav a {
	display: block;
	padding: var(--bsl-space-4) 0;
	color: var(--bsl-text);
	font-weight: var(--bsl-weight-medium);
	text-decoration: none;
}

.bsl-mobile-nav .bsl-nav__sub {
	position: static;
	display: block;
	min-width: 0;
	margin: 0 0 var(--bsl-space-3) var(--bsl-space-4);
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}

.bsl-mobile-nav .bsl-nav__sub li:last-child {
	border-bottom: 0;
}

.bsl-mobile-nav .bsl-nav__sub a {
	padding-block: var(--bsl-space-3);
	font-weight: var(--bsl-weight-regular);
}

/* ---------------------------------------------------------------- *
 * Desktop / mobile switch.
 *
 * Declared once, after both the desktop nav and the toggle exist, so
 * source order alone decides which is visible — no !important, and no
 * risk of both showing at the same time.
 *
 * 88em (1408px) rather than 62em: the primary menu carries eight items
 * plus a highlighted call to action and the language switcher. Measured,
 * the Spanish menu alone is ~960px wide, so anything narrower either
 * overlaps the language switcher or shrinks the labels past comfort.
 * Below this width the accessible menu panel is used instead.
 * ---------------------------------------------------------------- */

@media (min-width: 88em) {
	.bsl-nav {
		display: block;
		min-width: 0;
	}

	/* Between 78em and 92em the menu is tight; trade a little size for fit
	 * rather than letting an item fall off the right edge. */
	.bsl-nav__list a {
		font-size: var(--bsl-text-xs);
	}

	.bsl-menu-toggle {
		display: none;
	}

	.bsl-mobile-nav {
		display: none;
	}
}

@media (min-width: 100em) {
	.bsl-nav__list a {
		font-size: var(--bsl-text-sm);
	}

	.bsl-nav__list {
		gap: var(--bsl-space-2);
	}
}

/* -------------------------------------------------- language switcher */

.bsl-lang {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: var(--bsl-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--bsl-text-sm);
}

.bsl-lang li {
	margin: 0;
}

.bsl-lang a,
.bsl-lang span {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--bsl-space-1) var(--bsl-space-2);
	min-width: 2.25rem;
	min-height: 24px;
	text-align: center;
	text-decoration: none;
	color: var(--bsl-text-muted);
	border-radius: var(--bsl-radius-sm);
	text-transform: uppercase;
	font-weight: var(--bsl-weight-semibold);
	letter-spacing: 0.03em;
}

.bsl-lang a:hover {
	color: var(--bsl-text);
	background-color: var(--bsl-bg-sunken);
}

.bsl-lang [aria-current="true"] {
	color: var(--bsl-text);
	background-color: var(--bsl-bg-sunken);
}

/* A language with no translation available is shown, but disabled and
 * explained — never a link to a page that does not exist. */
.bsl-lang__unavailable {
	color: var(--bsl-text-muted);
	opacity: 0.55;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* -------------------------------------------------------------- hero */

.bsl-hero {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	border-bottom: var(--bsl-rule);
}

.bsl-hero__inner {
	display: grid;
	gap: var(--bsl-space-7);
	align-items: center;
}

@media (min-width: 56em) {
	.bsl-hero__inner--with-media {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	}
}

/* Every direct child of the hero shares one measure, in rem.
 *
 * Gutenberg's constrained layout gives each child max-width in `ch`, which is
 * font-relative — so the display-size h1 came out far wider than the body-size
 * paragraph below it and the block read as misaligned. */
.wp-block-group.bsl-hero {
	max-width: none;
	margin-inline: 0;
}

/* !important is needed here, and only here: Gutenberg's constrained layout
 * emits `margin-inline: auto !important` for every child, so an editor who
 * switches the hero group back to "constrained" would otherwise see the
 * heading and the paragraph centred at different widths. */
.bsl-hero > *,
.wp-block-group.bsl-hero > * {
	max-width: 46rem;
	margin-inline: 0 !important;
}

.bsl-hero__title {
	max-width: 34rem;
	margin-bottom: var(--bsl-space-5);
	font-size: var(--bsl-text-3xl);
}

.bsl-hero__text {
	max-width: 52ch;
	margin-bottom: var(--bsl-space-6);
	font-size: var(--bsl-text-md);
	line-height: var(--bsl-leading-relaxed);
	color: var(--bsl-text-muted);
}

.bsl-hero__media img {
	width: 100%;
	border-radius: var(--bsl-radius);
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

/* --------------------------------------------------- page header block */

.bsl-page-header {
	padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
	border-bottom: var(--bsl-rule);
}

.bsl-page-header__title {
	margin-bottom: var(--bsl-space-4);
}

.bsl-page-header__intro {
	max-width: var(--bsl-measure-narrow);
	font-size: var(--bsl-text-md);
	color: var(--bsl-text-muted);
}

/* ------------------------------------------------------- breadcrumbs */

.bsl-breadcrumbs {
	padding-block: var(--bsl-space-3);
	font-size: var(--bsl-text-sm);
	color: var(--bsl-text-muted);
}

.bsl-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsl-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bsl-breadcrumbs li {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--bsl-space-2);
}

.bsl-breadcrumbs li + li::before {
	content: "/";
	color: var(--bsl-line);
}

.bsl-breadcrumbs a {
	/* WCAG 2.2 SC 2.5.8 asks for 24x24 CSS px. Breadcrumbs are borderline
	 * "inline text" — rather than rely on that exception, give them the height. */
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--bsl-text-muted);
}

.bsl-breadcrumbs li > span {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.bsl-breadcrumbs a:hover {
	color: var(--bsl-link-hover);
}

/* ---------------------------------------------------------- site footer */

.bsl-site-footer {
	margin-top: var(--bsl-space-section);
	padding-block: var(--bsl-space-9) var(--bsl-space-6);
	font-size: var(--bsl-text-sm);
}

.bsl-site-footer__grid {
	display: grid;
	gap: var(--bsl-space-7);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	padding-bottom: var(--bsl-space-7);
	border-bottom: var(--bsl-border-width) solid var(--bsl-line-soft);
}

.bsl-site-footer__about {
	grid-column: span 2;
	max-width: 34ch;
}

@media (max-width: 44em) {
	.bsl-site-footer__about {
		grid-column: auto;
	}
}

.bsl-site-footer h2 {
	margin-bottom: var(--bsl-space-3);
	font-family: var(--bsl-font-sans);
	font-size: var(--bsl-text-xs);
	font-weight: var(--bsl-weight-semibold);
	letter-spacing: var(--bsl-tracking-wide);
	text-transform: uppercase;
	color: var(--bsl-text-muted);
}

.bsl-site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bsl-site-footer li + li {
	margin-top: var(--bsl-space-2);
}

.bsl-site-footer a {
	/* Footer links sit in lists, not in sentences, so the inline exception to
	 * SC 2.5.8 does not apply to them. */
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--bsl-text);
	text-decoration: none;
}

.bsl-site-footer a:hover {
	color: var(--bsl-link-hover);
	text-decoration: underline;
}

.bsl-site-footer address {
	font-style: normal;
	color: var(--bsl-text-muted);
}

.bsl-site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bsl-space-4);
	padding-top: var(--bsl-space-5);
	color: var(--bsl-text-muted);
}

.bsl-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsl-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bsl-social li + li {
	margin-top: 0;
}

.bsl-funding {
	padding-top: var(--bsl-space-6);
	margin-top: var(--bsl-space-6);
	border-top: var(--bsl-border-width) solid var(--bsl-line-soft);
	font-size: var(--bsl-text-xs);
	color: var(--bsl-text-muted);
}

.bsl-funding__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bsl-space-5);
	margin: 0 0 var(--bsl-space-4);
	padding: 0;
	list-style: none;
}

.bsl-funding__logos li + li {
	margin-top: 0;
}

.bsl-funding__logos img {
	max-height: 2.75rem;
	width: auto;
}

.bsl-funding p {
	max-width: 90ch;
	margin: 0 0 var(--bsl-space-2);
	line-height: var(--bsl-leading-normal);
}