/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-elementor/
Description: Child theme para Hello Elementor - Stilo Roofing and Construction
Author: Stilo Construction
Author URI: https://stilo-construction.com/
Template: hello-elementor
Version: 1.4.1
Text Domain: hello-elementor-child
*/

/* ========================================
   ELEMENTOR KIT VARIABLES - Higher specificity override
   ======================================== */
:root {
  --e-global-color-primary: #404444;
  --e-global-color-secondary: #AAAFB1;
  --e-global-color-text: #171717;
  --e-global-color-accent: #00ADFF;
  --e-global-color-e34e251: #FFF9F6;
  --e-global-color-0891282: #FFFFFF;
  --e-global-color-e5fa319: #00ADFF;
}

/* Use html + body for higher specificity than .elementor-kit-13 alone */
html body .elementor-kit-13,
html .elementor-kit-13 {
  --e-global-color-accent: #00ADFF !important;
  --e-global-color-e5fa319: #00ADFF !important;
}

/* ========================================
   BUTTON BLUE COLOR - Direct override with !important
   ======================================== */
.elementor-kit-13 .elementor-button,
.elementor-kit-13 button,
.elementor-kit-13 input[type="button"],
.elementor-kit-13 input[type="submit"],
.elementor-button {
  background-color: #00ADFF !important;
  border-color: #00ADFF !important;
  color: #FFFFFF !important;
}

.elementor-kit-13 .elementor-button:hover,
.elementor-button:hover {
  background-color: #00ADFF !important;
  border-color: #00ADFF !important;
}

/* === Stilo brand blue accents (#00ADFF) === */
.elementor-button,
a.elementor-button,
.elementor-button-wrapper .elementor-button,
button[type="submit"],
input[type="submit"],
.metform-btn,
.mf-btn {
    background-color: #00ADFF !important;
    border-color: #00ADFF !important;
    color: #ffffff !important;
}
.elementor-button:hover,
a.elementor-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: #00ADFF !important;
    border-color: #00ADFF !important;
    color: #ffffff !important;
}
a:hover { color: #00ADFF; }


/* === Trust stats band (blue franja, white text) === */
.elementor-widget:has(> .trust-item) > .elementor-widget-container,
.elementor-widget:has(> .trust-item){
    display:flex !important;
    flex-wrap:wrap;
    justify-content:space-around;
    align-items:stretch;
    background:#00ADFF;
    border-radius:12px;
    overflow:hidden;
    margin-top:12px;
}
.trust-item{ flex:1 1 0; min-width:130px; text-align:center; padding:26px 14px; border-right:1px solid rgba(255,255,255,0.25); }
.trust-item:last-child{ border-right:none; }
.trust-number{ display:block; font-size:2.3rem; font-weight:800; line-height:1.05; color:#ffffff; }
.trust-label{ display:block; margin-top:6px; font-size:0.85rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:#ffffff; }
@media (max-width:767px){ .trust-item{ flex-basis:50%; min-width:0; } }


/* === Header & Footer: solid black === */
.elementor-location-header .elementor-section,
.elementor-location-header .e-con,
.elementor-location-header > .elementor-container,
.elementor-location-header .elementor-top-section{
    background-color:#151918 !important;
}
.elementor-location-footer .elementor-section,
.elementor-location-footer .e-con,
.elementor-location-footer .elementor-top-section{
    background-color:#151918 !important;
}
.elementor-location-footer,
.elementor-location-footer p,
.elementor-location-footer a,
.elementor-location-footer h1,
.elementor-location-footer h2,
.elementor-location-footer h3,
.elementor-location-footer h4,
.elementor-location-footer h5,
.elementor-location-footer h6,
.elementor-location-footer li,
.elementor-location-footer span{
    color:#ffffff !important;
}
.elementor-location-footer a:hover{ color:#00ADFF !important; }


/* === Button blue override: darker blue on hover === */
.elementor-kit-13 .elementor-button:hover,
.elementor-kit-13 a.elementor-button:hover,
.elementor-button:hover{ background-color:#0090d4 !important; border-color:#0090d4 !important; color:#fff !important; }


/* === Services select + all form selects white === */
.metform-form-main-wrapper .mf-input-select,
.mf-input-select,
.mf-input .mf-input-select,
.metform-form-main-wrapper select,
.mf-input select,
form .mf-input-select{
    background-color:#ffffff !important;
    color:#2b2b2b !important;
    border:1px solid #d7d7d7 !important;
}
.mf-input-select *, .mf-input-select{ color:#2b2b2b !important; }


/* === Hero form fields white (match guide) === */
.elementor-widget-form input:not([type=submit]):not([type=button]),
.elementor-widget-form select,
.elementor-widget-form textarea,
.metform-form-main-wrapper input:not([type=submit]):not([type=button]),
.metform-form-main-wrapper select,
.metform-form-main-wrapper textarea,
.mf-input-select,
form input[type=text], form input[type=email], form input[type=tel], form input[type=date], form input[type=time], form input[type=number], form input[type=url], form select, form textarea{
    background-color:#ffffff !important;
    color:#2b2b2b !important;
    border:1px solid #d7d7d7 !important;
}
form input::placeholder, form textarea::placeholder{ color:#7a7a7a !important; }


/* === Hero form panel dark + services select (match guide) === */
.elementor-element-43ef71ad{
    background-image:none !important;
    background-color:rgba(13,17,16,0.82) !important;
}
body .mf-input-select,
body .mf-input select,
body .metform-form-main-wrapper select,
body select.mf-input-select,
body .mf-input-select select{
    background-color:#ffffff !important;
    background-image:none !important;
    color:#2b2b2b !important;
}


/* === Force header menu visible (ElementsKit JS workaround) === */
.elementor-location-header .elementor-element:has(.elementskit-navbar-nav){ width:auto !important; flex-grow:1 !important; }
.elementor-location-header nav.ekit-wid-con,
.elementor-location-header .elementskit-menu-container,
.elementor-location-header ul.elementskit-navbar-nav{ width:auto !important; display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; visibility:visible !important; }
.elementor-location-header ul.elementskit-navbar-nav > li.menu-item{ width:auto !important; display:list-item !important; float:none !important; }
.elementor-location-header ul.elementskit-navbar-nav > li.menu-item > a{ width:auto !important; white-space:nowrap !important; padding:0 14px !important; height:auto !important; }


/* === Force menu v2 (un-collapse ElementsKit mobile menu into horizontal bar) === */
.elementor-location-header .elementor-widget:has(.elementskit-navbar-nav){ width:auto !important; flex:1 1 auto !important; }
.elementor-location-header .ekit-wid-con{ width:auto !important; }
.elementor-location-header .ekit_menu_responsive_mobile .elementskit-navbar-nav{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; position:static !important; transform:none !important; visibility:visible !important; opacity:1 !important; max-height:none !important; height:auto !important; width:auto !important; background:transparent !important; box-shadow:none !important; padding:0 !important; }
.elementor-location-header .ekit_menu_responsive_mobile .elementskit-navbar-nav > li{ width:auto !important; display:list-item !important; float:none !important; position:relative !important; }
.elementor-location-header .ekit_menu_responsive_mobile .elementskit-navbar-nav > li > a{ width:auto !important; white-space:nowrap !important; color:#ffffff !important; padding:8px 14px !important; height:auto !important; display:flex !important; align-items:center; }
.elementor-location-header .elementskit-menu-hamburger,
.elementor-location-header .ekit-menu-toggler{ display:none !important; }
.elementor-location-header .elementskit-navbar-nav .ekit-menu-dropdown,
.elementor-location-header .elementskit-navbar-nav .sub-menu{ position:absolute !important; top:100% !important; }




/* === Fallback header styling (logo + menu + phone) === */
.elementor-location-header{ display:none !important; }
#stilo-fallback-header{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; background:#151918; padding:10px 30px; position:relative; z-index:9999; }
#stilo-fallback-header .sfh-logo{ display:flex; align-items:center; }
#stilo-fallback-header .sfh-logo img{ height:56px; width:auto; display:block; }
#stilo-fallback-header .sfh-nav{ display:flex; gap:2px; flex-wrap:wrap; justify-content:center; flex:1; }
#stilo-fallback-header .sfh-nav a{ color:#ffffff !important; text-decoration:none; font-weight:600; font-size:15px; letter-spacing:.3px; padding:8px 16px; border-radius:4px; transition:background .2s; }
#stilo-fallback-header .sfh-nav a:hover{ background:#00ADFF; color:#ffffff !important; }
#stilo-fallback-header .sfh-phone{ color:#ffffff !important; text-decoration:none; font-weight:700; font-size:15px; background:#00ADFF; padding:10px 20px; border-radius:4px; white-space:nowrap; }
#stilo-fallback-header .sfh-phone:hover{ background:#0090d4; }
@media (max-width:880px){ #stilo-fallback-header{ justify-content:center; padding:10px 14px; } #stilo-fallback-header .sfh-nav{ order:3; width:100%; } }


/* === Fallback header topbar (contact + language) === */
#sfh-wrap{ position:relative; z-index:9999; }
.sfh-topbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; background:#0d0f0e; padding:6px 30px; font-size:13.5px; border-bottom:1px solid rgba(255,255,255,.08); }
.sfh-topbar .sfh-topleft{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.sfh-topbar a, .sfh-topbar span{ color:#cfd2d1 !important; text-decoration:none; }
.sfh-topbar a:hover{ color:#00ADFF !important; }
.sfh-topbar .sfh-topright{ display:flex; align-items:center; }
.sfh-topbar .sfh-topright select{ background:#fff !important; color:#222 !important; border:none; border-radius:3px; padding:3px 6px; }
@media (max-width:760px){ .sfh-topbar .sfh-addr{ display:none; } .sfh-topbar{ padding:6px 14px; } }


/* === Financing button + hero overlay lighter === */
#stilo-fallback-header .sfh-financing{ color:#00ADFF !important; text-decoration:none; font-weight:700; font-size:15px; border:2px solid #00ADFF; padding:7px 16px; border-radius:4px; white-space:nowrap; margin-right:8px; }
#stilo-fallback-header .sfh-financing:hover{ background:#00ADFF; color:#ffffff !important; }
.ekit-overlay.ekit-bg-black{ background-color:rgba(0,0,0,0.4) !important; }


/* === Mobile hamburger menu for fallback header === */
#stilo-fallback-header .sfh-toggle{ display:none; background:none; border:0; color:#ffffff; font-size:30px; line-height:1; cursor:pointer; padding:4px 10px; }
@media (max-width:1100px){
  #stilo-fallback-header{ flex-wrap:wrap; align-items:center; }
  #stilo-fallback-header .sfh-logo{ flex:1 1 auto; }
  #stilo-fallback-header .sfh-toggle{ display:block; }
  #stilo-fallback-header .sfh-nav,
  #stilo-fallback-header .sfh-financing,
  #stilo-fallback-header .sfh-phone{ display:none; width:100%; }
  #stilo-fallback-header.sfh-open .sfh-nav{ display:flex; flex-direction:column; gap:0; margin-top:8px; }
  #stilo-fallback-header.sfh-open .sfh-financing,
  #stilo-fallback-header.sfh-open .sfh-phone{ display:block; text-align:center; margin-top:8px; }
  #stilo-fallback-header .sfh-nav a{ width:100%; padding:13px 12px; border-top:1px solid rgba(255,255,255,0.12); }
}


/* === Footer mini map + hide big homepage map === */
body.home .elementor-widget-google_maps{ display:none !important; }
#stilo-footer-map{ width:100%; max-width:330px; height:175px; border:0; border-radius:8px; margin-top:14px; display:block; }
@media (max-width:1100px){ #stilo-footer-map{ max-width:100%; } }


/* === Make Quick Inquiry phone button a bubble like CONTACT US === */
.elementor-element-7bebe0ef .elementor-button,
.elementor-element-7bebe0ef a.elementor-button-link{ padding:13px 25px !important; border-radius:5px !important; font-size:16px !important; }




/* === Footer WhatsApp icon match FB/IG + map li === */
.sfh-map-li{ list-style:none !important; }
.elementor-location-footer .elementor-social-icon-whatsapp svg{ fill:#404444; }


/* === Services dropdown in custom header === */
#stilo-fallback-header, .sfh-nav { overflow: visible; }
.sfh-nav .sfh-has-sub { position: relative; display: flex; align-items: center; align-self: stretch; }
.sfh-nav { align-self: stretch; align-items: stretch; }
/* ALIGN-LINKS-FIX: center every top-level link at the same height */
.sfh-nav > a { display: flex; align-items: center; }
.sfh-nav .sfh-caret { font-size: 10px; opacity: .85; margin-left: 3px; }
.sfh-nav .sfh-submenu {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: #0d0d0d; border-top: 3px solid #00ADFF;
  box-shadow: 0 14px 34px rgba(0,0,0,.4);
  padding: 6px 0; z-index: 99999;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.sfh-nav .sfh-has-sub:hover .sfh-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.sfh-nav .sfh-submenu a {
  display: block !important; padding: 11px 22px 11px 16px !important; margin: 0 !important;
  color: #fff !important; font-size: 15px !important; white-space: nowrap;
  border: 0 !important; background: transparent !important;
}
.sfh-nav .sfh-submenu a:hover { background: #00ADFF !important; color: #fff !important; }

/* Mobile / tablet: accordion inside hamburger */
@media (max-width: 1100px) {
  .sfh-nav .sfh-has-sub { display: block !important; width: 100%; align-self: auto; }
  .sfh-nav .sfh-sub-toggle { display: flex !important; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; }
  .sfh-nav .sfh-submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border-top: 0; background: rgba(255,255,255,.05);
    max-height: 0; overflow: hidden; padding: 0;
    transition: max-height .28s ease;
  }
  .sfh-nav .sfh-has-sub.sfh-sub-open .sfh-submenu { max-height: 460px; padding: 4px 0; }
  .sfh-nav .sfh-submenu a { padding-left: 36px !important; font-size: 14px !important; }
  .sfh-nav .sfh-caret { float: right; }
}


/* === STICKY-HEADER-FIX: keep header visible on scroll === */
#sfh-wrap { position: -webkit-sticky; position: sticky; top: 0; z-index: 9990; }
@media (max-width: 1100px) { #sfh-wrap { position: -webkit-sticky; position: sticky; top: 0; } }


/* === Hide footer "Services" column (now in header dropdown) === */
.elementor-location-footer .elementor-element-9341a08 { display: none !important; }


/* === Remove generic/fake testimonials on Window Replacement page === */
.elementor-element-e4c3080,
.elementor-element-5a957ec,
.elementor-element-41bdd72 { display: none !important; } /* fake testimonials: windows, roof replacement, gutters */


/* === New service pages (Roof Repair, Exterior Services): hide theme title, hero is the H1 === */
.page-id-1302 .page-header, .page-id-1303 .page-header { display: none !important; }
.page-id-1302 .site-main, .page-id-1303 .site-main { padding-top: 24px; }
.page-id-1302 h1, .page-id-1303 h1 { font-size: 40px !important; line-height: 1.15 !important; }
@media (max-width:1024px){ .page-id-1302 h1, .page-id-1303 h1 { font-size: 32px !important; } }
@media (max-width:600px){ .page-id-1302 h1, .page-id-1303 h1 { font-size: 26px !important; } }


/* Fix: mobile/tablet hero had only a gradient, no photo. Add hero photo with dark overlay for readability. */
.elementor-element-df0e510 {
    background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url("https://stilo-construction.com/wp-content/uploads/2026/06/stilo-drone-aerial-1-scaled.jpg") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* P3: bigger, easier-to-tap targets on mobile (accessibility) */
@media (max-width: 767px){
    .stilo-card-cta{ display:inline-block; padding:10px 4px; min-height:44px; line-height:24px; }
    .elementor-button{ min-height:46px; display:inline-flex; align-items:center; justify-content:center; }
    .elementor-social-icon{ min-width:42px; min-height:42px; }
    .elementor-nav-menu .menu-item a, ul.sfh-submenu a{ padding-top:8px; padding-bottom:8px; }
    .elementor-icon-list-item{ padding-top:5px; padding-bottom:5px; }
}


/* Remove Our Team (placeholder names) and the empty 0-counters from the home page */
.elementor-element-4032d023,
.elementor-element-34231399,
.elementor-element-3b74b6 { display: none !important; }


/* header two-tone fix: make logo bar match the topbar black */
#stilo-fallback-header { background: rgb(13,15,14) !important; }

/* Learn More links: brand blue instead of pink */
.stilo-card-cta, .stilo-card-cta:visited { color: #00ADFF !important; }

/* Financing 'Apply' buttons: brand blue instead of red */
.fin-btn { background-color: #00ADFF !important; border-color:#00ADFF !important; }
.fin-btn:hover { background-color:#0090d4 !important; }

/* Hide leftover 0% counter on home */
.elementor-element-4aad5dde { display:none !important; }

/* Financing hero: shrink huge title on mobile so it fits */
@media (max-width: 767px){
  .elementor-element-562033bf .elementor-heading-title { font-size: 38px !important; line-height: 1.12 !important; }
}


/* Mobile: service card text readability + clean stack (image on top, text below) */
@media (max-width: 767px){
  .elementor-element-8357870 .e-con-full{ display:flex !important; flex-direction:column !important; height:auto !important; min-height:0 !important; }
  .elementor-element-8357870 .elementor-widget-image{ width:100% !important; order:-5 !important; position:static !important; }
  .elementor-element-8357870 .elementor-widget-image img{ width:100% !important; height:200px !important; object-fit:cover !important; display:block !important; aspect-ratio:auto !important; }
  .elementor-element-8357870 .elementor-widget-heading,
  .elementor-element-8357870 .elementor-widget-text-editor,
  .elementor-element-8357870 .elementor-widget-button{
    position:static !important; margin-top:0 !important; transform:none !important; background:#ffffff !important; z-index:5 !important;
  }
}


/* === About Us block: brand-blue frame + left breathing room (2026-06-18) === */
.elementor-element-43ef71ad{background:#00ADFF !important;}
.elementor-element-3c30cd44{--padding-left:50px !important;}
@media (max-width:767px){
  .elementor-element-3c30cd44{--padding-left:24px !important; --padding-right:24px !important;}
}