/**
 * Footer.
 *
 * The footer carries the site's signature: the three descending bars of the
 * mark, full width, then the wordmark set large opposite the site's promise,
 * then four columns across the full width with the reading order first, its
 * parts numbered in the countdown style. The standing pages and the notice
 * close it.
 */

/* On the front page, the last band runs straight into the footer. */
main.boi-front + footer,
main.boi-front + footer .boi-footer,
.wp-site-blocks > main.boi-front + .wp-block-template-part {
	margin-block-start: 0 !important;
}

.boi-footer {
	--boi-footer-link: #DEE9F5;
	--boi-footer-mute: #9DB3C9;
	--boi-footer-rule: #213E61;
}

/* Signature: the mark's three bars, full width. */
.boi-footer__bars {
	display: grid;
	gap: 0.85rem;
	margin-block: 0 clamp(2.5rem, 5vw, 3.75rem) !important;
}

.boi-footer__bars span {
	display: block;
	block-size: 0.5rem;
	border-radius: 999px;
}

.boi-footer__bars span:nth-child(1) {
	inline-size: 100%;
	background: var(--wp--preset--color--accent-2, #E8B33C);
}

.boi-footer__bars span:nth-child(2) {
	inline-size: 78%;
	background: #3FA9F5;
}

.boi-footer__bars span:nth-child(3) {
	inline-size: 52%;
	background: #FFFFFF;
}

/* Statement: the wordmark, large, opposite the promise. */
.boi-footer__statement {
	gap: 1.5rem 3rem;
	padding-block-end: clamp(1.75rem, 3vw, 2.5rem);
	border-block-end: 1px solid var(--boi-footer-rule);
}

/* Brandmark beside the wordmark; it takes the footer's light text colour and
   scales with the wordmark. */
.boi-footer__brand {
	gap: clamp(0.7rem, 1.5vw, 1.1rem);
	align-items: center;
}

.boi-footer__mark {
	display: block;
	flex: 0 0 auto;
	inline-size: clamp(2.6rem, 5.5vw, 4.25rem);
	block-size: clamp(2.6rem, 5.5vw, 4.25rem);
	color: #FFFFFF;
}

.boi-footer__mark svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.boi-footer__wordmark,
.boi-footer__wordmark a {
	margin: 0;
	font-family: var(--wp--preset--font-family--vollkorn, Georgia, serif);
	font-size: clamp(2.6rem, 5.5vw, 4.25rem) !important;
	font-weight: 800;
	line-height: 1 !important;
	letter-spacing: -0.035em;
	text-transform: lowercase;
	color: #FFFFFF !important;
	text-decoration: none;
}

.boi-footer__promise {
	margin: 0 !important;
	max-inline-size: 30rem;
	font-family: var(--wp--preset--font-family--platypi, Georgia, serif);
	font-size: clamp(1.25rem, 2.2vw, 1.75rem) !important;
	font-weight: 500;
	line-height: 1.3 !important;
	text-align: end !important;
	color: var(--boi-footer-link);
	text-wrap: balance;
}

/* Four columns across the full width. */
.boi-footer__cols {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.5rem 2rem;
	margin-block-start: clamp(2rem, 4vw, 2.75rem) !important;
}

.boi-footer__col > * {
	margin-block: 0 !important;
}

.boi-footer__label {
	margin-block-end: 1.1rem !important;
	font-family: var(--wp--preset--font-family--ysabeau-office, system-ui, sans-serif) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2, #E8B33C) !important;
}

.boi-footer__nav .wp-block-navigation__container {
	gap: 0.7rem !important;
}

.boi-footer__nav .wp-block-navigation-item__content {
	padding: 0 !important;
	font-size: 1rem;
	color: var(--boi-footer-link) !important;
	text-decoration: none;
}

.boi-footer__nav .wp-block-navigation-item__content:hover,
.boi-footer__nav .wp-block-navigation-item__content:focus-visible,
.boi-parts a:hover .boi-parts__label,
.boi-parts a:focus-visible .boi-parts__label {
	color: #FFFFFF !important;
	text-decoration: none !important;
}

/* The reading order, numbered in the countdown style. */
.boi-parts {
	display: grid;
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.boi-parts a {
	display: grid;
	grid-template-columns: 1.6rem 1fr;
	align-items: baseline;
	color: var(--boi-footer-link);
	text-decoration: none;
}

.boi-parts__num {
	font-family: var(--wp--preset--font-family--platypi, Georgia, serif);
	font-weight: 700;
	color: #3FA9F5;
}

.boi-parts li:first-child .boi-parts__num {
	color: var(--wp--preset--color--accent-2, #E8B33C);
}

.boi-footer__note {
	margin-block-end: 1rem !important;
	font-size: 0.9rem;
	color: var(--boi-footer-mute);
}

.boi-footer ul.boi-social {
	margin-block-start: 0 !important;
}

/* The closing rows. */
.boi-footer .boi-footer__bottom {
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem) !important;
	border-top-color: var(--boi-footer-rule) !important;
}

/* Interface text in the footer is set in the sans. */
.boi-footer .wp-block-navigation-item__content,
.boi-footer .boi-footer__note,
.boi-footer .boi-notice {
	font-family: var(--wp--preset--font-family--ysabeau-office, system-ui, sans-serif) !important;
}

/* The standing pages: a quiet row of links, no pills, no underline. */
.boi-footer .boi-footer__bar .wp-block-navigation__container {
	gap: 0.25rem 1.5rem !important;
}

.boi-footer .boi-footer__bar .wp-block-navigation-item__content {
	padding: 0.15rem 0 !important;
	font-size: 0.85rem !important;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--boi-footer-link) !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: inset 0 -2px 0 transparent;
	transition: color 0.15s ease, box-shadow 0.15s ease;
}

.boi-footer .boi-footer__bar .wp-block-navigation-item__content:hover,
.boi-footer .boi-footer__bar .wp-block-navigation-item__content:focus-visible {
	color: #FFFFFF !important;
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--accent-2, #E8B33C);
}

/* No separator dots between the links. */
.boi-footer .boi-footer__bar .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: none !important;
	display: none !important;
}

/* The column links: no pill padding, so they sit flush with their heading. */
.boi-footer .boi-footer__nav .wp-block-navigation-item__content {
	background: none !important;
	border: 0 !important;
}

/* The notice and the way back up, on one line. */
.boi-footer .boi-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	color: var(--boi-footer-mute);
}

.boi-footer .boi-notice__text {
	margin: 0;
	flex: 1 1 32rem;
	max-inline-size: none !important;
	font-size: 0.8rem;
	line-height: 1.6;
}

.boi-footer .boi-notice__text a {
	color: var(--boi-footer-link);
	text-decoration: none;
	border-block-end: 1px solid var(--boi-footer-rule);
}

.boi-footer .boi-notice__text a:hover,
.boi-footer .boi-notice__text a:focus-visible {
	color: #FFFFFF;
	border-block-end-color: var(--wp--preset--color--accent-2, #E8B33C);
}

.boi-footer .boi-notice__top {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 1rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none !important;
	border: 1px solid var(--boi-footer-rule);
	border-radius: 999px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.boi-footer .boi-notice__top:hover,
.boi-footer .boi-notice__top:focus-visible {
	background: rgb(255 255 255 / 0.06);
	border-color: var(--wp--preset--color--accent-2, #E8B33C);
}

/* Smaller screens. */
@media (max-width: 1024px) {
	.boi-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.boi-footer__promise {
		text-align: start !important;
	}
}

@media (max-width: 600px) {
	.boi-footer__cols {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.boi-footer__bars {
		gap: 0.6rem;
	}

	.boi-footer__bars span {
		block-size: 0.4rem;
	}
}

/* Every column starts on the same line. */
.boi-footer .boi-footer__cols {
	align-items: start;
}

.boi-footer .boi-footer__col {
	margin-block-start: 0 !important;
}

.boi-footer .boi-footer__col > .boi-footer__label {
	margin-block-start: 0 !important;
}

.boi-footer .boi-parts__label {
	font-family: var(--wp--preset--font-family--ysabeau-office, system-ui, sans-serif);
	font-size: 1rem;
}

@media (max-width: 781px) {
	.boi-footer .boi-notice {
		flex-direction: column;
		align-items: flex-start;
	}

	.boi-footer .boi-notice__text {
		flex: none;
	}
}

/* Columns: the reading order is the widest; the others share the rest. */
.boi-footer .boi-footer__cols {
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	column-gap: clamp(2rem, 4vw, 3.5rem);
}

/* Column headings: gold label over a short rule. */
.boi-footer .boi-footer__label {
	padding-block-end: 0.75rem;
	margin-block-end: 1rem !important;
	border-block-end: 1px solid var(--boi-footer-rule);
}

/* Reading order: numbered rows in one rhythm, numbers in small gold badges. */
.boi-footer .boi-parts {
	gap: 0;
}

.boi-footer .boi-parts a {
	grid-template-columns: 1.75rem 1fr;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.45rem;
	border-block-end: 1px solid rgb(255 255 255 / 0.04);
	transition: color 0.15s ease;
}

.boi-footer .boi-parts__num,
.boi-footer .boi-parts li:first-child .boi-parts__num {
	display: inline-grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	font-family: var(--wp--preset--font-family--ysabeau-office, system-ui, sans-serif);
	font-size: 0.8rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent-2, #E8B33C);
	border: 1px solid rgb(232 179 60 / 0.45);
	border-radius: 50%;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.boi-footer .boi-parts a:hover,
.boi-footer .boi-parts a:focus-visible {
	color: #FFFFFF;
}

.boi-footer .boi-parts a:hover .boi-parts__num,
.boi-footer .boi-parts a:focus-visible .boi-parts__num {
	color: #0D2B4E;
	background: var(--wp--preset--color--accent-2, #E8B33C);
}

.boi-footer .boi-parts a:hover .boi-parts__label,
.boi-footer .boi-parts a:focus-visible .boi-parts__label {
	text-decoration: none !important;
}

/* Column links: the same row rhythm, with an arrow that slides in on hover. */
.boi-footer .boi-footer__nav .wp-block-navigation__container {
	gap: 0 !important;
	inline-size: 100%;
}

.boi-footer .boi-footer__nav .wp-block-navigation-item {
	inline-size: 100%;
}

.boi-footer .boi-footer__nav .wp-block-navigation-item__content {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	inline-size: 100%;
	padding-block: 0.55rem !important;
	font-size: 0.95rem !important;
	border-block-end: 1px solid rgb(255 255 255 / 0.04) !important;
}

.boi-footer .boi-footer__nav .wp-block-navigation-item__content::after {
	content: "\2192";
	opacity: 0;
	transform: translateX(-4px);
	color: var(--wp--preset--color--accent-2, #E8B33C);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.boi-footer .boi-footer__nav .wp-block-navigation-item__content:hover::after,
.boi-footer .boi-footer__nav .wp-block-navigation-item__content:focus-visible::after {
	opacity: 1;
	transform: none;
}

.boi-footer .boi-footer__note {
	font-size: 0.95rem;
	line-height: 1.5;
}

@media (max-width: 1024px) {
	.boi-footer .boi-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.boi-footer .boi-footer__cols {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.boi-footer .boi-footer__nav .wp-block-navigation-item__content::after,
	.boi-footer .boi-parts__num {
		transition: none;
	}
}

.boi-footer .boi-footer__nav,
.boi-footer .boi-footer__nav .wp-block-navigation__container,
.boi-footer .boi-footer__nav .wp-block-navigation-item {
	inline-size: 100% !important;
	align-items: stretch !important;
}

.boi-footer .boi-footer__nav .wp-block-navigation-item__content {
	padding-inline: 0 !important;
	margin: 0 !important;
	border-block-end: 0 !important;
}

.boi-footer .boi-footer__nav .wp-block-navigation-item {
	margin: 0 !important;
	border-block-end: 1px solid rgb(255 255 255 / 0.04);
}