/* ==========================================================================
   SmileBright — base: semantic theme tokens (light + dark), Elementor global
   colour mapping, typography helpers, utilities and motion.

   Theme selection: <html data-theme="light|dark"> is set before first paint
   by an inline script (see inc/theme.php). Without JavaScript the OS
   preference applies through the prefers-color-scheme fallback below.
   ========================================================================== */

/* ---------- Light (default) ---------- */
html {
	color-scheme: light;
}

body {
	--sb-page: #f7f5f1;
	--sb-surface: #fff;
	--sb-surface-2: #eef1f5;
	--sb-text: #1f2430;
	--sb-text-2: #5a6172;
	--sb-heading: #262d3f;
	--sb-brand: #3b455e;
	--sb-accent: #cf9549;
	--sb-accent-text: #9a6628;
	--sb-border: #e3e0da;
	--sb-border-strong: #c9ccd4;
	--sb-btn-bg: #3b455e;
	--sb-btn-fg: #fff;
	--sb-btn-hover: #262d3f;
	--sb-band: #3b455e;
	--sb-deep: #262d3f;
	--sb-on-deep: #fff;
	--sb-on-deep-2: #cfd5e1;
	--sb-todo-bg: #fff8ec;
	--sb-todo-fg: #7a4f1c;
	--sb-error: #a3341f;
	--sb-error-bg: #fbeeeb;
	--sb-ok: #1d5130;
	--sb-ok-bg: #ecf6ef;
	--sb-shadow: 0 1px 2px rgb(31 36 48 / 5%), 0 12px 32px rgb(31 36 48 / 8%);
	--sb-shadow-hover: 0 2px 4px rgb(31 36 48 / 6%), 0 18px 40px rgb(31 36 48 / 12%);

	--sb-radius: 10px;
	--sb-radius-lg: 20px;
	--sb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--sb-focus: 0 0 0 3px var(--sb-page), 0 0 0 5px var(--sb-brand);

	background: var(--sb-page);
	color: var(--sb-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ---------- Dark ---------- */
html[data-theme="dark"] {
	color-scheme: dark;
}

html[data-theme="dark"] body {
	--sb-page: #141b28;
	--sb-surface: #1d2737;
	--sb-surface-2: #263246;
	--sb-text: #f7f5f1;
	--sb-text-2: #bec7d4;
	--sb-heading: #f7f5f1;
	--sb-brand: #b9c8e4;
	--sb-accent: #e0ae6b;
	--sb-accent-text: #e0ae6b;
	--sb-border: #39465b;
	--sb-border-strong: #56647c;
	--sb-btn-bg: #e0ae6b;
	--sb-btn-fg: #141b28;
	--sb-btn-hover: #ebc28c;
	--sb-band: #263246;
	--sb-deep: #0e141f;
	--sb-on-deep: #f7f5f1;
	--sb-on-deep-2: #bec7d4;
	--sb-todo-bg: #3a2c18;
	--sb-todo-fg: #f0c98f;
	--sb-error: #ff9c87;
	--sb-error-bg: #3b1f1b;
	--sb-ok: #9be0b0;
	--sb-ok-bg: #18301f;
	--sb-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px rgb(0 0 0 / 30%);
	--sb-shadow-hover: 0 2px 4px rgb(0 0 0 / 35%), 0 18px 40px rgb(0 0 0 / 40%);
}

/* No-JS fallback: follow the OS preference. */
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) {
		color-scheme: dark;
	}

	html:not([data-theme]) body {
		--sb-page: #141b28;
		--sb-surface: #1d2737;
		--sb-surface-2: #263246;
		--sb-text: #f7f5f1;
		--sb-text-2: #bec7d4;
		--sb-heading: #f7f5f1;
		--sb-brand: #b9c8e4;
		--sb-accent: #e0ae6b;
		--sb-accent-text: #e0ae6b;
		--sb-border: #39465b;
		--sb-border-strong: #56647c;
		--sb-btn-bg: #e0ae6b;
		--sb-btn-fg: #141b28;
		--sb-btn-hover: #ebc28c;
		--sb-band: #263246;
		--sb-deep: #0e141f;
		--sb-on-deep-2: #bec7d4;
		--sb-todo-bg: #3a2c18;
		--sb-todo-fg: #f0c98f;
	}
}

/*
 * Map Elementor's global colours (Site Settings → Global Colors) onto the
 * theme tokens, so every Elementor element that uses a global switches theme.
 * Elementor declares these on .elementor-kit-N; body[class*=…] outranks it.
 */
body[class*="elementor-kit-"] {
	--e-global-color-primary: var(--sb-brand);
	--e-global-color-text: var(--sb-text);
	--e-global-color-accent: var(--sb-accent);
	--e-global-color-sbheading: var(--sb-heading);
	--e-global-color-sbgoldtext: var(--sb-accent-text);
	--e-global-color-sbsurface: var(--sb-page);
	--e-global-color-sbwhite: var(--sb-surface);
	--e-global-color-sbsurfacecool: var(--sb-surface-2);
	--e-global-color-sbmuted: var(--sb-text-2);
	--e-global-color-sbborder: var(--sb-border);
	--e-global-color-sbnavydark: var(--sb-deep);
	--e-global-color-sbband: var(--sb-band);
	--e-global-color-sbbtnbg: var(--sb-btn-bg);
	--e-global-color-sbbtnfg: var(--sb-btn-fg);
	--e-global-color-sbbtnhover: var(--sb-btn-hover);
}

/* Brief, colour-only theme transition. */
body.sb-theme-anim,
body.sb-theme-anim * {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; /* temporary, only during a theme switch */
}

/* Accessible focus ring everywhere. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
	outline: none;
	box-shadow: var(--sb-focus);
	border-radius: 6px;
}

.screen-reader-text {
	position: absolute !important; /* WordPress core convention */
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 16px;
	background: var(--sb-surface);
	color: var(--sb-brand);
	font-weight: 600;
}

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

.elementor-widget-text-editor p:last-child,
.elementor-widget-text-editor ul:last-child,
.elementor-widget-text-editor ol:last-child {
	margin-bottom: 0;
}

body a {
	color: var(--sb-brand);
}

/* ---------- Typography helpers ---------- */

.sb-eyebrow .elementor-heading-title,
p.sb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--sb-accent-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Decorative rule before eyebrows. */
.sb-eyebrow .elementor-heading-title::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--sb-accent);
}

.sb-lead p,
.sb-lead {
	color: var(--sb-text-2);
	font-size: clamp(17px, 0.6vw + 14px, 20px);
	line-height: 1.7;
	max-width: 62ch;
}

.sb-section-head--center .sb-lead p,
.sb-section-head--center .elementor-heading-title {
	margin-inline: auto;
}

.sb-section-head--center .sb-eyebrow .elementor-heading-title {
	justify-content: center;
}

.sb-prose {
	max-width: 68ch;
	line-height: 1.75;
}

.sb-prose h2 {
	margin: 1.6em 0 0.5em;
	font-size: clamp(24px, 1.2vw + 18px, 30px);
}

.sb-prose h3 {
	margin: 1.4em 0 0.4em;
}

.sb-prose h2:first-child,
.sb-prose h3:first-child {
	margin-top: 0;
}

.sb-center {
	text-align: center;
}

.sb-narrow {
	max-width: 780px;
	margin-inline: auto;
}

.sb-align-end {
	align-items: flex-end;
}

@media (max-width: 1024px) {
	.sb-align-end {
		align-items: flex-start;
	}
}

/* ---------- Lists ---------- */

.sb-checklist {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	display: grid;
	gap: 10px;
}

.sb-checklist li {
	position: relative;
	padding-left: 34px;
}

.sb-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sb-surface-2);
	border: 1px solid var(--sb-border);
}

.sb-checklist li::after {
	content: "";
	position: absolute;
	left: 8px;
	top: calc(0.25em + 5px);
	width: 6px;
	height: 10px;
	border-right: 2px solid var(--sb-accent-text);
	border-bottom: 2px solid var(--sb-accent-text);
	transform: rotate(45deg);
}

.sb-credentials {
	list-style: none;
	margin: 0;
	padding: 0 0 0 20px;
	display: grid;
	gap: 12px;
	border-left: 2px solid var(--sb-accent);
}

ul.sb-link-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 28px;
}

ul.sb-link-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid var(--sb-border);
	color: var(--sb-heading);
	font-weight: 600;
	text-decoration: none;
}

ul.sb-link-list a::after {
	content: "→";
	color: var(--sb-accent-text);
	transition: transform 0.18s var(--sb-ease);
}

ul.sb-link-list a:hover::after {
	transform: translateX(3px);
}

@media (max-width: 600px) {
	ul.sb-link-list {
		grid-template-columns: 1fr;
	}
}

.sb-steps {
	margin: 0;
	padding-left: 1.2em;
	display: grid;
	gap: 10px;
}

body a.sb-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sb-brand);
	font-weight: 700;
	text-decoration: none;
}

body a.sb-link-arrow::after {
	content: "→";
	transition: transform 0.18s var(--sb-ease);
}

body a.sb-link-arrow:hover::after {
	transform: translateX(3px);
}

/* ---------- Content-required marker (kept visible, never decorated as real content) ---------- */

.sb-todo {
	display: inline-block;
	padding: 2px 8px;
	border: 1px dashed var(--sb-todo-fg);
	border-radius: 4px;
	background: var(--sb-todo-bg);
	color: var(--sb-todo-fg);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}

/* ---------- Motion ---------- */

.sb-js .sb-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s var(--sb-ease), transform 0.5s var(--sb-ease);
	transition-delay: var(--sb-delay, 0ms);
}

.sb-js .sb-reveal.is-visible,
.sb-js.sb-reveal-fallback:not(.sb-ready) .sb-reveal,
.elementor-editor-active .sb-reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important; /* user preference wins */
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.sb-js .sb-reveal {
		opacity: 1;
		transform: none;
	}
}