/**
 * Uwebbz Technology – Elementor Compatibility Layer
 * Loaded only when Elementor is active. Fixes conflicts between
 * the theme's CSS custom-properties and Elementor's canvas/widgets.
 */

/* ── 1. Pass theme CSS variables into Elementor's scope ──────────── */
:root {
    --e-global-color-uwebbz-accent:     #0066ff;
    --e-global-color-uwebbz-accent-alt: #00d4ff;
    --e-global-color-uwebbz-bg:         #0a0a0f;
    --e-global-color-uwebbz-surface:    #0d1117;
    --e-global-color-uwebbz-text:       #e8eaf6;
    --e-global-color-uwebbz-muted:      #8892a4;
    --e-global-color-uwebbz-border:     #1e2a3a;
}

/* ── 2. Elementor sections & containers inherit dark background ───── */
.elementor-section,
.elementor-container,
.e-con,
.e-con-inner {
    color: var(--text, #e8eaf6);
}

/* Prevent Elementor's default white background overriding our dark theme */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con {
    background-color: transparent;
}

/* ── 3. Typography – keep Syne / DM Sans consistent in Elementor ─── */
.elementor-widget-heading .elementor-heading-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    color: var(--text, #e8eaf6);
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
    font-family: 'DM Sans', sans-serif;
    color: var(--muted, #8892a4);
    line-height: 1.75;
}

/* ── 4. Buttons – map to theme's .btn-primary / .btn-outline ──────── */
.elementor-button.elementor-button-primary,
.elementor-button {
    background: linear-gradient(135deg, #0066ff, #00d4ff);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.elementor-button.elementor-button-primary:hover,
.elementor-button:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* Outline variant – add class "btn-outline" in Elementor's Advanced > CSS Classes */
.elementor-widget-button .btn-outline .elementor-button {
    background: transparent;
    border: 1px solid var(--accent, #0066ff);
    color: var(--accent, #0066ff);
}
.elementor-widget-button .btn-outline .elementor-button:hover {
    background: var(--accent, #0066ff);
    color: #fff;
}

/* ── 5. Cards / service-card inside Elementor ─────────────────────── */
.elementor-widget-container .service-card,
.elementor-column .service-card {
    background: var(--surface, #0d1117);
    border: 1px solid var(--border, #1e2a3a);
    border-radius: 16px;
    padding: 32px;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.elementor-widget-container .service-card:hover,
.elementor-column .service-card:hover {
    border-color: var(--accent, #0066ff);
    transform: translateY(-4px);
}

/* ── 6. Full-width page / canvas templates ────────────────────────── */

/* Canvas: no header, footer, or padding at all */
.elementor-template-canvas #site-header,
.elementor-template-canvas .topbar,
.elementor-template-canvas .site-footer {
    display: none !important;
}
.elementor-template-canvas body,
.elementor-template-canvas .page-content-wrap {
    padding: 0 !important;
    margin: 0 !important;
}

/* Full-width: keep header/footer, remove page side-padding */
.elementor-template-full-width .page-content-wrap {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* ── 7. Image widgets ─────────────────────────────────────────────── */
.elementor-widget-image img {
    border-radius: 12px;
}

/* ── 8. Dividers ──────────────────────────────────────────────────── */
.elementor-widget-divider .elementor-divider-separator {
    border-color: var(--border, #1e2a3a);
}

/* ── 9. Forms (Elementor Form widget / WPForms / CF7) ─────────────── */
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    background: var(--surface, #0d1117);
    border: 1px solid var(--border, #1e2a3a);
    border-radius: 8px;
    color: var(--text, #e8eaf6);
    padding: 12px 16px;
    font-family: 'DM Sans', sans-serif;
    transition: border-color 0.25s ease;
    width: 100%;
}
.elementor-field-group input:focus,
.elementor-field-group textarea:focus {
    border-color: var(--accent, #0066ff);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
}

/* ── 10. Editor-only helpers (not rendered on front end) ──────────── */
.elementor-editor-active .topbar,
.elementor-editor-active .site-header {
    /* Keep the header visible in the Elementor editor panel preview */
    position: relative;
    z-index: auto;
}