/* ── Global type scale ──────────────────────────────────────────────────────
   One typographic hierarchy for every page, layout and breakpoint.

   The problem this fixes: Tailwind's preflight resets every heading to
   `font-size: inherit`, so any h1–h6 that never got an explicit size class was
   rendering at the body size — the index hero h1 at 16px, section h3s at 16px,
   product-card h4s smaller than the price paragraph beside them. Headings and
   body copy had drifted into the same 13–17px band, and paragraph sizes ran to
   thirteen different values across the site.

   The rules below give headings a large, ranked scale and body copy a single
   small one. Sizes are fluid — one clamp() covers phone, tablet and desktop, so
   the hierarchy holds in every view without breakpoint-by-breakpoint overrides.
   The one exception is the mobile block at the foot of the file, which lifts the
   whole heading scale by a single factor below the md breakpoint.

   Loaded last, so it beats the other css/ files. Element selectors are used
   deliberately: anything carrying its own size class (a hero display title, a
   badge, a price) still wins and keeps the size the design gave it. Use the
   .type-* helpers at the foot of this file to opt in or out on purpose. */

:root {
    /* One knob for the whole heading scale. It stays at 1 everywhere except the
       mobile block at the foot of this file, which lifts every title a step. */
    --fs-title-scale: 1;

    /* Headings — each step stays clearly above the one below it at every width. */
    --fs-h1: calc(clamp(28px, 1.25rem + 2.2vw, 44px) * var(--fs-title-scale));
    --fs-h2: calc(clamp(23px, 1.15rem + 1.5vw, 34px) * var(--fs-title-scale));
    --fs-h3: calc(clamp(19px, 1.05rem + 0.9vw, 26px) * var(--fs-title-scale));
    --fs-h4: calc(clamp(16.5px, 0.95rem + 0.45vw, 20px) * var(--fs-title-scale));
    --fs-h5: calc(clamp(15px, 0.9rem + 0.25vw, 17px) * var(--fs-title-scale));
    --fs-h6: calc(clamp(14.5px, 0.86rem + 0.2vw, 16px) * var(--fs-title-scale));

    /* Body — one size for running copy, plus a lead for the sentence that sits
       directly under a hero or section title, and two smaller steps for meta. */
    --fs-lead: clamp(15px, 0.9rem + 0.3vw, 17px);
    --fs-body: clamp(13.5px, 0.82rem + 0.16vw, 15px);
    --fs-small: clamp(12px, 0.74rem + 0.1vw, 13px);
    --fs-micro: clamp(10.5px, 0.66rem + 0.08vw, 11.5px);

    --lh-heading: 1.22;
    --lh-body: 1.65;
}

/* Base ─────────────────────────────────────────────────────────────────────
   Everything that never asked for a size lands here rather than on the 16px
   browser default, which is what put body copy level with the headings. */
body {
    font-size: var(--fs-body);
}

/* Headings ─────────────────────────────────────────────────────────────────
   Undo the preflight `font-size: inherit`. A heading that carries its own size
   class is untouched — this only catches the ones that had nothing at all. */
h1, h2, h3, h4, h5, h6 {
    line-height: var(--lh-heading);
    font-weight: 700;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

/* Body copy ────────────────────────────────────────────────────────────────
   Paragraphs read a step below the smallest heading everywhere, so the gap
   between a section title and the sentence under it is never ambiguous. */
p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* Shared section furniture ─────────────────────────────────────────────────
   These classes carry heading and body roles on pages that don't use h-tags
   for them, so they ride the same scale. */
.section-title,
.op-page-title,
.our-products-title {
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
}

.section-pill,
.our-products-subtitle,
.dd-section-title {
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
}

.section-eyebrow,
.about-pill,
.ws-pill {
    font-size: var(--fs-small);
}

/* Body-role classes that had grown to heading size. */
.hero-paragraph,
.about-text .body-text,
.contact-desc,
.section-header .subtitle {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
}

.op-page-subtitle {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* Opt-in / opt-out helpers ─────────────────────────────────────────────────
   For the places where the scale is the wrong answer on purpose: display type
   that should run larger than h1, the lead sentence under a hero, and the meta
   text — badges, captions, prices, timestamps — that should stay small. */
.type-display { font-size: clamp(34px, 1.5rem + 3.4vw, 64px) !important; line-height: 1.08 !important; }
.type-lead    { font-size: var(--fs-lead) !important;  line-height: var(--lh-body) !important; }
.type-body    { font-size: var(--fs-body) !important;  line-height: var(--lh-body) !important; }
.type-small   { font-size: var(--fs-small) !important; line-height: 1.5 !important; }
.type-micro   { font-size: var(--fs-micro) !important; line-height: 1.45 !important; }

/* Card titles ──────────────────────────────────────────────────────────────
   A title inside a grid card is a heading, but a full h3 would overpower a
   three-up row — it rides the h4 step so it still reads a clear tier above the
   card's body copy without stretching the card. */
.type-card-title {
    font-size: var(--fs-h4) !important;
    line-height: 1.3 !important;
}

/* Mobile ───────────────────────────────────────────────────────────────────
   On a phone every clamp above sits at the foot of its range, which left the
   titles only a hair clear of the body copy under them — a section pill read
   at 19px above a 13.5px paragraph. Below the md breakpoint each heading step
   grows by --fs-title-scale so the ranking that reads on a desktop still reads
   on a 390px screen. Body copy is deliberately left alone: widening the gap
   between a title and its paragraph is the point.

   The rules after the scale catch the headings that hard-code a size in the
   markup rather than riding a token — a Tailwind size class outranks the plain
   `h4` selector, so those titles would otherwise be the only ones not to grow.
   Only the ones that sit *below* their step on the scale are listed; a policy
   page's 3rem h1 or 2rem h2 is already large enough on a phone. Each is the
   same proportional lift, keyed to the same knob. None of these elements carry
   an `sm:` size class — every responsive variant on them is `md:` and so falls
   outside this query — which is why the base class can be overridden safely. */
@media (max-width: 767px) {
    :root {
        --fs-title-scale: 1.1;
    }

    /* Product-card titles — the largest group, 14px across every product grid. */
    h4.text-\[14px\],
    h4.text-sm {
        font-size: calc(14px * var(--fs-title-scale));
    }

    /* Policy and detail-page sub-headings. */
    h5.text-\[17px\] {
        font-size: calc(17px * var(--fs-title-scale));
    }

    h3.text-\[1\.4rem\] {
        font-size: calc(1.4rem * var(--fs-title-scale));
    }

    h3.text-\[18px\],
    h4.text-\[18px\] {
        font-size: calc(18px * var(--fs-title-scale));
    }

    h3.text-lg,
    h4.text-lg {
        font-size: calc(1.125rem * var(--fs-title-scale));
    }

    h2.text-xl {
        font-size: calc(1.25rem * var(--fs-title-scale));
    }

    /* Workshop card titles carry their size on a component class rather than a
       Tailwind one, which outranks the plain `h3` rule whatever the load order.
       Its own 22px step starts at lg, so nothing here collides with it. */
    .ws-card__title {
        font-size: calc(18px * var(--fs-title-scale));
    }
}