/* ==========================================================================
   03-typography.css — Sunrise Dermatology typography rules
   --------------------------------------------------------------------------
   Source of truth:
     • figma-style-guide.md §3 (Type scale — *annotation* values, not the
       stale Figma variable bindings — see §3 note).
     • Claude Design asset pack (Sunrise Dermatology Design System.zip)
       confirmed those same canonical values via colors_and_type.css.

   Family stack:
     • All tiers resolve to "Mona Sans". Uncode's Font Manager loads the
       regular-width static cuts (font-131137); functions.php enqueues the
       variable cut with wdth=75 from Google Fonts v2.
     • Display + Headline tiers are visually "Condensed" via
       `font-stretch: 75%` on the rule. The global rule under "Display &
       Headline stretch" below sets that on h1–h6 and .h1–.h6 so every
       heading the design system targets renders condensed. Body inherits
       the default 100% stretch and lands on Uncode's normal-width cut.
     • Legacy comments below still say "SemiCondensed" — that's now the
       informal name for "Mona Sans + font-stretch: 75%", not a separate
       family. The 6 self-hosted TTFs under /assets/fonts/ are no longer
       loaded; they remain on disk as a deletable artifact.

   Selector strategy mirrors the proven Goodman pattern:
     `h1.h1, h2.h1, h3.h1, h4.h1, h5.h1, h6.h1, .h1` — so any heading
     decorated with an Uncode visual class adopts the matching tier
     regardless of semantic level. `!important` is required to beat Uncode's
     inline theme-option CSS.
   ========================================================================== */

/* ───── Display & Headline stretch ─────────────────────────────────────────
   Every heading element + every Uncode .h1–.h6 class renders condensed
   (wdth=75). The variable-font face Google serves matches on the
   font-stretch descriptor, so no font-family override is needed.
   font-stretch inherits, so descendants of headings get it for free.
   ────────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-stretch: 75%;
}

/* ───── Display tier — Uncode "Custom Size" augmentation ─────────────────
   Uncode's Theme Options → Typography → Custom Heading Sizes feature
   auto-emits a global <style> block that gives each Custom Size its
   font-size and font-family, but omits line-height and letter-spacing.
   Sunrise has three Custom Sizes that cover Figma's display tiers:

     • Display 01 (96/96/-2 Mona Sans Medium)  → emits class .fontsize-331005
     • Display 02 (80/80/-1 Mona Sans Medium)  → emits class .fontsize-131905
     • Display 03 (50/60/0  Mona Sans)         → emits class .fontsize-193501

   Display 03 is a site-extension tier — there is no `Display/03` text
   style in the Figma file. Sized at 50/60 in Uncode Custom Sizes
   (Theme Options → Typography) to land between Display 02 (80/80) and
   Headline/01 (40/48) for hero-adjacent intro headings.

   These rules complete the Figma spec for any heading authored with
   `text_size="Display 01" | "Display 02" | "Display 03"` in WPBakery.
   The Goodman-pattern `.h1` / `.h2` blocks below cover Display 01 / 02
   for headings authored with `text_size="h1"` / `"h2"` instead — both
   paths produce visually identical output. Font-weight intentionally
   omitted here so the heading inherits its WPBakery weight control.

   Source: reports/figma-typography-map.md §6.
   ──────────────────────────────────────────────────────────────────────── */

.fontsize-331005 {
	line-height: 96px !important;
	letter-spacing: -2px !important;
}

.fontsize-131905 {
	line-height: 80px !important;
	letter-spacing: -1px !important;
}

.fontsize-193501 {
	line-height: 60px !important;
	letter-spacing: 0 !important;
}


/* ───── Display & Headline tiers (canonical annotation values) ─────────────
   Tier        | font     | size / lh / tracking | weight
   ──────────────────────────────────────────────────────
   Display 01  | display  | 96 / 96 / -2         | 500
   Display 02  | display  | 80 / 80 / -1         | 500
   Headline 01 | heading  | 40 / 48 / 0          | 400
   Headline 02 | heading  | 32 / 40 / 0          | 400
   Headline 03 | heading  | 28 / 36 / 0          | 400
   Headline 04 | heading  | 20 / 28 / 0          | 400          ─────────── */

/* Display 01 — Mona Sans SemiCondensed Medium 96 / 96 / -2 */
h1.h1, h2.h1, h3.h1, h4.h1, h5.h1, h6.h1, .h1 {
	font-family: var(--sd-font-display) !important;
	font-size: 96px !important;
	font-weight: 500 !important;
	line-height: 96px !important;
	letter-spacing: -2px !important;
}

/* Display 02 — Mona Sans SemiCondensed Medium 80 / 80 / -1 */
h1.h2, h2.h2, h3.h2, h4.h2, h5.h2, h6.h2, .h2 {
	font-family: var(--sd-font-display) !important;
	font-size: 80px !important;
	font-weight: 500 !important;
	line-height: 80px !important;
	letter-spacing: -1px !important;
}

/* Headline 01 — Mona Sans SemiCondensed Regular 40 / 48 / 0 */
h1.h3, h2.h3, h3.h3, h4.h3, h5.h3, h6.h3, .h3 {
	font-family: var(--sd-font-heading) !important;
	font-size: 40px !important;
	font-weight: 400 !important;
	line-height: 48px !important;
	letter-spacing: 0 !important;
}

/* Headline 02 — Mona Sans SemiCondensed Regular 32 / 40 / 0 */
h1.h4, h2.h4, h3.h4, h4.h4, h5.h4, h6.h4, .h4 {
	font-family: var(--sd-font-heading) !important;
	font-size: 32px !important;
	font-weight: 400 !important;
	line-height: 40px !important;
	letter-spacing: 0 !important;
}

/* Headline 03 — Mona Sans SemiCondensed Regular 28 / 36 / 0 */
h1.h5, h2.h5, h3.h5, h4.h5, h5.h5, h6.h5, .h5 {
	font-family: var(--sd-font-heading) !important;
	font-size: 28px !important;
	font-weight: 400 !important;
	line-height: 36px !important;
	letter-spacing: 0 !important;
}

/* Headline 04 — Mona Sans SemiCondensed Regular 20 / 28 / 0 */
h1.h6, h2.h6, h3.h6, h4.h6, h5.h6, h6.h6, .h6 {
	font-family: var(--sd-font-heading) !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 28px !important;
	letter-spacing: 0 !important;
}

/* ───── Paragraph tiers (canonical 3-tier system, regular-width Mona Sans) ─
   Note: kept .p4 alias for backwards compat with bold-body calls in legacy
   markup; it now mirrors .p2. ────────────────────────────────────────────── */

/* Paragraph 01 — Mona Sans Regular 16 / 24 / 0.5 (default body) */
.p1 {
	font-family: var(--sd-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.5px;
}
/* Paragraph 02 — Mona Sans SemiBold 16 / 24 / 0.5 (bold body) */
.p2 {
	font-family: var(--sd-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0.5px;
}
/* Paragraph 03 — Mona Sans Regular 14 / 20 / 1 (small / caption) */
.p3 {
	font-family: var(--sd-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 1px;
}
/* Paragraph 04 — alias of .p2 (bold body). Kept for legacy markup. */
.p4 {
	font-family: var(--sd-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0.5px;
}

.text-lead,
.text-lead:not(ul):not(ol) > * {
	line-height: 1.50;
}

/* ───── Responsive scale-down
        figma-style-guide §10 flags responsive variants as a known gap;
        breakpoints below are carried from Goodman as a starting point and
        should be confirmed against Sunrise Figma during Phase 3.2. ──────── */

@media (max-width: 959px) {
	/* Uncode fluid font-size + fixed lh — scale lh with computed size */
	.fontsize-193501 {
		line-height: 1.2 !important;
	}
	.fontsize-131905 {
		line-height: 1.15 !important;
	}

	h1.h1, h2.h1, h3.h1, h4.h1, h5.h1, h6.h1, .h1 {
		font-size: 56px !important;
		line-height: 60px !important;
		letter-spacing: -1px !important;
	}
	h1.h2, h2.h2, h3.h2, h4.h2, h5.h2, h6.h2, .h2 {
		font-size: 48px !important;
		line-height: 52px !important;
		letter-spacing: -0.5px !important;
	}
	h1.h3, h2.h3, h3.h3, h4.h3, h5.h3, h6.h3, .h3 {
		font-size: 36px !important;
		line-height: 44px !important;
	}
	h1.h4, h2.h4, h3.h4, h4.h4, h5.h4, h6.h4, .h4 {
		font-size: 32px !important;
		line-height: 40px !important;
	}
}

@media (max-width: 767px) {
	.fontsize-193501 {
		line-height: 1.2 !important;
	}
	.fontsize-131905 {
		line-height: 1.1 !important;
	}

	h1.h1, h2.h1, h3.h1, h4.h1, h5.h1, h6.h1, .h1 {
		font-size: 44px !important;
		line-height: 48px !important;
		letter-spacing: -0.5px !important;
	}
	h1.h2, h2.h2, h3.h2, h4.h2, h5.h2, h6.h2, .h2 {
		font-size: 36px !important;
		line-height: 42px !important;
		letter-spacing: -0.5px !important;
	}
	h1.h3, h2.h3, h3.h3, h4.h3, h5.h3, h6.h3, .h3 {
		font-size: 28px !important;
		line-height: 36px !important;
	}
	h1.h4, h2.h4, h3.h4, h4.h4, h5.h4, h6.h4, .h4 {
		font-size: 24px !important;
		line-height: 32px !important;
	}
	h1.h5, h2.h5, h3.h5, h4.h5, h5.h5, h6.h5, .h5 {
		font-size: 20px !important;
		line-height: 28px !important;
	}
}

/* ───── Single-provider page typography ───────────────────────────────────── */

body.single-provider h1.h2 {
	margin: 0 0 16px !important;
	font-family: var(--sd-font-display) !important;
	font-size: clamp(48px, 5.75vw, 80px) !important;
	line-height: clamp(56px, 6vw, 80px) !important;
	font-weight: 500 !important;
	letter-spacing: -1px !important;
	color: var(--sd-white) !important;
}

body.single-provider .provider-cert h2 {
	margin: 0 0 24px !important;
	font-family: var(--sd-font-heading) !important;
	font-size: 24px !important;
	line-height: 32px !important;
	font-weight: 400 !important;
	color: var(--sd-white) !important;
}

body.single-provider .provider-specialties strong {
	margin-bottom: 12px;
	font-family: var(--sd-font-body);
	font-size: 14px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(252, 250, 247, 0.86); /* --sd-white at 86% */
}

body.single-provider .provider-body h3,
body.single-provider .nextpatient-sidebar.provider h3 {
	margin: 0 0 24px !important;
	font-family: var(--sd-font-heading) !important;
	font-size: 32px !important;
	line-height: 40px !important;
	font-weight: 400 !important;
	color: var(--sd-blue-gray) !important;
}

body.single-provider .provider-body p,
body.single-provider .provider-body li,
body.single-provider .provider-body .wpb_wrapper {
	font-family: var(--sd-font-body);
	color: var(--sd-blue-gray);
}

body.single-provider #row-unique-1 h1.h2 {
	margin: 0 0 16px !important;
	font-family: var(--sd-font-display) !important;
	font-size: clamp(48px, 5.75vw, 67px) !important;
	line-height: clamp(56px, 6vw, 77px) !important;
	font-weight: 500 !important;
	letter-spacing: -1px !important;
	color: var(--sd-white) !important;
}

.sd-provider-subhead {
	margin-top: 8px !important;
}

@media (max-width: 959px) {
	.single-provider h1.h2 {
		font-size: 32px !important;
		line-height: 40px !important;
	}
}

@media (max-width: 599px) {
	.single-provider h1.h2 {
		font-size: 28px !important;
		line-height: 36px !important;
	}
}

/* ==========================================================================
   .nolink — disable anchor interaction inside a heading.
   Used on Uncode post-grid titles (e.g. .t-entry-title) when the linked
   destination shouldn't be clickable but the title text still renders as
   a link in the markup. Inherits color so it visually matches surrounding
   non-link text.
   ========================================================================== */

h1.nolink a,
h2.nolink a,
h3.nolink a,
h4.nolink a,
h5.nolink a,
h6.nolink a {
	pointer-events: none;
	cursor: default;
	color: inherit;
	text-decoration: none;
}