/* ==========================================================================
   Bikeability Professionals - main stylesheet

   Shares its type, spacing, shape and component language with the Bikeability
   Shop theme so the two sites read as one estate. Where the shop uses orange
   as its accent, this site uses the Bikeability green, which is the brand's
   own signature and suits a professional resource site better than a retail
   orange.

   COLOUR AND CONTRAST

   The brand green #78d64b is 1.82:1 on white. It is used only as a surface,
   never as text: ink on green is 6.06:1, which is comfortably AA. Text links
   use --bkp-link (#2b6e2f), 6.22:1 on white and 5.33:1 on the mint band, so
   links stay legible in both places they appear. The four pastel wayfinding
   tints all sit between 7.87:1 and 9.77:1 against ink.

   None of the brand's other strong colours pass as text either (#ff9502 is
   2.20:1, #76dbe8 is 1.61:1), so they are surfaces too.

   NOTE ON THE NAV BREAKPOINT
   Custom properties cannot be used inside @media queries, so 1200px appears
   literally below and again in assets/js/navigation.js as BKP_NAV_BREAKPOINT.
   Change both together or the two menus disagree.

   CONTENTS
   1. Design tokens
   2. Base
   3. Layout primitives
   4. Buttons and pills
   5. Header and navigation
   6. Hero
   7. Cards and grids
   8. Content blocks
   9. Accordion
  10. Listings and pagination
  11. People and testimonials
  12. Bookmarks
  13. Forms and search
  14. Footer
  15. Utilities
  16. Sign-in form
  ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
	/* Ink - shared with the shop theme */
	--bkp-ink: #3c3c3b;
	--bkp-ink-soft: #4d4c4a;
	--bkp-ink-muted: #5f5d59;
	--bkp-ink-faint: #757370;
	--bkp-white: #ffffff;

	/* Accent - the Bikeability green, surface use only */
	--bkp-accent: #78d64b;
	--bkp-accent-hover: #66c839;
	--bkp-link: #2b6e2f;
	--bkp-link-hover: #1f5c22;
	--bkp-accent-deep: #245a28;

	/* Brand orange, reserved for the action button on a tile */
	--bkp-orange: #ff9e1b;
	--bkp-orange-hover: #f08d00;

	/* Pastel wayfinding pairs (base / hover), from the brand palette */
	--bkp-mint: #d7f6cf;
	--bkp-mint-hover: #c6efb9;
	--bkp-peach: #ffe6c2;
	--bkp-peach-hover: #ffd9a3;
	--bkp-sky: #d7f7fa;
	--bkp-sky-hover: #bfeff4;
	--bkp-blush: #ffcecd;
	--bkp-blush-hover: #ffb8b6;

	/* Surfaces */
	--bkp-band: #d7f6cf;
	--bkp-card: #f7f7f5;
	--bkp-media: #f1efea;
	--bkp-tint: #f4f3f0;
	--bkp-rule: #e4e2dd;

	/* Footer */
	--bkp-footer-bg: #3c3c3b;
	--bkp-footer-link: #d9d5ce;
	--bkp-footer-muted: #948f88;
	--bkp-footer-rule: #52514e;

	/* Feedback */
	--bkp-notice-bg: #eaf6fb;
	--bkp-notice-bar: #78d64b;
	--bkp-error-bg: #ffe9e8;
	--bkp-error-bar: #c5372f;

	/* Type - identical to the shop */
	--bkp-font-body: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--bkp-font-heading: "Bitter", Georgia, "Times New Roman", serif;
	--bkp-text-base: 17px;
	--bkp-line-height: 1.6;
	--bkp-kicker: 12px;

	/* Layout - identical to the shop */
	--bkp-container: 1240px;
	--bkp-container-wide: 1300px;
	--bkp-container-narrow: 820px;
	--bkp-gutter: 24px;
	--bkp-gap: 28px;

	/* Shape - identical to the shop */
	--bkp-radius-card: 20px;
	--bkp-radius-media: 18px;
	--bkp-radius-thumb: 12px;
	--bkp-radius-tile: 16px;
	--bkp-radius-pill: 999px;

	/* Arrow glyph, used as a mask on the primary action. */
	--bkp-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--bkp-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c3c3b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");

	/* Chevron for select controls, drawn to match the input border colour. */
	--bkp-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c3c3b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

	/* Set by navigation.js from the measured expanded header. */
	--bkp-header-h: 149px;

	/* Motion */
	--bkp-duration: 0.16s;
	--bkp-ease: ease;

	/* Elevation - used sparingly, cards are defined by radius not shadow */
	--bkp-shadow: 0 1px 2px rgba(60, 60, 59, 0.06), 0 8px 24px rgba(60, 60, 59, 0.06);
	--bkp-shadow-lift: 0 2px 4px rgba(60, 60, 59, 0.08), 0 14px 32px rgba(60, 60, 59, 0.1);
}

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

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--bkp-white);
	color: var(--bkp-ink);
	font-family: var(--bkp-font-body);
	font-size: var(--bkp-text-base);
	line-height: var(--bkp-line-height);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var(--bkp-font-heading);
	font-weight: 500;
	line-height: 1.2;
	text-wrap: pretty;
	color: var(--bkp-ink);
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); }
h4 { font-size: 1.2rem; }
h5, h6 { font-size: 1.05rem; }

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

p:last-child,
ul:last-child,
ol:last-child {
	margin-bottom: 0;
}

a {
	color: var(--bkp-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus {
	color: var(--bkp-link-hover);
}

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

figure {
	margin-inline: 0;
}

hr {
	height: 1px;
	margin: 2.5rem 0;
	border: 0;
	background: var(--bkp-rule);
}

blockquote {
	margin: 0 0 1.1em;
	padding: 0 0 0 1.25rem;
	border-left: 4px solid var(--bkp-accent);
	font-family: var(--bkp-font-heading);
	font-size: 1.15rem;
	color: var(--bkp-ink-soft);
}

/*
 * One visible focus treatment everywhere. The ring sits outside the element so
 * it is not clipped by the pill and card radii used throughout.
 */
:focus-visible {
	outline: 3px solid var(--bkp-link);
	outline-offset: 2px;
	border-radius: 3px;
}

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

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: var(--bkp-ink);
	color: var(--bkp-white);
}

.skip-link:focus {
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
}

.bkp-icon {
	flex: none;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

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

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

.bkp-container--narrow {
	max-width: var(--bkp-container-narrow);
}

/*
 * Sticky footer.
 *
 * `min-height: 50vh` used to hold short pages open, but the slack it created
 * landed between the last block and the footer -- and since most pages close
 * with the decorative illustration, that read as a large white gap directly
 * under the artwork.
 *
 * The page is a column instead: main takes the spare height, and the closing
 * illustration is pushed to the bottom of it with `margin-top: auto`. The slack
 * now sits above the artwork, where it is just ordinary page whitespace, and
 * the illustration always meets the footer exactly.
 */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

.bkp-page {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

.bkp-page > .bkp-illustration:last-child {
	margin-top: auto;
}

.site-footer {
	flex: none;
}

/*
 * Vertical rhythm between blocks is owned by the block, not by the page, so a
 * band-coloured block can sit flush against its neighbour.
 */
.bkp-block {
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.bkp-block--tight {
	padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.bkp-block--flush {
	padding-block: 0;
}

.bkp-block--tint { background: var(--bkp-tint); }
.bkp-block--mint { background: var(--bkp-mint); }
.bkp-block--peach { background: var(--bkp-peach); }
.bkp-block--sky { background: var(--bkp-sky); }
.bkp-block--blush { background: var(--bkp-blush); }

.bkp-block__head {
	max-width: 62ch;
	margin-bottom: 2rem;
}

.bkp-block__head--centre {
	margin-inline: auto;
	text-align: center;
}

.bkp-kicker {
	margin: 0 0 0.5rem;
	font-size: var(--bkp-kicker);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bkp-link);
}

.bkp-lede {
	font-size: 1.15rem;
	color: var(--bkp-ink-muted);
}

/* --------------------------------------------------------------------------
   4. Buttons and pills
   -------------------------------------------------------------------------- */

.bkp-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.7rem 1.4rem;
	border: 2px solid transparent;
	border-radius: var(--bkp-radius-pill);
	background: var(--bkp-accent);
	color: var(--bkp-ink);
	font-family: var(--bkp-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--bkp-duration) var(--bkp-ease),
		border-color var(--bkp-duration) var(--bkp-ease),
		color var(--bkp-duration) var(--bkp-ease);
}

.bkp-btn:hover,
.bkp-btn:focus,
.wp-block-button__link:hover {
	background: var(--bkp-accent-hover);
	color: var(--bkp-ink);
}

/* The arrow is a mask so it inherits the label colour. */
.bkp-btn--arrow::after {
	content: "";
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: var(--bkp-arrow) center / contain no-repeat;
	mask: var(--bkp-arrow) center / contain no-repeat;
}

.bkp-btn--ghost {
	background: transparent;
	border-color: var(--bkp-ink);
	color: var(--bkp-ink);
}

.bkp-btn--ghost:hover,
.bkp-btn--ghost:focus {
	background: var(--bkp-ink);
	color: var(--bkp-white);
}

.bkp-btn--quiet {
	padding-inline: 0;
	background: none;
	color: var(--bkp-link);
	text-decoration: underline;
}

.bkp-btn--quiet:hover,
.bkp-btn--quiet:focus {
	background: none;
	color: var(--bkp-link-hover);
}

.bkp-btn--small {
	padding: 0.45rem 1rem;
	font-size: 0.9rem;
}

.bkp-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.8rem;
	border-radius: var(--bkp-radius-pill);
	background: var(--bkp-mint);
	color: var(--bkp-ink);
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   5. Header and navigation

   Same structure as the shop header: brand left, pastel utility tiles top
   right, navigation beneath them, burger below 1200px.

   The header is fixed rather than sticky. Sticky plus a height change on
   scroll reflows the document under the reader and can push the scroll offset
   back across the condense threshold, which reads as a flicker. Fixed, with a
   spacer reserving the expanded height, means condensing cannot affect layout
   or scroll position at all.
   -------------------------------------------------------------------------- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	background: var(--bkp-white);
	transition: box-shadow var(--bkp-duration) var(--bkp-ease);
}

/* WordPress pins its admin bar over the viewport, so sit below it. */
body.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

/*
 * Reserves the space the fixed header would have occupied. navigation.js sets
 * --bkp-header-h from the measured expanded header; the fallback covers the
 * moment before scripts run.
 */
.site-header-spacer {
	height: var(--bkp-header-h, 149px);
}

@media (max-width: 1200px) {
	.site-header-spacer {
		height: var(--bkp-header-h, 78px);
	}
}

/* Open on a short screen, the burger panel must be able to scroll itself. */
@media (max-width: 1200px) {
	.site-header.is-menu-open {
		max-height: 100vh;
		overflow-y: auto;
	}
}

.site-header.is-stuck {
	box-shadow: 0 2px 16px rgba(60, 60, 59, 0.12);
}

.site-header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"brand utility utility"
		"brand nav     actions";
	gap: 0 20px;
	align-items: center;
}

.site-header__brand {
	grid-area: brand;
	display: flex;
	align-items: center;
	padding: 12px 0 14px;
}

.site-header__brand img,
.site-header__brand .custom-logo {
	display: block;
	height: 88px;
	width: auto;
}

/*
 * Condensed state: a shorter logo and no utility tiles. The height change is
 * deliberately not transitioned -- animating it would reflow the document on
 * every frame.
 */
.site-header.is-stuck .site-header__brand img,
.site-header.is-stuck .site-header__brand .custom-logo {
	height: 56px;
}

.site-header.is-stuck .utility {
	display: none;
}

/*
 * Signed out: a single centred logo. The rest of the header is not rendered at
 * all (see header.php), so this only has to recentre the brand and drop the
 * condensing, which has nothing left to condense.
 */
.site-header--minimal .site-header__inner {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "brand";
	justify-items: center;
	padding-block: 8px;
}

.site-header--minimal .site-header__brand {
	justify-content: center;
	padding: 18px 0;
}

.site-header--minimal.is-stuck {
	box-shadow: none;
}

.site-header--minimal.is-stuck .site-header__brand img,
.site-header--minimal.is-stuck .site-header__brand .custom-logo {
	height: 74px;
}

@media (max-width: 1200px) {
	.site-header--minimal .site-header__brand img,
	.site-header--minimal .site-header__brand .custom-logo,
	.site-header--minimal.is-stuck .site-header__brand img,
	.site-header--minimal.is-stuck .site-header__brand .custom-logo {
		height: 60px;
	}
}

/* Utility tiles. */
.utility {
	grid-area: utility;
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.utility__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 92px;
	height: 100%;
	padding: 12px 22px;
	color: var(--bkp-ink);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--bkp-duration) var(--bkp-ease);
}

.utility__item:first-child .utility__link {
	border-bottom-left-radius: var(--bkp-radius-tile);
}

.utility__item:last-child .utility__link {
	border-bottom-right-radius: var(--bkp-radius-tile);
}

.utility__item--search .utility__link { background: var(--bkp-mint); }
.utility__item--search .utility__link:hover { background: var(--bkp-mint-hover); }
.utility__item--logout .utility__link { background: var(--bkp-blush); }
.utility__item--logout .utility__link:hover { background: var(--bkp-blush-hover); }

.utility__link svg {
	display: block;
}

/* Nav. */
.site-nav {
	grid-area: nav;
	justify-self: end;
	padding: 18px 0 20px;
	min-width: 0;
}

.site-nav__menu {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	font-weight: 700;
}

.site-nav__menu > li > a {
	display: inline-block;
	padding: 6px 0;
	border-bottom: 3px solid transparent;
	color: var(--bkp-ink);
	text-decoration: none;
}

.site-nav__menu > li > a:hover,
.site-nav__menu > li > a:focus,
.site-nav__menu > li.current-menu-item > a {
	border-bottom-color: var(--bkp-accent);
	color: var(--bkp-ink);
}

/*
 * Contact us, given the treatment the shop gives its basket button: a solid
 * accent pill that inverts on hover. Same shape and weight as
 * .basket-pill in the shop theme, in this site's accent.
 */
.header-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: none;
	padding: 12px 20px;
	border-radius: var(--bkp-radius-pill);
	background: var(--bkp-accent);
	color: var(--bkp-ink); /* 6.06:1 on the brand green. */
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--bkp-duration) var(--bkp-ease),
	            color var(--bkp-duration) var(--bkp-ease);
}

.header-pill:hover,
.header-pill:focus {
	background: var(--bkp-ink);
	color: var(--bkp-accent);
}

/* Burger. */
.site-header__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
	gap: 12px;
	justify-self: end;
}

.site-nav__toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	border: 2px solid var(--bkp-ink);
	border-radius: var(--bkp-radius-pill);
	background: none;
	color: var(--bkp-ink);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
}

.site-nav__toggle-bars {
	display: grid;
	gap: 3px;
	width: 17px;
}

.site-nav__toggle-bars span {
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

/* Search panel, revealed by the search tile. */
.header-search {
	padding-block: 16px;
	border-top: 1px solid var(--bkp-rule);
	background: var(--bkp-tint);
}

@media (max-width: 1200px) {
	.site-nav__toggle {
		display: inline-flex;
	}

	.site-header__inner {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "brand actions";
		gap: 12px;
	}

	.site-header__brand img,
	.site-header__brand .custom-logo,
	.site-header.is-stuck .site-header__brand img,
	.site-header.is-stuck .site-header__brand .custom-logo {
		height: 60px;
	}

	.utility,
	.site-nav {
		display: none;
		grid-area: auto;
		grid-column: 1 / -1;
		justify-self: stretch;
		padding: 0;
	}

	/* The burger reveals both panels, so both follow .is-menu-open. */
	.site-header.is-menu-open .utility {
		display: flex;
	}

	.site-header.is-menu-open .site-nav {
		display: block;
		padding-bottom: 16px;
	}

	.site-header.is-stuck .utility {
		display: none;
	}

	.site-header.is-menu-open.is-stuck .utility {
		display: flex;
	}

	.utility__item {
		flex: 1 1 130px;
	}

	.utility__link {
		min-width: 0;
		border-radius: 0 !important;
	}

	.site-nav__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav__menu > li + li {
		border-top: 1px solid var(--bkp-rule);
	}

	.site-nav__menu > li > a {
		display: block;
		padding: 12px 0;
		border-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.bkp-hero {
	position: relative;
	background: var(--bkp-band);
}

.bkp-hero__inner {
	display: grid;
	gap: var(--bkp-gap);
	align-items: center;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

@media (min-width: 860px) {
	.bkp-hero--media .bkp-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.bkp-hero__title {
	margin-bottom: 0.4em;
}

.bkp-hero__text {
	max-width: 56ch;
	font-size: 1.1rem;
	color: var(--bkp-ink-soft);
}

.bkp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.bkp-hero__media img,
.bkp-hero__media video {
	width: 100%;
	border-radius: var(--bkp-radius-media);
}

.bkp-hero--plain { background: var(--bkp-white); }
.bkp-hero--mint { background: var(--bkp-mint); }
.bkp-hero--peach { background: var(--bkp-peach); }
.bkp-hero--sky { background: var(--bkp-sky); }
.bkp-hero--blush { background: var(--bkp-blush); }

/* Breadcrumb sits above the hero content. */
.bkp-breadcrumb {
	padding-block: 0.9rem;
	font-size: 0.88rem;
	color: var(--bkp-ink-muted);
}

.bkp-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bkp-breadcrumb li + li::before {
	content: "/";
	margin-right: 0.4rem;
	color: var(--bkp-ink-faint);
}

.bkp-breadcrumb a {
	color: inherit;
}

/* --------------------------------------------------------------------------
   7. Cards and grids
   -------------------------------------------------------------------------- */

.bkp-grid {
	display: grid;
	gap: var(--bkp-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	/*
	 * Equal heights. This was briefly set to `start` while some items had no
	 * featured image and stretching left them with a void; every card now has
	 * artwork and a closing action, so a row lines up cleanly again.
	 */
	align-items: stretch;
}

.bkp-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.bkp-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/*
 * A grid of tiles that carry child links is always two across, whatever the
 * block's column setting says. Each of these tiles is a section of the site
 * with its pages listed under it, so it is far taller than a plain tile; at
 * three or four across the links inside are too narrow to read, and auto-fill
 * would keep changing the count with the viewport. Two is fixed, so the
 * sections always pair up.
 */
.bkp-grid:has(.bkp-tile__links) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
	.bkp-grid:has(.bkp-tile__links) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Cards follow the shop's treatment: a soft card surface rather than white on
 * white, generous padding, and a lift on hover. The tinted surface matters more
 * here than on the shop, because a listing often mixes items that have a
 * featured image with items that do not -- on a white card the ones without an
 * image read as broken, and on a tinted one they read as a text card.
 */
.bkp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid #dfdfdf;
	border-radius: var(--bkp-radius-card);
	background: var(--bkp-card);
	transition: transform var(--bkp-duration) var(--bkp-ease),
		box-shadow var(--bkp-duration) var(--bkp-ease);
}

.bkp-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--bkp-shadow-lift);
}

.bkp-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var(--bkp-media);
}

.bkp-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bkp-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.65rem;
	padding: 22px 24px 24px;
}

.bkp-card__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

/*
 * The whole card is clickable, but only the title is a real link, so the
 * accessible name stays meaningful and a screen reader's link list is not full
 * of "read more". Text stays selectable because the overlay sits behind it.
 */
.bkp-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bkp-card__title a {
	color: var(--bkp-ink);
	text-decoration: none;
}

.bkp-card:hover .bkp-card__title a,
.bkp-card__title a:focus-visible {
	color: var(--bkp-link);
	text-decoration: underline;
}

.bkp-card__excerpt {
	margin: 0;
	color: var(--bkp-ink-muted);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* Pushed to the foot of the card so a row of cards aligns on its meta line. */
.bkp-card__meta {
	margin: 0;
	color: var(--bkp-ink-faint);
	font-size: 0.85rem;
	font-weight: 700;
}

/* Wayfinding tiles: the pastel, icon-led variant. */
/*
 * Wayfinding tiles, following the shop's: a pastel panel with the label
 * centred and set in the heading face. A tile carrying child links is the
 * exception -- a list cannot be centred and still scan -- so that variant
 * stays left-aligned.
 */
.bkp-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	height: 100%;
	padding: 28px 22px 26px;
	border-radius: var(--bkp-radius-card);
	background: var(--bkp-mint);
	color: var(--bkp-ink);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--bkp-duration) var(--bkp-ease);
}

.bkp-tile:hover { background: var(--bkp-mint-hover); color: var(--bkp-ink); }

.bkp-grid > *:nth-child(4n + 2) .bkp-tile,
.bkp-tile--peach { background: var(--bkp-peach); }
.bkp-grid > *:nth-child(4n + 2) .bkp-tile:hover,
.bkp-tile--peach:hover { background: var(--bkp-peach-hover); }

.bkp-grid > *:nth-child(4n + 3) .bkp-tile,
.bkp-tile--sky { background: var(--bkp-sky); }
.bkp-grid > *:nth-child(4n + 3) .bkp-tile:hover,
.bkp-tile--sky:hover { background: var(--bkp-sky-hover); }

.bkp-grid > *:nth-child(4n + 4) .bkp-tile,
.bkp-tile--blush { background: var(--bkp-blush); }
.bkp-grid > *:nth-child(4n + 4) .bkp-tile:hover,
.bkp-tile--blush:hover { background: var(--bkp-blush-hover); }

.bkp-tile__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--bkp-radius-pill);
	background: rgba(255, 255, 255, 0.65);
}

.bkp-tile__title {
	margin: 0;
	font-family: var(--bkp-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}

.bkp-tile__title a {
	color: inherit;
	text-decoration: none;
}

.bkp-tile__title a:hover,
.bkp-tile__title a:focus {
	text-decoration: underline;
}

/*
 * These hold editor-written rich text, so they are containers rather than
 * paragraphs: about half of them carry a link, a list or an image. The outer
 * element keeps its own margin at zero and the children space themselves.
 */
/*
 * Body weight, not bold. These are descriptions, and a grid of two dozen tiles
 * set entirely in bold has no emphasis left for the title.
 */
.bkp-tile__text {
	margin: 0;
	font-size: 0.9rem;
	color: #4a4742;
}

/*
 * A tile that takes you somewhere carries an action button, pinned to the foot
 * so a row of tiles lines up on it however long the descriptions are.
 *
 * The tile keeps its pastel. The orange does not need the panel to be quiet to
 * be seen -- it needs to be big, so the button runs the full width of the tile
 * rather than sitting in the middle of it as a small pill.
 */
.bkp-tile--action { justify-content: flex-start; }

.bkp-tile__foot {
	width: 100%;
	margin-top: auto;
	padding-top: 1.2rem;
}

.bkp-tile__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	width: 100%;
	padding: 0.78rem 1.2rem;
	border-radius: var(--bkp-radius-pill);
	background: var(--bkp-orange);
	color: var(--bkp-ink);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--bkp-duration) var(--bkp-ease);
}

.bkp-tile--action:hover .bkp-tile__cta,
a.bkp-tile__cta:hover,
a.bkp-tile__cta:focus { background: var(--bkp-orange-hover); color: var(--bkp-ink); }

.bkp-tile__text > *:first-child,
.bkp-card__excerpt > *:first-child { margin-top: 0; }

.bkp-tile__text > *:last-child,
.bkp-card__excerpt > *:last-child { margin-bottom: 0; }

.bkp-tile__text p,
.bkp-card__excerpt p { margin: 0 0 0.6rem; }

.bkp-tile__text ul,
.bkp-tile__text ol,
.bkp-card__excerpt ul,
.bkp-card__excerpt ol {
	margin: 0 0 0.6rem;
	padding-left: 1.1rem;
	text-align: left;
}

.bkp-tile__text img,
.bkp-card__excerpt img {
	max-width: 100%;
	height: auto;
}

.bkp-tile__text a { color: inherit; text-decoration: underline; }
/* Above the card's own click overlay, so it stays clickable in its own right. */
.bkp-card__excerpt a {
	position: relative;
	z-index: 1;
	color: var(--bkp-link);
}

/* A tile with child links reads as a list, so it aligns left. */
.bkp-tile:has(.bkp-tile__links) {
	align-items: flex-start;
	text-align: left;
}

/* --------------------------------------------------------------------------
   8. Content blocks
   -------------------------------------------------------------------------- */

.bkp-prose > *:first-child { margin-top: 0; }
.bkp-prose > *:last-child { margin-bottom: 0; }

.bkp-prose h2,
.bkp-prose h3 {
	margin-top: 1.8em;
}

.bkp-prose ul,
.bkp-prose ol {
	padding-left: 1.25rem;
}

.bkp-prose li + li {
	margin-top: 0.35rem;
}

.bkp-prose img {
	border-radius: var(--bkp-radius-media);
}

.bkp-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.bkp-prose th,
.bkp-prose td {
	padding: 0.65rem 0.8rem;
	border-bottom: 1px solid var(--bkp-rule);
	text-align: left;
}

.bkp-prose th {
	font-family: var(--bkp-font-heading);
	font-weight: 500;
}

/* Tables are the one thing allowed to scroll sideways. */
.bkp-table-scroll {
	overflow-x: auto;
}

.bkp-split {
	display: grid;
	gap: var(--bkp-gap);
	align-items: center;
}

@media (min-width: 860px) {
	.bkp-split--media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bkp-split--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bkp-split--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.bkp-split--reverse > *:first-child { order: 2; }

.bkp-split__media img {
	width: 100%;
	border-radius: var(--bkp-radius-media);
}

/* Call to action band. */
.bkp-cta {
	display: grid;
	gap: var(--bkp-gap);
	align-items: center;
	padding: clamp(1.75rem, 1rem + 3vw, 3rem);
	border-radius: var(--bkp-radius-card);
	background: var(--bkp-mint);
}

@media (min-width: 860px) {
	.bkp-cta--media { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

.bkp-cta__title { margin-bottom: 0.35em; }
.bkp-cta__text { margin-bottom: 1.25rem; color: var(--bkp-ink-soft); }

.bkp-illustration {
	display: block;
	width: 100%;
}

.bkp-illustration img {
	width: 100%;
}

/* --------------------------------------------------------------------------
   10. Accordion
   -------------------------------------------------------------------------- */

/*
 * Accordion, shared by the FAQ blocks and the jobs board. Modelled on the
 * original board: a roomy white row with a circled chevron on the right, and a
 * clear open state so a long list is easy to scan.
 */
.bkp-accordion {
	display: grid;
	gap: 0.85rem;
}

.bkp-accordion__item {
	overflow: hidden;
	border: 1px solid var(--bkp-rule);
	border-radius: var(--bkp-radius-tile);
	background: var(--bkp-white);
	transition: border-color var(--bkp-duration) var(--bkp-ease),
		box-shadow var(--bkp-duration) var(--bkp-ease);
}

.bkp-accordion__item:hover {
	box-shadow: var(--bkp-shadow);
}

.bkp-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	width: 100%;
	padding: 1.15rem 1.5rem;
	border: 0;
	background: none;
	color: var(--bkp-ink);
	font-family: var(--bkp-font-heading);
	font-size: 1.1rem;
	text-align: left;
	cursor: pointer;
}

.bkp-accordion__trigger:hover {
	background: var(--bkp-tint);
}

/* The chevron sits in a ring, as on the original board. */
.bkp-accordion__trigger .bkp-icon {
	flex: none;
	box-sizing: content-box;
	width: 20px;
	height: 20px;
	padding: 6px;
	border: 1.5px solid var(--bkp-rule);
	border-radius: var(--bkp-radius-pill);
	color: var(--bkp-ink-muted);
	transition: transform var(--bkp-duration) var(--bkp-ease),
		border-color var(--bkp-duration) var(--bkp-ease),
		color var(--bkp-duration) var(--bkp-ease);
}

.bkp-accordion__trigger:hover .bkp-icon {
	border-color: var(--bkp-ink-faint);
	color: var(--bkp-ink);
}

.bkp-accordion__trigger[aria-expanded="true"] .bkp-icon {
	transform: rotate(180deg);
	border-color: var(--bkp-accent);
	color: var(--bkp-ink);
}

.bkp-accordion__panel {
	padding: 0 1.5rem 1.5rem;
	border-top: 1px solid var(--bkp-rule);
	padding-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   11. Listings and pagination
   -------------------------------------------------------------------------- */

.bkp-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
}

.bkp-filter {
	padding: 0.45rem 1rem;
	border: 1px solid var(--bkp-rule);
	border-radius: var(--bkp-radius-pill);
	background: var(--bkp-white);
	color: var(--bkp-ink);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.bkp-filter:hover,
.bkp-filter.is-active {
	background: var(--bkp-ink);
	border-color: var(--bkp-ink);
	color: var(--bkp-white);
}

.bkp-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	margin-top: 2.5rem;
}

.bkp-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.6rem;
	border-radius: var(--bkp-radius-pill);
	background: var(--bkp-tint);
	color: var(--bkp-ink);
	font-weight: 700;
	text-decoration: none;
}

.bkp-pagination .page-numbers:hover,
.bkp-pagination .page-numbers.current {
	background: var(--bkp-ink);
	color: var(--bkp-white);
}

.bkp-empty {
	padding: 2.5rem;
	border-radius: var(--bkp-radius-card);
	background: var(--bkp-tint);
	text-align: center;
	color: var(--bkp-ink-muted);
}

/* --------------------------------------------------------------------------
   12. People and testimonials
   -------------------------------------------------------------------------- */

.bkp-person {
	text-align: center;
}

.bkp-person__photo {
	aspect-ratio: 1;
	margin-bottom: 0.9rem;
	overflow: hidden;
	border-radius: var(--bkp-radius-pill);
	background: var(--bkp-media);
	max-width: 100%;
}

.bkp-person__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bkp-person__name { margin: 0 0 0.15rem; font-size: 1.1rem; }
.bkp-person__role { margin: 0; color: var(--bkp-ink-muted); font-size: 0.9rem; }

.bkp-quote {
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border-radius: var(--bkp-radius-card);
	background: var(--bkp-white);
	box-shadow: var(--bkp-shadow);
}

.bkp-quote__text {
	margin: 0 0 1rem;
	font-family: var(--bkp-font-heading);
	font-size: 1.2rem;
	line-height: 1.45;
}

.bkp-quote__cite {
	font-size: 0.9rem;
	font-style: normal;
	color: var(--bkp-ink-muted);
}

/* --------------------------------------------------------------------------
   13. Bookmarks
   -------------------------------------------------------------------------- */

.bkp-bookmark {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--bkp-rule);
	border-radius: var(--bkp-radius-pill);
	background: var(--bkp-white);
	color: var(--bkp-ink);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--bkp-duration) var(--bkp-ease);
}

.bkp-bookmark:hover {
	background: var(--bkp-tint);
}

.bkp-bookmark.is-bookmarked {
	background: var(--bkp-mint);
	border-color: transparent;
}

.bkp-bookmark.is-bookmarked .bkp-icon {
	fill: currentColor;
}

.bkp-bookmark[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   14. Forms and search
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: 0.7rem 1rem;
	border: 1px solid var(--bkp-rule);
	border-radius: var(--bkp-radius-pill);
	background: var(--bkp-white);
	color: var(--bkp-ink);
	font-family: inherit;
	font-size: 1rem;
}

textarea {
	border-radius: var(--bkp-radius-tile);
	resize: vertical;
}

select {
	appearance: none;
	padding-right: 2.5rem;
	background-image: var(--bkp-chevron);
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1rem;
}

label {
	display: inline-block;
	margin-bottom: 0.35rem;
	font-size: 0.92rem;
	font-weight: 700;
}

.bkp-search {
	position: relative;
	display: flex;
	align-items: center;
}

.bkp-search input[type="search"] {
	/* Room for the labelled button that sits inside the field. */
	padding-right: 8.5rem;
}

.bkp-search__submit {
	position: absolute;
	right: 6px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--bkp-radius-pill);
	background: var(--bkp-accent);
	color: var(--bkp-ink); /* 6.06:1 on the brand green. */
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--bkp-duration) var(--bkp-ease);
}

.bkp-search__submit:hover {
	background: var(--bkp-accent-hover);
}

.bkp-notice {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--bkp-notice-bar);
	border-radius: var(--bkp-radius-thumb);
	background: var(--bkp-notice-bg);
}

.bkp-notice--error {
	border-left-color: var(--bkp-error-bar);
	background: var(--bkp-error-bg);
}

/*
 * Contact Form 7 response messages, styled per the house rule: no border, no
 * margin except 20px on top, brand colour behind, and sized to its content
 * rather than stretched across the form.
 */
.wpcf7 form .wpcf7-response-output {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 20px 0 0;
	padding: 0.75rem 1rem;
	border: 0;
	border-radius: var(--bkp-radius-thumb);
	background: var(--bkp-accent);
	color: var(--bkp-ink); /* 6.06:1 on the brand green. */
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	background: var(--bkp-error-bg);
	color: var(--bkp-ink);
}

.wpcf7-not-valid-tip {
	margin-top: 0.35rem;
	color: #a3291f;
	font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   15. Reassurance band and footer

   Same shape as the shop: an optional three-up band on the brand tint, then a
   grid whose first column carries the logo, blurb and funder marks, then a
   legal row.
   -------------------------------------------------------------------------- */

.features {
	padding: 52px var(--bkp-gutter);
	background: var(--bkp-band);
}

.features__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 34px;
	max-width: var(--bkp-container);
	margin-inline: auto;
	padding-inline: var(--bkp-gutter);
	text-align: center;
}

.features__icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin: 0 auto 16px;
	border-radius: var(--bkp-radius-pill);
	background: rgba(255, 255, 255, 0.7);
	color: var(--bkp-link);
}

.features__title {
	margin: 0 0 8px;
	font-size: 20px;
}

.features__body {
	max-width: 32ch;
	margin: 0 auto;
	color: var(--bkp-ink-soft);
	font-size: 16px;
}

.site-footer {
	padding: 0 var(--bkp-gutter);
	background: var(--bkp-footer-bg);
	color: var(--bkp-white);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 38px;
	max-width: var(--bkp-container);
	margin-inline: auto;
	/*
	 * The gutter matters as much as the width: with `0` here the footer's
	 * columns began a gutter to the left of the header, the hero and the page
	 * content, which is visible the moment you put a straight edge down the page.
	 */
	padding: 56px var(--bkp-gutter) 30px;
}

.site-footer__logo {
	display: block;
	/*
	 * Taller than the shop's 58px because this is the stacked three-badge
	 * lockup rather than the shop's single wordmark -- at the same height the
	 * badge text is unreadable.
	 */
	height: 92px;
	width: auto;
	margin-bottom: 18px;
	padding: 10px 12px;
	border-radius: var(--bkp-radius-thumb);
	background: var(--bkp-white);
}

/* Funder attribution, directly beneath the blurb. */
.site-footer__dft {
	display: block;
	height: 56px;
	width: auto;
	margin-top: 22px;
}

.site-footer__blurb {
	max-width: 34ch;
	margin: 0;
	color: #b9b4ad;
	font-size: 16px;
}

/* Funder and partner marks. */
.site-footer__marks {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	margin-top: 22px;
}

.site-footer__marks img {
	height: 48px;
	width: auto;
}

.site-footer__heading {
	margin: 0 0 14px;
	font-family: var(--bkp-font-heading);
	font-size: 18px;
	font-weight: 500;
}

.site-footer ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
}

.site-footer a {
	color: var(--bkp-footer-link);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--bkp-white);
	text-decoration: underline;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;
	max-width: var(--bkp-container);
	margin-inline: auto;
	padding: 20px var(--bkp-gutter) 40px;
	border-top: 1px solid var(--bkp-footer-rule);
	color: var(--bkp-footer-muted);
	font-size: 14px;
}

.site-footer__legal p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   15b. Title Case for interface chrome

   Page titles, section headings and navigation labels are Title Case, the same
   rule the shop follows. Done in CSS so it also covers strings WordPress
   generates, without filtering every one of them. Body copy and post titles
   are deliberately excluded -- capitalising an article headline would mangle
   it.
   -------------------------------------------------------------------------- */

.bkp-hero__title,
.features__title,
.site-footer__heading,
.site-footer__title,
.bkp-tile__title,
.bkp-card__title,
.bkp-jobs__title,
.bkp-person__name,
.bkp-quote__cite,
.bkp-block__head h2,
.bkp-block__head h3,
.bkp-btn,
.wp-block-button__link,
.header-pill,
.utility__link,
.site-nav__menu > li > a,
.bkp-filter,
.bkp-tile__links a,
.bkp-card__links a,
.site-footer__grid nav a,
.bkp-404__title,
.bkp-404__sections-title,
.bkp-accordion__trigger {
	text-transform: capitalize;
}

/*
 * Prose keeps its own sentence case. Capitalising a headline written as a
 * sentence -- or a breadcrumb trail -- mangles it, and acronyms inside body
 * copy would come out wrong.
 */
.bkp-prose h1,
.bkp-prose h2,
.bkp-prose h3,
.bkp-prose h4,
.bkp-breadcrumb,
.bkp-card__excerpt,
.bkp-tile__text,
.bkp-lede {
	text-transform: none;
}

/*
 * An empty block leaves an empty element, and an empty element still carries
 * its margins. Three pages hold a video block with no video in it, which lands
 * between the closing illustration and the footer as a band of dead space that
 * reads as a layout bug. The block editor will not remove them, so they are
 * hidden here rather than by editing three pages -- a fourth would otherwise
 * bring the gap back.
 */
figure.wp-block-video:empty,
figure.wp-block-image:empty,
.bkp-page > figure:empty,
.bkp-prose > figure:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   Core blocks dropped straight into a page

   A page is normally all ACF blocks, and each of those brings its own
   container. A core block -- a heading, a gallery, an image -- brings nothing,
   so it ran the full width of the viewport while the page title beside it sat
   in the 1240px column. On the conference page that put the gallery and its
   heading visibly out of line with everything above them.

   Everything that manages its own width is excluded: ACF blocks are sections,
   the hero is its own band, the closing illustration is deliberately full-bleed,
   and the sign-in card is a fixed 30rem panel that must not stretch to the
   container -- this selector outranks its own rule, so it has to be named.

   So is anything that already holds a container: a core group wrapping ACF
   blocks would otherwise get the gutter here and again from the block inside
   it, and the content would sit a gutter's width in from the page title.
   -------------------------------------------------------------------------- */

.bkp-page > *:not(section):not(header):not(.bkp-hero):not(.bkp-illustration):not(.bkp-page__tools):not(.bks-aa):not(:has(.bkp-container)) {
	width: 100%;
	max-width: var(--bkp-container);
	margin-inline: auto;
	padding-inline: var(--bkp-gutter);
}

/* A run of core blocks needs its own rhythm; ACF blocks space themselves. */
.bkp-page > .wp-block-heading { margin-top: 2.5rem; }
.bkp-page > .wp-block-gallery { margin-bottom: 2.5rem; }

/* --------------------------------------------------------------------------
   16. Utilities
   -------------------------------------------------------------------------- */

.bkp-stack > * + * { margin-top: 1rem; }
.bkp-stack--tight > * + * { margin-top: 0.5rem; }
.bkp-stack--loose > * + * { margin-top: 2rem; }

.bkp-centre { text-align: center; }
.bkp-centre .bkp-block__head { margin-inline: auto; }

.bkp-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Editor colour palette classes, matching inc/editor.php. */
.has-ink-color { color: var(--bkp-ink); }
.has-white-color { color: var(--bkp-white); }
.has-green-deep-color { color: var(--bkp-link); }

.has-ink-background-color { background-color: var(--bkp-ink); color: var(--bkp-white); }
.has-white-background-color { background-color: var(--bkp-white); }
.has-green-background-color { background-color: var(--bkp-accent); }
.has-green-deep-background-color { background-color: var(--bkp-accent-deep); color: var(--bkp-white); }
.has-mint-background-color { background-color: var(--bkp-mint); }
.has-peach-background-color { background-color: var(--bkp-peach); }
.has-sky-background-color { background-color: var(--bkp-sky); }
.has-blush-background-color { background-color: var(--bkp-blush); }
.has-tint-background-color { background-color: var(--bkp-tint); }

.has-small-font-size { font-size: 15px; }
.has-normal-font-size { font-size: 17px; }
.has-large-font-size { font-size: 20px; }

/* The editor preview needs block padding without the page shell around it. */
.block-editor-block-list__layout .bkp-block {
	padding-block: 1.5rem;
}

/* --------------------------------------------------------------------------
   18. Sign-in form

   Styles the markup from the Bikeability Account Access plugin so the sign-in
   screen belongs to this design system. The plugin ships a plain fallback
   sheet of its own; these rules sit on top of it rather than replacing it, so
   the form still renders sensibly if the theme is switched.

   The plugin's class names are its public surface -- see
   includes/class-bks-aa-render.php. Nothing here depends on its internals.
   -------------------------------------------------------------------------- */

/*
 * The plugin's own sheet is written to be themed: every colour and radius in it
 * is a var(--bks-*) with a fallback. Defining those here is the intended
 * integration point, so its default styling picks up this palette without any
 * selector fighting.
 */
:root {
	--bks-white: var(--bkp-white);
	--bks-rule: var(--bkp-rule);
	--bks-ink-muted: var(--bkp-ink-muted);
	--bks-font-heading: var(--bkp-font-heading);
	--bks-radius-card: var(--bkp-radius-card);
	--bks-radius-thumb: var(--bkp-radius-thumb);
	--bks-blue: var(--bkp-notice-bg);
	--bks-pink: var(--bkp-error-bg);
}

/*
 * Layout still needs overriding rather than theming, and the plugin's sheet is
 * enqueued after this one, so these rules carry an extra class to win on
 * specificity rather than relying on order. The shortcode renders straight into
 * the page with no container of its own, which is why the side gutter lives
 * here -- without it the card runs to both screen edges on a phone.
 */
.bkp-page .bks-aa {
	/*
	 * The shop's proportions exactly: 30rem wide, 28px of padding, a hairline
	 * border rather than a shadow. The side gutter is set here because the
	 * shortcode renders straight into the page with no container of its own --
	 * without it the card runs to both screen edges on a phone.
	 */
	max-width: 30rem;
	margin-inline: auto;
	margin-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
	padding: 28px;
	border: 1px solid var(--bkp-rule);
	border-radius: var(--bkp-radius-card);
	background: var(--bkp-white);
	box-shadow: none;
}

@media (max-width: 520px) {
	.bkp-page .bks-aa {
		margin-inline: var(--bkp-gutter);
	}
}

.bkp-page .bks-aa__title {
	margin: 0 0 0.5rem;
	font-family: var(--bkp-font-heading);
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--bkp-ink);
}

.bkp-page .bks-aa__intro {
	margin: 0 0 1.5rem;
	color: var(--bkp-ink-muted);
}

.bkp-page .bks-aa__field {
	margin-bottom: 1.25rem;
}

.bkp-page .bks-aa__field label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.92rem;
	font-weight: 700;
}

.bkp-page .bks-aa__form button,
.bkp-page .bks-aa__form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	width: 100%;
	padding: 0.8rem 1.4rem;
	border: 2px solid transparent;
	border-radius: var(--bkp-radius-pill);
	background: var(--bkp-accent);
	color: var(--bkp-ink); /* 6.06:1 on the brand green. */
	font-family: var(--bkp-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--bkp-duration) var(--bkp-ease);
}

.bkp-page .bks-aa__form button:hover,
.bkp-page .bks-aa__form input[type="submit"]:hover {
	background: var(--bkp-accent-hover);
}

/*
 * The plugin deliberately returns the same notice whether or not an address
 * has an account, so neither state is styled as an error.
 */
.bkp-page .bks-aa__notice {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border-left: 4px solid var(--bkp-notice-bar);
	border-radius: var(--bkp-radius-thumb);
	background: var(--bkp-notice-bg);
	font-size: 0.95rem;
}

.bkp-page .bks-aa__notice--error {
	border-left-color: var(--bkp-error-bar);
	background: var(--bkp-error-bg);
}

/* The sign-in page has no navigation, so the header is just the logo. */
.site-header--minimal .site-header__inner {
	justify-content: center;
}

/* --------------------------------------------------------------------------
   Header actions, narrow screens

   Below the nav breakpoint the burger takes over, so the two quiet controls
   drop their labels to icons and the pill keeps its text. Anything that goes
   fully hidden here is still reachable from the burger panel.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.header-pill {
		padding: 10px 14px;
		font-size: 14px;
	}
}

/* --------------------------------------------------------------------------
   Staff sign-in link

   Appended below the passwordless form by the site plugin. Administrators and
   editors are excluded from link sign-in by design, so without this route the
   sign-in page offers them nothing. Kept quiet: it is the exception, not the
   path almost everyone takes.
   -------------------------------------------------------------------------- */

.bkp-staff-login {
	max-width: 460px;
	margin: -1.5rem auto 3rem;
	padding-inline: var(--bkp-gutter);
	color: var(--bkp-ink-muted);
	font-size: 0.92rem;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Tile sub-links and card tags
   -------------------------------------------------------------------------- */

/*
 * A menu-driven tile carries its child pages. The tile itself is a link, so
 * these sit above it in the stacking order to stay clickable in their own right.
 */
/*
 * Child links read as buttons rather than a list of underlined text: a single
 * column of full-width panels, each a shade darker than the tile it sits on so
 * it reads as a control without introducing another colour.
 *
 * One column rather than two. These are page names, not labels -- "Internal
 * Quality Assurance Checks And Procedures" is typical -- and at half a tile's
 * width they wrapped to three lines and the column stopped scanning.
 */
.bkp-tile__links {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	width: 100%;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
}

.bkp-tile__links a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0.6rem 0.9rem;
	border-radius: var(--bkp-radius-thumb);
	background: rgba(0, 0, 0, 0.07);
	color: var(--bkp-ink);
	font-size: 0.92rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--bkp-duration) var(--bkp-ease);
}

.bkp-tile__links a:hover,
.bkp-tile__links a:focus {
	background: rgba(0, 0, 0, 0.13);
	color: var(--bkp-ink);
	text-decoration: none;
}

.bkp-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
}

/*
 * On a card with artwork the tag overlays the image, left-aligned with the
 * body copy beneath it. On a card without artwork there is nothing to overlay,
 * so it stays in the flow.
 */
.bkp-card:has(.bkp-card__media) .bkp-card__tags {
	position: absolute;
	top: 16px;
	left: 24px;
	z-index: 2;
	margin: 0;
}

.bkp-pill--tag {
	padding: 0.22rem 0.7rem;
	background: #d7f6ce;
	color: #3c3c3b;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: capitalize !important;
}

/* --------------------------------------------------------------------------
   Dashboard tiles

   The front page's cards carry a list of sub-links. The card title's overlay
   covers the whole card, so the sub-links are lifted above it to stay
   individually clickable, and the overlay is removed entirely on these cards
   so a stray click between links does not fire the card's own destination.
   -------------------------------------------------------------------------- */

.bkp-card--dashboard .bkp-card__title a::after {
	content: none;
}

/*
 * Dashboard sub-links are buttons, not a list of links.
 *
 * Each one is a route into a section, and on the old dashboard they read as
 * full-width coloured panels -- far easier to hit and to scan than a column of
 * underlined text. The colour cycles through the four pastels so a card of five
 * links is legible at a glance rather than a wall of one shade.
 */
.bkp-card__links {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 8px;
	margin: 0.9rem 0 0;
	padding: 0.9rem 0 0;
	border-top: 1px solid var(--bkp-rule);
	list-style: none;
	font-size: 0.95rem;
}

.bkp-card__links a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.7rem 0.9rem;
	border-radius: var(--bkp-radius-thumb);
	background: var(--bkp-mint);
	color: var(--bkp-ink);
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--bkp-duration) var(--bkp-ease);
}

/* The icon badge, a shade of the panel it sits on. */
.bkp-card__links a::before {
	content: "";
	width: 1.6em;
	height: 1.6em;
	flex: none;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.72) var(--bkp-arrow) center / 0.85em no-repeat;
}

.bkp-card__links li:nth-child(4n + 2) a { background: var(--bkp-peach); }
.bkp-card__links li:nth-child(4n + 3) a { background: var(--bkp-blush); }
.bkp-card__links li:nth-child(4n + 4) a { background: var(--bkp-sky); }

.bkp-card__links li:nth-child(4n + 1) a:hover,
.bkp-card__links li:nth-child(4n + 1) a:focus { background: var(--bkp-mint-hover); }
.bkp-card__links li:nth-child(4n + 2) a:hover,
.bkp-card__links li:nth-child(4n + 2) a:focus { background: var(--bkp-peach-hover); }
.bkp-card__links li:nth-child(4n + 3) a:hover,
.bkp-card__links li:nth-child(4n + 3) a:focus { background: var(--bkp-blush-hover); }
.bkp-card__links li:nth-child(4n + 4) a:hover,
.bkp-card__links li:nth-child(4n + 4) a:focus { background: var(--bkp-sky-hover); }

.bkp-card__links a:hover,
.bkp-card__links a:focus {
	color: var(--bkp-ink);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Job board

   Vacancies are accordions: the title is the control, the description and the
   apply button are revealed. Built on the shared accordion so the two behave
   and look the same.
   -------------------------------------------------------------------------- */

.bkp-jobs__heading {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	text-align: left;
}

.bkp-jobs__title {
	font-family: var(--bkp-font-heading);
	font-size: 1.08rem;
}

.bkp-jobs__meta {
	font-family: var(--bkp-font-body);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--bkp-ink-muted);
}

.bkp-jobs__closing {
	margin-top: 1rem;
	color: var(--bkp-ink-muted);
	font-size: 0.9rem;
}

.bkp-jobs__more {
	margin-top: 1.5rem;
	text-align: center;
}

/* The open vacancy is outlined so the expanded one is obvious in a long list. */
.bkp-jobs__item:has(.bkp-accordion__trigger[aria-expanded="true"]) {
	border-color: var(--bkp-accent);
	box-shadow: var(--bkp-shadow);
}

.bkp-jobs .bkp-accordion__trigger {
	padding-block: 1.35rem;
}

/* --------------------------------------------------------------------------
   Prose measure

   A line of body text is comfortable at roughly 60-75 characters. At the
   default container width it runs to about 140, which is the single biggest
   reason the text-heavy pages read as flat. Centred content keeps its own
   centring; left-aligned content simply stops short of the right edge.
   -------------------------------------------------------------------------- */

.bkp-content__inner--measure {
	max-width: 72ch;
	/*
	 * Left, not centred. Centring a 72ch column inside a 1240px container
	 * leaves it visibly indented from the page title above it, which reads as
	 * a layout fault rather than as a reading measure.
	 */
	margin-inline: 0;
}

/* The heading belongs to the same column, so it moves with it. */
.bkp-content__inner--measure .bkp-block__head {
	max-width: none;
}

/* Headings can run a little wider than the body they introduce. */
.bkp-block__head h2 {
	max-width: 24ch;
}

.bkp-block__head--centre h2 {
	max-width: none;
}

/* --------------------------------------------------------------------------
   Page tools

   The bookmark control on block-built pages. It sits just under the hero,
   aligned right, so it does not push the page's own layout around.
   -------------------------------------------------------------------------- */

.bkp-page__tools {
	padding-block: 1rem 0;
}

.bkp-page__tools .bkp-container {
	display: flex;
	justify-content: flex-end;
}

/* On block-built pages the tools row sits above the hero in source order. */
.bkp-page > .bkp-page__tools + .bkp-hero {
	margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Stray core blocks in block-built content

   A block-built page is a stack of sections that each bring their own
   container. A core block dropped in between them has none, so a separator ran
   the full width of the viewport as a rule across the page. These give the
   common ones the same measure the prose has.
   -------------------------------------------------------------------------- */

/*
 * These take the page container, set above, so they line up with the title.
 * They used to be capped at a centred 72ch, which put a heading or a gallery
 * noticeably inside the column everything above them used.
 *
 * Running prose keeps a measure, but as a left-aligned cap rather than a
 * centred column, so it starts on the same line as everything else.
 */
.bkp-page > p,
.bkp-page > ul,
.bkp-page > ol {
	max-width: calc(72ch + var(--bkp-gutter) * 2);
	margin-inline: 0;
	padding-inline: var(--bkp-gutter);
}

/* Centred at the container's own offset, so the measure starts at its edge. */
@supports (margin-left: max(0px, 1px)) {
	.bkp-page > p,
	.bkp-page > ul,
	.bkp-page > ol {
		margin-left: max(var(--bkp-gutter), (100% - var(--bkp-container)) / 2);
	}
}

.bkp-page > .wp-block-separator {
	height: 1px;
	margin-block: 2.5rem;
	border: 0;
	background: var(--bkp-rule);
	box-sizing: content-box;
}

/* --------------------------------------------------------------------------
   Bookmark control

   Pinned to the bottom right, as the original site had it, so it is reachable
   from anywhere in a long article without taking a place in the layout.
   -------------------------------------------------------------------------- */

.bkp-page__tools {
	position: fixed;
	right: clamp(12px, 2vw, 28px);
	bottom: clamp(12px, 2vw, 28px);
	z-index: 40;
	padding: 0;
}

.bkp-page__tools .bkp-container {
	max-width: none;
	padding: 0;
}

.bkp-page__tools .bkp-bookmark {
	box-shadow: var(--bkp-shadow-lift);
}

@media print {
	.bkp-page__tools {
		display: none;
	}
}

/* Belt and braces: any share bar the plugin still manages to print. */
.st-sticky-share-buttons,
.sharethis-inline-share-buttons,
#st-1,
[class*="st-sticky"] {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Card call to action

   Pushed to the foot of the card so a row lines up along it regardless of how
   much copy each item carries.
   -------------------------------------------------------------------------- */

.bkp-card__cta {
	margin: auto 0 0;
	padding-top: 0.9rem;
	color: var(--bkp-link);
	font-size: 0.95rem;
	font-weight: 700;
}

.bkp-card__cta-label {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.bkp-card__cta-label::after {
	content: "";
	width: 0.95em;
	height: 0.95em;
	background: currentColor;
	-webkit-mask: var(--bkp-arrow) center / contain no-repeat;
	mask: var(--bkp-arrow) center / contain no-repeat;
	transition: transform var(--bkp-duration) var(--bkp-ease);
}

.bkp-card:hover .bkp-card__cta-label::after {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Course finder

   Three choices across the top, the chosen one's panel below. The reveal is
   done with radio buttons and sibling selectors rather than script, so the
   page works before -- and without -- JavaScript. The radios are moved out of
   sight rather than hidden, which would take them out of the tab order and
   leave the labels unreachable by keyboard.
   -------------------------------------------------------------------------- */

.bkp-find__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.bkp-find__choices {
	display: grid;
	gap: var(--bkp-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.bkp-find__choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	height: 100%;
	padding: 28px 22px;
	border: 2px solid transparent;
	border-radius: var(--bkp-radius-card);
	background: var(--bkp-card);
	color: var(--bkp-ink);
	font-size: 0.95rem;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--bkp-duration) var(--bkp-ease),
		border-color var(--bkp-duration) var(--bkp-ease);
}

.bkp-find__choice:hover { background: var(--bkp-mint-hover); }

/*
 * One box for all three icons. The files are 47x42, 52x32 and 52x42, so left
 * to their own dimensions they sat at different heights and the labels below
 * them never lined up. A fixed square with the artwork centred inside fixes
 * both the size and the baseline.
 */
.bkp-find__choice-icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
}

.bkp-find__choice-icon svg,
.bkp-find__choice-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * The artwork's own outline is stripped on the way in, so this is the only
 * colour it has. Ink rather than the accent green: on a mint card the green
 * icon all but disappeared, and the whole point of the icon is to be seen
 * before the label is read.
 */
.bkp-find__choice-icon svg [fill] { fill: var(--bkp-ink); }

/*
 * The chosen option and its panel. :focus-visible is carried through to the
 * label because the radio itself is off-screen, so a keyboard user would
 * otherwise have no idea where they are.
 */
.bkp-find__radio[value="0"]:checked ~ .bkp-find__choices .bkp-find__choice:nth-child(1),
.bkp-find__radio[value="1"]:checked ~ .bkp-find__choices .bkp-find__choice:nth-child(2),
.bkp-find__radio[value="2"]:checked ~ .bkp-find__choices .bkp-find__choice:nth-child(3),
.bkp-find__radio[value="3"]:checked ~ .bkp-find__choices .bkp-find__choice:nth-child(4),
.bkp-find__radio[value="4"]:checked ~ .bkp-find__choices .bkp-find__choice:nth-child(5) {
	border-color: var(--bkp-link);
	background: var(--bkp-mint);
}

.bkp-find__radio:focus-visible ~ .bkp-find__choices .bkp-find__choice {
	outline: 2px solid var(--bkp-link);
	outline-offset: 2px;
}

.bkp-find__panel { display: none; }

.bkp-find__radio[value="0"]:checked ~ .bkp-find__panels [data-path="0"],
.bkp-find__radio[value="1"]:checked ~ .bkp-find__panels [data-path="1"],
.bkp-find__radio[value="2"]:checked ~ .bkp-find__panels [data-path="2"],
.bkp-find__radio[value="3"]:checked ~ .bkp-find__panels [data-path="3"],
.bkp-find__radio[value="4"]:checked ~ .bkp-find__panels [data-path="4"] {
	display: block;
}

.bkp-find__panel {
	margin-top: var(--bkp-gap);
	padding: 32px;
	border-radius: var(--bkp-radius-card);
	background: var(--bkp-card);
}

.bkp-find__step { margin: 0; padding: 0; border: 0; }
.bkp-find__step + .bkp-find__step { margin-top: 2rem; }

/*
 * One step at a time, but only once the script has claimed the form. Until
 * then both are visible, which is a working form rather than a dead end.
 */
.bkp-find__form[data-bkp-enhanced] .bkp-find__panel[data-bkp-at="1"] [data-bkp-step="2"],
.bkp-find__form[data-bkp-enhanced] .bkp-find__panel[data-bkp-at="2"] [data-bkp-step="1"] {
	display: none;
}

.bkp-find__form[data-bkp-enhanced] .bkp-find__step + .bkp-find__step { margin-top: 0; }

/* The answer to the step above, with the way back to it. */
.bkp-find__chosen {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
	font-weight: 700;
}

.bkp-find__change {
	padding: 0;
	border: 0;
	background: none;
	color: var(--bkp-link);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.bkp-find__change:hover,
.bkp-find__change:focus-visible { color: var(--bkp-link-hover); }

.bkp-find__step-title {
	display: block;
	margin-bottom: 1rem;
	padding: 0;
	font-family: var(--bkp-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	text-align: center;
}

.bkp-find__audiences {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.bkp-find__audience {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	height: 100%;
	padding: 18px 20px;
	border: 2px solid var(--bkp-rule);
	border-radius: var(--bkp-radius-thumb);
	background: #fff;
	text-align: center;
	cursor: pointer;
	transition: border-color var(--bkp-duration) var(--bkp-ease),
		background-color var(--bkp-duration) var(--bkp-ease);
}

.bkp-find__audience:hover { border-color: var(--bkp-link); }

.bkp-find__radio:checked + .bkp-find__audience {
	border-color: var(--bkp-link);
	background: var(--bkp-mint);
}

.bkp-find__radio:focus-visible + .bkp-find__audience {
	outline: 2px solid var(--bkp-link);
	outline-offset: 2px;
}

.bkp-find__audience-title { font-weight: 700; }
.bkp-find__audience-text { font-size: 0.88rem; color: #4a4742; }

.bkp-find__search { max-width: 34rem; margin-inline: auto; }

.bkp-find__search-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.bkp-find__search-row input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.8rem 1rem;
	border: 1px solid var(--bkp-rule);
	border-radius: var(--bkp-radius-pill);
	background: #fff;
	font: inherit;
	color: var(--bkp-ink);
}

.bkp-find__search-row input:focus-visible {
	outline: 2px solid var(--bkp-link);
	outline-offset: 1px;
}

/*
 * An answer panel is a short statement, not body copy, so it reads as a
 * centred block. The results below it are a list to work through and stay
 * left-aligned.
 */
.bkp-find__answer {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.bkp-find__answer-title {
	margin: 0 0 1rem;
	font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem);
	font-weight: 700;
	line-height: 1.25;
}

.bkp-find__answer .bkp-prose { font-size: 1.02rem; }
.bkp-find__answer .bkp-prose > *:last-child { margin-bottom: 0; }

/* Results ----------------------------------------------------------------- */

.bkp-find__results {
	margin-top: 56px;
	padding: 48px 0;
	background: var(--bkp-tint);
	/* The header is sticky, so leave room for it when scrolled to. */
	scroll-margin-top: 90px;
}

.bkp-find__results:focus { outline: none; }

.bkp-find__results .bkp-lede { text-align: left; }

.bkp-find__postcode {
	margin: 0 0 1.25rem;
	font-size: 1.6rem;
	text-transform: uppercase;
}

/*
 * Providers beside the explainer on a wide screen, stacked below it on a
 * narrow one. The explainer sticks so it stays readable next to a long list.
 */
.bkp-find__layout {
	display: grid;
	gap: var(--bkp-gap);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.bkp-find__layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

	.bkp-find__explainer-inner {
		position: sticky;
		top: 110px;
	}
}

.bkp-find__providers { display: grid; gap: 16px; align-content: start; }

.bkp-find__provider { border: 1px solid #dfdfdf; }

.bkp-find__provider-label {
	margin: 1.1rem 0 0.4rem;
	font-size: 0.85rem;
	font-weight: 700;
}

.bkp-find__ticks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.92rem;
}

.bkp-find__ticks li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.bkp-find__ticks li::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	flex: none;
	border-radius: 50%;
	background: var(--bkp-accent) var(--bkp-tick) center / 0.6em no-repeat;
}

.bkp-find__provider-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 1.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--bkp-rule);
}

.bkp-find__explainer-inner {
	overflow: hidden;
	border: 1px solid #dfdfdf;
	border-radius: var(--bkp-radius-card);
	background: #fff;
}

.bkp-find__explainer-image {
	display: block;
	width: 100%;
	height: auto;
}

.bkp-find__explainer-title {
	margin: 1.75rem 0 0.5rem;
	padding-inline: 24px;
	font-size: 1.2rem;
	text-align: center;
}

.bkp-find__levels { padding: 0 24px; }
.bkp-find__levels .bkp-accordion__panel { text-align: left; }

.bkp-find__level-name {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.bkp-find__level-icon {
	width: 28px;
	height: auto;
}

.bkp-find__explainer-action {
	margin: 1.5rem 0 0;
	padding: 0 24px 24px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Not found

   The shop's treatment: one centred column, the apology said plainly, then a
   search and the routes back in. The section tiles below take the pastel
   treatment the dashboard uses, so a visitor who lands here sees the same way
   in they would have seen on the dashboard itself.
   -------------------------------------------------------------------------- */

.bkp-404 { text-align: center; }

.bkp-404__code {
	display: inline-block;
	margin: 0 0 1.25rem;
	background: var(--bkp-peach);
	color: var(--bkp-ink);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bkp-404__title {
	margin: 0 0 1rem;
	font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
	line-height: 1.12;
}

.bkp-404__standfirst {
	max-width: 30rem;
	margin: 0 auto 2rem;
	color: var(--bkp-ink-muted);
}

/* The search sits at a readable width rather than spanning the container. */
.bkp-404__search {
	max-width: 30rem;
	margin: 0 auto 1.5rem;
}

.bkp-404__search .bkp-search { width: 100%; }

.bkp-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* The rule above the sections, as on the shop. */
.bkp-404__sections {
	margin-top: 56px;
	padding-top: 48px;
	border-top: 1px solid var(--bkp-rule);
}

.bkp-404__sections-title {
	margin: 0 0 1.75rem;
	font-size: 1.4rem;
}

/*
 * auto-fit with a smaller floor, so the dashboard's three sections sit on one
 * row rather than leaving a lone tile stranded underneath a pair. The site
 * grid's own floor is tuned for cards carrying an image; these hold a label.
 */
.bkp-404__sections .bkp-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

/*
 * Tiles here are shorter than a wayfinding tile on a landing page -- there is
 * no icon and the description is one line -- so they centre their content
 * rather than sitting top-aligned in a tall box.
 */
.bkp-404 .bkp-tile {
	justify-content: center;
	min-height: 132px;
	padding: 24px 20px;
}

.bkp-404 .bkp-tile__title { font-size: 1.05rem; }
.bkp-404 .bkp-tile__text { font-weight: 400; }

/* --------------------------------------------------------------------------
   Gallery and lightbox

   WordPress lays a gallery out with flex and sizes each figure itself, which
   fought the grid here and left a scatter of small thumbnails with wide gaps.
   The children are reset to fill their grid cell, so every photograph gets the
   same footprint whatever its aspect ratio.
   -------------------------------------------------------------------------- */

.wp-block-gallery.has-nested-images {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

/*
 * The doubled `:not(#...)` is deliberate, not a typo.
 *
 * Core sizes gallery figures with
 * `figure.wp-block-image:not(#individual-image) { width: calc(50% - ...) }`,
 * where the `:not()` carries an id's weight purely to win the cascade. Its
 * stylesheet is also printed after the theme's, so an equally specific rule
 * here loses on source order and the figures keep their flex widths -- which
 * is what left the thumbnails small and scattered inside the grid. One more
 * id-weighted `:not()` clears it without resorting to !important.
 */
.wp-block-gallery.has-nested-images > figure.wp-block-image:not(#individual-image):not(#gallery-figure) {
	width: 100%;
	max-width: none;
	flex: none;
	margin: 0;
	overflow: hidden;
	border-radius: var(--bkp-radius-thumb);
}

.wp-block-gallery.has-nested-images > figure.wp-block-image:not(#individual-image):not(#gallery-figure) > img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.bkp-lightbox-thumb {
	cursor: zoom-in;
	transition: transform var(--bkp-duration) var(--bkp-ease);
}

.wp-block-image:hover .bkp-lightbox-thumb { transform: scale(1.04); }

.bkp-lightbox-thumb:focus-visible {
	outline: 3px solid var(--bkp-link);
	outline-offset: 2px;
}

/* The dialog ------------------------------------------------------------- */

/*
 * Above the admin bar, which core pins at 99999. At a lower z-index the bar sat
 * over the top of the dialog and swallowed the click on the close button --
 * the button was there and working, it just never received the event.
 */
.bkp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: grid;
	place-items: center;
	padding: clamp(12px, 3vw, 40px);
}

.bkp-lightbox-open { overflow: hidden; }

.bkp-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(24, 23, 21, 0.9);
}

/*
 * The panel sits above the backdrop and stacks: the stage, then the caption and
 * counter. z-index matters -- without it the backdrop covers the close button
 * and swallows the click meant for it.
 */
.bkp-lightbox__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	max-width: min(1120px, 100%);
}

.bkp-lightbox__stage {
	display: flex;
	align-items: center;
	gap: clamp(8px, 2vw, 20px);
	width: 100%;
	min-height: 0;
}

.bkp-lightbox__figure {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.bkp-lightbox__image {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: min(76vh, 820px);
	margin-inline: auto;
	border-radius: var(--bkp-radius-card);
	background: #1a1917;
	object-fit: contain;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.bkp-lightbox__caption,
.bkp-lightbox__counter {
	margin: 0;
	max-width: 60ch;
	color: #fff;
	font-size: 0.9rem;
	text-align: center;
}

.bkp-lightbox__counter {
	opacity: 0.66;
	font-variant-numeric: tabular-nums;
}

.bkp-lightbox__close,
.bkp-lightbox__nav {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: var(--bkp-radius-pill);
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--bkp-duration) var(--bkp-ease);
}

.bkp-lightbox__close:hover,
.bkp-lightbox__nav:hover { background: rgba(255, 255, 255, 0.34); }

.bkp-lightbox__close:focus-visible,
.bkp-lightbox__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Out of the stage row, clear of the photograph, and above everything. */
.bkp-lightbox__close {
	position: fixed;
	top: clamp(12px, 3vw, 28px);
	right: clamp(12px, 3vw, 28px);
	z-index: 2;
	font-size: 2rem;
}

@media (max-width: 640px) {
	.bkp-lightbox__nav { width: 40px; height: 40px; }
	.bkp-lightbox__image { max-height: 62vh; }
}

/* The breadcrumb now sits inside the hero, under the title it describes. */
.bkp-hero__breadcrumb {
	margin-top: 1.25rem;
	font-size: 0.9rem;
}

.bkp-hero__breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bkp-hero__breadcrumb li + li::before {
	content: "/";
	margin-right: 0.5rem;
	opacity: 0.5;
}

/* The standalone strip is gone on hero pages, so it needs no top rule here. */
.bkp-hero__breadcrumb a { color: inherit; }