/**
 * MediaOne Widgets — brand tokens + shared primitives.
 *
 * Scoped to .mow-root on purpose. The Tailwind block this plugin replaces put
 * these on :root and restyled `body`, which is what collided with the theme's
 * Bootstrap. Nothing here escapes the widget.
 *
 * Values transcribed from the live homepage code block (audited 2026-08-05).
 */

.mow-root {
	--mow-blue: #215aef;
	--mow-deep: #000e3e;
	--mow-denim: #2a46a9;
	--mow-corn: #5da0fd;
	--mow-sky: #deeefe;
	--mow-orange: #ff6600;
	--mow-orange-lt: #ff8800;
	--mow-yellow: #ffac00;
	--mow-cream: #fff9f0;

	--mow-text: #374151;
	--mow-muted: #6b7280;
	--mow-faint: #9ca3af;

	/* The live site loads Barlow only; Poppins is declared but never served, so
	   body copy currently falls back to Barlow. Kept as a var so it is one edit
	   to switch if the font is added later. */
	--mow-font-head: "Barlow", sans-serif;
	--mow-font-body: "Poppins", "Barlow", sans-serif;

	--mow-container: 1280px;
	--mow-gutter: 1.5rem;
	--mow-radius: 20px;

	font-family: var(--mow-font-body);
	color: var(--mow-text);
	box-sizing: border-box;
}

.mow-root *,
.mow-root *::before,
.mow-root *::after {
	box-sizing: inherit;
}

.mow-root h1,
.mow-root h2,
.mow-root h3,
.mow-root h4,
.mow-root h5 {
	font-family: var(--mow-font-head);
	color: var(--mow-deep);
	margin: 0;
}

.mow-root p {
	margin: 0;
}

/* Centred content column, used by every section. */
.mow-container {
	width: 100%;
	max-width: var(--mow-container);
	margin-inline: auto;
	padding-inline: var(--mow-gutter);
}

/* Shared pill button. */
.mow-btn {
	display: inline-block;
	padding: 1rem 2.25rem;
	border-radius: 9999px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	color: #fff;
	background: var(--mow-orange);
	box-shadow: 0 10px 15px -3px rgba(0, 14, 62, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mow-btn:hover,
.mow-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 24px -6px rgba(0, 14, 62, 0.18);
	color: #fff;
}

/* Icon wrapper for every client-choosable icon.
   Elementor renders either an <i> from an icon font or an inline <svg>, so both
   are sized from the wrapper's font-size — that way one size control works
   whichever library the client picks. */
.mow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 1em;
	line-height: 1;
}

.mow-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.mow-icon i {
	font-size: inherit;
	line-height: 1;
}

/* Gradient CTA, shared by the PSG and About sections. The gradient endpoints are
   set per section via --mow-cta-from / --mow-cta-to. */
.mow-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 2rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(
		135deg,
		var(--mow-cta-from, var(--mow-blue)),
		var(--mow-cta-to, var(--mow-denim))
	);
	box-shadow: 0 10px 15px -3px rgba(0, 14, 62, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mow-cta:hover,
.mow-cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 24px -6px rgba(0, 14, 62, 0.24);
	color: #fff;
}

.mow-cta svg {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
	fill: currentColor;
}

/* Keyboard focus must stay visible even on themes that strip outlines. */
.mow-root a:focus-visible,
.mow-root button:focus-visible {
	outline: 2px solid var(--mow-blue);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.mow-root * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}