/* Extra extra large devices (<1400px) */
@media (max-width: 1399.98px) {

}

/* Extra large devices (max-width 1199.98px) */
@media (max-width: 1199.98px) {

}


/* Large devices (max-width 991.98px): Desktops */
@media (max-width: 991.98px) {

}

/* Medium devices (max-width 767.98px): Tablets */
@media (max-width: 767.98px) {

}


/* Small devices (max-width 575.98px): Mobile portrait */
@media (max-width: 575.98px) {


}

/* ============================================================
   CONTENITORI GLOBALI — riduce il cap dei .container da 1320px
   (default Bootstrap sopra i 1400px) a 1200px, per tutto il sito.
   custom.css è caricato dopo bootstrap.min.css → vince senza !important.
   ============================================================ */
@media (min-width: 1400px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1200px;
    }
}

.container-nav {
    display: flex;
    justify-content: stretch;

    nav.navbar {
        width: 100%;
        justify-content: space-between;
        flex-direction: column;
        padding-block: 10px;

        @media (min-width: 1200px) {
            padding-block: 0;
            flex-direction: row;
        }
    }

    .offcanvas {
        height: 100% !important;

        .offcanvas-body {
            height: 100%;

            li {
                align-items: stretch;

                a {
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
}

.container-header .mod-menu > li + li {
    margin-left: revert;
    @media (min-width: 1200px) {
        margin-left: 20px;
    }

}

nav.art-nav {
    margin-top: 1px;

    .navbar-toggler {
        border: none;
        padding-block: .7rem;
    }

    @media (min-width: 1200px) {
        margin-top: 30px;
    }

    .navbar-brand {
        display: none;
    }



    .navbar-collapse {
        flex: auto;

        @media (min-width: 1200px) {
            height: 100%;

            > ul {
                height: 100%;
            }
        }

        .nav-link {
            text-decoration: none !important;
            text-align: center;
        }
    }

    .nav-item {
        .nav-link {
            font-size: 14px !important;
            font-family: Roboto, sans-serif !important;
            color: #004b99;
            text-transform: uppercase;
            position: relative;
        }

        .nav-link.dropdown-toggle::after {
            content: none;
        }

        .nav-link::before {
            content: '';
            position: absolute;
            bottom: calc(50% - 12px);
            left: 50%;
            transform: translate(-50%, -50%);
            height: 2px;
            background-color: #e5322c;
            width: 0;
            transition: width 0.3s ease;
        }

        .nav-link.active::before, .nav-link:hover::before {
            width: 40%;

            @media (min-width: 1200px) {
                width: 70%;
            }
        }

        .nav-link.active {
            font-weight: bold;
            color: #004b99;
        }
    }

    .art-nav-container {
        /*padding-block: 10px;*/
        .art-logo {
            padding-block: 10px;
        }
    }
}

.art-postcontent ul>li:before, .art-post ul>li:before, .art-textblock ul>li:before {
    content: url('/images/postbullets.png');
    margin-right: 6px;
    bottom: 2px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
}

.art-postcontent ul {
    list-style-type: none;
    padding-left: 0;
}

.art-postcontent a, .art-postcontent a:link, a, a:link {
    text-decoration: none;
    color: #004b99;
}

.art-postcontent ul li {
    margin-top: 3px;
    color: #404040;
    padding-left: 13px;
}

.menu-bootstrap5 .mod-menu_bootstrap5 .dropdown > .dropdown-menu {
    top: 100%;
}

.nav-sticky {
    .menu-bootstrap5 .mod-menu_bootstrap5 .dropdown > .dropdown-menu {
        /*top: 85px;*/
    }
}

ul.dropdown-menu.show {
    background: rgb(7,77,151) !important;
    border-radius: 0;
    border: none;

    li .dropdown-item {
        font-size: .9em;
        text-align: left;
        color: white !important;
        font-weight: 600;
        justify-content: start;
    }

    li .dropdown-item:hover {
        color: #f50000 !important;
    }
}

#loader-overlay.overlay {
    pointer-events: none;
}

.kw-swiper-home-slide {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;

    .swiper-slide-container {
        padding-inline: 10%;
        text-align: center;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1);

        h1 {
            font-size: 4rem;
            margin-bottom: .5rem;
        }

        p {
            font-size: 1.5rem;
        }
    }
}


.art-banda-chisiamo {
    /*padding: 20px 0;*/
    background: #004b99;
    color: #fff;
}

.art-banda-chisiamo h1 {
    color: #fff;
}

.art-banda-chisiamo-inner {
    max-width: 1200px;
    width: 100%;
    padding: 40px 0;
    margin: 0 auto;
}

a.art-button.art-button-white, a.art-button.art-button-white:link,  a.art-button.art-button-white:visited {
    background: #ffffff;
    color: #004b99;
    border: solid 1px #fff;
}

a.art-button.art-button-white:hover, a.art-button.art-button-white:link:hover {
    background: #004b99;
    color: #ffffff;
}

/* ============================================================
   HOMEPAGE — bande full-width
   L'articolo della home non ha più il .container (campo "Container"
   vuoto): ogni riga del layout builder usa container-fluid e va a
   tutta larghezza. Le bande prendono colore/padding dalla classe
   della colonna.
   ============================================================ */

/* Banda "Il valore aggiunto alla tua casa" */
.art-banda-chi-siamo {
    background-color: #004b99;
    color: #fff;
    padding-top: 50px;
    padding-bottom: 50px;
}

.art-banda-chi-siamo h1,
.art-banda-chi-siamo h2,
.art-banda-chi-siamo h3,
.art-banda-chi-siamo p {
    color: #fff;
}

/* dimensione titolo banda (come l'originale: 48px / 600) */
.art-banda-chi-siamo h1 {
    font-size: 48px;
    font-weight: 600;
}

/* testo incolonnato e centrato sulla banda full-width */
.art-banda-chi-siamo > * {
    max-width: 970px;
    margin-left: auto;
    margin-right: auto;
}

.kw-home-section h2 {
    color: #004b99;
    font-weight: 700;
    font-size: 48px;
    margin-bottom: 10px;
}

.kw-home-text {
    padding-left: 5%;
}

.kw-home-img img {
    width: 100%;
    height: auto;
}

.kw-home-green-title {
    color: #17a100 !important;
    font-weight: 700;
    font-size: 48px;
}

/* --- Griglia card prodotti (6 tile) --- */
.kw-home-card-col {
    padding: 0;

    p {
        margin: 0 !important;
    }
}

.kw-home-card {
    display: flex;
    align-items: center;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.kw-home-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 75, 153, 0.55);
    transition: background-color 0.3s ease;
}

.kw-home-card:hover::before {
    background-color: rgba(0, 75, 153, 0.25);
}

.kw-home-card-label {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 18px;
    padding: 25px;
}

/* --- Card articoli sottocategorie prodotti (griglia 3 col nel container) ---
   Riusa .kw-home-card (overlay blu + hover). La griglia sta in un container
   normale con gutter tra le card (row g-4), a differenza delle tile full-bleed
   della home. Il fondo blu pieno (#004b99, uguale all'overlay) fa in modo che
   le card senza immagine risultino comunque leggibili invece di un blu slavato. */
.kw-cat-card {
    background-color: #004b99;
}

.kw-cat-cards {
    padding-bottom: 60px;
}

/* --- Card Realizzazioni (griglia 3 col: card bianca, immagine sopra, titolo
   sotto) --- Port 1:1 del componente .art-realizzazioni del sito in produzione
   (template serramentierredue/css/template.css): card bianca con bordo di 5px
   che diventa blu (#004b99) in hover, immagine che fa zoom scale(1.1) con un
   overlay bianco semitrasparente e l'icona lente (fa-search) blu al centro,
   titolo h4 nero (600, 20px) centrato sotto. Differenze dal sorgente: le
   immagini intro locali non sono thumbnail pre-ritagliate, quindi object-fit
   cover + aspect-ratio le uniforma; gli articoli senza immagine mostrano un
   segnaposto grigio finché non si caricano le foto. */
.art-realizzazioni {
    padding-bottom: 40px;
}

a.art-realizzazioni-item {
    display: block;
    padding: 0;
    margin: 10px;
    background-color: #fff;
    color: #000 !important;
    text-decoration: none;
    border: 5px solid #fff;
    transition: all 0.2s ease-in;
}

a.art-realizzazioni-item:hover {
    border: 5px solid #004b99;
}

.art-realizzazioni-item-image {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.art-realizzazioni-item-image-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 120;
    opacity: 0;
    transition: opacity 0.2s ease-in;
    background-color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: 48px;
    color: #004b99;
}

a.art-realizzazioni-item:hover .art-realizzazioni-item-image-hover {
    opacity: 1;
}

a.art-realizzazioni-item img,
.art-realizzazioni-item-image-empty {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: all 0.2s ease-in-out;
}

.art-realizzazioni-item-image-empty {
    /* segnaposto quando l'articolo non ha ancora un'immagine intro */
    background-color: #e9ecef;
}

a.art-realizzazioni-item:hover img {
    transform: scale(1.1);
}

.art-realizzazioni-content {
    min-height: 50px;
    padding: 10px;
    text-align: center;
}

.art-realizzazioni-content h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

/* --- Photogallery articoli (modulo mod_images in posizione photogallery) ---
   Il modulo emette sempre il proprio wrapper anche quando l'articolo non ha
   immagini, lasciando una banda vuota. Nasconde l'intero wrapper quando non
   contiene link/immagini della galleria, così gli articoli senza foto restano
   puliti. */
article.kw-module[class*="mod_images-"]:not(:has(.art-gallery-images a)) {
    display: none;
}

.art-sheet {
    background: #f8f8f8;
}

/* --- Articoli sottocategorie prodotti: titolo (h1) centrato ---
   Layout dedicato article/prodotti.php: il nome dell'articolo è un h1 centrato
   sopra il contenuto (non spostato nell'hero dal parallax). */
.prodotti-article .prodotti-article-heading {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 50px;
}


/* --- Header che si rimpicciolisce allo scroll (come l'originale) --- */
nav.art-nav .art-logo img {
    height: 106px;
    width: auto;
    transition: height 0.3s linear;
}

nav.art-nav.nav-shrink .art-logo img {
    height: 76px;
}

/* Il margine (30px) si riduce 1:1 con lo scroll, scritto inline da
   sticky-menu.js in sync col paint (requestAnimationFrame): resta "incollato"
   al dito, come nell'originale. Niente transition sul margine, altrimenti il
   tracking 1:1 diventerebbe molliccio/in ritardo. Animiamo solo opacity/sfondo
   (lo shrink); il logo ha la sua transition. Niente plugin => niente shake. */
nav.art-nav {
    transition: opacity 0.3s linear, background-color 0.3s linear;
}

/* Fallback se il JS non parte: da shrunk il margine di riposo va a 0. */
@media (min-width: 1200px) {
    nav.art-nav.nav-shrink {
        margin-top: 0;
    }
}

/* --- Home: slider visibile dietro al menu (header trasparente sopra l'hero) ---
   Solo in homepage (itemid 101/112): l'header esce dal flusso così lo slider
   parte da y=0 dietro al nav fisso. Il nav è trasparente al top e diventa
   bianco quando si rimpicciolisce allo scroll. */
/*.itemid-101 header.header,*/
/*.itemid-112 header.header {*/
header.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* Desktop: l'header resta agganciato al viewport (pinned) mentre si scorre.
   È "fixed" — quindi fuori dal flusso come l'absolute qui sopra: nessun
   reflow, stesso ingombro di prima al top. Sotto i 1200px resta absolute,
   così scorre via con la pagina e ricompare tornando in cima (comportamento
   mobile richiesto). Il pin lo fa il browser: niente plugin, niente shake. */
@media (min-width: 1200px) {
    header.header {
        position: fixed;
    }
}

/* menu bianco semi-trasparente sopra lo slider (come l'originale: opacity .8);
   torna pieno (opacity 1) quando si rimpicciolisce allo scroll */
.itemid-101 nav.art-nav,
.itemid-112 nav.art-nav {
    opacity: 0.8;
}

.itemid-101 nav.art-nav.nav-shrink,
.itemid-112 nav.art-nav.nav-shrink {
    opacity: 1;
}

/* ============================================================
   AZIENDA (itemid 123) — tipografia allineata all'originale
   serramentierredue.it/azienda: corpo Roboto 14px / interlinea
   1.75 / colore #404040; titolo H1 48px / peso 600 / lh 1.2.
   ============================================================ */
.itemid-123 .article-main-content p {
    line-height: 1.75;
    color: #404040;
}

.itemid-123 .article-main-content h1 {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    color: #404040;
}

/* ============================================================
   BREADCRUMBS — separatore "»" come su serramentierredue.it
   (l'originale usa » al posto del ">" di Bootstrap).
   Nota: modifica globale, vale per tutte le pagine.
   ============================================================ */
.mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    content: "»" !important;
}

.art-contatti {
    form button {

    }
}

.page-preventivo {
    /*overflow: hidden;*/
}

.art-ral {
    padding: 12px 10px;
    box-sizing: border-box;
    text-align: center;

    h3 {
        font-weight: 600;
    }
}

.kw-risparmio-row {

    @media (max-width: 1199.99px) {
        padding-inline: 30px;
    }

    .kw-risparmio {

        @media (max-width: 1199.99px) {
            background: rgba(255, 255, 255, .5);
            text-align: center;
            padding: 20px;
        }
    }
}


.art-footer-contatti {
    background: #004b99;
    color: #ffffff;

    h1 {
        min-height: 3.5rem;
    }

    i {
        color: #ffffff;
    }
}

.slider-homepage {
    height: 100vh !important;
    min-height: 30rem;
    max-height: 60rem;
}

.banda-risparmio {
    background: url('/images/homepage/risparmio-energetico.jpg') #f8f8f8;
    background-repeat: no-repeat;
    background-size: auto 100%;
    padding: 170px 0;
    background-position: right center;
    overflow: hidden;
}

.banda-green {
    overflow: hidden;
    background: url('/images/homepage/green.jpg'), url('/images/homepage/green1.jpg') #e0e0e0;
    background-repeat: no-repeat, repeat-x;
    background-size: auto 100%, auto 100%;
    padding: 150px 0;
    background-position: right center, center center;
}


.art-footer {
    .copyright {
        padding-block: .5rem;
    }

    .copyright p {
        color: #404040 !important;
    }

    .copyright a {
        color: revert;
        font-size: revert;
    }
}

.art-breadcrumbs {
    background: none !important;
    border: none;
}

.breadcrumb a, .breadcrumb a:link, .breadcrumb a:visited, .breadcrumb a:hover {
    color: #004b99;
}

.art-postcontent, form {
    h1 {
        color: #404040;
        font-size: 48px;
        font-weight: 600;
        margin: 10px 0;
    }

    p {
        color: #404040;
        font-size: 14px;
        font-family: 'Roboto', sans-serif;
        line-height: 175%;
        margin: 13px 0;
    }
}

.article-main-content {
    padding-block: 3rem;
}

.photogallery {
    overflow: hidden;
    padding-block: 3rem;
    background: #f3f3f3;
}

/* ==========================================================================
   SEZIONE MAPPA + FORM CONTATTI (home #mod-custom233 e articolo contatti)
   Allineata all'originale serramentierredue.it/contatti: mappa più alta
   (600px) e, sulla pagina contatti, sezione a tutta larghezza.
   ========================================================================== */

/* Mappa più alta. L'iframe è forzato a 400px dallo <script> inline del
   modulo (jQuery .css("height","400px") → stile inline SENZA !important):
   l'!important della stylesheet vince a prescindere dal timing del JS.
   Selettore .modulo-mappa usato sia in home che in contatti. */
.modulo-mappa iframe {
    height: 600px !important;
}

/* Respiro verticale attorno al form, su entrambe le pagine. */
#kwForm1 {
    padding-block: 2.5rem;
}

/* .art-contatti è una .row Bootstrap in posizione full-width (after-sheet),
   senza .container che ne assorba i margini negativi di gutter → ~12px di
   overflow orizzontale (barra di scorrimento). Azzeriamo il gutter: mappa e
   form vanno a filo (come sull'originale) e sparisce l'overflow. */
.art-contatti {
    /*--bs-gutter-x: 0;*/
}

/* NB: la pagina Contatti usa ora lo STESSO modulo composito della home
   (mod_custom 233 "Banda Contatti Home" in posizione full-width after-sheet,
   {loadposition home-map}+{loadposition home-contact}), assegnato anche al
   menu Contatti. Markup identico su entrambe le pagine → nessuna regola
   scoped per itemid: la larghezza piena la dà la posizione after-sheet
   (fuori dal .container in index.php), non il CSS. I moduli specifici della
   vecchia pagina Contatti (143 mappa, 228 form, 141 titolo h3) sono
   disattivati e le colonne article-left/right dell'articolo 6 rimosse. */

/* ==========================================================================
   Contact forms (com_kw_contact) — styled to match the live site.
   #kwForm1 = form Contattaci (home + contatti), #kwForm2 = form Richiedi un
   preventivo (solo pagina preventivo). Regole condivise, scoped agli id dei
   form così nient'altro (modale cookie, altri .art-button / input) è toccato.
   L'id del form è emesso come kwForm<form->id> dal template contactform.
   ========================================================================== */
#kwForm1,
#kwForm2 {
    max-width: 600px;
    width: 100%;
}

/* Preventivo: il form sta in una colonna col-12 a piena larghezza (posizione
   page-center-bottom sotto il titolo), quindi va centrato; il form Contatti
   sta già in una col-md-6 da 600px e non serve. */
#kwForm2 {
    margin-inline: auto;
}

.mod-custom.custom {
    overflow: hidden;
}

/* Inputs + textarea: light-gray fill, thin border, small radius (live look) */
#kwForm1 input[type="text"],
#kwForm1 input[type="email"],
#kwForm1 textarea,
#kwForm2 input[type="text"],
#kwForm2 input[type="email"],
#kwForm2 textarea {
    width: 100%;
    background: #F9F7F8;
    border: 1px solid #C7C7C7;
    border-radius: 3px;
    padding: 9px;
    margin: 10px 5px 0 0;
    color: #404040;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    box-shadow: none;
}

#kwForm2 {
    max-width: 100%;
}

#kwForm1 textarea,
#kwForm2 textarea {
    height: 130px;
}

/* Neutralise Bootstrap's focus glow to keep the plain live appearance */
#kwForm1 input[type="text"]:focus,
#kwForm1 input[type="email"]:focus,
#kwForm1 textarea:focus,
#kwForm2 input[type="text"]:focus,
#kwForm2 input[type="email"]:focus,
#kwForm2 textarea:focus {
    border-color: #C7C7C7;
    box-shadow: none;
    outline: none;
}

/* Submit button: blue like live (#004b99), inverts to white on hover */
#kwForm1 .art-button,
#kwForm2 .art-button {
    background: #004b99;
    border: 1px solid #004b99;
    border-radius: 2px;
    padding: 0 14px;
    min-width: 150px;
    height: 44px;
    line-height: 44px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
}

/* ============================================================
   PREVENTIVO (menu 340) — sfondo bianco solo su questa pagina.
   Hook: Page Class "page-preventivo" impostata sulla voce di menu
   (finisce nella classe del <body>), così evitiamo il selettore .itemid-N.
   ============================================================ */
.page-preventivo .art-sheet {
    background: #fff;
}

#kwForm1 .art-button:hover,
#kwForm2 .art-button:hover {
    background: #FFFFFF;
    border: 1px solid #004b99;
    color: #004b99;
}