/**
 * IES theme – global CSS variables
 * Loaded on every page before other theme styles. Single source of truth for colors and tokens.
 *
 * Onest @font-face lives in assets/css/onest-font-face.css (self-hosted).
 */

:root {
	/* Buttons – filled, outline, text+icon (see assets/css/ies-buttons.css) */
	--ies-button-primary: #5D43DE;
	--ies-button-hover: #4D4285;
	--ies-button-text: #fff;
	--ies-button-text-hover: #fff;
	--ies-button-outline-border: var(--ies-button-primary);
	--ies-button-outline-text: var(--ies-button-primary);
	--ies-button-outline-hover-bg: var(--ies-button-primary);
	--ies-button-outline-hover-text: var(--ies-button-text);
	--ies-button-link-color: #11294B;
	--ies-button-link-hover: var(--ies-button-primary);
	--ies-button-icon-bg: var(--ies-button-primary);
	--ies-button-icon-hover: var(--ies-button-hover);
	--ies-button-radius: 50px;
	--ies-button-pad-y: 12px;
	--ies-button-pad-x: 24px;
	/* Solid white (dark / gradient surfaces) — Figma 619:3589 / 619:3598 */
	--ies-button-primary-white-bg: var(--ies-white, #fff);
	--ies-button-primary-white-text: var(--ies-button-primary, #5D43DE);
	--ies-button-primary-white-hover-bg: var(--ies-primary-lighter, #D2D1F1);
	--ies-button-font-size: 16px;
	--ies-button-font-weight: 600;
	--ies-button-line-height: 1.2;
	--ies-button-gap: 8px;
	--ies-button-icon-size: 24px;
	/* Figma 3112:2522 filled caret, 24×24 viewBox, white on the purple circle */
	--ies-button-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13.946 12L9.346 7.4L10.054 6.692L15.362 12L10.054 17.308L9.346 16.6Z' fill='%23ffffff'/%3E%3C/svg%3E");
	/* Same caret, vibrant purple — white / light circle (Figma 619:3593 / 619:3602) */
	--ies-button-icon-chevron-on-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13.946 12L9.346 7.4L10.054 6.692L15.362 12L10.054 17.308L9.346 16.6Z' fill='%235D43DE'/%3E%3C/svg%3E");
	--ies-button-text-icon-white-color: var(--ies-white, #fff);
	--ies-button-text-icon-white-icon-bg: var(--ies-white, #fff);
	--ies-button-text-icon-white-icon-hover-bg: var(--ies-primary-lighter, #D2D1F1);
	/* Shared hover fade (Custom CTA / .ies-btn) */
	--ies-button-transition: background 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;

	/* Brand colors */
	--ies-primary: #5D43DE;
	--ies-primary-dark: #4D4285;
	--ies-primary-mid: #A4A2E6;
	--ies-primary-light: #D6CEFF;
	--ies-primary-lighter: #D2D1F1;
	--ies-primary-soft: #F6F3FF;
	--ies-teal: #3E7F83;
	--ies-teal-light: #D3EFED;
	--ies-navy: #11294B;
	--ies-navy-text: #11294B;
	--ies-white: #fff;
	--ies-card-hover-bg: #EFECFC;
	--ies-light-purple-gray: #F7F7FD;
	--ies-neutral-gray: #D8D8E0;
	/* Mega-menu page dimmer — Neutral Gray @ 80% (BH-1470) */
	--ies-nav-overlay: color-mix(in srgb, var(--ies-neutral-gray) 80%, transparent);
	/* Footer social icon circles — Primary Lighter @ 50%, full on hover */
	--ies-footer-social-bg: color-mix(in srgb, var(--ies-primary-lighter) 50%, transparent);
	--ies-footer-social-bg-hover: var(--ies-primary-lighter);
	/* Fade divider line (footer newsletter, mobile menu/logo, reusable containers) */
	--ies-fade-divider: linear-gradient(90deg, color-mix(in srgb, var(--ies-primary-mid) 1%, transparent) 0%, var(--ies-primary-mid) 50%, color-mix(in srgb, var(--ies-primary-mid) 1%, transparent) 100%);
	--ies-footer-divider: var(--ies-fade-divider);
	/* Form fields (HubSpot / CME) — 10px, not the pill inputs */
	--ies-input-radius: 10px;
	/* Main nav chevron (points up; rotate 180deg when closed / for selects pointing down) */
	--ies-nav-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M5.65375 3.8147e-06L0 5.65375L1.05375 6.7075L5.65375 2.1075L10.2537 6.7075L11.3075 5.65375L5.65375 3.8147e-06Z' fill='%2311294B'/%3E%3C/svg%3E");
	--ies-nav-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cg transform='rotate(180 6 3.5)'%3E%3Cpath d='M5.65375 3.8147e-06L0 5.65375L1.05375 6.7075L5.65375 2.1075L10.2537 6.7075L11.3075 5.65375L5.65375 3.8147e-06Z' fill='%2311294B'/%3E%3C/g%3E%3C/svg%3E");

	/* Legacy aliases used by mega/mobile menu + IES CTA banner CSS */
	--ies-vibrant-purple: var(--ies-primary);
	--ies-purple: var(--ies-primary-dark);
	--ies-light-purple: var(--ies-primary-mid);

	/* Typography */
	--ies-font-display: Onest, sans-serif;
	--ies-font-body: Onest, sans-serif;
	--ies-h1-size: 55px;
	--ies-h1-weight: 900;
	--ies-h1-line-height: 1.1;
	--ies-h1-letter-spacing: -0.01em;
	--ies-h2-size: 36px;
	--ies-h2-weight: 800;
	--ies-h2-line-height: 1.1;
	--ies-h3-size: 28px;
	--ies-h3-weight: 700;
	--ies-h3-line-height: 1.1;
	--ies-h4-size: 24px;
	--ies-h4-weight: 700;
	--ies-h4-line-height: 1.15;
	--ies-h5-size: 20px;
	--ies-h5-weight: 700;
	--ies-h5-line-height: 1.15;
	--ies-h6-size: 18px;
	--ies-h6-weight: 700;
	--ies-h6-line-height: 1.15;
	--ies-eyebrow-size: 14px;
	--ies-eyebrow-weight: 700;
	--ies-eyebrow-letter-spacing: 1px;
	--ies-heading-color: var(--ies-navy);
	--ies-eyebrow-color: var(--ies-primary);

	/* Layout — matches Elementor boxed containers / header gutters */
	--ies-site-max-width: 1280px;
	--ies-site-gutter: 30px;

	/*
	 * Section vertical rhythm. Two separate quantities, because the comps
	 * measure two different things:
	 *
	 * --ies-section-py  Half the gap between two sections, applied top and
	 *                   bottom. Figma "Homepage final | Desktop" measures 120px
	 *                   between adjacent modules (module ends y=2305, next
	 *                   starts y=2425), so 60px a side. Mobile measures 80px,
	 *                   so 40px a side.
	 * --ies-band-py     Padding *inside* a section that has its own background,
	 *                   where the space is visible against the colour. Figma
	 *                   "New Modules R4 | Desktop" measures 100px on every band
	 *                   (band 2203–2860, content 2303–2760). On mobile this
	 *                   equals the base value, so bands need no special case.
	 *
	 * Sections with a background opt in via .ies-band (see qa-styles.css).
	 */
	--ies-section-py: 60px;
	--ies-section-py-tight: 30px;
	--ies-section-py-loose: 120px;
	--ies-band-py: 100px;

	/*
	 * Header chrome. Change --ies-logo-* to resize the mark; bar height
	 * (--ies-header-height) is derived so scroll/ticker/pre-header offsets stay in sync.
	 * Figma header logo: 149 × 70.
	 */
	--ies-logo-width: 149px;
	--ies-logo-height: 70px;
	--ies-header-pad-y: 20px;
	--ies-header-height: calc(var(--ies-logo-height) + (var(--ies-header-pad-y) * 2));
	--ies-preheader-height: 33px;
	--ies-ticker-height: 34px;
	--ies-chrome-offset: calc(var(--ies-ticker-height) + var(--ies-preheader-height));
	--ies-marquee-px-per-second: 70;

	/* Preset purple gradient (e.g. for Content + Icon Cards) */
	--purples-grad: linear-gradient(89deg, var(--ies-primary-dark, #4D4285) 0%, var(--ies-primary, #5D43DE) 70%, var(--ies-primary-mid, #A4A2E6) 100%);
}

/* Compact header on tablet/mobile — independent of the desktop mockup size.
 * Height must match .inner-header (16px / 20px padding + logo) or the
 * in-flow .fixed-header spacer leaves a gap under the nav. */
@media (max-width: 1024px) {
	:root {
		--ies-logo-width: 106px;
		--ies-logo-height: 50px;
		--ies-header-height: calc(var(--ies-logo-height) + 16px + 20px);
	}
}

/*
 * Resolved chrome heights. --ies-ticker-height / --ies-preheader-height are the
 * bar sizes; the *-h pair below collapse to 0 when that bar is not on the page,
 * so --ies-chrome-total is safe to use directly as a content clearance offset.
 *
 * Declared on <body> rather than :root because custom properties substitute at
 * their declaration site — the body-class gates must live on the same element
 * as --ies-chrome-total for them to resolve into it.
 */
body {
	--ies-ticker-h: 0px;
	--ies-preheader-h: var(--ies-preheader-height);
	--ies-chrome-total: calc(var(--ies-ticker-h) + var(--ies-preheader-h) + var(--ies-header-height));
}

body.has-ticker-bar {
	--ies-ticker-h: var(--ies-ticker-height);
}

body.landing-no-pre-header {
	--ies-preheader-h: 0px;
}

/* Mobile section rhythm — Figma "Homepage final | mobile": 80px between
 * modules, i.e. 40px per section side. Bands read the same 40px, so
 * --ies-band-py collapses to the base value here. */
@media (max-width: 767px) {
	:root {
		--ies-site-gutter: 20px;
		--ies-section-py: 40px;
		--ies-section-py-tight: 20px;
		--ies-section-py-loose: 80px;
		--ies-band-py: 40px;
	}
}