/**
 * Dentalora Core: base styles shared by every widget.
 *
 * TABLE OF CONTENTS
 * 1. Fallback design tokens
 * 2. Widget wrapper and layout
 * 3. Heading block
 * 4. Buttons
 * 5. Cards, pills and small parts
 * 6. Form fields
 * 7. Utilities
 * 8. Responsive
 * 9. Reduced motion
 */

/* ==========================================================================
   1. Fallback design tokens
   Zero specificity: the Dentalora theme's own tokens always win.
   ========================================================================== */

:where(:root) {
	--dtl-bg: #f5f8fc;
	--dtl-bg-alt: #e9f0f9;
	--dtl-surface: #ffffff;
	--dtl-brand: #0f3a7a;
	--dtl-brand-hover: #1a4c97;
	--dtl-brand-deep: #0a2750;
	--dtl-on-brand: #ffffff;
	--dtl-accent: #ff7c88;
	--dtl-accent-hover: #ff9fa8;
	--dtl-accent-text: #b42a36;
	--dtl-on-accent: #2a0508;
	--dtl-focus: #b42a36;
	--dtl-text: #0e1b2e;
	--dtl-muted: #4d5b70;
	--dtl-subtle: #76849a;
	--dtl-border: #dde5ef;
	--dtl-border-strong: #c7d3e2;
	--dtl-shadow-sm: 0 2px 12px rgba(15, 58, 122, 0.07);
	--dtl-shadow-md: 0 8px 32px rgba(15, 58, 122, 0.11);
	--dtl-shadow-lg: 0 20px 56px rgba(15, 58, 122, 0.16);
	--dtl-font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--dtl-font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--dtl-container: 1340px;
	--dtl-container-wide: 1340px;
	--dtl-gutter: clamp(20px, 5vw, 64px);
	--dtl-section-y: clamp(64px, 9vw, 128px);
	--dtl-radius-card: 16px;
	--dtl-radius-btn: 12px;
	--dtl-radius-input: 12px;
	--dtl-btn-h: 46px;
	--dtl-h1-font: var(--dtl-font-heading);
	--dtl-h1-size: clamp(38px, 5vw, 66px);
	--dtl-h1-weight: 700;
	--dtl-h1-lh: 1.06;
	--dtl-h1-ls: -0.03em;
	--dtl-h2-font: var(--dtl-font-heading);
	--dtl-h2-size: clamp(28px, 3.4vw, 42px);
	--dtl-h2-weight: 700;
	--dtl-h2-lh: 1.14;
	--dtl-h2-ls: -0.022em;
	--dtl-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--dtl-shadow-ambient: 0 16px 36px -10px rgba(15, 25, 40, 0.06);
	--dtl-shadow-bloom: 0 26px 52px -14px rgba(15, 25, 40, 0.16);

	/* Colours that sit on dark sections in both light and dark mode. */
	--dtl-on-dark: #ffffff;
	--dtl-on-dark-muted: rgba(255, 255, 255, 0.72);
	--dtl-on-dark-faint: rgba(255, 255, 255, 0.18);
	--dtl-star: #e8a317;
	--dtl-ok: #2f7a4f;
	--dtl-error: #a3392b;
}

/* ==========================================================================
   2. Widget wrapper and layout
   ========================================================================== */

.dtl-w {
	position: relative;
	color: var(--dtl-w-text, var(--dtl-muted));
	font-family: var(--dtl-font-sans);
	font-size: 16px;
	line-height: 1.7;
}

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

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

.dtl-w__inner {
	width: 100%;
	max-width: var(--dtl-container);
	margin-inline: auto;
	padding-inline: var(--dtl-gutter);
}

.dtl-w__inner--wide {
	max-width: var(--dtl-container-wide);
}

.dtl-w__section {
	padding-block: var(--dtl-section-y);
}

/* ==========================================================================
   3. Heading block
   ========================================================================== */

.dtl-w__head {
	max-width: 760px;
	margin-bottom: clamp(32px, 4vw, 56px);
}

.dtl-w__eyebrow {
	display: block;
	margin: 0 0 12px;
	color: var(--dtl-w-eyebrow, var(--dtl-accent-text));
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

/* The theme indents description list answers; widgets lay them out themselves. */
:where(.dtl-w) dd {
	padding-inline-start: 0;
}

.dtl-w__title {
	margin: 0 0 20px;
	color: var(--dtl-w-title, var(--dtl-text));
	font-family: var(--dtl-h2-font);
	font-size: var(--dtl-h2-size);
	font-weight: var(--dtl-h2-weight);
	line-height: var(--dtl-h2-lh);
	letter-spacing: var(--dtl-h2-ls);
}

.dtl-w__title em {
	color: var(--dtl-w-accent, var(--dtl-accent-text));
	font-style: normal;
}

.dtl-w__text {
	margin: 0 0 1em;
	color: var(--dtl-w-text, var(--dtl-muted));
	font-size: clamp(15px, 1.5vw, 17px);
	line-height: 1.85;
}

.dtl-w__head .dtl-w__text:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   4. Buttons
   Zero specificity: the Dentalora theme's buttons win when it is active.
   ========================================================================== */

:where(.dtl-btn) {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--dtl-btn-h);
	padding: 0 28px;
	overflow: hidden;
	isolation: isolate;
	border: 1.5px solid transparent;
	border-radius: var(--dtl-radius-btn);
	font-family: var(--dtl-font-sans);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.22s var(--dtl-ease), border-color 0.22s var(--dtl-ease), color 0.22s var(--dtl-ease), transform 0.22s var(--dtl-ease), box-shadow 0.22s var(--dtl-ease);
}

:where(.dtl-btn:hover) {
	transform: translateY(-2px);
}

:where(.dtl-btn--sm) {
	height: 42px;
	padding: 0 22px;
	font-size: 12.5px;
}

:where(.dtl-btn--brand) {
	background: var(--dtl-brand);
	border-color: var(--dtl-brand);
	color: var(--dtl-on-brand);
}

:where(.dtl-btn--brand:hover) {
	background: var(--dtl-brand-hover);
	border-color: var(--dtl-brand-hover);
	box-shadow: var(--dtl-shadow-md);
}

:where(.dtl-btn--accent) {
	background: var(--dtl-accent);
	border-color: var(--dtl-accent);
	color: var(--dtl-on-accent);
}

:where(.dtl-btn--accent:hover) {
	background: var(--dtl-accent-hover);
	border-color: var(--dtl-accent-hover);
}

:where(.dtl-btn--outline) {
	background: transparent;
	border-color: var(--dtl-border-strong);
	color: var(--dtl-text);
}

:where(.dtl-btn--outline:hover) {
	border-color: var(--dtl-brand);
}

.dtl-btn--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--dtl-on-dark);
}

.dtl-btn--outline-light:hover {
	border-color: rgba(255, 255, 255, 0.8);
	background: rgba(255, 253, 249, 0.08);
}

.dtl-w__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.dtl-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--dtl-w-accent, var(--dtl-accent-text));
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: gap 0.22s var(--dtl-ease);
}

.dtl-link-arrow:hover {
	gap: 12px;
}

/* ==========================================================================
   5. Cards, pills and small parts
   ========================================================================== */

.dtl-w__card {
	border: 1px solid var(--dtl-w-border, var(--dtl-border));
	border-radius: var(--dtl-radius-card);
	background: var(--dtl-w-card, var(--dtl-surface));
	box-shadow: var(--dtl-shadow-sm);
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.dtl-w__card:hover {
	box-shadow: var(--dtl-shadow-md);
}

.dtl-w__pill {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid color-mix(in srgb, var(--dtl-accent) 45%, var(--dtl-border));
	border-radius: 999px;
	color: var(--dtl-w-accent, var(--dtl-accent-text));
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: none;
}

.dtl-w__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--dtl-star);
}

.dtl-w__stars svg {
	width: 14px;
	height: 14px;
	fill: currentcolor;
}

.dtl-w__stars .is-empty {
	opacity: 0.25;
}

.dtl-w__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: color-mix(in srgb, var(--dtl-accent) 14%, transparent);
	color: var(--dtl-w-accent, var(--dtl-accent-text));
	font-size: 16px;
}

.dtl-w__icon svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
}

.dtl-w__media {
	overflow: hidden;
}

.dtl-w__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   6. Form fields
   ========================================================================== */

.dtl-w label {
	display: block;
	margin-bottom: 6px;
	color: var(--dtl-w-title, var(--dtl-text));
	font-size: 13px;
	font-weight: 600;
}

.dtl-w input[type="text"],
.dtl-w input[type="email"],
.dtl-w input[type="tel"],
.dtl-w input[type="number"],
.dtl-w input[type="search"],
.dtl-w select,
.dtl-w textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--dtl-border-strong);
	border-radius: var(--dtl-radius-input);
	background: var(--dtl-surface);
	color: var(--dtl-text);
	font: inherit;
	font-size: 15px;
	line-height: 1.4;
}

.dtl-w textarea {
	min-height: 140px;
	resize: vertical;
}

.dtl-w input:focus,
.dtl-w select:focus,
.dtl-w textarea:focus {
	border-color: var(--dtl-accent-text);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dtl-accent) 35%, transparent);
}

/* ==========================================================================
   7. Utilities
   ========================================================================== */

.dtl-w__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.dtl-w [hidden] {
	display: none !important;
}

/* ==========================================================================
   8. Responsive
   ========================================================================== */

@media (max-width: 640px) {
	.dtl-w__actions .dtl-btn {
		max-width: 100%;
	}
}

/* ==========================================================================
   9. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.dtl-w__card,
	.dtl-btn,
	.dtl-link-arrow {
		transition: none;
	}
}