/* ============================================================
   WEB DESIGN BRISBANE — page-scoped tokens + shared helpers
   Scoped to .wdb-page so nothing leaks into nav / footer / other pages.
   These sizes have no matching global --text-* token, so per CLAUDE.md
   ("section-specific values are fine when no token applies") they live
   here as page-scoped, responsive (clamp) variables.
   ============================================================ */
.wdb-page {
    /* Responsive type scale (min, fluid, max) */
    --wdb-fs-hero:    clamp(1.5rem, 6vw, 5rem);         /* H1 — large + fluid (min keeps the forced 2-line wrap on mobile) */
    --wdb-fs-display: clamp(2.5rem, 7vw, 5rem);        /* ~80px — big centred display */
    --wdb-fs-section: clamp(2rem, 4.4vw, 3rem);        /* ~48px — section titles */
    --wdb-fs-faq:     clamp(2rem, 4.1vw, 2.8125rem);   /* ~45px — FAQ title */
    --wdb-fs-title:   clamp(1.75rem, 3.3vw, 2.25rem);  /* ~36px — sub-section titles */
    --wdb-fs-sub:     clamp(1.25rem, 2.1vw, 1.5rem);   /* ~24px — small headings */
    --wdb-fs-eyebrow: clamp(1rem, 1.5vw, 1.25rem);     /* ~20px — eyebrows / numbers */

    /* A LENGTH equal to the global --pad-x (2% of viewport width on desktop,
       4% under 1024px). Used where we need pad-x as a real length for
       vertical spacing / offsets that must visually match the side gutters. */
    --wdb-pad: 2vw;

    /* Mobile section rhythm — one consistent vertical padding for the top &
       bottom of every stacked content section on mobile, so the spacing
       between sections is uniform. Tune this single value to re-space the
       whole page. (Only consumed inside the ≤767 section rules.) */
    --wdb-sec-y: 48px;

    /* Second horizontal-clip boundary (html already has overflow-x: clip).
       `clip` — NOT `hidden` — so no scroll container / BFC is created and
       position: sticky keeps working. Guards against a transient wide element
       during an orientation change leaving a right-side gap on the page. */
    overflow-x: clip;
}

@media (max-width: 1023px) {
    .wdb-page { --wdb-pad: 4vw; }
}