/**
 * Meridian Engineering — Site chrome
 *
 * Header, footer, navigation, post/archive templates and WordPress core
 * content classes. Elementor templates replace most of this on built pages;
 * it exists so every route has a presentable fallback.
 */

/* -------------------------------------------------------------------------
 * Page shell
 * ---------------------------------------------------------------------- */
.md-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.md-site__main {
	flex: 1 0 auto;
}

/*
 * The fixed header occupies no layout space and main is not padded for it, so
 * page content starts at the very top of the viewport and a full-bleed hero
 * runs up underneath the transparent header.
 *
 * The trade-off: on a page that does NOT open with a hero, the first element
 * also starts under the header. To give those pages the space back, restore:
 *
 *     body:not(.md-has-hero-header) .md-site__main {
 *         padding-block-start: var(--md-header-total);
 *     }
 *
 * The md-has-hero-header body class is still applied, so that rule is all it
 * would take.
 */


/* -------------------------------------------------------------------------
 * Header
 *
 * Figma node 1:1385. 80px tall with 15px of breathing room above it, fixed to
 * the top of the viewport and transparent so a hero shows through.
 *
 * Two states, and every colour in the header resolves through the custom
 * properties below so the whole thing flips with a single class:
 *
 *   default    transparent ground, white type — over a dark hero
 *   .is-solid  white ground, ink type — once scrolled, while a dropdown is
 *              open, or while the mobile menu is open (set by theme.js)
 * ---------------------------------------------------------------------- */
.md-header {
	--md-header-bg: transparent;
	--md-header-ink: var(--md-white);
	/*
	 * White over a photograph — the same as the resting ink, so on a hero the
	 * underline is the whole hover signal rather than a colour shift. That is the
	 * point of having an underline: it does not need a second colour to read.
	 */
	--md-header-ink-hover: var(--md-white);
	--md-header-border: transparent;
	--md-header-shadow: none;
	--md-header-cta-ink: var(--md-white);
	--md-header-rule: rgba(255, 255, 255, 0.12);
	--md-header-focus: var(--md-white);

	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: var(--md-z-header);

	border-bottom: var(--md-border-width) solid var(--md-header-border);
	background-color: var(--md-header-bg);
	color: var(--md-header-ink);
	box-shadow: var(--md-header-shadow);
	transition: background-color var(--md-transition),
		color var(--md-transition), border-color var(--md-transition),
		box-shadow var(--md-transition);
}

.md-header.is-solid {
	--md-header-bg: var(--md-white);
	--md-header-ink: var(--md-ink);
	/*
	 * The site's body ink on a white ground, not white (which disappears) and not
	 * brand blue (which read as a link rather than a hover). It sits a step lighter
	 * than the resting --md-ink, so the label softens while the underline arrives —
	 * 10.31:1 against 15.63:1 at rest, so both clear AA comfortably.
	 */
	--md-header-ink-hover: var(--md-color-text-body);
	--md-header-border: var(--md-color-rule);
	--md-header-shadow: var(--md-shadow-sm);
	/* On white the CTA reverts to the brand guidelines' default state: blue
	 * label beside the blue disc. */
	--md-header-cta-ink: var(--md-blue);
	--md-header-rule: var(--md-color-rule);
	--md-header-focus: var(--md-color-focus);
}

.md-header__inner {
	display: flex;
	align-items: center;
	gap: var(--md-space-md);
	min-height: var(--md-header-height); /* 80px */
}

/* --- Logo -------------------------------------------------------------- */
.md-header__logo {
	display: inline-flex;
	flex: none;
	align-items: center;
	padding-inline-end: var(--md-space-md); /* 24px */
	text-decoration: none;
}

/* A Customizer logo is user-supplied and of unknown ratio, so it is capped by
 * height and sizes naturally on the horizontal axis. */
.md-header__logo-img {
	width: auto;
	max-width: 12rem;
	height: 4rem; /* 64px */
	object-fit: contain;
}

/* The shipped Meridian mark has a known 52x64 box. */
.md-header__logo-img--mark {
	width: 3.25rem; /* 52px */
	max-width: none;
	height: 4rem; /* 64px */
}

/* --- Primary navigation ------------------------------------------------ */
.md-header__nav {
	flex: 1 1 auto;
	min-width: 0;
}

.md-nav,
.md-nav__submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.md-nav {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
}

.md-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.md-nav__link,
.md-nav__item > .md-nav__link {
	display: flex;
	align-items: center;
	min-height: var(--md-header-height);
	padding-inline: var(--md-space-xs); /* 12px */
	color: var(--md-header-ink);
	/*
	 * 16px, not the 13px drawn — the same bump the section body copy took.
	 *
	 * Stated rather than taken from --md-text-eyebrow, which these used to read: that
	 * token is also the footer's and .md-eyebrow's, and it is genuinely a 13px eyebrow
	 * size. Moving the token would have resized the footer and every section eyebrow
	 * along with the nav.
	 *
	 * Measured before committing to it: the four links grow from 262px to 303px, which
	 * leaves 253px of clearance to the header CTA at 992px, the tightest width the
	 * desktop header is used at. No overflow and no wrapping at 992, 1024, 1200 or 1440.
	 */
	font-size: var(--md-text-small); /* 16px */
	font-weight: var(--md-weight-bold);
	line-height: 1.5; /* 24px */
	letter-spacing: 0.025em; /* 0.4px on 16px */
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--md-transition);
}

/*
 * Back onto --md-header-ink-hover rather than a flat colour. The header has two
 * grounds, so no single value works: white vanishes once the header goes solid,
 * and the body ink vanishes over a photograph. The property is declared per state
 * a few rules up, which is the only place that distinction can live.
 *
 * The chevron on a parent item reads the same property, so the label and its
 * chevron cannot drift — hard-coding white here had already split them.
 *
 * The underline needs nothing: it is `background-color: currentColor`, so it
 * follows whatever the link resolves to in every state, hovered or current.
 */
.md-nav__link:hover,
.md-nav__link:focus-visible {
	color: var(--md-header-ink-hover);
}

/* --- The top-level indicator -------------------------------------------- *
 * A rule under the label rather than a colour. The current item used to be
 * light blue, which made colour the only thing distinguishing it — an underline
 * carries the same information without depending on hue, which is what WCAG
 * 1.4.1 asks for.
 *
 * currentColor, so it follows the header through its states without a second
 * set of values: white over a hero, ink once solid, and the hover tint while
 * hovered.
 * -------------------------------------------------------------------- */
.md-nav__link {
	position: relative;
}

.md-nav__link::after {
	content: "";
	position: absolute;
	/*
	 * Inset to the link's own padding, so the rule measures the label rather than
	 * the box around it.
	 */
	inset-inline: var(--md-space-xs); /* 12px */
	/*
	 * Positioned from the text, not the box. The link is a full-height flex item
	 * — 80px on desktop — so `inset-block-end: 0` would put the rule at the foot
	 * of the header rather than under the word. 0.75em is exactly half the 19.5px
	 * line box at 13px, and the remaining 0.4em is the gap beneath it, so both
	 * hold if the nav's type size ever changes.
	 */
	inset-block-start: calc(50% + 1.15em);
	height: 2px;
	background-color: currentColor;
	/*
	 * Grown from the leading edge rather than faded in. scaleX is composited, so
	 * it animates without laying out the header on every frame — `width` here
	 * would.
	 */
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--md-transition);
}

/* The pair carries the item's end padding, so the rule stops where the label
 * does rather than running under the chevron. */
.md-nav__item--has-children > .md-nav__link::after {
	inset-inline-end: var(--md-space-3xs); /* 4px */
}

.md-nav__link:hover::after,
.md-nav__link:focus-visible::after,
.md-nav__item.is-current > .md-nav__link::after {
	transform: scaleX(1);
}

/*
 * The current item is not animating in — it is simply there — so it must not
 * sweep on every page load. Only the transient states transition.
 */
.md-nav__item.is-current > .md-nav__link::after {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.md-nav__link::after {
		transition: none;
	}
}

/* Parent items pair a link with a chevron button, so the pair shares the
 * item's inline padding rather than each carrying its own. */
.md-nav__item--has-children > .md-nav__link {
	padding-inline-end: var(--md-space-3xs);
}

.md-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	padding-inline: 0 var(--md-space-xs);
	border: 0;
	background: none;
	color: var(--md-header-ink);
	cursor: pointer;
	transition: color var(--md-transition);
}

.md-nav__toggle svg {
	width: 0.875rem; /* 14px */
	height: 0.875rem;
	fill: none;
	transition: transform var(--md-transition);
}

.md-nav__toggle:hover,
.md-nav__toggle:focus-visible,
.md-nav__item--has-children:hover > .md-nav__toggle {
	color: var(--md-header-ink-hover);
}

.md-nav__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* --- Dropdowns ----------------------------------------------------------
 * Two panels, both white regardless of the header's state — opening either one
 * forces the header solid, so there is no dark-panel case to design for.
 *   simple  Figma 160:62941
 *   mega    Figma 160:63702
 * -------------------------------------------------------------------- */
.md-nav__submenu {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 100%;
	z-index: var(--md-z-overlay);
	border: var(--md-border-width) solid var(--md-color-panel-border);
	background-color: var(--md-white);
	box-shadow: var(--md-shadow-panel);
	opacity: 0;
	visibility: hidden;
	transform: translateY(var(--md-space-2xs));
	transition: opacity var(--md-transition), transform var(--md-transition),
		visibility var(--md-transition);
}

/* Opened by the disclosure button — the mechanism that works for keyboard and
 * touch. Hover is layered on top of it for pointers only. */
.md-nav__toggle[aria-expanded="true"] + .md-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
	.md-nav__item--has-children:hover > .md-nav__submenu,
	.md-nav__item--has-children:focus-within > .md-nav__submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

/* --- Simple dropdown ---------------------------------------------------- */
.md-nav__submenu--simple {
	min-width: 18rem; /* 288px — the panel width in the comp */
	padding: 1px;
}

.md-nav__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Shared row: label left, chevron right, hairline beneath. */
.md-nav__sublink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--md-space-sm);
	border-bottom: var(--md-border-width) solid var(--md-color-panel-rule);
	color: var(--md-black);
	/* 16px with the nav above it — a dropdown row is the same navigation, and a
	 * 13px panel hanging off a 16px bar reads as a different component. */
	font-size: var(--md-text-small); /* 16px */
	font-weight: var(--md-weight-bold);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--md-transition), background-color var(--md-transition);
}

.md-nav__submenu--simple .md-nav__sublink {
	padding: 0.75rem 1rem 0.8125rem; /* 12px / 16px / 13px */
	line-height: 1;
}

.md-nav__subitem:last-child > .md-nav__sublink {
	border-bottom: 0;
}

.md-nav__chevron {
	display: inline-flex;
	flex: none;
	color: var(--md-color-chevron);
	transition: color var(--md-transition), transform var(--md-transition);
}

.md-nav__chevron svg {
	width: 0.875rem; /* 14px */
	height: 0.875rem;
	fill: none;
}

.md-nav__sublink:hover,
.md-nav__sublink:focus-visible,
.md-nav__subitem.is-current > .md-nav__sublink,
.md-nav__sublink[aria-current="page"] {
	color: var(--md-blue);
}

.md-nav__submenu--simple .md-nav__sublink:hover,
.md-nav__submenu--simple .md-nav__sublink:focus-visible {
	background-color: var(--md-blue-tint);
}

.md-nav__sublink:hover .md-nav__chevron,
.md-nav__sublink:focus-visible .md-nav__chevron {
	color: var(--md-blue);
	transform: translateX(2px);
}

/* --- Mega dropdown ------------------------------------------------------ */
.md-nav__submenu--mega {
	padding: 1.5625rem; /* 25px */
	max-width: calc(100vw - (var(--md-container-gutter) * 2));
}

.md-mega__grid {
	display: grid;
	/* Fixed tracks, so the panel shrink-wraps to the designed 700px at three
	 * columns and stays proportional at two or four. */
	grid-template-columns: repeat(var(--md-mega-cols, 3), 12.25rem);
	column-gap: var(--md-space-lg); /* 32px */
	padding-block-end: 1.3125rem; /* 21px */
	border-bottom: var(--md-border-width) solid rgba(0, 0, 0, 0.08);
}

.md-mega__heading {
	margin: 0;
	color: var(--md-green);
	font-size: 0.625rem; /* 10px */
	font-weight: var(--md-weight-bold);
	line-height: 1.5; /* 15px */
	letter-spacing: 0.2em; /* 2px on 10px */
	text-transform: uppercase;
}

.md-mega__heading-link {
	color: inherit;
	text-decoration: none;
}

.md-mega__heading-link:hover,
.md-mega__heading-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.md-mega__list {
	margin: 0;
	padding: 0.75rem 0 0; /* 12px */
	list-style: none;
}

.md-mega__list .md-nav__sublink {
	padding: 0.5rem 0 0.5625rem; /* 8px / 9px */
	line-height: 1.5; /* 19.5px */
	white-space: normal;
}

.md-mega__list .md-nav__chevron {
	margin-inline-start: 0.75rem; /* 12px */
}

.md-mega__list .md-nav__chevron svg {
	width: 0.75rem; /* 12px */
	height: 0.75rem;
}

.md-mega__footer {
	padding-block-start: var(--md-space-sm); /* 16px */
}

.md-mega__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--md-space-3xs); /* 4px */
	color: var(--md-blue);
	/* With the panel it sits in. */
	font-size: var(--md-text-small); /* 16px */
	font-weight: var(--md-weight-bold);
	line-height: 1.5;
	text-decoration: none;
}

.md-mega__cta svg {
	width: 0.875rem; /* 14px */
	height: 0.875rem;
	fill: none;
	transition: transform var(--md-transition);
}

.md-mega__cta:hover,
.md-mega__cta:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.md-mega__cta:hover svg,
.md-mega__cta:focus-visible svg {
	transform: translateX(2px);
}

/* --- Call to action ---------------------------------------------------- */
.md-header__cta {
	/* The header CTA uses the smaller disc from the nav design rather than the
	 * full-height one used in body content. */
	--md-btn-disc: 2.4375rem; /* 39px */
	/* White label over a hero, blue once the header goes solid. The button
	 * deliberately carries no md-btn--on-dark class — that selector is more
	 * specific than this one and would pin the label to white in both states. */
	--md-btn-ink: var(--md-header-cta-ink);

	flex: none;
	margin-inline-start: auto;
}

.md-header__cta .md-btn__icon svg {
	width: 1.125rem; /* 18px */
	height: 1.125rem;
}

/*
 * The label stays white while the disc grows.
 *
 * It already resolved to white — .md-btn--primary:hover sets it at (0,2,0) and
 * beats the rule above at (0,1,0) — so this states the intent rather than
 * changing the endpoint, and stops a future `.md-header.is-solid .md-header__cta`
 * rule from quietly winning it back.
 */
.md-btn--primary.md-header__cta:hover,
.md-btn--primary.md-header__cta:focus-visible {
	--md-btn-ink: var(--md-white);
	color: var(--md-white);
}

/*
 * The endpoint was never the problem — the crossing was. On the solid header the
 * label starts brand blue and .md-btn's `color` transition fades it to white over
 * the same 200ms the disc takes to grow, so for about half of that it is blue on
 * blue and the word disappears.
 *
 * No single ink survives that crossing: a blue label is lost on the arriving blue,
 * and a white one is lost on the white header the disc has not reached yet. The
 * surface has to change before the ink does, so the pill takes the fill outright
 * and both land instantly.
 *
 * Scoped to the solid state on purpose. Over a hero the label is already white and
 * nothing crosses, so the growing disc stays exactly as designed there — this only
 * trades the growth for a fill where the growth was breaking the label.
 */
.md-header.is-solid .md-header__cta:hover,
.md-header.is-solid .md-header__cta:focus-visible {
	--md-btn-fill: var(--md-blue);

	transition-duration: 0s;
}

/* --- Mobile toggle ----------------------------------------------------- */
.md-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--md-header-ink);
	cursor: pointer;
}

.md-nav-toggle__bars {
	position: relative;
	display: block;
	width: 1.25rem;
	height: 2px;
	background-color: currentColor;
	transition: background-color var(--md-transition);
}

.md-nav-toggle__bars::before,
.md-nav-toggle__bars::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: 2px;
	background-color: currentColor;
	transition: transform var(--md-transition);
}

.md-nav-toggle__bars::before {
	inset-block-start: -6px;
}

.md-nav-toggle__bars::after {
	inset-block-start: 6px;
}

.md-nav-toggle[aria-expanded="true"] .md-nav-toggle__bars {
	background-color: transparent;
}

.md-nav-toggle[aria-expanded="true"] .md-nav-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.md-nav-toggle[aria-expanded="true"] .md-nav-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* Focus must stay visible in both header states — a white ring would vanish
 * once the header goes solid. */
.md-header :focus-visible {
	outline-color: var(--md-header-focus);
}

/* --- Below the desktop breakpoint -------------------------------------- */
@media (max-width: 61.9375em) {
	/*
	 * The mobile header is always solid — no hero shows through it here.
	 *
	 * The whole property set is restated rather than just the background, because
	 * the two states are a set: leaving the ink white would put white type on a
	 * white ground, leaving --md-header-rule at rgba(255,255,255,0.12) would erase
	 * the drawer's own item borders, and leaving the focus ring white would make it
	 * invisible. These mirror .is-solid above; that class still applies on scroll
	 * and while the menu is open, setting the same values, so the two cannot
	 * disagree — but they do have to be kept in step by hand.
	 */
	.md-header {
		--md-header-bg: var(--md-white);
		--md-header-ink: var(--md-ink);
		/* Kept in step with .is-solid above — body ink, not white, on this ground. */
		--md-header-ink-hover: var(--md-color-text-body);
		--md-header-border: var(--md-color-rule);
		--md-header-shadow: var(--md-shadow-sm);
		--md-header-rule: var(--md-color-rule);
		--md-header-focus: var(--md-color-focus);
	}

	/*
	 * No offset on main here, matching desktop: content runs up under the header at
	 * every width, so a hero fills the viewport from the top as Figma 120:7 draws
	 * it. That comp clears the header from inside the hero instead — 120px of top
	 * padding on the copy — which is the section's business rather than the
	 * layout's.
	 *
	 * The consequence to know about: the mobile header is opaque, so anything that
	 * does not carry its own top clearance sits behind it. That is the hero's copy
	 * until its 120px is applied, and any section placed first on a page — the
	 * breadcrumb strip being the one that shows it most.
	 */

	/* The nav drops to its own row below the logo/CTA/toggle line, which it can
	 * only do if the header row is allowed to wrap. */
	.md-header__inner {
		flex-wrap: wrap;
	}

	/*
	 * Brand blue rather than the header ink the desktop toggle follows. Set on the
	 * toggle itself so it holds in both header states — .is-solid only moves the
	 * --md-header-ink property, which this no longer reads.
	 */
	.md-nav-toggle {
		display: inline-flex;
		order: 3;
		color: var(--md-blue, #006bb6);
		margin-inline-start: auto;
	}

	/*
	 * Hidden here by request. Note it is the only "Talk with our team" in the
	 * header — header.php renders it once, outside the nav panel — so on mobile
	 * that action is not in the header at all. Adding it to the foot of the drawer
	 * would put it back without returning it to the top bar.
	 */
	.md-header__cta {
		display: none;
	}

	.md-header__nav {
		order: 4;
		flex: 0 0 100%;
		display: none;
		padding-block-end: var(--md-space-md);
	}

	.md-header__nav.is-open {
		display: block;
	}

	/* Opening the mobile menu also puts the header into its solid state, so the
	 * panel inherits that ground and needs no background of its own. */

	.md-nav {
		flex-direction: column;
		align-items: stretch;
	}

	.md-nav__item {
		flex-wrap: wrap;
		justify-content: space-between;
		border-top: 1px solid var(--md-header-rule);
	}

	.md-nav__link {
		min-height: 0;
		flex: 1 1 auto;
		padding-block: var(--md-space-xs);
		padding-inline: 0;
	}

	/* The stacked rows lose the inline padding, so the rule follows the label to
	 * the edge. The em-based vertical offset needs no change — it is measured from
	 * the text, and the text is all that is left of the box here. */
	.md-nav__link::after {
		inset-inline: 0;
	}

	.md-nav__toggle {
		width: 2.75rem;
		padding-inline: 0;
	}

	/* Both panels flow inline as accordion content rather than floating. */
	.md-nav__submenu {
		position: static;
		flex: 0 0 100%;
		min-width: 0;
		max-width: none;
		padding: 0 0 var(--md-space-2xs) var(--md-space-sm);
		border: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
	}

	.md-nav__toggle[aria-expanded="true"] + .md-nav__submenu {
		display: block;
	}

	/* Hover must not open dropdowns in the stacked layout. */
	.md-nav__item--has-children:hover > .md-nav__submenu,
	.md-nav__item--has-children:focus-within > .md-nav__submenu {
		display: none;
	}

	.md-nav__item--has-children
		> .md-nav__toggle[aria-expanded="true"]
		+ .md-nav__submenu {
		display: block;
	}

	/* The simple panel's rows lose the inset that suited a floating card. */
	.md-nav__submenu--simple .md-nav__sublink {
		padding-inline: 0;
	}

	/* The mega's columns become one stacked list per group. */
	.md-mega__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--md-space-md);
		padding-block-end: var(--md-space-sm);
	}

	.md-mega__list .md-nav__sublink {
		white-space: nowrap;
	}
}

@media (max-width: 30em) {
	.md-header__cta .md-btn__label {
		display: none;
	}

	.md-header__cta {
		padding-inline: 0;
		width: var(--md-btn-disc);
		min-width: var(--md-btn-disc);
	}
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */
.md-footer {
	background-color: var(--md-color-footer-bg);
	color: var(--md-color-footer-text);
}

.md-footer__inner {
	padding-block: var(--md-space-2xl) 2.5rem; /* 64px / 40px */
}

/* --- Link columns ----------------------------------------------------- */
.md-footer__nav {
	display: grid;
	/* Five equal columns at desktop, per the design. The auto-fit minimum is
	 * what reflows them on narrower screens — see the media queries below. */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: var(--md-space-lg); /* 32px */
	row-gap: var(--md-space-xl); /* 48px */
	padding-block-end: var(--md-space-xl); /* 48px */
}

.md-footer__heading {
	margin: 0;
	color: var(--md-color-footer-heading);
	font-size: var(--md-text-eyebrow); /* 13px */
	font-weight: var(--md-weight-bold);
	line-height: 1.5;
	letter-spacing: 0.025em; /* 0.325px on 13px */
}

.md-footer__heading-link {
	color: inherit;
	text-decoration: none;
}

.md-footer__heading-link:hover,
.md-footer__heading-link:focus-visible {
	color: var(--md-light-blue);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Type is set on the list, not just the link: the <li> line box is governed by
 * its own strut, so leaving it at the inherited 18px/1.625 body size would open
 * each row to ~29px regardless of the 15px link inside it. The two must move
 * together — bumping only .md-footer__link leaves the strut short. */
.md-footer__list {
	margin: 0;
	padding: 0;
	padding-block-start: var(--md-space-sm); /* 16px */
	/*
	 * 15px, a literal rather than a token: the type scale steps 16 → 14 → 13 and has
	 * no 15, and one consumer does not earn a token. The column headings stay at 13
	 * (--md-text-eyebrow) — they are labels, not links — so the bump also buys a
	 * size contrast between a heading and the links under it that did not exist
	 * when both sat at 13.
	 */
	font-size: 0.9375rem; /* 15px */
	line-height: 1.375; /* 20.625px */
	list-style: none;
}

.md-footer__item + .md-footer__item {
	margin-block-start: 0.625rem; /* 10px */
}

.md-footer__link {
	color: var(--md-color-footer-text);
	font-size: 0.9375rem; /* 15px — kept in step with .md-footer__list above */
	line-height: 1.375; /* 20.625px */
	text-decoration: none;
}

.md-footer__link:hover,
.md-footer__link:focus-visible {
	color: var(--md-white);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.md-footer__link[aria-current="page"] {
	color: var(--md-white);
}

/* Column reflow. The design is a five-up desktop row; below that it steps
 * down rather than letting 185px columns crush. */
@media (max-width: 61.9375em) {
	.md-footer__nav {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 37.4375em) {
	.md-footer__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--md-space-lg);
	}
}

/* --- Logo / legal / social bar ---------------------------------------- */
.md-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--md-space-md);
	padding-block-start: var(--md-space-lg); /* 32px */
	border-top: var(--md-border-width) solid var(--md-color-footer-rule);
}

.md-footer__logo {
	display: inline-flex;
	flex: none;
	text-decoration: none;
}

/* A Customizer logo is user-supplied and of unknown ratio, so it is capped by
 * height and sizes naturally on the horizontal axis. */
.md-footer__logo-img {
	width: auto;
	max-width: 12rem;
	height: 3.125rem; /* 50px */
	object-fit: contain;
}

/* The shipped Meridian mark has a known 40x50 box — both axes are explicit so
 * it renders at exactly its designed size. */
.md-footer__logo-img--mark {
	width: 2.5rem; /* 40px */
	max-width: none;
	height: 3.125rem; /* 50px */
}

.md-footer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--md-space-md); /* 24px */
}

.md-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--md-space-md); /* 24px */
	margin: 0;
	padding: 0;
	font-size: var(--md-text-fine); /* 12px — set here so the <li> strut matches */
	line-height: 1.5; /* 18px */
	list-style: none;
}

.md-footer__legal a {
	color: var(--md-color-footer-text);
	font-size: var(--md-text-fine); /* 12px */
	line-height: 1.5;
	text-decoration: none;
}

.md-footer__legal a:hover,
.md-footer__legal a:focus-visible {
	color: var(--md-white);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.md-footer__social {
	display: inline-flex;
	align-items: center;
	color: var(--md-color-footer-text);
	transition: color var(--md-transition);
}

.md-footer__social:hover,
.md-footer__social:focus-visible {
	color: var(--md-white);
}

.md-footer__copyright {
	margin: 0;
	padding-block-start: var(--md-space-md); /* 24px */
	color: var(--md-color-footer-text);
	font-size: var(--md-text-micro); /* 11px */
	line-height: 1.5;
}

/* Keyboard focus needs to be visible against black. */
.md-footer :focus-visible {
	outline-color: var(--md-white);
}

/* -------------------------------------------------------------------------
 * Page & post templates
 * ---------------------------------------------------------------------- */
.md-page-header {
	padding-block: var(--md-space-2xl) var(--md-space-xl);
	border-bottom: var(--md-border-width) solid var(--md-color-rule);
}

.md-page-header__title {
	font-size: var(--md-text-h1);
}

.md-page-header__meta {
	margin-block-start: var(--md-space-xs);
	font-size: var(--md-text-caption);
	color: var(--md-color-text-muted);
}

.md-entry {
	padding-block: var(--md-space-2xl);
}

.md-entry__thumb {
	margin-block-end: var(--md-space-xl);
	border-radius: var(--md-radius-md);
	overflow: hidden;
}

.md-archive__list {
	display: grid;
	gap: var(--md-space-xl);
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	padding-block: var(--md-space-2xl);
}

.md-card {
	display: flex;
	flex-direction: column;
	gap: var(--md-space-xs);
	height: 100%;
}

.md-card__thumb {
	margin-block-end: var(--md-space-2xs);
	border-radius: var(--md-radius-md);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.md-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--md-duration-slow) var(--md-ease);
}

.md-card:hover .md-card__thumb img {
	transform: scale(1.03);
}

.md-card__title {
	font-size: var(--md-text-h4);
}

.md-card__title a {
	color: inherit;
	text-decoration: none;
}

.md-card__title a:hover,
.md-card__title a:focus-visible {
	color: var(--md-blue);
}

.md-card__meta {
	font-size: var(--md-text-caption);
	color: var(--md-color-text-muted);
}

/* Pagination */
.md-pagination {
	padding-block-end: var(--md-space-3xl);
}

.md-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--md-space-2xs);
}

.md-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: var(--md-space-2xs);
	border: var(--md-border-width) solid var(--md-color-border);
	border-radius: var(--md-radius-sm);
	color: var(--md-color-heading);
	text-decoration: none;
}

.md-pagination .page-numbers:hover,
.md-pagination .page-numbers:focus-visible {
	border-color: var(--md-blue);
	color: var(--md-blue);
}

.md-pagination .page-numbers.current {
	background-color: var(--md-blue);
	border-color: var(--md-blue);
	color: var(--md-white);
}

/* -------------------------------------------------------------------------
 * WordPress core content classes
 * ---------------------------------------------------------------------- */
.alignleft {
	float: left;
	margin: 0 var(--md-space-md) var(--md-space-md) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--md-space-md) var(--md-space-md);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	width: min(var(--md-container-wide), 100vw - (var(--md-space-lg) * 2));
	margin-inline: auto;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.wp-element-caption,
figcaption {
	margin-block-start: var(--md-space-2xs);
	font-size: var(--md-text-caption);
	color: var(--md-color-text-muted);
}

.sticky .md-card__title::after {
	content: " ★";
	color: var(--md-yellow);
}

.gallery {
	display: grid;
	gap: var(--md-space-sm);
	grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}

.gallery-item {
	margin: 0;
}

/* Comments */
.md-comments {
	padding-block: var(--md-space-2xl);
	border-top: var(--md-border-width) solid var(--md-color-rule);
}

.md-comments .comment-list {
	margin: 0 0 var(--md-space-xl);
	padding: 0;
	list-style: none;
}

.md-comments .comment-list ol {
	list-style: none;
	padding-inline-start: var(--md-space-md);
}

.md-comments .comment-body {
	padding-block: var(--md-space-md);
	border-bottom: var(--md-border-width) solid var(--md-color-rule);
}

.md-comments :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
	padding: var(--md-space-2xs) var(--md-space-xs);
	border: var(--md-border-width) solid var(--md-color-border);
	border-radius: var(--md-radius-sm);
	background-color: var(--md-color-surface);
}

/* Search form */
.md-search-form {
	display: flex;
	gap: var(--md-space-2xs);
	max-width: 28rem;
}

.md-search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--md-space-2xs) var(--md-space-sm);
	border: var(--md-border-width) solid var(--md-color-border);
	border-radius: var(--md-radius-pill);
	background-color: var(--md-color-surface);
}

/* -------------------------------------------------------------------------
 * 404
 * ---------------------------------------------------------------------- */
.md-404 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--md-space-md);
	padding-block: var(--md-space-4xl);
	max-width: var(--md-container-narrow);
}