/* ── Self-hosted fonts (files in fonts/) ───────────────────── */
/* Sequoia ships Regular + SemiBold only; 600–700 both use SemiBold so
   "Bold" (buttons, nav) never falls back to a synthetic bold. */
@font-face { font-family: "Sequoia"; src: url("../fonts/sequoia_regular-webfont.woff2") format("woff2"), url("../fonts/sequoia_regular-webfont.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sequoia"; src: url("../fonts/sequoia_semibold-webfont.woff2") format("woff2"), url("../fonts/sequoia_semibold-webfont.woff") format("woff"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Rattlesnake"; src: url("../fonts/rattlesnake-webfont.woff2") format("woff2"), url("../fonts/rattlesnake-webfont.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

:root {

  /* ── Fluid type scale (375px → 1728px) ───────────────────── */
  --text-xl      : clamp(3.000rem, 2.307rem + 2.956vw, 5.500rem);  /* 48px → 88px */
  --text-lg      : clamp(2.250rem, 1.765rem + 2.069vw, 4.000rem);  /* 36px → 64px */
  --text-md      : clamp(1.563rem, 1.095rem + 1.996vw, 3.250rem);  /* 25px → 52px */
  --text-sm      : clamp(1.250rem, 1.042rem + 0.887vw, 2.000rem);  /* 20px → 32px */
  --text-sub-lg  : clamp(1.563rem, 1.511rem + 0.222vw, 1.750rem);  /* 25px → 28px */
  --text-body-xl : clamp(1.250rem, 1.111rem + 0.591vw, 1.750rem);  /* 20px → 28px */
  --text-body-lg : clamp(1.125rem, 1.021rem + 0.443vw, 1.500rem);  /* 18px → 24px */

}


h1, h2, h3, h4, h5, h6 { padding-bottom: 0; color: inherit; }


/* ── Font weight ──────────────────────────────────────────── */
/* Update comment after running figma-typography skill with Typekit CSS */
/* Loaded weights: Sequoia 400, 600 (700 → SemiBold) · Rattlesnake 400 · freight-text-pro 400 (Typekit) */
.font-thin       { font-weight: 100 !important; }
.font-extralight { font-weight: 200 !important; }
.font-light      { font-weight: 300 !important; }
.font-normal     { font-weight: 400 !important; }
.font-medium     { font-weight: 500 !important; }
.font-semibold   { font-weight: 600 !important; }
.font-bold       { font-weight: 700 !important; }
.font-extrabold  { font-weight: 800 !important; }
.font-black      { font-weight: 900 !important; }

/* ── Weight on module headings — Divi sets h1–h6 { font-weight: 500 },
   so hand the module's weight utility down to the heading inside it ── */
:is(.font-thin, .font-extralight, .font-light, .font-normal, .font-medium,
    .font-semibold, .font-bold, .font-extrabold, .font-black) :is(h1, h2, h3, h4, h5, h6) { font-weight: inherit; }

/* ── Line height ──────────────────────────────────────────── */
.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.1; }
.leading-snug    { line-height: 1.25; }
.leading-normal  { line-height: normal; }
.leading-relaxed { line-height: 1.5; }
.leading-loose   { line-height: 1.75; }

/* ── Type scale ───────────────────────────────────────────── */
/* One utility class per token, each referencing its own --font-[slug]. */
/* line-height and letter-spacing come from Figma per token;   */
/* override line-height per instance using .leading-* classes. */

.heading-xl { font-size: var(--text-xl); font-family: var(--font-sequoia); line-height: 1.136; }
.heading-xl h1, .heading-xl h2, .heading-xl h3,
.heading-xl h4, .heading-xl h5, .heading-xl h6,
.heading-xl p  { font-size: inherit; font-family: inherit; line-height: inherit; }

.heading-lg { font-size: var(--text-lg); font-family: var(--font-sequoia); line-height: normal; }
.heading-lg h1, .heading-lg h2, .heading-lg h3,
.heading-lg h4, .heading-lg h5, .heading-lg h6,
.heading-lg p  { font-size: inherit; font-family: inherit; line-height: inherit; }

.heading-md { font-size: var(--text-md); font-family: var(--font-rattlesnake); line-height: normal; }
.heading-md h1, .heading-md h2, .heading-md h3,
.heading-md h4, .heading-md h5, .heading-md h6,
.heading-md p  { font-size: inherit; font-family: inherit; line-height: inherit; }

.heading-sm { font-size: var(--text-sm); font-family: var(--font-rattlesnake); line-height: normal; }
.heading-sm h1, .heading-sm h2, .heading-sm h3,
.heading-sm h4, .heading-sm h5, .heading-sm h6,
.heading-sm p  { font-size: inherit; font-family: inherit; line-height: inherit; }

.subheading-lg { font-size: var(--text-sub-lg); font-family: var(--font-freight-text-pro); line-height: normal; text-transform: uppercase; }
.subheading-lg :is(p, li, h1, h2, h3, h4, h5, h6) { font-size: inherit; font-family: inherit; line-height: inherit; text-transform: inherit; }

.body-xl { font-size: var(--text-body-xl); font-family: var(--font-freight-text-pro); line-height: normal; }
.body-xl p, .body-xl li { font-size: inherit; font-family: inherit; line-height: inherit; }

.body-lg { font-size: var(--text-body-lg); font-family: var(--font-freight-text-pro); line-height: normal; }
.body-lg p, .body-lg li { font-size: inherit; font-family: inherit; line-height: inherit; }

/* Chrome text — Figma Footer Headings / Footer Info (also used in the header top bar) */
.subheading-sm { font-size: clamp(1rem, 0.965rem + 0.148vw, 1.125rem); font-family: var(--font-freight-text-pro); line-height: normal; letter-spacing: 0.3em; text-transform: uppercase; }  /* 16px → 18px */
.subheading-sm p, .subheading-sm li { font-size: inherit; font-family: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; }
.body-sm { font-size: 1rem; font-family: var(--font-freight-text-pro); line-height: 1.25; }  /* 16px fixed, 20px line */
.body-sm p, .body-sm li { font-size: inherit; font-family: inherit; line-height: inherit; }


/* ── Rattlesnake word spacing — the script's swashes close up its
   0.27em space ("DedicatedVeterinary"); 0.15em opens the word gaps ── */
.heading-md, .heading-sm,
.rich-text :is(h3, h4, h5, h6) { word-spacing: 0.15em; }


/* ── Rich text ────────────────────────────────────────────── */
/* Apply to Code modules or WP editor content outside Divi's control */
.rich-text h1 { font-size: var(--text-xl); font-family: var(--font-sequoia); line-height: 1.136; }
.rich-text h2 { font-size: var(--text-lg); font-family: var(--font-sequoia); line-height: normal; }
.rich-text h3 { font-size: var(--text-md); font-family: var(--font-rattlesnake); line-height: normal; }
.rich-text h4,
.rich-text h5,
.rich-text h6 { font-size: var(--text-sm); font-family: var(--font-rattlesnake); line-height: normal; }

.rich-text p,
.rich-text li {
  font-size   : var(--text-body-xl);
  font-family : var(--font-freight-text-pro);
  line-height : normal;
}

.rich-text ol,
.rich-text ul  { padding-left: 1.5em; }

.rich-text a   { text-decoration: underline; color: inherit; }

/* ── Toggle / accordion answers — editors sometimes paste H2/H3s into FAQ
   answers; step them down so they sit under the item title, not above it. ── */
.et_pb_toggle_content :is(h2, h3, h4) { margin: 0 0 0.5em; padding: 0; line-height: normal; color: inherit; }
.et_pb_toggle_content h2 { font-size: var(--text-sm); font-family: var(--font-sequoia); }
.et_pb_toggle_content :is(h3, h4) { font-size: var(--text-sub-lg); font-family: var(--font-rattlesnake); word-spacing: 0.15em; }
.et_pb_toggle_content :is(p, ul, ol) + :is(h2, h3, h4) { margin-top: 1em; }