/* ============================================================
   CREATIVE AGENCY X — GLOBAL TYPOGRAPHY SYSTEM
   ============================================================

   PURPOSE
   -------
   This file is the single source of truth for semantic content
   typography across the entire website.

   It is loaded AFTER all section/page styles.

   Scope:
   .cax-site-main h1
   .cax-site-main h2
   .cax-site-main h3
   .cax-site-main h4
   .cax-site-main h5
   .cax-site-main h6
   .cax-site-main p

   Header, mega-menu and footer UI typography remain independent.

   IMPORTANT:
   Do not define new H1/H2/H3 sizes inside individual sections.
   Use these tokens instead.
   ============================================================ */

:root {
    /* --------------------------------------------------------
       MAIN CONTENT TYPE SCALE
       Intentionally controlled — strong, but not oversized.
       -------------------------------------------------------- */

    --type-h1: clamp(42px, 3.6vw, 62px);
    --type-h2: clamp(34px, 2.7vw, 46px);
    --type-h3: clamp(27px, 2vw, 34px);
    --type-h4: clamp(22px, 1.55vw, 28px);
    --type-h5: clamp(18px, 1.2vw, 22px);
    --type-h6: clamp(16px, 1vw, 18px);
    --type-p: clamp(15px, .9vw, 17px);

    /* Component aliases.
       Existing/new components can use these instead of creating
       another typography system. */
    --type-display: var(--type-h1);
    --type-heading-sm: var(--type-h4);
    --type-body: var(--type-p);

    /* UI text remains deliberately smaller than body headings. */
    --type-ui: clamp(12px, .78vw, 14px);
    --type-ui-lg: clamp(13px, .9vw, 16px);

    /* Unified line heights */
    --line-h1: .96;
    --line-h2: 1;
    --line-h3: 1.05;
    --line-h4: 1.1;
    --line-h5: 1.15;
    --line-h6: 1.2;
    --line-p: 1.55;
}

/* ============================================================
   SEMANTIC WEBSITE CONTENT
   ============================================================ */

.cax-site-main h1,
.cax-site-main h2,
.cax-site-main h3,
.cax-site-main h4,
.cax-site-main h5,
.cax-site-main h6 {
    font-family: var(--font-impact, Arial, Helvetica, sans-serif);
    font-weight: 700;
    text-wrap: balance;
}

.cax-site-main h1 {
    font-size: var(--type-h1);
    line-height: var(--line-h1);
}

.cax-site-main h2 {
    font-size: var(--type-h2);
    line-height: var(--line-h2);
}

.cax-site-main h3 {
    font-size: var(--type-h3);
    line-height: var(--line-h3);
}

.cax-site-main h4 {
    font-size: var(--type-h4);
    line-height: var(--line-h4);
}

.cax-site-main h5 {
    font-size: var(--type-h5);
    line-height: var(--line-h5);
}

.cax-site-main h6 {
    font-size: var(--type-h6);
    line-height: var(--line-h6);
}

.cax-site-main p {
    font-family: var(--font-ui, "Epic Pro", Arial, Helvetica, sans-serif);
    font-size: var(--type-p);
    line-height: var(--line-p);
}

/* Shared accessible heading helper.
   Use this whenever a visible micro-label should not carry the
   semantic heading size. */
.cax-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================================
   MOBILE
   clamp() already handles most responsive sizing.
   These rules only prevent very small screens from becoming
   visually cramped.
   ============================================================ */

@media (max-width: 480px) {
    :root {
        --type-h1: clamp(40px, 12vw, 48px);
        --type-h2: clamp(32px, 9vw, 38px);
        --type-h3: clamp(26px, 7.4vw, 31px);
        --type-h4: clamp(21px, 5.8vw, 25px);
        --type-h5: clamp(18px, 5vw, 21px);
        --type-h6: 16px;
        --type-p: 15px;
    }
}