/* ==========================================================================
   Header style-3 (custom, creato per questo progetto) - 3 colonne:
   filtro-lingue (sinistra) / logo (centrato) / menu (destra), come in
   produzione J3. Logo resta col-auto (larghezza naturale, in mezzo);
   filtro-lingue e menu hanno entrambi flex-auto (crescono in egual misura
   per il flex-grow di default) - questo centra matematicamente il logo a
   prescindere dal contenuto reale dei due lati. Il contenuto del menu va
   pero' spinto esplicitamente sul bordo destro (di default un flex item
   singolo dentro justify-content-between resta a sinistra della sua stessa
   box "cresciuta").
   ========================================================================== */
#sp-header #sp-menu .menu-wrap {
    /* Bootstrap 5 applica !important a TUTTE le utility class (anche
       .justify-content-between senza breakpoint, non solo le varianti
       responsive) - serve !important anche qui per vincere. */
    justify-content: flex-end !important;
}
/* Non bastava: il PADRE di .menu-wrap (.sp-column) e' anch'esso
   justify-content-between con altri 2 figli oltre al menu -
   ".header-modules" (search/login, vuoto, 0px - nessun problema) e
   ".social-wrap" (icone social, non configurate ma il div occupa comunque
   ~60px anche vuoto) - lo space-between del genitore lascia quindi spazio
   DOPO il menu per quel blocco fantasma, impedendo al testo del menu di
   arrivare fino al bordo destro reale. Nessuna icona social prevista per
   questo progetto (anche in produzione J3 l'header non le ha) - nascosto
   del tutto, e forzato flex-end anche sul genitore per sicurezza. */
#sp-header #sp-menu .social-wrap {
    display: none !important;
}
#sp-header #sp-menu .sp-column {
    justify-content: flex-end !important;
}
/* La vera causa: .sp-megamenu-wrapper (il <nav> con le voci di menu) ha di
   suo justify-content:center da template.css - le regole sopra spostavano
   correttamente il CONTENITORE a destra, ma le voci restavano centrate
   DENTRO quel contenitore invece di allinearsi al suo bordo destro. */
#sp-menu.menu-with-social .sp-megamenu-wrapper {
    justify-content: end;
}
#sp-main-body {
    padding: 0px;
}
.article-can-edit {
    display: none !important;
}
#sp-footer {
    background: #22b8f0;
}
/* Lista paesi "Dove operiamo" - come in produzione: niente pallini, una
   riga sotto ogni voce. */
#sp-contacts-section ul {
    list-style: none;
    padding-left: 0;
}
#sp-contacts-section ul li {
    border-bottom: 1px solid #e0e0e0;
    padding: 6px 0;
}
/* L'utente ha aggiunto un'icona (globo) prima del selettore lingua tramite
   il campo "header_text" del modulo mod_languages - viene renderizzata
   come <p> dentro .mod-languages__pretext, un elemento di BLOCCO impilato
   SOPRA la <ul> delle lingue invece che affiancato. Questo faceva crescere
   #sp-filtro-lingue oltre i 90px degli altri due blocchi (logo/menu),
   scomponendo l'allineamento verticale di tutto l'header (la row si
   dimensiona sul figlio piu' alto). Fix: .mod-languages diventa un'unica
   riga flex che contiene icona + lista fianco a fianco, altezza fissa
   90px come logo/menu. */
#sp-header #sp-filtro-lingue .mod-languages {
    display: flex;
    align-items: center;
    height: 90px;
}
#sp-header #sp-filtro-lingue .mod-languages .pretext {
    margin: 0 10px 0 0;
    display: flex;
    align-items: center;
}
#sp-header #sp-filtro-lingue .mod-languages .pretext p {
    margin: 0;
    color: #212e6a;
}
#sp-header #sp-filtro-lingue .mod-languages ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}
#sp-header #sp-filtro-lingue .mod-languages ul li {
    margin-right: 12px;
    font-weight: 300;
}
#sp-header #sp-filtro-lingue .mod-languages ul li.lang-active {
    font-weight: 600;
}
#sp-header #sp-filtro-lingue .mod-languages ul li a {
    color: #212e6a;
    text-transform: uppercase;
}
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
    text-transform: uppercase;
    font-weight: 600;
    color: #212e6a;
}
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li:hover > a {
    color: #29abe2;
}

/* ==========================================================================
   Colori/branding portati da bingroup-j3.eu: blu navy primario #212e6a,
   accento arancio #ff7302 (titoli pagine dettaglio), celeste #29abe2 (voce
   menu attiva). Font body Open Sans (stesso di produzione).
   ========================================================================== */
body {
    font-family: 'Open Sans', sans-serif;
}
.bin-quote {
    background-color: #212e6a;
    text-align: center;
    color: #ffffff;
    font-size: 40px;
    font-style: italic;
    font-weight: 300;
    padding: 50px 25px;
    margin: 0;
}
.detail-title {
    color: #ff7302;
}
.detail-content {
    padding-bottom: 100px;
}
.contact-title {
    color: #212e6a;
    font-weight: 700;
    font-size: 40px;
    border-bottom: 2px solid #212e6a;
    padding: 0 30px 5px 0;
    width: auto;
    display: table;
}

/* ==========================================================================
   Hero Home - carousel Bootstrap fullwidth (sostituisce Revolution Slider
   di produzione), stesso pattern full-bleed gia' usato nel resto della
   serie: 100vw + margini negativi per uscire dal .container.
   ========================================================================== */
#hero-home {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
#hero-home .carousel-item {
    height: 80vh;
    min-height: 380px;
}
#hero-home .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#hero-home .hero-caption {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    color: #ffffff;
    text-shadow: 1px 1px 8px rgba(0,0,0,0.6);
}
#hero-home .hero-caption h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

/* Hero pagine di dettaglio (Analisi/Progetto/Innovazione) - immagine
   singola fullwidth, stesso pattern full-bleed, altezza ridotta rispetto
   alla Home (era un'unica slide statica in produzione, non un carosello). */
.hero-detail {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 45vh;
    min-height: 280px;
}
.hero-detail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   Griglia Servizi (Analisi/Progetto/Innovazione) - effetto hover "ming",
   portato 1:1 da bingroup-j3.eu/templates/shaper_helix3/css/custom.css
   (CSS puro, nessuna dipendenza, compatibile cosi' com'e' con Helix
   Ultimate).
   ========================================================================== */
.grid {
    position: relative;
    clear: both;
    list-style: none;
    text-align: center;
}
.grid figure {
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: center;
    cursor: pointer;
    margin: 0;
}
.grid figure img {
    position: relative;
    display: block;
    max-width: 100%;
    width: 100%;
    opacity: 0.9;
}
.grid figure figcaption {
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
    pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}
.grid figure h2 {
    word-spacing: -0.15em;
    font-weight: 300;
    text-shadow: 1px 1px 5px #000000;
}
.grid figure h2,
.grid figure p {
    margin: 0;
}
.grid figure p {
    letter-spacing: 1px;
    font-size: 14px;
}
figure.effect-ming {
    background: #030c17;
}
figure.effect-ming img {
    opacity: 1;
    transition: opacity 0.35s;
    filter: grayscale(100%);
}
figure.effect-ming figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
    content: '';
    opacity: 0;
    transition: opacity 0.35s, transform 0.35s;
    transform: scale3d(1.4,1.4,1);
}
figure.effect-ming h2 {
    margin: 20% 0 10px 0;
    transition: transform 0.35s;
}
figure.effect-ming p {
    padding: 1em;
    opacity: 0;
    transition: opacity 0.35s, transform 0.35s;
    transform: scale(1.5);
}
figure.effect-ming:hover h2 {
    transform: scale(0.9);
}
figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover p {
    opacity: 1;
    transform: scale3d(1,1,1);
}
figure.effect-ming:hover figcaption {
    background-color: rgba(58,52,42,0);
}
figure.effect-ming:hover img {
    opacity: 0.4;
    filter: grayscale(0%);
}
.servizi-title {
    background: #212e6a;
    color: #ffffff;
    padding: 10px 0 10px 5px;
    margin: 0 0 15px 0;
}

/* Sezione Contatti Home */
#sp-contacts-section {
    padding: 60px 0;
}

@media (max-width: 992px) {
    #sp-header #sp-filtro-lingue .mod-languages {
        height: 50px;
    }
}