/* ==========================================================================
   Emily H&B — Type ramp
   --------------------------------------------------------------------------
   One class per Figma text style, named after the style it implements. These
   are the only type declarations in the theme: block patterns (build step 5)
   apply a ramp class, they never set font-size/line-height/letter-spacing
   inline. That is what keeps the build tied to the design.

   Figma style            → class
   ---------------------------------------------------------------
   Display/D1 · Hero      → .ehb-d1
   Display/D2 · Section   → .ehb-d2
   Display/D3 · Block     → .ehb-d3
   Heading/H1 · Page      → .ehb-h1
   Heading/H2 · Article   → .ehb-h2
   Heading/H3 · Card      → .ehb-h3
   Heading/H4 · Small     → .ehb-h4
   Body/Large             → .ehb-body-lg
   Body/Base              → .ehb-body
   Body/Base Medium       → .ehb-body-medium
   Body/Small             → .ehb-body-sm
   Body/Caption           → .ehb-caption
   Body/Price             → .ehb-price
   Body/Price Compact     → .ehb-price-compact
   Label/Button           → .ehb-label-button
   Label/Button Compact   → .ehb-label-button-compact
   Label/Eyebrow          → .ehb-eyebrow
   Label/Badge            → .ehb-badge
   Label/Nav              → .ehb-nav
   ========================================================================== */

/* --- Display ------------------------------------------------------------ */

.ehb-d1 {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-black);
	font-size: var(--ehb-size-d1);
	line-height: var(--ehb-lh-d1);
	letter-spacing: var(--ehb-ls-d1);
	text-transform: uppercase;
}

.ehb-d2 {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-extrabold);
	font-size: var(--ehb-size-d2);
	line-height: var(--ehb-lh-d2);
	letter-spacing: var(--ehb-ls-d2);
	text-transform: uppercase;
}

.ehb-d3 {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: var(--ehb-size-d3);
	line-height: var(--ehb-lh-d3);
	letter-spacing: var(--ehb-ls-d3);
	text-transform: uppercase;
}

/* --- Headings -----------------------------------------------------------
   Note these are NOT uppercase — the Display steps are. A section heading
   set in Display/D2 and a page title set in Heading/H1 are different things
   in the design; do not substitute one for the other.                     */

.ehb-h1 {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: var(--ehb-size-h1);
	line-height: var(--ehb-lh-h1);
	letter-spacing: var(--ehb-ls-h1);
}

.ehb-h2 {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: var(--ehb-size-h2);
	line-height: var(--ehb-lh-h2);
	letter-spacing: var(--ehb-ls-h2);
}

.ehb-h3 {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: var(--ehb-size-h3);
	line-height: var(--ehb-lh-h3);
	letter-spacing: var(--ehb-ls-h3);
}

.ehb-h4 {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: var(--ehb-size-h4);
	line-height: var(--ehb-lh-h4);
	letter-spacing: var(--ehb-ls-h4);
}

/* --- Body ---------------------------------------------------------------- */

.ehb-body-lg {
	font-family: var(--ehb-font-body);
	font-weight: 400;
	font-size: var(--ehb-size-body-large);
	line-height: var(--ehb-lh-body-large);
}

.ehb-body {
	font-family: var(--ehb-font-body);
	font-weight: 400;
	font-size: var(--ehb-size-body-base);
	line-height: var(--ehb-lh-body-base);
}

.ehb-body-medium {
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-medium);
	font-size: var(--ehb-size-body-base);
	line-height: var(--ehb-lh-body-base);
}

.ehb-body-sm {
	font-family: var(--ehb-font-body);
	font-weight: 400;
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
}

.ehb-caption {
	font-family: var(--ehb-font-body);
	font-weight: 400;
	font-size: var(--ehb-size-body-caption);
	line-height: var(--ehb-lh-body-caption);
}

/* --- Price ---------------------------------------------------------------
   Tabular figures so a column of prices aligns on the decimal point.      */

.ehb-price,
.ehb-price-compact {
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-semibold);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

.ehb-price {
	font-size: var(--ehb-size-price);
	line-height: var(--ehb-lh-price);
}

.ehb-price-compact {
	font-size: var(--ehb-size-price-compact);
	line-height: var(--ehb-lh-price-compact);
}

/* --- Labels --------------------------------------------------------------
   All uppercase with positive tracking. The trailing letter of an uppercase
   tracked run carries dead space on its right; the negative margin cancels
   it so the label optically centres inside a button or badge.             */

.ehb-label-button,
.ehb-label-button-compact,
.ehb-eyebrow,
.ehb-badge {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	text-transform: uppercase;
}

.ehb-label-button {
	font-size: var(--ehb-size-label-button);
	line-height: var(--ehb-lh-label-button);
	letter-spacing: var(--ehb-ls-label-button);
	margin-inline-end: calc(var(--ehb-ls-label-button) * -1);
}

.ehb-label-button-compact {
	font-size: var(--ehb-size-label-button-compact);
	line-height: var(--ehb-lh-label-button-compact);
	letter-spacing: var(--ehb-ls-label-button-compact);
	margin-inline-end: calc(var(--ehb-ls-label-button-compact) * -1);
}

.ehb-eyebrow {
	font-size: var(--ehb-size-label-eyebrow);
	line-height: var(--ehb-lh-label-eyebrow);
	letter-spacing: var(--ehb-ls-label-eyebrow);
	margin-inline-end: calc(var(--ehb-ls-label-eyebrow) * -1);
}

.ehb-badge {
	font-size: var(--ehb-size-label-badge);
	line-height: var(--ehb-lh-label-badge);
	letter-spacing: var(--ehb-ls-label-badge);
	margin-inline-end: calc(var(--ehb-ls-label-badge) * -1);
}

.ehb-nav {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-medium);
	font-size: var(--ehb-size-label-nav);
	line-height: var(--ehb-lh-label-nav);
	letter-spacing: var(--ehb-ls-label-nav);
}

/* ==========================================================================
   Element defaults
   --------------------------------------------------------------------------
   Kadence sets base and h1–h6 typography from the Customizer, seeded in
   inc/class-emily-hb-typography.php. These rules cover the cases the
   Customizer cannot reach: content written by staff in the editor, and
   WooCommerce markup that ships its own font sizing.
   ========================================================================== */

body {
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-base);
	line-height: var(--ehb-lh-body-base);
	color: var(--ehb-text-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ehb-font-display);
	color: var(--ehb-text-ink);
}

h1 { font-weight: var(--ehb-weight-bold);     font-size: var(--ehb-size-h1); line-height: var(--ehb-lh-h1); letter-spacing: var(--ehb-ls-h1); }
h2 { font-weight: var(--ehb-weight-bold);     font-size: var(--ehb-size-h2); line-height: var(--ehb-lh-h2); letter-spacing: var(--ehb-ls-h2); }
h3 { font-weight: var(--ehb-weight-semibold); font-size: var(--ehb-size-h3); line-height: var(--ehb-lh-h3); letter-spacing: var(--ehb-ls-h3); }
h4 { font-weight: var(--ehb-weight-semibold); font-size: var(--ehb-size-h4); line-height: var(--ehb-lh-h4); letter-spacing: var(--ehb-ls-h4); }

/* H5/H6 have no Figma style. They exist only inside long-form Wellness Centre
   articles, so they step down from H4 rather than inventing a new size. */
h5 { font-weight: var(--ehb-weight-semibold); font-size: var(--ehb-size-body-base);  line-height: var(--ehb-lh-body-base); }
h6 { font-weight: var(--ehb-weight-semibold); font-size: var(--ehb-size-body-small); line-height: var(--ehb-lh-body-small); letter-spacing: var(--ehb-ls-label-nav); text-transform: uppercase; }

/*
 * Long-form body copy in the two Centres.
 *
 * DIRECT CHILDREN ONLY. As `.entry-content p` this matched every paragraph on
 * every page — including ones inside homepage sections, where it outranked the
 * single-class component rules and silently forced them all to 18px. Article
 * body copy is a direct child of .entry-content; section copy is nested inside
 * group blocks, so the child combinator separates the two cleanly.
 */
.entry-content > p {
	font-size: var(--ehb-size-body-large);
	line-height: var(--ehb-lh-body-large);
}