/* ─────────────────────────────────────────────────────────────────────────────
   Elementor → Vizolutions theme bridge
   Maps Elementor's stock widget output to the site's typography, colors, and
   button styles so new Elementor pages look consistent with hand-coded ones.
   Covers BOTH legacy widgets (.elementor-button, .elementor-widget-heading)
   AND v4 Atomic widgets (.e-button-base, .e-heading-base, .e-paragraph-base).
   Per-widget Elementor controls (font size, color picker) still win when set
   because they're applied per-widget with higher specificity / inline styles.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Headings ───────────────────────────────────────────────────────────────── */
/* v4 Atomic */
body .e-heading-base,
/* Legacy */
body .elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: var(--foreground);
    margin-block-end: 1.25rem;
}
body h1.e-heading-base, body .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(2.5rem, 6vw, 4.5rem); }
body h2.e-heading-base, body .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(2rem, 4.5vw, 3.25rem); }
body h3.e-heading-base, body .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(1.5rem, 3vw, 2.25rem); }
body h4.e-heading-base, body .elementor-widget-heading h4.elementor-heading-title { font-size: 1.5rem; }
body h5.e-heading-base, body .elementor-widget-heading h5.elementor-heading-title { font-size: 1.25rem; }
body h6.e-heading-base, body .elementor-widget-heading h6.elementor-heading-title { font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Paragraph / body text ──────────────────────────────────────────────────── */
/* v4 Atomic */
body .e-paragraph-base,
/* Legacy text editor widget */
body .elementor-widget-text-editor,
body .elementor-widget-text-editor p {
    font-family: var(--font-body);
    color: var(--foreground);
    font-size: 1rem;
    line-height: 1.7;
    margin-block-end: 1.75rem;
}
body .e-paragraph-base a,
body .elementor-widget-text-editor a {
    color: var(--primary);
}
body .e-paragraph-base a:hover,
body .elementor-widget-text-editor a:hover {
    color: var(--primary-hover);
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
/* v4 Atomic widget renders as <button class="e-button-base"> with no other
   identifying classes, so we have to use !important to beat Elementor's own
   per-widget defaults. Per-widget customizations in the Style panel get
   applied inline with !important and will still win. */
body .e-button-base,
body .elementor-widget-button .elementor-button,
body .elementor-widget-button a.elementor-button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 1rem 2rem !important;
    border-radius: var(--radius-sm) !important;
    border: none !important;
    line-height: 1 !important;
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    fill: var(--primary-foreground) !important;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    text-decoration: none;
}
body .e-button-base:hover,
body .elementor-widget-button .elementor-button:hover,
body .elementor-widget-button a.elementor-button-link:hover {
    background-color: var(--primary-hover) !important;
    color: #fff !important;
    fill: #fff !important;
}

/* Outline variant — add CSS class "btn--outline" to the button widget's
   Advanced > CSS Classes field. */
body .e-button-base.btn--outline,
body .elementor-widget-button .elementor-button.btn--outline,
body .elementor-widget-button a.elementor-button-link.btn--outline {
    background-color: transparent !important;
    border: 2px solid var(--primary) !important;
    color: var(--primary) !important;
}
body .e-button-base.btn--outline:hover,
body .elementor-widget-button .elementor-button.btn--outline:hover,
body .elementor-widget-button a.elementor-button-link.btn--outline:hover {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

/* ── Section / column safe defaults ──────────────────────────────────────────── */
.elementor-section,
.elementor-element,
.e-div-block-base {
    color: var(--foreground);
}