/* =========================================================
   THE ORTHODONTIST — V2 DESIGN SYSTEM

   Scope:
   Applies only to pages carrying the body class:
   .ortho-v2

   Brand typography:
   - Bunya = logo / wordmark
   - LemonMilk = "Our Mission Is Simply Smiles"
   - DynaPuff = approved "Simply Smiles" brand treatments
   - Inter = primary website typography

   Primary brand colors:
   - Blue   #00a2ff
   - Orange #e67c3b
   ========================================================= */

/* =========================================================
   V2 DESIGN TOKENS
   ========================================================= */

.ortho-v2 {
	/* Typography */
	--v2-font-body:
		Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", sans-serif;

	/* Core brand */
	--v2-blue: #00a2ff;
	--v2-orange: #e67c3b;

	/* Derived blue palette */
	--v2-blue-dark: #086899;
	--v2-blue-deep: #064c73;
	--v2-blue-soft: #eef9fe;
	--v2-blue-soft-strong: #dff3fc;

	/* Derived orange palette */
	--v2-orange-dark: #bd5d25;
	--v2-orange-soft: #fff3ec;

	/* Text */
	--v2-ink: #0c1723;
	--v2-ink-soft: #384858;
	--v2-muted: #627180;

	/* Surfaces */
	--v2-white: #ffffff;
	--v2-surface: #ffffff;
	--v2-surface-soft: #f6f9fb;
	--v2-surface-blue: #f1f9fd;

	/* Borders */
	--v2-border: #dce6ec;
	--v2-border-soft: #e9eff3;

	/* Type scale */
	--v2-text-xs: 0.75rem;
	--v2-text-sm: 0.875rem;
	--v2-text-base: 1rem;
	--v2-text-lg: 1.125rem;
	--v2-text-xl: 1.25rem;

	--v2-heading-sm: clamp(1.4rem, 2vw, 1.75rem);
	--v2-heading-md: clamp(2rem, 3vw, 2.75rem);
	--v2-heading-lg: clamp(2.75rem, 5vw, 4.5rem);
	--v2-heading-xl: clamp(3.25rem, 6vw, 5.4rem);

	--v2-leading-body: 1.7;
	--v2-leading-heading: 1.05;

	--v2-tracking-heading: -0.035em;
	--v2-tracking-eyebrow: 0.14em;

	/* Layout */
	--v2-container: 76rem;
	--v2-container-wide: 88rem;
	--v2-container-narrow: 62rem;

	/* Spacing */
	--v2-space-1: 0.25rem;
	--v2-space-2: 0.5rem;
	--v2-space-3: 0.75rem;
	--v2-space-4: 1rem;
	--v2-space-5: 1.5rem;
	--v2-space-6: 2rem;
	--v2-space-7: 3rem;
	--v2-space-8: 4rem;
	--v2-space-9: 6rem;
	--v2-space-10: 8rem;

	/* Shape */
	--v2-radius-sm: 0.75rem;
	--v2-radius-md: 1.15rem;
	--v2-radius-lg: 1.75rem;
	--v2-radius-xl: 2.25rem;
	--v2-radius-pill: 999px;

	/* Shadows */
	--v2-shadow-sm: 0 6px 20px rgb(12 23 35 / 0.06);
	--v2-shadow-card: 0 16px 42px rgb(12 23 35 / 0.08);
	--v2-shadow-raised: 0 22px 60px rgb(12 23 35 / 0.12);

	font-family: var(--v2-font-body);
	color: var(--v2-ink);
	background: var(--v2-surface-soft);
}

/* =========================================================
   CONTAINERS
   ========================================================= */

.ortho-v2 .site-main {
	background: var(--v2-surface-soft);
}

.ortho-v2 .v2-container,
.ortho-v2 .v2-container-wide,
.ortho-v2 .v2-container-narrow {
	width: min(100% - 2rem, var(--v2-container));
	margin-inline: auto;
}

.ortho-v2 .v2-container-wide {
	width: min(100% - 2rem, var(--v2-container-wide));
}

.ortho-v2 .v2-container-narrow {
	width: min(100% - 2rem, var(--v2-container-narrow));
}

@media (min-width: 768px) {
	.ortho-v2 .v2-container,
	.ortho-v2 .v2-container-wide,
	.ortho-v2 .v2-container-narrow {
		width: min(100% - 4rem, var(--v2-container));
	}

	.ortho-v2 .v2-container-wide {
		width: min(100% - 4rem, var(--v2-container-wide));
	}

	.ortho-v2 .v2-container-narrow {
		width: min(100% - 4rem, var(--v2-container-narrow));
	}
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.ortho-v2 .v2-display,
.ortho-v2 .v2-h1,
.ortho-v2 .v2-h2,
.ortho-v2 .v2-h3 {
	margin: 0;
	color: var(--v2-ink);
	font-family: var(--v2-font-body);
	letter-spacing: var(--v2-tracking-heading);
}

.ortho-v2 .v2-display {
	font-size: var(--v2-heading-xl);
	font-weight: 800;
	line-height: 0.98;
}

.ortho-v2 .v2-h1 {
	font-size: var(--v2-heading-lg);
	font-weight: 800;
	line-height: 1;
}

.ortho-v2 .v2-h2 {
	font-size: var(--v2-heading-md);
	font-weight: 800;
	line-height: 1.08;
}

.ortho-v2 .v2-h3 {
	font-size: var(--v2-heading-sm);
	font-weight: 750;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.ortho-v2 .v2-body,
.ortho-v2 .v2-body-lg,
.ortho-v2 .v2-body-sm {
	margin: 0;
	color: var(--v2-muted);
}

.ortho-v2 .v2-body {
	font-size: var(--v2-text-base);
	line-height: var(--v2-leading-body);
}

.ortho-v2 .v2-body-lg {
	font-size: var(--v2-text-lg);
	line-height: var(--v2-leading-body);
}

.ortho-v2 .v2-body-sm {
	font-size: var(--v2-text-sm);
	line-height: 1.65;
}

.ortho-v2 .v2-eyebrow {
	margin: 0 0 var(--v2-space-4);
	color: var(--v2-blue-dark);
	font-size: var(--v2-text-xs);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: var(--v2-tracking-eyebrow);
	text-transform: uppercase;
}

.ortho-v2 .v2-text-accent {
	color: var(--v2-blue-dark);
}

.ortho-v2 .v2-text-orange {
	color: var(--v2-orange);
}

/* =========================================================
   SPECIAL BRAND TYPOGRAPHY
   ========================================================= */

/*
 * These classes do not replace the existing wordmark styling.
 * Bunya remains controlled by the existing header/footer brand styles.
 */

.ortho-v2 .v2-mission-phrase {
	font-family: "LemonMilk", var(--v2-font-body);
	font-weight: 400;
	letter-spacing: 0.02em;
}

.ortho-v2 .v2-simply-smiles {
	font-family: "LemonMilk", var(--v2-font-body);
	font-weight: 400;
}

/* =========================================================
   SECTIONS
   ========================================================= */

.ortho-v2 .v2-section {
	padding-block: clamp(4rem, 8vw, 7rem);
}

.ortho-v2 .v2-section--compact {
	padding-block: clamp(3rem, 6vw, 5rem);
}

.ortho-v2 .v2-section--large {
	padding-block: clamp(5rem, 10vw, 8rem);
}

.ortho-v2 .v2-section--white {
	background: var(--v2-white);
}

.ortho-v2 .v2-section--soft {
	background: var(--v2-surface-soft);
}

.ortho-v2 .v2-section--blue-soft {
	background: var(--v2-surface-blue);
}

/* =========================================================
   SECTION INTRO
   ========================================================= */

.ortho-v2 .v2-section-intro {
	max-width: 48rem;
}

.ortho-v2 .v2-section-intro--center {
	margin-inline: auto;
	text-align: center;
}

.ortho-v2 .v2-section-intro .v2-body-lg {
	margin-top: var(--v2-space-5);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.ortho-v2 .v2-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--v2-space-2);

	min-height: 2.75rem;

	border: 1px solid transparent;
	border-radius: var(--v2-radius-pill);

	padding: 0.75rem 1.15rem;

	font-family: var(--v2-font-body);
	font-size: var(--v2-text-sm);
	font-weight: 750;
	line-height: 1;

	text-decoration: none;

	cursor: pointer;

	transition:
		transform 160ms ease,
		box-shadow 160ms ease,
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease;
}

.ortho-v2 .v2-button:hover {
	transform: translateY(-1px);
}

.ortho-v2 .v2-button:focus-visible {
	outline: 3px solid rgb(0 162 255 / 0.25);
	outline-offset: 3px;
}

.ortho-v2 .v2-button--primary {
	background: var(--v2-blue);
	border-color: var(--v2-blue);
	color: var(--v2-white);
	box-shadow: 0 8px 20px rgb(0 162 255 / 0.2);
}

.ortho-v2 .v2-button--primary:hover {
	background: var(--v2-blue-dark);
	border-color: var(--v2-blue-dark);
	box-shadow: 0 10px 26px rgb(8 104 153 / 0.22);
}

.ortho-v2 .v2-button--secondary {
	background: var(--v2-white);
	border-color: var(--v2-border);
	color: var(--v2-ink);
}

.ortho-v2 .v2-button--secondary:hover {
	border-color: var(--v2-blue);
	color: var(--v2-blue-dark);
}

.ortho-v2 .v2-button--outline {
	background: transparent;
	border-color: var(--v2-blue);
	color: var(--v2-blue-dark);
}

.ortho-v2 .v2-button--outline:hover {
	background: var(--v2-blue-soft);
}

/* =========================================================
   BUTTON GROUPS
   ========================================================= */

.ortho-v2 .v2-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--v2-space-3);
}

/* =========================================================
   SURFACES
   ========================================================= */

.ortho-v2 .v2-card {
	background: var(--v2-surface);
	border: 1px solid var(--v2-border-soft);
	border-radius: var(--v2-radius-md);
	box-shadow: var(--v2-shadow-sm);
}

.ortho-v2 .v2-card--raised {
	box-shadow: var(--v2-shadow-card);
}

.ortho-v2 .v2-panel {
	background: var(--v2-surface);
	border-radius: var(--v2-radius-lg);
}

.ortho-v2 .v2-panel--soft {
	background: var(--v2-surface-soft);
}

/* =========================================================
   LINKS
   ========================================================= */

.ortho-v2 .v2-link {
	color: var(--v2-blue-dark);
	font-weight: 700;
	text-decoration: none;
}

.ortho-v2 .v2-link:hover {
	text-decoration: underline;
}

/* =========================================================
   MEDIA
   ========================================================= */

.ortho-v2 .v2-media {
	display: block;
	width: 100%;
	height: auto;
}

.ortho-v2 .v2-media--rounded {
	border-radius: var(--v2-radius-md);
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.ortho-v2 .v2-button {
		transition: none;
	}

	.ortho-v2 .v2-button:hover {
		transform: none;
	}
}