/* Global chrome layout — header/footer are template parts on every page, so this
   stylesheet is enqueued sitewide (not conditionally, unlike per-block CSS) via
   functions.php. Figma homepage node 3039:23362 (header + footer children). */

/* Shared trailing-arrow icon (Figma "Right Arrow.svg", 384x384 viewBox), reused verbatim by
   the Button block's arrow style (buttons.css ::after mask) and archive-insights.css's
   pagination pill arrows. Declared once here since header-footer.css is the one stylesheet
   enqueued unconditionally on every page (see functions.php), so this custom property is
   always in scope wherever those conditionally-loaded stylesheets reference it via var(). */
:root {
	--bpd-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 384'%3E%3Cpath d='M347.95,197.32v3.67s-1.41,2.62-1.41,2.62l-74.64,74.57c-3.06,3.06-6.8,3.68-10.07,1.38-2.92-2.06-4.74-7.32-1.61-10.45l62.52-62.59H30.5c-4.36,0-6.97-1.91-8.45-5.67v-3.68c1.49-3.41,4.17-5.72,8.51-5.49l291.95-.03-61.06-61.28c-3.44-3.06-3.66-7.77-.56-10.95,2.84-2.91,7.4-3.07,10.7.23l74.96,74.89,1.4,2.77Z'/%3E%3C/svg%3E");
}

/* WP core's global styles put margin-block-start: var(--wp--style--block-gap) on every
   .wp-site-blocks child except :first-child — main is second (after header), so it
   inherits that gap as unwanted top margin. Zero it out; header owns its own spacing. */
.wp-site-blocks > header + main {
	margin-block-start: 0;
}

/* Short pages (e.g. 404) leave main shorter than the viewport, floating the
   footer above the bottom edge. Stretch main to fill the remaining height so
   the footer stays pinned to the bottom regardless of content length. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* main itself stretches to fill the viewport (rule above), but its child is a plain
   block — the 404 pattern's grey background div sizes to its own content, not to main's
   full height, leaving grey underneath uncovered on tall viewports. Make main a flex
   column and stretch its one child to fill it. Scoped to .error404 (WP's default body
   class on the 404 template) so it doesn't touch other main-based templates, which stack
   multiple full-width sections rather than a single fill-height one. */
.error404 .wp-site-blocks > main {
	display: flex;
	flex-direction: column;
}

.error404 .wp-site-blocks > main > .wp-block-group {
	flex: 1 0 auto;
}

/* Image-only links (logo, social icons) shouldn't inherit theme.json's global
   link color/underline — sitewide reset, not header/footer-specific, but this
   is the one stylesheet already enqueued unconditionally on every page. */
a:has(> img):not(.wp-element-button) {
	color: inherit;
	text-decoration: none;
}
a:has(> img):not(.wp-element-button):hover,
a:has(> img):not(.wp-element-button):focus,
a:has(> img):not(.wp-element-button):active {
	color: inherit;
}

/* theme.json's link :focus style also adds a border + padding (its custom
   focus-ring treatment) — reset that too, but keep a visible focus indicator
   (accessibility requirement) via outline instead, which doesn't shift layout. */
a:has(> img):not(.wp-element-button):focus {
	border: none;
	padding: 0;
	outline: var(--wp--custom--border--md) solid var(--wp--preset--color--green-700);
	outline-offset: 2px;
}

/* WP theme.json has no top-level "strong" element, so this can't be set via tokens —
   pin it explicitly to weight 700 (Lato Bold, Figma "Body/Font Weight Bold") rather
   than relying on the browser's implicit `bolder` keyword. Sitewide, so it lives here. */
strong,
b {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
}

/* --- Header --- (Figma design system node 32186:0; link/search states node 33760:7953)

   Figma's "LINKS" row is one evenly-gapped run of nav links + Contact CTA + search at
   Space/1000 (40px). Those are three separate flex children here (nav, then the actions
   group), so the same 40px gap is set on the header row, the nav container and the
   actions group to read as one run. */

/* Padding is set here rather than on the block so the mobile row can change it — see the
   header pattern's header comment. */
.site-header {
	gap: var(--wp--preset--spacing--1000);
	padding: var(--wp--preset--spacing--900) var(--wp--preset--spacing--gutter);
}

.site-header__logo img {
	width: 88px;
	height: 36px;
}

/* The expanding search field is the only elastic child. The link run and CTA can't
   shrink without wrapping or overlapping the logo, so they're fixed and the field gives
   up whatever width is left over. */
.site-header__nav,
.site-header__cta {
	flex: 0 0 auto;
}

/* Figma's LINKS row (32186:0) sits flush against the CTA/search on the right, with the
   logo pinned left and all the slack absorbed between them — not centred in that slack,
   which is what the parent group's flex justify-content:left + gap alone would produce.
   The auto margin claims that slack for the gap before the nav; the fixed 40px .site-header
   gap above still sets the rhythm between nav, CTA and search.
   Selector is qualified with .site-header (not just .site-header__nav) to out-specify
   core's global-styles reset, which now emits `.is-layout-flex > :is(*, div) { margin: 0 }`
   (specificity 0,1,1) — a class + the highest-specificity :is() argument. A single-class
   selector here loses that fight regardless of source order and the margin collapses to 0,
   pinning the nav flush against the logo instead of the CTA/search. */
.site-header .site-header__nav {
	margin-inline-start: auto;
}

.site-header__actions {
	flex: 0 1 auto;
	min-width: 0;
	gap: var(--wp--preset--spacing--1000);
}

.site-header__cta .wp-block-button__link {
	white-space: nowrap;
}

.site-header__search {
	flex: 0 1 auto;
	min-width: 0;
}

.site-header__nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--1000);
}

/* L1 links. Figma sets the labels in caps as a style, not as content — keeping the menu
   labels in sentence case means the client types them normally in the nav editor. The
   transparent bottom border reserves the active/open underline's space so nothing shifts. */
.site-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--wp--preset--color--text-default);
	padding: 0 0 var(--wp--preset--spacing--50);
	border-bottom: var(--wp--custom--border--sm) solid transparent;
}

.site-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--text-hover);
}

/* Figma "Active" L1 = default colour + green underline. */
.site-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"],
.site-header__nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--text-active);
}

/* Dropdown panel — Figma strips core's border, shadow and min-width and left-aligns it
   under its parent link. Selector is deliberately as specific as core's own
   .items-justified-right override (5 classes) — this nav is right-justified, and a
   lower-specificity left:0 here loses the cascade to core's right:0 for that modifier. */
.site-header__nav.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
	left: calc(-1 * var(--wp--preset--spacing--400));
	right: auto;
	top: 100%;
	min-width: 0;
	border: none;
	box-shadow: none;
	background-color: var(--wp--preset--color--surface-canvas);
	color: var(--wp--preset--color--text-default);
	padding: var(--wp--preset--spacing--200) var(--wp--preset--spacing--400) var(--wp--preset--spacing--600);
	gap: var(--wp--preset--spacing--300);
}

.site-header__nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0;
	text-decoration: none;
	white-space: nowrap;
	color: var(--wp--preset--color--text-default);
}

.site-header__nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--text-hover);
}

/* Default-open toggle (header.php $bpd_submenu_default_open) — desktop only, core's own
   hover/:focus-within opacity+visibility rules still apply on top of this. */
.site-header__nav.is-submenu-default-open .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	opacity: 1;
	visibility: visible;
	overflow: visible;
	width: auto;
	height: auto;
	min-width: 200px;
}

/* Search — core's "button only" search block already is the Figma interaction: a 24px icon
   that expands to an input on click. Figma's field is underline-only, 288px, no button chrome. */
/* The form is allowed to shrink so the expanded field yields width, but the icon button
   itself must not — otherwise search vanishes from the header at mid widths. */
.site-header__search .wp-block-search__button {
	flex: 0 0 auto;
	padding: 0;
	border: none;
	background: none;
	color: var(--wp--preset--color--text-default);
}

.site-header__search .wp-block-search__button svg {
	width: var(--wp--preset--spacing--600);
	height: var(--wp--preset--spacing--600);
	fill: currentColor;
}

.site-header__search .wp-block-search__inside-wrapper {
	border: none;
	padding: 0;
	gap: var(--wp--preset--spacing--200);
}

.site-header__search .wp-block-search__input {
	width: 288px;
	max-width: 100%;
	padding: var(--wp--preset--spacing--100);
	border: none;
	/* Figma's rest/disabled underline is text-disabled and darkens to text-default on
	   focus — that colour shift is the design's own focus affordance, so the browser's
	   default focus ring is left in place rather than suppressed. */
	border-bottom: var(--wp--custom--border--sm) solid var(--wp--preset--color--text-disabled);
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--text-default);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body-md);
	line-height: var(--wp--custom--line-height--body-md);
}

.site-header__search .wp-block-search__input:focus {
	border-bottom-color: var(--wp--preset--color--text-default);
}

.site-header__search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--text-hover);
}

/* Desktop: no chevron in Figma. The toggle button still renders because it is the mobile
   accordion control; hover and :focus-within open the dropdown here, so hiding it costs
   nothing for keyboard users. */
/* Header breakpoint: 1200px, repeated in the three media queries below (CSS media queries
   can't read a custom property). Core's Navigation block hands off to the overlay at its
   own hard-coded 600px, which is far too narrow here — Figma's desktop row (5 caps links +
   CTA pill + search, all no-wrap, at a 40px rhythm) needs ~1060px including gutters, so
   between 600px and 1200px it overflowed the viewport and pushed the search icon
   off-canvas. The two rules below flip core's 600px handoff back to the overlay for that
   range; Figma specs no tablet layout, so 1200 is the first width the desktop row fits at
   rather than a design token. Change all four occurrences together. */
@media (min-width: 600px) and (max-width: 1199px) {
	.site-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.site-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

@media (min-width: 1200px) {
	.site-header__nav .wp-block-navigation-submenu__toggle {
		display: none;
	}

	/* Contact Us is the pill CTA here, not a menu link. */
	.site-header__nav .site-header__contact-link {
		display: none;
	}

	/* Green underline on hover/focus for every L1 item, not just the dropdown parent
	   (Figma's Open-state frame shows it on the dropdown; applied to all here per request).
	   Desktop only — the mobile accordion has no underline. */
	.site-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
	.site-header__nav .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation-item__content {
		border-bottom-color: var(--wp--preset--color--text-active);
	}
}

/* Dropdown fade — core only transitions opacity (.1s), while visibility flips instantly,
   so a close was an invisible snap. Slow the fade to the motion token and delay visibility
   so it stays "visible" for the fade-out; the open-state rules zero that delay so opening
   isn't held back. Selectors match core's own hover/focus-within/aria-expanded states at
   matching or higher specificity to actually win the cascade (see the base panel rule above
   for why that's necessary on this right-justified nav). Desktop only — the mobile accordion
   expands via height/overflow, not opacity. */
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
	.site-header__nav.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
		transition: opacity var(--wp--custom--motion--duration-sm) ease, visibility 0s linear var(--wp--custom--motion--duration-sm);
	}

	.site-header__nav.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
	.site-header__nav.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
	.site-header__nav.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		transition-delay: 0s;
	}
}

/* Mobile overlay — Figma node 33793:1967. Core's overlay CSS force-expands every submenu
   and hides its icon; these rules put the accordion back. Core's selectors run 5 classes
   deep, so each override here is scoped with .site-header__nav to out-specify them
   without !important. Open/close state is still core's own toggle button + aria-expanded. */
@media (max-width: 1199px) {
	/* Figma mobile bar (node 4919:29201): 16px block / 16px inline inset, 12px between the two
	   icons — not the desktop row's 36px inset and 40px rhythm. The 32px-tall search button plus
	   the 16px insets give the 64px bar height. */
	.site-header {
		padding-block: var(--wp--preset--spacing--400);
		gap: var(--wp--preset--spacing--300);
		position: relative;
	}

	.site-header__logo img {
		/* Block: inline images sit on the text baseline, and the anchor's line box adds a
		   descender gap below — the logo rode ~3px above the bar's vertical centre. */
		display: block;
		width: 74px;
		height: 30px;
	}

	/* The search button is already flex, but its svg rides the cross-axis start, ~4px above
	   centre. Centre it and pin the 32px the bar-height math assumes. Mobile only. */
	.site-header__search .wp-block-search__button {
		align-items: center;
		height: 32px;
	}

	/* The collapsed field's input stays in layout (visibility-hidden), so the wrapper — and
	   with it the bar — inherited the input's line-height-rounded 32.67px instead of the 32px
	   the 16/32/16 bar math assumes. Pin the control to 32px; bar lands on exactly 64. */
	.site-header__search .wp-block-search__inside-wrapper,
	.site-header__search .wp-block-search__input {
		height: 32px;
	}

	/* Figma's mobile bar is logo + hamburger only. */
	.site-header .site-header__cta {
		display: none;
	}

	/* Collapsed, the row is search + ☰ only, both pinned right (☰ last, via order below).
	   Scoped with .wp-block-group so it beats the block layout's own justify-content rule. */
	.wp-block-group.site-header {
		justify-content: flex-end;
	}

	/* Figma centres the logo on the viewport, not in the slack left over by the icon cluster,
	   so it comes out of the flex row and is centred against the header itself. Two classes
	   deep: WP's global `.is-layout-flex > * { margin: 0 }` ties on specificity and wins on
	   source order, so a single-class rule here would lose. */
	.site-header .site-header__logo {
		position: absolute;
		left: 50%;
		top: 50%;
		translate: -50% -50%;
	}

	/* Expanded, the 288px search field runs straight under that out-of-flow logo. Core drops
	   .wp-block-search__searchfield-hidden from the form while the field is open, so :has()
	   reads the open state off the DOM — no extra class, no JS. visibility (not display) keeps
	   the logo's box, which nothing here depends on but costs nothing and avoids a reflow. */
	.site-header:has(.site-header__search:not(.wp-block-search__searchfield-hidden)) .site-header__logo {
		visibility: hidden;
	}

	/* Drop the desktop rule's margin-inline-start:auto — here it would claim all the slack and
	   push the search icon back to the left edge, away from the ☰ it pairs with. Same two-class
	   scoping as that rule, for the same reason. */
	.site-header .site-header__nav {
		order: 1;
		margin-inline-start: 0;
	}

	/* The nav block's "justify right" layout sets this custom property, which core's
	   overlay CSS feeds straight into align-items — Figma's overlay is left-aligned
	   full-bleed rows, so re-point the property rather than fight each rule using it.
	   It has to be re-declared on the <ul> as well: core copies the nav's justification
	   classes onto it, so the ul re-asserts flex-end for its own subtree. */
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		--navigation-layout-justification-setting: flex-start;
		width: 100%;
		text-align: left;
	}

	/* Overlay inset: core derives its padding from the root padding vars, which are 0 here,
	   so Figma's 16px / 28px insets (node 33793:1967) are set directly. */
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		gap: var(--wp--preset--spacing--400);
		padding: var(--wp--preset--spacing--700) var(--wp--preset--spacing--400);
	}

	/* Core's close button sits flush at the viewport edge (right:0/top:0) — match the
	   overlay's own 16px inset above. */
	.site-header__nav .wp-block-navigation__responsive-container-close {
		right: var(--wp--preset--spacing--400);
		top: var(--wp--preset--spacing--400);
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		width: 100%;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		padding: var(--wp--preset--spacing--200) 0;
		text-transform: uppercase;
	}

	/* Accordion row: label left, +/- right. */
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation-item__content {
		flex: 1 1 auto;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
		display: flex;
		position: relative;
		width: var(--wp--preset--spacing--600);
		height: var(--wp--preset--spacing--600);
		padding: 0;
		border: none;
		background: none;
		color: var(--wp--preset--color--text-default);
	}

	/* Figma's Plus/Minus glyph is a bare 12px cross on a 1px stroke — two pseudo-element
	   bars rather than an icon asset, so collapsed/expanded is one rule off aria-expanded. */
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
		display: none;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon::before,
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: var(--wp--preset--spacing--300);
		height: var(--wp--custom--border--sm);
		translate: -50% -50%;
		background: currentColor;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon::after {
		rotate: 90deg;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon[aria-expanded="true"]::after {
		display: none;
	}

	/* Collapsed by default; core's own [aria-expanded=true] ~ container rule can't be reused
	   because it loses to core's overlay rule, so the open case is re-stated here. */
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
		display: none;
		width: 100%;
		padding: 0 0 var(--wp--preset--spacing--200);
		gap: var(--wp--preset--spacing--300);
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		display: flex;
	}

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0;
		text-transform: none;
	}
}

/* --- Footer --- */

.site-footer__row {
	gap: var(--wp--preset--spacing--1200);
}

.site-footer__brand {
	max-width: 457px;
}

.site-footer__logo {
	margin: 0 0 var(--wp--preset--spacing--600);
}

.site-footer__logo img {
	width: 141px;
	height: 58px;
}

/* HubSpot form embed (leadin plugin [hubspot] shortcode); the plugin ships
   its own field/button styling, so we only own the outer spacing here. */
.site-footer__newsletter {
	margin-top: var(--wp--preset--spacing--600);
}

/* Desktop (Figma node 4788:27587) is a single stacked column — the two
   wp:navigation blocks in the markup (3 links each) read as one continuous
   list once stacked, so no markup restructuring is needed. */
.site-footer__nav-columns {
	/* Block's flex layout support defaults cross-axis alignment to center;
	   with flex-direction:column that horizontally centers each nav by its
	   own width, misaligning the two differently-sized link lists. */
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--600);
}

.site-footer__nav-col .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--600);
}

.site-footer__nav-col a.wp-block-navigation-item__content {
	text-decoration: none;
	color: var(--wp--preset--color--neutral-100);
}

.site-footer__nav-col a.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--blue-300);
}

/* Footer text links — uppercase via utility class */
.is-uppercase {
	text-transform: uppercase;
}

.site-footer--uppercase a {
	text-transform: uppercase;
}

.site-footer__follow {
	max-width: 314px;
}

.site-footer__gptw-badge {
	margin: 0 0 var(--wp--preset--spacing--600);
}

.site-footer__mjh-logo {
	margin: 0 0 var(--wp--preset--spacing--200);
}

.site-footer__mjh-brand {
	margin-block: 0;
}

.site-footer__mjh-logo img {
	width: 121px;
	height: 27px;
}

.site-footer__social {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--600);
	list-style: none;
	margin: var(--wp--preset--spacing--300) 0 0;
	padding: 0;
	padding-bottom: var(--wp--preset--spacing--600);
}

.site-footer__social a {
	width: var(--wp--preset--spacing--800);
	height: var(--wp--preset--spacing--800);
}

/* Give the icon a global expected size and adjust per icon accordingly */
.site-footer__social img {
	width: 16px;
	height: 16px;
}

.site-footer__social img[src$="linkedin.svg"] {
	width:16px;
}

.site-footer__social img[src$="facebook.svg"] {
	width:9px;
}

.site-footer__social img[src$="youtube.svg"] {
	width:17px;
	height:12px;
}

/* TikTok source asset (Figma node path42) is authored rotated 180deg  */
.site-footer__social img[src$="tiktok.svg"] {
	transform: rotate(180deg) scaleX(-1);
}

.site-footer__divider {
	margin-top: var(--wp--preset--spacing--1000);
	margin-bottom: var(--wp--preset--spacing--600);
}

.site-footer__legal {
	gap: var(--wp--preset--spacing--100);
	align-items: center;
}

.site-footer__legal p {
	margin: 0;
}

/* The separator belongs to the END of the item before it, not the start of the item after it. As a
   ::before it wrapped down with its own item, so on a narrow footer the third entry began line two
   with an orphaned "|" (issue #287). As an ::after it stays on line one with the item it follows. */
.site-footer__legal > *:not(:last-child)::after {
	content: "|";
	margin-inline-start: var(--wp--preset--spacing--100);
}

.site-footer__legal a {
	color: var(--wp--preset--color--neutral-100);
	text-decoration: none;
	/* Legal links read as sentence case, not the nav-column uppercase from .site-footer--uppercase. */
	text-transform: none;
}

.site-footer__privacy-choices {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--100);
	margin: 0;
}

.site-footer__privacy-choices a {
	color: var(--wp--preset--color--neutral-100);
}

/* Figma's "Privacy" component wraps the checkmark/X glyph in a solid white
   pill (bg-white, rounded-full) — the exported asset is only the glyph, so
   without this the icon has no backing and reads as a bare mark on navy. */
.site-footer__privacy-badge {
	display: inline-flex;
	background: var(--wp--preset--color--neutral-100);
	border-radius: var(--wp--custom--radius--full);
	margin-left: var(--wp--preset--spacing--100);
}

/* Figma mobile footer node 4788:28775 — stacked single column, full-width form. */
@media (max-width: 781px) {
	.site-footer__row {
		flex-direction: column;
		gap: var(--wp--preset--spacing--1000);
	}

	.site-footer__brand,
	.site-footer__follow {
		max-width: none;
		width: 100%;
	}

	.site-footer__nav-columns {
		flex-direction: row;
		gap: var(--wp--preset--spacing--1600);
	}

	.site-footer__legal > .site-footer__privacy-choices {
		flex-basis: 100%;
	}
}