/* ============================================================
   Base for every sr_* widget: design tokens and shared typography.

   WHY THIS FILE EXISTS
   These widgets were written against a child theme that declared the tokens
   on :root. On a site without that theme every var() fell through, which is
   worse than it sounds: a declaration like

       padding: calc(96px + 42px) 0 var(--sp-3xl)

   is thrown away whole when one custom property is missing, so the widget lost
   its padding entirely — not just its bottom padding.

   The tokens now ship with the plugin, so the widgets look the same wherever
   they are installed.

   SCOPE
   Custom properties on :root are inert — declaring them affects nothing that
   does not ask for them, so they are safe on a site with its own theme.
   Everything that actually paints is scoped to the widgets themselves and
   never touches the rest of the page.

   The @font-face rules are printed inline with absolute URLs from
   AssetManager, because CSS combiners on the destination site rewrite this
   file's location and would break relative font paths.
   ============================================================ */

:root {
	/* Brand */
	--c-ink-deep: #0E1D41;
	--c-ink: #244378;
	--c-accent: #f97316;
	--c-accent-hov: #ea580c;
	--c-accent-soft: #fff5ec;
	--c-glow: #22d3ee;
	--c-glow-soft: #ecfeff;
	--c-white: #ffffff;

	/* Text */
	--c-text: #33405a;
	--c-text-soft: #68738a;
	--c-border: #e5eaf1;
	--c-line: #eef1f6;

	/* Status: yes / no / warn (comparison tables, badges) */
	--c-yes: #10b981;
	--c-yes-bg: rgba(16, 185, 129, .12);
	--c-yes-bd: rgba(16, 185, 129, .28);
	--c-yes-text: #0f7a55;
	--c-no: #ef4757;
	--c-no-bg: rgba(239, 71, 87, .10);
	--c-no-bd: rgba(239, 71, 87, .28);
	--c-no-text: #d23f4d;
	--c-warn: #f59e0b;
	--c-warn-bg: rgba(245, 158, 11, .12);
	--c-warn-bd: rgba(245, 158, 11, .28);
	--c-warn-text: #a86a12;

	/* Typography — families are prefixed so they cannot clash with the host
	   site's own Barlow or Mulish. */
	--font-display: "SREW Barlow", "Barlow", "Helvetica Neue", Arial, sans-serif;
	--font-body: "SREW Mulish", "Mulish", "Helvetica Neue", Arial, sans-serif;

	/* Radii */
	--r-sm: 6px;
	--r-md: 12px;
	--r-btn: 12px;
	--r-lg: 16px;
	--r-xl: 22px;
	--r-pill: 999px;

	/* Shadows */
	--sh-soft: 0 4px 15px rgba(20, 29, 55, .05);
	--sh-card: 0 10px 30px rgba(20, 29, 55, .06);
	--sh-card-hov: 0 18px 44px rgba(20, 29, 55, .12);
	--sh-glass: 0 20px 50px rgba(36, 67, 120, .12);

	/* Spacing scale */
	--sp-xs: .44rem;
	--sp-sm: .67rem;
	--sp-md: 1rem;
	--sp-lg: 1.5rem;
	--sp-xl: 2.25rem;
	--sp-2xl: 3.38rem;
	--sp-3xl: 5.06rem;

	/* Motion */
	--ease-expo: cubic-bezier(.16, 1, .3, 1);
	--ease-out: cubic-bezier(.2, .7, .2, 1);
	--t-reveal: .7s;
	--t-micro: .22s;

	/* Layout */
	--sr-container: 1200px;
	--sr-gutter: clamp(1.25rem, 4vw, 3rem);

	/*
	 * Height of the fixed site header the widgets have to clear.
	 *
	 * Heroes add their own breathing room on top of this, and every section
	 * uses it as scroll-margin so an anchor does not land under the header.
	 * 96px is what these widgets were designed against; the override below
	 * measures up to the theme actually in use.
	 */
	--srew-nav-h: 96px;
}

/*
 * Fitting the host theme.
 *
 * Keyed on the header the theme actually renders, so a site without it keeps
 * the defaults the widgets were designed against.
 *
 * --sr-container  the theme lays its header and footer out at 91.5rem. Content
 *                 narrower than that reads as misaligned, with the page copy
 *                 visibly inset from the logo and the nav above it.
 * --srew-nav-h    this header is taller than the design assumed: the logo and
 *                 its arc run down to 221px, while the nav links sit at 65px.
 *                 Heroes and anchor offsets both key off this.
 */
body:has(header.site-header) {
	--sr-container: 91.5rem;
	--srew-nav-h: 221px;
}

@media (max-width: 63.9375em) {
	body:has(header.site-header) {
		--srew-nav-h: 110px;
	}
}

/* ============================================================
   Typography inside the widgets only.

   The host theme sets its own font and colour on body; these rules re-establish
   the design's baseline within each widget without touching anything outside.
   ============================================================ */
[class*="elementor-widget-sr_"] {
	font-family: var(--font-body);
	color: var(--c-text);
	-webkit-font-smoothing: antialiased;

	/*
	 * The theme sets font-weight: 700 high up the tree, and it inherits straight
	 * through the widget — body copy came out bold everywhere. Reset it here so
	 * the widgets read normally; anything that wants weight declares it.
	 */
	font-weight: 400;
}

/*
 * Same reset one level down, for prose that a theme rule targets by tag
 * (p {}, li {}) rather than by inheritance. Written twice on the attribute so
 * it outweighs those single-tag rules without reaching for !important.
 */
[class*="elementor-widget-sr_"][class*="elementor-widget-sr_"] :where(p, li, dd, dt, figcaption, td, blockquote) {
	font-weight: 400;
}

[class*="elementor-widget-sr_"] h1,
[class*="elementor-widget-sr_"] h2,
[class*="elementor-widget-sr_"] h3,
[class*="elementor-widget-sr_"] h4,
[class*="elementor-widget-sr_"] h5,
[class*="elementor-widget-sr_"] h6 {
	font-family: var(--font-display);
	color: var(--c-ink-deep);
}

/* Elementor paints unclassed links its own colour. Prose links inside a widget
   take the design's treatment instead; links that carry a class — buttons, nav
   — are left alone. */
[class*="elementor-widget-sr_"] a:not([class]) {
	color: var(--c-ink);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1.5px solid var(--c-glow);
	transition: color var(--t-micro), border-color var(--t-micro);
}

[class*="elementor-widget-sr_"] a:not([class]):hover {
	color: var(--c-accent);
	border-bottom-color: var(--c-accent);
}

/* Header and footer widgets are not prose. */
.sr-header a:not([class]),
.sr-footer a:not([class]) {
	border-bottom: 0;
	font-weight: inherit;
}

/* ============================================================
   Share row — one look for every page in this plugin.

   Three widgets grew their own version of this component: 40px rounded
   squares in the Grant hero, 34px circles in the Comparison hero, 32px
   circles in the Grant CTA. The Grant hero's is the approved one, so it is
   defined here once and the widgets no longer size or paint it themselves.

   A widget still owns where its row sits — margins stay in the widget.
   Any new widget that marks up a share row with one of these class names
   picks the look up automatically.
   ============================================================ */
[class*="elementor-widget-sr_"] :is(.gp-share, .comp-share, .share-row) {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .85rem;
	color: var(--c-text-soft);
}

[class*="elementor-widget-sr_"] :is(.gp-share, .comp-share, .share-row) > span {
	margin-right: .2rem;
}

[class*="elementor-widget-sr_"] :is(.gp-share, .comp-share, .share-row) a {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: #fff;
	border: 1.5px solid var(--c-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-ink);
	text-decoration: none;
	transition: transform .2s, background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

[class*="elementor-widget-sr_"] :is(.gp-share, .comp-share, .share-row) a:hover {
	transform: translateY(-2px);
	background: var(--c-ink);
	color: #fff;
	border-color: var(--c-ink);
	box-shadow: var(--sh-soft);
}

[class*="elementor-widget-sr_"] :is(.gp-share, .comp-share, .share-row) svg {
	width: 17px;
	height: 17px;
}

/* ============================================================
   Accessibility
   ============================================================ */
.sr-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: .75rem 1.25rem;
	background: var(--c-ink-deep);
	color: var(--c-white);
	border-radius: 0 0 var(--r-sm) 0;
	font-family: var(--font-display);
	font-weight: 700;
}

.sr-skip-link:focus {
	left: 0;
}

[class*="elementor-widget-sr_"] :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--c-glow);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	[class*="elementor-widget-sr_"],
	[class*="elementor-widget-sr_"] *,
	[class*="elementor-widget-sr_"] *::before,
	[class*="elementor-widget-sr_"] *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}