/* ==========================================================================
   Your Success Lab (Elementor) — base stylesheet
   Deliberately minimal. Elementor / Elementor Pro Theme Builder owns all
   layout, section, and component styling. This file only provides:
   1) a sane reset, 2) brand color/font tokens as CSS custom properties
   (so Alli can reference exact brand values inside Elementor's Custom CSS
   fields without guessing hex codes), 3) baseline typography so plain
   content (e.g. a page with no Elementor data yet) isn't unstyled HTML.
   ========================================================================== */

:root {
	/* Brand tokens — same values as the brand sheet, kept in sync with the
	   original coded theme. Reference these in Elementor's Custom CSS
	   panels (e.g. background: var(--ysl-orange)) rather than re-typing
	   hex codes, so both themes/builders stay visually consistent. */
	--ysl-navy: #1B1464;
	--ysl-purple: #662D91;
	--ysl-orange: #FF7300;
	--ysl-orange-red: #F15A24;
	--ysl-cyan: #3DDEED;
	--ysl-yellow: #E5C500;
	--ysl-text-dark: #333333;
	--ysl-text-muted: #6E6D85;

	/* Font stand-ins — same note as the original theme: Acumin Pro /
	   Freight Pro are purchased but not yet embeddable (see original
	   theme's README for the licensing detail). Swap these two lines once
	   sorted; Elementor's Site Settings > Global Fonts should also be
	   updated to match at that point. */
	--ysl-font-display: 'Inter', -apple-system, sans-serif;
	--ysl-font-body: 'Inter', -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	font-family: var(--ysl-font-body);
	color: var(--ysl-text-dark);
	line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--ysl-orange); outline-offset: 2px; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap;
}

/* Baseline typography for the rare case content renders without Elementor
   (e.g. a page that hasn't been edited in Elementor yet). Once a page has
   Elementor data, Elementor's own CSS takes over entirely for that content. */
h1, h2, h3, h4 {
	font-family: var(--ysl-font-display);
	font-weight: 800;
	line-height: 1.15;
}

a { color: var(--ysl-orange); }
a:hover { color: var(--ysl-orange-red); }