/* ============================================================
   Optivro ISPU — core.css
   Design tokens, scoped reset, shared reveal engine + failsafe.
   Every widget root carries the class `oiw-scope`; ALL styling is
   scoped under it so nothing leaks onto the host theme (§5).
   Tokens are declared ON the scope (not bare :root) so a theme's
   own custom properties can never override them.
   ============================================================ */

.oiw-scope {
	/* Palette — verbatim from the source :root. */
	--navy: #001D3A;
	--navy2: #003377;
	--cream: #FFFFFF;
	--cream2: #F5F7FA;
	--border: #E8E4DE;
	--border2: #EAE6E0;
	--gold: #FF7043;
	--ink: rgb(25, 25, 35);
	--ink2: rgb(45, 45, 45);
	--societal: #E8926B;
	--structural: #8CA6C0;

	/* Root DEFAULT font only — inherited by any text without its own rule (i.e.
	   BODY copy). Deliberately NOT led by "OrpheusPro Regular": headings carry the
	   real Orpheus via their own explicit rules (.oiw-h etc.), so body text must
	   stay on its prior fallback here and NOT inherit the heading font. */
	font-family: 'orpheus pro', orpheus, Georgia, 'Times New Roman', serif;
	color: var(--ink);
	box-sizing: border-box;
}

/* Scoped reset — mirrors the source `*{box-sizing;margin:0;padding:0}` and
   `body` baseline, but only inside our widgets. No bare *, body, or html rules. */
.oiw-scope *,
.oiw-scope *::before,
.oiw-scope *::after {
	box-sizing: border-box;
}
.oiw-scope h1,
.oiw-scope h2,
.oiw-scope h3,
.oiw-scope h4,
.oiw-scope h5,
.oiw-scope h6,
.oiw-scope p,
.oiw-scope figure,
.oiw-scope blockquote {
	margin: 0;
}
.oiw-scope ul,
.oiw-scope ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── Shared scroll-reveal engine ─────────────────────────────
   The hidden pre-reveal state is gated behind html.oiw-anim, which is added
   synchronously ONLY on the real frontend. So in the Elementor editor (no gate)
   and when JS fails (footer failsafe strips the gate) content is always visible.
   Values match the source shared kit (translateY 24px, 0.7s ease). */
/* Hidden pre-reveal state — frontend only (html.oiw-anim). Two selectors so it
   works whether `.reveal` sits ON the widget root (which IS `.oiw-scope`, e.g.
   prose/hlquote) or on a descendant (e.g. cards, heads, quote-inner). */
html.oiw-anim .oiw-scope.reveal,
html.oiw-anim .oiw-scope .reveal {
	opacity: 0;
	transform: translateY(24px);
}
/* Revealed state. MUST also be gated on html.oiw-anim so it outranks the hidden
   rule above — otherwise `.reveal.in` loses the cascade to the (0,3,1)/(0,4,1)
   hidden rule and `.in` never actually reveals anything on the frontend. Each
   `.in` variant carries one extra class over its hidden counterpart, so it wins. */
html.oiw-anim .oiw-scope.reveal.in,
html.oiw-anim .oiw-scope .reveal.in {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
	.oiw-scope *,
	.oiw-scope *::before,
	.oiw-scope *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}

/* ── Shared full-bleed helper (full-width bands: hero, pull-quote, footer) ──
   Frontend-only (html.oiw-anim, never in the editor, so it can't break
   Elementor's section hover/select). Scrollbar-safe: adds half the scrollbar
   width (--oiw-sbw, published by core.js) so the band spans the CLIENT width
   instead of 100vw — no horizontal scroll even when overflow-x:hidden is only
   on body. Any widget adds the `oiw-bleed` class to opt in. */
html.oiw-anim .oiw-scope.oiw-bleed {
	margin-left: calc(50% - 50vw + var(--oiw-sbw, 0px) / 2);
	margin-right: calc(50% - 50vw + var(--oiw-sbw, 0px) / 2);
}

/* ── Shared eyebrow + heading kit (used by the OIW_Shared_Controls trait) ──
   `.tk-tag` is byte-identical across every source page, so it lives here.
   `.oiw-h` / `.oiw-h em` / `.oiw-sub` carry only the values that are CONSISTENT
   across the tk-shead / tk-dual-head / tk-who-head variants; the per-variant
   font-size / line-height is set in each widget's own CSS (built in P2). */
.oiw-scope .tk-tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(0, 29, 58, 0.4);
	margin-bottom: 16px;
}
.oiw-scope .tk-tag span {
	display: inline-block;
	width: 24px;
	height: 1px;
	background: rgba(0, 29, 58, 0.25);
}
.oiw-scope .oiw-h {
	font-family: "OrpheusPro Regular", 'orpheus pro', orpheus, Georgia, serif;
	font-weight: 600;
	color: var(--ink);
}
.oiw-scope .oiw-h em {
	font-style: italic;
	font-weight: 400;
	color: var(--navy);
}
/* The rule renders inline-block so it follows the heading's text-align (left in
   tk-shead, centered when a shead is centered). */
.oiw-scope .oiw-head-rule {
	display: inline-block;
	width: 40px;
	height: 2px;
	background: rgba(0, 29, 58, 0.15);
}
/* Subtext only ever appears in the centered dual/who variants → always centered. */
.oiw-scope .oiw-sub {
	font-size: 16px;
	line-height: 26px;
	color: #001D3A;
	opacity: 0.55;
	max-width: 600px;
	margin: 0 auto;
}