/* =========================
   MG LEADBUILDER 2025 - TYPOGRAPHY UTILITIES
   Generated from typography tokens CSV
   ========================= */

/* Note: @layer order declared in main design system file */

/* =========================
   ALIAS SYSTEM
   ========================= */

/*
This file uses stable aliases (--mg-font-*-family) instead of direct Elementor variables.
Aliases are defined in the main design system file (:root) and provide:
- Stable references that don't change when Elementor IDs change
- Built-in fallbacks (Georgia for headlines, Arial for body text)
- Single point of maintenance for Elementor variable mappings

Example:
.mg-font-h1 { font-family: var(--mg-font-h1-family); }
Points to: var(--e-global-typography-8888fbc-font-family, "Georgia"), serif
*/

/* =========================
   FONT WEIGHT UTILITIES
   ========================= */

@layer utilities {
  /* Font Weight - mg- prefix only */
  .mg-light { font-weight: 300; }
  .mg-normal { font-weight: 400; }
  .mg-medium { font-weight: 500; }
  .mg-semibold { font-weight: 600; }
  .mg-bold { font-weight: 700; }
  .mg-extrabold { font-weight: 800; }
}

/* =========================
   ELEMENTOR OVERRIDE UTILITIES
   Force bold typography classes to work in Elementor
   ========================= */

@layer overrides {
  /* Ultra-specific selectors to override Elementor inline styles */
  .elementor-widget-text-editor .mg-font-body-bold,
  .elementor-widget-text-editor .mg-font-body-xs-bold,
  .elementor-widget-text-editor .mg-font-body-large-bold,
  .elementor-widget-text-editor .mg-font-body-xl-bold,
  .elementor-widget-text-editor .mg-font-body-small-bold,
  .elementor-widget-heading .mg-font-h1,
  .elementor-widget-heading .mg-font-h2,
  .elementor-widget-heading .mg-font-h3,
  .elementor-widget-heading .mg-font-h4,
  .elementor-widget-heading .mg-font-h5,
  .elementor-widget-heading .mg-font-h6 {
    font-weight: 700 !important;
  }
  
  /* H5 and H6 use 600 weight */
  .elementor-widget-heading .mg-font-h5,
  .elementor-widget-heading .mg-font-h6 {
    font-weight: 600 !important;
  }
}


/* =========================
   SYSTEM TYPOGRAPHY (ELEMENTOR GLOBAL)
   ========================= */

@layer utilities {
/* Default Heading - Elementor system typography - Primary */
.mg-font-default-heading {
  font-family: var(--mg-font-default-heading-family);
  font-size: var(--e-global-typography-primary-font-size, clamp(1.5rem, 2vw, 2rem));
  font-weight: var(--e-global-typography-primary-font-weight, var(--mg-font-default-heading-weight, 700));
  line-height: var(--e-global-typography-primary-line-height, 1.4);
  letter-spacing: var(--e-global-typography-primary-letter-spacing, -0.01em);
}

/* Default Subtitle - Elementor system typography - Secondary */
.mg-font-default-subtitle {
  font-family: var(--mg-font-default-subtitle-family);
  font-size: var(--e-global-typography-secondary-font-size, clamp(1.25rem, 1.5vw, 1.75rem));
  font-weight: var(--e-global-typography-secondary-font-weight, var(--mg-font-default-subtitle-weight, 600));
  line-height: var(--e-global-typography-secondary-line-height, 1.4);
  letter-spacing: var(--e-global-typography-secondary-letter-spacing, -0.01em);
}

/* Default Body - Elementor system typography - Text */
.mg-font-default-body {
  font-family: var(--mg-font-default-body-family);
  font-size: var(--e-global-typography-text-font-size, clamp(1rem, 1vw, 1.125rem));
  font-weight: var(--e-global-typography-text-font-weight, var(--mg-font-default-body-weight, 400));
  line-height: var(--e-global-typography-text-line-height, 1.6);
  letter-spacing: var(--e-global-typography-text-letter-spacing, normal);
}

/* Default Accent - Elementor system typography - Accent */
.mg-font-default-accent {
  font-family: var(--mg-font-default-accent-family);
  font-size: var(--e-global-typography-accent-font-size, clamp(0.875rem, 1vw, 1rem));
  font-weight: var(--e-global-typography-accent-font-weight, 500);
  line-height: var(--e-global-typography-accent-line-height, 1.5);
  letter-spacing: var(--e-global-typography-accent-letter-spacing, 0.02em);
}

/* =========================
   HEADING UTILITIES
   ========================= */

/* H1 - Semantic H1 */
.mg-font-h1,
.elementor-widget-heading .mg-font-h1,
.elementor-element .mg-font-h1 {
  font-family: var(--mg-font-h1-family);
  font-size: var(--mg-font-h1-size);
  font-weight: var(--mg-font-h1-weight, 700) !important;
  line-height: var(--mg-font-h1-line);
  letter-spacing: var(--mg-font-h1-track);
}

/* H2 - Semantic H2 */
.mg-font-h2,
.elementor-widget-heading .mg-font-h2,
.elementor-element .mg-font-h2 {
  font-family: var(--mg-font-h2-family);
  font-size: var(--mg-font-h2-size);
  font-weight: var(--mg-font-h2-weight, 700) !important;
  line-height: var(--mg-font-h2-line);
  letter-spacing: var(--mg-font-h2-track);
}

/* H3 - Semantic H3 */
.mg-font-h3,
.elementor-widget-heading .mg-font-h3,
.elementor-element .mg-font-h3 {
  font-family: var(--mg-font-h3-family);
  font-size: var(--mg-font-h3-size);
  font-weight: var(--mg-font-h3-weight, 700) !important;
  line-height: var(--mg-font-h3-line);
  letter-spacing: var(--mg-font-h3-track);
}

/* H4 - Semantic H4 */
.mg-font-h4,
.elementor-widget-heading .mg-font-h4,
.elementor-element .mg-font-h4 {
  font-family: var(--mg-font-h4-family);
  font-size: var(--mg-font-h4-size);
  font-weight: var(--mg-font-h4-weight, 700) !important;
  line-height: var(--mg-font-h4-line);
  letter-spacing: var(--mg-font-h4-track);
}

/* H5 - Semantic H5 */
.mg-font-h5,
.elementor-widget-heading .mg-font-h5,
.elementor-element .mg-font-h5 {
  font-family: var(--mg-font-h5-family);
  font-size: var(--mg-font-h5-size);
  font-weight: var(--mg-font-h5-weight, 600) !important;
  line-height: var(--mg-font-h5-line);
  letter-spacing: var(--mg-font-h5-track);
}

/* H6 - Semantic H6 */
.mg-font-h6,
.elementor-widget-heading .mg-font-h6,
.elementor-element .mg-font-h6 {
  font-family: var(--mg-font-h6-family);
  font-size: var(--mg-font-h6-size);
  font-weight: var(--mg-font-h6-weight, 600) !important;
  line-height: var(--mg-font-h6-line);
  letter-spacing: var(--mg-font-h6-track);
}

/* Hero Headline - Large homepage hero title */
.mg-font-hero-headline {
  font-family: var(--mg-font-hero-headline-family);
  font-size: var(--mg-font-hero-headline-size, clamp(2.25rem, 5vw, 3rem));
  font-weight: var(--mg-font-hero-headline-weight, 700);
  line-height: var(--mg-font-hero-headline-line, 1.2);
  letter-spacing: var(--mg-font-hero-headline-track, -0.02em);
}

/* Page Hero Headline - H1 on internal pages */
.mg-font-page-hero-headline {
  font-family: var(--mg-font-page-hero-headline-family);
  font-size: var(--mg-font-page-hero-headline-size, clamp(2rem, 3vw, 2.5rem));
  font-weight: var(--mg-font-page-hero-headline-weight, 700);
  line-height: var(--mg-font-page-hero-headline-line, 1.3);
  letter-spacing: var(--mg-font-page-hero-headline-track, -0.01em);
}

/* Section Headline - Headings for reusable layout sections */
.mg-font-section-headline {
  font-family: var(--mg-font-section-headline-family);
  font-size: var(--mg-font-section-headline-size, clamp(1.5rem, 2vw, 2rem));
  font-weight: var(--mg-font-section-headline-weight, 700);
  line-height: var(--mg-font-section-headline-line, 1.4);
  letter-spacing: var(--mg-font-section-headline-track, -0.01em);
}

/* XL Heading - Largest display headline */
.mg-font-xl-heading {
  font-family: var(--mg-font-xl-heading-family);
  font-size: var(--mg-font-xl-heading-size, clamp(2.5rem, 6vw, 3.5rem));
  font-weight: var(--mg-font-xl-heading-weight, 700);
  line-height: var(--mg-font-xl-heading-line, 1.2);
  letter-spacing: var(--mg-font-xl-heading-track, -0.03em);
}

/* =========================
   SUBTITLE UTILITIES
   ========================= */

/* Widget Heading - Headings inside feature widgets */
.mg-font-widget-heading {
  font-family: var(--mg-font-widget-heading-family);
  font-size: var(--mg-font-widget-heading-size, clamp(1.25rem, 1.2vw, 1.5rem));
  font-weight: var(--mg-font-widget-heading-weight, 700);
  line-height: var(--mg-font-widget-heading-line, 1.4);
  letter-spacing: var(--mg-font-widget-heading-track, -0.01em);
}

/* Hero Subtitle - Supporting tagline below hero */
.mg-font-hero-subtitle {
  font-family: var(--mg-font-hero-subtitle-family);
  font-size: var(--mg-font-hero-subtitle-size, clamp(1.25rem, 2vw, 1.5rem));
  font-weight: var(--mg-font-hero-subtitle-weight, 400);
  line-height: var(--mg-font-hero-subtitle-line, 1.6);
  letter-spacing: var(--mg-font-hero-subtitle-track, normal);
}

/* Page Intro Text - Descriptive text below page title */
.mg-font-page-intro-text {
  font-family: var(--mg-font-page-intro-text-family);
  font-size: var(--mg-font-page-intro-text-size, clamp(1rem, 1.5vw, 1.25rem));
  font-weight: var(--mg-font-page-intro-text-weight, 400);
  line-height: var(--mg-font-page-intro-text-line, 1.6);
  letter-spacing: var(--mg-font-page-intro-text-track, normal);
}

/* =========================
   BODY TEXT UTILITIES
   ========================= */

/* Body Text - Default paragraph text */
.mg-font-body {
  font-family: var(--mg-font-body-family);
  font-size: var(--mg-font-body-size);
  font-weight: var(--mg-font-body-weight);
  line-height: var(--mg-font-body-line);
  letter-spacing: var(--mg-font-body-track);
}

/* Body Text Bold - Strong body emphasis */
.mg-font-body-bold,
.elementor-widget-text-editor .mg-font-body-bold,
.elementor-element .mg-font-body-bold,
.elementor-widget-heading .mg-font-body-bold,
.elementor-widget-text-editor p.mg-font-body-bold,
.elementor-widget-text-editor div.mg-font-body-bold,
.elementor-widget-text-editor span.mg-font-body-bold,
.elementor-element p.mg-font-body-bold,
.elementor-element div.mg-font-body-bold,
.elementor-element span.mg-font-body-bold,
.elementor-widget-heading p.mg-font-body-bold,
.elementor-widget-heading div.mg-font-body-bold,
.elementor-widget-heading span.mg-font-body-bold {
  font-family: var(--mg-font-body-bold-family, Arial), Helvetica, sans-serif;
  font-size: var(--mg-font-body-bold-size, clamp(1rem, 1vw, 1.125rem));
  font-weight: var(--mg-font-body-bold-weight, 700) !important;
  line-height: var(--mg-font-body-bold-line, 1.6);
  letter-spacing: var(--mg-font-body-bold-track, normal);
}

/* Body Text Underlined - Underlined body text */
.mg-font-body-underlined {
  font-family: var(--mg-font-body-underlined-family);
  font-size: var(--mg-font-body-underlined-size, clamp(1rem, 1vw, 1.125rem));
  font-weight: var(--mg-font-body-underlined-weight, 400);
  line-height: var(--mg-font-body-underlined-line, 1.6);
  letter-spacing: var(--mg-font-body-underlined-track, 0);
  text-decoration: underline;
}

/* Body XS - Extra small body text */
.mg-font-body-xs {
  font-family: var(--mg-font-body-xs-family);
  font-size: var(--mg-font-body-xs-size, clamp(0.75rem, 0.9vw, 0.875rem));
  font-weight: var(--mg-font-body-xs-weight, 400);
  line-height: var(--mg-font-body-xs-line, 1.6);
  letter-spacing: var(--mg-font-body-xs-track, 0);
}

/* Body XS Bold - Extra small bold body text */
.mg-font-body-xs-bold,
.elementor-widget-text-editor .mg-font-body-xs-bold,
.elementor-element .mg-font-body-xs-bold,
.elementor-widget-heading .mg-font-body-xs-bold {
  font-family: var(--mg-font-body-xs-bold-family);
  font-size: var(--mg-font-body-xs-bold-size, clamp(0.75rem, 0.9vw, 0.875rem));
  font-weight: var(--mg-font-body-xs-bold-weight, 700) !important;
  line-height: var(--mg-font-body-xs-bold-line, 1.6);
  letter-spacing: var(--mg-font-body-xs-bold-track, 0);
}

/* Body XS Underlined - Extra small underlined body text */
.mg-font-body-xs-underlined {
  font-family: var(--mg-font-body-xs-underlined-family);
  font-size: var(--mg-font-body-xs-underlined-size, clamp(0.75rem, 0.9vw, 0.875rem));
  font-weight: var(--mg-font-body-xs-underlined-weight, 400);
  line-height: var(--mg-font-body-xs-underlined-line, 1.6);
  letter-spacing: var(--mg-font-body-xs-underlined-track, 0);
  text-decoration: underline;
}

/* Body Small - For captions, disclaimers */
.mg-font-body-small {
  font-family: var(--mg-font-body-small-family);
  font-size: var(--mg-font-body-small-size);
  font-weight: var(--mg-font-body-small-weight);
  line-height: var(--mg-font-body-small-line);
  letter-spacing: var(--mg-font-body-small-track);
}

/* Body Large - Slightly enlarged body text */
.mg-font-body-large {
  font-family: var(--mg-font-body-large-family);
  font-size: var(--mg-font-body-large-size);
  font-weight: var(--mg-font-body-large-weight);
  line-height: var(--mg-font-body-large-line);
  letter-spacing: var(--mg-font-body-large-track);
}

/* Body Large Bold - Large bold paragraph */
.mg-font-body-large-bold,
.elementor-widget-text-editor .mg-font-body-large-bold,
.elementor-element .mg-font-body-large-bold,
.elementor-widget-heading .mg-font-body-large-bold {
  font-family: var(--mg-font-body-large-bold-family);
  font-size: var(--mg-font-body-large-bold-size);
  font-weight: var(--mg-font-body-large-bold-weight, 700) !important;
  line-height: var(--mg-font-body-large-bold-line);
  letter-spacing: var(--mg-font-body-large-bold-track);
}

/* Body Large Underlined - Large underlined body */
.mg-font-body-large-underlined {
  font-family: var(--mg-font-body-large-underlined-family);
  font-size: var(--mg-font-body-large-underlined-size);
  font-weight: var(--mg-font-body-large-underlined-weight);
  line-height: var(--mg-font-body-large-underlined-line);
  letter-spacing: var(--mg-font-body-large-underlined-track);
  text-decoration: underline;
}

/* Body XL - Extra large body text for emphasis */
.mg-font-body-xl {
  font-family: var(--mg-font-body-xl-family);
  font-size: var(--mg-font-body-xl-size);
  font-weight: var(--mg-font-body-xl-weight);
  line-height: var(--mg-font-body-xl-line);
  letter-spacing: var(--mg-font-body-xl-track);
}

/* Body XL Bold - Extra large bold body text */
.mg-font-body-xl-bold {
  font-family: var(--mg-font-body-xl-bold-family);
  font-size: var(--mg-font-body-xl-bold-size);
  font-weight: var(--mg-font-body-xl-bold-weight, 700) !important;
  line-height: var(--mg-font-body-xl-bold-line);
  letter-spacing: var(--mg-font-body-xl-bold-track);
}

/* Body XL Underlined - Extra large underlined body text */
.mg-font-body-xl-underlined {
  font-family: var(--mg-font-body-xl-underlined-family);
  font-size: var(--mg-font-body-xl-underlined-size);
  font-weight: var(--mg-font-body-xl-underlined-weight);
  line-height: var(--mg-font-body-xl-underlined-line);
  letter-spacing: var(--mg-font-body-xl-underlined-track);
  text-decoration: underline;
}

/* Body Small - For captions, disclaimers */
.mg-font-body-small {
  font-family: var(--mg-font-body-small-family);
  font-size: var(--mg-font-body-small-size);
  font-weight: var(--mg-font-body-small-weight);
  line-height: var(--mg-font-body-small-line);
  letter-spacing: var(--mg-font-body-small-track);
}

/* Body Small Bold - Strong emphasis for small text */
.mg-font-body-small-bold {
  font-family: var(--mg-font-body-small-bold-family);
  font-size: var(--mg-font-body-small-bold-size);
  font-weight: var(--mg-font-body-small-bold-weight, 700) !important;
  line-height: var(--mg-font-body-small-bold-line);
  letter-spacing: var(--mg-font-body-small-bold-track);
}

/* Body Small Underlined - Underlined fine print */
.mg-font-body-small-underlined {
  font-family: var(--mg-font-body-small-underlined-family);
  font-size: var(--mg-font-body-small-underlined-size);
  font-weight: var(--mg-font-body-small-underlined-weight);
  line-height: var(--mg-font-body-small-underlined-line);
  letter-spacing: var(--mg-font-body-small-underlined-track);
  text-decoration: underline;
}

/* Body Text XL - Enlarged general content */
.mg-font-xl-body {
  font-family: var(--mg-font-xl-body-family);
  font-size: var(--mg-font-xl-body-size);
  font-weight: var(--mg-font-xl-body-weight);
  line-height: var(--mg-font-xl-body-line);
  letter-spacing: var(--mg-font-xl-body-track);
}

/* =========================
   ACCENT UTILITIES
   ========================= */

/* Uppercase Text - All caps text */
.mg-font-uppercase {
  font-family: var(--mg-font-uppercase-family);
  font-size: var(--mg-font-uppercase-size, clamp(1rem, 1vw, 1.125rem));
  font-weight: var(--mg-font-uppercase-weight, 500);
  line-height: var(--mg-font-uppercase-line, 1.4);
  letter-spacing: var(--mg-font-uppercase-track, 0.05em);
}

/* Navigation Text - Nav and menu links */
.mg-font-navigation {
  font-family: var(--mg-font-navigation-family);
  font-size: var(--mg-font-navigation-size, clamp(0.875rem, 1vw, 1rem));
  font-weight: var(--mg-font-navigation-weight, 500);
  line-height: var(--mg-font-navigation-line, 1.5);
  letter-spacing: var(--mg-font-navigation-track, 0.02em);
}

/* Button Text - Primary button font */
.mg-font-button {
  font-family: var(--mg-font-button-family);
  font-size: var(--mg-font-button-size, clamp(0.875rem, 1vw, 1rem));
  font-weight: var(--mg-font-button-weight, 700);
  line-height: var(--mg-font-button-line, 1.5);
  letter-spacing: var(--mg-font-button-track, 0.02em);
}

/* Button Text Large - Bigger button font */
.mg-font-button-large {
  font-family: var(--mg-font-button-large-family);
  font-size: var(--mg-font-button-large-size, clamp(1rem, 1vw, 1.125rem));
  font-weight: var(--mg-font-button-large-weight, 700);
  line-height: var(--mg-font-button-large-line, 1.5);
  letter-spacing: var(--mg-font-button-large-track, 0.02em);
}

  /* =========================
     NICE-TO-HAVE UTILITIES
     ========================= */
  
  /* Line-wrap helpers (progressive enhancement) */
  @supports (text-wrap: balance) {
    :where(.text-balance){ text-wrap: balance; }
  }
  @supports (text-wrap: pretty) {
    :where(.text-pretty){ text-wrap: pretty; }
  }

  /* Numeric formatting utilities */
  :where(.num-tabular){      font-variant-numeric: tabular-nums; }
  :where(.num-lining){       font-variant-numeric: lining-nums; }
  :where(.num-oldstyle){     font-variant-numeric: oldstyle-nums; }
  :where(.num-proportional){ font-variant-numeric: proportional-nums; }

  /* Monospace utility (paired with a token) */
  :where(.mg-font-mono){ font-family: var(--mg-font-mono-family, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace); }

}

/* =========================
   BASE SEMANTICS (Low specificity safety net)
   ========================= */

@layer base {
/* Lightweight semantic defaults - easy to override */
:where(h1) { 
  font-family: var(--mg-font-h1-family); 
  font-size: var(--mg-font-h1-size, clamp(1.75rem, 2.5vw, 2.25rem)); 
  font-weight: var(--mg-font-h1-weight, 700); 
  line-height: var(--mg-font-h1-line, 1.3); 
  letter-spacing: var(--mg-font-h1-track, -0.01em); 
}

:where(h2) { 
  font-family: var(--mg-font-h2-family); 
  font-size: var(--mg-font-h2-size, clamp(1.5rem, 2vw, 2rem)); 
  font-weight: var(--mg-font-h2-weight, 700); 
  line-height: var(--mg-font-h2-line, 1.4); 
  letter-spacing: var(--mg-font-h2-track, -0.01em); 
}

:where(h3) { 
  font-family: var(--mg-font-h3-family); 
  font-size: var(--mg-font-h3-size, clamp(1.25rem, 1.5vw, 1.75rem)); 
  font-weight: var(--mg-font-h3-weight, 700); 
  line-height: var(--mg-font-h3-line, 1.4); 
  letter-spacing: var(--mg-font-h3-track, -0.01em); 
}

:where(h4) { 
  font-family: var(--mg-font-h4-family); 
  font-size: var(--mg-font-h4-size, clamp(1.125rem, 1.2vw, 1.5rem)); 
  font-weight: var(--mg-font-h4-weight, 700); 
  line-height: var(--mg-font-h4-line, 1.5); 
  letter-spacing: var(--mg-font-h4-track, -0.01em); 
}

:where(h5) { 
  font-family: var(--mg-font-h5-family); 
  font-size: var(--mg-font-h5-size, clamp(1.125rem, 1vw, 1.375rem)); 
  font-weight: var(--mg-font-h5-weight, 700); 
  line-height: var(--mg-font-h5-line, 1.5); 
  letter-spacing: var(--mg-font-h5-track, -0.01em); 
}

:where(h6) { 
  font-family: var(--mg-font-h6-family); 
  font-size: var(--mg-font-h6-size, clamp(1rem, 1vw, 1.125rem)); 
  font-weight: var(--mg-font-h6-weight, 700); 
  line-height: var(--mg-font-h6-line, 1.5); 
  letter-spacing: var(--mg-font-h6-track, -0.01em); 
}
}

/* =========================
   ELEMENTOR USAGE PATTERN
   ========================= */

/*
ELEMENTOR INTEGRATION GUIDE:

1. In Elementor Site Settings → Typography, set widgets to "Default" where possible
2. On a widget, clear Typography controls (no inline styles)
3. Add mg-font-* classes in the widget's CSS Classes field
4. If a widget still outputs inline styles, remove them or use mg-font-inherit as escape hatch

EXAMPLE:
<div class="elementor-widget mg-font-h2 mg-font-body">
  <h2>This will use mg-font-h2</h2>
  <p>This will use mg-font-body</p>
</div>

TROUBLESHOOTING:
- If styles aren't applying, check for inline styles in Elementor
- Use mg-font-inherit to escape unwanted typography
- Base semantic styles (h1-h6) provide fallbacks but mg-font-* classes take precedence
*/

/* End typography utilities */