/* ==========================================================================
   Typography
   Based on UI-Kit-Website Figma — node 45-112
   Font: Gilroy (already included via fonts/gilroy-woff2/stylesheet.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google Sans Flex — Front Page V3 only
   Front Page V3 uses Google Sans Flex instead of Gilroy across the whole
   page. Scoped to body.front-page-v3-body so no other template is affected
   — this file is also enqueued on Pricing (new), which must keep Gilroy.
   Moved here from the inline <style id="fpv3-font-override"> block that
   used to live in header.php, and from the per-selector duplicates that
   used to live in front-page-v3-components/hero/hero.css.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Google Sans Flex Local v2';
    font-display: swap;
    src: url('/wp-content/themes/simplydepo/fonts/GoogleSansFlex/GoogleSansFlex_VariableFont_GRAD,ROND,opsz,slnt,wdth,wght_2.ttf') format('truetype');
    font-weight: 100 1000;
    font-style: normal;
}

body.front-page-v3-body {
    --font-base: 'Google Sans Flex Local v2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Fixes a horizontal-scroll bug on mobile widths: the site's own desktop nav
   (.header-menu-v2__nav, not part of Front Page V3) isn't clipped at narrow
   viewports and sits off-screen to the right, which widens <body>'s effective
   layout — and since .fpv3-header-v3's promo bar is position:fixed with
   width:100%, it then sizes itself to that widened body instead of the real
   viewport, dragging the whole page into horizontal scroll. Clipping overflow
   here (root cause lives in shared site nav CSS, out of scope for this page)
   is scoped to Front Page V3 only via :has() so no other template is touched. */
html:has(body.front-page-v3-body) {
    overflow-x: hidden;
}

body.front-page-v3-body {
    overflow-x: hidden;
}

body.front-page-v3-body,
body.front-page-v3-body * {
    font-family: 'Google Sans Flex Local v2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* The header-v3 / footer-v3 components carry their own font regardless of which
   page renders them — today that's only Front Page V3, but unlike the rest of
   the page's sections (scoped to body.front-page-v3-body above), these two are
   meant to roll out site-wide later without needing this file touched again. */
.fpv3-header-v3,
.fpv3-header-v3 *,
.front-page-v3-footer,
.front-page-v3-footer * {
    font-family: 'Google Sans Flex Local v2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Google Sans Flex type scale — values from the Figma Dev Mode typography table
   (Heading/Eyebrow/Body/Static/Adaptive). Only the tokens actually in use across
   front-page-v3-components/*.css are defined here; add more as they're needed.
   Component CSS should reference these instead of repeating the raw numbers, so
   a future scale change only has to happen in this one place. */
body.front-page-v3-body {
    --gsf-heading-display-fs: 64px;
    --gsf-heading-display-lh: 72px;
    --gsf-heading-display-ls: -1.28px;

    --gsf-heading-2xl-fs: 52px;
    --gsf-heading-2xl-lh: 56px;
    --gsf-heading-2xl-ls: -0.52px;

    --gsf-heading-xl-fs: 44px;
    --gsf-heading-xl-lh: 48px;
    --gsf-heading-xl-ls: -0.5px;
    --gsf-heading-xl-fs-mobile: 28px;
    --gsf-heading-xl-lh-mobile: 32px;
    --gsf-heading-xl-ls-mobile: -0.28px;

    --gsf-heading-lg-fs: 32px;
    --gsf-heading-lg-lh: 40px;
    --gsf-heading-lg-ls: -0.32px;
    --gsf-heading-lg-fs-mobile: 24px;
    --gsf-heading-lg-lh-mobile: 32px;
    --gsf-heading-lg-ls-mobile: -0.24px;

    --gsf-heading-sm-fs: 24px;
    --gsf-heading-sm-lh: 30px;
    --gsf-heading-sm-ls: -0.2px;

    --gsf-body-lg-fs: 18px;
    --gsf-body-lg-lh: 26px;
    --gsf-body-lg-ls: 0.135px;
    --gsf-body-lg-fs-mobile: 16px;
    --gsf-body-lg-lh-mobile: 24px;
    --gsf-body-lg-ls-mobile: 0.12px;

    --gsf-body-sm-fs: 14px;
    --gsf-body-sm-lh: 20px;
    --gsf-body-sm-ls: 0.105px;
    --gsf-body-sm-fs-mobile: 14px;
    --gsf-body-sm-lh-mobile: 20px;
    --gsf-body-sm-ls-mobile: 0.105px;

    --gsf-static-md-fs: 16px;
    --gsf-static-md-lh: 24px;
    --gsf-static-md-ls: 0.12px;

    --gsf-static-xs-fs: 12px;
    --gsf-static-xs-lh: 16px;
    --gsf-static-xs-ls: 0.09px;

    /* Adaptive tokens have no letter-spacing dimension in the Figma table. */
    --gsf-adaptive-number-fs: 32px;
    --gsf-adaptive-number-lh: 32px;
}

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
    --font-base: 'Gilroy', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Display */
    --fs-display: 72px;
    --lh-display: 74px;
    --ls-display: -0.72px;

    /* Headings */
    --fs-h1: 60px;
    --lh-h1: 68px;
    --ls-h1: -0.60px;

    --fs-h2: 48px;
    --lh-h2: 52px;
    --ls-h2: -0.48px;

    --fs-h3: 40px;
    --lh-h3: 48px;
    --ls-h3: -0.40px;

    --fs-h4: 32px;
    --lh-h4: 36px;
    --ls-h4: -0.32px;

    --fs-h5: 28px;
    --lh-h5: 34px;
    --ls-h5: -0.14px;

    --fs-h6: 24px;
    --lh-h6: 32px;
    --ls-h6: 0px;

    --fs-h7: 20px;
    --lh-h7: 28px;
    --ls-h7: 0px;

    --fs-h8: 18px;
    --lh-h8: 26px;
    --ls-h8: 0.09px;

    /* Paragraph */
    --fs-p-lg: 18px;
    --lh-p-lg: 26px;
    --ls-p-lg: 0.18px;

    --fs-p-md: 16px;
    --lh-p-md: 24px;
    --ls-p-md: 0.16px;

    --fs-p-sm: 14px;
    --lh-p-sm: 20px;
    --ls-p-sm: 0.14px;

    --fs-p-xs: 12px;
    --lh-p-xs: 16px;
    --ls-p-xs: 0.12px;
}

/* --------------------------------------------------------------------------
   Display
   -------------------------------------------------------------------------- */
.text-display {
    font-family: var(--font-base);
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Headings — utility classes
   -------------------------------------------------------------------------- */
.heading-2xl {
    font-family: var(--font-base);
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    font-weight: 700;
}

.heading-xl {
    font-family: var(--font-base);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    font-weight: 700;
}

.heading-lg {
    font-family: var(--font-base);
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
    font-weight: 700;
}

.heading-md {
    font-family: var(--font-base);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
    font-weight: 700;
}

.heading-sm {
    font-family: var(--font-base);
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
    font-weight: 700;
}

.heading-xs {
    font-family: var(--font-base);
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
    letter-spacing: var(--ls-h6);
    font-weight: 600;
}

.heading-2xs {
    font-family: var(--font-base);
    font-size: var(--fs-h7);
    line-height: var(--lh-h7);
    letter-spacing: var(--ls-h7);
    font-weight: 600;
}

.heading-3xs {
    font-family: var(--font-base);
    font-size: var(--fs-h8);
    line-height: var(--lh-h8);
    letter-spacing: var(--ls-h8);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Paragraph — utility classes
   -------------------------------------------------------------------------- */
.paragraph-lg {
    font-family: var(--font-base);
    font-size: var(--fs-p-lg);
    line-height: var(--lh-p-lg);
    letter-spacing: var(--ls-p-lg);
    font-weight: 400;
}

.paragraph-md {
    font-family: var(--font-base);
    font-size: var(--fs-p-md);
    line-height: var(--lh-p-md);
    letter-spacing: var(--ls-p-md);
    font-weight: 400;
}

.paragraph-sm {
    font-family: var(--font-base);
    font-size: var(--fs-p-sm);
    line-height: var(--lh-p-sm);
    letter-spacing: var(--ls-p-sm);
    font-weight: 400;
}

.paragraph-xs {
    font-family: var(--font-base);
    font-size: var(--fs-p-xs);
    line-height: var(--lh-p-xs);
    letter-spacing: var(--ls-p-xs);
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Label / SemiBold
   -------------------------------------------------------------------------- */
.label-xl-sb {
    font-family: var(--font-base);
    font-size: var(--fs-p-lg);
    line-height: var(--lh-p-lg);
    letter-spacing: var(--ls-p-lg);
    font-weight: 600;
}

.label-md-sb {
    font-family: var(--font-base);
    font-size: var(--fs-p-md);
    line-height: var(--lh-p-md);
    letter-spacing: var(--ls-p-md);
    font-weight: 600;
}

.label-sm-sb {
    font-family: var(--font-base);
    font-size: var(--fs-p-sm);
    line-height: var(--lh-p-sm);
    letter-spacing: var(--ls-p-sm);
    font-weight: 600;
}

.label-xs-sb {
    font-family: var(--font-base);
    font-size: var(--fs-p-xs);
    line-height: var(--lh-p-xs);
    letter-spacing: var(--ls-p-xs);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Label / Medium
   -------------------------------------------------------------------------- */
.label-xl-md {
    font-family: var(--font-base);
    font-size: var(--fs-p-lg);
    line-height: var(--lh-p-lg);
    letter-spacing: var(--ls-p-lg);
    font-weight: 500;
}

.label-md-md {
    font-family: var(--font-base);
    font-size: var(--fs-p-md);
    line-height: var(--lh-p-md);
    letter-spacing: var(--ls-p-md);
    font-weight: 500;
}

.label-sm-md {
    font-family: var(--font-base);
    font-size: var(--fs-p-sm);
    line-height: var(--lh-p-sm);
    letter-spacing: var(--ls-p-sm);
    font-weight: 500;
}

.label-xs-md {
    font-family: var(--font-base);
    font-size: var(--fs-p-xs);
    line-height: var(--lh-p-xs);
    letter-spacing: var(--ls-p-xs);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Label / Tag — uppercase
   -------------------------------------------------------------------------- */
.label-md-tag {
    font-family: var(--font-base);
    font-size: var(--fs-p-sm);
    line-height: var(--lh-p-sm);
    letter-spacing: 1.12px;
    font-weight: 600;
    text-transform: uppercase;
}

.label-sm-tag {
    font-family: var(--font-base);
    font-size: var(--fs-p-sm);
    line-height: var(--lh-p-sm);
    letter-spacing: 1.12px;
    font-weight: 600;
    text-transform: uppercase;
}


.label-xs-tag {
    font-family: var(--font-base);
    font-size: var(--fs-p-xs);
    line-height: var(--lh-p-xs);
    letter-spacing: 0.96px;
    font-weight: 600;
    text-transform: uppercase;
}