/* ==========================================================================
   WWT type system
   --------------------------------------------------------------------------
   One place to control headings. Loads after user-style.css and is
   render-blocking (see the allowlist in inc/performance.php).

     1. Tokens — the scale, as custom properties.
     2. Base   — what an unclassed h1–h6 looks like.
     3. Classes — opt-in overrides when a heading needs a different step.

   The Elementor kit no longer sets any heading typography, so this file is
   the only thing styling headings site-wide. Template stylesheets
   (locations-archive.css, seasonal-pages.css, vendor-sections.css) layer on
   top with two-class selectors and win on specificity.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Families. Only "Gibson" (300, 500) and "Quinn Display" (300) are backed
     by a real @font-face — see user-style.css. Do not reintroduce the
     "Gibson Light" / "Gibson Regular" / "Gibson Medium" names; nothing
     defines them and they fall through to the system sans. */
  --font-display: "Quinn Display", var(--serif);
  --font-sans: "Gibson", var(--sans);

  /* Weights that actually exist as loaded faces. */
  --fw-display: 300;
  --fw-body: 300;
  --fw-label: 500;

  /* Display scale (Quinn Display), largest to smallest.

     Every step is clamp(floor, vw, ceiling) and the three parts do different
     jobs. FLOORS are what phones sit on — they are tuned and should not be
     touched without re-checking mobile. The vw terms only govern the ramp
     between roughly 900px and 1300px. CEILINGS are the desktop lock: each one
     engages around 1200–1370px, so from a laptop up the scale is fixed and
     stops growing with the window.

     The ceilings step down in ~0.82: 96 / 78.4 / 64 / 52 / 41.6 / 32.8 px.
     Keep that ratio if you retune — --ds-2 sitting above --ds-1 would put the
     package-showcase titles above the page h1. */
  --ds-1: clamp(3.6rem, 8vw, 6rem);
  /* --ds-2 is the vendor-carousel intro heading — a section lead-in, one step
     under the h1 page hero. */
  --ds-2: clamp(3.4rem, 6vw, 4.9rem);
  --ds-3: clamp(2.6rem, 5vw, 4rem);
  --ds-4: clamp(2.25rem, 4vw, 3.25rem);
  --ds-5: clamp(1.9rem, 3.2vw, 2.6rem);
  --ds-6: clamp(1.5rem, 2.4vw, 2.05rem);
  /* --ds-7 continues the 0.82 step below --ds-6 (26.9px ceiling). It exists
     for titular text that is not a heading and sits inside a small component
     — the contact page's "enquiring about" block — where --ds-6 reads as a
     section title. Nothing between --ds-6 and the 1.15rem h5/h6 floor covered
     that. Template-only, so it has no Elementor .elementor-heading-title
     mirror below. */
  --ds-7: clamp(1.23rem, 1.97vw, 1.68rem);

  /* Body copy (Gibson, sentence case). Collapses the 0.76–0.98rem spread
     that had accumulated across the template stylesheets. */
  --txt-lg: 0.95rem;
  --txt: 0.88rem;
  --txt-sm: 0.78rem;

  --leading-body: 1.6;

  /* Label scale (Gibson, uppercase, tracked). */
  --lbl-lg: 0.78rem;
  --lbl: 0.7rem;
  --lbl-sm: 0.62rem;

  /* Tracking in em so it scales with the clamps — the old 4px did not. */
  --track-label: 0.22em;
  --track-display: -0.01em;

  --leading-display: 1.04;
  /* Big headings set tighter. At --ds-1/--ds-2 sizes the 1.04 default
     opens the lines up too much. */
  --leading-tight: 0.92;
  --leading-label: 1.1;
}

/* --------------------------------------------------------------------------
   2. Base
   h1 is the page title and the largest thing on the page. h2–h6 step down
   from there. Margins are deliberately left to the reset so this file only
   owns type, not spacing.
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--track-display);
  line-height: var(--leading-display);
  text-transform: none;
}

h1 {
  font-size: var(--ds-1);
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

/* --ds-4, not --ds-3: at --ds-3 an h2 sitting under an h1 reads as a second
   title rather than a section head. Tried twice now — once against the old
   8.2rem h1 ceiling and again against the current 6rem one, on the chance the
   lower scale changed the pairing. It doesn't; --ds-3 is too close either way.
   This is the map panel's restrained treatment, one step up. */
h2 {
  font-size: var(--ds-4);
}

h3 {
  font-size: var(--ds-5);
}

h4 {
  font-size: var(--ds-6);
}

h5,
h6 {
  font-size: 1.15rem;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   3. Classes
   Single-class selectors on purpose: they stay easy to override from a
   template stylesheet without a specificity fight.
   -------------------------------------------------------------------------- */

/* .ww-display-2 is the vendor-carousel intro treatment — a section lead-in,
   one step below the h1 page hero. */
.ww-display,
.ww-display-1,
.ww-display-2,
.ww-display-3,
.ww-display-4,
.ww-display-5,
.ww-display-6,
.ww-display-7 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--track-display);
  line-height: var(--leading-display);
  text-transform: none;
  margin: 0;
}

.ww-display,
.ww-display-1 {
  font-size: var(--ds-1);
  line-height: var(--leading-tight);
}
.ww-display-2 {
  font-size: var(--ds-2);
  line-height: var(--leading-tight);
}
.ww-display-3 {
  font-size: var(--ds-3);
}
.ww-display-4 {
  font-size: var(--ds-4);
}
.ww-display-5 {
  font-size: var(--ds-5);
}
.ww-display-6 {
  font-size: var(--ds-6);
}
.ww-display-7 {
  font-size: var(--ds-7);
}

/* Elementor places custom classes on the widget wrapper, not always on the
   rendered heading itself, so mirror the display utilities onto the inner
   .elementor-heading-title element. */
.elementor-widget-heading.ww-display .elementor-heading-title,
.elementor-widget-heading.ww-display-1 .elementor-heading-title,
.elementor-heading-title.ww-display,
.elementor-heading-title.ww-display-1 {
  font-family: var(--font-display);
  font-size: var(--ds-1);
  font-weight: var(--fw-display);
  letter-spacing: 0;
  line-height: var(--leading-tight);
  text-transform: none;
}

.elementor-widget-heading.ww-display-2 .elementor-heading-title,
.elementor-heading-title.ww-display-2 {
  font-family: var(--font-display);
  font-size: var(--ds-2);
  font-weight: var(--fw-display);
  letter-spacing: var(--track-display);
  line-height: var(--leading-tight);
  text-transform: none;
}

.elementor-widget-heading.ww-display-3 .elementor-heading-title,
.elementor-heading-title.ww-display-3 {
  font-family: var(--font-display);
  font-size: var(--ds-3);
  font-weight: var(--fw-display);
  letter-spacing: var(--track-display);
  line-height: var(--leading-display);
  text-transform: none;
}

.elementor-widget-heading.ww-display-4 .elementor-heading-title,
.elementor-heading-title.ww-display-4 {
  font-family: var(--font-display);
  font-size: var(--ds-4);
  font-weight: var(--fw-display);
  letter-spacing: var(--track-display);
  line-height: var(--leading-display);
  text-transform: none;
}

.elementor-widget-heading.ww-display-5 .elementor-heading-title,
.elementor-heading-title.ww-display-5 {
  font-family: var(--font-display);
  font-size: var(--ds-5);
  font-weight: var(--fw-display);
  letter-spacing: var(--track-display);
  line-height: var(--leading-display);
  text-transform: none;
}

.elementor-widget-heading.ww-display-6 .elementor-heading-title,
.elementor-heading-title.ww-display-6 {
  font-family: var(--font-display);
  font-size: var(--ds-6);
  font-weight: var(--fw-display);
  letter-spacing: var(--track-display);
  line-height: var(--leading-display);
  text-transform: none;
}

/* Eyebrow — the small uppercase line that sits above a title. Use on a <p>,
   not a heading: it is a label, not a level in the document outline. That
   confusion is what made h1 the eyebrow in the first place. */
.ww-eyebrow,
.ww-label,
.ww-label-lg,
.ww-label-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  line-height: var(--leading-label);
  margin: 0;
}

.ww-eyebrow,
.ww-label {
  font-size: var(--lbl);
}
.ww-label-lg {
  font-size: var(--lbl-lg);
}
.ww-label-sm {
  font-size: var(--lbl-sm);
}

.elementor-widget-heading.ww-eyebrow .elementor-heading-title,
.elementor-widget-heading.ww-label .elementor-heading-title,
.elementor-widget-heading.ww-label-lg .elementor-heading-title,
.elementor-widget-heading.ww-label-sm .elementor-heading-title,
.elementor-heading-title.ww-eyebrow,
.elementor-heading-title.ww-label,
.elementor-heading-title.ww-label-lg,
.elementor-heading-title.ww-label-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-label);
  letter-spacing: var(--track-label);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.elementor-widget-heading.ww-eyebrow .elementor-heading-title,
.elementor-widget-heading.ww-label .elementor-heading-title,
.elementor-heading-title.ww-eyebrow,
.elementor-heading-title.ww-label {
  font-size: var(--lbl);
}

.elementor-widget-heading.ww-label-lg .elementor-heading-title,
.elementor-heading-title.ww-label-lg {
  font-size: var(--lbl-lg);
}

.elementor-widget-heading.ww-label-sm .elementor-heading-title,
.elementor-heading-title.ww-label-sm {
  font-size: var(--lbl-sm);
}