/* ==========================================================
   MEDICAL ONE | Base CSS — Utilities, Grid, Buttons, States
   Prefix: mo-
   ========================================================== */

/* --- 1. CSS CUSTOM PROPERTY ALIASES --- */
:root {
	/* Map theme.json tokens to shorter aliases */
	--mo-brand: var(--wp--preset--color--brand);
	--mo-brand-dark: var(--wp--preset--color--brand-dark);
	--mo-brand-glow: var(--wp--preset--color--brand-glow);
	--mo-brand-soft: var(--wp--preset--color--brand-soft);
	--mo-brand-light: rgba(255, 69, 58, 0.08);
	--mo-bg: var(--wp--preset--color--background);
	--mo-surface: var(--wp--preset--color--surface);
	--mo-surface-2: var(--wp--preset--color--surface-secondary);
	--mo-stroke: var(--wp--preset--color--stroke);
	--mo-text: var(--wp--preset--color--text-main);
	--mo-text-muted: var(--wp--preset--color--text-muted);
	--mo-text-light: var(--wp--preset--color--text-light);
	--mo-dark: var(--wp--preset--color--dark);
	--mo-success: var(--wp--preset--color--success);
	--mo-error: var(--wp--preset--color--error);

	/* Custom tokens */
	--mo-radius-sm: var(--wp--custom--radius--sm);
	--mo-radius-md: var(--wp--custom--radius--md);
	--mo-radius-lg: var(--wp--custom--radius--lg);
	--mo-radius-pill: var(--wp--custom--radius--pill);
	--mo-ease-spring: var(--wp--custom--ease--spring);
	--mo-ease-smooth: var(--wp--custom--ease--smooth);
	--mo-glass-bg: var(--wp--custom--glass--bg);
	--mo-glass-border: var(--wp--custom--glass--border);
	--mo-glass-blur: var(--wp--custom--glass--blur);
	--mo-gradient-brand: var(--wp--custom--gradient--brand);
	--mo-gradient-mesh: var(--wp--custom--gradient--mesh);

	/* Shadows */
	--mo-shadow-sm: var(--wp--preset--shadow--sm);
	--mo-shadow-md: var(--wp--preset--shadow--md);
	--mo-shadow-lg: var(--wp--preset--shadow--lg);
	--mo-shadow-brand: var(--wp--preset--shadow--brand);
	--mo-shadow-bento: var(--wp--preset--shadow--bento);

	/* Fonts */
	--mo-font-display: var(--wp--preset--font-family--outfit);
	--mo-font-body: var(--wp--preset--font-family--ibm-plex-sans);

	/* Layout */
	--mo-container: 1280px;
	--mo-safe-bottom: env(safe-area-inset-bottom, 24px);

	/* Spacing scale — single source of truth */
	--mo-space-section: clamp(32px, 4vw, 48px);
	--mo-space-section-sm: clamp(20px, 2.5vw, 32px);
	--mo-space-section-header: 24px;

	/* Focus ring */
	--mo-focus-ring: rgba(255, 69, 58, 0.3);
}

/* --- 2. RESET OVERRIDES --- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	scrollbar-width: thin;
	scrollbar-color: var(--mo-stroke) transparent;
}

/* Thin, styled scrollbar for WebKit */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--mo-stroke);
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--mo-text-muted);
}

body {
	margin: 0;
	padding: 0;
	font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

a {
	text-decoration: none;
	transition: color 0.2s;
}

/* Prevent FOUT animations firing on load */
.is-loading *,
.is-loading *::before,
.is-loading *::after {
	transition: none !important;
	animation: none !important;
}

/* --- 3. FOCUS STYLES --- */
:where(:focus-visible) {
	outline: none;
	box-shadow: 0 0 0 3px var(--mo-focus-ring);
	border-radius: 4px;
}

/* --- 4. SCREEN READER ONLY --- */
.mo-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- 5. LAYOUT UTILITIES --- */
.mo-container {
	width: 100%;
	max-width: var(--mo-container);
	margin: 0 auto;
	padding: 0 24px;
}

.mo-section {
	padding: var(--mo-space-section) 0;
}

.mo-section-sm {
	padding: var(--mo-space-section-sm) 0;
}

/* --- 6. GLASS MORPHISM --- */
.mo-glass {
	background: var(--mo-glass-bg);
	backdrop-filter: blur(var(--mo-glass-blur)) saturate(150%);
	-webkit-backdrop-filter: blur(var(--mo-glass-blur)) saturate(150%);
	border: 1px solid var(--mo-glass-border);
}

.mo-glass-card {
	background: var(--mo-surface);
	border: 1px solid var(--mo-glass-border);
	border-radius: var(--mo-radius-lg);
	box-shadow: var(--mo-shadow-bento);
}

/* --- 7. BENTO GRID --- */
.mo-bento-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.mo-bento-wide {
	grid-column: span 2;
}

@media (max-width: 768px) {
	.mo-bento-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.mo-bento-wide {
		grid-column: span 2;
	}
}

@media (max-width: 480px) {
	.mo-bento-grid {
		grid-template-columns: 1fr;
	}
	.mo-bento-wide {
		grid-column: span 1;
	}
}

/* --- 8. BUTTON SYSTEM --- */
.mo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--mo-radius-pill);
	font-family: var(--mo-font-display);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	border: none;
	background: transparent;
	transition: all 0.3s var(--mo-ease-spring);
	text-align: center;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
	line-height: 1.2;
}

.mo-btn:focus-visible {
	box-shadow: 0 0 0 4px var(--mo-surface), 0 0 0 8px var(--mo-brand);
}

.mo-btn-lg {
	padding: 18px 36px;
	font-size: 1.125rem;
}

.mo-btn-sm {
	padding: 12px 24px;
	font-size: 0.95rem;
}

/* Primary — gradient + brand shadow */
.mo-btn-primary {
	background: var(--mo-gradient-brand);
	color: #fff;
	box-shadow: 0 8px 24px rgba(255, 69, 58, 0.3);
}

.mo-btn-primary::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transform: skewX(-20deg);
	transition: 0.5s;
}

.mo-btn-primary:active {
	transform: scale(0.96);
}

@media (hover: hover) {
	.mo-btn-primary:hover {
		transform: translateY(-3px) scale(1.02);
		box-shadow: 0 16px 32px rgba(255, 69, 58, 0.4);
	}
	.mo-btn-primary:hover::after {
		left: 150%;
	}
}

/* Ghost — transparent, matching primary size, white bg on hover */
.mo-btn-ghost {
	color: var(--mo-text);
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid var(--mo-stroke);
}

.mo-btn-ghost::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
	transform: skewX(-20deg);
	transition: 0.5s;
}

@media (hover: hover) {
	.mo-btn-ghost:hover {
		background: #fff;
		border-color: var(--mo-stroke);
		transform: translateY(-3px) scale(1.02);
		box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
	}
	.mo-btn-ghost:hover::after {
		left: 150%;
	}
}

.mo-btn-ghost:active {
	transform: scale(0.96);
}

/* Outline — bordered */
.mo-btn-outline {
	border: 1px solid var(--mo-stroke);
	color: var(--mo-text);
	background: var(--mo-surface);
}

@media (hover: hover) {
	.mo-btn-outline:hover {
		border-color: var(--mo-brand);
		color: var(--mo-brand);
		transform: translateY(-2px);
	}
}

/* Glass button */
.mo-btn-glass {
	background: var(--mo-glass-bg);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	color: var(--mo-text);
	border: 1px solid var(--mo-glass-border);
	box-shadow: var(--mo-shadow-md);
}

@media (hover: hover) {
	.mo-btn-glass:hover {
		background: var(--mo-surface);
		color: var(--mo-brand);
		transform: translateY(-2px);
	}
}

/* White outline (for dark backgrounds) */
.mo-btn-outline-white {
	border: 2px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	background: transparent;
}

@media (hover: hover) {
	.mo-btn-outline-white:hover {
		border-color: #fff;
		background: #fff;
		color: var(--mo-text);
	}
}

/* Solid white (for gradient/dark backgrounds) */
.mo-btn-white {
	background: #fff;
	color: var(--mo-brand);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media (hover: hover) {
	.mo-btn-white:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	}
}

/* --- 8b. BUTTON UTILITIES --- */
.mo-btn-block {
	width: 100%;
	display: flex;
}

/* --- 9. TEXT UTILITIES --- */
.mo-text-gradient {
	background: var(--mo-gradient-brand);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.mo-eyebrow {
	display: inline-block;
	padding: 4px 12px;
	background: var(--mo-brand-soft);
	color: var(--mo-brand);
	font-family: var(--mo-font-display);
	font-weight: 700;
	font-size: 0.70rem;
	border-radius: var(--mo-radius-pill);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border: 1px solid rgba(255, 69, 58, 0.15);
}

/* --- 10. GSAP ANIMATION STATES --- */
.mo-gsap-fade-up {
	opacity: 0;
	transform: translateY(30px);
}

.mo-gsap-reveal {
	visibility: hidden;
}

/* Stagger grid children: hidden until GSAP reveals them */
[data-stagger-grid] > * {
	opacity: 0;
	transform: translateY(30px);
}

/* --- 11. AMBIENT GLOW --- */
.mo-ambient-glow {
	position: absolute;
	top: -10vh;
	right: -10vw;
	width: 80vw;
	height: 80vh;
	max-width: 1000px;
	background: var(--mo-gradient-mesh);
	opacity: 0.6;
	pointer-events: none;
	border-radius: 50%;
	filter: blur(80px);
	z-index: -1;
	transform: translateZ(0);
}

/* --- 12. PREFERS REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
	/* Kill CSS animations/transitions (GSAP handles its own) */
	*:not(.mo-gsap-fade-up):not(.mo-gsap-reveal),
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* GSAP-controlled elements: force visible in reduced-motion.
	   Full-motion GSAP never runs when this query matches. */
	.mo-gsap-fade-up,
	.mo-bento-grid > *,
	[data-stagger-grid] > * {
		opacity: 1 !important;
		transform: none !important;
		visibility: visible !important;
	}

	/* Keep header transitions functional */
	.mo-header {
		transition-duration: 0.15s !important;
	}
}

/* --- 12b. QA MOTION OVERRIDE ---
   ?motion=on adds .mo-force-motion to <html>, re-enabling
   animations even when OS has prefers-reduced-motion set. */
.mo-force-motion .mo-gsap-fade-up,
.mo-force-motion .mo-bento-grid > *,
.mo-force-motion [data-stagger-grid] > * {
	/* Restore initial hidden states so GSAP can animate them in */
	opacity: 0;
	transform: translateY(30px);
	visibility: hidden;
}

.mo-force-motion *,
.mo-force-motion *::before,
.mo-force-motion *::after {
	animation-duration: revert !important;
	animation-iteration-count: revert !important;
	transition-duration: revert !important;
	scroll-behavior: revert !important;
}

.mo-force-motion .mo-header {
	transition-duration: revert !important;
}

/* --- 13. SECTION HEADER --- */
.mo-section-header {
	margin-bottom: var(--mo-space-section-header);
}

.mo-section-title {
	font-family: var(--mo-font-display);
	font-weight: 700;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	color: var(--mo-text);
}

.mo-section-subtitle {
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	color: var(--mo-text-muted);
	max-width: 600px;
	line-height: 1.6;
}

/* --- 13b. HEADING FLUID SIZES --- */
h3, .mo-h3 {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}

h4, .mo-h4 {
	font-size: clamp(1.1rem, 1.5vw, 1.25rem);
}

/* --- 14. ICON UTILITIES --- */
.mo-icon-box {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--mo-bg);
	color: var(--mo-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.4s var(--mo-ease-spring);
}

/* --- 15. PULSE DOT --- */
.mo-pulse-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--mo-brand);
	position: relative;
	flex-shrink: 0;
}

.mo-pulse-dot::before {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--mo-brand);
	animation: mo-pulse-ring 2s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes mo-pulse-ring {
	0% { transform: scale(0.5); opacity: 1; }
	100% { transform: scale(1.5); opacity: 0; }
}

/* --- 16. MOBILE BODY PADDING --- */
body {
	padding-bottom: calc(90px + var(--mo-safe-bottom));
}

@media (min-width: 769px) {
	body {
		padding-bottom: 0;
	}
}

/* --- 17. SKIP LINK --- */
.mo-skip-link {
	position: fixed;
	top: -100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99999;
	background: var(--mo-brand);
	color: #fff;
	padding: 12px 24px;
	border-radius: var(--mo-radius-pill);
	font-family: var(--mo-font-display);
	font-weight: 600;
	font-size: 0.95rem;
	transition: top 0.2s;
}

.mo-skip-link:focus {
	top: 16px;
	outline: none;
	box-shadow: var(--mo-shadow-brand);
}