/*
Theme Name:   SebastianOne
Theme URI:    https://bfiwm.film
Author:       Rural Media
Author URI:   https://www.ruralmedia.co.uk
Description:  Rural Media's block theme, forked from Automattic's Course (1.3.9)
              and adapted to the Rural Media brand guide. Sensei LMS templates
              and block styles are retained from the original; typography,
              colour, scale and case follow the brand.
Version:      1.68.0
Requires at least: 6.3
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sebastianone
Tags:         education, block-patterns, full-site-editing
*/

/* ---------------------------------------------------------------------------
 * Site-wide focus colour.
 *
 * --bfiwm-ff-gold was originally declared on ".bfiwm-formpanel, .fluentform" because it
 * started life as a forms token. It has since been used for focus rings outside that scope,
 * on .bfiwm-route__action and on the footer social icons, where the variable does not resolve.
 * An unresolvable var() makes the whole declaration invalid, so those two focus rings were
 * quietly rendering as nothing at all.
 *
 * Hoisted here so it resolves everywhere. The scoped declaration further down is left alone:
 * it now simply restates the same value, and removing it would be a change with no benefit.
 * ------------------------------------------------------------------------ */
:root {
	--bfiwm-ff-gold: var(--wp--preset--color--primary, #E1B15D);
}

/*
 * Font smoothing
 */
 body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/**
 * Currently table styles are only available with 'wp-block-styles' theme support (block css) thus the following needs to be included
 * since 'wp-block-styles' aren't used for this theme.
 */
.wp-block-table thead {
	border-bottom: 3px solid;
}

.wp-block-table tfoot {
	border-top: 3px solid;
}

.wp-block-table td,
.wp-block-table th {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid;
	word-break: normal;
}

.wp-block-table figcaption {
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

 /* Background and text color, padding around for navbar, only for mobile view. Desktop view has separate color */
 .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	padding: 1.5rem;
 }

 /* Distance between navigation menu items in mobile view, theme.json blockgap not working for navigation block */
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	gap: var(--wp--custom--nav-mobile-gap);
 }

 /* Color of the cross button in navbar mobile view */
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--background);
 }

/* line height of the menu items in mobile view, to match design */
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container a.wp-block-navigation-item__content {
	line-height: 90%;
 }

 /* The navigation item that looks like a button in the design has a different front size and the button is rounded */
 .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation-link.is-style-navigation-link-button a {
	font-size: var(--wp--custom--typography--font-sizes--button);
	border-radius: 8px;
}

/* Background & text color, padding and border of the navbar button */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-link.is-style-navigation-link-button a {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	padding: 15.5px 32px;
	border: 1px solid var(--wp--preset--color--foreground);
}

/* Navbar button color change on hover */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-link.is-style-navigation-link-button a:hover {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

/* Set the font size of the menu items in mobile view, except for the button menu item */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link:not(.is-style-navigation-link-button) a {
	font-size: var(--wp--preset--font-size--xx-large);
}

/* Design for the navbar button item, in case of mobile view. Has extra margin on top as per design */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link.is-style-navigation-link-button a {
	color: var(--wp--preset--color--foreground);
	background-color: var(--wp--preset--color--background);
	width: calc(100vw - 3rem);
	text-align: center;
	padding: 17.5px 0px;
	margin-top: calc(7.5rem - var(--wp--custom--nav-mobile-gap));
}

/* Separate hover behavior for navbar button, applicable when in mobile view, as the colors are separate for mobile view */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link.is-style-navigation-link-button a:hover {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

header {
	background-color: transparent;
}


.wp-site-blocks header ~ main {
	margin-block-start: 0;
}

header .navigation-wrapper {
	min-height: 116px;
}

h1, h2, h3, h4, h5, h6 {
	text-transform: revert;
} 
/*
 * Comments
 */
.wp-block-comments .wp-block-post-comments-form:not(last-child) {
	margin-bottom: var(--wp--custom--comment-gap);
}

.comment-reply-title a {
	font-size: var(--wp--preset--font-size--x-small);
}

.wp-block-comments .wp-block-comments-pagination {
	margin-top: calc( var(--wp--custom--comment-gap) / 2 * -1 );
	margin-bottom: var(--wp--custom--comment-gap);
}

.wp-block-comments hr,
.wp-block-comments .wp-block-comments-title {
	margin-bottom: clamp(2.5rem, 2.167rem + 1.111vw, 3rem);
}

.wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"] {
	display: none;
}

.wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"] + label:before {
	border: 1px solid var(--wp--preset--color--foreground);
	content: "\00a0";
	display: inline-block;
	font-size: 1rem;
	height: 16px;
	padding: 0;
	vertical-align: center;
	width: 16px;
	border-radius: 4px;
	margin-right: var(--wp--custom--comment-gap-small);
}

.wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"]:checked + label:before {
	color: green;
	content: "\2713";
	text-align: center;
}


.wp-block-post-comments-form h3.comment-reply-title {
	margin-bottom: var(--wp--preset--spacing--60);
}

.wp-block-post-comments-form .comment-form-comment label {
	display: inline-block;
}

.wp-block-post-comments-form .comment-form-comment label,
.wp-block-post-comments-form .comment-form-author label,
.wp-block-post-comments-form .comment-form-url label,
.wp-block-post-comments-form .comment-form-email label
{
	margin-bottom: 5px;
}

.wp-block-post-comments-form form.comment-form .form-submit {
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-post-comments-form form.comment-form p input:not([type=submit]),
.wp-block-post-comments-form form.comment-form textarea {
	border: 1px solid var(--wp--preset--color--foreground);
	border-radius: 8px;
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--x-small);
	padding: 11px;
}

.wp-block-post-comments-form .comment-form-cookies-consent label {
	margin: auto 0;
}

.wp-block-post-comments-form .comment-form-cookies-consent {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.wp-block-post-comments-form .comment-form-cookies-consent input {
	transform: scale(1.3);
	background-color: transparent;
	accent-color: red;
}

.wp-block-post-comments-form .comment-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: var(--wp--custom--reply-column-gap);
	grid-row-gap: var(--wp--custom--comment-gap-medium);
}

@media screen and (max-width: 480px) {
	.wp-block-post-comments-form .comment-form {
		display: flex;
		flex-direction: column;
		gap: calc(var(--wp--preset--spacing--60) - var(--wp--preset--spacing--40));
	}
}

.wp-block-post-comments-form .comment-form p,
.wp-block-post-comments-form h3 {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-block-post-comments-form .comment-form .comment-notes {
	display: none;
}

.wp-block-post-comments-form .comment-form .comment-form-author {
	order: 1;
	grid-column: 1 / 3;
}

.wp-block-post-comments-form .comment-form .comment-form-email {
	order: 2;
	grid-column: 1 / 2;
}

.wp-block-post-comments-form .comment-form .comment-form-url {
	order: 3;
	grid-column: 2 / 3;
}

.wp-block-post-comments-form .comment-form .comment-form-comment {
	order: 4;
	grid-column: 1 / 3;
}

.wp-block-post-comments-form .comment-form .comment-form-cookies-consent {
	order: 5;
	grid-column: 1 / 3;
}

.wp-block-post-comments-form .comment-form .wp-block-button {
	order: 6;
	grid-column: 1 / 2;
}

.wp-block-comments .wp-block-comment-template .wp-block-comment-author-name {
	margin-bottom: var(--wp--custom--comment-gap-small);
}

.wp-block-comments .wp-block-comment-template .wp-block-comment-content p {
	margin-block-start: var(--wp--custom--comment-gap-medium);
	margin-block-end: var(--wp--custom--comment-gap-small);
}

.wp-block-comments .comment > .is-vertical > .wp-block-group {
	align-items: flex-start;
}

.wp-block-comments .comment > div > div > .is-vertical {
	gap: 0;
}

/*
 * Link styles
 */
a {
	text-decoration-thickness: .0625em !important;
	text-underline-offset: .15em
}

/*
 * Search styles
 */
.wp-block-search__input {
	background-color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--foreground);
	padding: 1.063rem;
}

/*
 * Search Results Styles
 */
.search .wp-block-post-template .wp-block-post {
	margin: 0;
}

.search .wp-block-post.course {
	border-bottom: 0;
	margin: 0;
	padding: 0;
}

/* Buttons */
.wp-block-button__link:focus {
	outline: var(--wp--preset--color--foreground) dashed;
	outline-offset: 1px;
}

/*
* Control the hover stylings of outline block style.
* Unnecessary once block styles are configurable via theme.json
*/
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):active {
	background-color: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--button-border-active);
	color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--button-border-hover);
	color: var(--wp--preset--color--secondary);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus {
	border-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--foreground);
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	background-color: transparent;
	border-color: currentcolor;
	border-width: 1px;
	color: currentcolor;
	text-decoration: none;
}

/*
 * Pagination styles
 */
.wp-block-query-pagination .wp-block-query-pagination-numbers > *:not(:last-child) {
	margin-right: clamp(1.44rem, 1.91vw + 0.97rem, 2.5rem);
}

.wp-block-query-pagination .page-numbers.current {
	text-decoration: underline;
}

/* Add border around author image in Post Author block */
.wp-block-post-author__avatar img {
	border: 1px solid var(--wp--preset--color--tertiary);
	border-radius: 4px;
}

/* Design for search box in 404 page template sidebar */
.course-search-sidebar button {
	padding: clamp(12px, calc(0.75rem + ((1vw - 4.8px) * 0.5556)), 16px);
	color: var(--wp--preset--color--tertiary);
	vertical-align: center;
}

.course-search-sidebar button svg {
	height: 32px;
	width: 32px;
	vertical-align: bottom;
}

.course-search-sidebar input.wp-block-search__input {
	line-height: 100%;
}

/* Newsletter */
.course-newsletter-gap {
	height: clamp(0rem, -3.975rem + 8.134vw, calc(114px - var(--wp--style--block-gap) * 2));
}

.course-newsletter-sign-up {
	font-family: var(--wp--preset--font-family--system);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.02em;
	line-height: 100%;
	text-decoration: underline;
}

@media screen and (min-width: 782px) {
	.course-newsletter-sidebar {
		position: sticky;
		top: 120px;
	}
}

/* Footer */
footer .wp-block-column .wp-block-spacer {
	height: 20px;
}

footer .wp-block-column a,
footer .wp-block-column p,
footer .wp-block-column h3 {
	white-space: nowrap;
}

@media screen and (max-width: 480px) {
	footer .wp-block-columns.course-footer-links-vertical-space {
		margin-bottom: 44px;
	}

	footer .wp-block-column, footer .wp-block-group.is-layout-flex {
		flex-direction: column;
		align-items: baseline;
		gap: 10px;
	}
}

footer.wp-block-template-part  {
	margin-block-start: 0;
}


/*
 * "Wide Width, No Title" page template
 */

/* Remove extra space from group blocks */
body.page-template-page-wide-width .wp-block-post-content .wp-block-group,
body.page-template-page-wide-width footer .wp-block-group {
	margin-block-end: 0;
}

/*
* Sensei-specific styles
*/
.wp-block-sensei-lms-course-overview a {
	text-decoration: underline;
}

.wp-block-sensei-lms-course-list .sensei-cta a:hover,
.wp-block-sensei-lms-course-list .sensei-cta a:focus {
	text-decoration: none;
}

/* The first 3 CSS selectors can be removed after allowing enough time (let's say 1 month)for sites
 * to update to the Sensei LMS plugin version containing the changes to the CSS class names.
 */
.course-list-featured-label__featured-image,
.course-list-featured-label__course-categories,
.sensei-lms-featured-badge,
.sensei-lms-course-list-featured-label__text {
	font-family: var(--wp--preset--font-family--system);
	text-transform: uppercase;
}

/*
 * Style Variations
 */

/* Workaround for https://github.com/WordPress/gutenberg/issues/35480. */
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor svg {
	color: var(--wp--preset--color--primary);
}


.footer-title{
	white-space: normal;
}

.footer-title a:hover {
	text-decoration: none;
}

@media screen and (max-width: 700px) {
	.footer-title{
		font-size: 86px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.separator {
		 top: -25px;
	}
}

/* ---------------------------------------------------------------------------
   Sensei buttons
   ---------------------------------------------------------------------------
   Sensei renders "Take This Course" and friends as bare <input type="submit">
   and <button>, which pick up none of the theme's button styling and appear as
   grey browser defaults. Match them to .wp-element-button.
--------------------------------------------------------------------------- */
.sensei-course-meta input[type="submit"],
.course-signup-form input[type="submit"],
.sensei-course-actions button,
form.lesson_button_form input[type="submit"],
input.sensei-stop-double-submission,
.sensei-course-theme__button,
.wp-block-sensei-lms-button-take-course button,
.wp-block-sensei-lms-button-continue-course a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--secondary);
	background-color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 999px;
	padding: .85rem 1.75rem;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}
.sensei-course-meta input[type="submit"]:hover,
.course-signup-form input[type="submit"]:hover,
.sensei-course-actions button:hover,
form.lesson_button_form input[type="submit"]:hover,
input.sensei-stop-double-submission:hover,
.wp-block-sensei-lms-button-take-course button:hover {
	background-color: var(--wp--preset--color--button-border-active);
	border-color: var(--wp--preset--color--button-border-active);
}

/* Module headings on the course outline sit too tight to their lesson lists. */
.sensei-course-theme .wp-block-sensei-lms-course-outline-module__name,
.course-outline-module__name { margin-bottom: .35rem; }

/* Belt and braces: Sensei markup is input.course-start.sensei-stop-double-submission */
body input.course-start,
body input[name="course_start"],
body .sensei-course-theme input[type="submit"] {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--secondary) !important;
	background-color: var(--wp--preset--color--primary) !important;
	border: 2px solid var(--wp--preset--color--primary) !important;
	border-radius: 999px !important;
	padding: .85rem 1.75rem !important;
	text-transform: none !important;
	cursor: pointer;
}
body input.course-start:hover,
body input[name="course_start"]:hover {
	background-color: var(--wp--preset--color--button-border-active) !important;
	border-color: var(--wp--preset--color--button-border-active) !important;
}

/* ---------------------------------------------------------------------------
 * Header brand bar — BFI Film Academy West Midlands + Rural Media
 *
 * Sized by measured INK, not by canvas height. The two supplied files are built
 * very differently:
 *
 *   BFI          canvas 2509x792   ink 1879x673   ink fills 85% of height
 *                                                 padding 14px top, 105px bottom
 *   Rural Media  canvas 2075x625   ink 2075x625   ink fills 100% of height
 *                                                 padding 0px, trimmed tight
 *
 * Two consequences. Matching canvas heights makes the BFI mark render 15%
 * smaller than Rural Media, which is what made Rural Media look oversized. And
 * BFI's empty bottom band pushes its visible mark above the shared centre line,
 * so the pair never optically aligned.
 *
 * Rural Media is set to roughly two thirds of the BFI canvas height, which
 * equalises the two after allowing both for BFI's clear space and for Rural
 * Media's heavier, larger type. The translate puts the ink back on a shared
 * optical centre; it is a percentage so it scales with the clamp.
 * ------------------------------------------------------------------------ */
.bfiwm-brandbar {
	gap: clamp(0.9rem, 2.4vw, 1.6rem);
	align-items: center;
}
.bfiwm-brandbar figure {
	margin: 0;
	line-height: 0;
}
.bfiwm-brandbar figure.wp-block-image img,
.bfiwm-brandbar img {
	display: block;
	width: auto;
	/* Both marks are now trimmed to their ink, so clear space is supplied here
	   rather than baked into the artwork. Horizontal only: vertical padding would
	   add to the fixed height and break the optical match between them. */
	padding-inline: 0.35rem;
}

/* Sized from the INK, not the canvas. The supplied BFI file was a 2509x792
   canvas holding only 1879x674 of picture, so 15 per cent of any height set on it
   was empty space, and 610px of that sat to the RIGHT of the wordmark, which is
   what made the gap before the divider look so wide. Trimmed to its ink as
   attachment 336, the same visual size needs 85 per cent of the old value:
   clamp(44, 5.6vw, 72) becomes clamp(37, 4.8vw, 61). The old translateY nudge
   goes with it, since it only corrected the file's lopsided 14px top against
   104px bottom. */
.bfiwm-brandbar figure.bfiwm-brandbar__bfi img,
.bfiwm-brandbar__bfi img {
	height: clamp(37px, 4.8vw, 61px);
}

/* Hairline between the two organisations. Set on the second mark so there is
   no stray rule if either image fails to load. */
.bfiwm-brandbar__rm {
	border-left: 1px solid rgba(255, 255, 255, 0.28);
	padding-left: clamp(0.9rem, 2.4vw, 1.6rem);
}

/* Just under three fifths of the BFI height. Rural Media's type is set larger and heavier
   inside its box, on top of having no clear space at all. */
.bfiwm-brandbar figure.bfiwm-brandbar__rm img,
.bfiwm-brandbar__rm img {
	height: clamp(25px, 3.2vw, 41px);
}


/* ---------------------------------------------------------------------------
 * Current page in the navigation.
 *
 * WordPress marks the active item with .current-menu-item and aria-current on
 * the link. Both are styled, because a custom-link nav item gets the class but
 * not always the attribute, and a post-type item gets both.
 *
 * Gold is the brand accent and already means "this one" elsewhere on the site
 * (eyebrows, section markers), so it carries the same meaning here. The
 * underline is there because colour alone is not an accessible way to signal
 * state.
 * ------------------------------------------------------------------------ */
.wp-block-navigation li.current-menu-item > a.wp-block-navigation-item__content,
.wp-block-navigation li.current_page_item > a.wp-block-navigation-item__content,
.wp-block-navigation a.wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 2px;
}

/* BFI's pack states a 120px minimum full-lockup height, but only for the
   small-use logos in social media; it gives no website figure. 72px is as large
   as this header carries without the navigation wrapping. At that size the
   "West Midlands" line renders about 10px tall — legible, but still well under
   their stated number. Two things follow, both outstanding with BFI:
     - request the small-use variant, which sets the region name proportionally
       larger and is designed for exactly this situation
     - ask them what the minimum is for a website header, since the pack
       addresses social media only
   Until then this is the best available compromise, and it is a deliberate one. */

/* ---------------------------------------------------------------------------
 * Home hero — title at the top of the image, tagline at the bottom.
 *
 * The cover's inner container is normally a centred flex item. Stretching it and
 * making it a space-between column pins the H1 to the top edge and the tagline
 * group to the bottom, with the photograph filling everything between.
 *
 * Specificity is .wp-block-cover.bfiwm-hero rather than .bfiwm-hero alone,
 * because core's .wp-block-cover align-items rule would otherwise tie and win
 * on load order.
 * ------------------------------------------------------------------------ */
.wp-block-cover.bfiwm-hero {
	align-items: stretch;
}
.bfiwm-hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	row-gap: 2rem;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Strand cards on the Hub page — image flush to the top, then the text.
 *
 * The column carries the border and the rounding, so its padding is zero and
 * the inner group supplies the text inset. That lets the photograph sit edge to
 * edge against the card border instead of floating inside a margin.
 * ------------------------------------------------------------------------ */
.bfiwm-strand {
	overflow: hidden;
	padding: 0 !important;
}
.bfiwm-strand > figure.wp-block-image {
	margin: 0;
	line-height: 0;
}
.bfiwm-strand > figure.wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.bfiwm-strand__body {
	padding: 1.35rem 1.5rem 1.5rem;
}

/* ---------------------------------------------------------------------------
 * Overlay header — logos and navigation sitting over a full-bleed hero.
 *
 * The same approach ruralmedia.co.uk uses: the header is absolutely positioned
 * and transparent, and the hero below it starts at pixel zero. Deliberately
 * NOT sticky, matching Rural Media — it scrolls away and does not come back,
 * which avoids needing JavaScript to swap in a solid background once the header
 * is over body copy rather than over the photograph.
 *
 * Applied per template, not site-wide: templates whose first block is a
 * full-bleed hero pass className "bfiwm-header--overlay" to the header template
 * part. Utility and LMS pages keep the normal in-flow header, because an
 * absolute header would sit on top of their body text.
 * ------------------------------------------------------------------------ */
.bfiwm-header--overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background: transparent;
}

/* Scrim. White logos and white navigation need a dark ground behind them, and
   the hero underneath might be a bright photograph or a pale brand colour. The
   gradient lives on the header rather than on each hero, so any hero image or
   colour works without being tuned for legibility. */
.bfiwm-header--overlay::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 260%;
	background: linear-gradient(
		180deg,
		rgba(16, 58, 77, 0.46) 0%,
		rgba(16, 58, 77, 0.18) 48%,
		rgba(16, 58, 77, 0) 100%
	);
	pointer-events: none;
}

/* Keep the actual content above the scrim. */
.bfiwm-header--overlay > * {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------------
 * Full-bleed hero.
 *
 * Top padding has to clear the overlay header — roughly 72px of logo plus its
 * 1.75rem of vertical padding — so it is set from the same scale rather than a
 * magic number, and eases off on small screens where the header is shorter.
 * ------------------------------------------------------------------------ */
.bfiwm-hero-full {
	margin-top: 0;
	border-radius: 0;
}

/* Top padding has to clear the overlay header, and the header now has two states rather than
   the three it used to have, because the menu no longer wraps in and out of the logo row.

   Measured against the rendered header rather than derived:

     below 740px   hamburger on the logo row      117px, flat
     740px and up  menu on its own row            160px at 740, 183px at 1440

   The upper band still drifts by 23px because the logos are clamp-sized on vw, so the padding
   tracks it with a clamp on the same slope instead of a step. That holds the clear space under
   the header at roughly 55px all the way across, where a flat 13.5rem would have squeezed it
   to 33px at 1440. The two endpoints are 13.5rem at 740px and 15rem at 1440px; the middle term
   is the line between them. */
.bfiwm-hero-full {
	padding-top: 9.5rem !important;
}
@media (min-width: 740px) {
	.bfiwm-hero-full { padding-top: clamp(13.5rem, 11.9rem + 3.43vw, 15rem) !important; }
}

/* Hero copy sits in the same column as the body copy below it. The cover is
   full-bleed, so without this its text starts 2.5rem from the screen edge while
   every paragraph further down starts at the centred content column - they never
   line up. */
.bfiwm-hero-full .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--content-size, 765px);
	margin-inline: auto;
}
.bfiwm-hero-full.wp-block-cover {
	align-items: stretch;
}
.bfiwm-hero-full .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	row-gap: 2rem;
	width: 100%;
}

/* Two inherited-theme problems, fixed for the overlay header only so the
   standard header on utility pages is left exactly as it was.

   min-height: 116px was set for the theme's original 180px-wide logo. With a
   72px lock-up it makes the header 172px tall for no reason, and the hero has
   to pad past all of it.

   Default alignment also left the navigation about 10px below the logos'
   optical centre, because the wrapper was taller than either child. */
.bfiwm-header--overlay .navigation-wrapper {
	align-items: center;
	min-height: 0;
}

/* ---------------------------------------------------------------------------
 * Navigation on its own row, beneath the logos.
 *
 * This is how the header was laid out before the 20 August launch, and it comes back for a
 * practical reason: the menu is growing. Four items fitted alongside the lock-up; six do not,
 * and squeezing them shrinks the gaps until the menu reads as one long string.
 *
 * There is a second benefit that matters more than it looks. The wrapper already wraps, so the
 * header height was a function of viewport width and did NOT change monotonically: one row
 * above 1000px, two rows between 600 and 1000, one row again below 600 with a hamburger. That
 * is why the hero's top padding below needs three separate values. Pinning the menu to its own
 * row makes the height predictable, which is also what the community portal relies on when it
 * measures the header to position itself underneath.
 *
 * Only above 740px. Below that the navigation is a hamburger, which belongs on the same row as
 * the logos; giving a single button its own row would waste a band of screen on exactly the
 * devices with least of it.
 *
 * 740 rather than WordPress's own 600, and the number is measured rather than chosen. The six
 * labels come to 570px of text at the header's 16px type. At a 600px viewport the content
 * column is 552px, so the menu cannot fit on one line at any readable size, gap or no gap: it
 * would wrap, making a three-row header on precisely the short landscape screens that can
 * least afford one. 740px is where 570px of text plus tightened gaps clears the column with
 * room to spare. See the hamburger override below, which moves core's gate to match.
 * ------------------------------------------------------------------------ */
@media (min-width: 740px) {
	header .navigation-wrapper {
		row-gap: 1.15rem;
	}

	/* flex-basis 100% forces the wrap; the logos then have the first row to themselves.
	   justify-content overrides the block's own "right" setting, which was there to push the
	   menu away from the lock-up when they shared a row. On its own row the menu should start
	   where the logos start. */
	header .navigation-wrapper > .wp-block-navigation {
		flex: 1 0 100%;
		justify-content: flex-start;
	}

	/* Descendant, not a child combinator. The list is not a child of the nav element: core
	   wraps it in .wp-block-navigation__responsive-container and a dialog div so the same
	   markup can become the mobile overlay. Targeting it as a child silently matches nothing,
	   which leaves the block's own items-justified-right in force and the menu floating under
	   the middle of the header while the nav element itself sits correctly at the left. */
	header .navigation-wrapper .wp-block-navigation .wp-block-navigation__container {
		justify-content: flex-start;
	}
}

/* Between 740 and 900px six items at the full 1.75rem gap need 710px against a column of
   680 to 836. Tightening the gap to 1.1rem brings the requirement to 658px, which fits from
   740 up. Above 900 there is room for the full gap. */
@media (min-width: 740px) and (max-width: 900px) {
	header .navigation-wrapper > .wp-block-navigation,
	header .navigation-wrapper .wp-block-navigation .wp-block-navigation__container {
		gap: 1.1rem;
	}
}

/* ---------------------------------------------------------------------------
 * Move the hamburger gate from 600px to 740px.
 *
 * Core switches the navigation from hamburger to inline at exactly 600px, in four rules inside
 * a (min-width: 600px) query. Two of those are the display switch, and they are the two
 * overridden here for the 600 to 740 band. Both overrides simply add "header" to core's own
 * selector, so they win on specificity rather than on order, and they stay correct if the
 * stylesheet is ever reordered or concatenated differently.
 *
 * The other two core rules are deliberately left alone. The close button and the open-overlay
 * positioning are both scoped to .is-menu-open, so they already behave correctly when someone
 * actually opens the menu at these widths.
 * ------------------------------------------------------------------------ */
@media (min-width: 600px) and (max-width: 739.98px) {
	header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * In-page anchor jumps.
 *
 * Smooth scrolling only where the reader has not asked for reduced motion — a
 * long animated jump is a vestibular trigger, and this site invites people with
 * access needs to tell us what they need.
 *
 * scroll-margin-top matters more than it looks: the overlay header is absolutely
 * positioned, so a plain anchor jump lands the target heading underneath it and
 * the reader arrives at what looks like the middle of a paragraph. This offsets
 * the landing point by more than the header's height at each breakpoint.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

h1[id], h2[id], h3[id], [id].wp-block-heading {
	scroll-margin-top: 8rem;
}
@media (min-width: 600px) {
	h1[id], h2[id], h3[id], [id].wp-block-heading { scroll-margin-top: 12rem; }
}
@media (min-width: 1000px) {
	h1[id], h2[id], h3[id], [id].wp-block-heading { scroll-margin-top: 10.5rem; }
}

/* ===========================================================================
 * BRAND DEVICES borrowed from ruralmedia.co.uk, which runs the same guidelines.
 *
 * The problem these solve: a navy ground with white body copy is very even in
 * value, so a long page reads as one continuous slab however well it is
 * structured. Rural Media break that with three things — very large display
 * type, solid gold blocks carrying a single number, and gold hairline rules with
 * a big corner radius acting as chapter breaks. All three are used here.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * Chapter divider — a gold hairline.
 *
 * Was a heavy curved bracket copied from ruralmedia.co.uk. At 6px it read as
 * loud, and at 3px it read as dated; the shape itself was competing with the
 * content rather than separating it. A plain hairline at partial opacity does the
 * separating job and stays quiet. Used twice on a page, not at every heading.
 * ------------------------------------------------------------------------ */
.bfiwm-rule {
	height: 0;
	margin: clamp(2.75rem, 6vw, 4rem) 0;
	border: 0;
	border-top: 1px solid rgba(225, 177, 93, 0.5);
	border-radius: 0;
}

/* ---------------------------------------------------------------------------
 * Statistic blocks — a solid gold panel carrying one number, with a white
 * callout card overlapping its lower edge to explain what the number is.
 *
 * The overlap is the point: it breaks the rectangle, which is what stops a row
 * of three panels reading as a table. Row-gap has to allow for the card hanging
 * below its panel, hence the generous vertical gap.
 * ------------------------------------------------------------------------ */
.bfiwm-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.75rem 1.75rem;
	margin: 2.5rem 0 1rem;
}
@media (min-width: 700px) {
	.bfiwm-stats {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bfiwm-stat {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--primary);
	border-radius: 16px;
	padding: 1.25rem 1.35rem 1.35rem;
	color: var(--wp--preset--color--secondary);
}

.bfiwm-stat__figure {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(2.6rem, 5vw, 3.4rem);
	line-height: 0.92;
	letter-spacing: -0.02em;
}

.bfiwm-stat__unit {
	display: block;
	font-weight: 700;
	font-size: clamp(0.95rem, 1.5vw, 1.1rem);
	line-height: 1.15;
	margin-top: 0.35rem;
	margin-bottom: 1rem;
}

/* The white card.

   In FLOW, not absolutely positioned. The first version was absolute, which
   meant it sat on top of the unit label ("free places", "Academies") and hid it.
   A negative bottom margin gives the same layered overhang, but the panel now
   sizes to its own content, so the card can wrap to two lines on a narrow screen
   without covering anything. */
.bfiwm-stat__note {
	margin: auto 0 -1.9rem;
	background: #fff;
	color: var(--wp--preset--color--secondary);
	border-radius: 12px;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	padding: 0.65rem 0.85rem;
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);
}
/* No horizontal overhang. The cards previously hung 0.75rem past their panel
   edges, which brought the middle and right ones within a few pixels of each
   other across the grid gap. They now overhang downward only. */

/* ---------------------------------------------------------------------------
 * Chapter headings. Larger than the theme default so the page reads as four
 * or five chapters rather than nine same-sized headings in a column.
 * ------------------------------------------------------------------------ */
.bfiwm-chapter {
	font-size: clamp(2.1rem, 5vw, 3.25rem) !important;
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/* Quotes inside a card need air between them and the claim they evidence —
   at the card's blockGap they read as a continuation of the paragraph. */
.wp-block-column > .bfiwm-quote {
	margin-top: 1.35rem;
}

/* ---------------------------------------------------------------------------
 * "What you'll gain" — icon cards.
 *
 * Replaces a bullet list. A list of seven outcomes reads as terms and
 * conditions; the same seven with a mark against each read as things you get.
 * Icons are inline SVG, gold disc with a navy glyph, matching the stat panels so
 * the page has one accent language rather than several.
 *
 * Three across on desktop, two on tablet, one on a phone. Cards stretch to equal
 * height within their row so the discs line up.
 * ------------------------------------------------------------------------ */
.bfiwm-gains {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 2rem 0 1rem;
}
@media (min-width: 560px) {
	.bfiwm-gains { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 920px) {
	.bfiwm-gains { grid-template-columns: repeat(3, 1fr); }
}

.bfiwm-gain {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 1.35rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.10);
}

.bfiwm-gain__icon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	display: grid;
	place-items: center;
}
.bfiwm-gain__icon svg {
	width: 25px;
	height: 25px;
	display: block;
}

.bfiwm-gain__text {
	margin: 0;
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.4;
	align-self: center;
}

/* Offer cards — the alumni "what membership gives you" grid.
   Same border, radius and icon treatment as .bfiwm-gain so the two pages read
   as one system, but stacked rather than inline: these carry a heading and a
   paragraph, where a gain is a single label. Two rows of three on desktop. */
.bfiwm-offers {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 2rem 0 1rem;
}
@media (min-width: 600px) {
	.bfiwm-offers { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
	.bfiwm-offers { grid-template-columns: repeat(3, 1fr); }
}

.bfiwm-offer {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.5rem 1.5rem 1.6rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.10);
}

.bfiwm-offer__icon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	display: grid;
	place-items: center;
}
.bfiwm-offer__icon svg {
	width: 25px;
	height: 25px;
	display: block;
}

/* Heading sizes are set here rather than left to the global h3 rule, which is
   scaled for running text and comes out too large inside a card. */
/* Card titles carry real weight now. Kept a clear step below .bfiwm-route__label
   so the route heading still leads: the two are also separated by colour, font
   and weight, so the size gap does not have to do all the work. */
.bfiwm-offer h3,
.bfiwm-offer h4 {
	margin: 0;
	font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.3rem);
	line-height: 1.25;
	font-weight: 700;
}

.bfiwm-offer p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* Progression quotes sit in a row beneath the gains, not beside them — the two
   groups are different shapes and never balanced side by side. */
.bfiwm-progression {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin: 1.5rem 0 0;
}
@media (min-width: 800px) {
	.bfiwm-progression { grid-template-columns: repeat(3, 1fr); }
}
.bfiwm-progression .bfiwm-quote {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Hub hero, corrected 19 August.
 *
 * The rules further up this file were written for a two-part hero: H1 pinned to
 * the top edge, tagline group pinned to the bottom, with justify-content:
 * space-between doing the pushing. That design is gone — the H1, the statement
 * and the strapline are now one cluster — so space-between had a single child to
 * distribute and parked it at the top of a stretched container.
 *
 * Two corrections, scoped to .bfiwm-hero.bfiwm-hero-full so the other full-bleed
 * heroes on Introductory Courses, Alumni and the archive keep their own layout:
 *
 *   1. flex-end, so the cluster sits on the bottom edge. The gradient is
 *      strongest at the bottom (0.62 navy at 0%), so this also puts the text on
 *      the darkest part of the scrim rather than the lightest.
 *   2. An explicit 1000px centred column, matching theme.json's contentSize,
 *      which is what the body copy below is constrained to. The previous rule
 *      relied on var(--wp--style--global--content-size) and was not taking
 *      effect, which is why the hero text started at the screen edge while every
 *      paragraph below it started at the content column.
 * ------------------------------------------------------------------------ */
.bfiwm-hero.bfiwm-hero-full .wp-block-cover__inner-container {
	justify-content: flex-end;
	row-gap: 0.45rem;
	max-width: 1000px;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * Logos are never rounded.
 *
 * theme.json sets core/image border.radius to 16px, which WordPress emits as
 *   :root :where(.wp-block-image img, ...) { border-radius: 16px }
 * That is a rounded-rectangle mask on all four corners of every image on the
 * site. It is right for photographs and wrong for a logo, because both marks
 * here have artwork running to the edge of their file, so the curve removes real
 * ink rather than empty space:
 *
 *   BFI          the roundel sits top left, so the corner curve clips the top of
 *                the B. Raised by BFI marketing, 19 August.
 *   Rural Media  the artwork fills its canvas exactly, 0px clear space on all
 *                four sides, so both bottom corners are sliced. Raised by Elle.
 *
 * The core rule uses :where(), which contributes no specificity, so a single
 * class is enough to beat it. Applied to the header brand bar and the footer
 * funder row, which between them hold every logo on the site.
 * ------------------------------------------------------------------------ */
.bfiwm-brandbar img,
.bfiwm-brandbar figure.wp-block-image img,
footer .wp-block-image img {
	border-radius: 0;
}

/* ---------------------------------------------------------------------------
 * Navigation submenu.
 *
 * Nothing styled this, so it fell through to core's default: white panel, black
 * text, square corners, grey hairline. Against a navy site sitting over a
 * photograph it read as a browser artefact rather than part of the design.
 *
 * Brought into the brand: navy panel, gold hairline, 12px radius to match the
 * card language used on the Hub and Introductory Courses pages, and gold on
 * hover and for the current page, matching the top-level navigation highlight.
 *
 * Scoped to :not(.is-menu-open) on purpose. Below 600px the navigation collapses
 * into a full-screen overlay which is deliberately WHITE with navy text (see the
 * responsive rules at the top of this file), so a navy panel inside it would be
 * invisible. There, core's own inherited colours are correct.
 * ------------------------------------------------------------------------ */
.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation .has-child .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container {
	background-color: #103A4D;
	border: 1px solid rgba(225, 177, 93, 0.38);
	border-radius: 12px;
	padding: 0.4rem;
	min-width: 15rem;
	box-shadow: 0 18px 40px rgba(4, 20, 28, 0.45);
	/* Core offsets the panel by the parent's padding; pull it back under the
	   label and give it a little air beneath the header. */
	margin-top: 0.5rem;
	overflow: hidden;
}

.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #FFFFFF;
	padding: 0.62rem 0.85rem;
	border-radius: 8px;
	line-height: 1.35;
	width: 100%;
}

/* Hairline between items, in the same value as the card borders elsewhere.
   Not after the last one. */
.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container > .wp-block-navigation-item + .wp-block-navigation-item {
	border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	color: #E1B15D;
	background-color: rgba(225, 177, 93, 0.12);
}

/* Current page inside the submenu, matching the top-level rule. The element
   selector is needed because WordPress global styles load after this file. */
.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container li.current-menu-item > a.wp-block-navigation-item__content {
	color: #E1B15D;
	background-color: rgba(225, 177, 93, 0.16);
}

/* The parent item's chevron, so it reads as ours rather than default grey. */
.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-icon {
	color: currentColor;
}


/* ---------------------------------------------------------------------------
 * Fluent Forms, in the Rural Media brand.
 *
 * The plugin ships two stylesheets: fluent-forms-public.css (structure, rooted
 * at .fluentform) and fluentform-public-default.css (the "default" skin, rooted
 * at .ff-default). Both land at (0,2,0) or (0,3,0). Every rule below is rooted
 * at .fluentform.ff-default, and that one element carries both classes, so this
 * buys a class of specificity without !important anywhere.
 *
 * Colour logic: the page is navy, so the panel is a lifted navy and all type on
 * it is white or gold. Inputs invert to white with navy ink, which is both the
 * strongest contrast available and a match for the signature pad, whose white
 * canvas, gold border and navy pen are set in the field's own settings.
 *
 * Single column is deliberate. It is the accessible pattern for a long form,
 * and it matches BFI's own template.
 * --------------------------------------------------------------------------- */

.bfiwm-formpanel,
.fluentform {
	--bfiwm-ff-gold: var(--wp--preset--color--primary, #E1B15D);
	--bfiwm-ff-cream: var(--wp--preset--color--accent-cream, #EAC892);
	--bfiwm-ff-navy: var(--wp--preset--color--secondary, #103A4D);
	--bfiwm-ff-white: var(--wp--preset--color--foreground, #FFFFFF);
	--bfiwm-ff-muted: var(--wp--preset--color--tertiary, #9ABAC0);
	--bfiwm-ff-coral: var(--wp--preset--color--accent-coral, #E67675);
	--bfiwm-ff-blush: var(--wp--preset--color--accent-blush, #F2BEBA);
	--bfiwm-ff-panel: #15475C;
	--bfiwm-ff-hairline: rgba(225, 177, 93, 0.38);
	--bfiwm-ff-radius: 0.5rem;
}

/* ---- The panel ---------------------------------------------------------- */

/* The panel matches the site content column exactly, so its left edge lines up with the
   page title, the body copy and the footer. It was 800px, which looked deliberate in
   isolation but sat 100px inside everything else on the page and read as a mistake.

   Read from the theme rather than hardcoded, so it follows contentSize if that changes. */
.bfiwm-formpanel {
	max-width: var(--wp--style--global--content-size, 1000px);
	margin-inline: auto;
	background-color: var(--bfiwm-ff-panel);
	border: 1px solid var(--bfiwm-ff-hairline);
	border-radius: 20px;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	box-shadow: 0 24px 60px rgba(4, 20, 28, 0.35);
}


/* The masthead label is normally a caption above a form that the page title has already
   introduced. On the sign-in page there is no separate title saying "sign in", so the
   label IS the heading and has to carry that weight. Tracking eases as it grows, for the
   same reason it does on the base rule. */
.bfiwm-form-masthead--lead .bfiwm-form-masthead__label {
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
	letter-spacing: 0.02em;
	text-transform: none;
	/* Repeated from the base rule rather than inherited. On pages using the page-form template
	   this label is marked up as the h1, so it picks up .wp-block-heading, whose margins carry
	   the same single-class weight as .bfiwm-form-masthead__label and would otherwise win or
	   lose on stylesheet order alone. Two classes settles it. */
	margin: 0;
	line-height: 1.15;
}

/* ---- Masthead ----------------------------------------------------------- */

.bfiwm-formpanel .bfiwm-form-masthead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem clamp(0.9rem, 2.4vw, 1.6rem);
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--bfiwm-ff-hairline);
}

/* ---------------------------------------------------------------------------
 * The gap around a form's opening paragraph.
 *
 * Three separate margins were stacking above and below the intro line, which left it floating
 * in the middle of a large empty band rather than reading as the first thing under the rule:
 *
 *   above  the masthead's own margin-bottom, plus the paragraph's inherited 1rem margin-top,
 *          came to 56px below the hairline
 *   below  the section break's 44px margin-top won the collapse against the intro block's
 *          own margin, so there was more space before "About You" than the heading needed
 *
 * The masthead margin above is now 1.25rem rather than 2rem, and the paragraph's own top
 * margin goes entirely: the masthead has already provided the space, and a first paragraph
 * adding its own to it is the definition of double spacing.
 *
 * The section break rule is scoped with an adjacent sibling so it only tightens the ONE break
 * that follows an intro block. Section breaks elsewhere in a form separate whole groups of
 * questions and still want their full 44px.
 * --------------------------------------------------------------------------- */
.bfiwm-formpanel .ff-custom_html > p:first-child,
.bfiwm-formpanel .ff-custom_html > *:first-child {
	margin-top: 0;
}

/* The gap above the intro is NOT the masthead's margin, which is why reducing that alone
   changed nothing. WordPress puts a 40px margin-block-start on every flow child of a block
   group, so the form wrapper sits 40px below the masthead and collapses the masthead's own
   20px into irrelevance. This targets the actual source. */
.bfiwm-formpanel > .fluentform {
	margin-block-start: 1.5rem;
}

/* Both of the following have to out-specify rules further up THIS stylesheet, not Fluent
   Forms': .fluentform.ff-default .ff-el-group and .fluentform.ff-default .ff-el-section-break
   are three classes each, so a two-class selector loses however sensible it looks. Four
   classes settles it. */
.bfiwm-formpanel .fluentform.ff-default .ff-custom_html {
	margin-bottom: 1rem;
}

.bfiwm-formpanel .fluentform.ff-default .ff-custom_html + .ff-el-section-break {
	margin-top: 1.5rem;
}

.bfiwm-form-masthead__marks {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2.4vw, 1.6rem);
}

.bfiwm-form-masthead__marks figure {
	margin: 0;
	line-height: 0;
}

/* Both marks are trimmed to their ink, so clear space is supplied here, and the
   site-wide 16px image radius from theme.json is cancelled. Same cause as the
   brandbar, noted above. */
.bfiwm-form-masthead__marks img {
	display: block;
	width: auto;
	border-radius: 0;
	padding-inline: 0.35rem;
}

.bfiwm-form-masthead__marks .bfiwm-form-masthead__bfi img {
	height: clamp(34px, 4.4vw, 54px);
}

/* Hairline on the second mark, so a failed image leaves no stray rule. */
.bfiwm-form-masthead__marks .bfiwm-form-masthead__rm {
	border-left: 1px solid rgba(255, 255, 255, 0.28);
	padding-left: clamp(0.9rem, 2.4vw, 1.6rem);
}

.bfiwm-form-masthead__marks .bfiwm-form-masthead__rm img {
	height: clamp(23px, 3vw, 36px);
}

.bfiwm-form-masthead__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, 'Jost', sans-serif);
	font-size: clamp(1.05rem, 2.2vw, 1.375rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bfiwm-ff-gold);
}

/* ---- Typography inside the form ---------------------------------------- */

.fluentform.ff-default,
.fluentform.ff-default .ff-el-form-control,
.fluentform.ff-default .ff-btn,
.fluentform.ff-default .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--body, 'Plus Jakarta Sans', sans-serif);
}

.fluentform.ff-default .ff-el-input--label label {
	display: block;
	margin-bottom: 0.45rem;
	color: var(--bfiwm-ff-white);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Gold, not the plugin's red. A required marker is information, not an error. */
.fluentform.ff-default .ff-el-input--label.ff-el-is-required.asterisk-right label:after,
.fluentform.ff-default .ff-el-input--label.ff-el-is-required.asterisk-left label:before {
	color: var(--bfiwm-ff-gold);
}

.fluentform.ff-default .ff-el-help-message,
.fluentform.ff-default .ff-section_break_desk,
.fluentform.ff-default .ff-el-signature__actions-hint {
	color: var(--bfiwm-ff-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.fluentform.ff-default .ff-el-group {
	margin-bottom: 1.6rem;
}

/* ---- Section breaks ---------------------------------------------------- */

.fluentform.ff-default .ff-el-section-break {
	margin-top: 2.75rem;
	margin-bottom: 1.75rem;
}

.fluentform.ff-default .ff-el-group:first-child + .ff-el-section-break {
	margin-top: 0;
}

.fluentform.ff-default .ff-el-section-break .ff-el-section-title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--display, 'Jost', sans-serif);
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bfiwm-ff-gold);
}

/* The plugin closes every section with a bare <hr>. Recast it as a gold
   hairline rather than the browser's grey bevel. */
.fluentform.ff-default .ff-el-section-break hr {
	height: 0;
	margin: 1rem 0 0;
	border: 0;
	border-top: 1px solid var(--bfiwm-ff-hairline);
	background: none;
}

/* ---- Prose blocks (the declaration and data protection notices) -------- */

.fluentform.ff-default .ff-custom_html {
	color: var(--bfiwm-ff-white);
	font-size: 1rem;
	line-height: 1.6;
}

.fluentform.ff-default .ff-custom_html p:last-child,
.fluentform.ff-default .ff-custom_html ul:last-child {
	margin-bottom: 0;
}

.fluentform.ff-default .ff-custom_html ul {
	margin: 0.75rem 0 0;
	padding-left: 1.35rem;
	list-style: none;
}

.fluentform.ff-default .ff-custom_html li {
	position: relative;
	margin-bottom: 0.6rem;
	color: rgba(255, 255, 255, 0.88);
}

.fluentform.ff-default .ff-custom_html li:before {
	content: "";
	position: absolute;
	left: -1.35rem;
	top: 0.62em;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background-color: var(--bfiwm-ff-gold);
}

.fluentform.ff-default a {
	color: var(--bfiwm-ff-cream);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.fluentform.ff-default a:hover {
	color: var(--bfiwm-ff-white);
}

/* ---- Text inputs, textareas, selects ----------------------------------- */

.fluentform.ff-default .ff-el-form-control {
	width: 100%;
	background-color: var(--bfiwm-ff-white);
	color: var(--bfiwm-ff-navy);
	border: 2px solid transparent;
	border-radius: var(--bfiwm-ff-radius);
	padding: 0.8rem 1rem;
	font-size: 1rem;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.fluentform.ff-default textarea.ff-el-form-control {
	min-height: 8.5rem;
	line-height: 1.6;
	resize: vertical;
}

.fluentform.ff-default .ff-el-form-control::placeholder {
	color: rgba(16, 58, 77, 0.5);
	opacity: 1;
}

.fluentform.ff-default .ff-el-form-control:focus,
.fluentform.ff-default .ff-el-form-control:focus-visible {
	background-color: var(--bfiwm-ff-white);
	color: var(--bfiwm-ff-navy);
	border-color: var(--bfiwm-ff-gold);
	outline: none;
	box-shadow: 0 0 0 4px var(--bfiwm-ff-gold);
}

.fluentform.ff-default select.ff-el-form-control {
	height: auto;
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 1rem 1rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23103A4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5L8 10.5l4-4'/%3E%3C/svg%3E");
}

/* ---- Name and address sub-grids ---------------------------------------- */

.frm-fluent-form .ff-t-container {
	gap: 1rem;
	flex-wrap: wrap;
}

/* The plugin gives every cell width: 100%, which is harmless while the row is
   nowrap and shrinks them to fit. Once wrapping is allowed each cell claims a
   full line, so the basis has to be restated: share the row from 13rem up,
   and drop to one per line only when there is genuinely no space. */
.frm-fluent-form .ff-t-container > .ff-t-cell {
	flex: 1 1 13rem;
	width: auto;
	min-width: 0;
}

/* The address element repeats its own label above the sub-grid. Give it the
   weight of a sub-heading so it does not read as a field label. */
.fluentform.ff-default .fluent-address > .ff-el-input--label label {
	font-size: 1.0625rem;
	margin-bottom: 0.75rem;
}

/* ---- Radios and checkboxes --------------------------------------------- */

/* The default skin blanks the pseudo-elements it would otherwise draw
   (content: none), leaving the native control exposed. Native controls do not
   take a brand colour reliably, so they are redrawn here with appearance: none
   and a background image, not ::after, which is not dependable on inputs. */
.fluentform.ff-default .ff-el-form-check {
	margin-bottom: 0;
}

.fluentform.ff-default .ff-el-form-check label.ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin-bottom: 0.7rem;
	color: var(--bfiwm-ff-white);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.fluentform.ff-default .ff-el-form-check label.ff-el-form-check-label > span {
	margin-left: 0;
}

.fluentform.ff-default .ff-el-form-check-label .ff-el-form-check-input {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	top: 0.15em;
	vertical-align: baseline;
	background-color: var(--bfiwm-ff-white);
	background-repeat: no-repeat;
	background-position: center;
	border: 2px solid rgba(16, 58, 77, 0.28);
	cursor: pointer;
	transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out,
		box-shadow 0.12s ease-in-out;
}

.fluentform.ff-default .ff-el-form-check-label .ff-el-form-check-checkbox {
	border-radius: 5px;
}

.fluentform.ff-default .ff-el-form-check-label .ff-el-form-check-radio {
	border-radius: 50%;
}

.fluentform.ff-default .ff-el-form-check-label .ff-el-form-check-checkbox:checked {
	background-color: var(--bfiwm-ff-gold);
	border-color: var(--bfiwm-ff-gold);
	background-size: 82% 82%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23103A4D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3.1 3.1L12.5 5.1'/%3E%3C/svg%3E");
}

.fluentform.ff-default .ff-el-form-check-label .ff-el-form-check-radio:checked {
	border-color: var(--bfiwm-ff-gold);
	background-image: radial-gradient(circle at center, var(--bfiwm-ff-gold) 0 44%, transparent 46%);
}

.fluentform.ff-default .ff-el-form-check-label .ff-el-form-check-input:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--bfiwm-ff-gold);
}

.fluentform.ff-default .ff-el-form-check label.ff-el-form-check-label:hover
	.ff-el-form-check-input:not(:checked) {
	border-color: rgba(225, 177, 93, 0.75);
}

/* ---- Signature ---------------------------------------------------------- */

/* The canvas takes its white ground, gold border and navy pen from the field
   settings in the form definition, so only the surround is set here.

   The add-on gives the wrapper width: fit-content, which collapses it to the
   canvas's 300px intrinsic width even though the canvas asks for 100%. */
.fluentform.ff-default .fluentform-signature-pad-wrapper {
	width: 100%;
	max-width: 100%;
	border-radius: var(--bfiwm-ff-radius);
}

/* The canvas carries height="200" but no width attribute, so its intrinsic
   ratio is 300x200. Stretched to the field width with height left auto, that
   ratio blows it up to well over twice the intended depth. Restating the
   height keeps it at the sign_pad_height set on the field. */
.fluentform.ff-default .fluentform-signature-pad-wrapper canvas {
	display: block;
	width: 100%;
	height: 200px;
	max-width: 100%;
	border-radius: var(--bfiwm-ff-radius);
	cursor: crosshair;
	touch-action: none;
}

/* Hint to the left, the three controls to the right. The add-on floats the
   controls and puts them first in the DOM, so the float is dropped and order
   restated rather than left to wrap around each other. */
.fluentform.ff-default .ff-el-signature__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-top: 0.75rem;
}

.fluentform.ff-default .ff-el-signature__actions-hint {
	order: 1;
}

.fluentform.ff-default .fluentform-signature-pad-actions {
	order: 2;
	float: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0;
}

/* The add-on hard-codes fill: #c3c3c3 on the icons, which is off-palette and
   near-invisible on navy. currentColor makes them follow the button, so the
   hover inversion below comes for free. */
.fluentform.ff-default .fluentform-signature-pad-actions svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	display: block;
}

/* Icon-only, so square padding keeps them circular. */
.fluentform.ff-default .fluentform-signature-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: var(--bfiwm-ff-cream);
	background-color: transparent;
	border: 1px solid var(--bfiwm-ff-hairline);
	border-radius: 999px;
	padding: 0.45rem;
	margin-right: 0;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.fluentform.ff-default .fluentform-signature-button:hover,
.fluentform.ff-default .fluentform-signature-button:focus-visible {
	color: var(--bfiwm-ff-navy);
	background-color: var(--bfiwm-ff-gold);
	border-color: var(--bfiwm-ff-gold);
	outline: none;
}

/* ---- Submit ------------------------------------------------------------- */

/* Matched to .wp-element-button and the Sensei buttons above: gold ground,
   navy ink, full pill. */
.fluentform.ff-default .ff-el-group.ff_submit_btn_wrapper {
	margin-top: 2.25rem;
	margin-bottom: 0;
}

.fluentform.ff-default .ff-btn-submit.ff_btn_style {
	font-family: var(--wp--preset--font-family--body, 'Plus Jakarta Sans', sans-serif);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--bfiwm-ff-navy);
	background-color: var(--bfiwm-ff-gold);
	border: 2px solid var(--bfiwm-ff-gold);
	border-radius: 999px;
	padding: 0.95rem 2.25rem;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}

.fluentform.ff-default .ff-btn-submit.ff_btn_style:hover,
.fluentform.ff-default .ff-btn-submit.ff_btn_style:focus-visible {
	opacity: 1;
	color: var(--bfiwm-ff-navy);
	background-color: var(--bfiwm-ff-cream);
	border-color: var(--bfiwm-ff-cream);
	outline: none;
}

.fluentform.ff-default .ff-btn-submit.ff_btn_style:focus-visible {
	box-shadow: 0 0 0 4px var(--bfiwm-ff-gold);
}

/* ---- Errors and messages ----------------------------------------------- */

/* Blush on navy, coral on white. The plugin's #f56c6c fails contrast against
   the panel and is off-palette. */
.fluentform.ff-default .text-danger,
.fluentform.ff-default .error.text-danger,
.fluentform.ff-default .ff-el-is-error .text-danger {
	color: var(--bfiwm-ff-blush);
	font-size: 0.9375rem;
	margin-top: 0.35rem;
}

.fluentform.ff-default .ff-el-is-error .ff-el-form-control {
	border-color: var(--bfiwm-ff-coral);
}

.fluentform.ff-default .ff-el-is-error .ff-el-form-check-label,
.fluentform.ff-default .ff-el-is-error .ff-el-form-check-label a {
	color: var(--bfiwm-ff-blush);
}

.ff-errors-in-stack,
.ff-errors-in-stack .error {
	color: var(--wp--preset--color--accent-blush, #F2BEBA);
}

.bfiwm-formpanel .ff-message-success,
.fluentform.ff-default .ff-message-success {
	margin-top: 0;
	padding: 1.5rem 1.75rem;
	color: var(--bfiwm-ff-white);
	background-color: rgba(225, 177, 93, 0.12);
	border: 1px solid var(--bfiwm-ff-hairline);
	border-radius: var(--bfiwm-ff-radius);
	box-shadow: none;
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* ---- Date picker -------------------------------------------------------- */

/* flatpickr appends its calendar to <body>, outside .fluentform, so these
   cannot be scoped to the form. Nothing else on the site uses flatpickr. */
.flatpickr-calendar {
	background-color: #15475C;
	border: 1px solid rgba(225, 177, 93, 0.38);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(4, 20, 28, 0.45);
	font-family: var(--wp--preset--font-family--body, 'Plus Jakarta Sans', sans-serif);
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
	display: none;
}

.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays {
	background-color: transparent;
	color: #FFFFFF;
	fill: #FFFFFF;
}

span.flatpickr-weekday {
	background-color: transparent;
	color: #9ABAC0;
	font-weight: 600;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	color: #FFFFFF;
	background-color: transparent;
	font-weight: 600;
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
	color: #103A4D;
	background-color: #FFFFFF;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: #E1B15D;
}

.flatpickr-day {
	color: rgba(255, 255, 255, 0.92);
	border-radius: 8px;
	border-color: transparent;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
	color: #FFFFFF;
	background-color: rgba(225, 177, 93, 0.22);
	border-color: transparent;
}

.flatpickr-day.today {
	border-color: #E1B15D;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
	color: #103A4D;
	background-color: #E1B15D;
	border-color: #E1B15D;
	font-weight: 700;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: rgba(255, 255, 255, 0.32);
}

.numInputWrapper span.arrowUp:after {
	border-bottom-color: #E1B15D;
}

.numInputWrapper span.arrowDown:after {
	border-top-color: #E1B15D;
}

/* ---- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fluentform.ff-default .ff-el-form-control,
	.fluentform.ff-default .ff-el-form-check-label .ff-el-form-check-input,
	.fluentform.ff-default .ff-btn-submit.ff_btn_style,
	.fluentform.ff-default .fluentform-signature-button {
		transition: none;
	}
}


/* ---------------------------------------------------------------------------
 * Two routes into the Hub, on the lead page.
 *
 * Not four equal strands, which was the first reading and was wrong. There are
 * two routes, and the four cards are two pairs:
 *
 *   Apply   Introductory Courses, and the year-round activity they sit inside.
 *           Open to anyone coming to the Hub for the first time.
 *   Alumni  Membership, and the workshops, events and industry placements that
 *           run through the membership platform. For people who have already
 *           completed an Academy anywhere in the country.
 *
 * Colour separates the pairs, and each pair ALSO carries a text label. Colour
 * on its own would fail WCAG 1.4.1 and would tell a colour-blind reader nothing,
 * and which route applies to you is the single most important thing on the page.
 * --------------------------------------------------------------------------- */

.bfiwm-routes {
	display: grid;
	gap: 2.25rem;
	margin: 1.75rem 0 0;
}

/* A real heading, not a styled paragraph. It names the group of cards beneath
   it, so a screen reader navigating by heading needs to hear it: without this
   the route distinction, which is the most important thing in the section, was
   visible but not announced.
   Mixed case rather than uppercase. Small tracked caps work as a label; at this
   size they shout, and Dan asked for clearer. */
.bfiwm-route__label {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--display, 'Jost', sans-serif);
	font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.65rem);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}
.bfiwm-route--apply .bfiwm-route__label {
	color: var(--wp--preset--color--primary);
}
.bfiwm-route--alumni .bfiwm-route__label {
	color: var(--wp--preset--color--accent-mint);
}

/* Two cards to a row from tablet up. The base .bfiwm-offers rule goes to three
   columns at 940px, which is wrong for a pair. */
.bfiwm-offers.bfiwm-offers--pair {
	margin: 0;
}
@media (min-width: 600px) {
	.bfiwm-offers.bfiwm-offers--pair { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
	.bfiwm-offers.bfiwm-offers--pair { grid-template-columns: repeat(2, 1fr); }
}

/* Route tints. Kept low-alpha so the cards still read as one family. */
.bfiwm-offer--apply {
	background: rgba(225, 177, 93, 0.09);
	border-color: rgba(225, 177, 93, 0.30);
}
a.bfiwm-offer--apply:hover,
a.bfiwm-offer--apply:focus-visible {
	background: rgba(225, 177, 93, 0.16);
	border-color: rgba(225, 177, 93, 0.55);
}

.bfiwm-offer--alumni {
	background: rgba(159, 210, 192, 0.09);
	border-color: rgba(159, 210, 192, 0.30);
}
a.bfiwm-offer--alumni:hover,
a.bfiwm-offer--alumni:focus-visible {
	background: rgba(159, 210, 192, 0.16);
	border-color: rgba(159, 210, 192, 0.55);
}
.bfiwm-offer--alumni .bfiwm-offer__icon {
	background: var(--wp--preset--color--accent-mint);
}
.bfiwm-offer--alumni .bfiwm-offer__more {
	color: var(--wp--preset--color--accent-mint);
}
a.bfiwm-offer--alumni:hover .bfiwm-offer__more,
a.bfiwm-offer--alumni:focus-visible .bfiwm-offer__more {
	color: var(--wp--preset--color--accent-mint);
}
a.bfiwm-offer--alumni:focus-visible {
	outline-color: var(--wp--preset--color--accent-mint);
}

/* The whole card is the link.
 *
 * First attempt made only the h3 a link, which failed twice over: the heading
 * did not look clickable, and the one thing that did look clickable, the
 * "See what is on" prompt at the foot of the card, was not a link at all. An
 * anchor wrapping the card fixes both and gives a target the size of the card.
 * <a> may contain headings and paragraphs; it may not contain other
 * interactive elements, so nothing inside these cards may become a link. */
a.bfiwm-offer {
	text-decoration: none;
	color: inherit;
}
a.bfiwm-offer:hover,
a.bfiwm-offer:focus-visible {
	background: rgba(225, 177, 93, 0.10);
	border-color: rgba(225, 177, 93, 0.38);
}
a.bfiwm-offer:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}
a.bfiwm-offer:hover .bfiwm-offer__more,
a.bfiwm-offer:focus-visible .bfiwm-offer__more {
	color: var(--wp--preset--color--primary);
}

/* Pushed to the bottom of the card so the prompts line up across a row even
   when the descriptions differ in length. */
.bfiwm-offer__more {
	margin-top: auto;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-cream);
}


/* ---------------------------------------------------------------------------
 * Registration panel on the lead page.
 *
 * Was a cover block on a photograph. Dan cut the image: the panel is the primary
 * action on the page and the picture was competing with it rather than helping.
 * Same lifted navy and gold hairline as the form panel, so the two read as the
 * same object in two places.
 * --------------------------------------------------------------------------- */

/* Sits at the body text width, not alignwide. A panel wider than the paragraphs
   above and below it reads as a different column rather than a step in the same
   argument. Padding kept modest for the same reason. */
.bfiwm-ctapanel {
	background-color: #15475C;
	border: 1px solid rgba(225, 177, 93, 0.38);
	border-radius: 16px;
	padding: clamp(1.35rem, 2.6vw, 1.85rem);
	margin-block: 2.5rem;
}

.bfiwm-ctapanel > :first-child { margin-top: 0; }
.bfiwm-ctapanel > :last-child { margin-bottom: 0; }


/* ---------------------------------------------------------------------------
 * One action per route, beneath the pair.
 *
 * Replaces the "See what is on ->" line inside every card. Four link lines gave
 * the section four competing calls to action and made each card a click target
 * whose destination was not obvious; one button per route states the action once.
 *
 * Deliberately outline, not filled. "Register with the Hub" is the only filled
 * button on the page and needs to stay that way: these two are the secondary
 * route, and the launch priority is Hub registration.
 *
 * Colour follows the route, via currentColor on the border so text and border
 * can never drift apart.
 * --------------------------------------------------------------------------- */

.bfiwm-route__action {
	margin: 1.35rem 0 0;
}

.bfiwm-route__action a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body, 'Plus Jakarta Sans', sans-serif);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	background-color: transparent;
	border: 2px solid currentColor;
	border-radius: 999px;
	padding: 0.85rem 1.75rem;
	transition: background-color 0.15s, color 0.15s;
}

.bfiwm-route--apply .bfiwm-route__action a {
	color: var(--wp--preset--color--primary);
}
.bfiwm-route--apply .bfiwm-route__action a:hover,
.bfiwm-route--apply .bfiwm-route__action a:focus-visible {
	color: var(--wp--preset--color--secondary);
	background-color: var(--wp--preset--color--primary);
	outline: none;
}

.bfiwm-route--alumni .bfiwm-route__action a {
	color: var(--wp--preset--color--accent-mint);
}
.bfiwm-route--alumni .bfiwm-route__action a:hover,
.bfiwm-route--alumni .bfiwm-route__action a:focus-visible {
	color: var(--wp--preset--color--secondary);
	background-color: var(--wp--preset--color--accent-mint);
	outline: none;
}

.bfiwm-route__action a:focus-visible {
	box-shadow: 0 0 0 4px var(--bfiwm-ff-gold);
}

/* Cards are no longer links, so the whole-card affordance goes: no pointer, no
   hover lift. The a.bfiwm-offer rules above are left in place and simply stop
   matching. */
.bfiwm-offer {
	cursor: auto;
}


/* ---------------------------------------------------------------------------
 * Support list.
 *
 * Reuses .bfiwm-offer for the icon and type, but strips the card: six tinted
 * boxes directly under the two tinted route pairs would fight them for
 * attention, and these are statements of fact rather than things to click.
 * Six items so the three-column grid fills evenly; five would leave an orphan.
 * --------------------------------------------------------------------------- */

.bfiwm-offers--support {
	margin: 1.75rem 0 2rem;
	gap: 1.6rem 1.5rem;
}

.bfiwm-offer--plain {
	background: none;
	border: 0;
	padding: 0;
	gap: 0.6rem;
}

.bfiwm-offer--plain .bfiwm-offer__icon {
	width: 38px;
	height: 38px;
}
.bfiwm-offer--plain .bfiwm-offer__icon svg {
	width: 21px;
	height: 21px;
}

/* A step down from the route cards: these support the argument, they do not
   carry it. */
.bfiwm-offer--plain h3,
.bfiwm-offer--plain h4 {
	font-size: 1.0625rem;
}


/* ---------------------------------------------------------------------------
 * Stat cards and hero spacing, second pass.
 * --------------------------------------------------------------------------- */

/* Bottom-aligning the white cards was not enough: their own text runs to one or
   two lines, so their tops still sat at different heights. A min-height of two
   lines plus padding makes all three the same object. Measured before this:
   tops at 1418, 1418, 1435. */
.bfiwm-stat__note {
	min-height: 4.5rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

/* The h1 in this hero is a direct child of the cover's inner container, unlike
   the Hub page where it sits inside a group. Its default block margins were
   adding 40px on top of the 0.45rem row-gap, so the title floated well clear of
   the display line beneath it. Scoped to the direct child so the Hub page hero,
   which Dan has already signed off, is untouched. */
.bfiwm-hero.bfiwm-hero-full .wp-block-cover__inner-container > h1.wp-block-heading {
	margin-block: 0;
}

/* Measured: the group holding the display line and buttons carries a 40px top
   margin, which was the whole of the gap under the h1 (40px + 7.2px row-gap =
   47px). Zeroing the h1's own margins made no difference because they were
   already 0. */
.bfiwm-hero.bfiwm-hero-full .wp-block-cover__inner-container > .wp-block-group {
	margin-top: 0;
}


/* Four-up variant of the support grid, for the courses page. Overrides the base
   three-column rule at the same 940px breakpoint, so there is no width band
   where four items fall to three and leave an orphan. */
@media (min-width: 600px) {
	.bfiwm-offers.bfiwm-offers--quad {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 940px) {
	.bfiwm-offers.bfiwm-offers--quad {
		grid-template-columns: repeat(4, 1fr);
	}
}


/* ---------------------------------------------------------------------------
 * Footer bottom bar: attribution left, social icons right.
 *
 * The socials were a "Social / Instagram / YouTube" text row at the top of the
 * footer. Icons carry it in less space and belong with the other end-of-page
 * furniture. Each link has an aria-label because an icon-only link has no
 * accessible name otherwise, and the svg is hidden from the accessibility tree
 * so the name is not announced twice.
 * --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * Footer pills.
 *
 * Every clickable thing in the footer that is not the attribution line or a social icon uses
 * this one style. Previously the footer carried a filled button next to two plain text links,
 * which read as though only the button was clickable and left the other two looking like
 * incidental prose.
 *
 * Small on purpose. The footer appears on every page of the site, so anything sized to compete
 * with a page's own call to action would be shouting on all of them. Gold outline rather than
 * gold fill for the same reason: filled gold is the Hub registration treatment, and it should
 * stay that way.
 *
 * 0.875rem at 1.4 is 19.6px of text; the padding takes the pill to 34px, comfortably clear of
 * the 24px minimum in WCAG 2.2 SC 2.5.8.
 * --------------------------------------------------------------------------- */
.bfiwm-pill {
	display: inline-block;
	padding: 0.42rem 1.05rem;
	border: 1px solid var(--bfiwm-ff-gold);
	border-radius: 999px;
	background-color: transparent;
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--body, "Plus Jakarta Sans", sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s, color 0.15s;
}

.bfiwm-pill:hover,
.bfiwm-pill:focus-visible {
	background-color: var(--bfiwm-ff-gold);
	color: var(--wp--preset--color--secondary);
}

/* White ring, not gold: on hover the pill itself is already gold, so a gold ring would vanish
   into it at exactly the moment a keyboard user needs to see where they are. */
.bfiwm-pill:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--wp--preset--color--foreground);
}

/* ---------------------------------------------------------------------------
 * Footer call to action: one line, two pills.
 *
 * Rendered by [bfiwm_footer_cta] in bfiwm-core, which shows each pill only once its page is
 * live and drops the strip entirely if neither is.
 * --------------------------------------------------------------------------- */
.bfiwm-footbar-cta {
	margin-block-end: 0.35rem;
}

.bfiwm-footbar-cta__text {
	margin: 0 0 1.1rem;
	max-width: 42rem;
	font-family: var(--wp--preset--font-family--body, "Plus Jakarta Sans", sans-serif);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--foreground);
}

/* ---------------------------------------------------------------------------
 * Footer pill row.
 *
 * One row, spread edge to edge across the footer's content column, so the pills sit on a
 * single line at a single height rather than reading as a button plus some leftovers.
 *
 * space-between is what does the spreading, and it means the ORDER of the array in
 * bfiwm_footer_links_map() is the layout: first entry hard left, last entry hard right, the
 * rest spaced evenly between them.
 *
 * Only from 600px up. space-between on a wrapped row leaves the last line spread across the
 * full width with gaping holes between two or three items, which looks like a mistake rather
 * than a layout. Below that the pills pack left on their natural gap and wrap normally.
 * --------------------------------------------------------------------------- */
.bfiwm-footpills ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.bfiwm-footpills ul {
		justify-content: space-between;
	}
}

.bfiwm-footpills li {
	margin: 0;
}


.bfiwm-footbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
}

.bfiwm-footbar__legal {
	margin: 0;
	flex: 1 1 22rem;
	font-family: var(--wp--preset--font-family--body, "Plus Jakarta Sans", sans-serif);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--foreground);
}

.bfiwm-social {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 0 0 auto;
}

.bfiwm-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	color: var(--wp--preset--color--foreground);
	transition: background-color 0.15s, color 0.15s;
}

.bfiwm-social svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	display: block;
}

.bfiwm-social a:hover,
.bfiwm-social a:focus-visible {
	color: var(--wp--preset--color--secondary);
	background-color: var(--wp--preset--color--primary);
	outline: none;
}

.bfiwm-social a:focus-visible {
	box-shadow: 0 0 0 4px var(--bfiwm-ff-gold);
}

/* On a narrow screen the bar stacks, so the icons sit under the attribution
   rather than being squeezed alongside it. */
@media (max-width: 600px) {
	.bfiwm-footbar {
		justify-content: flex-start;
	}
}


/* ---------------------------------------------------------------------------
 * Who delivers the Hub: three organisations, logo then description.
 *
 * The photograph above this section is the StoryPoint building, so naming only
 * Rural Media and Rural Studios read oddly. Each of the three now identifies
 * itself with its own mark, which also means the prose does not have to open
 * by explaining what each name refers to.
 *
 * All three marks are the supplied white-on-transparent lockups, used as their
 * owners issued them. Nothing is recoloured. That works here because the page
 * background is navy: theme.json sets `background` to #103A4D, so white is the
 * page's own text colour, not a treatment invented for this section.
 *
 * The three lockups are within a whisker of the same proportion, which is why
 * one fixed column width lines all three up without per-logo nudging:
 *
 *   StoryPoint      1996 x 630   3.17 : 1
 *   Rural Media     2075 x 625   3.32 : 1
 *   Rural Studios   2178 x 623   3.50 : 1
 *
 * At 150px wide they stand 47, 45 and 43px tall. Matching the width rather than
 * the height is right here: these are wordmarks read left to right, so equal
 * width reads as equal weight. The stacked UK Gov lockup in the footer needed
 * the opposite treatment, because it is a dense block rather than a line.
 * --------------------------------------------------------------------------- */

.bfiwm-delivery {
	margin-block: 1.75rem 2rem;
}

.bfiwm-delivery__row {
	margin-block: 0;
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 1.75rem;
	align-items: start;
	padding-block: 1.5rem;
}

/* Separators between the three, not around them: a rule above the first and
   below the last would box the group in and read as a table. */
.bfiwm-delivery__row + .bfiwm-delivery__row {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.bfiwm-delivery__row > figure {
	margin: 0;
}

.bfiwm-delivery__row img {
	display: block;
	width: 150px;
	max-width: 100%;
	height: auto;
	/* theme.json sets core/image border.radius to 16px, so every image on the
	   site carries a rounded-rectangle mask. All three lockups run to the edge
	   of their canvas, so the curve clips real ink. Same cause as the brandbar
	   and the footer, noted further up this file. */
	border-radius: 0;
}

.bfiwm-delivery__row > :last-child {
	margin: 0;
}

/* The logo sits on its own line below 640px. Left-aligned rather than centred,
   so the mark still starts where its description starts. */
@media (max-width: 640px) {
	.bfiwm-delivery__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
		padding-block: 1.35rem;
	}

	.bfiwm-delivery__row img {
		width: 132px;
	}
}


/* ---------------------------------------------------------------------------
 * A button at the foot of an offer card.
 *
 * `.bfiwm-offer` is a flex column, so a buttons block inside it sits directly
 * under the text and lands at a different height in each card whenever the two
 * descriptions run to different lengths. `margin-top: auto` pushes it to the
 * bottom of the card instead, so a row of cards has its buttons on one line.
 * --------------------------------------------------------------------------- */

.bfiwm-offer > .wp-block-buttons {
	margin-top: auto;
	margin-bottom: 0;
}


/* ---------------------------------------------------------------------------
 * The two closing options on the Hub page.
 *
 * Scoped to its own class rather than changing `.bfiwm-offer`, because the same
 * card class carries the route pairs higher up the page and those are settled.
 *
 * Two measured corrections:
 *
 * 1. The heading sat 21px above the cards. `.bfiwm-offers` asks for 2rem, but
 *    `.bfiwm-offers--pair` resets it to 0 (correct there: the route pairs sit
 *    inside wrappers that supply their own spacing). With no margin of its own
 *    the grid was left with only the h2's 21px bottom margin, which is too tight
 *    against the top edge of a card. Restored to 2rem, which collapses with the
 *    h2 margin to a 32px gap.
 *
 * 2. The cards were larger than their contents needed. Measured at 339 x 214
 *    around 136px of content: 49.6px of vertical padding and 27.2px of internal
 *    gaps. Padding and gap both come down, taking the card to roughly 195px with
 *    the text sitting closer to its edges. Nothing is cropped, because the box
 *    height was always padding plus gaps plus content and never contained slack.
 * --------------------------------------------------------------------------- */

.bfiwm-offers.bfiwm-nextstep {
	margin: 2rem 0 1rem;
}

.bfiwm-nextstep .bfiwm-offer {
	padding: 1.15rem 1.25rem 1.25rem;
	gap: 0.65rem;
}

/* ---- Audience badges -----------------------------------------------------
   Used on the Where We're At page to say who each thing is for. Navy text on a
   light chip, because a chip is small and small light-on-dark text is the first
   thing to become unreadable. Every combination measured against the navy page:

     BFI Hub               #E1B15D   6.14:1
     BFI FA Alumni         #EAC892   7.60:1
     BFI Intro Course      #9FD2C0   7.18:1
     BFI Year Round        #F2BEBA   7.41:1
     BFI Delivery Partners #CBBCCF   6.71:1

   Accent coral (#E67675) is deliberately absent: it measures 4.16:1, under the
   4.5 needed for text this size.

   To add one in the editor, copy an existing span and change the last class. */
.bfiwm-badge {
	display: inline-block;
	padding: 0.15em 0.6em;
	margin: 0 0.25em 0.25em 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #E1B15D);
	color: var(--wp--preset--color--secondary, #103A4D);
	font-family: var(--wp--preset--font-family--display, 'Jost', sans-serif);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	white-space: nowrap;
	vertical-align: middle;
}

.bfiwm-badge--hub      { background: #E1B15D; }
.bfiwm-badge--alumni   { background: #EAC892; }
.bfiwm-badge--intro    { background: #9FD2C0; }
.bfiwm-badge--yearround{ background: #F2BEBA; }
.bfiwm-badge--partners { background: #CBBCCF; }


/* ---- Sign in -------------------------------------------------------------
   wp_login_form() emits WordPress's own markup, not Fluent Forms', so none of the
   .fluentform rules above reach it. These restate the same look against core's
   class names, so the sign-in panel and the registration form are siblings rather
   than cousins. Focus rings match the 6.14:1 solid gold used everywhere else. */
.bfiwm-signin .login-username,
.bfiwm-signin .login-password {
	margin-bottom: 1.1rem;
}

.bfiwm-signin label {
	display: block;
	margin-bottom: 0.45rem;
	color: var(--bfiwm-ff-white, #FFFFFF);
	font-size: 1rem;
	font-weight: 500;
}

.bfiwm-signin input[type="text"],
.bfiwm-signin input[type="password"] {
	width: 100%;
	background-color: #FFFFFF;
	color: #103A4D;
	border: 2px solid transparent;
	border-radius: 0.5rem;
	padding: 0.8rem 1rem;
	font-size: 1rem;
	line-height: 1.4;
	font-family: var(--wp--preset--font-family--body, 'Plus Jakarta Sans', sans-serif);
}

.bfiwm-signin input[type="text"]:focus-visible,
.bfiwm-signin input[type="password"]:focus-visible {
	outline: none;
	border-color: #E1B15D;
	box-shadow: 0 0 0 4px #E1B15D;
}

/* The remember box gets the same 24px target as every other control on the site. */
.bfiwm-signin .login-remember label {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-weight: 400;
}

.bfiwm-signin .login-remember input[type="checkbox"] {
	width: 1.5rem;
	height: 1.5rem;
	accent-color: #E1B15D;
	flex: 0 0 auto;
}

.bfiwm-signin .login-remember input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px #E1B15D;
}

.bfiwm-signin .login-submit input[type="submit"] {
	background-color: #E1B15D;
	color: #103A4D;
	border: 0;
	border-radius: 999px;
	padding: 0.85rem 2rem;
	font-family: var(--wp--preset--font-family--display, 'Jost', sans-serif);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	margin-top: 0.5rem;
}

.bfiwm-signin .login-submit input[type="submit"]:hover { opacity: 0.92; }

.bfiwm-signin .login-submit input[type="submit"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px #FFFFFF;
}

/* Errors are announced (role="alert" in the markup) as well as coloured, because
   colour alone carries nothing to a screen reader. */
.bfiwm-signin__notice {
	background: rgba(230, 118, 117, 0.16);
	border-left: 4px solid #E67675;
	border-radius: 0.4rem;
	padding: 0.85rem 1rem;
	margin-bottom: 1.4rem;
	color: #FFFFFF;
}

.bfiwm-signin__help {
	margin-top: 1rem;
	font-size: 0.95rem;
	color: var(--wp--preset--color--tertiary, #9ABAC0);
}

.bfiwm-signin__help a { color: #E1B15D; }

.bfiwm-signin--done p { color: #FFFFFF; }

/* The button sits in its own paragraph directly under the "signed in as" line, and the
   default paragraph gap left them touching. The action needs room to read as an action. */
.bfiwm-signin--done p + p {
	margin-top: 1.6rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
}

/* ---- Field measure -------------------------------------------------------
   The panel now matches the 1000px site column so it lines up with everything
   else, which leaves a single-line input around 900px wide. That was the original
   objection to widening it. Capping the single-line fields keeps them comfortable
   without the panel having to be narrow.

   Textareas, the address block and anything in columns are left alone: they use
   the width, and constraining them would reintroduce the ragged look. */
.fluentform.ff-default input[type="text"].ff-el-form-control,
.fluentform.ff-default input[type="email"].ff-el-form-control,
.fluentform.ff-default input[type="tel"].ff-el-form-control,
.fluentform.ff-default input[type="number"].ff-el-form-control,
.fluentform.ff-default input[type="date"].ff-el-form-control,
.fluentform.ff-default select.ff-el-form-control,
.bfiwm-signin input[type="text"],
.bfiwm-signin input[type="password"] {
	max-width: 34rem;
}

/* The address block lays its parts out in a grid, so its inputs stay full width. */
.fluentform.ff-default .ff-t-cell input.ff-el-form-control,
.fluentform.ff-default .ff-t-cell select.ff-el-form-control {
	max-width: 100%;
}

/* ---- Status list ---------------------------------------------------------
   Badges used to sit inline at the end of the sentence, which meant they broke
   across lines mid-group and the whole thing read as one grey block. They now get
   their own row under each item.

   No bullet markers: every item already opens with a bold title, so the marker was
   a second signal saying the same thing. A hairline separates entries instead, which
   also stops the badge row of one item reading as part of the next. */
.bfiwm-status {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.bfiwm-status li {
	line-height: 1.6;
	padding-bottom: 1.4rem;
	margin-bottom: 1.4rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.bfiwm-status li:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}

/* The badge row. gap does the spacing, so the per-badge margin is cleared or the
   two compound and the row looks loose. */
.bfiwm-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.75rem;
}

.bfiwm-badges .bfiwm-badge {
	margin: 0;
}

/* ---- Badge key -----------------------------------------------------------
   One badge per line with its meaning beside it. The badge column is fixed so the
   explanations start at the same place and the eye can run down them. Below 600px
   it stacks, because a fixed column plus a long badge leaves no room for the text. */
.bfiwm-key {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.bfiwm-key li {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	margin-bottom: 0.65rem;
}

.bfiwm-key li:last-child {
	margin-bottom: 0;
}

.bfiwm-key .bfiwm-badge {
	flex: 0 0 auto;
	min-width: 11.5rem;
	margin: 0;
	text-align: center;
}

@media (max-width: 600px) {
	.bfiwm-key li {
		display: block;
	}
	.bfiwm-key .bfiwm-badge {
		min-width: 0;
		margin-bottom: 0.3rem;
	}
}
/* ---------------------------------------------------------------------------
 * What's On listing
 *
 * Deliberately the launch event card, extended. The first attempt used a
 * square image and a white card, which on this navy page produced tall cards
 * with invisible text: the body inherited white type onto a white panel. So
 * the card has NO background colour of its own, only a translucent wash, and
 * the coloured band carries the identity.
 *
 * Mobile first. auto-fit with a minimum width means one column on a phone and
 * as many as fit on a desktop, with no breakpoint to maintain.
 * ------------------------------------------------------------------------ */

.bfiwm-wo__section { margin-block: 2.5rem; }
.bfiwm-wo__head { margin: 0 0 .2rem; }
.bfiwm-wo__sub { margin: 0 0 1.25rem; font-size: .9375rem; opacity: .8; }

.bfiwm-wo__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.25rem;
}

.bfiwm-wo__card {
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	/* A wash, not a fill, so the page's own text colour stays readable. */
	background: rgba(255, 255, 255, .05);
}
.bfiwm-wo__card[data-state="closed"],
.bfiwm-wo__card[data-state="past"] { opacity: .72; }

/* The coloured band: area, date, and the state flag. Text is always the dark
   brand navy because every band colour is a light brand pastel. */
.bfiwm-wo__band {
	position: relative;
	padding: 1.1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .3rem;
	color: #103A4D;
}
.bfiwm-wo__area {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	opacity: .75;
}
.bfiwm-wo__date { font-size: 1.0625rem; font-weight: 700; line-height: 1.2; }

.bfiwm-wo__flag {
	position: absolute;
	inset-block-start: .9rem;
	inset-inline-end: 1rem;
	padding: .2rem .5rem;
	border-radius: .25rem;
	background: #7a2224;
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* Optional, and modest. Never a square, which forced every card tall. */
.bfiwm-wo__media { aspect-ratio: 16 / 9; overflow: hidden; }
.bfiwm-wo__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bfiwm-wo__body {
	padding: 1.15rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.bfiwm-wo__title { margin: 0 0 .3rem; font-size: 1.0625rem; line-height: 1.25; }
.bfiwm-wo__meta { margin: 0 0 .55rem; font-size: .8125rem; opacity: .75; }

/* Who it is for. An outline pill rather than a filled one, so it reads as a
   label and never competes with the button. */
.bfiwm-wo__audience {
	margin: 0 0 .75rem;
	align-self: start;
	padding: .2rem .55rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 700;
	opacity: .85;
}

.bfiwm-wo__desc p { margin: 0 0 .9rem; font-size: .9375rem; }
.bfiwm-wo__desc p:last-child { margin-bottom: 0; }

.bfiwm-wo__foot { margin-block-start: auto; padding-block-start: 1rem; }
.bfiwm-wo__btn { display: inline-block; font-size: .875rem; padding: .6rem 1.2rem; }
.bfiwm-wo__btn--route { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.bfiwm-wo__btn:focus-visible { outline: 3px solid var(--bfiwm-ff-gold, #EAC892); outline-offset: 2px; }
.bfiwm-wo__note { margin: .6rem 0 0; font-size: .75rem; opacity: .7; }

.bfiwm-wo__empty { padding: 1.25rem 0; }

/* Impossible to mistake a preview for the real page. */
.bfiwm-wo__preview {
	margin: 0 0 1.5rem;
	padding: .7rem 1rem;
	border-radius: .35rem;
	background: var(--bfiwm-gold, #EAC892);
	color: #103A4D;
	font-size: .9375rem;
}
.bfiwm-wo__preview a { color: inherit; }