/*
 * Typography — static rules using theme tokens from variables.css.
 *
 * Dynamic values (font families, sizes, weights …) are populated at runtime
 * as --led-* custom properties by inc/typography.php, then bridged to
 * --font-family-* / --font-size-* etc. by variables.css.
 *
 * .led-typography on body (or a content wrapper) marks the theme typography system.
 * Headings are scoped there and in .content-container so Divi Customizer globals do not win.
 * Divi-specific overrides live in assets/css/divi.css (separate, optional).
 */

/* -------------------------------------------------------------------------
   Font rendering
   ------------------------------------------------------------------------- */

* {
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering:          optimizeLegibility;
}

/* -------------------------------------------------------------------------
   Base — body
   ------------------------------------------------------------------------- */

body {
    font-family:    var(--font-family-body, Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
    font-size:      var(--font-size-body);
    font-weight:    var(--font-weight-body);
    text-transform: var(--text-transform-body, none);
    letter-spacing: var(--letter-spacing-body);
    line-height:    var(--line-height-body);
    color:          var(--color-text);
}

/* -------------------------------------------------------------------------
   Content body copy — scoped (beats Divi globals on p, li, etc.)
   ------------------------------------------------------------------------- */

html body.led-typography p,
html body .led-typography p,
html body .content-container p,
html body.led-typography li,
html body .led-typography li,
html body .content-container li,
html body.led-typography blockquote,
html body .led-typography blockquote,
html body .content-container blockquote,
html body.led-typography dd,
html body .led-typography dd,
html body .content-container dd,
html body.led-typography dt,
html body .led-typography dt,
html body .content-container dt,
html body.led-typography figcaption,
html body .led-typography figcaption,
html body .content-container figcaption {
    font-family:    var(--font-family-body, Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
    font-size:      var(--font-size-body) !important;
    font-weight:    var(--font-weight-body);
    line-height:    var(--line-height-body);
    letter-spacing: var(--letter-spacing-body);
}

 html body.led-typography ul:where(:not(.led-header-dropdown)),
html body .led-typography ul,
html body .content-container ul,
html body.led-typography ol,
html body .led-typography ol,
html body .content-container ol {
    font-family:    var(--font-family-body, Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
    font-size:      var(--font-size-list-desktop, var(--font-size-list)) !important;
    line-height:    var(--line-height-body);
    padding:        var(--list-padding-desktop, 0 24px);
}

/* -------------------------------------------------------------------------
   Inline / flow elements — body font family (inherit size from parent)
   ------------------------------------------------------------------------- */

span, a, abbr, acronym, address, blockquote, cite, code,
dd, del, dfn, div, dl, dt, label, legend, li, ol, p, pre,
q, small, sub, sup, ul, var {
    font-family: var(--font-family-body, Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
}

b, big, em, i, s, strong, u {
    font-family: var(--font-family-body, Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
}

/* -------------------------------------------------------------------------
   Links — use link colour from design tokens
   ------------------------------------------------------------------------- */

a {
    color: var(--color-link);
}

a:hover:not(.led-btn):not(.green-btn):not(.blue-btn):not(.custom-shop-btn):not(.contact-for-pricing-btn):not(.blurb-cta):not(.button):not(.wp-block-button__link):not(.product-info-button):not(.shop-all-button) {
    color:  var(--color-link);
}

/* -------------------------------------------------------------------------
   Headings — content areas only (beats Divi Customizer globals)
   ------------------------------------------------------------------------- */

html body.led-typography h1,
html body.led-typography h2,
html body.led-typography h3,
html body.led-typography h4,
html body.led-typography h5,
html body.led-typography h6,
html body .led-typography h1,
html body .led-typography h2,
html body .led-typography h3,
html body .led-typography h4,
html body .led-typography h5,
html body .led-typography h6,
html body .content-container h1,
html body .content-container h2,
html body .content-container h3,
html body .content-container h4,
html body .content-container h5,
html body .content-container h6{
    font-family:    var(--font-family-heading, Oswald, "Arial Black", Arial, sans-serif);
    font-weight:    var(--font-weight-heading);
    text-transform: var(--text-transform-heading, uppercase);
    letter-spacing: var(--letter-spacing-heading);
    line-height:    var(--line-height-heading);
    margin-top:     var(--heading-margin-top);
    margin-bottom:  var(--heading-margin-bottom);
    padding-bottom: 0 !important;
}

html body.led-typography h1,
html body .led-typography h1,
html body .content-container h1{ font-size: var(--font-size-h1) !important; }

html body.led-typography h2,
html body .led-typography h2,
html body .content-container h2{ font-size: var(--font-size-h2) !important; }

html body.led-typography h3,
html body .led-typography h3,
html body .content-container h3{ font-size: var(--font-size-h3) !important; }

html body.led-typography h4,
html body .led-typography h4,
html body .content-container h4{ font-size: var(--font-size-h4) !important; }

html body.led-typography h5,
html body .led-typography h5,
html body .content-container h5{ font-size: var(--font-size-h5) !important; }

html body.led-typography h6,
html body .led-typography h6,
html body .content-container h6{ font-size: var(--font-size-h5) !important; }

/* Heading anchor links — inherit heading typography */
html body.led-typography h1 a,
html body.led-typography h2 a,
html body.led-typography h3 a,
html body.led-typography h4 a,
html body.led-typography h5 a,
html body.led-typography h6 a,
html body .led-typography h1 a,
html body .led-typography h2 a,
html body .led-typography h3 a,
html body .led-typography h4 a,
html body .led-typography h5 a,
html body .led-typography h6 a,
html body .content-container h1 a,
html body .content-container h2 a,
html body .content-container h3 a,
html body .content-container h4 a,
html body .content-container h5 a,
html body .content-container h6 a {
    font-family:    var(--font-family-heading, Oswald, "Arial Black", Arial, sans-serif);
    font-weight:    var(--font-weight-heading);
    text-transform: var(--text-transform-heading, uppercase);
    letter-spacing: var(--letter-spacing-heading);
    text-decoration: none;
    color: inherit;
}

html body.led-typography h1 a:hover,
html body.led-typography h2 a:hover,
html body.led-typography h3 a:hover,
html body.led-typography h4 a:hover,
html body.led-typography h5 a:hover,
html body.led-typography h6 a:hover,
html body .led-typography h1 a:hover,
html body .led-typography h2 a:hover,
html body .led-typography h3 a:hover,
html body .led-typography h4 a:hover,
html body .led-typography h5 a:hover,
html body .led-typography h6 a:hover,
html body .content-container h1 a:hover,
html body .content-container h2 a:hover,
html body .content-container h3 a:hover,
html body .content-container h4 a:hover,
html body .content-container h5 a:hover,
html body .content-container h6 a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* -------------------------------------------------------------------------
   Helper scale classes — apply heading scale to any element
   ------------------------------------------------------------------------- */

.led-h1 { font-size: var(--font-size-h1) !important; }
.led-h2 { font-size: var(--font-size-h2) !important; }
.led-h3 { font-size: var(--font-size-h3) !important; }
.led-h4 { font-size: var(--font-size-h4) !important; }
.led-h5 { font-size: var(--font-size-h5) !important; }

.led-h1, .led-h2, .led-h3, .led-h4, .led-h5 {
    font-family:    var(--font-family-heading, Oswald, "Arial Black", Arial, sans-serif);
    font-weight:    var(--font-weight-heading);
    text-transform: var(--text-transform-heading, uppercase);
    letter-spacing: var(--letter-spacing-heading);
    line-height:    var(--line-height-heading);
    margin-top:     var(--heading-margin-top);
    margin-bottom:  var(--heading-margin-bottom);
}
.led-small, .small-text, .small-body-text {
    font-size: var(--font-size-small);
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button,
.wp-block-button__link {
    font-family:    var(--font-family-button, Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
    font-size:      var(--font-size-btn);
    font-weight:    var(--font-weight-button);
    text-transform: var(--text-transform-button, none);
    letter-spacing: var(--letter-spacing-button);
    line-height:    var(--line-height-button);
}

/* -------------------------------------------------------------------------
   Lists — global fallback (content areas use scoped rules above)
   ------------------------------------------------------------------------- */

ul, ol {
    line-height: var(--line-height-body);
}

/* -------------------------------------------------------------------------
   Desktop overrides  (≥ 981 px — matches Divi breakpoint)
   ------------------------------------------------------------------------- */

@media (min-width: 981px) {

    html body.led-typography h1,
    html body .led-typography h1,
    html body .content-container h1{ font-size: var(--font-size-h1-desktop) !important; }

    html body.led-typography h2,
    html body .led-typography h2,
    html body .content-container h2{ font-size: var(--font-size-h2-desktop) !important; }

    html body.led-typography h3,
    html body .led-typography h3,
    html body .content-container h3{ font-size: var(--font-size-h3-desktop) !important; }

    html body.led-typography h4,
    html body .led-typography h4,
    html body .content-container h4{ font-size: var(--font-size-h4-desktop) !important; }

    html body.led-typography h5,
    html body .led-typography h5,
    html body .content-container h5{ font-size: var(--font-size-h5-desktop) !important; }

    html body.led-typography h6,
    html body .led-typography h6,
    html body .content-container h6{ font-size: var(--font-size-h5-desktop) !important; }

    html body.led-typography h1,
    html body.led-typography h2,
    html body.led-typography h3,
    html body.led-typography h4,
    html body.led-typography h5,
    html body.led-typography h6,
    html body .led-typography h1,
    html body .led-typography h2,
    html body .led-typography h3,
    html body .led-typography h4,
    html body .led-typography h5,
    html body .led-typography h6,
    html body .content-container h1,
    html body .content-container h2,
    html body .content-container h3,
    html body .content-container h4,
    html body .content-container h5,
    html body .content-container h6{
        margin-top:    var(--heading-margin-top-desktop, var(--heading-margin-top));
        margin-bottom: var(--heading-margin-bottom-desktop, var(--heading-margin-bottom));
    }

    body {
        font-size: var(--font-size-body-desktop, var(--font-size-body));
    }

    html body.led-typography p,
    html body .led-typography p,
    html body .content-container p,
    html body.led-typography li,
    html body .led-typography li,
    html body .content-container li,
    html body.led-typography blockquote,
    html body .led-typography blockquote,
    html body .content-container blockquote,
    html body.led-typography dd,
    html body .led-typography dd,
    html body .content-container dd,
    html body.led-typography dt,
    html body .led-typography dt,
    html body .content-container dt,
    html body.led-typography figcaption,
    html body .led-typography figcaption,
    html body .content-container figcaption {
        font-size: var(--font-size-body-desktop, var(--font-size-body)) !important;
    }

    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    .button,
    .wp-block-button__link {
        font-size: var(--font-size-btn-desktop, var(--font-size-btn));
    }

    ul, ol {
        line-height: var(--line-height-body);
    }

    .led-small, .small-text, .small-body-text {
        font-size: var(--font-size-small-desktop, var(--font-size-small));
    }

    .led-h1 { font-size: var(--font-size-h1-desktop) !important; }
    .led-h2 { font-size: var(--font-size-h2-desktop) !important; }
    .led-h3 { font-size: var(--font-size-h3-desktop) !important; }
    .led-h4 { font-size: var(--font-size-h4-desktop) !important; }
    .led-h5 { font-size: var(--font-size-h5-desktop) !important; }

    .led-h1, .led-h2, .led-h3, .led-h4, .led-h5 {
        margin-top:    var(--heading-margin-top-desktop, var(--heading-margin-top));
        margin-bottom: var(--heading-margin-bottom-desktop, var(--heading-margin-bottom));
    }
}

/*
 * Divi-specific overrides live in assets/css/divi.css.
 * Remove that file when migrating away from Divi.
 */