/**
 * Meridian Engineering — Components & layout primitives
 *
 * Shared classes used by both theme templates and the Meridian Sections
 * plugin. Adding a class here makes it available to Elementor widgets too.
 */

/* -------------------------------------------------------------------------
 * Layout primitives
 * ---------------------------------------------------------------------- */
.md-container {
	width: 100%;
	max-width: calc(var(--md-container-max) + (var(--md-container-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--md-container-gutter);
}

.md-container--wide {
	max-width: calc(var(--md-container-wide) + (var(--md-container-gutter) * 2));
}

.md-container--narrow {
	max-width: calc(
		var(--md-container-narrow) + (var(--md-container-gutter) * 2)
	);
}

.md-container--flush {
	max-width: none;
	padding-inline: 0;
}

.md-section {
	padding-block: var(--md-section-padding-block);
}

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

.md-section--flush {
	padding-block: 0;
}

.md-section--alt {
	background-color: var(--md-color-surface-alt);
}

.md-section--invert {
	background-color: var(--md-color-surface-invert);
	color: rgba(255, 255, 255, 0.9);
}

.md-section--invert :is(h1, h2, h3, h4, h5, h6) {
	color: var(--md-color-text-inverse);
}

.md-section--invert .md-eyebrow {
	color: var(--md-light-blue);
}

.md-stack {
	display: flex;
	flex-direction: column;
	gap: var(--md-gap, var(--md-space-md));
}

.md-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--md-gap, var(--md-space-sm));
}

/* Auto-fitting grid; set --md-grid-min to change the breakpoint per instance. */
.md-grid {
	display: grid;
	gap: var(--md-gap, var(--md-space-xl));
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(var(--md-grid-min, 16rem), 100%), 1fr)
	);
}

/* -------------------------------------------------------------------------
 * Typography helpers
 * ---------------------------------------------------------------------- */
.md-display {
	font-size: var(--md-text-display);
	font-weight: var(--md-weight-bold);
	line-height: var(--md-leading-tight);
	letter-spacing: var(--md-tracking-tight);
	color: var(--md-color-heading);
}

.md-eyebrow {
	display: block;
	margin: 0;
	color: var(--md-color-eyebrow);
	font-size: var(--md-text-eyebrow);
	font-weight: var(--md-weight-bold);
	line-height: 1.5;
	letter-spacing: var(--md-tracking-wide);
	text-transform: uppercase;
}

.md-subhead {
	font-size: var(--md-text-h2);
	font-weight: var(--md-weight-semibold);
	line-height: var(--md-leading-heading);
	color: var(--md-color-heading);
}

.md-lead {
	font-size: var(--md-text-lead);
	line-height: var(--md-leading-body);
}

.md-body {
	font-size: var(--md-text-body);
	line-height: var(--md-leading-body);
	color: var(--md-color-text-body);
}

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

/* Constrain body copy to a comfortable reading measure. */
.md-measure {
	max-width: var(--md-measure);
}

/* -------------------------------------------------------------------------
 * Buttons
 *
 * Two variants from the brand guidelines:
 *   .md-btn--primary   pill, blue icon disc on the left, blue label.
 *                      On hover the disc expands to fill the pill and the
 *                      label flips to white.
 *   .md-btn--secondary pill outline, blue label. Fills solid blue on hover.
 * ---------------------------------------------------------------------- */
.md-btn {
	--md-btn-fill: transparent;
	--md-btn-ink: var(--md-blue);
	--md-btn-border: transparent;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--md-space-2xs);
	min-height: var(--md-control-height-sm);
	padding: var(--md-space-xs) var(--md-control-padding-x);
	border: var(--md-border-width) solid var(--md-btn-border);
	border-radius: var(--md-radius-pill);
	background-color: var(--md-btn-fill);
	color: var(--md-btn-ink);
	font-family: var(--md-font-body);
	font-size: var(--md-text-h6);
	font-weight: var(--md-weight-medium);
	line-height: var(--md-leading-snug);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--md-transition),
		border-color var(--md-transition), color var(--md-transition);
}

/*
 * The label colour has to restate itself for the link states, and this is not
 * belt and braces.
 *
 * base.css carries `a:hover, a:focus { color: var(--md-color-link-hover) }` at
 * (0,1,1), which outranks `.md-btn`'s own `color: var(--md-btn-ink)` at (0,1,0).
 * So a button rendered as a <span> — no link set — behaved, while the same button
 * with a link went #005893 on hover no matter what its variant had decided. On the
 * hero that is invisible: the growing disc is painted --md-blue-dark, which is the
 * same #005893, so the label disappeared into it.
 *
 * (0,2,0) beats (0,1,1) on specificity, so this holds whatever order the
 * stylesheets load in. It does not choose an ink — every state already sets
 * --md-btn-ink — it only stops `color` being pulled off that variable.
 */
.md-btn:hover,
.md-btn:focus,
.md-btn:focus-visible {
	color: var(--md-btn-ink);
}

.md-btn:disabled,
.md-btn[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
}

/* --- Primary --------------------------------------------------------- */
.md-btn--primary {
	--md-btn-ink: var(--md-blue);
	/* Diameter of the leading icon disc. Full control height by default;
	 * the header CTA overrides it to the smaller disc in its design. */
	--md-btn-disc: var(--md-control-height);
	/* Disc fill and the glyph inside it. Inverted on a brand-blue ground —
	 * see .md-btn--invert. */
	--md-btn-disc-bg: var(--md-blue);
	--md-btn-disc-ink: var(--md-white);
	--md-btn-disc-bg-active: var(--md-blue-dark);

	min-height: var(--md-control-height);
	padding-block: 0;
	/* Leave room for the icon disc on the leading edge. */
	padding-inline: calc(var(--md-btn-disc) + var(--md-space-sm))
		var(--md-space-lg);
	overflow: hidden;
	isolation: isolate;
}

/* The disc. Grows to fill the whole pill on hover/focus. */
.md-btn--primary::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: -1;
	width: var(--md-btn-disc);
	/* Vertically centre a disc smaller than the control. */
	height: var(--md-btn-disc);
	margin-block: auto;
	border-radius: var(--md-radius-pill);
	background-color: var(--md-btn-disc-bg);
	transition: width var(--md-duration-slow) var(--md-ease),
		height var(--md-duration-slow) var(--md-ease),
		background-color var(--md-transition);
}

.md-btn--primary:hover::before,
.md-btn--primary:focus-visible::before {
	height: 100%;
}

.md-btn--primary .md-btn__icon {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--md-btn-disc);
	color: var(--md-btn-disc-ink);
}

/* On a dark ground the label is white from the outset. */
.md-btn--primary.md-btn--on-dark {
	--md-btn-ink: var(--md-white);
}

.md-btn--primary .md-btn__icon svg {
	width: var(--md-icon-size-sm);
	height: var(--md-icon-size-sm);
	fill: none;
	transition: transform var(--md-transition);
}

.md-btn--primary:hover,
.md-btn--primary:focus-visible {
	--md-btn-ink: var(--md-white);
}

.md-btn--primary:hover::before,
.md-btn--primary:focus-visible::before {
	width: 100%;
}

.md-btn--primary:hover .md-btn__icon svg,
.md-btn--primary:focus-visible .md-btn__icon svg {
	transform: translateX(0.125rem);
}

.md-btn--primary:active::before {
	background-color: var(--md-btn-disc-bg-active);
}

/*
 * Inverted, for a primary button sitting on a brand-blue ground: white disc,
 * blue glyph, white label. On hover the disc still grows to fill the pill, so
 * the label flips to blue to stay legible against it.
 */
.md-btn--primary.md-btn--invert {
	--md-btn-disc-bg: var(--md-white);
	--md-btn-disc-ink: var(--md-blue);
	--md-btn-disc-bg-active: var(--md-grey-100);
	--md-btn-ink: var(--md-white);
}

.md-btn--primary.md-btn--invert:hover,
.md-btn--primary.md-btn--invert:focus-visible {
	--md-btn-ink: var(--md-blue);
}

.md-btn--invert:focus-visible {
	outline-color: var(--md-white);
}

/* Without an icon the primary button is simply a solid blue pill. */
.md-btn--primary:not(:has(.md-btn__icon)) {
	--md-btn-fill: var(--md-blue);
	--md-btn-ink: var(--md-white);

	padding-inline: var(--md-control-padding-x);
}

.md-btn--primary:not(:has(.md-btn__icon))::before {
	content: none;
}

.md-btn--primary:not(:has(.md-btn__icon)):hover,
.md-btn--primary:not(:has(.md-btn__icon)):focus-visible {
	--md-btn-fill: var(--md-blue-dark);
}

/* --- Secondary ------------------------------------------------------- */
.md-btn--secondary {
	--md-btn-border: var(--md-blue);
	--md-btn-ink: var(--md-blue);
}

.md-btn--secondary:hover,
.md-btn--secondary:focus-visible {
	--md-btn-fill: var(--md-blue);
	--md-btn-ink: var(--md-white);
}

.md-btn--secondary:active {
	--md-btn-fill: var(--md-blue-dark);
	--md-btn-border: var(--md-blue-dark);
}

/* --- Text link button ------------------------------------------------ */
.md-btn--link {
	min-height: 0;
	padding: 0;
	border-radius: 0;
	gap: var(--md-space-3xs);
	font-weight: var(--md-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.md-btn--link:hover,
.md-btn--link:focus-visible {
	--md-btn-ink: var(--md-blue-dark);
}

/* --- On dark backgrounds --------------------------------------------- */
.md-btn--on-dark.md-btn--secondary {
	--md-btn-border: var(--md-white);
	--md-btn-ink: var(--md-white);
}

.md-btn--on-dark.md-btn--secondary:hover,
.md-btn--on-dark.md-btn--secondary:focus-visible {
	--md-btn-fill: var(--md-white);
	--md-btn-ink: var(--md-ink);
}

.md-btn--on-dark:focus-visible {
	outline-color: var(--md-white);
}

/* -------------------------------------------------------------------------
 * Icons
 * ---------------------------------------------------------------------- */
/* Icons inherit the surrounding text colour. Setting a colour here would
 * override whatever context the icon is dropped into — that is how the footer
 * social mark ended up rendering in link blue on a black ground. Use
 * .md-icon--ink or .md-icon--accent to opt into a specific colour. */
.md-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--md-icon-size);
	height: var(--md-icon-size);
	color: inherit;
}

.md-icon svg {
	width: 100%;
	height: 100%;
	fill: none;
}

.md-icon--sm {
	width: var(--md-icon-size-sm);
	height: var(--md-icon-size-sm);
}

.md-icon--xs {
	width: var(--md-icon-size-xs);
	height: var(--md-icon-size-xs);
}

/* Social marks are solid-filled rather than stroked. */
.md-icon--xs svg {
	fill: currentColor;
}

.md-icon--ink {
	color: var(--md-ink);
}

.md-icon--accent {
	color: var(--md-blue);
}

/* -------------------------------------------------------------------------
 * Media
 * ---------------------------------------------------------------------- */
.md-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--md-radius-md);
	background-color: var(--md-grey-100);
}

.md-media > img,
.md-media > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.md-media--square {
	aspect-ratio: 1;
}

.md-media--landscape {
	aspect-ratio: 16 / 9;
}

.md-media--portrait {
	aspect-ratio: 3 / 4;
}

/*
 * Scrim for text sitting over imagery — keeps overlay copy legible.
 *
 * The gradient is a custom property so a section can supply its own without a
 * second scrim implementation: Figma 97:29509 washes left-to-right rather than
 * bottom-up. The default is the hero's, unchanged.
 */
.md-scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(
		--md-scrim-image,
		linear-gradient(
			to top,
			rgba(var(--md-ink-rgb), 0.75) 0%,
			rgba(var(--md-ink-rgb), 0.35) 45%,
			rgba(var(--md-ink-rgb), 0) 75%
		)
	);
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Accessibility utilities
 * ---------------------------------------------------------------------- */
.screen-reader-text,
.md-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.md-skip-link {
	position: absolute;
	inset-inline-start: var(--md-space-sm);
	inset-block-start: var(--md-space-sm);
	z-index: var(--md-z-skip-link);
	padding: var(--md-space-2xs) var(--md-space-sm);
	border-radius: var(--md-radius-sm);
	background-color: var(--md-white);
	color: var(--md-blue);
	font-weight: var(--md-weight-semibold);
	text-decoration: none;
	box-shadow: var(--md-shadow-md);
	transform: translateY(-200%);
	transition: transform var(--md-transition);
}

.md-skip-link:focus {
	transform: translateY(0);
}

/* -------------------------------------------------------------------------
 * Colour / spacing utilities
 * ---------------------------------------------------------------------- */
.md-text-blue {
	color: var(--md-blue);
}
.md-text-ink {
	color: var(--md-ink);
}
.md-text-muted {
	color: var(--md-color-text-muted);
}
.md-text-inverse {
	color: var(--md-color-text-inverse);
}

.md-bg-blue {
	background-color: var(--md-blue);
	color: var(--md-white);
}
.md-bg-green {
	background-color: var(--md-green);
	color: var(--md-ink);
}
.md-bg-yellow {
	background-color: var(--md-yellow);
	color: var(--md-ink);
}
.md-bg-light-blue {
	background-color: var(--md-light-blue);
	color: var(--md-ink);
}
.md-bg-ink {
	background-color: var(--md-ink);
	color: var(--md-white);
}
.md-bg-alt {
	background-color: var(--md-color-surface-alt);
}

.md-text-center {
	text-align: center;
}

.md-mx-auto {
	margin-inline: auto;
}