/* ==========================================================================
   Elite Dental Clinic — main.css
   Fonts, design tokens, base elements, layout primitives, motion.
   Mobile-first. Breakpoint overrides live in responsive.css.
   Token rationale: docs/design-system.md
   ========================================================================== */

/* Fonts (SIL OFL 1.1, self-hosted — see assets/fonts/OFL-*.txt) ----------- */

@font-face {
	font-family: "Fahkwang";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/wp-content/themes/elite-dental-clinic/assets/fonts/fahkwang-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Fahkwang";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/wp-content/themes/elite-dental-clinic/assets/fonts/fahkwang-500-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Zalando Sans";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("/wp-content/themes/elite-dental-clinic/assets/fonts/zalando-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Zalando Sans";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("/wp-content/themes/elite-dental-clinic/assets/fonts/zalando-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tokens ------------------------------------------------------------------ */

:root {
	/* Colour — semantic tokens (docs/palette-system.md).
	   Base tokens hold one value per palette: Ivory Marble (the default) here, all 44 in inc/palette-registry.php.
	   A Customizer choice overrides them with one inline :root block; the EDS Demo Palette Switcher re-points
	   them on <html> for a visitor. Keep these equal to the registry's ivory-marble entry. */
	--edc-bg: #f8f6f1;           /* page background; text on dark and accent fills */
	--edc-surface: #fcfbf8;      /* cards, form fields, raised panels */
	--edc-surface-alt: #d8d2c8;  /* soft sections, chips, image frames */
	--edc-text: #121212;         /* body text and headings */
	--edc-muted: #6e6d6b;        /* meta and secondary labels */
	--edc-accent: #736e68;       /* brand accent: hovers, selection, errors, rules, focus */
	--edc-dark: #2c2b2a;         /* dark sections: heroes, technology, footer, menu */
	--edc-dark-soft: #484643;    /* image frames on dark sections */
	--edc-dark-line: #5d5b56;    /* hairlines on dark sections */
	--edc-glow: #7c7872;         /* the footer glow */

	/* Derived roles: they follow the base tokens and are never set per palette. */
	--edc-text-soft: color-mix(in srgb, var(--edc-text) 78%, transparent);
	--edc-border: color-mix(in srgb, var(--edc-text) 14%, transparent);
	--edc-border-strong: color-mix(in srgb, var(--edc-text) 60%, transparent);
	--edc-frame: color-mix(in srgb, var(--edc-text) 6%, transparent);
	--edc-on-accent: var(--edc-bg);
	--edc-on-dark: var(--edc-bg);
	--edc-on-dark-soft: color-mix(in srgb, var(--edc-on-dark) 78%, transparent);
	--edc-overlay: color-mix(in srgb, var(--edc-dark) 80%, transparent);
	--edc-focus: var(--edc-accent);
	--edc-button-bg: var(--edc-text);
	--edc-button-text: var(--edc-bg);
	--edc-button-hover: var(--edc-accent);

	/* Typography */
	--font-display: "Fahkwang", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Zalando Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Stepped scale (phone values here; tablet/desktop steps in responsive.css),
	   matching the reference, which changes size per breakpoint rather than fluidly. */
	--text-display: 2rem;          /* 32 → 45 → 57 */
	--text-heading: 1.75rem;       /* 28 → 37 → 46 */
	--text-heading-sm: 1.5625rem;  /* 25 → 31 → 37 */
	--text-title: 1.25rem;         /* 20 → 22 → 23 */
	--text-feature: 1.0625rem;     /* 17 → 18 → 19 */
	--text-lede: 1.0625rem;        /* 17 → 19 */
	--text-body: 0.9375rem;        /* 15 */
	--text-small: 0.8125rem;       /* 13 */
	--text-eyebrow: 1.125rem;      /* 18 → 19 */
	--text-label: 0.9375rem;       /* 15, buttons + nav */
	--text-prose: 0.9375rem;       /* 15 → 21 at ≥1200: long-form detail pages */
	--text-reading: 1.125rem;      /* 18 → 19 → 21: articles, legal pages, contact details */

	--leading-tight: 1;
	--leading-snug: 1.1;
	--leading-body: 1.6;

	--tracking-display: -0.03em;
	--tracking-heading: -0.02em;
	--tracking-title: -0.04em;
	--tracking-body: -0.02em;
	--tracking-caps: 0.1em;

	/* Spacing (8-based, fluid at the large end) */
	--space-3xs: 0.25rem;                                 /* 4 */
	--space-2xs: 0.5rem;                                  /* 8 */
	--space-xs: 1rem;                                     /* 16 */
	--space-s: 1.5rem;                                    /* 24 */
	--space-m: 2rem;                                      /* 32 */
	--space-l: 3rem;                                      /* 48 */
	--space-xl: 4rem;                                     /* 64 */
	--space-2xl: clamp(4rem, 2.514rem + 6.095vw, 8rem);   /* 64 → 128 */
	--space-3xl: clamp(8rem, 5.029rem + 12.19vw, 16rem);  /* 128 → 256 */

	/* Layout */
	--container-max: 90rem;     /* 1440 */
	--content-max: 42.5rem;     /* 680 reading column */
	--gutter: 1rem;             /* page side gutter, constant at every width */
	--grid-columns: 12;
	--grid-gap: 0.5rem;
	--card-gap: 0.5rem;
	--section-space: var(--space-xl);
	--section-space-lg: var(--space-xl);  /* 64 → 128 from tablet */
	--header-height: 4rem;

	/* Shape */
	--radius-none: 0;
	--radius-image: 0;
	--radius-button: 0;
	--radius-control: 0;
	--radius-chip: 2px;
	--radius-round: 999px;
	--border-width: 1px;

	/* Motion */
	--duration-fast: 200ms;
	--duration-normal: 400ms;
	--duration-slow: 800ms;
	--duration-cinematic: 1200ms;
	--ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-standard: cubic-bezier(0.44, 0, 0.56, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--stagger: 50ms;
	--reveal-distance: 2rem;
}

/* Base -------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-height) + var(--space-xs));
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
	margin: 0;
	background: var(--edc-bg);
	color: var(--edc-text);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	letter-spacing: var(--tracking-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-heading);
	text-wrap: balance;
}

p,
ul,
ol,
figure,
blockquote {
	margin: 0;
}

p {
	text-wrap: pretty;
}

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

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

button,
input,
select,
textarea {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--edc-focus);
	outline-offset: 3px;
}

::selection {
	background: var(--edc-accent);
	color: var(--edc-on-accent);
}

/* Type roles -------------------------------------------------------------- */

.display {
	font-size: var(--text-display);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-display);
}

.heading {
	font-size: var(--text-heading);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-heading);
}

.heading-sm {
	font-size: var(--text-heading-sm);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-display);
}

.title {
	font-size: var(--text-title);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-title);
}

.lede {
	font-size: var(--text-lede);
	line-height: var(--leading-body);
	color: var(--edc-text-soft);
}

.eyebrow {
	font-family: var(--font-display);
	font-size: var(--text-eyebrow);
	font-weight: 500;
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

/* Layout primitives ------------------------------------------------------- */

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

/* Short pages: main grows so the footer sits on the viewport floor. */
.site-main {
	flex: 1 0 auto;
}

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

/* Accessibility utilities ------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: fixed;
	top: var(--space-2xs);
	left: var(--space-2xs);
	z-index: 100;
	padding: var(--space-2xs) var(--space-xs);
	background: var(--edc-button-bg);
	color: var(--edc-button-text);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

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

/* Shared reveal primitives. main.js adds .is-revealed when an element enters the viewport (and a sweep
   after fast scrolling catches anything skipped). Nothing is hidden without JS (html.js) or when the
   visitor prefers reduced motion: content then renders in its final state.
   A  [data-reveal]               settle: fade and a small rise
      [data-reveal-image]         settle: the image eases from a slight zoom inside its frame
   B  [data-mask]                 vertical mask: the frame opens bottom to top, the image settles
   C  [data-mask="left|right"]    horizontal mask, opening from that side
   D  [data-lines]                H1 lines rise out of a mask (split by JS once fonts are ready)
   E  [data-words]                H2 words rise in turn (blurred only from 810px)
   F  [data-stagger]              direct children reveal in turn: settle, or their own mask; the delay
                                  comes from main.js (--reveal-delay), never from templates */

:root {
	--ease-mask: cubic-bezier(0.65, 0, 0.35, 1);
	--mask-duration: 1.4s;
	--reveal-scale: 1.06;
}

@media (max-width: 50.6rem) {
	:root {
		--mask-duration: 1s;
		--reveal-scale: 1.04;
	}
}

@keyframes edc-show {
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* A: settle */
	.js [data-reveal],
	.js [data-stagger] > :not([data-mask]) {
		opacity: 0;
		transform: translate3d(0, var(--reveal-distance), 0);
		transition:
			opacity var(--duration-slow) var(--ease-editorial) var(--reveal-delay, 0ms),
			transform var(--duration-slow) var(--ease-editorial) var(--reveal-delay, 0ms);
	}

	.js [data-reveal].is-revealed,
	.js [data-stagger] > .is-revealed:not([data-mask]) {
		opacity: 1;
		transform: none;
	}

	.js [data-reveal-image] img {
		transform: scale(var(--reveal-scale));
		transition: transform var(--duration-cinematic) var(--ease-editorial);
	}

	.js [data-reveal-image].is-revealed img {
		transform: none;
	}

	/* B and C: masks */
	.js [data-mask] {
		clip-path: inset(100% 0 0 0);
		transition: clip-path var(--mask-duration) var(--ease-mask) var(--reveal-delay, 0ms);
	}

	.js [data-mask="left"] {
		clip-path: inset(0 100% 0 0);
	}

	.js [data-mask="right"] {
		clip-path: inset(0 0 0 100%);
	}

	.js [data-mask].is-revealed {
		clip-path: inset(0);
	}

	.js [data-mask] img {
		transform: scale(var(--reveal-scale));
		transition: transform calc(var(--mask-duration) * 1.35) var(--ease-editorial) var(--reveal-delay, 0ms);
	}

	.js [data-mask].is-revealed img {
		transform: none;
	}

	/* D: lines. Until JS has split the heading it stays hidden; a delayed fallback shows it regardless. */
	.js [data-lines]:not(.is-split),
	.js [data-words]:not(.is-split) {
		opacity: 0;
		animation: edc-show 0s linear 2.5s forwards;
	}

	[data-lines] .line {
		display: block;
		overflow: hidden;
		padding-block: 0.08em 0.14em;
		margin-block: -0.08em -0.14em;
	}

	[data-lines] .line > span {
		display: block;
		transform: translate3d(0, 110%, 0);
		transition: transform 1.2s var(--ease-editorial);
		transition-delay: calc(var(--lines-delay, 0ms) + var(--l, 0) * 120ms);
	}

	[data-lines].is-revealed .line > span {
		transform: none;
	}

	/* Once settled, the lines dissolve back into normal text so it re-wraps on resize. */
	[data-lines].is-settled .line,
	[data-lines].is-settled .line > span {
		display: contents;
	}

	/* E: words */
	[data-words] .word {
		display: inline-block;
		opacity: 0;
		transform: translate3d(0, 10px, 0);
		transition:
			opacity var(--duration-normal) var(--ease-editorial),
			transform var(--duration-normal) var(--ease-editorial);
		transition-delay: calc(var(--words-delay, 0ms) + var(--w, 0) * var(--stagger));
	}

	[data-words].is-revealed .word {
		opacity: 1;
		transform: none;
	}
}

/* Blur is costly to paint; only larger screens get it. */
@media (prefers-reduced-motion: no-preference) and (min-width: 50.625rem) {
	[data-words] .word {
		filter: blur(10px);
		transition-property: opacity, transform, filter;
	}

	[data-words].is-revealed .word {
		filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}
}