/**
 * Studiolo — site chrome: page frame, header, navigation, menu overlay,
 * footer and icons.
 *
 * Built only from the design tokens (--st-*) and logical properties, so
 * every Customizer combination (dark presets, 40px corners, uppercase
 * headings, dense or airy spacing, large type) keeps working, in LTR and RTL.
 * Footer colours come from the scheme scopes in base.css (body class
 * st-footer-{scheme}); this file only lays the footer out.
 *
 * Contents
 *   1. Page frame
 *   2. Icons
 *   3. Header bar & branding
 *   4. Primary navigation
 *   5. Dropdown submenus (desktop)
 *   6. Header actions, menu toggle & burger icon
 *   7. Header layouts (split / centered / minimal) & breakpoints
 *   8. Sticky header
 *   9. Without JavaScript
 *  10. Menu overlay
 *  11. Social links
 *  12. Footer
 *  13. Motion
 *  14. Forced colours & print
 *
 * @package Studiolo
 */

/* ==========================================================================
   1. Page frame
   ========================================================================== */

.st-site {
	/* Chrome-local tokens, derived from the design tokens. */
	--st-chrome-row: calc(5rem * var(--st-space-scale));
	--st-chrome-line: max(1px, var(--st-border-width));
	--st-chrome-underline-x: 0%;
	--st-chrome-dir: 1;
	--st-chrome-index: 2rem;

	display: flex;
	flex-direction: column;
	min-block-size: 100vh;
	min-block-size: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}

.rtl .st-site {
	--st-chrome-underline-x: 100%;
	--st-chrome-dir: -1;
}

/* "Back to top" focuses the frame; the scroll itself is the cue. */
.st-site:focus {
	outline: 0;
}

/* The footer always sits at the bottom, even on short pages. */
.st-main {
	display: block;
	flex: 1 0 auto;
}

.st-main:focus {
	outline: 0;
}

/* ==========================================================================
   2. Icons
   ========================================================================== */

.st-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
	overflow: visible;
}

/* Directional glyphs point the reading way in right-to-left languages. */
.rtl :is(.st-icon--arrow-right, .st-icon--arrow-left, .st-icon--arrow-up-right) {
	scale: -1 1;
}

/* ==========================================================================
   3. Header bar & branding
   ========================================================================== */

.st-header {
	position: relative;
	z-index: 100;
	background-color: var(--st-color-bg);
	color: var(--st-color-text);
	box-shadow: 0 0 0 0 transparent;
}

.st-header:focus {
	outline: 0;
}

.st-header__inner {
	display: flex;
	align-items: center;
	gap: var(--st-space-s) var(--st-space-l);
	min-block-size: var(--st-chrome-row);
	padding-block: var(--st-space-2xs);
}

.st-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-inline-size: 0;
}

.st-header__brand,
.st-menu-overlay__brand {
	flex: 0 1 auto;
	margin-inline-end: auto;
}

.st-site-title {
	margin: 0;
	font-family: var(--st-font-heading);
	font-size: var(--st-fs-1);
	font-weight: var(--st-heading-weight);
	font-synthesis-weight: none;
	line-height: 1.1;
	letter-spacing: var(--st-heading-tracking);
	text-transform: var(--st-heading-case);
	overflow-wrap: anywhere;
}

.st-site-title a {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	color: inherit;
	text-decoration-line: none;
}

.st-site-title a:hover {
	color: inherit;
}

.st-brand .custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	max-inline-size: 100%;
	color: inherit;
	text-decoration-line: none;
}

.st-brand .custom-logo {
	display: block;
	inline-size: auto;
	max-inline-size: min(100%, 16rem);
	block-size: auto;
	max-block-size: calc(2.75rem * var(--st-space-scale));
	object-fit: contain;
	object-position: left center;
}

.rtl .st-brand .custom-logo {
	object-position: right center;
}

/* ==========================================================================
   4. Primary navigation
   ========================================================================== */

.st-nav__menu,
.st-nav__menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-nav__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--st-space-l);
}

.st-nav__menu li {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
}

.st-header__nav a {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	color: inherit;
	font-family: var(--st-font-ui);
	font-size: var(--st-fs--1);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--st-ui-tracking);
	text-transform: var(--st-ui-case);
	text-decoration-line: none;
}

.st-header__nav a:hover {
	color: inherit;
}

/* Animated hairline underline, drawn under the label only. */
.st-nav__label {
	padding-block: 0.3em;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: var(--st-chrome-underline-x) 100%;
	background-repeat: no-repeat;
	background-size: 0% var(--st-chrome-line);
}

.st-nav__menu > li > a:is(:hover, :focus-visible, [aria-current]) > .st-nav__label,
.st-nav__menu > li:is(.is-current, .is-current-section, .current-menu-item, .current_page_item, .current-menu-ancestor, .current_page_ancestor, .st-menu-home.current_page_item) > a > .st-nav__label {
	background-size: 100% var(--st-chrome-line);
}

:is(button.st-menu-toggle, button.st-menu-close, button.st-submenu-toggle) {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--st-space-xs);
	min-inline-size: 0;
	min-block-size: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--st-radius-sm);
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	cursor: pointer;
}

:is(button.st-menu-toggle, button.st-menu-close, button.st-submenu-toggle):hover {
	background-color: transparent;
	box-shadow: none;
	color: inherit;
}

.st-header__nav button.st-submenu-toggle {
	inline-size: 1.75rem;
	margin-inline-start: 0.125rem;
}

.st-submenu-toggle[aria-expanded="true"] .st-icon {
	rotate: 180deg;
}

/* ==========================================================================
   5. Dropdown submenus (desktop)
   ========================================================================== */

@media (min-width: 960px) {
	.st-header__nav {
		--st-dropdown-pad: calc(var(--st-space-2xs) + var(--st-radius) * 0.25);
		--st-dropdown-shift: calc(-1 * (var(--st-dropdown-pad) + var(--st-space-xs) + var(--st-border-width)));
	}

	.st-nav__menu :is(.sub-menu, .children) {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: var(--st-dropdown-shift);
		z-index: 10;
		display: block;
		min-inline-size: 14rem;
		max-inline-size: min(22rem, 90vw);
		padding: var(--st-dropdown-pad);
		border: var(--st-border-width) solid var(--st-color-border);
		border-radius: var(--st-radius);
		background-color: var(--st-color-bg);
		color: var(--st-color-text);
		box-shadow: var(--st-shadow-sm);
		opacity: 0;
		visibility: hidden;
		translate: 0 0.375rem;
	}

	/* Open: managed by theme.js; plain CSS until it is ready. */
	.st-nav__menu li.is-open > :is(.sub-menu, .children),
	html:not(.st-nav-ready) .st-nav__menu li:is(:hover, :focus-within) > :is(.sub-menu, .children) {
		opacity: 1;
		visibility: visible;
		translate: none;
	}

	/* Third level flies out to the side. */
	.st-nav__menu :is(.sub-menu, .children) :is(.sub-menu, .children) {
		inset-block-start: calc(-1 * (var(--st-dropdown-pad) + var(--st-border-width)));
		inset-inline-start: calc(100% + var(--st-dropdown-pad) + var(--st-border-width));
		translate: calc(0.375rem * var(--st-chrome-dir)) 0;
	}

	/* An invisible bridge keeps hover alive across the panel padding. */
	.st-nav__menu :is(.sub-menu, .children) :is(.sub-menu, .children)::before {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-end: 100%;
		inline-size: calc(var(--st-dropdown-pad) + var(--st-border-width) * 2);
	}

	/* Flipped by theme.js when a panel would leave the viewport. */
	.st-nav__menu > li.is-flipped > :is(.sub-menu, .children) {
		inset-inline-start: auto;
		inset-inline-end: var(--st-dropdown-shift);
	}

	.st-nav__menu :is(.sub-menu, .children) li.is-flipped > :is(.sub-menu, .children) {
		inset-inline-start: auto;
		inset-inline-end: calc(100% + var(--st-dropdown-pad) + var(--st-border-width));
		translate: calc(-0.375rem * var(--st-chrome-dir)) 0;
	}

	.st-nav__menu :is(.sub-menu, .children) li.is-flipped > :is(.sub-menu, .children)::before {
		inset-inline-start: 100%;
		inset-inline-end: auto;
	}

	.st-nav__menu :is(.sub-menu, .children) li {
		justify-content: space-between;
	}

	.st-nav__menu :is(.sub-menu, .children) a {
		flex: 1 1 auto;
		padding-inline: var(--st-space-xs);
		border-radius: var(--st-radius-sm);
	}

	.st-nav__menu :is(.sub-menu, .children) a:is(:hover, :focus-visible),
	.st-nav__menu :is(.sub-menu, .children) li:is(.is-current, .current-menu-item, .current_page_item) > a {
		background-color: var(--st-color-surface);
	}

	.st-nav__menu :is(.sub-menu, .children) .st-submenu-toggle .st-icon {
		rotate: -90deg;
	}

	.rtl .st-nav__menu :is(.sub-menu, .children) .st-submenu-toggle .st-icon {
		rotate: 90deg;
	}

	/* Panels follow the Card style setting. */
	.st-cards-outline .st-nav__menu :is(.sub-menu, .children) {
		box-shadow: none;
	}

	/* Elevated keeps a faint hairline so the edge still reads on dark schemes. */
	.st-cards-elevated .st-nav__menu :is(.sub-menu, .children) {
		border-color: color-mix(in srgb, var(--st-color-border) 60%, transparent);
		box-shadow: var(--st-shadow-lg);
	}

	.st-cards-filled .st-nav__menu :is(.sub-menu, .children) {
		border-color: transparent;
		background-color: var(--st-color-surface);
		box-shadow: none;
	}

	.st-cards-filled .st-nav__menu :is(.sub-menu, .children) a:is(:hover, :focus-visible),
	.st-cards-filled .st-nav__menu :is(.sub-menu, .children) li:is(.is-current, .current-menu-item, .current_page_item) > a {
		background-color: var(--st-color-surface-strong);
	}
}

/* ==========================================================================
   6. Header actions, menu toggle & burger icon
   ========================================================================== */

.st-header__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--st-space-s);
}

.st-header__actions:not(:has(*)) {
	display: none;
}

.st-header__cta {
	display: none;
	white-space: nowrap;
}

button.st-menu-toggle,
button.st-menu-close {
	flex: none;
	min-inline-size: 2.75rem;
	margin-inline-end: calc(-1 * var(--st-space-2xs));
	padding-inline: var(--st-space-2xs);
	font-family: var(--st-font-ui);
	font-size: var(--st-fs--1);
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--st-ui-tracking);
	text-transform: var(--st-ui-case);
}

/* Two hairlines that cross into an X. */
.st-burger {
	--st-burger-line: max(1.5px, var(--st-border-width));
	--st-burger-gap: 0.3125rem;

	position: relative;
	display: inline-block;
	flex: none;
	inline-size: 1.375rem;
	block-size: 1rem;
}

.st-burger__line {
	position: absolute;
	inset-block-start: 50%;
	inset-inline: 0;
	block-size: 0;
	margin-block-start: calc(var(--st-burger-line) / -2);
	border-block-start: var(--st-burger-line) solid currentColor;
	translate: 0 calc(-1 * var(--st-burger-gap));
}

.st-burger__line + .st-burger__line {
	translate: 0 var(--st-burger-gap);
}

[aria-expanded="true"] > .st-burger .st-burger__line,
.st-menu-overlay.is-open .st-burger--close .st-burger__line {
	translate: none;
	rotate: 45deg;
}

[aria-expanded="true"] > .st-burger .st-burger__line + .st-burger__line,
.st-menu-overlay.is-open .st-burger--close .st-burger__line + .st-burger__line {
	rotate: -45deg;
}

/* ==========================================================================
   7. Header layouts & breakpoints
   Below 960px every layout shows brand + toggle; the menu lives in the
   overlay. From 960px: split (default), centered, or minimal (overlay only).
   ========================================================================== */

.st-header__nav {
	display: none;
}

@media (min-width: 600px) {
	.st-header__cta {
		display: inline-flex;
	}
}

@media (min-width: 960px) {
	.st-header__nav {
		display: block;
		flex: 0 1 auto;
		min-inline-size: 0;
	}

	body:not(.st-header-minimal) .st-header button.st-menu-toggle {
		display: none;
	}

	/* No button left to show: drop the wrapper so it adds no gap. */
	body:not(.st-header-minimal) .st-header__actions:not(:has(.st-header__cta)) {
		display: none;
	}

	/* Minimal: brand and toggle only. */
	.st-header-minimal .st-header__nav {
		display: none;
	}

	/* Centered: brand centred on its own row, navigation centred beneath. */
	.st-header-centered .st-header__inner {
		display: grid;
		grid-template-areas:
			". brand actions"
			"nav nav nav";
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-rows: minmax(var(--st-chrome-row), auto) auto;
		align-items: center;
		row-gap: 0;
		padding-block: var(--st-space-xs) 0;
	}

	.st-header-centered .st-header__brand {
		grid-area: brand;
		align-items: center;
		margin: 0;
		text-align: center;
	}

	.st-header-centered .st-site-title {
		font-size: var(--st-fs-2);
	}

	.st-header-centered .st-brand .custom-logo {
		max-block-size: calc(3.5rem * var(--st-space-scale));
		object-position: center;
	}

	.st-header-centered .st-header__actions {
		grid-area: actions;
		justify-self: end;
	}

	.st-header-centered .st-header__nav {
		grid-area: nav;
		margin-block-start: var(--st-space-xs);
		border-block-start: var(--st-border-width) solid var(--st-color-border);
	}

	.st-header-centered .st-nav__menu {
		justify-content: center;
	}
}

/* ==========================================================================
   8. Sticky header
   ========================================================================== */

.st-header-sticky .st-header {
	position: sticky;
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
}

/* The admin bar scrolls away on small screens. */
@media (max-width: 600px) {
	.admin-bar.st-header-sticky .st-header {
		inset-block-start: 0;
	}
}

.st-header-sticky .st-header.is-scrolled {
	background-color: color-mix(in srgb, var(--st-color-bg) 88%, transparent);
	box-shadow: 0 var(--st-border-width) 0 0 var(--st-color-border);
}

.st-cards-elevated.st-header-sticky .st-header.is-scrolled {
	box-shadow: 0 var(--st-border-width) 0 0 var(--st-color-border), var(--st-shadow-sm);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.st-header-sticky .st-header.is-scrolled {
		-webkit-backdrop-filter: saturate(1.4) blur(14px);
		backdrop-filter: saturate(1.4) blur(14px);
	}
}

/* ==========================================================================
   9. Without JavaScript
   The overlay needs script, so the menu is shown inline instead.
   ========================================================================== */

.no-js .st-header button.st-menu-toggle,
.no-js .st-submenu-toggle {
	display: none;
}

.no-js .st-header__nav {
	display: block;
}

@media (max-width: 959.98px) {
	.no-js .st-header__inner {
		flex-wrap: wrap;
	}

	.no-js .st-header__nav {
		flex-basis: 100%;
		order: 3;
		padding-block-end: var(--st-space-2xs);
	}

	.no-js .st-nav__menu {
		gap: 0 var(--st-space-m);
	}

	.no-js .st-nav__menu :is(.sub-menu, .children) {
		display: none;
	}
}

@media (min-width: 960px) {
	.no-js .st-header-minimal .st-header__nav {
		display: block;
	}
}

/* ==========================================================================
   10. Menu overlay
   ========================================================================== */

.st-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--st-color-bg);
	color: var(--st-color-text);
	opacity: 0;
	visibility: hidden;
}

.st-menu-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.admin-bar .st-menu-overlay {
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 600px) {
	.admin-bar .st-menu-overlay {
		inset-block-start: 0;
		z-index: 100000;
	}
}

/* Scroll lock; keep the scrollbar's space so nothing shifts. */
html.st-menu-open {
	overflow: hidden;
}

html.st-menu-open.st-has-scrollbar {
	scrollbar-gutter: stable;
}

/* Mirrors the header bar so brand and toggle stay exactly in place. */
.st-menu-overlay__bar {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--st-space-s) var(--st-space-l);
	min-block-size: var(--st-chrome-row);
	padding-block: var(--st-space-2xs);
}

.st-menu-overlay__body {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--st-space-2xl);
	padding-block: var(--st-space-l) var(--st-space-xl);
}

@media (min-width: 960px) {
	.st-menu-overlay__body {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		align-items: end;
		column-gap: var(--st-space-3xl);
		padding-block: var(--st-space-xl) var(--st-space-2xl);
	}
}

.st-overlay-menu,
.st-overlay-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-overlay-menu {
	counter-reset: st-overlay;
	border-block-start: var(--st-border-width) solid var(--st-color-border);
}

.st-overlay-menu > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	border-block-end: var(--st-border-width) solid var(--st-color-border);
	counter-increment: st-overlay;
}

.st-overlay-menu a {
	color: inherit;
	text-decoration-line: none;
}

.st-overlay-menu a:hover {
	color: inherit;
}

.st-overlay-menu > li > a {
	display: flex;
	flex: 1 1 0;
	align-items: baseline;
	gap: var(--st-space-s);
	min-inline-size: 0;
	min-block-size: 2.75rem;
	padding-block: var(--st-space-xs);
	font-family: var(--st-font-heading);
	font-size: var(--st-fs-5);
	font-weight: var(--st-heading-weight);
	font-synthesis-weight: none;
	line-height: var(--st-heading-leading);
	letter-spacing: var(--st-heading-tracking);
	text-transform: var(--st-heading-case);
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Quiet index numbers (hidden from assistive technology). */
.st-overlay-menu > li > a::before {
	content: counter(st-overlay, decimal-leading-zero);
	content: counter(st-overlay, decimal-leading-zero) / "";
	flex: none;
	min-inline-size: var(--st-chrome-index);
	color: var(--st-color-muted);
	font-family: var(--st-font-ui);
	font-size: var(--st-fs--2);
	font-weight: 500;
	letter-spacing: var(--st-ui-tracking);
	text-transform: none;
}

.st-overlay-menu__label {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: var(--st-chrome-underline-x) 100%;
	background-repeat: no-repeat;
	background-size: 0% var(--st-chrome-line);
}

.st-overlay-menu a:is(:hover, :focus-visible, [aria-current]) > .st-overlay-menu__label,
.st-overlay-menu li:is(.is-current, .current-menu-item, .current_page_item) > a > .st-overlay-menu__label {
	background-size: 100% var(--st-chrome-line);
}

.st-overlay-menu button.st-submenu-toggle {
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--st-radius-button);
}

.st-overlay-menu :is(.sub-menu, .children) {
	display: none;
	flex-basis: 100%;
	padding-block-end: var(--st-space-s);
	padding-inline-start: calc(var(--st-chrome-index) + var(--st-space-s));
}

.st-overlay-menu li.is-open > :is(.sub-menu, .children) {
	display: block;
}

.st-overlay-menu :is(.sub-menu, .children) li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
}

.st-overlay-menu :is(.sub-menu, .children) a {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	font-family: var(--st-font-heading);
	font-size: var(--st-fs-2);
	font-weight: var(--st-heading-weight);
	font-synthesis-weight: none;
	line-height: 1.15;
	letter-spacing: var(--st-heading-tracking);
	text-transform: var(--st-heading-case);
	overflow-wrap: break-word;
}

.st-overlay-menu :is(.sub-menu, .children) :is(.sub-menu, .children) {
	padding-inline-start: var(--st-space-m);
}

.st-overlay-menu :is(.sub-menu, .children) :is(.sub-menu, .children) a {
	font-size: var(--st-fs-1);
}

.st-menu-overlay__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--st-space-l);
	min-inline-size: 0;
	container-type: inline-size;
}

.st-menu-overlay__contact {
	display: grid;
	gap: var(--st-space-2xs);
	max-inline-size: 100%;
}

.st-menu-overlay__label {
	margin: 0;
}

.st-menu-overlay__email {
	color: inherit;
	font-family: var(--st-font-heading);
	font-size: var(--st-fs-1);
	/* Scale with the column so long addresses stay on one line. */
	font-size: max(var(--st-fs-0), min(var(--st-fs-2), 7cqi));
	font-weight: var(--st-heading-weight);
	font-synthesis-weight: none;
	line-height: 1.2;
	letter-spacing: var(--st-heading-tracking);
	text-decoration-line: underline;
	text-decoration-thickness: var(--st-chrome-line);
	text-decoration-color: var(--st-color-border);
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}

.st-menu-overlay__email:hover {
	color: inherit;
	text-decoration-color: currentColor;
}

/* ==========================================================================
   11. Social links
   ========================================================================== */

.st-social-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-social-menu li {
	margin: 0;
}

.st-social-menu a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: var(--st-border-width) solid var(--st-color-border);
	border-radius: var(--st-radius-button);
	color: inherit;
	text-decoration-line: none;
}

.st-social-menu a:is(:hover, :focus-visible) {
	border-color: var(--st-color-text);
	background-color: var(--st-color-text);
	color: var(--st-color-bg);
}

.st-social-menu .st-icon {
	inline-size: 1.125rem;
	block-size: 1.125rem;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.st-footer {
	padding-block: var(--st-section) var(--st-space-l);
}

/* Nothing but the bottom bar (no statement, contact or menus yet). */
.st-footer:not(:has(.st-footer__lead, .st-footer__grid)) {
	padding-block-start: var(--st-space-l);
}

.st-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--st-space-2xl);
}

.st-footer__inner > :first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

.st-footer a {
	color: inherit;
}

/* Lead: the statement and the contact link. */
.st-footer__lead {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--st-space-l);
	container-type: inline-size;
}

.st-footer__statement {
	max-inline-size: min(15em, 100%);
	margin: 0;
	font-family: var(--st-font-heading);
	font-size: var(--st-fs-6);
	font-weight: var(--st-heading-weight);
	font-synthesis-weight: none;
	line-height: var(--st-heading-leading);
	letter-spacing: var(--st-heading-tracking);
	text-transform: var(--st-heading-case);
	text-wrap: balance;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.st-footer__statement:empty {
	display: none;
}

.st-footer a.st-footer__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	max-inline-size: 100%;
	min-block-size: 2.75rem;
	font-family: var(--st-font-heading);
	font-size: var(--st-fs-3);
	font-size: max(var(--st-fs-0), min(var(--st-fs-3), 7cqi));
	font-weight: var(--st-heading-weight);
	font-synthesis-weight: none;
	line-height: 1.15;
	letter-spacing: var(--st-heading-tracking);
	text-decoration-line: none;
}

.st-footer__cta--cta {
	text-transform: var(--st-heading-case);
}

.st-footer__cta-label {
	min-inline-size: 0;
	text-decoration-line: underline;
	text-decoration-thickness: var(--st-chrome-line);
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 0.16em;
	overflow-wrap: anywhere;
}

.st-footer a.st-footer__cta:hover {
	color: inherit;
}

.st-footer__cta:is(:hover, :focus-visible) .st-footer__cta-label {
	text-decoration-color: currentColor;
}

.st-footer__cta .st-icon {
	inline-size: 0.8em;
	block-size: 0.8em;
}

/* Columns. */
.st-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
	gap: var(--st-space-xl) var(--st-space-l);
	padding-block-start: var(--st-space-xl);
	border-block-start: var(--st-border-width) solid var(--st-color-border);
}

.st-footer__col {
	min-inline-size: 0;
}

.st-footer__col:empty {
	display: none;
}

.st-footer__label {
	margin: 0 0 var(--st-space-xs);
}

.st-footer-menu,
.st-footer__contact-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-footer-menu li,
.st-footer__contact-list li {
	margin: 0;
}

.st-footer .st-footer-menu a,
.st-footer a.st-footer__contact-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	max-inline-size: 100%;
	color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: var(--st-chrome-line);
	text-decoration-color: transparent;
	text-underline-offset: 0.25em;
	overflow-wrap: anywhere;
}

.st-footer .st-footer-menu a:is(:hover, :focus-visible, [aria-current]),
.st-footer a.st-footer__contact-link:is(:hover, :focus-visible) {
	color: inherit;
	text-decoration-color: currentColor;
}

.st-footer__address {
	margin: 0;
	font-style: normal;
}

.st-footer__address-lines {
	margin: 0 0 var(--st-space-xs);
}

.st-footer__contact-text {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
}

.st-footer__social .st-social-menu {
	margin-block-start: var(--st-space-2xs);
}

/* Widget areas. */
.st-footer__widgets .widget {
	margin: 0;
}

.st-footer__widgets .widget + .widget {
	margin-block-start: var(--st-space-l);
}

.st-footer__widgets .widget-title {
	margin: 0 0 var(--st-space-xs);
}

/* Block widgets bring their own headings (e.g. WordPress's default
   Archives/Categories widgets use an h2): show them as column labels. */
.st-footer__widgets .widget :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 var(--st-space-xs);
	font-family: var(--st-font-ui);
	font-size: var(--st-fs--2);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: var(--st-ui-tracking);
	text-transform: var(--st-ui-case);
	color: var(--st-color-muted);
	overflow-wrap: normal;
}

.st-footer__widgets .widget :is(ul, ol):not([class*="wp-block-social-links"]) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-footer__widgets .widget li + li {
	margin-block-start: var(--st-space-2xs);
}

.st-footer__widgets .widget :is(p, figure):last-child {
	margin-block-end: 0;
}

/* Bottom bar. */
.st-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-space-3xs) var(--st-space-l);
	padding-block-start: var(--st-space-s);
	border-block-start: var(--st-border-width) solid var(--st-color-border);
	color: var(--st-color-muted);
	font-size: var(--st-fs--1);
}

.st-footer__copyright {
	margin: 0;
}

.st-footer__copyright:empty {
	display: none;
}

.st-footer a.st-footer__top {
	display: inline-flex;
	align-items: center;
	gap: var(--st-space-2xs);
	min-block-size: 2.75rem;
	margin-inline-start: auto;
	color: var(--st-color-text);
	font-family: var(--st-font-ui);
	font-size: var(--st-fs--1);
	font-weight: 500;
	letter-spacing: var(--st-ui-tracking);
	text-transform: var(--st-ui-case);
	text-decoration-line: underline;
	text-decoration-thickness: var(--st-chrome-line);
	text-decoration-color: transparent;
	text-underline-offset: 0.3em;
}

.st-footer a.st-footer__top:is(:hover, :focus-visible) {
	color: var(--st-color-text);
	text-decoration-color: currentColor;
}

/* ==========================================================================
   13. Motion
   Small hover transitions follow the reduced-motion preference; the overlay
   choreography also needs the Motion setting (body.st-motion), matching
   theme.js.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.st-header {
		transition:
			background-color var(--st-duration) var(--st-ease),
			box-shadow var(--st-duration) var(--st-ease);
	}

	.st-nav__label,
	.st-overlay-menu__label {
		transition: background-size var(--st-duration) var(--st-ease);
	}

	.st-submenu-toggle .st-icon {
		transition: rotate var(--st-duration-fast) var(--st-ease);
	}

	.st-nav__menu :is(.sub-menu, .children) a,
	.st-social-menu a {
		transition:
			background-color var(--st-duration-fast) var(--st-ease),
			border-color var(--st-duration-fast) var(--st-ease),
			color var(--st-duration-fast) var(--st-ease);
	}

	.st-footer-menu a,
	.st-footer__contact-link,
	.st-footer__cta-label,
	.st-footer__top,
	.st-menu-overlay__email {
		transition: text-decoration-color var(--st-duration-fast) var(--st-ease);
	}

	.st-footer__cta .st-icon,
	.st-footer__top .st-icon {
		transition: translate var(--st-duration) var(--st-ease);
	}

	.st-footer__cta:is(:hover, :focus-visible) .st-icon {
		translate: calc(0.12em * var(--st-chrome-dir)) -0.12em;
	}

	.st-footer__top:is(:hover, :focus-visible) .st-icon {
		translate: 0 -0.2em;
	}

	/* Dropdowns fade and settle; visibility waits for the fade-out. */
	.st-nav__menu :is(.sub-menu, .children) {
		transition:
			opacity var(--st-duration-fast) var(--st-ease),
			translate var(--st-duration-fast) var(--st-ease),
			visibility 0s linear var(--st-duration-fast);
	}

	.st-nav__menu li.is-open > :is(.sub-menu, .children),
	html:not(.st-nav-ready) .st-nav__menu li:is(:hover, :focus-within) > :is(.sub-menu, .children) {
		transition-delay: 0s;
	}

	/* Burger: lines meet, then turn (and back again in reverse). */
	.st-burger__line {
		transition:
			translate var(--st-duration-fast) var(--st-ease) var(--st-duration-fast),
			rotate var(--st-duration-fast) var(--st-ease) 0s;
	}

	[aria-expanded="true"] > .st-burger .st-burger__line,
	.st-menu-overlay.is-open .st-burger--close .st-burger__line {
		transition:
			translate var(--st-duration-fast) var(--st-ease) 0s,
			rotate var(--st-duration-fast) var(--st-ease) var(--st-duration-fast);
	}

	.st-motion .st-menu-overlay.is-open .st-burger--close .st-burger__line {
		transition-delay: 120ms, calc(120ms + var(--st-duration-fast));
	}

	/* Overlay: fade in, then the links rise in sequence. */
	.st-motion .st-menu-overlay {
		transition:
			opacity var(--st-duration) var(--st-ease),
			visibility 0s linear var(--st-duration);
	}

	.st-motion .st-menu-overlay.is-open {
		transition-delay: 0s;
	}

	.st-motion .st-menu-overlay :is(.st-overlay-menu > li, .st-menu-overlay__aside) {
		opacity: 0;
		translate: 0 1.25rem;
		transition:
			opacity var(--st-duration) var(--st-ease),
			translate var(--st-duration) var(--st-ease);
	}

	.st-motion .st-menu-overlay.is-open :is(.st-overlay-menu > li, .st-menu-overlay__aside) {
		opacity: 1;
		translate: none;
		transition-delay: calc(120ms + var(--st-i, 0) * 55ms);
	}

	.st-motion .st-overlay-menu li.is-open > :is(.sub-menu, .children) {
		animation: st-chrome-drop var(--st-duration) var(--st-ease);
	}
}

@keyframes st-chrome-drop {
	from {
		opacity: 0;
		translate: 0 -0.5rem;
	}

	to {
		opacity: 1;
		translate: none;
	}
}

/* ==========================================================================
   14. Forced colours & print
   ========================================================================== */

@media (forced-colors: active) {
	.st-nav__label,
	.st-overlay-menu__label {
		background-image: none;
	}

	.st-nav__menu > li > a:is(:hover, :focus-visible, [aria-current]) > .st-nav__label,
	.st-overlay-menu a:is(:hover, :focus-visible, [aria-current]) > .st-overlay-menu__label {
		text-decoration-line: underline;
	}

	.st-nav__menu :is(.sub-menu, .children) {
		border: 1px solid;
	}
}

@media print {
	.st-site {
		display: block;
		min-block-size: 0;
	}

	.st-header,
	.st-header-sticky .st-header {
		position: static;
		box-shadow: none;
	}

	.st-menu-overlay,
	.st-menu-toggle,
	.st-submenu-toggle,
	.st-footer__top {
		display: none !important;
	}
}