/*
 * Theme Name: InnTerr Sassari
 * Description: Starter Theme to use with Timber
 * Author: MonkeySpace3
*/

html{scroll-behavior: smooth;}

body {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    line-height: 20px;
    color: #222222;
}

.noto_serif{font-family: "Noto Serif", serif;}

.absolute{position: absolute;}
.fixed{position: fixed;}
.relative {position: relative;}

h1{font-size: 28px;}
h2{font-size: 26px;}
h3{font-size: 20px;}
h4{font-size: 18px;}
h5{font-size: 15px;}

h2.titolo{font-family: "Noto Serif", serif; font-weight: bold; color:#3E556B;}

a, a:hover, a:visited{text-decoration: none; color: #22B48C;}
a .testo_blu:hover{color:#0A2D44;}

a.no-click{pointer-events: none; cursor: default;}

.testo_bianco{color:#ffffff !important;}
.testo_dark{color:#222222 !important;}
.testo_blu{color:#3E556B !important;}
.testo_verde{color:#22B48C !important;}
.testo_marrone{color:#54350D !important;}

.mini_text{font-size:12px;}

.lightbox-carousel .ratio{background-color: #0A2D44 !important;}

.bg{background-size: cover; background-repeat: no-repeat; background-position: center;}

.black_filter{background: linear-gradient(0deg,rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);}

.bg_bianco{background-color: #fff;}
.bg_blu{background-color: #3E556B;}
.bg_blu2{background-color: #195177;}
.bg_darkblue{background-color: #0A2D44; color:#fff;}
.bg_verde{background-color: #22B48C;}
.bg_verde2{background-color: #0E4737;}
.bg_verde3{background-color:#82D4BE;}
.bg_verde4{background-color:#CFFFF2;}
.bg_celeste{background-color: #ECFAFF;}
.bg_marrone{background-color: #54350D;}
.bg_viola{background-color: #613854;}
.bg_granata{background-color: #51130C;}
.bg_avana{background-color: #FFFAF3;}
.bg_grigio{background-color: #384861;}
.bg_grigio2{background-color: #f0f0f0;}
.bg_grigio3{background-color: #222;}

.title_bar.bg_blu .bg_inner{background-color: #195177;}
.title_bar.bg_blu2 .bg_inner{background-color: #195177;}
.title_bar.bg_darkblue .bg_inner{background-color: #195177;}
.title_bar.bg_verde .bg_inner{background-color: #76BEAA;}
.title_bar.bg_verde2 .bg_inner{background-color: #19775D;}
.title_bar.bg_marrone .bg_inner{background-color: #774E19;}
.title_bar.bg_viola .bg_inner{background-color: #874D75;}
.title_bar.bg_granata .bg_inner{background-color: #6E2B23;}
.title_bar.bg_grigio .bg_inner{background-color: #738FAB;}
.title_bar.bg_grigio3 .bg_inner{background-color: #333;}

.circle{border-radius: 50%;}
.bordered{border: 5px solid #fff;}

.btn {
    border-radius: 10px;
    border: 0;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 18px;
    padding: 10px 25px;
    font-weight: 600;
    text-align: center;
}
.btn:hover{background-color: #82D4BE;}
.btn:active, .btn:focus{outline: none; box-shadow: none;}
.btn-blu{background-color: #3E556B; color: #ffffff;}
.btn-viola{background-color: #924375; color: #ffffff;}
.btn-marrone{background-color: #774E19; color: #ffffff;}
.btn-grigio{background-color: #738FAB; color: #ffffff;}
.btn-verde{background-color: #19775D; color: #ffffff;}
.btn-blu a, .btn-viola a, .btn-marrone a, .btn-grigio a, .btn-verde{color:#ffffff;}
.btn-bianco{background-color: #ffffff; color: #3E556B;}
.btn-trasparente{color: #3E556B; border:1px solid #3E556B;}

.uppercase {text-transform: uppercase;}
.italic {font-style: italic;}

.light {font-weight: 300;}
.regular {font-weight: 400;}
.medium {font-weight: 500;}
.semibold {font-weight: 600;}
.bold {font-weight: 700;}
.extrabold {font-weight: 800;}
.black {font-weight: 900;}

.overflow-h{overflow: hidden;}

header.sticky{transition: max-height 0.3s ease-out;}
header.sticky .logo{transition: width 0.3s ease-out;}

header{position: fixed; width: 100%; top:0; background-color: #fff; z-index:101;}
header.sticky{transition: max-height 0.3s ease-out;}
header.sticky .logo{transition: width 0.3s ease-out;}
header ul{list-style: none; padding-left: 0; margin-bottom: 0;}
header li{display: inline-block; margin-right: 15px;}
header li:last-child{margin-right: 0;}
header .nav-main a{color:#3E556B; font-size: 16px;}

.icone_menu img{height: 24px; cursor: pointer;}

.bg_menu{height: 100vh; width: 100%; right: 0; z-index: -1;}

.mega-menu ul{list-style: none; font-size: 1.3rem; line-height: 2.3rem;}
.mega-menu a{color:#fff;}
.mega-menu nav{margin-top: 100px;}

.mega-menu {
    transition: .3s ease-in-out;
    position: fixed;
    padding-bottom: 78px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    opacity: 0;
    display: none;
    overflow-y: auto;
    text-align: right;
}
.mega-menu nav {
    padding-top: 70px;
}
.mega-menu.reveal {
    opacity: 1;
    background:#000;
}

.footer{font-size:12px;}
.footer .social_footer{list-style: none;}
.footer .social_footer li{display: inline-block; margin-right: 5px;}
.footer .social_footer li:last-child{margin-right: 0;}

.swiper-button-next::after, .swiper-button-prev::after {display: none;}
.swiper-button-next {
    background: url("/wp-content/themes/innterr_sassari/static/img/chevron-right.svg") no-repeat center center;
    background-size: contain;
    width: 60px;
    height: 60px;
}
.swiper-button-prev {
    background: url("/wp-content/themes/innterr_sassari/static/img/chevron-left.svg") no-repeat center center;
    background-size: contain;
    width: 60px;
    height: 60px;
}




.main_image, .main_slider .swiper-slide{height: 600px;}

.slide_info{position: relative; z-index: 2;}

h1.nome_comune_titolo{margin-bottom: 0;}

.blue_line{background-color: #3E556B; width: 100%; height: 1px;}
.itinerario_nome{font-size: 18px; line-height: 20px;}

.scheda_comune .gallerySwiper .swiper-slide{height: 400px;}

.bluebar{background-color: #195177; height: 10px;}
.comune_card .gallerySwiper .swiper-slide{height:200px;}
.comune_card{background-color: #F8F8F8; border-bottom: 10px solid #195177;}

.circle_verde{fill: #22b48c;}
.circle_celeste{fill: #85BFD5;}

.swiper_full .gallerySwiper .swiper-slide{height: 600px;}

.documentodascaricare{border-bottom: 1px solid #3E556B;}
.titolo_documento{font-size: 20px; line-height: 22px;}

.cardsezione{height: 365px;}
.cardsezione .div_card_name{bottom:0; height: 100px;}
.cardsezione.card_storia .div_card_name{background: linear-gradient(to left, #54350D 50%, #774E19 50%);}
.cardsezione.card_tradizioni .div_card_name{background: linear-gradient(to left, #613854 50%, #874D75 50%);}
.cardsezione.card_ambiente .div_card_name{background: linear-gradient(to left, #0E4737 50%, #19775D 50%);}
.cardsezione.card_diritto .div_card_name{background: linear-gradient(to left, #51130C 50%, #6E2B23 50%);}
.cardsezione .circle_link{z-index: 2;}

.lista_doc{border-bottom: 1px solid #195177;}

.didascalia_foto{font-size: 12px; line-height: 13px; background-color: rgba(0, 0, 0, 0.6); padding: 6px;}
.testo_img .didascalia_foto{background-color: transparent;}

.ads_form p{margin-bottom: 0;}
.ads_form input, .ads_form select{width:100%; height: 40px; border-radius: .25rem; padding:4px 10px; border: 1px solid #ddd;}
.ads_form label{height: auto;}
.ads_form textarea{width:100%; padding:4px 10px; border: 1px solid #ddd;}
.wpcf7-acceptance input{width: auto; height: auto;}
.wpcf7-list-item{margin-left: 0 !important;}
.ads_form .col-12, .ads_form .col-md-6{margin-bottom:10px;}

.bibliografia_item{border-bottom: 1px solid #3E556B; font-size: 13px; line-height: 17px;}
.bibliografia_item:last-child{border-bottom: 0;}

.gallerySwiper.gallery_full .swiper-slide{height: 600px;}
.gallery_full .didascalia_foto{font-size:14px; line-height: 16px;}

.row_divider {display: flex; align-items: center; border-bottom: 1px solid #3E556B;}

li.tooltip_item {position: relative; margin: 10px 0; padding: 8px 12px; background: #85BFD5; border-radius: 6px; cursor: pointer; width: fit-content;}
/*.tooltiptext {width: 600px; visibility: hidden; position: absolute; background-color: #195177; color: #85BFD5; text-align: left; padding: 8px 10px; border-radius: 6px;
    font-size: 14px; line-height: 1.4; top: 85%; left: 10%; max-width: 90vw; word-wrap: break-word; box-sizing: border-box; opacity: 0; transition: opacity 0.3s; z-index: 10;}*/
.tooltiptext {
    visibility: hidden;
    position: absolute;
    background: #195177;
    color: #85BFD5;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;

    /* Default: sopra */
    bottom: 125%;
    left: 50%;
    transform: translateX(-20%);

    max-width: 90vw;
    min-width: 200px;
    max-width: 400px;
    width: max-content;
    word-wrap: break-word;
    box-sizing: border-box;

    opacity: 0;
    transition: opacity 0.25s;
    z-index: 9999;
}

.tooltip_item.active .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/* Hover su desktop */
@media (hover: hover) and (pointer: fine) {
    li.tooltip_item:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
}

/* Classe attiva su mobile */
li.tooltip_item.active .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.text_limit {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 18; /* numero massimo di righe visibili */
    overflow: hidden;
    text-overflow: ellipsis;
}

.text_limit.expanded {
    -webkit-line-clamp: unset !important; /* rimuove il limite quando espanso */
}

.card_prototipo .text_limit {-webkit-line-clamp: 5;}

.info_tabella_link{cursor: pointer;}
.info_tabella{display: none;}

.box_itinerario .img_itinerario{height: 200px;}

.anteprima_contenuti .img_anteprima, .video_card .img_anteprima_video{height: 200px;}

.immagine_lista_doc{height: 100px;}

.footer a, .footer a:hover, .footer a:visited{color:#fff;}

.scheda_storia .btn-marrone{background-color:#fff; color:#774E19; border:1px solid #774E19;}
.scheda_ambiente .btn-verde{background-color:#fff; color:#19775D; border:1px solid #19775D;}
.scheda_arte .btn-viola{background-color:#fff; color:#924375; border:1px solid #924375;}
.scheda_etnografia .btn-grigio{background-color:#fff; color:#738FAB; border:1px solid #738FAB;}






@media screen and (max-width: 1399px) {
    .tooltiptext {width: 900px;}
}

@media screen and (max-width: 991px) {
    .tooltiptext {width: 700px;}
}

@media screen and (max-width: 767px) {
    .tooltiptext {width: 500px;}
}

@media screen and (max-width: 480px) {
    .tooltiptext {width: 360px;}
}