/**
 * Drezen typography scale — site defaults.
 * Custom widgets use these CSS variables.
 * Elementor can still override per-widget via the editor.
 */

:root {
  --dz-fs-eyebrow: 12px;
  --dz-fs-label: 12px;
  --dz-fs-meta: 13px;
  --dz-fs-button: 14px;
  --dz-fs-body-sm: 15px;
  --dz-fs-body: 16px;
  --dz-fs-h3: 18px;
  --dz-fs-h3-lg: 20px;
  --dz-fs-h2: clamp(32px, 3.8vw, 40px);
  --dz-fs-lead: clamp(18px, 2vw, 20px);
  --dz-fw-heading: 600;
  --dz-fw-body: 400;
  --dz-lh-body: 1.7;
  --dz-lh-heading: 1.15;
}

@media (max-width: 767px) {
  :root {
    --dz-fs-eyebrow: 11px;
    --dz-fs-label: 11px;
    --dz-fs-meta: 12px;
    --dz-fs-button: 14px;
    --dz-fs-body-sm: 14px;
    --dz-fs-body: 15px;
    --dz-fs-h3: 17px;
    --dz-fs-h3-lg: 18px;
    --dz-fs-h2: clamp(28px, 7vw, 32px);
    --dz-fs-lead: 17px;
  }
}

/*
 * Homepage Elementor typography — scoped to #content only.
 * Do NOT target #colophon / footer: body.home also wraps the HFE footer,
 * and forcing section H2 scale there blows up footer column titles.
 */
body.home #content .elementor-widget-text-editor p,
body.home #content .elementor-widget-text-editor li {
  font-size: var(--dz-fs-body);
  line-height: var(--dz-lh-body);
}

body.home #content .elementor-widget-icon-box .elementor-icon-box-description {
  font-size: var(--dz-fs-body-sm) !important;
  line-height: 1.5 !important;
}

/* Section H2s from ElementsKit — page content only */
body.home #content .elementor .elementor-widget-elementskit-heading h2.elementskit-section-title,
body.home #content .elementor .elementor-widget-elementskit-heading h2.elementskit-heading__title,
body.home #content .elementor .elementor-widget-elementskit-heading .elementskit-section-title {
  font-size: var(--dz-fs-h2) !important;
  font-weight: var(--dz-fw-heading) !important;
  line-height: var(--dz-lh-heading) !important;
}

/* Hero stays large */
body.home #content .elementor .elementor-widget-elementskit-heading h1.elementskit-section-title,
body.home #content .elementor .elementor-widget-elementskit-heading h1 {
  font-size: clamp(40px, 6vw, 60px) !important;
  font-weight: var(--dz-fw-heading) !important;
  line-height: 1.05 !important;
}

/* Icon-box titles (stats etc.) */
body.home #content .elementor-widget-icon-box .elementor-icon-box-title,
body.home #content .elementor-widget-icon-box .elementor-icon-box-title span {
  font-weight: var(--dz-fw-heading) !important;
}

/* Drezen widget headings */
[class*="dz-"] h1,
[class*="dz-"] h2,
[class*="dz-"] h3,
[class*="dz-"] [class$="__title"],
[class*="dz-"] [class*="__title"],
[class*="dz-"] [class$="__card-title"],
[class*="dz-"] [class$="__step-title"],
[class*="dz-"] [class$="__form-title"],
[class*="dz-"] [class$="__info-title"] {
  font-weight: var(--dz-fw-heading);
}

/* Homepage HTML section titles (certs / projects) — default weight 600 */
body.home #content .cert-title,
body.home #content .projects-head h2 {
  font-weight: var(--dz-fw-heading) !important;
}

/* Subtitle / eyebrow style ElementsKit labels */
body.home #content .elementor-widget-elementskit-heading .elementskit-heading__subtitle,
body.home #content .elementor-widget-elementskit-heading .elementkit-heading-subtitle {
  font-size: var(--dz-fs-eyebrow) !important;
  letter-spacing: 2px;
}

/* Footer headings: do not inherit homepage section H2 scale (Elementor owns footer sizes) */