/**
 * Meridian Sections — shared widget styles.
 *
 * Loaded on any page containing a Meridian widget. Everything here references
 * the theme's design tokens (assets/css/tokens.css in the Meridian theme).
 * The fallbacks in var() keep the sections presentable if a Meridian widget is
 * ever rendered under a different theme.
 */

/* Elementor wraps every widget in .elementor-widget-container. Sections need
 * to break out of it to run full-bleed. */
.elementor-widget-meridian-hero-banner .elementor-widget-container,
.elementor-widget-meridian-icon-features .elementor-widget-container {
	width: 100%;
}

/*
 * Every list inside a Meridian section is structural, never prose. The theme
 * excludes the md- namespace from its prose list styling; this resets the box
 * so widget lists do not depend on that exclusion, and so a new widget's list
 * is correct without remembering to reset it.
 */
/*
 * The list selectors sit inside :where() so this whole rule weighs only as
 * much as .md-section. A reset that outranks the components it resets is a
 * trap: as written with `.md-section ul[class]` it scored (0,2,1) and silently
 * ate the card grid's spacing.
 */
.md-section :where(ul[class], ol[class]) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* When a section is the only thing in an Elementor container, the container's
 * own padding would double up with the section's. */
.md-section > .md-container--flush {
	padding-inline: 0;
}

/*
 * Section head — shared primitive.
 *
 * A blue eyebrow over a 36px heading, from Figma 1:1005, 21:12284 and 1:1137 —
 * three comps drawing the identical block, so it lives here once. Sections that
 * predate it (.md-card-grid__eyebrow/__title, .md-featurette__eyebrow/__title)
 * still carry their own copies and should migrate; the control names match, so
 * that migration needs no content changes.
 */
.md-shead__eyebrow {
	margin: 0;
	color: var(--md-color-eyebrow, #006bb6);
	font-size: var(--md-text-micro, 0.6875rem); /* 11px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5; /* 16.5px */
	letter-spacing: 0.22em; /* 2.42px on 11px */
	text-transform: uppercase;
}

.md-shead__title {
	margin: 0;
	color: var(--md-color-heading, #0a1628);
	font-family: var(--md-font-heading, "Cabin", sans-serif);
	/* 36px sits between the h2 (30) and h1 (60) tokens, so it is stated rather
	 * than bent into one of them. Stepped down on small screens the way the
	 * token scale steps its own headings.
	 *
	 * --md-shead-size lets a caller take the size over outright. All three size
	 * rules below read the same property and keep their own value as the
	 * fallback, so the property is unset until something writes it and nothing
	 * already placed moves. Written by a control it wins without a specificity
	 * contest, which a `font-size` declaration on the widget could not do
	 * against `.md-shead--lg .md-shead__title` at (0,2,0). */
	font-size: var(--md-shead-size, clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem)); /* 28 → 36px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.111; /* 40 / 36 */
}

/* Only when an eyebrow precedes it, so a heading-only instance has no orphaned
 * gap above it. */
.md-shead__eyebrow + .md-shead__title {
	margin-block-start: var(--md-space-xs, 0.75rem); /* 12px */
}

/*
 * One accented word inside a heading, from Figma 13:8771 ("The CORE of our
 * structure"). Written by an editor as *CORE* — see render_header().
 */
.md-shead__accent {
	color: var(--md-blue, #006bb6);
}

/*
 * Checklist — shared primitive.
 *
 * A list of short lines, each led by a small square, optionally in two columns
 * filled top-to-bottom. Drawn by Figma 97:29509 (green markers on a dark ground)
 * and 12:8188 (ink markers with a rule under each line).
 *
 * `grid-auto-flow: column` with an explicit row count is what fills the columns
 * downward AND leaves them starting level — CSS multi-column fills the same way
 * but hands the second column's first item a row gap at the top. The row count
 * is content, so callers set --md-checklist-rows from the item count.
 *
 * What the primitive owns: the marker, the item's flex, and the column
 * mechanism. Rhythm between items is the caller's, because one comp spaces them
 * with a row gap and the other with padding and a rule.
 */
.md-checklist {
	display: grid;
	row-gap: var(--md-checklist-gap, 0.875rem); /* 14px */
}

.md-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: var(--md-space-xs, 0.75rem); /* 12px */
	font-size: var(--md-checklist-size, 0.875rem); /* 14px */
	line-height: var(--md-checklist-leading, 1.375);
}

.md-checklist__marker {
	flex: none;
	/* 5px square, dropped so it sits on the first line's x-height rather than
	 * its ascender. */
	width: 5px;
	height: 5px;
	margin-block-start: var(--md-checklist-marker-top, 5px);
	background-color: var(--md-checklist-marker, var(--md-green, #5dae71));
}

@media (min-width: 36em) {
	.md-checklist--split {
		grid-auto-flow: column;
		grid-template-rows: repeat(var(--md-checklist-rows, 5), auto);
		column-gap: var(--md-checklist-col-gap, 3rem);
	}
}

/*
 * Disc — shared primitive.
 *
 * The brand's blue circle holding a small glyph, drawn at 28px and 40px by the
 * Market Projects cards and at 34px by the Row List (12:8289). Size, fill and
 * glyph size are properties; anything about arrangement or hover belongs to the
 * caller.
 *
 * Not .md-btn--primary: that is a pill whose disc expands to fill it, which is a
 * different component that happens to contain a disc.
 *
 * .md-mp__cta-disc / .md-mp__disc still carry their own copy, bound up with the
 * card hover transforms, and should move onto this.
 */
.md-disc {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--md-disc-size, 2.125rem); /* 34px */
	height: var(--md-disc-size, 2.125rem);
	/*
	 * An outlined variant — 18:10044 draws a hairline ring instead of a fill. The
	 * width defaults to 0 rather than to a transparent 1px on purpose: with
	 * border-box sizing a 1px border would shrink every existing disc's content
	 * box by 2px, and none of them asked for that.
	 */
	border: var(--md-disc-border-width, 0) solid
		var(--md-disc-border-color, transparent);
	border-radius: var(--md-radius-pill, 999px);
	background-color: var(--md-disc-bg, var(--md-blue, #006bb6));
	color: var(--md-disc-ink, var(--md-white, #fff));
	transition: background-color var(--md-transition, 200ms ease),
		border-color var(--md-transition, 200ms ease),
		color var(--md-transition, 200ms ease);
}

.md-disc svg {
	width: var(--md-disc-glyph, 0.875rem); /* 14px */
	height: var(--md-disc-glyph, 0.875rem);
	fill: none;
}

/*
 * Media cell — shared primitive.
 *
 * A rounded, clipped box holding a photograph that covers it. Drawn identically
 * by the Mosaic List (13:8771) and the Gallery (13:8904), and it is what any
 * future grid of photographs wants.
 *
 * The image rule is anchored on the cell rather than on a section, because a
 * section-scoped selector silently stops applying the moment the cell is reused —
 * and Elementor's `.elementor img` at (0,1,1) is waiting to reclaim the height.
 * Two classes beat it.
 */
.md-media-cell {
	position: relative;
	overflow: hidden;
	border-radius: var(--md-cell-radius, 0.625rem); /* 10px */
	/* Visible while a photograph decodes, and the comps' own placeholder. */
	background-color: var(--md-grey-100, #eceef1);
}

.md-media-cell .md-media-cell__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Dot accent — the exported 65 × 105 green dot block from Figma 13:8733 and
 * 13:8771. The box lives here; where it hangs is the host section's business,
 * because each comp pins it to a different corner.
 */
.md-dot-accent {
	position: absolute;
	z-index: 1;
	display: block;
	width: 4.0625rem; /* 65px */
	height: 6.5625rem; /* 105px */
	pointer-events: none;
}

/*
 * On a dark ground, from Figma 97:29509: the eyebrow goes brand yellow and the
 * heading white. The accent goes light blue rather than brand blue, which only
 * reaches ~3.3:1 on black and would fail AA for text.
 */
.md-shead--invert .md-shead__eyebrow {
	color: var(--md-yellow, #ecdd01);
}

.md-shead--invert .md-shead__title {
	color: var(--md-white, #fff);
}

.md-shead--invert .md-shead__accent {
	color: var(--md-light-blue, #8ac9ec);
}

/*
 * The smaller head, from Figma 18:9827: 30/36. That is exactly --md-text-h2 and
 * --md-leading-heading, so it is the token pair rather than stated values — the
 * same treatment the Intro Statement's heading uses.
 */
.md-shead--sm .md-shead__title {
	font-size: var(--md-shead-size, var(--md-text-h2, 1.875rem));
	line-height: var(--md-leading-heading, 1.2);
}

/* The larger head, from Figma 13:8733: 48/50.88 with 20px under the eyebrow. */
.md-shead--lg .md-shead__title {
	font-size: var(--md-shead-size, clamp(2.25rem, 1.7rem + 2.2vw, 3rem)); /* 36 → 48px */
	line-height: 1.06; /* 50.88 / 48 */
}

.md-shead--lg .md-shead__eyebrow + .md-shead__title {
	margin-block-start: 1.25rem; /* 20px */
}

/*
 * Dotted ground — shared primitive.
 *
 * The tint-plus-dot-grid washed to white on one side, drawn in Figma 1:1005,
 * 21:11504, 22:12579 and 13:8733. Gradients rather than a tiled image: no
 * request, and crisp at any density.
 *
 * Measured from the 1:1 render of 13:8733 rather than eyeballed — dots on a
 * 20px pitch, and an ink alpha of 0.062–0.066, which is what --md-color-dot
 * already carries. Dot size is a property because that comp draws 5px dots
 * where the earlier sections draw 3px; the default keeps those unchanged.
 *
 * The wash sits above the dots, so it erases them as it gains opacity — that
 * order is fixed and deliberate, verified against every comp that draws this.
 * Its *shape* is not: 18:9927 fades from both edges toward the middle rather
 * than across in one direction, which the three wash properties cannot express
 * between them. --md-dot-wash-image replaces the whole gradient for cases like
 * that; its default is the one-directional wash, built from the same three
 * properties, so sections already setting them are untouched.
 *
 * .md-mp, .md-explorer__market and .md-card-grid--tint still inline their own
 * copies of this recipe and should move onto it.
 */
.md-dots {
	background-color: var(--md-dot-ground, #fcfdfd);
	background-image: var(
			--md-dot-wash-image,
			linear-gradient(
				var(--md-dot-wash, 90deg),
				rgba(255, 255, 255, 0) var(--md-dot-wash-start, 0%),
				var(--md-dot-wash-color, var(--md-white, #fff)) 100%
			)
		),
		radial-gradient(
			circle,
			var(--md-color-dot, rgba(10, 22, 40, 0.06))
				var(--md-dot-size, 1.5px),
			transparent var(--md-dot-size, 1.5px)
		);
	background-size: auto, var(--md-dot-pitch, 20px) var(--md-dot-pitch, 20px);
}

/*
 * Motion control — shared primitive.
 *
 * The pause/play button on a hero background video, needed identically by Hero Banner
 * (1:1365) and Page Hero (273:330), so it lives here rather than being copied. The
 * host owns only where it sits; everything about the button is this rule.
 *
 * Rendered hidden and revealed by hero-video.js, so it turns up exactly when there is
 * playback to stop — which is what makes the autoplay satisfy WCAG 2.2.2 rather than
 * assuming a visitor will find a control a blocked script never drew.
 *
 * Placed by the host, because the two comps put the copy in different places and this
 * has to stay out of it.
 */
.md-motion {
	position: absolute;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px: the smallest comfortable target, and past the 24px WCAG 2.2 floor. */
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: var(--md-border-width, 1px) solid rgba(255, 255, 255, 0.4);
	border-radius: var(--md-radius-pill, 999px);
	/* Dark enough to hold a white glyph over any frame of any video. */
	background-color: rgba(10, 22, 40, 0.55);
	color: var(--md-white, #fff);
	cursor: pointer;
	transition: background-color var(--md-transition, 200ms ease),
		border-color var(--md-transition, 200ms ease);
}

.md-motion:hover,
.md-motion:focus-visible {
	border-color: var(--md-white, #fff);
	background-color: rgba(10, 22, 40, 0.8);
}

/*
 * Two bars while it plays. Drawn in CSS rather than shipped as an asset: the brand
 * set has no transport icons, and a pause glyph is two rectangles.
 */
.md-motion__glyph {
	display: block;
	width: 0.375rem; /* 6px */
	height: 0.875rem; /* 14px */
	border-inline: 0.125rem solid currentColor; /* two 2px bars, 2px apart */
}

/*
 * A triangle once paused, so the control says what it will do rather than what the
 * video is doing.
 *
 * Keyed off the state class on any ancestor rather than on a named hero, so a third
 * hero needs no rule here.
 */
.is-video-paused .md-motion__glyph {
	width: 0;
	height: 0;
	border: 0;
	border-block: 0.4375rem solid transparent;
	border-inline-start: 0.75rem solid currentColor;
	/* The optical centre of a triangle is left of its bounding box. */
	margin-inline-start: 0.1875rem;
}

/*
 * The video layer itself. Both heroes lay it under their copy the same way, and the
 * two-class selector is not optional: Elementor ships `.elementor img` at (0,1,1) and
 * the sibling img in these bands loses to it on a lone class.
 */
.md-videobg {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Visible while the poster loads, and behind a video with letterboxing. */
	background-color: var(--md-grey-100, #eceef1);
}

/*
 * Pill — shared primitive.
 *
 * Five sections now draw an outlined pill and each arrived with its own
 * hard-coded grey and size (#ccc, #d1d5db, #d9d9d9 at 11, 12 and 13px). This is
 * the one they should all become: brand border token, ink label, and the three
 * values that legitimately differ exposed as custom properties so a caller
 * changes size without redeclaring the pill.
 *
 * Defaults are the Featurette's, from Figma 21:12284 — 13px semibold, 17/9.
 * .md-markets__pill, .md-market__tag, the card grid tags and .md-filter__pill
 * are still on their own rules; migrating them is a separate, testable change.
 */
.md-pill {
	display: inline-block;
	flex: none;
	padding: var(--md-pill-py, 0.5625rem) var(--md-pill-px, 1.0625rem); /* 9 / 17 */
	border: var(--md-border-width, 1px) solid var(--md-color-border, #ccc);
	/*
	 * Not always a full pill: 206:33 draws the same box at a 10px radius, which is
	 * the site's card radius rather than a rounded end. A property with the pill as
	 * its default, so every existing caller is untouched.
	 */
	border-radius: var(--md-pill-radius, var(--md-radius-pill, 999px));
	background-color: var(--md-white, #fff);
	color: var(--md-color-text, #0a1628);
	font-size: var(--md-pill-fs, 0.8125rem); /* 13px */
	/* 206:33 sets its labels at regular weight; the Featurette's semibold stays
	 * the default. */
	font-weight: var(--md-pill-weight, var(--md-weight-semibold, 600));
	line-height: 1.5; /* 19.5px on 13px */
	white-space: nowrap;
}

/*
 * A pill that links — shared primitive, first used by the Featurette.
 *
 * The anchor sits inside the pill and covers it: the negative margin cancels the
 * host's padding and the same padding is restated here, so the whole box is the
 * target rather than just the words. Both values read the same two properties
 * .md-pill does, so a caller that retunes --md-pill-px cannot leave the link
 * lagging behind its own box.
 *
 * The border width is in both sums as well as the padding, and that is not
 * decoration. Cancelling only the padding leaves the anchor 2px short of the
 * pill in each axis — measured — so the 1px ring of visible border around the
 * whole thing is not clickable. Adding it makes the target the box a visitor
 * can actually see. The text does not move: margin -(pad + border) and padding
 * +(pad + border) cancel.
 *
 * `border-radius: inherit` matters for the focus ring: without it a rounded pill
 * gets a rectangular outline.
 */
.md-pill__link {
	display: block;
	margin: calc((var(--md-pill-py, 0.5625rem) + var(--md-border-width, 1px)) * -1)
		calc((var(--md-pill-px, 1.0625rem) + var(--md-border-width, 1px)) * -1);
	padding: calc(var(--md-pill-py, 0.5625rem) + var(--md-border-width, 1px))
		calc(var(--md-pill-px, 1.0625rem) + var(--md-border-width, 1px));
	border-radius: inherit;
	color: inherit;
	font: inherit;
	text-decoration: none;
	transition: color var(--md-transition, 200ms ease);
}

/*
 * The hover treatment is on the anchor rather than on .md-pill--link, and
 * deliberately: the anchor is the only element in the pair that can react to its
 * own hover without :has(), and it already covers the whole box, so styling it
 * looks identical to styling the box.
 *
 * Underlined on hover and focus, not recoloured only. A linked pill sits in a row
 * that may also hold plain ones, so the difference has to survive being read
 * without colour.
 */
.md-pill__link:hover,
.md-pill__link:focus-visible {
	color: var(--md-blue, #006bb6);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/*
 * Elementor ships `.elementor img { border:none; border-radius:0; box-shadow:none;
 * height:auto; max-width:100% }` — specificity (0,1,1). Every widget here renders
 * inside .elementor, so a single-class image rule like `.md-thing__img` (0,1,0)
 * loses to it and silently drops its radius, shadow and any explicit height.
 *
 * Style widget images through a two-class selector — `.md-thing .md-thing__img`
 * (0,2,0) — rather than the class alone. A bare `img.md-thing__img` only ties on
 * specificity and leaves the outcome to stylesheet load order.
 */