/* Studio Tuscano brand overrides (migrazione da Joomla 3) */

/* Font corsivo del brand (usato per titoli pagina, "I nostri Servizi", slider):
   sul sito originale viene caricato da Google Fonts, qui non era mai stato
   importato quindi il browser ricadeva sul cursive di sistema. */
@import url('https://fonts.googleapis.com/css?family=Italianno&display=swap');

/* Larghezza del contenuto come sul sito originale: il vecchio template usa
   Bootstrap 3 con .container = 1140px, Bootstrap 5 arriva a 1320px sopra i
   1400px di viewport e allargava tutto il sito (menu, bande, footer). */
@media (min-width: 1400px) {
    .container {
        max-width: 1140px;
    }
}

.art-nav {
    border-bottom: none;
}

/* Top bar (telefono/email): sul sito originale (.art-topmenu) tutto il testo e'
   nel cyan del brand con 15px di padding verticale; qui restava nel grigio di
   default del tema e senza padding. */
.art-modulo-topmenu {
    padding: 15px 0;
    border-bottom: none;
}

.art-modulo-topmenu .art-topmenu-contenuto,
.art-modulo-topmenu .art-topmenu-contenuto i,
.art-modulo-topmenu .art-topmenu-contenuto a {
    color: #72d0eb;
}

.section-title-cursive {
    font-family: 'Italianno', cursive !important;
    font-size: 62px !important;
    color: #72d0eb !important;
    text-align: center;
    font-weight: 400;
}

.art-nav, .art-nav .container-nav {
    background-color: transparent !important;
}

/* Menu principale a due righe, come sul sito originale:
   riga 1 = logo + CTA su sfondo navy chiaro, riga 2 = voci di menu su navy pieno.
   Il layout kwtemplate usa markup Bootstrap5 standard (.navbar-nav .nav-link),
   non le classi "art-hmenu" del vecchio template J3. */
/* NON sticky: verificato sul sito originale (scroll dal vivo) che il menu scorre
   via con la pagina, non resta agganciato in alto. Resta position:relative
   (default di kwtemplate) solo per sovrapporsi correttamente allo slider sotto. */
header.header.container-header {
    position: relative;
    z-index: 10;
}

/* Come sul sito originale: lo slider hero risale sotto l'header (semi-trasparente),
   che vi resta sovrapposto invece di spingerlo in basso. */
.kw-slider {
    position: relative;
    z-index: 1;
    margin-top: -200px;
}
/* Altezza dello slider come sul sito originale: RevSlider tiene le proporzioni
   della griglia 1310x700 e si ferma a 700px sui monitor grandi (il CSS del
   modulo imposta 600px fissi, che su mobile diventava un blocco enorme). */
.kw-slider.swiper-container {
    height: 53.3vw;
    max-height: 700px;
}
@media (max-width: 1199.98px) {
    .kw-slider {
        margin-top: 0;
    }
}

/* Il gradiente blu del sito originale (.art-slider .slotholder:before) e' sull'IMMAGINE,
   non sul menu: senza, il confine tra header e foto e' un taglio netto ("bordo bianco").
   Stessi valori del vecchio sito per un risultato identico. */
.kw-slider .swiper-slide {
    position: relative;
}
.kw-slider .swiper-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(16,31,65,1) 9%, rgba(16,31,65,.1) 100%);
    pointer-events: none;
    z-index: 0;
}
.kw-slider .kw-slide-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
/* Il div ha anche la classe "container" (impostata come "Classe contenitore"
   sulla slide): stesso container Bootstrap del menu sopra, quindi il testo
   si allinea esattamente al bordo sinistro del menu invece di un padding
   percentuale arbitrario. */
/* Testo della slide (titolo + sottotitolo), come sul sito originale: titolo in
   corsivo bianco, sottotitolo in bianco grassetto, allineati a sinistra sopra
   la foto. */
/* Anche il testo della slide scala con la larghezza come su RevSlider: 80px
   sulla griglia piena, 26px a 430px di viewport. */
.kw-slider .kw-slide-title {
    font-family: 'Italianno', cursive;
    color: #ffffff;
    font-size: min(80px, 6.05vw);
    font-weight: 400;
    margin-bottom: .5rem;
}
.kw-slider .kw-slide-subtitle {
    color: #ffffff;
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    text-shadow: rgba(0, 0, 0, .5) 0 2px 5px;
    /* Sul sito originale il sottotitolo non ha larghezza massima e sta su una
       riga sola (563px a 20px in Arial): qui il font e' Open Sans, piu' largo,
       quindi anche 36rem lo mandavano a capo. */
    max-width: none;
}
@media (max-width: 991.98px) {
    .kw-slider .kw-slide-subtitle {
        font-size: 14px;
        line-height: 1.3;
    }
}

/* Ingresso del testo della slide come sul sito originale (RevSlider): il
   titolo scende dall'alto ("sft"), il sottotitolo entra da sinistra ("sfl")
   con un piccolo ritardo, invece di un fade-in unico su tutto il blocco. */
.kw-slider .kw-slide-content.animate__animated.kw-caption-reveal .kw-slide-title {
    animation: kwCaptionFromTop .6s ease both;
}
.kw-slider .kw-slide-content.animate__animated.kw-caption-reveal .kw-slide-subtitle {
    animation: kwCaptionFromLeft .6s ease both;
    animation-delay: .3s;
}
@keyframes kwCaptionFromTop {
    from { opacity: 0; transform: translateY(-40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes kwCaptionFromLeft {
    from { opacity: 0; transform: translateX(-60px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Come sullo slider: anche la copertina delle pagine interne (Lo Studio, Contatti,
   Servizi, News, ecc. - layout "header" in layouts/kw_layout/header/*.php) risale
   sotto il menu sticky, con lo stesso overlay blu invece del velo bianco/nero
   di default di kwtemplate. */
#default-header-image,
#parallax-header,
#fullheight-header-image,
#style-1-header-image,
#header-video {
    margin-top: -200px;
    position: relative;
    z-index: 1;
}
/* Come sul sito originale: copertina alta 500px, quindi il titolo cade alla
   stessa altezza (l'altezza di default del layout era ~447px). */
@media (min-width: 1200px) {
    #default-header-image,
    #parallax-header,
    #fullheight-header-image,
    #style-1-header-image {
        height: 500px;
    }
}
#default-header-image:before,
#parallax-header:before,
#style-1-header-image:before,
#fullheight-header-image:before {
    background: linear-gradient(to bottom, rgba(16,31,65,1) 9%, rgba(16,31,65,.1) 100%) !important;
}
@media (max-width: 1199.98px) {
    #default-header-image,
    #parallax-header,
    #fullheight-header-image,
    #style-1-header-image,
    #header-video {
        margin-top: 0;
    }
}
/* Sul sito originale il titolo non e' centrato nella copertina ma sta piu' in
   basso (a 264px dal bordo alto invece di 210): il padding sposta il blocco
   centrato di quei 54px. */
@media (min-width: 1200px) {
    #default-header-contenuto,
    #parallax-contenuto,
    #style-1-header-contenuto,
    #fullheight-header-contenuto {
        padding-top: 108px;
    }
}

/* Col nuovo overlay blu il titolo pagina scuro di default sparisce nell'immagine:
   sul sito originale era bianco e in corsivo, come le altre scritte del brand. */
#default-header-contenuto .page-title,
#default-header-contenuto .article-title,
#default-header-contenuto .category-title,
#parallax-contenuto .page-title,
#parallax-contenuto .article-title,
#parallax-contenuto .category-title,
#style-1-header-contenuto .page-title,
#style-1-header-contenuto .article-title,
#style-1-header-contenuto .category-title {
    color: #ffffff !important;
    font-family: 'Italianno', cursive !important;
    font-size: 60px !important;
    font-weight: 400;
    text-transform: none;
}

/* Barra del percorso: navy con link azzurri e separatore "»" come sul sito
   originale, al posto della fascia grigia con testo scuro del tema. */
.art-breadcrumbs {
    background-color: #101f41;
    border-bottom: 0;
    padding: 5px 10px;
    color: #ffffff;
}
.art-breadcrumbs .breadcrumb {
    --bs-breadcrumb-divider: '\00bb';
    margin: 0;
    padding: 0;
    font-size: 14px;
}
.art-breadcrumbs .breadcrumb-item,
.art-breadcrumbs .breadcrumb-item.active {
    color: #ffffff;
}
/* Il tema stampa ">" con un content fisso e !important (template.css), non con
   la variabile Bootstrap: sul sito originale il separatore e' "»". */
.art-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    content: '\00bb' !important;
    color: #ffffff;
}
.art-breadcrumbs .breadcrumb-item a:link,
.art-breadcrumbs .breadcrumb-item a:visited {
    color: #72d0eb;
}
.art-nav-2rows {
    flex-wrap: wrap;
    padding: 0 !important;
}
.art-nav-toprow {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 40px 1rem;
}
@media (min-width: 1200px) {
    .art-nav-2rows .art-nav-menurow.offcanvas-xl,
    .art-nav-2rows .art-nav-menurow.navbar-collapse {
        width: 100% !important;
        flex-basis: 100% !important;
        background-color: transparent !important;
        padding: 0;
    }
    /* Lo sfondo navy va solo sull'elenco del menu (come sul vecchio sito, dove
       e' sul .container interno e non su tutta la riga), non su tutta la riga
       a tutta larghezza. */
    .art-nav-menurow .navbar-nav {
        width: 100%;
        flex: 0 1 auto;
        flex-wrap: wrap;
        row-gap: .25rem;
        /* Sul sito originale (.art-nav-menu > div) la barra e' navy all'82%,
           quindi lo slider/la copertina si intravedono appena sotto il menu. */
        background-color: rgba(16, 31, 65, .82);
        padding: 0 1rem;
    }
}
.art-nav .navbar-nav .nav-link {
    color: #72d0eb !important;
    font-family: 'Open Sans', Arial, sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
    white-space: nowrap;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding: 0 18px;
}
.art-nav .navbar-nav .nav-link:hover,
.art-nav .navbar-nav .nav-item.current > .nav-link,
.art-nav .navbar-nav .nav-link.active {
    color: #ffffff !important;
}
.art-nav .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}
.art-nav .navbar-brand,
.art-nav .art-logo {
    display: flex;
    align-items: center;
}
/* Logo e pulsante CTA con le misure del sito originale: il file logo_white.png
   e' 278x84 ma li viene mostrato a 200x60. */
.art-nav .art-logo img {
    width: 200px;
    height: auto;
}
.art-nav-cta {
    background: #72d0eb;
    color: #ffffff !important;
    display: inline-block;
    padding: 0 15px;
    border: 2px solid #72d0eb;
    border-radius: 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 49px;
    white-space: nowrap;
}
.art-nav-cta:hover {
    color: #ffffff !important;
    opacity: .9;
}

/* Corpo del testo: sul sito originale e' grigio #777 con interlinea 1.75
   (14px/24.5px), qui era #2c2c2c con interlinea 1.5 (14px/21px). Il colore va
   ripetuto sui selettori che il tema genera in style.min.css, altrimenti
   restano loro. */
body,
body#art-main,
.art-postcontent,
.art-postcontent li,
.art-post li,
.art-textblock li,
.art-blockcontent,
.art-blockcontent li,
blockquote {
    color: #777777;
}
body,
body#art-main,
.art-postcontent,
.kw-module-content {
    line-height: 1.75;
}

/* Pulsanti: pillola azzurra come sul sito originale (14px, 0 30px, raggio 26px,
   riga alta 49px), non il rettangolo con padding 10px del tema. */
/* Il tema imposta il padding con "a:link.art-button:link" (pseudo-classe
   ripetuta per alzare la specificita'), quindi qui serve la stessa forma. */
.art-button,
a.art-button,
a:link.art-button:link,
a:visited.art-button:visited,
body a.art-button,
body a.art-button:link,
body a.art-button:visited,
a.art-button.link,
button.art-button,
input.art-button {
    display: inline-block;
    padding: 0 30px;
    border: 2px solid #72d0eb;
    border-radius: 26px;
    font-size: 14px;
    line-height: 49px;
    font-weight: 700;
    background: #72d0eb;
    color: #ffffff;
}

.swiper-pagination-bullet-active {
    background: #72d0eb;
}

/* Footer: sul sito originale e' una fascia grigia (#343a40) con una riga di
   colonne dentro il container (contatti | ultime notizie | link utili |
   consulenti del lavoro), titoli bianchi 20px e link azzurri 14px, e sotto una
   barra copyright separata. Qui i moduli venivano impilati a tutta larghezza,
   con i titoli nel navy di default del tema (#101f41, illeggibile sul fondo
   scuro) e il menu "Link utili" attaccato al bordo sinistro perche' fuori dal
   container. */
footer.art-footer {
    background-color: #343a40;
    color: #ffffff;
}
footer.art-footer a {
    color: #72d0eb;
}

/* Le colonne stanno nel .container di Bootstrap (aggiunto in index.php), cosi'
   seguono gli stessi breakpoint del resto del sito. */
.art-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 30px;
    padding-top: 48px;
}

/* Nel DOM i moduli arrivano in un ordine diverso da quello di stampa del sito
   originale. */
.art-footer-inner > [class*="mod_kw_layout"] {
    order: 1;
}
.art-footer-inner > .footer-latest-news {
    order: 2;
}
.art-footer-inner > .navbar-footer {
    order: 3;
}
.art-footer-inner > [class*="mod_kw_partners"] {
    order: 4;
}
.art-footer-inner > [class*="mod_kw_custom"] {
    order: 5;
}

.art-footer-inner > [class*="mod_kw_layout"],
.art-footer-inner > .footer-latest-news,
.art-footer-inner > .navbar-footer,
.art-footer-inner > [class*="mod_kw_partners"] {
    flex: 1 1 220px;
    margin: 0;
}

/* Prima colonna: logo dello studio sopra i contatti, come sul sito originale.
   Il logo sta nel CSS (e non nel contenuto del modulo) perche' cosi' il
   percorso e' relativo al foglio di stile e resta valido anche quando il sito
   non e' in sottocartella. */
.art-footer-inner > [class*="mod_kw_layout"]::before {
    content: "";
    display: block;
    width: 200px;
    height: 60px;
    margin-bottom: 20px;
    background: url("../../../images/logo/logo_white.png") no-repeat left center;
    background-size: contain;
}
.art-footer-inner > [class*="mod_kw_layout"] p {
    margin: 3px 0 0;
    line-height: 1.75;
    color: #72d0eb;
}
.art-footer-inner > [class*="mod_kw_layout"] a:link,
.art-footer-inner > [class*="mod_kw_layout"] a:visited {
    color: #72d0eb;
}
.art-footer-inner > [class*="mod_kw_layout"] i {
    margin-right: 4px;
}

/* Colonna "Ultime notizie": titolo del link azzurro 14px e data bianca 13px
   con icona orologio, come sul sito originale. */
.footer-latest-news ul {
    list-style: none;
    margin: 0;
    padding: 16px 0 0;
}
.footer-latest-news li {
    margin-bottom: 14px;
}
.art-footer-inner .footer-latest-news li > a:link,
.art-footer-inner .footer-latest-news li > a:visited {
    display: block;
    line-height: 1.5;
    color: #72d0eb;
}
.art-footer-inner .footer-latest-news li > p {
    margin: 2px 0 0;
    font-size: 13px;
    color: #ffffff;
}
.footer-latest-news li > p i {
    margin-right: 4px;
}

/* I moduli hanno un .container annidato: dentro una colonna va neutralizzato. */
.art-footer-inner .container {
    max-width: none;
    width: auto;
    padding: 0;
    margin: 0;
}

footer.art-footer h2,
footer.art-footer h3,
footer.art-footer h4 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px;
}

footer.art-footer p,
footer.art-footer li,
footer.art-footer a {
    font-size: 14px;
}

/* Il menu del footer usa le classi del menu orizzontale (voci alte 74px):
   qui deve essere una lista verticale. */
footer.art-footer .art-hmenu {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    text-transform: none;
}
footer.art-footer .art-hmenu > li > a {
    display: block;
    height: auto;
    line-height: 1.8;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    color: #72d0eb;
}

/* Logo Consulenti del Lavoro: 124px e allineato a sinistra come sul sito
   originale (i margini di .my-5 / .mx-auto sono utility Bootstrap con
   !important, quindi va sovrascritto allo stesso modo). */
footer.art-footer [class*="mod_kw_partners"] .art-slick,
footer.art-footer [class*="mod_kw_partners"] .art-slick > div {
    margin: 0 !important;
}
/* Il modulo e' un carosello slick tarato su 4 loghi per riga: con un solo
   logo, dentro una colonna del footer, calcola una slide da 82px e spezza la
   didascalia. Nel footer la slide deve prendere tutta la colonna. */
footer.art-footer [class*="mod_kw_partners"] .slick-track,
footer.art-footer [class*="mod_kw_partners"] .slick-slide {
    width: 100% !important;
    transform: none !important;
}
footer.art-footer [class*="mod_kw_partners"] .slick-slide {
    padding: 0;
}
footer.art-footer [class*="mod_kw_partners"] img {
    width: 124px;
    height: auto;
    margin-left: 0;
    margin-right: 0;
}
footer.art-footer [class*="mod_kw_partners"] h3 {
    font-size: 14px;
    font-weight: 400;
    color: #72d0eb;
    margin: 10px 0 0;
}

/* Barra copyright: riga a se' in fondo alla fascia (il modulo si porta dietro
   uno sfondo nero inline). */
.art-footer-inner > [class*="mod_kw_custom"] {
    flex: 0 0 100%;
    margin-top: 40px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    background-color: transparent !important;
}
footer.art-footer .copyright p {
    margin: 0;
    font-size: 13px;
}

/* "I nostri Servizi" in home: sul sito originale le card sono piatte (niente
   ombra/bordo arrotondato) e "spiccano" per contrasto (sfondo card bianco su
   sfondo sezione grigio chiaro #f8f9fa, impostato come colore di background
   del modulo), testo centrato, con un'icona sopra al titolo (grigio #777,
   56px, come fa-4x sul sito originale) e il titolo in azzurro brand invece
   del blu navy di default. */
.mod_kw_service-140 .art-kwmod-item {
    background-color: #ffffff;
    box-shadow: none;
    border-radius: 0;
    text-align: center;
}
.mod_kw_service-140 .kwmod-icon {
    color: #777777;
    font-size: 56px;
    margin-bottom: .5rem;
}
.mod_kw_service-140 .kwmod-title h2,
.mod_kw_service-140 .kwmod-title h2 a:link,
.mod_kw_service-140 .kwmod-title h2 a:visited {
    color: #72d0eb;
}
/* Titolo della card: 20px come sul sito originale, non i 28px degli h2. */
.mod_kw_service-140 .kwmod-title h2 {
    font-size: 20px;
    line-height: 1.2;
}
.mod_kw_service-140 .kwmod-title h2 a:hover {
    color: #101f41;
}

/* Carosello "Ultime notizie": sul sito originale la card e' un box bianco
   (padding 24px) su fascia grigia #f8f9fa, immagine alta 350px, data grigia
   sopra il titolo, titolo azzurro 18px giustificato, "Scopri di piu'" come
   link di testo e le icone social sotto un filetto. */
.art-blog-carousel {
    background-color: #f8f9fa;
    padding: 48px 0;
}
.art-blog-carousel .art-blog-image-container .art-blog-image {
    min-height: 0;
    height: 350px;
}
.art-blog-carousel .art-blog-contenuto {
    background-color: #ffffff;
    padding: 24px;
}
.art-blog-carousel .art-blog-contenuto .art-blog-info {
    margin: 0 0 13px;
    font-size: 14px;
    color: #777777;
}
.art-blog-carousel .art-blog-contenuto .art-blog-title {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 700;
    text-align: justify;
}
.art-blog-carousel .art-blog-contenuto .art-blog-title a:link,
.art-blog-carousel .art-blog-contenuto .art-blog-title a:visited {
    color: #72d0eb;
}
.art-blog-carousel .art-blog-description,
.art-blog-carousel .art-blog-description p {
    font-size: 14px;
    color: #777777;
}
.art-blog-carousel .art-blog-readmore {
    font-size: 14px;
}
.art-blog-carousel .art-blog-footer {
    display: block;
    margin-top: 0;
}
.art-blog-carousel .art-blog-footer hr {
    margin: 16px 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
    opacity: 1;
}
.art-blog-carousel .art-blog-footer .art-social-list {
    margin-left: 0;
}

/* Zoom dell'immagine al passaggio del mouse, come sul sito originale
   (.art-news-image:hover .art-news-image-inner -> scale 1.2 in .5s, con velo
   nero al 30%). Qui l'immagine e' lo sfondo del link, quindi si ingrandisce il
   link e il contenitore fa da maschera. */
.art-blog-carousel .art-blog-image-container {
    overflow: hidden;
}
.art-blog-carousel .art-blog-image-container .art-blog-image {
    transition: transform .5s;
}
.art-blog-carousel .art-blog-image-container:hover .art-blog-image {
    transform: scale(1.2);
}
.art-blog-carousel .art-blog-image-container:hover a:before {
    background-color: rgba(0, 0, 0, .3);
}

/* Elenco news / pubblicazioni: sul sito originale le card sono bianche come
   quelle del carosello in home (immagine 350px, contenuto con padding 24px,
   data grigia, titolo azzurro 18px giustificato). Il tema le colora invece con
   un fondo grigio scuro translucido e testo bianco. */
/* Pagina Servizi: la griglia usa il layout di categoria portfolio_1, che porta
   card grigie con hover rosso e scale. Sul sito originale
   (a.art-servizio-contenuto) sono card bianche centrate, testo #777, icona
   grigia 56px (fa-4x) e titolo azzurro 20px. */
.art-style_1 .art-item {
    padding: 24px 0;
}
.art-style_1 .art-item a,
.art-style_1 .art-item a:link,
.art-style_1 .art-item a:visited,
.art-style_1 .art-item a:hover {
    background-color: #ffffff;
    color: #777777;
    padding: 24px;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    text-align: center;
}
.art-style_1 .art-item a:before,
.art-style_1 .art-item a:after {
    display: none;
}
.art-style_1 .art-item a i,
.art-style_1 .art-item a:hover i {
    font-size: 56px;
    color: #777777;
}
.art-style_1 .art-item-title,
.art-style_1 .art-item a:hover .art-item-title {
    margin: 20px 0;
    font-size: 20px;
    font-weight: 400;
    color: #72d0eb;
}

/* Colonna "Ultime notizie" nelle pagine articolo, come sul sito originale:
   titolo 20px grigio scuro, miniatura 75px, titoli azzurri 14px e data grigia
   con icona orologio. */
.art-modulo-ultime-notizie h2 {
    font-size: 20px;
    font-weight: 700;
    color: #383838;
    margin: 0 0 20px;
}
.art-modulo-ultime-notizie ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.art-modulo-ultime-notizie li {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}
.art-modulo-ultime-notizie .art-ultime-notizie-image {
    flex: 0 0 75px;
}
.art-modulo-ultime-notizie .art-ultime-notizie-testo h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
}
.art-modulo-ultime-notizie .art-ultime-notizie-testo a:link,
.art-modulo-ultime-notizie .art-ultime-notizie-testo a:visited {
    font-size: 15px;
    font-weight: 700;
    color: #72d0eb;
}
.art-modulo-ultime-notizie .art-ultime-notizie-testo p {
    margin: 1px 0 0;
    font-size: 14px;
    color: #777777;
}
.art-modulo-ultime-notizie .art-ultime-notizie-testo p i {
    margin-right: 4px;
}

/* Pubblicazioni (layout di categoria category_1): titolo azzurro come sul sito
   originale, al posto del navy degli h2. */
.art-category_1-title,
.art-category_1-title a:link,
.art-category_1-title a:visited {
    color: #72d0eb;
    font-weight: 400;
}

/* Titolo dell'articolo: corsivo azzurro 62px come sul sito originale, al posto
   del navy 32px degli h1 del tema. */
.art-blog-detail .page-title .article-title {
    font-family: 'Italianno', cursive;
    font-size: 62px;
    font-weight: 400;
    line-height: 1.1;
    color: #72d0eb;
    margin: 0 0 20px;
    text-transform: none;
}

/* Le card stanno su una fascia grigio chiaro, come la .art-news.bg-light del
   sito originale: su fondo bianco non si distinguerebbero. */
.art-article.blog-category {
    margin: 0;
    padding: 50px 0;
    background-color: #f8f9fa;
}

/* I selettori sono quelli del layout in uso (blog_6), che porta il proprio
   foglio di stile: serve la stessa specificita' per sovrascriverlo. */
/* Le colonne delle card hanno lo stesso passo del sito originale (py-4 e 15px
   di lato sulla colonna): senza, le righe risultavano piu' compatte. */
.art-blog_6 > [class*="col-"] {
    padding: 24px 15px;
}
.art-blog_6 .art-blog-item {
    background-color: #ffffff;
    padding: 0;
    color: #777777;
}
.art-blog_6 .art-blog-item .art-blog-image {
    height: 350px;
    min-height: 0;
}
.art-blog_6 .art-blog-item .art-blog-contenuto {
    padding: 24px;
}
.art-blog_6 h2.art-blog-title {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 700;
    text-align: justify;
    color: #72d0eb;
}
.art-blog_6 h2.art-blog-title > a,
.art-blog_6 h2.art-blog-title > a:link,
.art-blog_6 h2.art-blog-title > a:visited {
    font-size: 18px;
    color: #72d0eb;
}
.art-blog_6 .art-blog-item p,
.art-blog_6 .art-blog-item .art-blog-info {
    color: #777777;
    font-size: 14px;
}

/* Bande contatti (moduli "Banda contattaci" e "Banda contatti"), come sul sito
   originale. L'immagine di sfondo sta qui e non nel parametro del modulo
   perche' il chrome la stampa come url() relativa inline e il sito non emette
   <base href>: nel CSS il percorso e' relativo al foglio di stile e resta
   valido anche fuori dalla sottocartella locale. */
/* Sul sito originale il velo navy all'80% (.art-modulo-banda-contatti:before)
   sta sopra la foto: qui e' un gradient a tinta unita nello stesso
   background-image, cosi' non serve un elemento in piu'. */
.art-banda-cta {
    background-image: linear-gradient(rgba(16, 31, 65, .8), rgba(16, 31, 65, .8)),
    url("../../../images/banda-contatti/studio-tuscano-banda-contatti.jpg");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    padding: 90px 0;
}
.art-banda-cta h2 {
    font-size: 32px;
    color: #ffffff;
    margin: 0;
}
.art-banda-cta p {
    font-size: 14px;
    color: #ffffff;
    margin: 0;
}

/* Piatta come sul sito originale: lo stesso velo navy all'80%, ma qui sotto non
   c'e' nessuna foto. */
.art-banda-form {
    background-color: rgba(16, 31, 65, .8);
}
.art-banda-form h2 {
    font-size: 28px;
    color: #72d0eb;
    text-align: center;
    margin: 0 0 20px;
}
.art-banda-form p {
    font-size: 14px;
    color: #ffffff;
    text-align: center;
}
/* Campi dei form (banda home e pagina Contatti): grigi pieni senza bordo come
   sul sito originale (#e6e6e6, spigoli vivi, padding 24px 8px). */
.art-banda-form input[type="text"],
.art-banda-form input[type="email"],
.art-banda-form input[type="tel"],
.art-banda-form textarea,
[class*="mod_kw_contact"] input[type="text"],
[class*="mod_kw_contact"] input[type="email"],
[class*="mod_kw_contact"] input[type="tel"],
[class*="mod_kw_contact"] textarea {
    background-color: #e6e6e6;
    border: 0;
    border-radius: 0;
    padding: 16px 8px;
    color: #4f5359;
    width: 100%;
}
.form-control::placeholder {
    color: #6c757d;
}
.art-banda-form label {
    color: #ffffff;
}

/* Pubblicazioni: la copertina sul sito originale sta in un box alto 350px con
   l'immagine "contain" larga al massimo 250px (.art-pubblicazioni-image /
   -image-inner); qui l'immagine a tutta colonna allungava la riga a 580px. */
.art-category_1 .art-category_1-image-container {
    height: 350px;
    overflow: hidden;
}
/* Badge "In preparazione" sulla copertina, come sul sito originale
   (.art-pubblicazioni-image > span.badge). */
.art-category_1 .art-category_1-image-container {
    position: relative;
}
.art-category_1 .art-category_1-image-container > .badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 7px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    background-color: #17a2b8;
    border-radius: 4px;
}
.art-category_1 .art-category_1-image {
    width: 100%;
    max-width: 250px;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

/* Pagina Contatti: form largo 586px e centrato come sul sito originale, non a
   tutta larghezza del contenitore. */
.page-right-top.art-modulo-form-contatti .kw-module-content {
    max-width: 586px;
    margin: 0 auto;
}
/* Pulsante di invio del form contatti: pieno, spigoli vivi, a tutta larghezza e
   in maiuscolo come sul sito originale (gli altri art-button sono pillole). */
.page-right-top.art-modulo-form-contatti button.art-button,
.page-right-top.art-modulo-form-contatti input[type="submit"].art-button {
    width: 100%;
    border-radius: 0;
    text-transform: uppercase;
    background-color: #72d0eb;
    color: #ffffff;
}

/* Banda "Telefono / Scrivici / Trovaci": titoli ciano come sul sito originale. */
.art-modulo-recapiti h3 {
    color: #72d0eb;
}

/* Immagine dell'articolo: proporzioni naturali a piena larghezza della colonna
   come sul sito originale (era uno sfondo ritagliato a 400px). */
.art-blog-detail .art-blog-image-detail {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

/* Riga "Autore - Editore - Anno" della pubblicazione: sul sito originale i
   valori sono separati da un trattino generato in CSS. */
.art-category_1-contenuto .details {
    font-size: 14px;
    color: #777777;
}
.art-category_1-contenuto .details span:not(:last-child)::after {
    content: "-";
    margin-left: 5px;
    margin-right: 5px;
}
/* Pulsante "Acquista": pieno ciano, a differenza degli altri art-button che
   sul sito originale sono in outline. */
a:link.art-pubblicazione-readmore:link,
a:visited.art-pubblicazione-readmore:visited,
body a.art-pubblicazione-readmore {
    background-color: #72d0eb;
    color: #ffffff;
}
/* Allineato a sinistra come il titolo, non centrato. */
.art-category_1 .art-category_1-footer {
    text-align: left;
}

/* Paginazione (News, Pubblicazioni): Joomla 5 stampa Inizio/Indietro/Avanti/Fine
   come icone di una icon-font che kwtemplate non carica, quindi i pulsanti
   restavano vuoti. Sul sito originale sono etichette di testo. */
/* Su mobile i 10 numeri di pagina piu' le etichette non stanno in riga e
   facevano scrollare la pagina in orizzontale. */
.pagination {
    flex-wrap: wrap;
    justify-content: center;
}
.pagination .icon-angle-double-left::before  { content: "Inizio"; }
.pagination .icon-angle-left::before         { content: "Indietro"; }
.pagination .icon-angle-right::before        { content: "Avanti"; }
.pagination .icon-angle-double-right::before { content: "Fine"; }

/* Sezione "Professionisti" (pagina Lo Studio): stesse regole del template
   vecchio (template.css .art-profilo*), foto ritagliata a 320px con zoom e
   velo scuro in hover. */
.art-profilo {
    max-width: 400px;
    margin: 0 auto;
}
.art-profilo-immagine {
    display: block;
    height: 320px;
    overflow: hidden;
    position: relative;
}
.art-profilo-immagine > img {
    transition: all .5s;
}
.art-profilo-immagine:before {
    content: '';
    position: absolute;
    inset: 0;
    transition: all .5s;
}
.art-profilo-immagine:hover:before {
    background-color: rgba(0, 0, 0, .3);
    z-index: 1;
}
.art-profilo-immagine:hover .foto-profilo {
    transform: scale(1.2);
}
.art-profilo h3 {
    font-size: 24px;
    font-weight: 400;
    color: #72d0eb;
}

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

}

/* Extra large devices (max-width 1199.98px) */
@media (max-width: 1199.98px) {
    /* Sotto i 1200px il sito originale nasconde la topbar (telefono/email) e
       mostra il logo con l'hamburger centrato nella riga sotto. */
    .art-modulo-topmenu {
        display: none;
    }

    /* Sotto i 1200px la copertina non risale piu' sotto l'header, quindi
       l'header resta su sfondo bianco e il logo (logo_white.png) diventava
       invisibile: come sul sito originale lo sfondo diventa navy, con la
       stessa opacita' dell'82% della barra del menu. */
    /* Stesso navy all'82% della barra del menu del sito originale
       (.art-nav-menu > div), su tutta l'intestazione mobile: il logo bianco
       resta leggibile e il pannello del menu lascia intravedere la pagina.
       Va su .container-nav perche' e' l'unico elemento a tutta larghezza:
       spostarlo sulle due righe interne lasciava strisce bianche ai bordi. */
    .art-nav {
        background-color: rgba(16, 31, 65, .82) !important;
    }

    /* Barre dell'hamburger bianche come sul sito originale: il pacchetto
       "hamburgers" le disegna nere e sul navy non si vedevano. La riga
       .is-active serve perche' a menu aperto il pacchetto rimette il nero
       con una regola piu' specifica: la X restava invisibile. */
    .art-nav .hamburger-inner,
    .art-nav .hamburger-inner::before,
    .art-nav .hamburger-inner::after,
    .art-nav .hamburger.is-active .hamburger-inner,
    .art-nav .hamburger.is-active .hamburger-inner::before,
    .art-nav .hamburger.is-active .hamburger-inner::after {
        background-color: #ffffff;
    }

    /* Apertura del menu: le voci scendono con una dissolvenza (il collapse di
       Bootstrap anima gia' l'altezza, qui si aggiunge il movimento). */
    .art-nav .art-nav-menurow.show,
    .art-nav .art-nav-menurow.collapsing {
        animation: kwMenuDown .32s ease-out both;
    }

    .art-nav-toprow {
        flex-direction: column;
        align-items: flex-start;
        /* Sul sito originale l'intestazione mobile e' compatta (139px in tutto),
           qui i 40px di padding sopra e sotto la portavano a 215px. */
        padding: 10px 0;
    }

    .art-nav .navbar {
        margin-top: 0;
    }

    .art-nav-toprow .navbar-toggler {
        align-self: center;
        margin: 10px 0;
    }

    /* Voci del menu mobile alte 60px come sul sito originale (il tema usa i
       74px del parametro del menu desktop). */
    .art-nav .navbar-nav .nav-link {
        height: 60px;
    }
}


/* 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) {
    /* Sui telefoni il logo e' centrato come sul sito originale. */
    .art-nav-toprow {
        align-items: center;
    }


}

/* ---------------------------------------------------------------------------
   Allineamenti al sito originale (secondo giro di verifica)
   --------------------------------------------------------------------------- */

/* Titoli dentro i contenuti: sul sito originale sono azzurri come il resto del
   brand (28px #72d0eb), non blu navy come il default del tema. Vale per gli
   articoli, per la pagina privacy e per il titolo delle pubblicazioni. */
.article-main-content h2:not(.kw-module-header),
.article-main-content h3:not(.kw-module-header),
.article-main-content h4:not(.kw-module-header),
.art-privacy h2,
.art-privacy h3,
.art-category_1 .art-category_1-title {
    color: #72d0eb;
}

/* Spazio sotto i titoli di sezione: 20px sul sito originale (h2.art-postheader),
   48px per il carosello delle ultime notizie (che li' ha la classe mb-5). */
.kw-module-header.section-title-cursive {
    margin-bottom: 20px;
}
[class*="mod_kw_owl_carousel"] .kw-module-header.section-title-cursive {
    margin-bottom: 48px;
}

/* Contatti: nel contenuto dell'articolo l'intestazione sta in un col-md-4
   offset-md-4. Sul sito originale quella riga e' a tutta finestra (616px di
   colonna), qui dentro il container da 1140 diventava 380px e il titolo
   andava a capo: la colonna prende tutta la larghezza e il testo resta
   centrato come sul sito originale. */
.itemid-132 .article-main-content .row > .col-md-4.offset-md-4 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

/* Copertine delle pagine interne: sul sito originale scorrono in parallasse
   (layer da 1000px mosso da stellar.js dentro una finestra da 500px).
   ponytail: background-attachment fixed = stesso effetto senza JS; su mobile
   resta "scroll" perche' iOS/Android non gestiscono bene il fixed. */
@media (min-width: 1200px) {
    #default-header-image,
    #parallax-header,
    #fullheight-header-image,
    #style-1-header-image {
        background-attachment: fixed;
    }
}

/* Campi del form contatti con le misure del sito originale (48px di altezza e
   testo 14px, invece dei 56px/16px di default di Bootstrap 5). */
.art-modulo-form-contatti .form-control {
    font-size: 14px;
}
.art-modulo-form-contatti input.form-control {
    height: 48px;
}
/* Il pulsante Invia e' alto 49px sul sito originale: qui i 2px di bordo per
   lato lo portavano a 53. */
.art-modulo-form-contatti button.art-button,
.art-modulo-form-contatti .art-button {
    border: 0;
}

.art-footer .art-footer-inner h4,
.art-footer .art-footer-inner h2 {

    padding: 22px 0 14px 0;
    margin: 0 0 10px 0;
}

.menu-bootstrap5 .mod-menu_bootstrap5 .nav-link {
    height: 60px;
    line-height: 60px;
}

.com-content-article.art-postcontent.item-page.art-article.contattaci {
    margin: 0;
    padding: 50px 0;
    background-color: #f8f9fa;
}

/* Hover dei link azzurri come sul sito originale: passano al grigio #777777
   senza sottolineatura (li' e' .art-postcontent a:hover). Qui il tema li
   schiariva soltanto (#45c1e5), quindi il passaggio del mouse non si vedeva.
   L'azzurro dei link arriva da decine di regole piu' specifiche (topbar,
   footer, schede news, ...): senza !important l'hover non vincerebbe mai.
   Il sito originale usa lo stesso trucco sui pulsanti. */
a:hover,
a:focus {
    color: #777777 !important;
}

/* Eccezioni, come sul sito originale: sui pulsanti il testo resta bianco
   (cambia solo lo sfondo). Il menu principale ha gia' la sua regola bianca,
   piu' specifica di questa. */
.art-button:hover,
.art-button:focus,
.art-nav-cta:hover,
.art-nav-cta:focus,
.art-pubblicazione-readmore:hover,
.art-pubblicazione-readmore:focus,
.art-blog-carousel .art-blog-image-container:hover a {
    color: #ffffff !important;
}

/* Nel footer (fascia #343A40) il grigio del sito originale sarebbe quasi
   illeggibile: qui i link diventano bianchi, come fa il menu sul navy. */
footer.art-footer a:hover,
footer.art-footer a:focus,
.art-footer-inner a:hover,
.art-footer-inner a:focus {
    color: #ffffff !important;
}

/* Paginazione come sul sito originale (.art-pager): riquadri azzurri #51c6e6
   per le pagine cliccabili, teal #14718a per la pagina corrente, per le frecce
   disattivate e in hover, tutto centrato su fascia #f8f9fa. Prima erano numeri
   azzurri su bianco con il riquadro blu di Bootstrap sulla pagina corrente. */
.pagination {
    text-align: center;
    background-color: #f8f9fa;
    gap: 4px;
    padding: 6px;
    margin: 15px auto;
}
.pagination .page-item .page-link {
    background-color: #51c6e6;
    border: 0;
    border-radius: 4px;
    color: #ffffff !important;
    font-size: 14px;
    line-height: normal;
    padding: 10px;
}
.pagination .page-item.active .page-link,
.pagination .page-item.disabled .page-link,
.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:focus {
    background-color: #14718a;
    color: #ffffff !important;
    opacity: 1;
}

/* Animazione di apertura del menu mobile (vedi .art-nav-menurow.show). */
@keyframes kwMenuDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}