/*
 * Bloomfield theme styles that theme.json cannot express on its own:
 * header + menu, footer, the named block styles (polaroid photos, cards, bars),
 * section layouts copied from the original Wix site, and phone layouts.
 * Measurements in comments are from the live Wix site at 1440px (capture/design-tokens.md).
 * Mobile breakpoint: 781px (WordPress stacks columns below 782px).
 */

:root {
	--bf-ease: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	--bf-t: 0.4s;
	--bf-coral: var(--wp--preset--color--coral);
	--bf-green: var(--wp--preset--color--green);
}

/* No sideways scrolling: tilted photos may poke past the edge (the Wix header did, see DEVIATIONS.md). */
body {
	overflow-x: clip;
}

/* Column widths include their padding (Wix boxes do), so a 50% text column with 40px padding
   stays exactly half the page and a full-width phone column never grows past the screen. */
.wp-block-column {
	box-sizing: border-box;
}

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

/* Page sections sit edge to edge (Wix strips have no gaps between them). */
.bf-main {
	padding-top: 0;
	padding-bottom: 0;
}
.bf-main .bf-content > *,
.bf-main .bf-content > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
}
.wp-block-columns.bf-band,
.bf-content > .wp-block-columns {
	margin-bottom: 0;
}

/* Headings follow the text colour of a coloured section unless they set their own. */
.has-text-color :is(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
	color: inherit;
}

/* Paragraph helpers */
.bf-gap-after {
	margin-block-end: 1.2em !important;
}
p {
	margin-top: 0;
}

/* ------------------------------------------------------------------ Header */

.bf-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: var(--wp--preset--color--white);
}
.bf-header {
	position: relative;
	padding-top: 6px;
}
.bf-brand {
	gap: 0 !important;
	align-items: flex-start !important;
}
.bf-brand .wp-block-site-logo {
	flex: 0 0 auto;
	margin: 0;
	line-height: 0;
}
.bf-brand .wp-block-site-logo img {
	width: 93px;
	height: 100px;
	object-fit: contain;
}
.bf-logo-text {
	margin: 0 0 0 -1px !important;
	padding-top: 31px;
	font-size: 23px;
	line-height: 29.9px;
	letter-spacing: 1.15px;
}
.bf-logo-text a {
	color: inherit;
	text-decoration: none;
}

/* Desktop menu row (y 104-151 on Wix). Note: WordPress also puts .bf-nav on the inner <ul>, hence nav.bf-nav. */
nav.bf-nav {
	margin-top: -2px;
	font-family: var(--wp--preset--font-family--nav);
	font-size: 14px;
	line-height: 47px;
	color: #000;
}
.bf-nav .wp-block-navigation__container {
	gap: 0;
	justify-content: center;
}
.bf-nav .wp-block-navigation-item__content {
	padding: 0 20px;
	color: #000;
	text-decoration: none;
	transition: color var(--bf-t);
}
.bf-nav .wp-block-navigation-item__content:hover,
.bf-nav .wp-block-navigation-item__content:focus-visible,
.bf-nav .current-menu-item > .wp-block-navigation-item__content,
.bf-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.bf-nav [aria-current="page"],
.bf-nav .wp-block-navigation__container > .has-child:hover > .wp-block-navigation-item__content,
.bf-nav .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--sky);
}
/* "Parents" has no arrow on desktop, like the Wix menu. */
.bf-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
	display: none;
}
.bf-nav .has-child > .wp-block-navigation-item__content {
	padding-right: 20px;
}
/* Parents dropdown: 181px panel, rgba(247,247,247,.5), items centred 14px/29px */
.bf-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
	left: 50%;
	transform: translateX(-50%);
	min-width: 181px;
	width: max-content;
	margin-top: 6px;
	padding: 2px 0;
	border: 0;
	background: rgba(247, 247, 247, 0.5);
	backdrop-filter: blur(2px);
	color: #000;
}
/* Invisible strip over the 6px gap above the panel (and a little wider), so moving the mouse down from
   "Parents" never counts as leaving the menu. */
.bf-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -12px;
	left: -16px;
	right: -16px;
	height: 12px;
}
/* Kept open for a moment after the mouse leaves (theme.js adds .bf-hover); same as WordPress's :hover state. */
.bf-nav .wp-block-navigation__container > .has-child.bf-hover > .wp-block-navigation__submenu-container {
	height: auto;
	min-width: 181px;
	opacity: 1;
	overflow: visible;
	visibility: visible;
	width: max-content;
}
.bf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0 8px;
	font-size: 14px; /* as Wix; the panel is a little wider than Wix's 181px because Montserrat is wider than Proxima Nova */
	line-height: 29px;
	text-align: center;
	white-space: nowrap;
}
nav.bf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
	justify-content: center;
	width: 100%;
}
nav.bf-nav:not(:has(.is-menu-open)) .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content {
	padding: 0 8px !important;
	line-height: 29px;
	text-align: center;
	justify-content: center;
}

/* Hamburger + slide-in panel on phones (Wix: white 260px panel from the right over a 60% black overlay) */
.bf-nav .wp-block-navigation__responsive-container-open {
	padding: 6px;
	color: #000;
}
.bf-nav .wp-block-navigation__responsive-container-open svg {
	width: 32px;
	height: 32px;
}
@media (max-width: 781px) {
	.bf-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.bf-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}
.bf-nav .wp-block-navigation__responsive-container.is-menu-open {
	left: auto;
	right: 0;
	width: 260px;
	max-width: 85vw;
	padding: 72px 20px 32px 30px;
	background: #fff;
	color: #000;
	box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
	overflow-y: auto;
}
.bf-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 22px;
	right: 18px;
}
.bf-nav .is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 30px;
	height: 30px;
}
.bf-nav .is-menu-open .wp-block-navigation__responsive-close,
.bf-nav .is-menu-open .wp-block-navigation__responsive-dialog {
	height: auto;
	min-height: 0;
}
/* Position the close X against the panel itself (top right), not the menu list below the 72px top padding. */
.bf-nav .is-menu-open .wp-block-navigation__responsive-dialog {
	position: static;
}
/* After tapping "Parents" on a phone it keeps focus; keep it black like Wix (the blue is a desktop hover colour). */
.bf-nav .is-menu-open .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation-item__content,
.bf-nav .is-menu-open .wp-block-navigation__container > .has-child:hover > .wp-block-navigation-item__content {
	color: #000;
}
.bf-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 0 !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
}
.bf-nav .is-menu-open .wp-block-navigation__container {
	gap: 0 !important;
	width: 100%;
	justify-content: flex-start !important;
	align-items: stretch !important;
}
.bf-nav .is-menu-open .wp-block-navigation-item {
	width: 100%;
	flex-wrap: wrap;
	flex-direction: row !important;
	align-items: center !important;
}
.bf-nav .is-menu-open .wp-block-navigation-item__content {
	padding: 14px 0 !important;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	white-space: normal;
}
.bf-nav .is-menu-open .has-child > .wp-block-navigation-item__content {
	flex: 1 1 auto;
}
.bf-nav .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	color: #000;
}
.bf-nav .is-menu-open .wp-block-navigation__submenu-icon svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	transition: transform var(--bf-t);
}
/* Phone menu: "Parents" opens and closes with its arrow (theme.js toggles .bf-sub-open). */
.bf-nav .is-menu-open .wp-block-navigation__submenu-icon svg {
	transform: none !important;
}
.bf-nav .is-menu-open .has-child.bf-sub-open > .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg) !important;
}
.bf-nav .is-menu-open .wp-block-navigation__submenu-container {
	width: 100%;
	padding: 0 0 0 18px !important;
	background: transparent !important;
	transform: none !important;
	left: auto !important;
}
.bf-nav .is-menu-open .has-child:not(.bf-sub-open) > .wp-block-navigation__submenu-container {
	display: none !important;
}
.bf-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 0 !important;
	text-align: left;
}
.bf-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.bf-nav .is-menu-open [aria-current="page"] {
	color: var(--wp--preset--color--teal);
}

@media (max-width: 781px) {
	.bf-header {
		padding: 18px 70px 16px 0;
		min-height: 0;
	}
	.bf-brand .wp-block-site-logo img {
		width: 60px;
		height: 68px;
	}
	.bf-brand .wp-block-site-logo img {
		width: 73px;
		height: 83px;
	}
	.bf-logo-text {
		margin: 0 0 0 2px !important;
		padding-top: 12px;
		font-size: 20px;
		line-height: 26px;
		letter-spacing: 0.9px;
	}
	nav.bf-nav {
		position: absolute;
		top: 50%;
		right: 8px;
		margin: 0;
		transform: translateY(-50%);
	}
	/* The open panel must not inherit the transform (it is position:fixed). */
	nav.bf-nav:has(.is-menu-open) {
		transform: none;
		top: 0;
	}
}

/* ------------------------------------------------------------------ Footer */

.bf-site-footer {
	background: var(--wp--preset--color--white);
}
.bf-footer {
	font-family: var(--wp--preset--font-family--barlow);
	/* Wix footer: title at +94, columns at +180, 384px tall (padding set on the block: 94px / 110px) */
}
.bf-footer .bf-footer-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--section);
	line-height: 1.15;
}
.bf-footer-tours {
	max-width: 313px;
	margin: 0 auto 0 !important;
	font-size: 16px;
	font-weight: 200;
	line-height: 1.2;
}
.bf-footer-cols {
	margin-top: 22px !important;
	margin-bottom: 0 !important;
}
.bf-hours {
	font-size: 17px;
	font-weight: 200;
	line-height: 25.5px;
	margin: 0;
}
.bf-hours strong {
	font-weight: 500;
}
.bf-address {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	margin: 0;
}
.bf-contact-lines {
	font-size: 16px;
	font-weight: 200;
	line-height: 29.4px;
	margin: 0;
}
.bf-contact-lines a {
	text-decoration: none;
	color: inherit;
}
/* Wix: "Tel:" and "Email: info@" in ExtraLight; only the number and "bloomfieldnursery.com" in Medium. */
.bf-contact-lines a[href^="tel:"],
.bf-contact-lines a strong {
	font-weight: 500;
}
.bf-contact-lines a:hover,
.bf-contact-lines a:focus-visible {
	text-decoration: underline;
}
@media (max-width: 781px) {
	.bf-footer {
		padding-top: 30px !important;
		padding-bottom: 36px !important;
	}
	.bf-footer .bf-footer-title {
		font-size: 30px;
	}
	.bf-footer .bf-footer-cols .wp-block-column {
		text-align: center;
	}
	.bf-footer .bf-hours,
	.bf-footer .bf-contact-lines {
		text-align: center !important;
		font-size: 15px;
	}
	.bf-footer .bf-footer-cols {
		margin-top: 18px !important;
	}
}

/* ----------------------------------------------------------------- Buttons */

.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--bf-t), border-color var(--bf-t), color var(--bf-t);
	border-radius: 0;
}
.wp-block-button.is-style-white .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--bf-coral);
	font-size: 19px;
}
.wp-block-button.is-style-white .wp-block-button__link:hover,
.wp-block-button.is-style-white .wp-block-button__link:focus-visible {
	background-color: var(--bf-green);
	color: var(--wp--preset--color--white);
}
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--forest);
	outline-offset: 2px;
}
.bf-btn-big .wp-block-button__link {
	min-width: 406px;
	padding-top: 18px;
	padding-bottom: 18px;
}
@media (max-width: 781px) {
	.wp-block-button__link {
		min-width: 160px;
		padding: 11px 24px;
	}
	.wp-block-button .wp-block-button__link[style*="padding-left"] {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.bf-btn-big .wp-block-button__link {
		min-width: 0;
	}
}

/* --------------------------------------------------------- Visibility utils */

@media (max-width: 781px) {
	.bf-desktop-only,
	.bf-hide-mobile {
		display: none !important;
	}
}
@media (min-width: 782px) {
	.bf-mobile-only {
		display: none !important;
	}
}

/* -------------------------------------------------------------- Separators */

.wp-block-separator.is-style-short,
.wp-block-separator.is-style-short-thick,
.wp-block-separator.is-style-long-thick,
.wp-block-separator.is-style-thin {
	border: 0;
	border-top: 3px solid currentColor;
	height: 0;
	width: 44px;
	max-width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	opacity: 1;
	background: none;
}
.wp-block-separator.is-style-short-thick {
	border-top-width: 8px;
}
.wp-block-separator.is-style-long-thick {
	width: 394px;
	border-top-width: 8px;
}
.wp-block-separator.is-style-thin {
	width: 259px;
	border-top-width: 1px;
}

/* ------------------------------------------------------------ Photo styles */

.wp-block-image.is-style-polaroid img,
.wp-block-image.is-style-polaroid-left img,
.wp-block-image.is-style-polaroid-right img {
	box-sizing: border-box;
	background: #fff;
	padding: 8px;
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
}
.wp-block-image.is-style-polaroid-left {
	transform: rotate(-3.5deg);
}
.wp-block-image.is-style-polaroid-right {
	transform: rotate(3deg);
}
.wp-block-image.is-style-circle img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
}
.wp-block-image.is-style-logo-circle {
	display: flex;
	justify-content: center;
}
.wp-block-image.is-style-logo-circle img {
	box-sizing: border-box;
	width: 302px;
	height: 302px;
	padding: 21px;
	background: #fff;
	border-radius: 50%;
	object-fit: contain;
}

/* "Fill the column": the photo covers its whole column, whatever the text height. */
.wp-block-column:has(> .wp-block-image.is-style-fill),
.bf-fill-col {
	position: relative;
	min-height: 240px;
	align-self: stretch !important;
}
.wp-block-image.is-style-fill {
	position: absolute;
	inset: 0;
	margin: 0 !important;
}
.wp-block-image.is-style-fill img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 781px) {
	.wp-block-column:has(> .wp-block-image.is-style-fill),
	.bf-fill-col {
		min-height: 75vw;
	}
	/* "Swap on phones": reverse the column order when the columns stack. */
	.wp-block-columns.bf-reverse-mobile {
		flex-direction: column-reverse;
	}
}

/* ------------------------------------------------------------ Card styles */

.wp-block-group.is-style-card,
.wp-block-group.is-style-card-green {
	background-color: rgba(225, 58, 68, 0.84);
	border: 3px solid #fff;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
	color: #fff;
}
.wp-block-group.is-style-card-green {
	border-color: var(--bf-green);
}
.wp-block-group.is-style-glass {
	background-color: rgba(255, 255, 255, 0.88);
}

/* ----------------------------------------------------------- Page titles */

.bf-page-title h1 {
	margin: 0;
	font-size: var(--wp--preset--font-size--title);
	line-height: 1.27;
}

/* -------------------------------------------------------------------- Home */

.bf-hero.wp-block-cover {
	align-items: flex-start;
}
/* Wix draws this box (a text-slider widget) at ~84% of its 700x212 design: 586x178 on a 1440 screen. */
.bf-hero .bf-hero-box {
	box-sizing: border-box;
	padding: 6px 16px 31px;
	background: rgba(255, 255, 255, 0.5);
	border: 3px solid var(--wp--preset--color--forest);
}
.bf-hero-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--nav);
	font-size: 48px;
	font-weight: 400;
	letter-spacing: 0.48px;
	line-height: 1.15;
	color: var(--wp--preset--color--forest);
}
.bf-hero-title strong {
	display: block;
	font-family: var(--wp--preset--font-family--chelsea);
	font-size: 76px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.05;
	color: var(--wp--preset--color--coral-deep);
}
.is-style-card h2 {
	margin: 0;
	line-height: 1.45;
}
.bf-sep-philosophy {
	margin-top: 18px !important;
	margin-bottom: 20px !important;
}
.bf-home-curriculum-copy {
	margin-top: 1.4em !important; /* Wix started the text with an empty line */
}
.bf-spaced {
	letter-spacing: 4px;
	line-height: 1;
	margin: 0;
}
.bf-home-curriculum .wp-block-separator {
	margin-top: 47px !important;
	margin-bottom: 30px !important;
}
.has-text-color .bf-subtitle {
	color: inherit;
}
.bf-subtitle {
	margin-top: 22px !important;
	color: var(--wp--preset--color--grey);
	font-size: 16px;
	letter-spacing: 1.6px;
	line-height: 1.2;
}
.bf-story .wp-block-column > p {
	margin: 0 0 1.2em;
}
.bf-story-right .bf-story-3 {
	width: 80%;
	margin: 128px auto 0 !important;
}
.bf-apply-text p {
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
	margin: 0;
}
.bf-apply-text a {
	color: inherit;
	text-decoration: none;
}
.bf-sep-apply {
	margin-top: 37px !important;
	margin-bottom: 34px !important;
}
.is-style-card-green h2 {
	margin: 0;
	line-height: 1;
}

@media (max-width: 781px) {
	/* Phones: box and "Organise a Tour" centred in the photo, not pinned to its top edge. */
	.bf-hero.wp-block-cover {
		min-height: 150vw !important;
		padding: 40px 20px !important;
		align-items: center;
	}
	.bf-hero .bf-hero-box {
		padding: 4px 10px 8px;
	}
	.bf-hero-title {
		font-size: 27px;
	}
	.bf-hero-title strong {
		font-size: 48px;
	}
	.bf-hero .wp-block-buttons {
		margin-top: 12px;
	}
	.wp-block-group.has-butter-background-color:has(> .is-style-card) {
		padding: 12px 12px 24px !important;
	}
	.is-style-card {
		padding: 14px 16px 22px !important;
	}
	.is-style-card h2 {
		font-size: 28px;
	}
	.bf-home-curriculum > .wp-block-column:not(.bf-fill-col) {
		padding: 40px 20px !important;
	}
	.bf-home-curriculum .wp-block-separator {
		margin-top: 20px !important;
	}
	/* Phones: the two story photos overlap a little like a scrapbook and the button follows
	   closely, as on the old phone layout (the desktop 128px / 127px gaps do not apply here). */
	.bf-story-right .bf-story-3 {
		margin-top: -40px !important;
		position: relative;
	}
	.bf-story + .wp-block-buttons {
		margin-top: 24px !important;
	}
	.bf-story .wp-block-image {
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
	.bf-apply-band.wp-block-cover {
		min-height: 0 !important;
		padding: 12px 12px !important;
	}
	.is-style-card-green {
		padding: 25px 20px 20px !important;
	}
	.is-style-card-green h2 {
		font-size: 38px;
	}
	.bf-apply-text {
		margin-top: 28px !important;
	}
	.bf-apply-text p {
		font-size: 15px;
	}
	.bf-sep-apply {
		margin: 26px auto 26px !important;
	}
}

/* -------------------------------------------------------------- About us */

.bf-collage-band {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.bf-collage {
	position: relative;
	max-width: 1440px !important;
	margin: 0 auto;
	aspect-ratio: 1440 / 612;
}
.bf-collage > .wp-block-image {
	position: absolute;
	margin: 0;
}
.bf-collage > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* positions as % of the 1440 x 612 Wix strip */
.bf-collage .bf-collage-4 { left: -2.15%; top: 30.9%; width: 36.25%; height: 62.4%; z-index: 1; }
.bf-collage .bf-collage-2 { left: 26.04%; top: 8.8%; width: 40.56%; height: 70.75%; z-index: 2; }
.bf-collage .bf-collage-1 { left: 60.7%; top: 12.66%; width: 36.8%; height: 46.7%; z-index: 3; transform: rotate(7.5deg); }
.bf-collage .bf-collage-3 { left: 62.08%; top: 52.78%; width: 14.79%; height: 44.93%; z-index: 4; transform: rotate(-3deg); }
/* Wix showed the lower part of the classroom photo (crop from y=754 of 3640), without the ceiling. */
.bf-collage .bf-collage-1 img { object-position: 50% 100%; }

.bf-team-card {
	box-sizing: border-box;
}
.bf-team-card .wp-block-image {
	flex: 0 0 200px;
	margin: 0;
}
.bf-team-card .wp-block-image img {
	width: 200px;
	height: 200px;
}
/* Team member without a photo yet: the flower logo on a white circle, same size as a photo. */
.bf-team-card .wp-block-image.is-style-logo-circle img {
	padding: 24px;
}
.bf-team-role {
	margin: 0;
	font-size: 18px;
	line-height: 25.2px;
}
.bf-team-name {
	margin: 0;
	font-size: 24px;
	line-height: 33.6px;
	letter-spacing: 1.92px;
}
.bf-team-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)) !important;
}

.bf-classes {
	/* Wix: the green strip runs from x=30 to x=1410 at 1440 (30px of white each side), 513px tall */
	padding: 0 0 3px !important;
	margin: 0 30px !important;
	max-width: none !important;
	width: auto !important;
}
.bf-classes > .wp-block-column {
	padding-bottom: 108px !important;
}
.bf-classes .bf-class-body {
	min-height: 258px;
}
.bf-classes > .wp-block-column + .wp-block-column {
	border-left: 1px solid #fff;
}
.bf-classes .bf-class-head,
.bf-classes .bf-class-body {
	max-width: 324px;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
	width: 100%;
}
.bf-class-title {
	margin: 0;
	font-size: 26px;
	letter-spacing: 1.3px;
	line-height: 1.2;
	color: inherit;
}
.bf-class-sub {
	margin: 0;
	font-family: var(--wp--preset--font-family--chelsea);
	font-size: 16px;
	letter-spacing: 0.8px;
}
.bf-sep-class {
	width: 23px !important;
	margin-top: 11px !important;
	margin-bottom: 9px !important;
}
.bf-class-body p {
	margin: 0;
	font-size: 17px;
	line-height: 25.5px;
}
.bf-class-body p:not(:has(strong)) {
	font-weight: 350;
}

@media (max-width: 781px) {
	.bf-collage {
		aspect-ratio: auto;
		padding: 16px 12px 24px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.bf-collage > .wp-block-image {
		position: relative;
		left: auto !important;
		top: auto !important;
		width: 88% !important;
		height: auto !important;
		margin: -10px 0 0;
	}
	.bf-collage > .wp-block-image img {
		height: auto;
		aspect-ratio: 4 / 3;
	}
	.bf-collage .bf-collage-1 { align-self: flex-end; }
	.bf-collage .bf-collage-2 { align-self: flex-start; width: 75% !important; }
	.bf-collage .bf-collage-3 { align-self: flex-end; width: 60% !important; }
	.bf-collage .bf-collage-3 img { aspect-ratio: 3 / 4; }
	.bf-collage .bf-collage-4 { align-self: flex-start; width: 70% !important; }

	.bf-team-card {
		flex-direction: column !important;
		align-items: stretch !important;
		padding: 20px 20px 22px !important;
		gap: 16px !important;
	}
	.bf-team-card .wp-block-image {
		flex: none;
	}
	.bf-team-card .wp-block-image img {
		width: 100% !important;
		height: auto;
	}
	.bf-team-card .wp-block-image.is-style-logo-circle img {
		aspect-ratio: 1;
	}
	.bf-classes {
		padding: 0 12px !important;
		margin: 0 !important;
	}
	.bf-classes > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid #fff;
	}
	.bf-classes > .wp-block-column {
		padding-bottom: 24px !important;
	}
	.bf-classes .bf-class-body {
		min-height: 0;
	}
	.bf-btn-big .wp-block-button__link {
		padding: 14px 40px;
	}
}

/* ----------------------------------------------------------- Testimonials */

.bf-quote p {
	margin: 0;
}
.bf-quote .bf-quote-text {
	font-weight: 300;
	letter-spacing: 0.72px;
	line-height: 32px; /* Futura "normal" line height on Wix */
}
.bf-quote .bf-quote-text + .bf-quote-text {
	margin-top: 32px; /* Wix kept one empty line between paragraphs */
}
/* Wix: the 404px text block sits ~40px towards the photo (x=198 in the left half, x=835 in the right half). */
@media (min-width: 1200px) {
	.bf-quote.bf-quote--left {
		padding-left: 198px !important;
		padding-right: 118px !important;
	}
	.bf-quote.bf-quote--right {
		padding-left: 115px !important;
		padding-right: 202px !important;
	}
}
.bf-quote .bf-quote-by {
	margin-top: 41px;
	font-style: italic;
	letter-spacing: 0.96px;
}
@media (max-width: 781px) {
	.bf-quote {
		padding: 40px 24px !important;
	}
}

/* ------------------------------------------------------------- Curriculum */

.bf-band .wp-block-column > h2 {
	margin: 0;
	line-height: 1;
}
.bf-band .bf-sep-top {
	margin-top: 30px !important;
	margin-bottom: 42px !important;
}
.bf-band .bf-sep-bottom {
	margin-top: 41px !important;
}
.bf-class-copy p {
	margin-block-end: 0;
}
.bf-music .bf-music-cols {
	margin: 0;
	align-items: flex-start !important;
}
.bf-music .bf-music-panel-col {
	flex: 0 0 410px !important;
}
.bf-music .is-style-glass p {
	margin-block-end: 0;
	font-size: 19px;
	line-height: 1.4;
}
/* Wix: logo circle 302px at x=868 (216px right of the logo column's start), level with the section top. */
.bf-music .bf-music-logo-col {
	padding-left: 216px;
}
.bf-music .bf-music-logo-col .wp-block-image {
	justify-content: flex-start;
	margin: 0;
}
@media (max-width: 781px) {
	.bf-band .wp-block-column:not(.bf-fill-col) {
		padding: 30px 16px 34px !important;
	}
	.bf-band .wp-block-separator.is-style-long-thick {
		width: 100%;
	}
	.bf-band .bf-sep-top {
		margin: 18px auto 18px !important;
	}
	.bf-band .bf-sep-bottom {
		margin-top: 18px !important;
	}
	.bf-music.wp-block-cover {
		padding: 20px 12px 30px !important;
		min-height: 0 !important;
	}
	.bf-music .bf-music-panel-col {
		flex-basis: auto !important;
		padding-top: 0 !important;
	}
	.bf-music .bf-music-logo-col {
		padding-left: 0;
	}
	.bf-music .bf-music-logo-col .wp-block-image {
		justify-content: center;
	}
	.bf-music .is-style-logo-circle img {
		width: 200px;
		height: 200px;
		padding: 14px;
	}
	.bf-music .bf-music-cols {
		flex-direction: column-reverse;
	}
}

/* ------------------------------------------------------------- Term dates */

.bf-term-year {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--chelsea);
	font-size: 30px;
	color: var(--wp--preset--color--forest);
}
.bf-term-title {
	margin: 0 !important;
	padding: 9px 14px;
	background: var(--bf-green);
	color: #fff;
	font-size: 22px;
	line-height: 1.3;
}
.wp-block-table.is-style-term-dates {
	margin: 0;
	overflow-x: visible;
}
.wp-block-table.is-style-term-dates table {
	border-collapse: collapse;
	width: 100%;
	color: var(--wp--preset--color--ink);
	font-size: 16px;
	line-height: 1.4;
}
.wp-block-table.is-style-term-dates td {
	border: 1px solid rgba(0, 0, 0, 0.45);
	padding: 8px 12px;
	vertical-align: top;
}
.wp-block-table.is-style-term-dates td:first-child {
	width: 27%;
	font-weight: 600;
}
.wp-block-table.is-style-term-dates td:nth-child(2) {
	width: 35%;
}
/* Times column: wide enough that "2s: 8:30 - 11:45am/1:00pm/3:00pm" stays on one line. */
.wp-block-table.is-style-term-dates td:nth-child(3) {
	width: 38%;
}
.wp-block-table.is-style-term-dates td:empty {
	padding: 0;
}
.wp-block-table.is-style-term-dates sup {
	font-size: 0.65em;
}
.bf-term-note {
	color: var(--wp--preset--color--ink);
}
@media (max-width: 781px) {
	.wp-block-table.is-style-term-dates table,
	.wp-block-table.is-style-term-dates tbody,
	.wp-block-table.is-style-term-dates tr,
	.wp-block-table.is-style-term-dates td {
		display: block;
		width: auto !important;
	}
	.wp-block-table.is-style-term-dates tr {
		border: 1px solid rgba(0, 0, 0, 0.45);
		border-top: 0;
		padding: 10px 12px;
	}
	.wp-block-table.is-style-term-dates td {
		border: 0;
		padding: 0;
	}
	.wp-block-table.is-style-term-dates td + td:not(:empty) {
		margin-top: 4px;
	}
	.bf-term-title {
		font-size: 20px;
	}
}

/* ------------------------------------------------------------- Contact us */

.bf-contact-hero.wp-block-cover {
	align-items: flex-start;
}
.bf-contact-panel .bf-contact-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 25px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.25;
	color: var(--wp--preset--color--coral);
}
.bf-h-35 {
	font-size: 35px;
	margin: 0 0 4px;
	line-height: 1.25;
}
.bf-map iframe {
	background: #f2efe9;
}
@media (max-width: 781px) {
	.bf-contact-hero.wp-block-cover {
		min-height: 0 !important;
		padding: 40px 12px !important;
	}
	.bf-contact-panel {
		padding: 20px 16px 28px !important;
	}
	.bf-h-35 {
		font-size: 30px;
	}
	.bf-map {
		margin-top: 28px !important;
	}
	.bf-map iframe {
		height: 320px !important;
	}
}

/* ------------------------------------------------------------ Parent forms */

.bf-form-row {
	min-height: 131px;
	box-sizing: border-box;
}
.bf-form-row .wp-block-image {
	margin: 0;
	flex: 0 0 auto;
}
.bf-form-row .wp-block-image img {
	width: 66px;
	height: 58px;
}
.bf-form-btn .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 216px; /* every button the same size, as on Wix; a long label wraps onto two lines */
	min-height: 77px;
	padding: 6px 14px;
	text-align: center;
}
@media (max-width: 781px) {
	/* Rows run edge to edge on phones, as on Wix. */
	.bf-forms-list.has-global-padding {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.bf-form-row {
		flex-direction: column !important;
		padding: 34px 20px 30px !important;
		gap: 22px !important;
	}
	.bf-form-row .wp-block-image img {
		width: 86px;
		height: 76px;
	}
	.bf-form-btn .wp-block-button__link {
		width: auto;
		min-width: 234px;
		white-space: normal;
		min-height: 0;
		padding: 4px 8px;
		font-size: 22px;
	}
}

/* ------------------------------------------------------------------ Apply */

.bf-apply-intro {
	margin: 0;
	line-height: 30.4px;
}
.bf-apply-intro a {
	color: inherit;
}
.bf-sep-apply-top {
	margin-bottom: 23px !important;
}

/* ---------------------------------------------------------- Photo gallery */

.wp-block-gallery.is-style-masonry {
	--bf-gap: 5px;
	gap: var(--bf-gap) !important;
}
/* Until theme.js has placed the photos, keep them invisible (space still reserved), so visitors never see
   the plain grid jump into the masonry layout. Without JavaScript the plain grid simply shows. */
.bf-js .wp-block-gallery.is-style-masonry:not(.bf-masonry-ready) {
	visibility: hidden;
}
.wp-block-gallery.is-style-masonry.bf-masonry-ready {
	display: block !important;
	position: relative;
}
.wp-block-gallery.is-style-masonry.bf-masonry-ready > .wp-block-image {
	position: absolute;
	margin: 0 !important;
	width: auto !important;
}
.wp-block-gallery.is-style-masonry > .wp-block-image img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
.wp-block-gallery.is-style-masonry > .wp-block-image {
	cursor: pointer;
}
.bf-gallery-wrap {
	padding-left: 16px;
	padding-right: 16px;
}
@media (max-width: 781px) {
	.bf-gallery-wrap {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.wp-block-gallery.is-style-masonry {
		--bf-gap: 4px;
	}
}

/* -------------------------------------------- Entrance animations (Wix) */
/* Only three elements animate on the old site (desktop only; Wix plays none on phones).
   The head script adds .bf-js before first paint; theme.js adds .is-in when scrolled into view.
   The transition sits on .is-in only, so elements hide instantly and only ever animate in. */
@media (min-width: 782px) and (prefers-reduced-motion: no-preference) {
	.bf-js .bf-float-in:not(.is-in) {
		opacity: 0;
		transform: translateX(60px);
	}
	.bf-js .bf-fade-in:not(.is-in) {
		opacity: 0;
	}
	.bf-js .bf-float-in.is-in,
	.bf-js .bf-fade-in.is-in {
		transition: opacity 1.2s var(--bf-ease), transform 1.2s var(--bf-ease);
	}
}

/* Cover style "Background moves slowly on scroll" (home hero on the old site).
   Pure CSS scroll-driven animation: browsers without it just show the photo still. */
/* Same direction and roughly the same rate as Wix: the photo drifts up inside its frame as the page scrolls. */
@keyframes bf-parallax {
	from { transform: translateY(14%); }
	to { transform: translateY(-14%); }
}
@supports (animation-timeline: view()) {
	@media (min-width: 782px) and (prefers-reduced-motion: no-preference) {
		/* clip, not hidden: a hidden-overflow box would become the photo's scroll container
		   and the timeline would never move. The timeline tracks the whole cover in the page. */
		.wp-block-cover.is-style-parallax {
			overflow: clip;
			view-timeline: --bf-parallax block;
		}
		.wp-block-cover.is-style-parallax > .wp-block-cover__image-background {
			top: -20%;
			height: 140%;
			animation: bf-parallax linear both;
			animation-timeline: --bf-parallax;
			will-change: transform;
		}
	}
}

/* Block editor: never hide animated or phone-only blocks while editing. */
.editor-styles-wrapper .bf-float-in,
.editor-styles-wrapper .bf-fade-in {
	opacity: 1 !important;
	transform: none !important;
}
.editor-styles-wrapper .wp-block-cover.is-style-parallax > .wp-block-cover__image-background {
	top: 0 !important;
	height: 100% !important;
	animation: none !important;
	transform: none !important;
}

/* Phones: the stacked collage photos keep a gentle tilt (the desktop angles would poke past the screen). */
@media (max-width: 781px) {
	.bf-collage .bf-collage-1 { transform: rotate(3deg); }
	.bf-collage .bf-collage-3 { transform: rotate(2deg); }
}

/* Gallery starts right under the header, as on Wix (y=151 at 1440). */
.bf-gallery-wrap > .wp-block-gallery {
	margin-top: 0 !important;
}

/* Lightbox: thin black controls like the Wix gallery (WordPress draws them in the theme colour). */
.wp-lightbox-overlay .wp-lightbox-close-button,
.wp-lightbox-overlay .wp-lightbox-navigation-button {
	color: #000 !important;
}
.wp-lightbox-overlay .wp-lightbox-close-button svg,
.wp-lightbox-overlay .wp-lightbox-navigation-button svg {
	fill: #000 !important;
	color: #000 !important;
}
/* theme.js hides "previous" on the first photo and "next" on the last, as Wix did. */
.wp-lightbox-overlay .wp-lightbox-navigation-button.bf-lb-hidden {
	visibility: hidden;
}

/* Menu labels never break inside a word ("About / Us"). If the school adds more items than fit on one
   line, whole items wrap onto a second menu row instead, and the side padding tightens on smaller screens. */
@media (min-width: 782px) {
	.bf-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		white-space: nowrap;
	}
	nav.bf-nav .wp-block-navigation__container {
		flex-wrap: wrap !important;
		row-gap: 0;
	}
}
@media (min-width: 782px) and (max-width: 1100px) {
	.bf-nav .wp-block-navigation-item__content,
	.bf-nav .has-child > .wp-block-navigation-item__content {
		padding-left: 12px;
		padding-right: 12px;
	}
}