/* Global box-sizing reset — root-cause fix for a recurring sitewide overflow bug.
   Many blocks use a `width:100vw` (or `width:100%`) breakout on an element that
   also carries its own padding and/or border. Browsers default to content-box,
   where padding/border are added ON TOP of the declared width — so those elements
   render wider than intended and get silently clipped by the `overflow-x:clip`
   safety net below (text, card edges and borders cut off at the viewport edge,
   with no scrollbar to reveal it). border-box makes the declared width the true
   total width, padding and border included, which is what every one of these
   components was actually designed around. This was previously patched block-by-
   block (hero, funding, eligibility, case-studies, reports, apply-header, ...);
   this reset covers the pattern everywhere, including places it hadn't been
   patched yet (e.g. about-header, trustees, faq, purpose-mission, cta-band card).
   Safe sitewide: it only changes behaviour for elements that combine an explicit
   width/height with padding or border — content-box vs border-box are identical
   for every other element. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Belt-and-braces: prevents a horizontal scrollbar if anything still overflows
   (e.g. a future block reintroducing this pattern). `clip` is used instead of
   `hidden` because it does not create a new scroll container, so position:sticky
   still works. This is a safety net, not the fix — the box-sizing reset above is
   what actually stops content overflowing in the first place; without it, this
   rule would just hide the overflow rather than solve it. */
body {
	overflow-x: clip;
}

/* Defensive constraint: images/SVGs should never force horizontal overflow just
   because a block forgot to set an explicit width. Blocks that already size
   their images deliberately (fixed px, or object-fit inside a positioned
   wrapper) are unaffected, since max-width:100% only ever constrains, never
   grows, an image beyond its own natural or already-set size. */
img,
svg {
	max-width: 100%;
	height: auto;
}

/* Case Study Header renders its own <h1>; hide the template's generic
   Post Title block so the title isn't duplicated on case study posts. */
main:has(.mt-cs-header) .wp-block-post-title {
	display: none;
}

/* CASE-R-001: single.html's generic wp:post-featured-image renders a large
   photo at the top of every post single, above post-content (and above
   case-study-header's own intro). Hidden on case study posts specifically
   (matching the post-title scoping above) rather than removed from the
   template outright, so the block stays available if a non-case-study post
   type ever uses this same generic single.html. The `case-studies` listing
   block's own card photos are unaffected - they pull the featured image
   directly via get_the_post_thumbnail() in their own render.php, entirely
   separate from this template-level block. */
main:has(.mt-cs-header) .wp-block-post-featured-image {
	display: none;
}

/* Mirrors theme.json presets so the tokens are available in any context
   (e.g. the Site Editor iframe) where WordPress may not inject preset variables. */
:root {
	/* spacingSizes */
	--wp--preset--spacing--3xs: 4px;
	--wp--preset--spacing--2xs: 8px;
	--wp--preset--spacing--xs: 16px;
	--wp--preset--spacing--small: 24px;
	--wp--preset--spacing--medium: 32px;
	--wp--preset--spacing--large: 48px;
	--wp--preset--spacing--xl: 64px;
	--wp--preset--spacing--2xl: 80px;
	--wp--preset--spacing--3xl: 96px;
	--wp--preset--spacing--4xl: 120px;
	--wp--preset--spacing--5xl: 160px;

	/* colors (subset — full palette injected by WP, these ensure availability in editor iframes) */
	--wp--preset--color--cyan-400: #3594F3;
	--wp--preset--color--cyan-200: #98C5F2;
	--wp--preset--color--cyan-50:  #D6E8FA;

	/* fontSizes */
	--wp--preset--font-size--disclaimer: 0.75rem;
	--wp--preset--font-size--label-small: 0.8125rem;
	--wp--preset--font-size--caps: 0.9375rem;
	--wp--preset--font-size--caption-script: 1rem;
	--wp--preset--font-size--label: 1.1875rem;
	--wp--preset--font-size--body-small: 1.125rem;
	--wp--preset--font-size--body: 1.3125rem;
	--wp--preset--font-size--h4: 1.625rem;
	--wp--preset--font-size--body-large: 2rem;
	--wp--preset--font-size--h2: clamp(1.75rem, 1.4rem + 1.75vw, 2.625rem);
	--wp--preset--font-size--h1: clamp(2rem, 1.5rem + 2.5vw, 3.125rem);
	--wp--preset--font-size--stat: clamp(3.5rem, 2rem + 8vw, 8.75rem);

	/* Readable line-length measures (global QA tidy pass). Applied only
	   where a text element has no width constraint of its own — most
	   block copy already sits inside Figma-matched fixed/percentage
	   widths and is left untouched. */
	--measure-body: 65ch;
	--measure-lede: 75ch;
}

/*
 * Typography tidy pass: progressive text wrapping + a readable-measure
 * safety net for otherwise-unconstrained body copy.
 *
 * text-wrap: balance/pretty are progressive enhancement - unsupported
 * browsers ignore them with zero layout impact, so this is safe to apply
 * broadly rather than block-by-block.
 */
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

/*
 * Generic core/button interaction states.
 *
 * theme.json's button element only defines colour/spacing/radius, not
 * hover/focus/active - and no hover/focus state existed anywhere for a
 * plain core/button (primary or the "Outline" style variation) prior to
 * this pass. Block-specific CTAs with their own hover treatment already
 * in place are untouched; this only fills the gap for generic buttons.
 */
.wp-block-button__link {
	transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button__link:hover {
	opacity: 0.85;
}

.wp-block-button__link:active {
	opacity: 0.7;
}

.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--cyan-500);
	outline-offset: 2px;
}

/*
 * Header and footer template-part styling.
 *
 * Covers what `parts/header.html` and `parts/footer.html` cannot express
 * through core block attributes alone (shadow, pill padding/radius on
 * individual nav items, footer grid breakpoints). Everything else
 * (background, base padding, base radius, colors) is already set via
 * block attributes in the template parts themselves.
 *
 * All values reference theme.json custom properties; literal px/rem
 * values below are used only where no named preset matches the Figma
 * source closely enough (callout left as a comment at each occurrence).
 */

/* ---------- Header (parts/header.html) ---------- */

/* Figma's "Top Menu" is a content-sized pill (auto width, centred on the
   page), not a full-width bar - width:fit-content + margin-inline:auto
   reproduces that, rather than stretching the cream pill edge-to-edge. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: fit-content;
	max-width: calc(100% - (var(--wp--preset--spacing--xs) * 2));
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--xs);
	min-width: 0;
	gap: clamp(1.5rem, 4vw, 5.1875rem); /* Figma uses a fixed 83px gap between logo and nav cluster; no matching token */
	box-shadow: 0 8px 16px rgba(1, 12, 68, 0.3);
	box-shadow: 0 8px 16px color-mix(in srgb, var(--wp--preset--color--navy-500) 30%, transparent);
}

.site-logo-image {
	flex-shrink: 0;
	margin: 0;
	line-height: 0;
}

.site-logo-image img {
	display: block;
	width: 137px;
	height: auto;
	aspect-ratio: 137 / 55; /* menu-logo-2x.png is a 274x110 @2x raster; this keeps it from stretching if width/height attributes are ever dropped */
}

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

/* Pill padding/radius shared by every nav item, including Apply -
   core/navigation-link attributes can set color, not shape. Figma text
   style "Body small Caps": Loos Normal Medium (500), 15px, 100% line
   height, 6% letter-spacing (0.9px @ 15px), uppercase. */
.site-header .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	line-height: 1;
	padding: var(--wp--preset--spacing--2xs) var(--wp--preset--spacing--small);
	border-radius: var(--wp--preset--border-radius--card);
	color: var(--wp--preset--color--navy-500);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em; /* 6% in Figma; 0.06em scales with the element's own font-size */
}

.site-header .wp-block-navigation-item__content span {
	padding: var(--wp--preset--spacing--2xs);
}

.site-header .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--cyan-50);
}

/* Current-page state. Not shown in Figma (single-page export) - label
   picks up cyan-500 instead of a background tint. Logged in the
   snagging list for design confirmation. */
.site-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	color: var(--wp--preset--color--cyan-500);
}

/* Replaces the browser default focus rectangle (which otherwise looks
   like an unintended "selected" state on whichever item was last
   tabbed/clicked) with an intentional, on-brand ring. Never remove focus
   styling outright. */
.site-header .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--cyan-500);
	outline-offset: 2px;
}

/* Apply - a standalone core/button (not a nav item) so it never collapses
   into the Navigation block's mobile overlay. theme.json's global button
   style supplies navy-500/cream-500/card-radius/caps-size, but its
   fontFamily default (loos-wide) is wrong here: in Figma, Apply uses the
   same "Body small Caps" style as the other nav items (Loos Normal
   Medium), not Loos Wide - overridden below, scoped to the header so
   other buttons sitewide keep theme.json's default. */
.site-header-cta .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--loos-normal);
	font-weight: 500;
	line-height: 1;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--medium);
	border-radius: var(--wp--preset--border-radius--card);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.site-header-cta .wp-block-button__link:hover {
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--medium);
}

.site-header-cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--cyan-500);
	outline-offset: 2px;
}

.site-header-end {
	flex-wrap: nowrap;
	min-width: 0;
}

.site-header-end .wp-block-navigation,
.site-header-cta {
	min-width: 0;
}

/* Tighten nav item padding and gap before the links start to overflow. */
@media (max-width: 1024px) {
	.site-header .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--xs);
	}

	.site-header .wp-block-navigation-item__content {
		padding: var(--wp--preset--spacing--2xs) var(--wp--preset--spacing--xs);
	}
}

/* Squeeze further before switching to hamburger. Widened from 880px: the
   items were still wrapping onto two lines around 883px, just above where
   this condensed treatment used to kick in. */
@media (max-width: 920px) {
	.site-header .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--3xs);
	}

	.site-header .wp-block-navigation-item__content {
		padding: var(--wp--preset--spacing--2xs) var(--wp--preset--spacing--3xs);
	}
}

/* Force the Navigation block into hamburger mode earlier than WP's own
   default (~480px). !important overrides the block's inline/generated CSS. */
@media (max-width: 768px) {
	.site-header {
		width: 90vw;
	}

	.site-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.site-header-end {
		gap: var(--wp--preset--spacing--2xs) !important;
	}

	/* Hamburger moves to sit right of Apply: the whole nav block (the
	   toggle button's parent, since the desktop links are hidden above)
	   swaps flex order with the Apply buttons group. */
	.site-header-end .wp-block-navigation {
		order: 2;
	}

	.site-header-cta {
		order: 1;
	}

	/* NAV-R-001: the generic .wp-block-button__link:hover opacity-fade
	   (added for desktop pointer users) has no real "hover" equivalent on
	   touch devices - some mobile browsers apply it as a lingering
	   post-tap state instead, reading as an unwanted flicker. Neutralised
	   at the same breakpoint the menu itself switches to mobile/hamburger
	   mode. Active/focus-visible states are untouched. */
	.site-header-cta .wp-block-button__link:hover {
		opacity: 1;
	}
}

/* Extra small screens: shrink logo. Apply keeps its base padding. */
@media (max-width: 480px) {
	.site-header {
		border-radius: var(--wp--preset--border-radius--badge) !important;
		max-width: calc(100% - (var(--wp--preset--spacing--2xs) * 2));
		gap: var(--wp--preset--spacing--xs);
	}

	.site-logo-image img {
		width: 96px;
		height: auto;
	}
}

/* Below this, logo + Apply + hamburger no longer fit at Apply's base
   padding - tighten it just enough to stop the header wrapping/breaking. */
@media (max-width: 385px) {
	.site-header-cta .wp-block-button__link,
	.site-header-cta .wp-block-button__link:hover {
		padding: var(--wp--preset--spacing--2xs) var(--wp--preset--spacing--xs);
	}
}

/* Hamburger toggle button: cyan-50 pill with a custom 3-line icon,
   replacing core's default black menu glyph. */
.site-header .wp-block-navigation__responsive-container-open {
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--cyan-50);
	border-radius: var(--wp--preset--border-radius--badge);
}

.site-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.site-header .wp-block-navigation__responsive-container-open::before {
	content: "";
	width: 20px;
	height: 15px;
	background-image: url(../images/icons/hamburger.svg);
	background-repeat: no-repeat;
	background-position: center;
}

/* Mobile overlay menu. */
/* NAV-R-002: WP core already positions this button with position:absolute;
   top:0; right:0 - the previous padding-top/padding-left hack tried to
   inset the icon from that corner, but padding-left doesn't offset
   anything from the RIGHT edge the button is actually anchored to, so the
   X wasn't landing at a predictable distance from either edge. Setting
   top/right directly gives it an exact, symmetric 24px inset instead. */
.site-header .wp-block-navigation__responsive-container-close {
	top: 24px !important;
	right: 24px !important;
}

/* NAV-R-005: this "Apply" link lives in the same shared wp_navigation menu
   as Home/About/Funding/Impact, so without this it would also render as a
   5th pill in the desktop inline row, duplicating the separate header
   Apply button. Hidden by default, shown only inside the open mobile
   overlay (see .nav-apply-link below). */
.site-header .nav-apply-link {
	display: none;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	align-items: flex-start !important;
	justify-content: flex-start !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open
	.nav-apply-link {
	display: flex !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	align-items: flex-start !important;
	/* NAV-R-003: absorbs the 16px trimmed from the item's own padding-left
	   below, so the link text still lands at the same 32px (medium) offset
	   from the screen edge it always has - only the hover/selected
	   highlight itself becomes symmetric, not the text's position. */
	padding-left: var(--wp--preset--spacing--xs) !important;
	/* NAV-R-004: +24px on top of the base 32px (medium) item gap. */
	gap: calc(var(--wp--preset--spacing--medium) + 24px) !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--h2) !important;
	justify-content: flex-start !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	/* NAV-R-003: was medium (32px) left / small (24px, unset - inherited
	   from the base pill rule) right - an uneven hover/selected highlight.
	   Both sides now match; the container above adds back the 16px trimmed
	   from the left so the text itself doesn't shift. */
	padding-left: var(--wp--preset--spacing--xs) !important;
	padding-right: var(--wp--preset--spacing--xs) !important;
}

/* ---------- Footer (parts/footer.html) ---------- */

/* Grid, not the Columns block's own flex-basis attribute: a width set via
   the block's "width" attribute renders as an inline style, which beats
   any plain (non-!important) media-query override regardless of
   viewport - that was the cause of the broken mobile layout. Grid items
   also default to a sane min-width, unlike flex items (still set
   explicitly below per the brief). */
.site-footer .wp-block-columns {
	display: grid;
	grid-template-columns: minmax(280px, 448px) repeat(4, minmax(140px, 1fr));
	gap: var(--wp--preset--spacing--small);
	max-width: 1376px;
	margin-inline: auto;
	width: 100%;
}

.site-footer .wp-block-column {
	min-width: 0;
	flex-basis: auto; /* neutralise core Columns' own flex sizing now that the parent is a grid */
}

.site-footer .footer-address-col,
.site-footer .footer-link-col:not(.footer-privacy-col) {
	margin-top: 0;
}

.footer-email-row {
	flex-wrap: wrap;
	min-width: 0;
	margin-bottom: 32px;
}

.footer-email-icon {
	flex-shrink: 0;
	margin: 0;
	line-height: 0;
}

.footer-email-icon img {
	display: block;
	aspect-ratio: 1 / 1; /* arrow-external.svg sets width/height="100%" + preserveAspectRatio="none", so the browser can't infer this from the file alone */
}

/* Figma: Loos Normal Medium (500), 19px (label token), 6% letter-spacing
   (1.14px @ 19px), uppercase, underline - matches the header's "Body
   small Caps" weight/tracking pattern at a different size. */
.site-footer .footer-email-cta {
	min-width: 0;
}

.site-footer .footer-email-cta a {
	font-weight: 500;
	color: var(--wp--preset--color--lilac);
	text-decoration: underline;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	overflow-wrap: break-word;
}

/* Figma "Body small": Be Vietnam Pro Regular (400), 18px, 30px line
   height, 0 letter-spacing. font-family set explicitly here (not just on
   the parent wp:navigation block's own style attribute) because it
   wasn't reliably inheriting down to the rendered <a> - same class of
   issue as color/font-weight on nav-link anchors elsewhere in this file. */
.site-footer .wp-block-navigation .wp-block-navigation-item__content {
	padding: 0;
	font-family: var(--wp--preset--font-family--be-vietnam-pro);
	font-weight: 400;
	line-height: 30px;
	color: var(--wp--preset--color--cream-500);
	text-decoration: none;
	white-space: normal;
	overflow-wrap: break-word;
}

.site-footer .wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

/* Current-page state, footer nav - same judgement call as the header. */
.site-footer .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	text-decoration: underline;
}

.site-footer .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--lilac);
	outline-offset: 2px;
}

.site-footer .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--small); /* bumped from xs; Figma's 20px sits between the xs/small tokens */
	min-width: 0;
}

.footer-logo-mark {
	flex-shrink: 0;
	margin: 0;
	line-height: 0;
}

.footer-logo-mark img {
	display: block;
	aspect-ratio: 1 / 1; /* footer-logo-2x.png is a 124x124 @2x raster */
}

.site-footer .footer-credit a {
	color: var(--wp--preset--color--cream-500);
	text-decoration: underline;
}

/* Same Figma "Body small" spec as the nav links above, applied to the
   legal/charity text and the credit line. */
.site-footer .footer-legal-left p,
.site-footer .footer-credit {
	font-weight: 400;
	line-height: 30px;
	min-width: 0;
	overflow-wrap: break-word;
}


/* Legal row: separated from the link columns with its own top border +
   padding rather than relying on blockGap alone, for clearer rhythm. */
.site-footer .footer-legal-row {
	max-width: 1376px;
	margin-inline: auto;
	width: 100%;
	min-width: 0;
	padding-top: var(--wp--preset--spacing--medium);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--cream-500) 15%, transparent);
}

.site-footer .footer-legal-left {
	min-width: 0;
	gap: 1.5em;
}

.footer-legal-row {
	margin-top: var(--wp--preset--spacing--3xl);
}

.footer-privacy-col {
	padding-top: 18px;
}

.wp-container-core-columns-is-layout-0c3151d3 {
	margin-bottom: var(--wp--preset--spacing--large);
}

/* Below 1440px the four link columns leave their single-row-of-five
   layout and form an explicit 2x2 grid to the right of the address
   column (which spans both rows). Order isn't source order - it's set
   per-column via grid-column/grid-row: Funding & Applying top-left,
   About us top-right, Insight bottom-left, Privacy/Cookie/Terms
   bottom-right. Superseded below 768px, where the address column drops
   to its own full-width row instead (see that breakpoint's resets). */
@media (max-width: 1440px) {
	.site-footer .wp-block-columns {
		grid-template-columns: minmax(280px, 448px) repeat(2, minmax(140px, 1fr));
		grid-template-rows: auto auto;
	}

	.site-footer .footer-address-col {
		grid-row: 1 / 3;
	}

	.site-footer .footer-col-funding {
		grid-column: 2;
		grid-row: 1;
	}

	.site-footer .footer-col-about {
		grid-column: 3;
		grid-row: 1;
	}

	.site-footer .footer-col-insight {
		grid-column: 2;
		grid-row: 2;
	}

	.site-footer .footer-privacy-col {
		grid-column: 3;
		grid-row: 2;
	}
}

@media (max-width: 1024px) {
	.site-footer {
		/* The footer's horizontal padding (4xl, 120px) is set via an inline
		   style attribute on the block, which beats a plain override at
		   any viewport - needs !important here, same reasoning as the
		   column-width fix above. */
		padding-left: var(--wp--preset--spacing--medium) !important;
		padding-right: var(--wp--preset--spacing--medium) !important;
	}
}

/* Tablet: address block becomes its own full-width row, the four link
   columns reorganise into two clean columns of two - no column is ever
   forced narrower than minmax()'s floor, so no letter-by-letter wraps.
   Same explicit 2x2 order as the 1440px breakpoint: Funding & Applying
   top-left, About us top-right, Insight bottom-left, Privacy/Cookie/Terms
   bottom-right - just remapped from a 3-column grid (address + 2) to a
   2-column one, since the address row now sits above instead of beside. */
@media (max-width: 768px) {
	.site-footer {
		padding-left: var(--wp--preset--spacing--small) !important;
		padding-right: var(--wp--preset--spacing--small) !important;
	}

	.site-footer .wp-block-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto auto;
		gap: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--small);
	}

	.site-footer .footer-address-col {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.site-footer .footer-col-funding {
		grid-column: 1;
		grid-row: 2;
	}

	.site-footer .footer-col-about {
		grid-column: 2;
		grid-row: 2;
	}

	.site-footer .footer-col-insight {
		grid-column: 1;
		grid-row: 3;
	}

	.site-footer .footer-privacy-col {
		grid-column: 2;
		grid-row: 3;
	}
}

/* Mobile: everything single-column, full width, stacked top to bottom. */
@media (max-width: 480px) {
	.site-footer {
		padding-left: var(--wp--preset--spacing--xs) !important;
		padding-right: var(--wp--preset--spacing--xs) !important;
	}

	.site-footer .wp-block-columns {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}

	.site-footer .footer-address-col {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	/* Single column now - undo the 768px breakpoint's explicit 2x2
	   placement so everything just stacks in source order. */
	.site-footer .footer-col-about,
	.site-footer .footer-col-funding,
	.site-footer .footer-col-insight,
	.site-footer .footer-privacy-col {
		grid-column: auto;
		grid-row: auto;
	}

	.site-footer .footer-legal-row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--xs);
	}

	.site-footer .footer-legal-left {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Complianz cookie banner: the theme has no global body font-family (Be
   Vietnam Pro is applied per-block via this preset variable, not on
   <body>), so `inherit` here picked up nothing and the banner fell back
   to the plugin's own default font. Reference the preset directly. */
#cmplz-cookiebanner-container {
	font-family: var(--wp--preset--font-family--be-vietnam-pro) !important;
}

/* ---------- Legal documents (complianz/document block) ----------
   The cookie policy page is nothing but this one plugin block - no title,
   no hero, no theme markup around it - so it renders in the plugin's own
   bare styles (Arial-ish, 14px, flush left in the 1376px content area)
   unless overridden here. Single centred reading column using the
   readable-measure token already defined at the top of this file, with
   site fonts/colours applied on top of the plugin's selectors so its
   dropdown/table structure stays functional.
   The Privacy Policy and Privacy Notice pages are plain core heading/
   paragraph blocks inside a Group with the `mt-legal-doc` class (set in the
   block's Advanced > Additional CSS class), which gets the same treatment. */
#cmplz-document,
.mt-legal-doc {
	max-width: var(--measure-body);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--medium) var(--wp--preset--spacing--3xl);
	font-family: var(--wp--preset--font-family--be-vietnam-pro);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: 1.6;
	color: var(--wp--preset--color--navy-500);
}

/* Cookie Policy: its h1 sits in its own .mt-legal-doc group directly above
   the Complianz-generated document, so collapse the doubled padding
   between the two to match the privacy pages' heading spacing. */
.mt-legal-doc:has(+ #cmplz-document) {
	padding-bottom: 0;
}
.mt-legal-doc + #cmplz-document {
	margin-block-start: 0;
	padding-top: 0;
}

/* Cookie Policy cookie tables (M17): below 600px Complianz lays each
   service out as a "100px 1fr" grid, but a plain 1fr track can't shrink
   below its longest unbreakable cookie name (e.g. WP_PREFERENCES_USER_*),
   so the grid pushed past a 320px viewport. The label column now sizes to
   its longest label ("Expiration") and the value column takes the rest,
   with only the value cells allowed to break long cookie names - labels
   never break mid-word. `body` outranks Complianz's own selector whichever
   stylesheet loads last. */
@media only screen and (max-width: 600px) {
	body #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
		grid-template-columns: max-content minmax(0, 1fr);
	}
}
#cmplz-document .cookies-per-purpose .name,
#cmplz-document .cookies-per-purpose .retention,
#cmplz-document .cookies-per-purpose .function {
	min-width: 0;
	overflow-wrap: anywhere;
}
/* Each service's summary row ("Miscellaneous | Purpose pending
   investigation | chevron") can't fit side by side on the narrowest
   phones, so the purpose label drops under the service name there. */
@media only screen and (max-width: 400px) {
	body #cmplz-document .cmplz-dropdown .cmplz-service-header > div {
		grid-template-columns: minmax(0, 1fr) 25px;
		grid-template-areas: "heading chevron" "paragraph chevron";
		row-gap: 2px;
	}
}

#cmplz-document h2,
#cmplz-document h3,
#cmplz-document h4,
#cmplz-document h5,
#cmplz-document .cmplz-subtitle,
.mt-legal-doc h2,
.mt-legal-doc h3,
.mt-legal-doc h4,
.mt-legal-doc h5 {
	font-family: var(--wp--preset--font-family--loos-normal);
	font-weight: 400;
	color: var(--wp--preset--color--navy-500);
	text-transform: none;
}

/* Numbered top-level sections ("1. Introduction", "2. What are
   cookies?") - the plugin's own borders/spacing, recoloured. */
#cmplz-document h2,
.mt-legal-doc h2 {
	font-size: var(--wp--preset--font-size--h4);
	border-bottom: 1px solid var(--wp--preset--color--cyan-100);
	padding-bottom: var(--wp--preset--spacing--2xs);
	margin-top: var(--wp--preset--spacing--large);
}

#cmplz-document h2:first-of-type,
.mt-legal-doc h2:first-of-type {
	margin-top: 0;
}

/* The privacy pages carry their own page title, which the cookie policy
   doesn't have - same face as the section headings, one step up in size. */
.mt-legal-doc h1 {
	margin-top: 0;
	font-family: var(--wp--preset--font-family--loos-normal);
	font-size: var(--wp--preset--font-size--h2);
	font-weight: 400;
	color: var(--wp--preset--color--navy-500);
}

/* Unlike the plugin's document, the title and intro sit above the first
   numbered section, so that heading needs its normal top spacing back. */
.mt-legal-doc h1 ~ h2:first-of-type {
	margin-top: var(--wp--preset--spacing--large);
}

#cmplz-document h3,
#cmplz-document .cmplz-subtitle,
.mt-legal-doc h3 {
	font-size: var(--wp--preset--font-size--body);
	margin-top: var(--wp--preset--spacing--small);
}

#cmplz-document h4,
#cmplz-document h5,
.mt-legal-doc h4,
.mt-legal-doc h5 {
	font-family: var(--wp--preset--font-family--be-vietnam-pro);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 700;
}

#cmplz-document a,
.mt-legal-doc a {
	color: var(--wp--preset--color--cyan-500);
}

/* Drop the plugin's default external-link icon after target=_blank links -
   no other link on the site carries one. */
#cmplz-document a[target="_blank"]::after {
	content: none;
}

/* Per-service cookie dropdowns (section 6, "Placed cookies") - grey
   plugin defaults swapped for the site's cream/cyan neutrals. */
#cmplz-document .cmplz-dropdown,
#cmplz-document .cmplz-dropdown summary {
	background-color: var(--wp--preset--color--cream-700);
}

#cmplz-document .cmplz-dropdown .cookies-per-purpose {
	border-color: var(--wp--preset--color--cyan-100);
	background-color: var(--wp--preset--color--cyan-100);
}

#cmplz-document .cmplz-dropdown .cookies-per-purpose > div {
	background-color: var(--wp--preset--color--cream-500);
}