/*
==================================================================
    THE COMPLETE & CONSOLIDATED GLOBAL TYPOGRAPHY SYSTEM
==================================================================
    This single stylesheet creates a unified system for all
    typography and spacing. It is the final "single source of truth".
*/


/*
=========================================
  SECTION 1: UTILITY CLASSES
=========================================
  These classes allow you to apply heading or body styles
  to any element on demand.
*/

.h1-style {
    font-family: var(--e-global-typography-h1-font-family);
    font-size: var(--e-global-typography-h1-font-size);
    font-weight: var(--e-global-typography-h1-font-weight);
    line-height: var(--e-global-typography-h1-line-height);
    color: var(--e-global-color-primary);
}
.h2-style {
    font-family: var(--e-global-typography-h2-font-family);
    font-size: var(--e-global-typography-h2-font-size);
    font-weight: var(--e-global-typography-h2-font-weight);
    line-height: var(--e-global-typography-h2-line-height);
    color: var(--e-global-color-primary);
}
.h3-style {
    font-family: var(--e-global-typography-h3-font-family);
    font-size: var(--e-global-typography-h3-font-size);
    font-weight: var(--e-global-typography-h3-font-weight);
    line-height: var(--e-global-typography-h3-line-height);
    color: var(--e-global-color-secondary);
}
.h4-style {
    font-family: var(--e-global-typography-h4-font-family);
    font-size: var(--e-global-typography-h4-font-size);
    font-weight: var(--e-global-typography-h4-font-weight);
    line-height: var(--e-global-typography-h4-line-height);
    color: var(--e-global-color-text);
}
.h5-style {
    font-family: var(--e-global-typography-h5-font-family);
    font-size: var(--e-global-typography-h5-font-size);
    font-weight: var(--e-global-typography-h5-font-weight);
    line-height: var(--e-global-typography-h5-line-height);
    color: var(--e-global-color-text);
}
.h6-style {
    font-family: var(--e-global-typography-h6-font-family);
    font-size: var(--e-global-typography-h6-font-size);
    font-weight: var(--e-global-typography-h6-font-weight);
    line-height: var(--e-global-typography-h6-line-height);
    color: var(--e-global-color-text);
}
.body-style {
    font-family: var(--e-global-typography-text-font-family);
    font-weight: var(--e-global-typography-text-font-weight);
    font-size: var(--e-global-typography-text-font-size);
    line-height: var(--e-global-typography-text-line-height);
    color: var(--e-global-color-text);
}


/*
=========================================
  SECTION 2: GLOBAL MARGINS & SPACING
=========================================
  This creates a consistent, top-down spacing model.
*/

/* --- Heading Margins --- */
/* This ensures headings in the Text Editor and Heading Widget have the same bottom margin. */
body h1, body .elementor-widget-heading h1.elementor-heading-title { margin-bottom: 0.6em; }
body h2, body .elementor-widget-heading h2.elementor-heading-title { margin-bottom: 0.5em; }
body h3, body .elementor-widget-heading h3.elementor-heading-title { margin-bottom: 0.5em; }
body h4, body .elementor-widget-heading h4.elementor-heading-title,
body h5, body .elementor-widget-heading h5.elementor-heading-title,
body h6, body .elementor-widget-heading h6.elementor-heading-title { margin-bottom: 0.4em; top-margin: 0.2em}


/* --- Paragraph Spacing (The Key Gap Fix) --- */
/* This sets top margin to 0 to prevent additive spacing, and sets a bottom margin for rhythm. */
body .elementor-widget-text-editor p {
    margin-top: 0;
    margin-bottom: 1em;
}


/*
=========================================
  SECTION 3: EDGE-CASE FIXES
=========================================
  This handles specific Elementor quirks.
*/

/* Fixes the squished line-height for <p> tags used inside a Heading widget */
.elementor-widget-heading p.elementor-heading-title {
    line-height: var(--e-global-typography-text-line-height);
}