/*
 * Elementor ↔ Theme bridge
 * Maps the theme's Tailwind/HSL design tokens onto Elementor-generated markup
 * so body content styled by Elementor visually matches the header and footer.
 */

/* ===================================================================
   1. BASE TYPOGRAPHY — force Elementor to use theme fonts
   =================================================================== */

body,
.elementor,
.elementor *:not(i):not(.eicon):not([class*="fa-"]):not([class*="eicon-"]) {
    font-family: var(--bcl-font-body, 'Inter', sans-serif);
}

/* Headings get the display / heading font */
.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6,
.elementor .elementor-heading-title,
.elementor .elementor-widget-heading .elementor-heading-title {
    font-family: var(--bcl-font-heading, 'Outfit', sans-serif);
    color: hsl(var(--foreground));
}

/* Body / paragraph text */
.elementor .elementor-widget-text-editor {
    font-family: var(--bcl-font-body, 'Inter', sans-serif);
    color: hsl(var(--text-muted, 148 11% 34%));
    line-height: 1.625;
}

/* Allow Elementor widget-level text color controls to cascade correctly. */
.elementor .elementor-widget-text-editor p,
.elementor .elementor-widget-text-editor li,
.elementor .elementor-widget-text-editor span {
    color: inherit;
}

/* ===================================================================
   2. GLOBAL COLOR TOKENS — Elementor's "Global Colors" CSS vars
   Map them to the theme tokens so widgets using "Global" colors
   automatically match.
   =================================================================== */

:root {
    /* Elementor global color slots */
    --e-global-color-primary:   hsl(var(--primary));
    --e-global-color-secondary: hsl(var(--secondary, 102 33% 96%));
    --e-global-color-text:      hsl(var(--text, 146 26% 16%));
    --e-global-color-accent:    hsl(var(--accent));

    /* Elementor global typography */
    --e-global-typography-primary-font-family:   var(--bcl-font-heading, 'Outfit', sans-serif);
    --e-global-typography-secondary-font-family: var(--bcl-font-heading, 'Outfit', sans-serif);
    --e-global-typography-text-font-family:      var(--bcl-font-body, 'Inter', sans-serif);
    --e-global-typography-accent-font-family:    var(--bcl-font-body, 'Inter', sans-serif);
}

/* ===================================================================
   3. SECTION / COLUMN BACKGROUNDS
   =================================================================== */

/* Default section background matches the theme background */
.elementor-section {
    background-color: hsl(var(--background));
}

/* Cards & inner sections get the card background */
.elementor-section .elementor-section,
.elementor-widget-wrap {
    /* inherit by default – don't force a background on inner containers */
}

/* ===================================================================
   4. HEADINGS — sizes & weight that match the static template
   =================================================================== */

.elementor .elementor-heading-title {
    font-weight: 400;
    letter-spacing: -0.025em;
}

.elementor-widget-heading .elementor-heading-title.elementor-size-default {
    /* Let Elementor's size setting win, but ensure font matches */
}

/* ===================================================================
   5. BUTTONS — match the green CTA style from the header / hero
   =================================================================== */

.elementor .elementor-button {
    font-family: var(--bcl-font-body, 'Inter', sans-serif);
    font-weight: 600;
    border-radius: 0.58rem;
    padding: 0.625rem 1.35rem;
    transition: transform 0.2s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    box-shadow: 0 6px 14px hsl(143 33% 20% / 0.17);
}

/* Primary button style (Elementor's default "Yes" / unclassed) */
.elementor .elementor-button,
.elementor .elementor-button:visited {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: none;
}

.elementor .elementor-button:hover,
.elementor .elementor-button:focus {
    background-color: hsl(var(--accent));
    color: hsl(var(--primary-foreground));
    transform: translateY(-1px);
    box-shadow: 0 10px 18px hsl(143 33% 20% / 0.24);
}

/* Ghost / outline variant — if user picks "outline" skin */
.elementor .elementor-button-link.elementor-button-outline .elementor-button {
    background: transparent;
    border: 1px solid hsl(var(--primary));
    color: hsl(var(--primary));
}

.elementor .elementor-button-link.elementor-button-outline .elementor-button:hover {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

/* ===================================================================
   6. LINKS
   =================================================================== */

.elementor a:not(.elementor-button) {
    color: hsl(var(--primary));
    transition: color 0.15s ease;
}

.elementor a:not(.elementor-button):hover {
    color: hsl(var(--primary) / 0.8);
}

/* ===================================================================
   7. IMAGES — rounded corners + shadow matching the theme cards
   =================================================================== */

.elementor .elementor-widget-image img {
    border-radius: var(--bcl-surface-radius);
}

/* ===================================================================
   8. ICON LISTS — match the muted-foreground palette
   =================================================================== */

.elementor .elementor-icon-list-item .elementor-icon-list-text {
    font-family: var(--bcl-font-body, 'Inter', sans-serif);
    color: hsl(var(--text-muted, 148 11% 34%));
}

.elementor .elementor-icon-list-icon svg {
    fill: hsl(var(--primary));
}

.elementor .elementor-icon-list-icon i {
    color: hsl(var(--primary));
}

/* ===================================================================
   9. DIVIDERS / SEPARATORS
   =================================================================== */

.elementor .elementor-divider-separator {
    border-color: hsl(var(--border));
}

/* ===================================================================
   10. FORM FIELDS — mirrors the contact-form inputs in the static tpl
   =================================================================== */

.elementor input[type="text"],
.elementor input[type="email"],
.elementor input[type="tel"],
.elementor input[type="url"],
.elementor input[type="number"],
.elementor input[type="date"],
.elementor input[type="search"],
.elementor select,
.elementor textarea {
    font-family: var(--bcl-font-body, 'Inter', sans-serif);
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    padding: 0.625rem 0.75rem;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.elementor input:focus,
.elementor select:focus,
.elementor textarea:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
}

/* ===================================================================
   11. SPACING HELPERS — stop Elementor's default gaps from looking
       alien next to the tighter theme layout
   =================================================================== */

.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1200px;
}

/* ===================================================================
   12. WIDGET SPECIFIC — text-editor / HTML widget
   =================================================================== */

.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
    list-style-position: outside;
    padding-left: 1.5em;
    margin-bottom: 1em;
}

.elementor-widget-text-editor ul {
    list-style-type: disc;
}

.elementor-widget-text-editor ol {
    list-style-type: decimal;
}

.elementor-widget-text-editor li {
    margin-bottom: 0.35em;
}

.elementor-widget-text-editor li::marker {
    color: hsl(var(--text-muted, 148 11% 34%));
}

.elementor-widget-text-editor blockquote {
    border-left: 4px solid hsl(var(--primary));
    padding-left: 1rem;
    margin: 1.5em 0;
    color: hsl(var(--text-muted, 148 11% 34%));
    font-style: italic;
}

/* ===================================================================
   13. COUNTER / STATS widgets
   =================================================================== */

.elementor .elementor-counter-number-wrapper {
    font-family: var(--bcl-font-heading, 'Outfit', sans-serif);
    color: hsl(var(--primary));
}

.elementor .elementor-counter-title {
    font-family: var(--bcl-font-body, 'Outfit', sans-serif);
    color: hsl(var(--text-muted, 148 11% 34%));
}

/* ===================================================================
   14. SOCIAL ICONS
   =================================================================== */

.elementor .elementor-social-icon {
    background-color: hsl(var(--primary));
}

.elementor .elementor-social-icon:hover {
    background-color: hsl(var(--primary) / 0.85);
}

/* ===================================================================
   15. PAGE-LEVEL WRAPPER — set the correct base background & text
   =================================================================== */

body.elementor-page,
body.elementor-default {
    background-color: hsl(var(--background));
    color: hsl(var(--text, 146 26% 16%));
}

.site-main .elementor {
    color: hsl(var(--text, 146 26% 16%));
}

/* ===================================================================
   16. HOME SERVICES GRID
   Make service titles read like headings and normalize image framing.
   =================================================================== */

.elementor-109 .elementor-element.elementor-element-660d051 .elementor-image-box-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.28rem, 1.8vw, 1.55rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: hsl(var(--text, 146 26% 16%));
    margin-top: 1rem;
    margin-bottom: 0.4rem;
}

.elementor-109 .elementor-element.elementor-element-660d051 .elementor-image-box-description {
    font-size: clamp(1rem, 1.2vw, 1.08rem);
    line-height: 1.5;
    color: hsl(var(--text-muted, 148 11% 34%));
}

.elementor-109 .elementor-element.elementor-element-660d051 .elementor-image-box-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--bcl-surface-radius);
    background: hsl(var(--secondary, 102 33% 96%));
    --bcl-services-image-fit: cover;
}

.elementor-widget-html iframe,
.elementor-widget-google_maps iframe {
    border-radius: var(--bcl-surface-radius) !important;
}

.elementor-109 .elementor-element.elementor-element-660d051 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: var(--bcl-services-image-fit);
    object-position: center;
    display: block;
}

/* Optional no-crop mode: add class `bcl-services-image-contain` to body. */
body.bcl-services-image-contain .elementor-109 .elementor-element.elementor-element-660d051 .elementor-image-box-img {
    --bcl-services-image-fit: contain;
}

@media (max-width: 1024px) {
    .elementor-109 .elementor-element.elementor-element-660d051 .elementor-image-box-title {
        font-size: clamp(1.2rem, 2.5vw, 1.4rem);
    }
}

@media (max-width: 767px) {
    .elementor-109 .elementor-element.elementor-element-660d051 .elementor-image-box-img {
        aspect-ratio: 3 / 2;
    }

    /* Mobile heading scale for better balance and readability */
    .elementor .elementor-heading-title {
        line-height: 1.12;
        letter-spacing: -0.01em;
    }

    .elementor .elementor-heading-title.elementor-size-xxl {
        font-size: clamp(2.35rem, 10.5vw, 3.3rem) !important;
    }

    .elementor .elementor-heading-title.elementor-size-xl {
        font-size: clamp(1.95rem, 8.2vw, 2.65rem) !important;
    }

    .elementor .elementor-heading-title.elementor-size-lg {
        font-size: clamp(1.45rem, 6.2vw, 1.95rem) !important;
    }

    .elementor .elementor-widget-text-editor {
        font-size: 1.04rem;
        line-height: 1.58;
    }
}