/* ============================================================
   Design tokens — scoped to .srweb, deliberately NOT to :root, so they cannot
   collide with the host theme or another plugin. Every widget renders inside a
   .srweb container (see Base/AbstractWidget), which means these variables only
   exist within our own subtree.
   Values are a 1:1 port of the ScaleReady design system, matching the Gen2
   microsite so both plugins look identical on the site.
   ============================================================ */
.srweb {
	/* 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;

	/* Typography. Fonts are self-hosted through the inline @font-face rules, with
	   a fallback to "Barlow"/"Mulish" in case the destination site already loads
	   them under those names. */
	--font-display: "SRWeb Barlow", "Barlow", "Helvetica Neue", Arial, sans-serif;
	--font-body: "SRWeb 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. Container width is a custom property so that:
	   1) the theme fit (AssetManager::theme_fit_css) can match it to the site
	      header, and
	   2) each widget can override it from its "Container width" control without
	      needing !important. */
	--srw-wrap-max: 1200px;
	--srw-wrap-pad: clamp(1.25rem, 4vw, 2.5rem);
	/* Height reserved for the site's fixed header; theme_fit_css sets the real value. */
	--srw-nav-h: 0px;

	/* Type baseline for our subtree. It never touches the host site's body.
	   font-size, line-height and font-weight are stated explicitly so nothing is
	   inherited from the destination theme, which applies 1.5em / 1.41667em / 700
	   to its own headings. */
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 400;
	color: var(--c-text);
	-webkit-font-smoothing: antialiased;
}
.srweb *, .srweb *::before, .srweb *::after { box-sizing: border-box; }

/* ============================================================
   RESET LAYER — neutralises host theme and Elementor styles inside .srweb.
   :where() contributes no specificity, so these rules weigh only what .srweb
   itself weighs (0,1,0). That beats the theme's element rules (p{}, td{}, a{})
   but never overrides a widget's own rules, which are (0,2,x).
   ============================================================ */
/* .srweb.srweb is specificity (0,2,0): enough to beat the theme's class rules
   (.elementor p, .elementor td are (0,1,1)) but not the widgets' own rules
   (.srw-x .y are (0,2,1) and load later). :where() adds nothing. */
.srweb.srweb :where(p, li, dd, dt, blockquote, figcaption) { font-family: var(--font-body); font-weight: 400; color: var(--c-text); }
.srweb.srweb :where(caption, label, input, select, textarea, button) { font-family: var(--font-body); }
.srweb.srweb :where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); }
/* Inline tags only inherit the surrounding font. Colour is left to the widgets,
   since that is where the orange and cyan accents are applied. */
.srweb.srweb :where(span, em, strong, b, small, i, a) { font-family: inherit; }
/* Pills, labels, chips and the like get a fixed line-height of 1.5, so they never
   inherit the pixel line-height the destination theme derives from `1.41667em`
   on its headings — which used to inflate their height. */
.srweb.srweb :where([class*="chip"], [class*="eyebrow"], [class*="kicker"], [class*="label"], [class*="badge"], [class*="-tag"], [class*="pill"], [class*="btn"], [class*="-cta"], [class*="-link"]) { line-height: 1.5; }
/* The host theme styles bare `label` elements (1.375rem / 700), so reset ours. */
.srweb :where(label) { font-size: 1rem; line-height: 1.5; font-weight: 400; }
/* Tables: undo Elementor's reset.css (grey borders on all sides + zebra stripes). */
.srweb.srweb :where(table) { border-collapse: collapse; background: transparent; }
.srweb.srweb :where(thead, tbody, tfoot, tr) { background: transparent; }
.srweb.srweb :where(th, td) { border: 0; background: transparent; }

/* Reduced motion (accessibility), scoped to our own subtree. */
@media (prefers-reduced-motion: reduce) {
	.srweb *, .srweb *::before, .srweb *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}