/* =========================================================
   Aobso — master theme stylesheet.
   Edit this file. The bump_version.sh script copies it to
   the cache-busted theme-NNNN.css that's actually served.
   ========================================================= */

:root {
	/* Brand — sampled from AoBSOLogos.webp */
	--red:     #CC2028;
	--navy:    #1D1957;
	--navy-deep: #0F1452; /* header/nav-bar/hero chrome — matches live site's Header--bottom bg exactly */
	--link:    rgba(64,143,226,.83); /* general body/prose link colour — matches live site */
	--ink:     #1c1c1c;
	--muted:   #5c5c5c;
	--line:    #e3e3e6;
	--cream:   #f7f6f3;
	--white:   #ffffff;

	/* Adobe Fonts kit https://use.typekit.net/rpx0mtc.css */
	--display: 'futura-pt', Helvetica, Arial, sans-serif;
	--sans:    'proxima-nova', Helvetica, Arial, sans-serif;

	/* The live site runs full-bleed (Squarespace "full" site-width option) —
	   content spans edge to edge with only a small fixed gutter, not a
	   centered ~1200px column. --max is a generous sanity cap for very wide
	   monitors only; on any realistic viewport it never actually constrains
	   anything, matching the real site's measured behaviour. */
	--gutter:  clamp(16px, 3vw, 24px);
	--max:     1900px;
	--nav-h:   72px;
	--nav-bar-h: 62px;
	--radius:  8px;
}

/* Resets */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { font-weight: bold; }
h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 700;
	color: var(--navy);
	line-height: 1.15;
	margin: 0 0 .5em;
}
/* Matches the live site's measured type system. h1 is fixed at 85px on
   desktop (the live site's actual computed size) but scales down below
   that via clamp so it doesn't overflow on phones/tablets — the live
   site likely has its own mobile override that wasn't in the spec given. */
h1 {
	text-transform: none;
	letter-spacing: 0em;
	font-style: normal;
	font-size: clamp(34px, 6vw, 85px);
	line-height: 1em;
}
h2 {
	font-family: var(--sans);
	text-transform: none;
	letter-spacing: -.02em;
	font-style: normal;
	font-size: 36px;
	line-height: 1.3em;
	margin-top: 1.4em;
}
h3 { font-size: clamp(18px, 2vw, 22px); }
/* Client feedback: h2 (36px) reads too large on phones. */
@media (max-width: 600px) {
	h2 { font-size: 28px; }
}
p {
	margin: 0 0 1em;
	font-weight: 500;
	letter-spacing: .02em;
	font-size: 18px;
	line-height: 1.7em;
	font-style: normal;
	text-transform: none;
	color: #0f1552;
}

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

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--radius);
	background: var(--red);
	color: var(--white);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease;
}
.btn:hover { background: var(--navy); text-decoration: none; }

/* ===========================================================
   Header — two bars, matching the live site exactly:
   a white branding/search bar, then a full-bleed navy nav bar
   (dropdown on desktop, collapses to slide-down on mobile).
   =========================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
.site-header.is-scrolled .site-header__top { box-shadow: 0 2px 10px rgba(0,0,0,.06); }

/* --- top bar: white, logo + search, full width --- */
.site-header__top { background: var(--white); }
.site-header__top-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 12px var(--gutter);
	min-height: var(--nav-h);
}
.brand { display: flex; align-items: center; }
.brand__logo { height: 89px; width: auto; }
.brand__text { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--navy); }

.site-search {
	margin-left: auto;
	display: flex;
	align-items: stretch;
	height: 38px;
	border: 0;
	border-radius: 3px;
	overflow: hidden;
}
.site-search input[type="search"] {
	border: 0;
	background: var(--navy-deep);
	color: var(--white);
	padding: 0 10px;
	font-size: 13px;
	font-family: var(--sans);
	line-height: 1;
	width: 140px;
	height: 100%;
	box-sizing: border-box;
}
.site-search input[type="search"]::placeholder { color: rgba(255,255,255,.7); }
.site-search button {
	border: 0;
	background: var(--navy-deep);
	color: var(--white);
	padding: 0 10px;
	width: 38px;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.screen-reader-text { position: absolute; left: -9999px; }

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: none;
	border: 0;
	cursor: pointer;
	margin-left: 8px;
	flex: none;
}
.nav-toggle__bar { display: block; width: 100%; height: 2px; background: var(--navy); }

/* --- nav bar: full-bleed navy, all-caps, matches Header--bottom --- */
.site-header__nav-bar { background: var(--navy-deep); }
.site-header__nav-inner { padding: 0 var(--gutter); }

.primary-nav__list {
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	min-height: var(--nav-bar-h);
}
.primary-nav__list > .menu-item { position: relative; }
.primary-nav__list > .menu-item > a {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 12px;
	color: var(--white);
	text-transform: uppercase;
	font-family: var(--display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	white-space: nowrap;
}
.primary-nav__list > .menu-item > a:hover,
.primary-nav__list > .menu-item.is-active > a { color: rgba(255,255,255,.65); text-decoration: none; }
.primary-nav__list .chev { flex: none; }
.submenu-toggle { display: none; }

.sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: var(--white);
	border-radius: 0;
	box-shadow: 0 12px 28px rgba(0,0,0,.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease;
	z-index: 10;
}
.menu-item.has-children:hover > .sub-menu,
.menu-item.has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.sub-menu .menu-item a {
	display: block;
	padding: 9px 12px;
	color: #0e144e;
	text-transform: none;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: normal;
}
.sub-menu .menu-item a:hover { color: var(--red); text-decoration: none; }

/* This nav carries 13 top-level items with several dropdowns — collapse to
   the mobile slide-down well before a typical 5-7 item nav would need to. */
@media (max-width: 1400px) {
	.nav-toggle { display: flex; }
	/* NOTE: do not set display:none on .site-header__nav-bar here — #primaryNav
	   lives inside it, and a display:none ancestor hides the mobile slide-down
	   menu completely regardless of the max-height/position tricks below (this
	   was the "mobile menu doesn't work" bug: JS toggled .is-open correctly,
	   but the whole thing was inside a hidden parent). The bar itself collapses
	   to ~0 height on its own since its only child is position:absolute. */
	.site-header__nav-bar { background: none; }
	.primary-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--navy-deep);
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s ease;
	}
	.site-header__top { position: relative; }
	.primary-nav.is-open { max-height: calc(100vh - var(--nav-h)); overflow-y: auto; display: block; }
	.primary-nav__list { flex-direction: column; align-items: stretch; padding: 8px var(--gutter) 20px; gap: 0; min-height: 0; }
	.primary-nav__list > .menu-item { border-bottom: 1px solid rgba(255,255,255,.15); }
	.primary-nav__list > .menu-item > a { padding: 14px 4px; justify-content: space-between; }
	.menu-item.has-children > a .chev { display: none; }
	.menu-item.has-children { display: flex; flex-wrap: wrap; align-items: center; }
	.menu-item.has-children > a { flex: 1; }
	.submenu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: none;
		border: 0;
		cursor: pointer;
		color: var(--white);
	}
	.sub-menu {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: transparent;
		width: 100%;
		padding: 0 0 8px 16px;
	}
	.sub-menu .menu-item a { color: rgba(255,255,255,.75); }
	.sub-menu .menu-item a:hover { background: rgba(255,255,255,.08); color: var(--white); }
	.menu-item.has-children.is-open .sub-menu { display: block; }
}
/* On phones the full text input didn't fit comfortably next to the burger,
   so below 600px the search form collapses to a single blue icon button
   sitting right next to the nav-toggle; tapping it expands a small input in
   place (see the mobileSearchToggle script in theme.js) instead of hiding
   search entirely. The input drops down BELOW the icon (not sideways) —
   sliding it sideways had it expanding leftward under the logo, where it
   was easy to miss/overlap and read as "search doesn't work". */
@media (max-width: 600px) {
	.site-search {
		position: relative;
		height: 32px;
		border-radius: 0;
		/* The desktop pill design sets overflow:hidden to clip the input's
		   square corners inside the rounded container — but that also
		   clipped away the dropdown below it entirely on mobile, which is
		   the actual reason the search "didn't work" here. */
		overflow: visible;
	}
	.site-search input[type="search"] {
		position: absolute;
		top: calc(100% + 10px);
		right: 0;
		width: 200px;
		max-width: calc(100vw - 2 * var(--gutter));
		height: 40px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		pointer-events: none;
		background: var(--white);
		color: var(--ink);
		border: 1px solid var(--line);
		border-radius: 3px;
		padding: 0 12px;
		font-size: 14px;
		box-shadow: 0 8px 20px rgba(0,0,0,.15);
		transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
		z-index: 50;
	}
	.site-search.is-open input[type="search"] {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}
	.site-search button {
		background: none;
		color: var(--navy);
		width: 32px;
		height: 32px;
		padding: 0;
	}
	.nav-toggle { margin-left: 4px; }
	/* Client feedback: the mobile search/burger icons read as too thin —
	   match the bolder, more solid look of the live site's icon set. */
	.nav-toggle__bar { height: 3px; }
}
/* Client-supplied mobile-only logo override — the 89px desktop logo crowds
   the top bar on small phones next to the search icon + burger. */
@media (max-width: 600px) {
	.brand__logo {
		height: 50px;
		width: auto;
	}
}

/* ===========================================================
   Block: inner-hero
   =========================================================== */
.inner-hero {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--navy-deep) center/cover no-repeat;
	color: var(--white);
	padding: 40px 0 76px;
	min-height: var(--hero-h, 380px);
}
.inner-hero.has-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15,20,82,.25), rgba(15,20,82,.8));
	opacity: .1;
}
.inner-hero.no-bg { background: var(--navy-deep); }
.inner-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--max);
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.inner-hero h1 { color: var(--white); margin: 0; }
.inner-hero__box {
	margin: 16px 0 0;
	padding: 16px 20px;
	background: rgba(255,255,255,.12);
	border-left: 4px solid var(--red);
	max-width: 640px;
}
.inner-hero__box p { margin: 0 0 6px; font-style: italic; }
.inner-hero__box cite { font-size: 13px; opacity: .85; }

.inner-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	z-index: 2;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var(--white);
	cursor: pointer;
	animation: aobso-bounce 2s ease-in-out infinite;
}
@keyframes aobso-bounce {
	0%, 100% { transform: translate(-50%, 50%); }
	50% { transform: translate(-50%, calc(50% + 8px)); }
}
/* Client feedback: on mobile the inner-page banner rendered taller than
   the homepage's own photo-mosaic banner, which looks wrong — it should
   read as a smaller, secondary element. --hero-h (set inline per page from
   the banner_height ACF field, see inner-hero/render.php) is scaled down
   here rather than hardcoding one height, so every page's banner shrinks
   proportionally regardless of what height was set for desktop. Scoped to
   .inner-hero only — the homepage's .photo-mosaic banner is untouched. */
@media (max-width: 600px) {
	.inner-hero {
		min-height: calc(var(--hero-h, 380px) * 0.35);
		padding: 20px 0 28px;
	}
	.inner-hero__box { margin-top: 10px; padding: 12px 14px; }
}

/* ===========================================================
   Block: prose-block
   =========================================================== */
.prose-block { padding: 32px 0; }
.prose-block__inner { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.prose-block.is-narrow .prose-block__inner { max-width: 780px; }
/* Navy full-bleed promo panel — matches the live site's homepage
   "AoBSO Conference" style callout section above the footer. */
.prose-block.is-navy { background: var(--navy-deep); padding: 48px 0; }
.prose-block.is-navy .prose,
.prose-block.is-navy .prose h1,
.prose-block.is-navy .prose h2,
.prose-block.is-navy .prose h3,
.prose-block.is-navy .prose h4 { color: var(--white); }
.prose-block.is-navy .prose { color: rgba(255,255,255,.92); }
.prose-block.is-navy .prose strong { color: var(--white); }
/* The global `p { color: #0f1552 }` rule (dark navy-ish blue, tuned for a
   white background) directly targets <p> elements and beats the inherited
   rgba(255,255,255,.92) set on .prose above — inheritance always loses to
   any rule that matches the element itself. Without this, body copy (and
   list items) inside a navy prose-block render near-invisible dark-blue-on
   -navy text. Explicitly re-assert the light colour on the actual text
   elements, not just the wrapper. */
.prose-block.is-navy .prose p,
.prose-block.is-navy .prose li { color: rgba(255,255,255,.92); }
.prose-block.is-navy .btn { background: var(--red); }
.prose-block__inner.has-image {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
	max-width: var(--max);
}
.prose-block__inner.image-right { grid-template-columns: 1fr 1fr; }
.prose-block__inner.image-right .prose-block__figure { order: 2; }
.prose-block__figure img { border-radius: 0; }
.prose h2:first-child { margin-top: 0; }
.prose img { max-width: 100%; height: auto; border-radius: 0; margin: 8px 0 20px; display: block; }
.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0 24px;
	font-size: 16px;
}
.prose table th,
.prose table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}
.prose table th { color: var(--navy); font-family: var(--display); }
.prose-block.is-navy .prose table th,
.prose-block.is-navy .prose table td { border-bottom-color: rgba(255,255,255,.2); color: rgba(255,255,255,.92); }
@media (max-width: 600px) {
	.prose table, .prose table tbody, .prose table tr, .prose table td { display: block; width: 100%; }
	.prose table td { border-bottom: 0; padding: 4px 0; }
	.prose table tr { margin-bottom: 12px; }
}
.prose-block__ctas { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
@media (max-width: 780px) {
	.prose-block__inner.has-image { grid-template-columns: 1fr; }
	.prose-block__inner.image-right .prose-block__figure { order: 0; }
}

/* Split layout — narrow title column on the left, body in a wide column
   on the right. Matches the live site's "What is BSO?" / "AoBSO
   Membership" homepage sections (measured column ratio ~2:10). */
.prose-block__inner.is-split {
	display: grid;
	grid-template-columns: 2fr 10fr;
	gap: 40px;
	align-items: start;
}
.prose-block__col-title h2 { margin: 0; }
.prose-block.is-navy .prose-block__col-title h2 { color: var(--white); }
@media (max-width: 780px) {
	.prose-block__inner.is-split { grid-template-columns: 1fr; gap: 16px; }
}

/* Floating image gallery — a carousel that floats beside the body copy
   with text wrapping around it, matching the live site's inline
   gallery-block-with-float layout (Squarespace: sqs-col-6 span-6 float). */
.prose-block__inner.has-floating-gallery { display: flow-root; }
.prose-block__float-gallery {
	width: 48%;
	margin-bottom: 20px;
}
.prose-block__float-gallery--right { float: right; margin-left: 32px; }
.prose-block__float-gallery--left { float: left; margin-right: 32px; }
.prose-block__float-gallery .photo-mosaic__carousel {
	aspect-ratio: 4 / 3;
	background: var(--navy-deep);
}
.prose-block__float-gallery .photo-mosaic__arrow { width: 36px; height: 52px; font-size: 22px; }
.prose-block__float-gallery-thumbs {
	display: flex;
	gap: 6px;
	margin-top: 8px;
	overflow-x: auto;
}
.prose-block__float-gallery-thumbs .photo-mosaic__dot {
	width: 56px;
	height: 40px;
	border-radius: 0;
	background-size: cover;
	background-position: center;
	opacity: .55;
	flex: none;
}
.prose-block__float-gallery-thumbs .photo-mosaic__dot.is-active { opacity: 1; }
@media (max-width: 780px) {
	.prose-block__float-gallery--right,
	.prose-block__float-gallery--left { float: none; width: 100%; margin: 0 0 20px; }
}

/* Single-photo "float gallery" — used as a floated portrait/headshot next
   to biography copy (Patron/President/Vice-President/Senior Adviser style
   pages) rather than a real multi-photo carousel. Smaller and square,
   matching the live site instead of the full 48%/4:3 carousel default. */
.prose-block__float-gallery.is-single-photo { width: 38%; }
.prose-block__float-gallery.is-single-photo .photo-mosaic__carousel { aspect-ratio: 1 / 1; }

/* Generic in-body two-column layout — for prose content that was laid
   out in genuine side-by-side columns on the live site (not a floated
   image), e.g. two independent text columns, or an image beside text
   as its own mid-body row. */
.prose-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin: 0 0 32px;
	align-items: start;
}
.prose-two-col > img { width: 100%; height: auto; display: block; border-radius: 0; }
@media (max-width: 780px) {
	.prose-two-col { grid-template-columns: 1fr; gap: 0; }
}

/* "split" variant — a heading in the left column and its matching body
   copy in the right column, with a divider line above each row. Matches
   the live site's benefit-list style layout (heading | text, repeated). */
/* Bottom padding (not just the default paragraph margin) so the last line of
   copy in each row gets real breathing room before the *next* row's
   border-top divider — previously a `p:last-child { margin-bottom: 0 }`
   override zeroed this on every row (not just the page's true last row),
   so text visually ran right up against the following divider line. */
.prose-two-col--split { border-top: 1px solid var(--line); padding: 28px 0 24px; margin-bottom: 0; }
.prose-two-col--split > div:first-child h2 { margin-top: 0; }
@media (max-width: 780px) {
	.prose-two-col--split { padding: 20px 0 18px; }
}

/* ===========================================================
   Block: photo-mosaic — full-width auto-playing crossfade
   carousel with prev/next arrows + dots, matching the live
   site's homepage image gallery (.Index-gallery).
   =========================================================== */
.photo-mosaic { padding: 0; }
.photo-mosaic h2 { max-width: var(--max); margin: 0 auto 20px; padding-inline: var(--gutter); padding-top: 32px; }
.photo-mosaic__carousel {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 7;
	background: var(--navy-deep);
}
.photo-mosaic__track { position: relative; width: 100%; height: 100%; }
.photo-mosaic__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity .9s ease;
}
.photo-mosaic__slide.is-active { opacity: 1; }
.photo-mosaic__slide img { width: 100%; height: 100%; object-fit: cover; }
.photo-mosaic__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15,20,82,.35);
	color: var(--white);
	border: 0;
	cursor: pointer;
	font-size: 32px;
	line-height: 1;
	transition: background-color .2s ease;
	z-index: 2;
}
.photo-mosaic__arrow:hover { background: rgba(15,20,82,.6); }
.photo-mosaic__arrow--prev { left: 0; }
.photo-mosaic__arrow--next { right: 0; }
.photo-mosaic__dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 2;
}
.photo-mosaic__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.5);
	cursor: pointer;
}
.photo-mosaic__dot.is-active { background: var(--white); }
@media (max-width: 780px) {
	.photo-mosaic__carousel { aspect-ratio: 4 / 5; }
	.photo-mosaic__arrow { width: 40px; height: 60px; font-size: 24px; }
}

/* ===========================================================
   Block: profile-cards
   =========================================================== */
.profile-cards { padding: 32px 0; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.profile-cards__intro { margin-bottom: 24px; }
.profile-cards__grid { display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); }
.profile-cards.layout-grid-2 .profile-cards__grid { grid-template-columns: repeat(2, 1fr); }
.profile-cards.layout-stacked .profile-cards__grid { grid-template-columns: 1fr; max-width: 780px; }
.profile-card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px;
	background: var(--white);
}
.profile-card__photo { border-radius: 0; overflow: hidden; margin-bottom: 14px; aspect-ratio: 1; }
.profile-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-card__role { color: var(--red); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.profile-card__bio { font-size: 15px; color: var(--muted); }
.profile-card__link { font-size: 14px; margin: 4px 0; }
@media (max-width: 900px) {
	.profile-cards__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.profile-cards__grid { grid-template-columns: 1fr; }
}

/* "media-row" layout — circular photo to the left of the name/role text,
   two per row. Matches the live site's Executive/Patron/President-style
   people listings (photo + stacked text, not a boxed card). */
.profile-cards.layout-media-row .profile-cards__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 48px; }
.profile-cards.layout-media-row .profile-card {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	border: 0;
	padding: 0;
	background: transparent;
}
.profile-cards.layout-media-row .profile-card__photo {
	width: 264px;
	height: 264px;
	flex: none;
	border-radius: 50%;
	margin-bottom: 0;
	filter: grayscale(1);
}
.profile-cards.layout-media-row .profile-card__body h3 { margin-bottom: 4px; font-size: 22px; color: var(--red); font-weight: 700; }
.profile-cards.layout-media-row .profile-card__role { text-transform: none; font-size: 18px; letter-spacing: 0; margin-bottom: 2px; color: var(--navy-deep); font-weight: 400; }
.profile-cards.layout-media-row .profile-card__bio { font-size: 18px; color: var(--navy-deep); }
/* Email/website links reuse the sitewide .profile-card__link (14px, set for
   the boxed grid-3/grid-2 card layouts) — in this media-row layout that read
   noticeably smaller than the job-title line right above it. Match the role
   line's size so the two read as one consistent block of contact info. */
.profile-cards.layout-media-row .profile-card__link { font-size: 18px; }
@media (max-width: 900px) {
	.profile-cards.layout-media-row .profile-cards__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.profile-cards.layout-media-row .profile-card { flex-direction: column; align-items: flex-start; }
}

/* "supporters" variant — used for the smaller trailing row of names (e.g.
   "The AoBSO Executive is supported by:") that sits below the main
   media-row grid: keeps the original smaller circular photo and lays
   the entries out three-across on one line rather than two. Applied via
   an extra block className alongside layout-media-row. */
.profile-cards.layout-media-row.profile-cards--supporters .profile-cards__grid { grid-template-columns: repeat(3, 1fr); gap: 28px 32px; }
.profile-cards.layout-media-row.profile-cards--supporters .profile-card__photo { width: 132px; height: 132px; }
@media (max-width: 780px) {
	.profile-cards.layout-media-row.profile-cards--supporters .profile-cards__grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   Contact-split — a navy intro box on the left, a form on the right.
   Matches the live site's Contact Us / Register Interest layout. Built as
   two plain wrapper divs around an existing prose-block + wpforms block
   (rather than a new ACF field) since it's only needed on two pages.
   =========================================================== */
.contact-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	max-width: var(--max);
	margin: 0 auto;
}
.contact-split__box { background: var(--navy-deep); margin: 80px 0 0 var(--gutter); }
.contact-split__box .prose-block { padding: 0; width: 100%; }
.contact-split__box .prose-block__inner { padding: 48px var(--gutter); max-width: none; }
.contact-split__box .prose h1,
.contact-split__box .prose h2,
.contact-split__box .prose h3 { color: var(--white); }
.contact-split__box .prose p,
.contact-split__box .prose li { color: rgba(255,255,255,.92); }
.contact-split__form { padding: 48px var(--gutter); }
@media (max-width: 780px) {
	.contact-split { grid-template-columns: 1fr; }
	.contact-split__box .prose-block__inner,
	.contact-split__form { padding: 32px var(--gutter); }
}

/* ===========================================================
   Footer — matches the live site: white address/social row,
   then a bordered badge bar (logo + DfE/BSO accreditation),
   then a centered copyright line. No boxed column — full width
   with the standard site gutter, same as the rest of the site.
   =========================================================== */
.footer { background: var(--white); color: var(--ink); margin-top: 0; }
.footer__top {
	padding: 32px var(--gutter);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: start;
}
/* Every line of the live site's footer (name, address, reg/VAT, copyright)
   renders as one single navy — measured on the live page at rgb(14,20,78),
   i.e. --navy-deep, not the separate lighter --blue this theme used to
   define here. There's no basis on the live site for a second footer
   colour, so the whole footer is kept on --navy-deep for consistency. */
.footer__name { color: var(--navy-deep); font-weight: 700; font-family: var(--display); font-size: 18px; margin-bottom: 8px; }
.footer__brand p { margin: 0 0 4px; font-size: 16px; color: var(--navy-deep); }
/* Scoped deliberately to brand/list text only — NOT .footer__social-link,
   so the social icons' own (color: white) rule isn't beaten on specificity
   by a broader ".footer__top a" selector. */
.footer__brand a, .footer__list a { color: var(--navy-deep); }
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer__list a { font-size: 16px; }
.footer__social { display: flex; gap: 10px; align-self: start; }
.footer__social-link {
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 4px;
	background: var(--ink);
	color: var(--white);
}
.footer__social-link:hover { background: var(--red); }
.footer__badge-bar { padding: 24px var(--gutter); display: flex; justify-content: center; }
.footer__badge-bar img { width: auto; margin: 0; }
.footer__bar {
	padding: 18px var(--gutter) 32px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--navy-deep);
	text-align: center;
}
/* Direct rule needed (not just relying on inheritance from .footer__bar)
   because the global "p { color: #0f1552 }" body-text rule directly
   matches this <p> too, and a direct match always wins over an inherited
   value regardless of the ancestor selector's specificity — without this,
   the copyright line silently fell back to the body-text colour instead
   of matching the "Managed by Innermedia" link right next to it. */
.footer__bar p { color: var(--navy-deep); }
.footer__bar a { color: var(--navy-deep); }
.footer__bar-sep { margin: 0 6px; opacity: .5; }
@media (max-width: 780px) {
	.footer__top { grid-template-columns: 1fr; }
	.footer__brand { text-align: center; }
	.footer__social { justify-content: center; }
	.footer__list { align-items: center; }
}

/* Floating back-to-top button — fixed bottom-right, fades in once the
   page has scrolled a bit. Replaces the old inline footer-row button,
   which was too subtle to notice. */
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--navy-deep);
	color: var(--white);
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
	z-index: 90;
	box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--navy); }
/* Client feedback: on mobile this sits on top of the footer copyright
   text (fixed bottom-right collides with the centered footer bar at
   narrow widths) and the live site doesn't have a back-to-top button
   at all — hide it on phones for now rather than repositioning it. */
@media (max-width: 600px) {
	.back-to-top { display: none; }
}

/* ===========================================================
   WPForms — tighten field/label spacing (the modern renderer's
   default --wpforms-field-size-input-spacing drives both the
   label-to-field gap and the gap between fields) and match the
   live site's solid dark, uppercase, letter-spaced submit button.
   Used on Contact Us and Register Interest.
   =========================================================== */
.wpforms-container {
	--wpforms-field-size-input-spacing: 8px;
	--wpforms-field-size-sublabel-spacing: 4px;
}
/* !important throughout: WPForms' modern renderer injects a per-form,
   ID-scoped <style> block (#wpforms-form-NNN .wpforms-submit { background-
   color: var(--wpforms-button-background-color); ... }) whose ID selector
   outweighs a plain class selector here regardless of load order. */
.wpforms-container .wpforms-submit {
	background: var(--ink) !important;
	border-color: var(--ink) !important;
	color: var(--white) !important;
	font-family: var(--display) !important;
	text-transform: uppercase !important;
	letter-spacing: .1em !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	border-radius: 0 !important;
	padding: 16px 44px !important;
	height: auto !important;
}
.wpforms-container .wpforms-submit:hover,
.wpforms-container .wpforms-submit:focus {
	background: var(--navy-deep) !important;
	border-color: var(--navy-deep) !important;
}

/* ===========================================================
   404 page (404.php) — no inner-hero on this template, so the
   title sat flush against the header with no breathing room.
   =========================================================== */
/* padding-top/bottom only — NOT the "padding: 80px 0 100px" shorthand,
   which sets left/right to 0 and silently cancels the .container class's
   padding-inline gutter sitting on this same element (found when the
   content still ran to the screen edge despite the class being applied). */
.error-404 { padding-top: 80px; padding-bottom: 100px; }
.error-404 h1 { margin: 0 0 .4em; }

/* ===========================================================
   Search results (search.php) — falls back through the same
   .container gutter/max-width as the rest of the site instead
   of the WP default of running the results flush to the edge.
   =========================================================== */
/* Same padding-top/bottom-only note as .error-404 above — a shorthand
   "0" for left/right here would cancel .container's gutter again.
   Wrapper is deliberately named .search-page rather than .search-results:
   WordPress's body_class() adds a literal "search-results" class to <body>
   on the search template whenever there are hits (and "search-no-results"
   when there aren't). A ".search-results" rule here would also match
   <body> itself, silently pushing the WHOLE page (header through footer)
   down 60px and adding 100px of blank space below the footer. Found by
   checking getComputedStyle on body, not just the section, after the
   .container gutter fix looked right in a screenshot but the underlying
   selector still needed auditing for name collisions with WP's own classes. */
.search-page { padding-top: 60px; padding-bottom: 100px; }
.search-results__title { margin: 0 0 .6em; }
.search-results__title span { color: var(--red); }
.search-results__count { color: var(--muted); margin: 0 0 2.5em; font-size: 16px; }
.search-result { padding: 24px 0; border-bottom: 1px solid var(--line); }
.search-result:first-child { padding-top: 0; }
.search-result h2 { margin: 0 0 .3em; font-size: 24px; }
.search-result h2 a { color: var(--navy); }
.search-result h2 a:hover { color: var(--red); }
.search-results__none { padding: 20px 0; }
.search-results__pagination { margin-top: 40px; display: flex; gap: 16px; }
.search-results__pagination a { color: var(--red); font-weight: 600; }

/* Add brand-specific block styles below this line. */