/**
 * Global rules that theme.json can't express: states theme.json has no hook for,
 * light-surface overrides, form controls, and decorative ornaments.
 * Tokens only: every value is a theme.json preset or custom property.
 * Specs come from the Figma components named in each comment.
 */

/* Font-size presets carry their Figma line height. */
.has-display-font-size { line-height: var(--wp--custom--line-height--display); }
.has-h-2-font-size { line-height: var(--wp--custom--line-height--h-2); }
.has-script-font-size { line-height: var(--wp--custom--line-height--script); }
.has-eyebrow-font-size { line-height: var(--wp--custom--line-height--eyebrow); }
.has-nav-font-size { line-height: var(--wp--custom--line-height--nav); }
.has-nav-mobile-font-size { line-height: var(--wp--custom--line-height--nav-mobile); }
.has-body-font-size { line-height: var(--wp--custom--line-height--body); }
.has-body-small-font-size { line-height: var(--wp--custom--line-height--body-small); }
.has-caption-font-size { line-height: var(--wp--custom--line-height--caption); }
.has-button-font-size { line-height: var(--wp--custom--line-height--button); }
.has-footer-link-font-size { line-height: var(--wp--custom--line-height--footer-link); }

/* The Ornament divider's 4-point fleuron (Figma: Ornament divider › Fleuron), used as a CSS mask. */
:root {
	--aa-fleuron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpolygon points='7,0 8.73,5.27 14,7 8.73,8.73 7,14 5.27,8.73 0,7 5.27,5.27'/%3E%3C/svg%3E");
}

/* Backdrop for every native modal dialog (decision 11). */
::backdrop { background: var(--wp--custom--color--scrim--overlay); }

/* Hard rule 2: the serif stack everywhere, including form controls and code. */
button, input, select, textarea, code, kbd, samp, pre { font-family: var(--wp--preset--font-family--serif); }

/* 16px text floor (decision 5): h5/h6 have no Figma style, so they only get the floor. */
h5, h6 { font-size: var(--wp--preset--font-size--body-small); }

/* Light surfaces (cream panels). Text, headings and links switch to ink. */
:is(.has-cream-100-background-color, .is-surface-light) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--custom--color--text--on-light);
}
/* Text link, Surface=Light: ink, always underlined, hover muted, Focus/Ring-light. */
:is(.has-cream-100-background-color, .is-surface-light) a:where(:not(.wp-element-button)) {
	color: var(--wp--custom--color--text--on-light);
}
:is(.has-cream-100-background-color, .is-surface-light) a:where(:not(.wp-element-button)):hover {
	color: var(--wp--custom--color--text--muted-on-light);
}
:is(.has-cream-100-background-color, .is-surface-light) a:where(:not(.wp-element-button)):focus-visible {
	color: var(--wp--custom--color--text--on-light);
	background-color: var(--wp--custom--color--bg--panel);
	box-shadow: var(--wp--preset--shadow--focus-ring-light);
}

/* ---------- Buttons (Figma: Button, Inquiry CTA block) ---------- */

.wp-element-button,
.wp-block-button__link {
	text-underline-offset: var(--wp--preset--spacing--4);
}

/* Light surfaces: Outline label is ink (Figma Next/Previous/Clear). States below override it. */
:is(.has-cream-100-background-color, .is-surface-light) .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--custom--color--text--on-light);
}

/* Outline states (doubled class so they beat the light-surface default). Figma Outline: Hover = bg/nav fill, gold-hover border and label;
   Focus = bg/nav fill, border/gold, gold-light label, Focus/Ring; Pressed = bg/panel fill, ink border and label, Bevel/Inner. */
.wp-block-button.is-style-outline > .wp-block-button__link.wp-block-button__link:hover {
	background: var(--wp--custom--color--bg--nav);
	border-color: var(--wp--custom--color--accent--gold-hover);
	color: var(--wp--custom--color--accent--gold-hover);
}
.wp-block-button.is-style-outline > .wp-block-button__link.wp-block-button__link:is(:focus, :focus-visible) {
	background: var(--wp--custom--color--bg--nav);
	border-color: var(--wp--custom--color--border--gold);
	color: var(--wp--custom--color--accent--gold-light);
}
.wp-block-button.is-style-outline > .wp-block-button__link.wp-block-button__link:active {
	background: var(--wp--custom--color--bg--panel);
	border-color: var(--wp--custom--color--text--on-gold);
	color: var(--wp--custom--color--text--on-gold);
	box-shadow: var(--wp--preset--shadow--bevel-inner);
}

/* Light surfaces: focus uses Focus/Ring-light (Inquiry CTA block). */
:is(.has-cream-100-background-color, .is-surface-light) :is(.wp-element-button, .wp-block-button__link):is(:focus, :focus-visible) {
	box-shadow: var(--wp--preset--shadow--focus-ring-light);
}

/* Disabled: 45% opacity + aria-disabled (Figma Button description). */
:is(.wp-element-button, .wp-block-button__link):is(:disabled, [aria-disabled="true"]) {
	opacity: var(--wp--custom--opacity--disabled);
	cursor: not-allowed;
	pointer-events: none;
}

/* Inquiry CTA (56px). theme.json puts the variation's min-height on the wrapper; the link needs it too. */
.wp-block-button.is-style-inquiry-cta > .wp-block-button__link {
	min-height: var(--wp--custom--tap-target--xl);
	align-content: center;
}

/* ---------- Ornament divider (Figma: Ornament divider; used by separator and pull-quote) ---------- */

.wp-block-separator:not(.is-style-wide, .is-style-dots),
.aa-ornament,
.wp-block-pullquote::before,
.wp-block-pullquote::after {
	--aa-ornament-rule: calc(50% - var(--wp--custom--ornament--fleuron) / 2 - var(--wp--preset--spacing--12));
	display: block;
	content: "";
	width: 100%;
	max-width: none;
	height: var(--wp--custom--ornament--height);
	border: 0;
	opacity: 1;
	background: linear-gradient(
		to right,
		var(--wp--custom--color--border--gold-subtle) calc(50% - var(--wp--custom--ornament--fleuron) / 2),
		var(--wp--custom--color--accent--gold) 0 calc(50% + var(--wp--custom--ornament--fleuron) / 2),
		var(--wp--custom--color--border--gold-subtle) 0
	);
	-webkit-mask:
		linear-gradient(currentColor 0 0) left center / var(--aa-ornament-rule) var(--wp--custom--border-width--hairline) no-repeat,
		linear-gradient(currentColor 0 0) right center / var(--aa-ornament-rule) var(--wp--custom--border-width--hairline) no-repeat,
		var(--aa-fleuron) center / var(--wp--custom--ornament--fleuron) var(--wp--custom--ornament--fleuron) no-repeat;
	mask:
		linear-gradient(currentColor 0 0) left center / var(--aa-ornament-rule) var(--wp--custom--border-width--hairline) no-repeat,
		linear-gradient(currentColor 0 0) right center / var(--aa-ornament-rule) var(--wp--custom--border-width--hairline) no-repeat,
		var(--aa-fleuron) center / var(--wp--custom--ornament--fleuron) var(--wp--custom--ornament--fleuron) no-repeat;
}
/* Wide and dots have no Figma equivalent: only the colour is tokenised (via theme.json). */
.wp-block-separator.is-style-wide { border-top-width: var(--wp--custom--border-width--hairline); }

/* ---------- Pull-quote (Figma: About/Pull-quote = ornament, centred Caption, ornament) ---------- */

.wp-block-pullquote {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	text-align: center;
}
.wp-block-pullquote blockquote,
.wp-block-pullquote p { margin: 0; font-size: inherit; line-height: inherit; }

/* ---------- Form controls (Figma: Text input, Textarea, Select, Checkbox, Radio, Inquiry Drawer) ---------- */

label,
legend {
	font-size: var(--wp--preset--font-size--body-small);
	line-height: var(--wp--custom--line-height--body-small);
}
label:has(> input[type="radio"]) {
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }

/* :where() keeps this at zero specificity so the select, textarea and state rules below can refine it. */
:where(input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="search"], [type="number"], [type="password"], [type="date"]), textarea, select),
.wp-block-search__input {
	box-sizing: border-box;
	min-height: var(--wp--custom--tap-target--lg);
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
	border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--border--gold-subtle);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--custom--color--bg--panel);
	color: var(--wp--custom--color--text--on-light);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}
/* Focus = 2px ink border + Focus/Ring-light. The second pixel is an inset shadow so the field doesn't shift. */
:is(input, textarea, select):not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]):focus,
.wp-block-search__input:focus {
	border-color: var(--wp--custom--color--text--on-light);
	outline: var(--wp--custom--border-width--focus) solid transparent;
	box-shadow: inset 0 0 0 var(--wp--custom--border-width--hairline) var(--wp--custom--color--text--on-light), var(--wp--preset--shadow--focus-ring-light);
}
/* Error = 2px ink border (message and icon are part of the field component). */
:is(input, textarea, select)[aria-invalid="true"] {
	border-color: var(--wp--custom--color--text--on-light);
	box-shadow: inset 0 0 0 var(--wp--custom--border-width--hairline) var(--wp--custom--color--text--on-light);
}
:is(input, textarea, select, button):disabled {
	opacity: var(--wp--custom--opacity--disabled);
	cursor: not-allowed;
}
textarea { min-height: var(--wp--custom--form--textarea-min-height); }

/* Select: Figma pad 8/16, chevron in border/gold-subtle on the right. */
select {
	appearance: none;
	padding-block: var(--wp--preset--spacing--8);
	padding-inline-end: var(--wp--custom--tap-target--base);
	background-image:
		linear-gradient(45deg, transparent calc(50% - var(--wp--custom--border-width--hairline)), var(--wp--custom--color--border--gold-subtle) calc(50% - var(--wp--custom--border-width--hairline)) calc(50% + var(--wp--custom--border-width--hairline)), transparent calc(50% + var(--wp--custom--border-width--hairline))),
		linear-gradient(135deg, transparent calc(50% - var(--wp--custom--border-width--hairline)), var(--wp--custom--color--border--gold-subtle) calc(50% - var(--wp--custom--border-width--hairline)) calc(50% + var(--wp--custom--border-width--hairline)), transparent calc(50% + var(--wp--custom--border-width--hairline)));
	background-position:
		right calc(var(--wp--preset--spacing--16) + var(--wp--preset--spacing--8) - var(--wp--custom--border-width--hairline)) center,
		right var(--wp--preset--spacing--16) center;
	background-size: var(--wp--preset--spacing--8) var(--wp--preset--spacing--8);
	background-repeat: no-repeat;
}

/* Checkbox: 22px box, bg/nav fill, border/gold; Checked = gold fill + ink check mark; Hover = bg/panel + gold-hover border. */
input[type="checkbox"] {
	appearance: none;
	display: inline-grid;
	place-content: center;
	box-sizing: border-box;
	inline-size: var(--wp--custom--form--check-size);
	block-size: var(--wp--custom--form--check-size);
	margin: 0;
	vertical-align: middle;
	border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--border--gold);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--custom--color--bg--nav);
}
input[type="checkbox"]:hover {
	background-color: var(--wp--custom--color--bg--panel);
	border-color: var(--wp--custom--color--accent--gold-hover);
}
input[type="checkbox"]:checked {
	background-color: var(--wp--custom--color--accent--gold);
	border-color: var(--wp--custom--color--border--gold);
}
input[type="checkbox"]:checked::before {
	content: "";
	inline-size: calc(var(--wp--custom--form--check-size) / 4);
	block-size: calc(var(--wp--custom--form--check-size) / 2);
	margin-block-start: calc(var(--wp--custom--form--check-size) / -8);
	border: solid var(--wp--custom--color--text--on-gold);
	border-width: 0 var(--wp--custom--border-width--focus) var(--wp--custom--border-width--focus) 0;
	transform: rotate(45deg);
}

/* Radio: 22px circle, bg/panel fill, ink border; Selected = 12px ink dot (shape, not colour). */
input[type="radio"] {
	appearance: none;
	box-sizing: border-box;
	inline-size: var(--wp--custom--form--check-size);
	block-size: var(--wp--custom--form--check-size);
	margin: 0;
	vertical-align: middle;
	border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--text--on-light);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--color--bg--panel);
}
input[type="radio"]:checked {
	background-image: radial-gradient(circle, var(--wp--custom--color--text--on-light) calc(var(--wp--custom--form--radio-dot) / 2), transparent calc(var(--wp--custom--form--radio-dot) / 2 + var(--wp--custom--border-width--hairline)));
}

/* Checkbox focus = Focus/Ring (dark surface); Radio focus = Focus/Ring-light; any control on a light surface uses Ring-light. */
input[type="checkbox"]:focus-visible {
	outline: var(--wp--custom--border-width--focus) solid transparent;
	box-shadow: var(--wp--preset--shadow--focus-ring);
}
input[type="radio"]:focus-visible,
:is(.has-cream-100-background-color, .is-surface-light) input[type="checkbox"]:focus-visible {
	outline: var(--wp--custom--border-width--focus) solid transparent;
	box-shadow: var(--wp--preset--shadow--focus-ring-light);
}

/* ---------- Navigation (Figma: Nav link, Menu drawer) ---------- */

:root .wp-block-navigation .wp-block-navigation-item__content {
	box-sizing: border-box;
	min-height: var(--wp--custom--tap-target--base);
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	align-content: center;
	color: var(--wp--custom--color--accent--gold-light);
	text-decoration: none;
	text-underline-offset: var(--wp--preset--spacing--4);
}
/* Hover = 1px border/gold-subtle underline; Active (aria-current page or true) = 2px accent/gold underline (not colour alone). */
:root .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--custom--color--accent--gold-hover);
	text-decoration: underline var(--wp--custom--border-width--hairline) var(--wp--custom--color--border--gold-subtle);
}
:root .wp-block-navigation .wp-block-navigation-item__content[aria-current] {
	color: var(--wp--custom--color--accent--gold-hover);
	text-decoration: underline var(--wp--custom--border-width--focus) var(--wp--custom--color--accent--gold);
}
:root .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--custom--color--accent--gold-hover);
	background-color: var(--wp--custom--color--bg--nav);
	border-radius: var(--wp--custom--radius--sm);
	outline: var(--wp--custom--border-width--focus) solid transparent;
	box-shadow: var(--wp--preset--shadow--focus-ring);
}
/* Menu drawer: bg/nav panel, Nav/Mobile items with a subtle bottom rule, 48px targets. */
:root .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--custom--color--bg--nav);
	color: var(--wp--custom--color--accent--gold-light);
}
:root .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	min-height: var(--wp--custom--tap-target--lg);
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
	border-bottom: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--border--gold-subtle);
	font-size: var(--wp--preset--font-size--nav-mobile);
	line-height: var(--wp--custom--line-height--nav-mobile);
}
:root .wp-block-navigation__responsive-container-open,
:root .wp-block-navigation__responsive-container-close {
	min-width: var(--wp--custom--tap-target--base);
	min-height: var(--wp--custom--tap-target--base);
	color: var(--wp--custom--color--accent--gold-light);
}

/* ---------- Query pagination (Figma: Pagination item; Previous/Next are Outline buttons) ---------- */

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-grid;
	place-content: center;
	box-sizing: border-box;
	min-width: var(--wp--custom--tap-target--base);
	min-height: var(--wp--custom--tap-target--base);
	border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--border--gold-subtle);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--custom--color--bg--panel);
	color: var(--wp--custom--color--text--on-light);
	text-decoration: none;
}
.wp-block-query-pagination-numbers .page-numbers.current {
	background-color: var(--wp--custom--color--accent--gold);
	border-color: var(--wp--custom--color--accent--gold);
	color: var(--wp--custom--color--text--on-gold);
	font-weight: 700;
	text-decoration: underline;
}
.wp-block-query-pagination-numbers a.page-numbers:hover { border-color: var(--wp--custom--color--accent--gold-hover); }
.wp-block-query-pagination-numbers a.page-numbers:focus-visible {
	outline: var(--wp--custom--border-width--focus) solid transparent;
	box-shadow: var(--wp--preset--shadow--focus-ring);
}
:root :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	box-sizing: border-box;
	display: inline-block;
	align-content: center;
	min-height: var(--wp--custom--tap-target--base);
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
	border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--border--gold-subtle);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--custom--color--accent--gold-light);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--button);
	line-height: var(--wp--custom--line-height--button);
	text-decoration: none;
	text-transform: uppercase;
	text-underline-offset: var(--wp--preset--spacing--4);
}
:is(.has-cream-100-background-color, .is-surface-light) :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	color: var(--wp--custom--color--text--on-light);
}
:root :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover {
	background: var(--wp--custom--color--bg--nav);
	border-color: var(--wp--custom--color--accent--gold-hover);
	color: var(--wp--custom--color--accent--gold-hover);
	text-decoration: underline;
}
:root :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next):focus-visible {
	background: var(--wp--custom--color--bg--nav);
	border-color: var(--wp--custom--color--border--gold);
	color: var(--wp--custom--color--accent--gold-light);
	outline: var(--wp--custom--border-width--focus) solid transparent;
	box-shadow: var(--wp--preset--shadow--focus-ring);
}

/* ---------- Torn edge (Figma: Torn edge, 4 variants) ----------
   Group block styles. The edge is a decorative pseudo-element (never in the accessibility tree), absolutely
   positioned so it can't shift layout, coloured by a token and shaped by an SVG mask. The shape stretches with the
   width but is never drawn narrower than custom.torn-edge.min-width (the 1200px container): on narrower screens it
   keeps its desktop size and is cropped from the centre, so the tears don't get squeezed (decision 55).
   Overhang variants (header-to-nav, nav-to-panel) hang below the group in the group's own colour, overlapping it
   by half their height as in Figma. Top variants (footer-top, page-to-band) sit inside the top of the group in the
   colour of the band above. */
.is-style-torn-header-to-nav { --aa-torn-color: var(--wp--custom--color--bg--header); --aa-torn-height: var(--wp--custom--torn-edge--header-to-nav); --aa-torn-shape: url("../svg/torn-header-to-nav.svg"); }
.is-style-torn-nav-to-panel { --aa-torn-color: var(--wp--custom--color--bg--nav); --aa-torn-height: var(--wp--custom--torn-edge--nav-to-panel); --aa-torn-shape: url("../svg/torn-nav-to-panel.svg"); }
.is-style-torn-footer-top { --aa-torn-color: var(--wp--custom--color--bg--nav); --aa-torn-height: var(--wp--custom--torn-edge--footer-top); --aa-torn-shape: url("../svg/torn-footer-top.svg"); }
.is-style-torn-page-to-band { --aa-torn-color: var(--wp--custom--color--bg--page); --aa-torn-height: var(--wp--custom--torn-edge--page-to-band); --aa-torn-shape: url("../svg/torn-page-to-band.svg"); }

:is(.is-style-torn-header-to-nav, .is-style-torn-nav-to-panel, .is-style-torn-footer-top, .is-style-torn-page-to-band) {
	position: relative;
}
:is(.is-style-torn-header-to-nav, .is-style-torn-nav-to-panel)::after,
:is(.is-style-torn-footer-top, .is-style-torn-page-to-band)::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: var(--aa-torn-height);
	/* Optional texture (set by the band that owns the edge), over the token colour. */
	background: var(--aa-torn-texture, none) center bottom / max(100%, var(--aa-torn-texture-width, 100%)) auto no-repeat var(--aa-torn-color);
	-webkit-mask: var(--aa-torn-shape) center top / max(100%, var(--wp--custom--torn-edge--min-width)) 100% no-repeat;
	mask: var(--aa-torn-shape) center top / max(100%, var(--wp--custom--torn-edge--min-width)) 100% no-repeat;
	pointer-events: none;
}
:is(.is-style-torn-header-to-nav, .is-style-torn-nav-to-panel)::after {
	top: calc(100% - var(--aa-torn-height) / 2);
	z-index: 1;
}
:is(.is-style-torn-footer-top, .is-style-torn-page-to-band)::before {
	top: 0;
}
/* High-contrast mode: the edge is decoration only, so hide it rather than show a solid bar. */
@media (forced-colors: active) {
	:is(.is-style-torn-header-to-nav, .is-style-torn-nav-to-panel)::after,
	:is(.is-style-torn-footer-top, .is-style-torn-page-to-band)::before { display: none; }
}

/* ---------- Breadcrumb (About Us title band and the Section heroes; core Breadcrumbs block) ---------- */

/* Breadcrumb (Figma: Breadcrumb, Surface=Dark): "Home / About Us"; the current page is plain text. */
.aa-breadcrumbs {
	font-size: var(--wp--preset--font-size--footer-link);
	line-height: var(--wp--custom--line-height--footer-link);
	color: var(--wp--custom--color--text--primary);
}

.aa-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aa-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	margin: 0;
}

/* Core draws the separator after each crumb but the last (decorative: empty alt text). */
.aa-breadcrumbs li:not(:last-child)::after {
	margin: 0;
	opacity: 1;
	color: var(--wp--custom--color--text--muted);
}

/* Crumb links: Text link, Surface=Dark (44px target, underline and Focus/Ring on hover/focus). */
.aa-breadcrumbs a {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--wp--custom--tap-target--base);
	padding: var(--wp--preset--spacing--4);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--custom--color--accent--gold-light);
	text-decoration: none;
}

.aa-breadcrumbs a:hover {
	text-decoration: underline;
}

.aa-breadcrumbs a:focus-visible {
	text-decoration: underline;
	outline: var(--wp--custom--border-width--focus) solid transparent;
	box-shadow: var(--wp--preset--shadow--focus-ring);
}

/* Phones (Figma Breadcrumb, Size=Mobile): a back link, "‹ Home". The current page stays in the
   breadcrumb for screen readers but isn't shown. */

/* custom.breakpoint.tablet = 768px */
@media (max-width: 767.98px) {

	.aa-breadcrumbs li:not(:first-child) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.aa-breadcrumbs li:first-child::after {
		content: none;
	}

	.aa-breadcrumbs li:first-child a::before {
		content: "";
		flex: none;
		inline-size: var(--wp--preset--spacing--24);
		block-size: var(--wp--preset--spacing--24);
		margin-inline-end: var(--wp--preset--spacing--4);
		background-color: var(--wp--custom--color--border--gold-subtle);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M14 7l-5 5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M14 7l-5 5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
	}
}

@media (forced-colors: active) {

	.aa-breadcrumbs li:first-child::after {
		content: none;
	}

	.aa-breadcrumbs li:first-child a::before { background-color: LinkText; }
}