/* ==========================================================================
   Braeside — layout stylesheet.
   Design tokens come from theme.json (--wp--preset--* and --wp--custom--*).
   The section grids reproduce the Squarespace 7.1 fluid engine:
     desktop  = 24 content columns + 2 gutter columns, 11px gaps,
                row height = container width × 0.0215
     mobile   = 8 content columns + 2 gutter columns, rows ≥ 24px
   Every number here was measured on the live site (see discovery.md).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens derived from theme.json
   -------------------------------------------------------------------------- */
:root {
	--bs-max: var(--wp--custom--layout--max-width, 1000px);
	--bs-gutter: var(--wp--custom--layout--gutter, 4vw);
	--bs-gap: var(--wp--custom--layout--gap, 11px);
	--bs-cols: 24;
	--bs-header-h: var(--wp--custom--layout--header-height, 168px);
	--bs-container: min(var(--bs-max), calc(100vw - 2 * var(--bs-gutter)));
	--bs-row: calc(var(--bs-container) * var(--wp--custom--layout--row-factor, 0.0215));
	--bs-row-min: var(--bs-row);
	--bs-cell: calc((var(--bs-max) - (var(--bs-gap) * 23)) / 24);
	--bs-pad-small: var(--wp--custom--section--small-padding, 3.3vmax);
	--bs-pad-medium: var(--wp--custom--section--medium-padding, 6.6vmax);
	--bs-min-small: var(--wp--custom--section--small-min-height, 33vh);
	--bs-min-medium: var(--wp--custom--section--medium-min-height, 66vh);

	/* Squarespace fluid type, desktop:
	   min((v-1)*1.2vw + 1rem, max((v-1)*0.012*maxPageWidth + 1rem, v*1rem)) */
	--bs-fs-heading-1: min(calc((var(--wp--custom--type-scale--heading-1) - 1) * 1.2vw + 1rem), max(calc((var(--wp--custom--type-scale--heading-1) - 1) * 0.012 * var(--bs-max) + 1rem), calc(var(--wp--custom--type-scale--heading-1) * 1rem)));
	--bs-fs-heading-2: min(calc((var(--wp--custom--type-scale--heading-2) - 1) * 1.2vw + 1rem), max(calc((var(--wp--custom--type-scale--heading-2) - 1) * 0.012 * var(--bs-max) + 1rem), calc(var(--wp--custom--type-scale--heading-2) * 1rem)));
	--bs-fs-heading-3: min(calc((var(--wp--custom--type-scale--heading-3) - 1) * 1.2vw + 1rem), max(calc((var(--wp--custom--type-scale--heading-3) - 1) * 0.012 * var(--bs-max) + 1rem), calc(var(--wp--custom--type-scale--heading-3) * 1rem)));
	--bs-fs-heading-4: min(calc((var(--wp--custom--type-scale--heading-4) - 1) * 1.2vw + 1rem), max(calc((var(--wp--custom--type-scale--heading-4) - 1) * 0.012 * var(--bs-max) + 1rem), calc(var(--wp--custom--type-scale--heading-4) * 1rem)));
	--bs-fs-large: min(calc((var(--wp--custom--type-scale--large) - 1) * 1.2vw + 1rem), max(calc((var(--wp--custom--type-scale--large) - 1) * 0.012 * var(--bs-max) + 1rem), calc(var(--wp--custom--type-scale--large) * 1rem)));
	--bs-fs-normal: calc(var(--wp--custom--type-scale--normal) * 1rem);
	--bs-fs-small: min(calc((var(--wp--custom--type-scale--small) - 1) * 1.2vw + 1rem), max(calc((var(--wp--custom--type-scale--small) - 1) * 0.012 * var(--bs-max) + 1rem), calc(var(--wp--custom--type-scale--small) * 1rem)));

	/* button colours resolved per section theme (defaults = white theme) */
	--bs-btn-bg: var(--wp--preset--color--black);
	--bs-btn-text: var(--wp--preset--color--white);
	--bs-btn-hover-bg: var(--wp--preset--color--dark-accent);
	--bs-btn-hover-text: var(--wp--preset--color--white);
	--bs-outline: var(--wp--preset--color--black);
}

@media (max-width: 767px) {
	:root {
		--bs-gutter: var(--wp--custom--layout--mobile-gutter, 6vw);
		--bs-cols: 8;
		--bs-header-h: var(--wp--custom--layout--mobile-header-height, 132px);
		--bs-row-min: var(--wp--custom--layout--mobile-row, 24px);
		--bs-cell: calc((var(--bs-max) - (var(--bs-gap) * 7)) / 8);

		/* Squarespace fluid type, mobile: (v-1) * 0.012 * min(100vh, 900px) + 1rem */
		--bs-fs-heading-1: calc((var(--wp--custom--type-scale--heading-1) - 1) * 0.012 * min(100vh, 900px) + 1rem);
		--bs-fs-heading-2: calc((var(--wp--custom--type-scale--heading-2) - 1) * 0.012 * min(100vh, 900px) + 1rem);
		--bs-fs-heading-3: calc((var(--wp--custom--type-scale--heading-3) - 1) * 0.012 * min(100vh, 900px) + 1rem);
		--bs-fs-heading-4: calc((var(--wp--custom--type-scale--heading-4) - 1) * 0.012 * min(100vh, 900px) + 1rem);
		--bs-fs-large: calc((var(--wp--custom--type-scale--large) - 1) * 0.012 * min(100vh, 900px) + 1rem);
		--bs-fs-small: calc((var(--wp--custom--type-scale--small) - 1) * 0.012 * min(100vh, 900px) + 1rem);
	}
}

/* Section themes (same names as Squarespace) */
.has-black-background-color,
.has-dark-accent-background-color,
.bs-header,
.bs-footer {
	--bs-btn-bg: var(--wp--preset--color--accent);
	--bs-btn-text: var(--wp--preset--color--black);
	--bs-btn-hover-bg: var(--wp--preset--color--white);
	--bs-btn-hover-text: var(--wp--preset--color--black);
	--bs-outline: var(--wp--preset--color--accent);
}
.has-white-background-color,
.has-light-accent-background-color {
	--bs-btn-bg: var(--wp--preset--color--black);
	--bs-btn-text: var(--wp--preset--color--white);
	--bs-btn-hover-bg: var(--wp--preset--color--dark-accent);
	--bs-btn-hover-text: var(--wp--preset--color--white);
	--bs-outline: var(--wp--preset--color--black);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
body {
	margin: 0;
	min-height: 100vh;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
img,
video {
	max-width: 100%;
	height: auto;
}
a {
	text-underline-offset: 0.12em;
}
.bs-main {
	position: relative;
	display: block;
}
body.bs-no-hero .bs-main {
	padding-top: var(--bs-header-h);
}
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Buttons (primary = solid + 15px radius, secondary = 1px outline, square)
   -------------------------------------------------------------------------- */
.wp-block-button .wp-block-button__link {
	background-color: var(--bs-btn-bg);
	color: var(--bs-btn-text);
	border: 0;
	border-radius: var(--wp--custom--button--primary-radius, 15px);
	padding: var(--wp--custom--button--primary-padding-y, 1.5em) var(--wp--custom--button--primary-padding-x, 2.2em);
	line-height: 1.2;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible {
	background-color: var(--bs-btn-hover-bg);
	color: var(--bs-btn-hover-text);
}
.wp-block-button.is-style-secondary .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--bs-outline);
	border: var(--wp--custom--button--secondary-border, 1px) solid var(--bs-outline);
	border-radius: 0;
	padding: var(--wp--custom--button--secondary-padding-y, 1.2em) var(--wp--custom--button--secondary-padding-x, 1.3em);
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:focus-visible,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--bs-outline);
	color: var(--bs-btn-text);
}

/* --------------------------------------------------------------------------
   4. Fluid-engine section grid
   -------------------------------------------------------------------------- */
.bs-section {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	display: grid;
	grid-template-columns:
		minmax(calc(var(--bs-gutter) - var(--bs-gap)), 1fr)
		repeat(var(--bs-cols), minmax(0, var(--bs-cell)))
		minmax(calc(var(--bs-gutter) - var(--bs-gap)), 1fr);
	grid-template-rows: repeat(var(--bs-rows, 1), minmax(var(--bs-row-min), auto));
	grid-auto-rows: minmax(var(--bs-row-min), auto);
	column-gap: var(--bs-gap);
	row-gap: var(--bs-gap);
	padding-block: var(--bs-pad, var(--bs-pad-small));
	min-height: var(--bs-min-h, var(--bs-min-small));
	align-content: center;
	overflow-x: clip;
}
@media (max-width: 767px) {
	.bs-section {
		grid-template-rows: repeat(var(--bs-rows-m, var(--bs-rows, 1)), minmax(var(--bs-row-min), auto));
	}
}

/* grid cells: direct children of a section */
.bs-section > * {
	margin: 0;
	min-width: 0;
	min-height: 0;
	align-self: start;
	box-sizing: border-box;
}
.bs-section > .bs-cell--middle {
	align-self: center;
}
.bs-section > .bs-cell--bottom {
	align-self: end;
}

/* images fill their cell (object-fit: cover, like Squarespace fluid images) */
.bs-section > figure.wp-block-image,
.bs-fill {
	position: relative;
	align-self: stretch;
	height: 100%;
	overflow: hidden;
}
.bs-section > figure.wp-block-image img,
.bs-fill img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* "stretched" buttons fill the whole cell */
.bs-section > .wp-block-buttons {
	align-self: stretch;
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
}
.bs-section > .wp-block-buttons > .wp-block-button {
	display: flex;
	flex: 1 1 auto;
	align-self: stretch;
	width: 100%;
	height: 100%;
	margin: 0;
}
.bs-section > .wp-block-buttons .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	width: 100%;
	padding-top: 0;
	padding-bottom: 0;
	line-height: normal;
}

/* Text blocks: first/last child margins collapse to the cell edge */
.bs-section > p,
.bs-section > .wp-block-heading {
	margin: 0;
}

/* --------------------------------------------------------------------------
   5. Section 1 — hero video (Cover block)
   -------------------------------------------------------------------------- */
.wp-block-cover.bs-hero {
	min-height: var(--bs-min-small);
	padding: calc(var(--bs-header-h) + var(--bs-pad-small)) 0 var(--bs-pad-small);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
}
.wp-block-cover.bs-hero .wp-block-cover__inner-container {
	width: 100%;
	height: calc(18 * var(--bs-row) + 17 * var(--bs-gap));
	pointer-events: none;
}
.wp-block-cover.bs-hero .wp-block-cover__inner-container > * {
	display: none;
}
@media (max-width: 767px) {
	.wp-block-cover.bs-hero .wp-block-cover__inner-container {
		height: calc(11 * var(--bs-row-min) + 10 * var(--bs-gap));
	}
}

/* --------------------------------------------------------------------------
   6. Section 2 — intro (image right, heading / text / button left)
   -------------------------------------------------------------------------- */
.bs-intro {
	--bs-rows: 16;
	--bs-rows-m: 23;
	--bs-pad: var(--bs-pad-small);
	--bs-min-h: var(--bs-min-small);
}
.bs-intro > .bs-intro__image   { grid-area: 1 / 17 / 17 / 25; }
.bs-intro > .bs-intro__heading { grid-area: 3 / 3 / 8 / 13; }
.bs-intro > .bs-intro__text    { grid-area: 8 / 3 / 12 / 12; }
.bs-intro > .bs-intro__button  { grid-area: 13 / 3 / 15 / 12; }
@media (max-width: 767px) {
	.bs-intro > .bs-intro__image   { grid-area: 1 / 2 / 12 / 8; }
	.bs-intro > .bs-intro__heading { grid-area: 13 / 2 / 17 / 10; }
	.bs-intro > .bs-intro__text    { grid-area: 17 / 2 / 22 / 9; }
	.bs-intro > .bs-intro__button  { grid-area: 22 / 2 / 24 / 10; }
}

/* --------------------------------------------------------------------------
   7. Section 3 — five-image strip (Gallery block, zero gap)
   -------------------------------------------------------------------------- */
.wp-block-gallery.bs-strip.has-nested-images {
	--bs-rows: 14;
	--bs-rows-m: 33;
	--bs-gap: 0px;
	--bs-cell: calc(var(--bs-max) / 24);
	--bs-pad: 0.1vmax;
	--bs-min-h: 1vh;
	display: grid;
	gap: 0;
	margin: 0;
	align-items: stretch;
}
@media (max-width: 767px) {
	.wp-block-gallery.bs-strip.has-nested-images {
		--bs-cell: calc(var(--bs-max) / 8);
	}
}
.wp-block-gallery.bs-strip.has-nested-images figure.wp-block-image:not(#individual-image) {
	position: relative;
	width: auto;
	height: 100%;
	min-height: 0;
	margin: 0;
	flex: none;
	align-self: stretch;
	overflow: hidden;
}
.wp-block-gallery.bs-strip.has-nested-images figure.wp-block-image:not(#individual-image) img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}
.bs-strip > .bs-strip__1 { grid-area: 1 / 1 / 15 / 5; }
.bs-strip > .bs-strip__2 { grid-area: 1 / 5 / 15 / 11; }
.bs-strip > .bs-strip__3 { grid-area: 1 / 11 / 15 / 17; }
.bs-strip > .bs-strip__4 { grid-area: 1 / 17 / 15 / 23; }
.bs-strip > .bs-strip__5 { grid-area: 1 / 23 / 15 / 27; }
@media (max-width: 767px) {
	.bs-strip > .bs-strip__1 { grid-area: 1 / 6 / 12 / 11; }
	.bs-strip > .bs-strip__2 { grid-area: 23 / 1 / 34 / 6; }
	.bs-strip > .bs-strip__3 { grid-area: 1 / 1 / 12 / 6; }
	.bs-strip > .bs-strip__4 { grid-area: 23 / 6 / 34 / 11; }
	.bs-strip > .bs-strip__5 { grid-area: 12 / 1 / 23 / 11; }
}

/* --------------------------------------------------------------------------
   8. Section 4 — "Love Letters" (heading + three quotes)
   -------------------------------------------------------------------------- */
.bs-letters {
	--bs-rows: 15;
	--bs-rows-m: 25;
	--bs-pad: var(--bs-pad-medium);
	--bs-min-h: var(--bs-min-medium);
}
.bs-letters > .bs-letters__heading { grid-area: 1 / 2 / 3 / 26; }
.bs-letters > .bs-letters__1 { grid-area: 5 / 2 / 15 / 10; }
.bs-letters > .bs-letters__2 { grid-area: 5 / 10 / 15 / 18; }
.bs-letters > .bs-letters__3 { grid-area: 5 / 18 / 16 / 26; }
@media (max-width: 767px) {
	.bs-letters > .bs-letters__heading { grid-area: 2 / 2 / 5 / 10; }
	.bs-letters > .bs-letters__1 { grid-area: 6 / 2 / 12 / 10; }
	.bs-letters > .bs-letters__2 { grid-area: 13 / 2 / 19 / 10; }
	.bs-letters > .bs-letters__3 { grid-area: 20 / 2 / 26 / 10; }
}
.wp-block-quote {
	border: 0;
	padding: 0;
	margin: 0;
	font-style: normal;
	font-size: var(--wp--preset--font-size--normal);
	line-height: var(--wp--custom--body--line-height, 1.5);
}
.wp-block-quote p {
	margin: 1rem 0;
}
.wp-block-quote > :first-child {
	margin-top: 0;
}
.wp-block-quote cite,
.wp-block-quote footer {
	display: block;
	font-style: normal;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin-top: 1rem;
	position: static;
}

/* --------------------------------------------------------------------------
   9. Section 5 — full-width image band (Cover block, no content)
   -------------------------------------------------------------------------- */
.wp-block-cover.bs-band {
	min-height: var(--bs-min-medium);
	padding: 0;
}
.wp-block-cover.bs-band .wp-block-cover__background {
	opacity: 0.15;
}
.wp-block-cover.bs-band .wp-block-cover__inner-container > * {
	display: none;
}

/* --------------------------------------------------------------------------
   10. Section 6 — "We'd Love to Host You" (heading, accordion, button)
   -------------------------------------------------------------------------- */
.bs-host {
	--bs-rows: 23;
	--bs-rows-m: 20;
	--bs-pad: var(--bs-pad-medium);
	--bs-min-h: var(--bs-min-medium);
}
.bs-host > .bs-host__heading   { grid-area: 1 / 5 / 6 / 23; }
.bs-host > .bs-host__accordion { grid-area: 7 / 6 / 21 / 22; }
.bs-host > .bs-host__button    { grid-area: 22 / 6 / 24 / 22; }
@media (max-width: 767px) {
	.bs-host > .bs-host__heading   { grid-area: 1 / 2 / 6 / 10; }
	.bs-host > .bs-host__accordion { grid-area: 6 / 2 / 19 / 10; }
	.bs-host > .bs-host__button    { grid-area: 19 / 2 / 21 / 9; }
}

/* Accordion = Group of Details blocks */
.bs-accordion {
	border-top: var(--wp--custom--accordion--divider-thickness, 1px) solid currentColor;
}
.bs-accordion > .wp-block-details {
	margin: 0;
	padding: 0;
	border-bottom: var(--wp--custom--accordion--divider-thickness, 1px) solid currentColor;
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--body--line-height, 1.5);
}
.bs-accordion summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: var(--wp--custom--accordion--title-padding-top, 10px) 0 var(--wp--custom--accordion--title-padding-bottom, 15px);
	line-height: 1.12;
	font-size: inherit;
}
.bs-accordion summary::-webkit-details-marker {
	display: none;
}
.bs-accordion summary::after {
	content: "";
	flex: 0 0 var(--wp--custom--accordion--icon-size, 14px);
	width: var(--wp--custom--accordion--icon-size, 14px);
	height: var(--wp--custom--accordion--icon-size, 14px);
	background:
		linear-gradient(currentColor, currentColor) center / 100% var(--wp--custom--accordion--icon-thickness, 2px) no-repeat,
		linear-gradient(currentColor, currentColor) center / var(--wp--custom--accordion--icon-thickness, 2px) 100% no-repeat;
}
.bs-accordion details[open] > summary::after {
	background: linear-gradient(currentColor, currentColor) center / 100% var(--wp--custom--accordion--icon-thickness, 2px) no-repeat;
}
.bs-accordion .wp-block-details > :not(summary) {
	width: var(--wp--custom--accordion--description-width, 70%);
	margin: 1rem auto;
}
.bs-accordion .wp-block-details > :not(summary):last-child {
	margin-bottom: calc(1rem + var(--wp--custom--accordion--description-padding-bottom, 30px));
}
@media (max-width: 767px) {
	.bs-accordion .wp-block-details > :not(summary) {
		width: 100%;
		max-width: 300px;
	}
}

/* --------------------------------------------------------------------------
   11. Section 7 — testimonial over image (inset Cover block)
   -------------------------------------------------------------------------- */
.wp-block-cover.bs-quote-band {
	--bs-container: min(var(--bs-max), calc(100vw - 4 * var(--bs-gutter)));
	width: 100%;
	margin: 0;
	min-height: calc(var(--bs-min-small) + 2vw);
	padding: 0;
	border: 1vw solid var(--wp--preset--color--dark-accent);
	box-sizing: border-box;
	isolation: isolate;
}
.wp-block-cover.bs-quote-band .wp-block-cover__inner-container {
	width: 100%;
	box-sizing: border-box;
	display: grid;
	grid-template-columns:
		minmax(calc(var(--bs-gutter) - var(--bs-gap)), 1fr)
		repeat(var(--bs-cols), minmax(0, var(--bs-cell)))
		minmax(calc(var(--bs-gutter) - var(--bs-gap)), 1fr);
	grid-template-rows: repeat(18, minmax(var(--bs-row-min), auto));
	grid-auto-rows: minmax(var(--bs-row-min), auto);
	column-gap: var(--bs-gap);
	row-gap: var(--bs-gap);
	padding-block: var(--bs-pad-small);
	color: var(--wp--preset--color--white);
}
.bs-quote-band__text {
	grid-area: 3 / 5 / 18 / 23;
	align-self: center;
	text-align: center;
	margin: 0;
	min-width: 0;
}
.bs-quote-band__text > .wp-block-heading {
	margin: 0 0 2rem;
}
.bs-quote-band__text > p {
	margin: 1rem 0 0;
}
@media (max-width: 767px) {
	.wp-block-cover.bs-quote-band .wp-block-cover__inner-container {
		grid-template-rows: repeat(21, minmax(var(--bs-row-min), auto));
	}
	.bs-quote-band__text {
		grid-area: 2 / 2 / 21 / 10;
	}
}

/* Cover blocks: core defaults that must not leak in */
.wp-block-cover .wp-block-cover__inner-container {
	color: var(--wp--preset--color--white);
}

/* --------------------------------------------------------------------------
   12. Header (fixed, transparent over the hero, solid when scrolled)
   -------------------------------------------------------------------------- */
.bs-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: var(--bs-header-h);
	color: var(--wp--preset--color--white);
	background-color: transparent;
	transition: background-color 0.25s ease;
}
.bs-header.is-solid,
body.bs-no-hero .bs-header,
body.bs-menu-open .bs-header {
	background-color: var(--wp--preset--color--black);
}
.bs-header__inner {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 1vw;
	box-sizing: border-box;
	position: relative;
}
.bs-header .wp-block-site-logo {
	flex: 0 0 auto;
	margin: 0;
	height: var(--bs-header-h);
	display: flex;
	align-items: center;
}
.bs-header .wp-block-site-logo a {
	display: block;
	line-height: 0;
}
.bs-header .wp-block-site-logo img {
	display: block;
	width: auto;
	height: var(--bs-header-h);
	max-height: var(--bs-header-h);
}
.bs-header .bs-classic-menu {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.bs-nav {
	padding-left: 3.5vw;
}
.bs-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
}
.bs-nav__item {
	margin: 0;
	position: relative;
}
.bs-nav__item + .bs-nav__item {
	margin-left: 2.2vw;
}
.bs-nav__link {
	font: inherit;
	line-height: 1.5;
	color: inherit;
	background: none;
	border: 0;
	padding: 0.1em 0;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}
.bs-nav__item.is-current > .bs-nav__link,
.bs-nav__link:hover,
.bs-nav__link:focus-visible {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: repeat-x;
	background-size: 1px 1px;
	background-position: 0 calc(100% - 0.1em);
	outline: none;
}
.bs-nav__folder {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 10;
	min-width: max-content;
	background-color: var(--wp--preset--color--black);
	padding: 8px 16px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s;
}
.bs-nav__item--folder:hover > .bs-nav__folder,
.bs-nav__item--folder.is-open > .bs-nav__folder,
.bs-nav__item--folder:focus-within > .bs-nav__folder {
	opacity: 1;
	visibility: visible;
}
.bs-nav__folder-item {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	line-height: 1.3;
	padding: 0.1em 0;
	white-space: nowrap;
}
.bs-nav__folder-item:hover,
.bs-nav__folder-item.is-current {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.bs-header__cta {
	flex: 0 0 auto;
	margin: 0 0 0 3.5vw;
}
.bs-header__cta .wp-block-button__link {
	line-height: normal;
	white-space: nowrap;
}

/* Narrower desktops: the seven nav items and the CTA need about
   993px + 22.2vw at the 1440 spacing, so tighten the gaps below 1440px
   and hand over to the burger below 1240px, where even that runs out. */
@media (max-width: 1439px) {
	.bs-nav {
		padding-left: 2.5vw;
	}
	.bs-nav__item + .bs-nav__item {
		margin-left: 1.8vw;
	}
}

/* burger + overlay (hidden on desktop) */
.bs-burger,
.bs-menu {
	display: none;
}
@media (max-width: 767px) {
	.bs-header__inner {
		padding: 0 6vw;
	}
	.bs-header .wp-block-site-logo {
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}
	.bs-header .wp-block-site-logo img {
		height: var(--wp--custom--layout--mobile-logo-height, 129px);
		max-height: var(--wp--custom--layout--mobile-logo-height, 129px);
	}
}
@media (max-width: 1239px) {
	.bs-header .bs-nav,
	.bs-header .bs-header__cta {
		display: none;
	}
	.bs-header__inner {
		justify-content: flex-end;
	}
	.bs-burger {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 35px;
		height: 12px;
		padding: 0;
		margin: 0 0 0 auto;
		background: none;
		border: 0;
		cursor: pointer;
		color: inherit;
		position: relative;
		z-index: 1001;
	}
	.bs-burger__line {
		display: block;
		width: 100%;
		height: 1px;
		background-color: currentColor;
		transition: transform 0.25s ease;
	}
	.bs-burger[aria-expanded="true"] .bs-burger__line:first-child {
		transform: translateY(5.5px) rotate(45deg);
	}
	.bs-burger[aria-expanded="true"] .bs-burger__line:last-child {
		transform: translateY(-5.5px) rotate(-45deg);
	}
	.bs-menu {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 999;
		background-color: var(--wp--preset--color--black);
		color: var(--wp--preset--color--white);
		padding-top: var(--bs-header-h);
		overflow-y: auto;
		box-sizing: border-box;
	}
	.bs-menu[hidden] {
		display: none;
	}
	.bs-menu__panel {
		min-height: calc(100vh - var(--bs-header-h));
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 3vw 5vw 8vw;
		box-sizing: border-box;
	}
	.bs-menu__list,
	.bs-menu__sublist {
		list-style: none;
		margin: 0;
		padding: 0;
		width: 100%;
		text-align: center;
	}
	.bs-menu__item {
		margin: 0;
	}
	.bs-menu__link {
		font: inherit;
		font-size: min(8.5vmin, 48px);
		line-height: 1;
		color: inherit;
		background: none;
		border: 0;
		margin: 0;
		padding: 3vw 5vw;
		display: inline-flex;
		align-items: center;
		text-decoration: none;
		cursor: pointer;
	}
	.bs-menu__link.is-current {
		text-decoration: underline;
		text-underline-offset: 0.15em;
		text-decoration-thickness: 1px;
	}
	.bs-menu__sublist .bs-menu__link {
		font-size: min(6vmin, 34px);
	}
	.bs-menu__chevron::after {
		content: "";
		display: inline-block;
		width: 0.3em;
		height: 0.3em;
		margin-left: 0.4em;
		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;
		transform: translateY(-0.1em) rotate(45deg);
	}
	.bs-menu__folder-title[aria-expanded="true"] .bs-menu__chevron::after {
		transform: translateY(0.1em) rotate(-135deg);
	}
	.bs-menu__cta {
		margin-top: 8vw;
	}
	.bs-menu__cta .wp-block-buttons {
		display: flex;
		justify-content: center;
	}
	.bs-menu__cta .wp-block-button__link {
		font-size: 1.2rem;
		line-height: normal;
	}
	body.bs-menu-open {
		overflow: hidden;
	}
}
@media (min-width: 768px) and (max-width: 1239px) {
	.bs-burger {
		margin-right: 3vw;
	}
}

/* --------------------------------------------------------------------------
   13. Footer (classic 12-column layout)
   -------------------------------------------------------------------------- */
.bs-footer {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	padding: var(--bs-pad-small) 1vw;
	min-height: var(--bs-min-small);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-x: clip;
}
.bs-footer__inner {
	flex: none;
	width: calc(min(100%, var(--bs-max)) + 34px);
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: start;
	margin: 0;
}
.bs-footer__inner > * {
	margin: 0;
	min-width: 0;
	padding: 0 17px;
	box-sizing: border-box;
}
.bs-footer__contact { grid-column: 2 / span 2; }
.bs-footer__brand   { grid-column: 5 / span 4; text-align: center; }
.bs-footer__links   { grid-column: 10 / span 2; }
.bs-footer__map     { grid-column: 12 / span 1; }

.bs-footer p {
	margin: 1rem 0;
}
.bs-footer__contact > :first-child,
.bs-footer__links > :first-child,
.bs-footer__brand > :first-child {
	margin-top: 0;
}
.bs-footer__contact > :last-child,
.bs-footer__links > :last-child {
	margin-bottom: 0;
}
.bs-footer a {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}
.bs-footer__brand > figure.wp-block-image {
	margin: 0;
	padding: 0 0 17px;
}
.bs-footer__brand > figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}
.bs-footer__brand > p {
	margin: 0;
	padding: 17px 0;
}
.bs-footer .wp-block-social-links {
	margin: 0;
	padding: 17px 0;
	justify-content: center;
	gap: 12px;
	font-size: 24px;
}
.bs-footer .wp-block-social-links .wp-social-link {
	margin: 0;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--white);
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bs-footer .wp-block-social-links .wp-social-link a {
	padding: 0;
	line-height: 0;
	color: inherit;
}
.bs-footer .wp-block-social-links .wp-social-link svg {
	width: 1em;
	height: 1em;
	fill: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}
.bs-footer__map {
	padding-bottom: 17px;
}
.bs-footer__map iframe {
	display: block;
	width: 300px;
	height: 200px;
	max-width: none;
	border: 0;
}
@media (max-width: 767px) {
	.bs-footer {
		padding: var(--bs-pad-small) 6vw;
	}
	.bs-footer__inner {
		display: block;
		width: calc(100% + 34px);
	}
	.bs-footer__inner > * {
		padding: 17px;
	}
	.bs-footer__inner > .bs-footer__brand {
		padding: 0 17px;
	}
	.bs-footer__brand > figure.wp-block-image {
		padding: 17px 0;
	}
	.bs-footer__map iframe {
		width: 300px;
		max-width: 100%;
	}
	.bs-footer__map {
		padding-bottom: 24px;
	}
}

/* --------------------------------------------------------------------------
   14. Inner pages (page.html, single.html, index.html)
   -------------------------------------------------------------------------- */
.bs-page {
	max-width: var(--bs-max);
	margin: 0 auto;
	padding: var(--bs-pad-medium) var(--bs-gutter);
	box-sizing: border-box;
	min-height: 50vh;
}
.bs-page > * + * {
	margin-top: 1.5rem;
}
.bs-page .wp-block-post-title {
	margin: 0 0 1.5rem;
}
.bs-page .wp-block-post-date,
.bs-page .wp-block-post-terms {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.8;
}
.bs-page .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}
.bs-page .wp-block-post-content > * + * {
	margin-top: 1rem;
}
.bs-page .wp-block-post-content > .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}
.bs-archive {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 3rem;
}
.bs-archive .wp-block-post {
	margin: 0;
}
.bs-archive .wp-block-post-title {
	font-size: var(--wp--preset--font-size--heading-3);
	line-height: 1.2;
}
.bs-archive .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.bs-archive .wp-block-post-title a:hover {
	text-decoration: underline;
}
.wp-block-query-pagination {
	display: flex;
	gap: 1rem;
	margin-top: 3rem;
}
.wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--dark-accent);
}

/* --------------------------------------------------------------------------
   15. Event landing pages (templates/landing.html)
   First used for the Christmas Party Open Day. Sections are plain groups
   with bs-ev-* classes on the same 24-column frame as the homepage, but
   with rows sized by their content. Header stays solid (body.bs-no-hero).
   -------------------------------------------------------------------------- */
.bs-ev {
	--bs-ev-space: clamp(72px, 6.5vw, 112px);
	--bs-ev-soft: var(--wp--preset--color--dark-accent);
	position: relative;
	box-sizing: border-box;
	margin: 0;
	scroll-margin-top: var(--bs-header-h);
}
/* zero-specificity defaults, so every rule below wins without !important */
.bs-ev :where(h1, h2, h3, p, figure, ul) {
	margin: 0;
}
.bs-ev :where(figure.wp-block-image) {
	position: relative;
	overflow: hidden;
}
.bs-ev :where(figure.wp-block-image) img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.bs-ev-route,
.bs-ev-formats,
.bs-ev-faq {
	display: grid;
	grid-template-columns:
		minmax(calc(var(--bs-gutter) - var(--bs-gap)), 1fr)
		repeat(var(--bs-cols), minmax(0, var(--bs-cell)))
		minmax(calc(var(--bs-gutter) - var(--bs-gap)), 1fr);
	column-gap: var(--bs-gap);
	align-items: start;
	padding-block: var(--bs-ev-space);
}

/* Hero: paper sheet left, photographs right (crossfading), info bar on the photo */
.bs-ev-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
	padding: 12px;
	height: calc(100svh - var(--bs-header-h));
	min-height: 560px;
	max-height: 1100px;
}
.bs-ev-hero__sheet {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 48px clamp(24px, 4vw, 64px);
	box-sizing: border-box;
	min-width: 0;
}
.bs-ev .bs-ev-hero__title {
	font-size: min(var(--bs-fs-heading-1), 4.4vw);
	line-height: 1.06;
	text-wrap: balance;
}
.bs-ev .bs-ev-hero__date {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--bs-fs-heading-4);
	line-height: 1.25;
	margin-top: 24px;
}
.bs-ev .bs-ev-hero__lede {
	max-width: 40ch;
	margin-top: 32px;
}
.bs-ev-hero__action {
	justify-content: center;
	margin-top: 40px;
}
.bs-ev-hero__photo {
	position: relative;
	overflow: hidden;
	min-width: 0;
	background-color: var(--wp--preset--color--black);
}
.bs-ev-fade > figure.wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 1.6s ease;
}
.bs-ev-fade > figure.wp-block-image:first-child,
.bs-ev-fade.is-fading > figure.wp-block-image.is-active {
	opacity: 1;
}
.bs-ev-fade.is-fading > figure.wp-block-image:not(.is-active) {
	opacity: 0;
}
.bs-ev-hero__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 20px;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--white);
	font-size: var(--bs-fs-small);
}

/* Intro: heading and statement pinned in the centre while photographs pass at the sides */
.bs-ev-intro {
	height: 220svh;
}
.bs-ev-intro__pin {
	position: sticky;
	top: var(--bs-header-h);
	z-index: 1;
	height: calc(100svh - var(--bs-header-h));
	width: min(48vw, 720px);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.bs-ev .bs-ev-intro__title {
	font-size: var(--bs-fs-heading-2);
}
.bs-ev .bs-ev-intro__statement {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--bs-fs-heading-4);
	line-height: 1.4;
	margin-top: 32px;
}
.bs-ev .bs-ev-intro__a,
.bs-ev .bs-ev-intro__b {
	position: absolute;
	margin: 0;
}
.bs-ev .bs-ev-intro__a {
	left: var(--bs-gutter);
	top: 34svh;
	width: 20vw;
	aspect-ratio: 4 / 5;
}
.bs-ev .bs-ev-intro__b {
	right: var(--bs-gutter);
	top: 118svh;
	width: 22vw;
	aspect-ratio: 16 / 10;
}

/* Route: big heading, photograph left, sample evening table pushed right */
.bs-ev .bs-ev-route__title {
	grid-column: 2 / 26;
	grid-row: 1;
	font-size: var(--bs-fs-heading-1);
	line-height: 1.06;
	text-indent: 3vw;
}
.bs-ev .bs-ev-route__photo {
	grid-column: 2 / 10;
	grid-row: 2;
	align-self: end;
	aspect-ratio: 4 / 5;
	margin-top: 96px;
}
.bs-ev-route__body {
	grid-column: 12 / 26;
	grid-row: 2;
	margin-top: 96px;
}
.bs-ev .bs-ev-route__label {
	margin-top: 48px;
	font-size: var(--bs-fs-small);
	color: var(--bs-ev-soft);
}
.bs-ev-route__table {
	margin: 16px 0 0;
}
.bs-ev-route__table table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.bs-ev-route__table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}
.bs-ev .bs-ev-route__table :is(td, th) {
	border: 0;
	padding: 13px 0;
	text-align: left;
	vertical-align: baseline;
}
.bs-ev .bs-ev-route__table td:first-child {
	width: 20%;
	color: var(--bs-ev-soft);
}
.bs-ev .bs-ev-route__table td:nth-child(2) {
	width: 30%;
	font-family: var(--wp--preset--font-family--heading);
}
.bs-ev .bs-ev-route__table td:last-child {
	text-align: right;
}

/* Formats: one axis at a third of the width, rows with unequal photographs at the right margin */
.bs-ev .bs-ev-formats__title {
	grid-column: 10 / 26;
	font-size: var(--bs-fs-heading-1);
	line-height: 1.06;
}
.bs-ev-row {
	grid-column: 10 / 26;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto 1fr;
	column-gap: 40px;
	margin-top: 104px;
}
.bs-ev .bs-ev-row__title {
	grid-column: 1;
	font-size: var(--bs-fs-heading-4);
	line-height: 1.2;
}
.bs-ev .bs-ev-row__text {
	grid-column: 1;
	max-width: 34ch;
	margin-top: 16px;
}
.bs-ev .bs-ev-row__photo {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: start;
}
.bs-ev-row--a .bs-ev-row__photo { width: 320px; aspect-ratio: 3 / 2; }
.bs-ev-row--b .bs-ev-row__photo { width: 240px; aspect-ratio: 4 / 5; }
.bs-ev-row--c .bs-ev-row__photo { width: 180px; aspect-ratio: 1; }
.bs-ev .bs-ev-formats__close {
	grid-column: 10 / 26;
	margin-top: 104px;
	max-width: 52ch;
}
.bs-ev-formats a {
	color: inherit;
}

/* Good to know: facts and questions left, tall photograph right with a square
   overlapping it. The photograph meets the section's top edge, so the top
   padding moves onto the text column. */
.bs-ev-faq {
	padding-top: 0;
}
.bs-ev-faq__text {
	grid-column: 2 / 12;
	grid-row: 1;
	padding-top: var(--bs-ev-space);
}
.bs-ev .bs-ev-faq__title {
	font-size: var(--bs-fs-heading-2);
}
.bs-ev .bs-ev-faq__facts {
	list-style: none;
	padding: 0;
	margin-top: 24px;
	font-size: var(--bs-fs-large);
	line-height: 1.45;
}
.bs-ev-faq__questions {
	margin-top: 40px;
}
.bs-ev-faq .wp-block-details {
	margin: 0;
	padding: 0;
}
.bs-ev-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	font-size: var(--bs-fs-large);
	line-height: 1.3;
}
.bs-ev-faq summary::-webkit-details-marker {
	display: none;
}
.bs-ev-faq summary::after {
	content: "";
	flex: 0 0 9px;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.2em) rotate(45deg);
	transition: transform 0.25s ease;
}
.bs-ev-faq details[open] > summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}
.bs-ev-faq summary:hover,
.bs-ev-faq summary:focus-visible {
	color: var(--bs-ev-soft);
}
.bs-ev-faq .wp-block-details > :not(summary) {
	max-width: 52ch;
	padding-bottom: 14px;
	color: var(--bs-ev-soft);
}
.bs-ev-faq__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	margin-top: 40px;
}
.bs-ev-faq__actions .wp-block-buttons {
	margin: 0;
}
.bs-ev-faq a:not(.wp-block-button__link) {
	color: inherit;
}
.bs-ev-faq__photos {
	grid-column: 14 / 26;
	grid-row: 1;
	position: relative;
	margin-bottom: 80px;
}
.bs-ev .bs-ev-faq__tall {
	aspect-ratio: 3 / 4;
}
.bs-ev .bs-ev-faq__square {
	position: absolute;
	left: -40px;
	bottom: -40px;
	width: 34%;
	aspect-ratio: 1;
}

/* RSVP: full-bleed photograph carrying one solid card with the RSVP form */
.bs-ev-rsvp {
	min-height: 110svh;
	padding: 40px max(var(--bs-gutter), calc((100% - var(--bs-max)) / 2)) 120px;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	overflow: clip; /* not hidden: that would make this the card's sticky container */
}
.bs-ev .bs-ev-rsvp__photo {
	position: absolute;
	inset: 0;
}
.bs-ev-rsvp__photo img {
	animation: bs-ev-drift 24s ease-in-out infinite alternate;
	transform-origin: 40% 50%;
}
@keyframes bs-ev-drift {
	from { transform: scale(1); }
	to { transform: scale(1.07); }
}
.bs-ev-rsvp__card {
	position: sticky;
	top: calc(var(--bs-header-h) + 32px);
	z-index: 1;
	width: 520px;
	max-width: 100%;
	padding: 28px 32px;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}
.bs-ev .bs-ev-rsvp__title {
	font-size: var(--bs-fs-heading-4);
	line-height: 1.2;
}
.bs-ev .bs-ev-rsvp__address {
	margin-top: 16px;
}
.bs-ev-rsvp__hours {
	margin: 16px 0 0;
}
.bs-ev-rsvp__hours table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.bs-ev .bs-ev-rsvp__hours td {
	border: 0;
	padding: 4px 0;
}
.bs-ev .bs-ev-rsvp__hours td:last-child {
	text-align: right;
}
.bs-ev-rsvp__card a {
	color: inherit;
}

/* RSVP form: builds an email to the events team (see braeside.js) */
.bs-ev-form {
	display: grid;
	gap: 14px;
	margin-top: 24px;
}
.bs-ev-form p {
	margin: 0;
}
.bs-ev-form label,
.bs-ev-form legend {
	display: block;
	margin-bottom: 6px;
	padding: 0;
	font-size: var(--bs-fs-small);
}
.bs-ev-form :is(input[type="text"], input[type="number"], select) {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 12px;
	font: inherit;
	font-size: 16px;
	color: inherit;
	background-color: var(--wp--preset--color--light-accent);
	border: 0;
	border-radius: 0;
}
.bs-ev-form :is(input, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--black);
	outline-offset: 2px;
}
.bs-ev-form__pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
}
.bs-ev-form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.bs-ev-form__slots {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
}
.bs-ev-form__slots label {
	position: relative;
	margin: 0;
	font-size: var(--bs-fs-normal);
}
.bs-ev-form__slots input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.bs-ev-form__slots span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	cursor: pointer;
	background-color: var(--wp--preset--color--light-accent);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.bs-ev-form__slots label:hover span {
	background-color: var(--wp--preset--color--accent);
}
.bs-ev-form__slots input:checked + span {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}
.bs-ev-form__slots input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--black);
	outline-offset: 2px;
}
.bs-ev-form .bs-ev-form__send {
	width: 100%;
	min-height: 52px;
	margin-top: 8px;
	padding: 0 16px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease;
}
.bs-ev-form .bs-ev-form__send:hover,
.bs-ev-form .bs-ev-form__send:focus-visible {
	background-color: var(--wp--preset--color--dark-accent);
}
.bs-ev-form .bs-ev-form__send:active {
	transform: scale(0.98);
}

/* Entrances (classes added by braeside.js, so nothing hides without script;
   with reduced motion requested nothing hides at all) */
@media (prefers-reduced-motion: no-preference) {
	.bs-ev-rise {
		opacity: 0;
		transform: translate3d(0, 24px, 0);
		transition:
			opacity 0.8s cubic-bezier(0.2, 0.65, 0.25, 1) var(--bs-ev-delay, 0ms),
			transform 0.8s cubic-bezier(0.2, 0.65, 0.25, 1) var(--bs-ev-delay, 0ms);
	}
	.bs-ev-rise.is-in {
		opacity: 1;
		transform: none;
	}
}

/* Tablet: the formats rows use the full content width */
@media (min-width: 768px) and (max-width: 1099px) {
	.bs-ev .bs-ev-formats__title,
	.bs-ev-row,
	.bs-ev .bs-ev-formats__close {
		grid-column: 2 / 26;
	}
}

@media (max-width: 767px) {
	.bs-ev {
		--bs-ev-space: 72px;
	}
	.bs-ev-hero {
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: 0;
		max-height: none;
	}
	.bs-ev-hero__photo {
		order: -1;
		height: 34svh;
		min-height: 220px;
	}
	.bs-ev-hero__sheet {
		padding: 32px 6vw 40px;
	}
	.bs-ev .bs-ev-hero__title {
		font-size: min(var(--bs-fs-heading-1), 9vw);
	}
	.bs-ev .bs-ev-hero__date {
		margin-top: 12px;
	}
	.bs-ev .bs-ev-hero__lede {
		margin-top: 16px;
	}
	.bs-ev-hero__action {
		margin-top: 24px;
	}
	.bs-ev-hero__action,
	.bs-ev-hero__action .wp-block-button {
		width: 100%;
	}
	/* the date and address are on the sheet below; on a phone the bar would
	   read as a label stacked over the title */
	.bs-ev-hero__bar {
		display: none;
	}

	.bs-ev-intro {
		height: auto;
		padding: var(--bs-ev-space) var(--bs-gutter);
	}
	.bs-ev-intro__pin {
		position: static;
		height: auto;
		width: auto;
	}
	.bs-ev .bs-ev-intro__a,
	.bs-ev .bs-ev-intro__b {
		position: relative;
		inset: auto;
		margin-top: 48px;
	}
	.bs-ev .bs-ev-intro__a {
		width: 64%;
	}
	.bs-ev .bs-ev-intro__b {
		width: 78%;
		margin-left: auto;
	}

	.bs-ev .bs-ev-route__title {
		grid-column: 2 / 10;
		text-indent: 0;
	}
	.bs-ev-route__body {
		grid-column: 2 / 10;
		margin-top: 32px;
	}
	.bs-ev .bs-ev-route__photo {
		grid-column: 4 / 10;
		grid-row: 3;
		margin-top: 48px;
	}
	.bs-ev .bs-ev-route__table tr {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 16px;
		padding: 10px 0;
	}
	.bs-ev .bs-ev-route__table td {
		padding: 0;
	}
	.bs-ev .bs-ev-route__table td:first-child,
	.bs-ev .bs-ev-route__table td:nth-child(2) {
		width: auto;
	}
	.bs-ev .bs-ev-route__table td:last-child {
		grid-column: 1 / -1;
		text-align: left;
	}

	.bs-ev .bs-ev-formats__title,
	.bs-ev-row,
	.bs-ev .bs-ev-formats__close {
		grid-column: 2 / 10;
	}
	.bs-ev-row {
		display: block;
		margin-top: 64px;
	}
	.bs-ev .bs-ev-row__photo {
		margin-top: 24px;
	}
	.bs-ev-row--a .bs-ev-row__photo { width: 100%; }
	.bs-ev-row--b .bs-ev-row__photo { width: 70%; margin-left: auto; }
	.bs-ev-row--c .bs-ev-row__photo { width: 55%; }
	.bs-ev .bs-ev-formats__close {
		margin-top: 64px;
	}

	.bs-ev-faq {
		padding-top: var(--bs-ev-space);
	}
	.bs-ev-faq__photos {
		grid-column: 2 / 10;
		grid-row: 1;
		margin: 0 0 72px;
	}
	.bs-ev .bs-ev-faq__tall {
		aspect-ratio: 4 / 5;
	}
	.bs-ev .bs-ev-faq__square {
		left: auto;
		right: -12px;
		bottom: -40px;
		width: 38%;
	}
	.bs-ev-faq__text {
		grid-column: 2 / 10;
		grid-row: 2;
		padding-top: 0;
	}
	.bs-ev-faq__actions .wp-block-buttons,
	.bs-ev-faq__actions .wp-block-button {
		width: 100%;
	}

	.bs-ev-rsvp {
		display: block;
		min-height: 0;
		padding: 0 0 48px;
		background-color: var(--wp--preset--color--light-accent);
	}
	.bs-ev .bs-ev-rsvp__photo {
		position: relative;
		inset: auto;
		height: 70svh;
	}
	.bs-ev-rsvp__card {
		position: relative;
		top: auto;
		width: auto;
		margin: -80px 16px 0;
		padding: 24px;
	}
	.bs-ev-form__pair--names {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
	.bs-ev-form .bs-ev-form__send {
		min-height: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bs-ev-fade > figure.wp-block-image {
		transition: none;
	}
	.bs-ev-rsvp__photo img {
		animation: none;
	}
}