/* ============================================
   Centro Ottico Ercoli - Custom CSS
   Migrazione da Helix3 a Helix Ultimate (J6)
   ============================================ */

/* === HEADER / MENU BAR === */
#sp-header {
    height: 66px;
    border-top: 3px solid #DE6129;
}

/* Menu a sinistra come nel live */
#sp-header #sp-menu .sp-column {
    justify-content: flex-start !important;
}

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    color: #fff;
    line-height: 66px;
    display: inline-block;
    padding: 0 30px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a {
    color: #DE6129;
}

.sp-megamenu-parent {
    float: left;
}

/* Hamburger: visibile solo su mobile, nascosto su desktop */
#offcanvas-toggler {
    color: #fff;
}

@media (min-width: 992px) {
    #offcanvas-toggler {
        display: none !important;
    }
}

/* === TOP BAR (social icons dentro header su desktop) === */
ul.social-icons > li {
    display: inline-block;
    margin: 0 15px;
    font-size: 24px;
}

ul.social-icons > li a {
    color: #fff;
}

ul.social-icons > li a:hover {
    color: #DE6129;
}

/* === TESTATA (logo + recapiti) === */
.logo {
    max-width: 406px;
}

.logo img,
#sp-logo .logo img {
    max-width: 406px;
}

.testata {
    height: 132px;
    flex: 1 0 100%;
    align-items: center !important;
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.testata > .container > .row {
    display: flex;
}

#sp-logo,
#sp-recapiti {
    display: flex;
    align-items: center;
}

#sp-recapiti {
    height: 132px;
}

#sp-recapiti > .sp-column {
    width: 100% !important;
}

/* === HERO SECTION - colhdsx (desktop) === */
.colhdsx {
    color: #151616;
}

/* Fix: colonna "Da oltre 40 anni" deve essere 100% (ID ora unico dopo fix duplicato) */
#column-wrap-id-1598544177735 {
    max-width: 100% !important;
    flex-basis: 100% !important;
}


/* === FIX: Overlay foto marchi — altezza forzata perché SPB non la applica === */
#section-id-1598544177732 .sppb-addon-overlay-image-content {
    height: 525px;
}
@media (max-width: 1199.98px) {
    #section-id-1598544177732 .sppb-addon-overlay-image-content {
        height: 290px;
    }
}

/* === FIX: 4 box servizi si accavallano tra sezione sopra (grigia) e sotto (come nel live) === */
@media (min-width: 992px) {
    #section-id-1598601860520 {
        position: relative;
        z-index: 2;
        margin-top: -80px !important;
    }
}


/* === MEGA MENU: posizione come nel live (sotto MARCHI, verso destra) === */
.sp-megamenu-parent > li > .sp-dropdown.sp-dropdown-mega.sp-menu-full.container {
    left: 0 !important;
    right: auto !important;
    max-width: none !important;
    width: auto !important;
    min-width: 700px;
}

/* === DROPDOWN MENU === */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item span {
    display: block;
    padding: 10px;
    color: #141414;
    cursor: pointer;
    font-size: 16px;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
    color: #DE6129;
    background: transparent !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
.sp-module ul > li > a:hover {
    color: #DE6129;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a:hover {
    color: #151616;
}

/* === BOTTOM SECTION === */
#sp-bottom {
    background: #fff;
    border-top: 1px solid #DFDFDF;
    padding: 50px 0;
    color: #151616;
}

#sp-bottom .sppb-addon-title {
    color: #151616;
}

#sp-bottom .sppb-addon-text,
#sp-bottom .sppb-addon-content {
    color: #151616;
}

#sp-bottom a {
    color: #151616;
}

#sp-bottom a:hover {
    color: #DE6129;
}

#sp-bottom .sppb-addon-feature .sppb-addon-title {
    color: #151616;
}

.sp-module ul > li {
    max-width: 350px;
}

/* Modulo marchi nella sidebar servizi: no max-width container, loghi su 2 colonne */
.sppb-addon-module .mod-sppagebuilder .sppb-row-container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* === FOOTER === */
#sp-footer {
    background: #151616;
    color: #BDBDBD;
    font-size: 11px;
}

#sp-footer a {
    color: #BDBDBD;
}

#sp-footer a:hover {
    color: #DE6129;
}

/* === OFFCANVAS / MOBILE MENU === */
/* (stili hamburger sono nella sezione header e responsive) */

/* === BREADCRUMB === */
.breadcrumb {
    background: transparent !important;
}

.breadcrumb a {
    color: #DE6129;
}

/* === ARTICLE TEXT === */
article.item.item-page {
    font-size: 20px;
    line-height: 40px;
}

/* === LISTA SERVIZI (sidebar + bottom) === */
ul.listaservizi {
    padding-left: 0 !important;
}

ul.listaservizi li {
    padding-top: 0;
    padding-bottom: 8px;
    list-style: none;
    border-bottom: 1px solid #E1E1E1;
}

#sp-bottom .sp-module ul > li {
    display: block;
    margin-bottom: 8px;
}

ul.listaservizi li a {
    font-weight: 400;
    font-size: 16px;
    color: #151616;
    text-decoration: none;
}

ul.listaservizi li a::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 10px;
}

ul.listaservizi li a:hover {
    color: #DE6129;
}

ul.listaservizi li.current > a,
ul.listaservizi li.active > a {
    color: #DE6129 !important;
}

/* === BODY FIX === */
body {
    -ms-font-feature-settings: normal;
}

/* === CONTAINER WIDTH OVERRIDE === */
/* .container (template layout) a 1140px, .sppb-row-container a 1400px come nel live */
@media (min-width: 1200px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1140px !important;
    }
}

@media (min-width: 1410px) {
    .container {
        max-width: 1140px !important;
        width: 1400px !important;
    }

    .sppb-row-container {
        width: 1400px !important;
        max-width: 1400px !important;
    }
}

/* === RESPONSIVE - TABLET & MOBILE (max 991px) === */
@media (max-width: 991px) {
    /* sp-main è il contesto per il posizionamento absolute dell'header */
    #sp-main {
        position: relative;
    }

    /* Testata: allinea logo verticalmente al centro */
    .testata > .container > .row {
        align-items: center !important;
    }

    /* Nasconde recapiti SPB su mobile (icona tel è nell'header) */
    #sp-recapiti {
        display: none !important;
    }

    /* Header sovrapposto alla testata, a destra, centrato verticalmente */
    header#sp-header {
        height: 80px;
        border-top: 0;
        position: absolute !important;
        top: 0;
        right: 15px;
        left: unset !important;
        width: auto !important;
        background: transparent !important;
        border: 0;
        box-shadow: unset !important;
        z-index: 100;
        display: flex !important;
        align-items: center;
    }

    header#sp-header > .container {
        width: auto !important;
        padding: 0 !important;
    }

    header#sp-header .container-inner {
        padding: 0 !important;
    }

    header#sp-header .row {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Nasconde social icons su mobile */
    #sp-top1 {
        display: none !important;
    }

    #sp-header .sp-megamenu-wrapper {
        display: flex;
        align-items: center;
    }

    /* Icona telefono + hamburger affiancati, centrati verticalmente */
    .mobile-header-icons {
        gap: 5px;
    }

    .mobile-phone-icon {
        display: flex;
        align-items: center;
    }

    .mobile-phone-icon img {
        width: 36px;
        height: 36px;
    }

    /* Hamburger */
    #offcanvas-toggler {
        display: flex !important;
        color: #151616;
        padding: 8px;
    }

    #offcanvas-toggler .burger-icon {
        width: 30px;
    }

    #offcanvas-toggler .burger-icon > span {
        background-color: #151616;
        height: 3px;
        margin: 5px 0;
    }

    .colhdsx {
        background: #151616;
        border-top: 3px solid #DE6129;
        padding: 30px;
        color: #fff;
    }

    /* Box "Centro Ottico Ercoli" full-width su mobile */
    #section-id-1581335281687 > .sppb-row-container {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Testata mobile */
    .testata,
    .testata #sp-logo {
        height: auto;
        min-height: 80px;
        border-bottom: 1px solid #E1E1E1;
    }

    /* Logo spostato leggermente a destra */
    .testata .logo {
        padding-left: 20px;
    }

    /* Logo mobile: max-width ridotto */
    .testata .logo img,
    #sp-testata .logo img,
    #sp-testata #sp-logo .logo img {
        max-width: 250px !important;
        height: auto;
    }

    .forza-center {
        text-align: center !important;
    }
}

/* Mobile piccolo */
@media (max-width: 575px) {
    .testata .logo img,
    #sp-testata .logo img,
    #sp-testata #sp-logo .logo img {
        max-width: 200px !important;
    }
}

/* === RESPONSIVE - LARGE (max 1300px) === */
@media (max-width: 1300px) {
    .testata > .container,
    #sp-logo > .container {
        width: 100%;
    }
}

/* === INSTAGRAM LOADER === */
.insta-loader-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.insta-loader {
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: insta-spin 2s linear infinite;
}

@keyframes insta-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === FIX: Riordina sezioni - testata SOPRA header come nel live === */
#sp-main {
    display: flex;
    flex-direction: column;
}

/* Nascondi il placeholder sticky header e la top-bar (non usati nel live) */
.sticky-header-placeholder,
#sp-top-bar {
    display: none !important;
}

/* Social icons nel header a destra */
#sp-top1 {
    height: 66px;
    line-height: 66px;
}

#sp-testata {
    order: 1;
    width: 100%;
}

header#sp-header {
    order: 2;
    position: relative;
}

#sp-page-title {
    order: 3;
    width: 100%;
}

#sp-main-body {
    order: 4;
    width: 100%;
}

#sp-bottom {
    order: 5;
    width: 100%;
}

#sp-footer {
    order: 6;
    width: 100%;
}

/* === FIX: Forza visibilità elementi WOW animati === */
.sppb-wow {
    visibility: visible !important;
}

/* === FIX: Sezioni/colonne nascoste a tutti i breakpoint (bug migrazione SPB 3→Pro 6) === */
.sppb-section.sppb-hidden-lg.sppb-hidden-md.sppb-hidden-sm.sppb-hidden-xs,
[class*="sppb-col-"].sppb-hidden-lg.sppb-hidden-md.sppb-hidden-sm.sppb-hidden-xs,
.sppb-addon-wrapper.sppb-hidden-lg.sppb-hidden-md.sppb-hidden-sm.sppb-hidden-xs {
    display: block !important;
}

/* Logo rimosso dall'header (è già nella testata) */
#sp-header #sp-logo {
    display: none !important;
}

/* === FIX: Logo nella testata più grande come nel live === */
.testata .logo img,
#sp-testata .logo img,
#sp-testata #sp-logo .logo img {
    max-width: 406px;
    height: auto;
}