/* Alba Electrical — site-specific overrides. Loaded last so the cascade wins. */

/* Recolour Elementor's primary/accent palette from orange to green.
   Buttons inherit a linear-gradient(23deg, primary, 28ab675) from post-6/37/69.css —
   overriding the variables here keeps the gradient shading intact while shifting
   the hue to green. Base brand green: rgb(50, 168, 82). */
.elementor-kit-6 {
    --e-global-color-primary: rgb(50, 168, 82);
    --e-global-color-accent: rgb(50, 168, 82);
    --e-global-color-28ab675: rgb(120, 220, 130);
}

/* Jkit/xpro widgets (e.g. icon-box "Call Now" button) ship a default blue
   --jkit-btn-bg-color in main.css. Recolour to brand green. */
:root,
body,
.elementor-kit-6 {
    --jkit-btn-bg-color: rgb(50, 168, 82);
    --jkit-btn-bg-hover-color: rgb(40, 140, 68);
}

/* Belt-and-braces: explicit gradient on every Elementor button selector,
   in case a per-element rule in post-37/69.css resolves variables differently. */
.elementor-kit-6 button,
.elementor-kit-6 input[type="button"],
.elementor-kit-6 input[type="submit"],
.elementor-kit-6 .elementor-button,
.elementor-37 .elementor-element .elementor-button,
.elementor-69 .elementor-element .elementor-button {
    background-image: linear-gradient(23deg, rgb(50, 168, 82) 0%, rgb(120, 220, 130) 100%) !important;
    background-color: rgb(50, 168, 82) !important;
}

.elementor-kit-6 button:hover,
.elementor-kit-6 button:focus,
.elementor-kit-6 input[type="button"]:hover,
.elementor-kit-6 input[type="button"]:focus,
.elementor-kit-6 input[type="submit"]:hover,
.elementor-kit-6 input[type="submit"]:focus,
.elementor-kit-6 .elementor-button:hover,
.elementor-kit-6 .elementor-button:focus,
.elementor-37 .elementor-element .elementor-button:hover,
.elementor-69 .elementor-element .elementor-button:hover {
    background-image: linear-gradient(23deg, rgb(120, 220, 130) 0%, rgb(50, 168, 82) 100%) !important;
    background-color: rgb(40, 140, 68) !important;
}

/* Jkit icon-box link button ("Call Now" etc.) — green gradient matching the
   main Elementor buttons, overriding the default flat blue from main.css. */
.jeg-elementor-kit.jkit-icon-box .icon-box-button .btn-wrapper .icon-box-link {
    background-color: rgb(50, 168, 82) !important;
    background-image: linear-gradient(23deg, rgb(50, 168, 82) 0%, rgb(120, 220, 130) 100%) !important;
}
.jeg-elementor-kit.jkit-icon-box .icon-box-button .btn-wrapper .icon-box-link:hover {
    background-color: rgb(40, 140, 68) !important;
    background-image: linear-gradient(23deg, rgb(120, 220, 130) 0%, rgb(50, 168, 82) 100%) !important;
}

/* Black sections → grey rgb(163, 168, 165). Matches post-37.css and post-69.css selectors. */
.elementor-37 .elementor-element.elementor-element-38a04de5:not(.elementor-motion-effects-element-type-background),
.elementor-37 .elementor-element.elementor-element-38a04de5 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: rgb(163, 168, 165);
}

.elementor-69 .elementor-element.elementor-element-6fba6de5:not(.elementor-motion-effects-element-type-background),
.elementor-69 .elementor-element.elementor-element-6fba6de5 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-69 .elementor-element.elementor-element-73459862:not(.elementor-motion-effects-element-type-background),
.elementor-69 .elementor-element.elementor-element-73459862 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: rgb(163, 168, 165);
}

/* Header: double size + brand text replaces the SVG logo */
.alba-brand {
    display: inline-block;
    font-family: var(--e-global-typography-primary-font-family, "Montserrat"), sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    color: var(--e-global-color-text, #2C2C2C);
    letter-spacing: -0.02em;
    max-width: 420px;
}

.elementor-74 .elementor-element.elementor-element-ec51f0a {
    --padding-top: 20px;
    --padding-bottom: 20px;
    min-height: 140px;
}

.elementor-74 .elementor-element.elementor-element-631d0eee img {
    /* Fallback in case the SVG is restored later */
    max-height: 96px;
    width: auto;
}

.alba-brand-logo,
.elementor-74 .elementor-element.elementor-element-631d0eee img.alba-brand-logo {
    display: block !important;
    height: auto !important;
    width: 100% !important;
    max-width: 420px !important;
    max-height: 96px !important;
}

@media (max-width: 767px) {
    .alba-brand-logo,
    .elementor-74 .elementor-element.elementor-element-631d0eee img.alba-brand-logo {
        max-height: 64px !important;
        max-width: 280px !important;
    }
}

/* FAQ accordion (Elementor nested-accordion) — open item gets a green gradient
   instead of flat primary, matching the button shading. */
.elementor-37 .elementor-element.elementor-element-1e00856e
    > .elementor-widget-container > .e-n-accordion
    > .e-n-accordion-item[open] > .e-n-accordion-item-title,
.e-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title {
    background-color: rgb(50, 168, 82) !important;
    background-image: linear-gradient(23deg, rgb(50, 168, 82) 0%, rgb(120, 220, 130) 100%) !important;
}

/* Header "Need Help?" pill (element-649f98db) ships a hardcoded yellow→red
   gradient in post-74.css — recolour to brand green gradient. */
.elementor-74 .elementor-element.elementor-element-649f98db:not(.elementor-motion-effects-element-type-background),
.elementor-74 .elementor-element.elementor-element-649f98db > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: transparent !important;
    background-image: linear-gradient(135deg, rgb(120, 220, 130) 0%, rgb(50, 168, 82) 100%) !important;
}