/* ==========================================================================
   template-comuni.css
   CSS specifico del template Accessibile per Joomla.
   NON contiene codice del framework Bootstrap Italia (vendor).
   Dipende da bootstrap-italia.min.css caricato prima.
   ========================================================================== */

/* Overlay geometrici */
.bg-evidenza {
    background-image: url('../img/evidenza-header.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-evidenza .moduletable > h1, .bg-evidenza .moduletable > h2, .bg-evidenza .moduletable > h3, .bg-evidenza .moduletable > h4, .bg-evidenza .moduletable > h5, .bg-evidenza .moduletable > h6 {
    color:white;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.it-hero-wrapper .it-hero-text-wrapper :last-child {
    margin-bottom: 0;
}

.cmp-hero .it-hero-wrapper .it-hero-text-wrapper .hero-text p {
    font-size: 1.25rem;
    line-height: 1.5;
    color: #30475f;
    font-family: Titillium Web, Geneva, Tahoma, sans-serif;
}

.cmp-hero .it-hero-wrapper .it-hero-text-wrapper .hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 48px;
    margin-bottom: 1rem;
}

.cmp-hero .it-hero-wrapper .it-hero-text-wrapper {
    padding: 48px 0;
}

.cmp-hero .it-hero-wrapper {
    min-height: unset;
}

@media (min-width: 576px) {
    .cmp-hero .it-hero-wrapper .it-hero-text-wrapper .hero-text p {
        font-size: 1.5rem;
    }
}

@media (min-width: 576px) {
    .cmp-hero .it-hero-wrapper .it-hero-text-wrapper .hero-title {
        font-size: 3rem;
    }
}

@media (min-width: 992px) {
    .it-hero-wrapper .it-hero-text-wrapper h1, .it-hero-wrapper .it-hero-text-wrapper .h1 {
        font-size: 3rem;
    }
    .navbar .dropdown-menu .link-list-wrapper {
        width: 270px;
    }
}


/* ==========================================================================
   GESTINE CARD
   ========================================================================== */

.bg-grey-card {
    background: #ebeef0;
}

.card-image.card-image-rounded img {
  width: 100%;
}

.card .card-body .card-text {
    padding-bottom:20px;
}

dd, ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-position: initial;
    list-style-image: initial;
    list-style-type: none;
}

.cmp-contacts .contact-list li {
    font-size: 1rem;
    margin: 1rem 0;
    color: #007a52;
    font-weight: 400;
}

.card-wrapper {
    padding-bottom:0px;
}

.card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 2rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-border-width: 0px;
    --bs-card-border-color: #c5c7c9;
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: -1px;
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 2rem;
    --bs-card-cap-bg: transparent;
    --bs-card-bg: #fff;
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 12px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
    box-shadow: var(--bs-card-box-shadow);
}

@media (min-width: 992px) {
    .card {
        border: none;
    }
}

.cmp-contacts .card:after {
    content: unset;
}

/* ==========================================================================
   GESTINE HEADER E MENU MOBILE
   ========================================================================== */

.it-header-wrapper .navbar-collapsable .it-socials ul {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.it-header-wrapper .navbar-collapsable .logo-hamburger {
    display: flex;
    align-items: center;
    color: #007a52;
    padding: 32px 50px 16px 24px;
}

.it-header-wrapper .navbar-collapsable .it-socials {
    margin-top: 30px;
    padding: 0 24px;
    color: #007a52;
}

.it-header-wrapper .navbar-collapsable .logo-hamburger .it-brand-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 1.167;
    max-width: 200px;
}

.it-header-wrapper .it-brand-wrapper .icon image {
    width: 48px;
    height: 48px;
}

.navbar .navbar-collapsable.expanded .menu-wrapper {
    transform: translateX(0);
    transition: all .3s cubic-bezier(.29, .85, .5, .99);
}

.navbar-nav {
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-color: var(--bs-navbar-color);
    --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
    --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.it-header-wrapper .navbar .navbar-collapsable .navbar-nav li.nav-item a.nav-link {
    font-weight: 600;
    padding: 12px 16px;
}

@media (min-width: 992px) {
    .it-header-wrapper .navbar-collapsable .it-socials {
        display: none;
    }
    .it-header-wrapper .it-brand-wrapper .icon image {
        width: 82px;
        height: 82px;
    }
    .it-header-wrapper .navbar-collapsable .logo-hamburger {
        display: none;
    }
    .it-header-wrapper .navbar-collapsable .menu-wrapper {
        background: 0 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .navbar .navbar-collapsable .menu-wrapper {
        position: inherit;
        top: auto;
        bottom: auto;
        right: auto;
        left: auto;
        overflow-y: visible;
    }
    .it-header-wrapper .navbar .navbar-collapsable .menu-wrapper .navbar-nav {
        padding: 0;
    }
}

/* ==========================================================================
   GESTIONE BREADCRUMB
   ========================================================================== */

.cmp-breadcrumbs {
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .cmp-breadcrumbs {
        margin-top: 2rem;
    }
}

@media (min-width: 992px) {
    .px-lg-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }
}

#percorso-section {
    padding-left:2rem;
}

/* ==========================================================================
   GESTIONE IMMAGINE DI COPERTINA SINGOLO ARTICOLO
   ========================================================================== */

    .figure.img-full, .figure.img-full .item-image {
        width: 100%;
    }

    .figure.img-full img {
        width: 100%;
        height: 100%;
        min-height: 300px;
        -o-object-fit: cover;
        object-fit: cover;
    }

    @media (min-width: 992px) {
    .figure.img-full img {
        height: 600px;
    }
}

/* ==========================================================================
   GESTINE SIDEBAR LEFT SINGOLO ARTICOLO
   ========================================================================== */

.cmp-navscroll .navbar.it-navscroll-wrapper {
    display: block;
    flex-wrap: unset;
    align-items: unset;
    justify-content: unset;
}

.navbar.it-navscroll-wrapper .menu-wrapper {
    padding: 0px;
}

/* ==========================================================================
   GESTINE CSS SINGOLA PAGNIA SERVIZI
   ========================================================================== */

   .calendar-vertical .calendar-date .calendar-date-description .calendar-date-description-content {
        padding: 1rem 1.5rem;
        position: relative;
        z-index: 0;
        color: #30475f;
    }

    .calendar-vertical .calendar-date .calendar-date-description {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.17);
        width: 100%;
        margin: 0 0 1.5rem 0.875rem;
        overflow: hidden;
    }

    .rounded {
        border-radius: var(--bs-border-radius) !important;
    }

    .calendar-vertical .calendar-date .calendar-date-day {
        width: 4rem;
        flex-shrink: 0;
        position: relative;
        z-index: 0;
        padding-right: 1rem;
        margin-bottom: 0;
        color: #007a52;
    }

    .calendar-vertical .calendar-date {
        display: flex;
    }

    .calendar-vertical .calendar-date .calendar-date-description .calendar-date-description-content:before {
        content: "";
        width: 0.5rem;
        height: 120%;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #f0f8f5;
    }

    .calendar-vertical .calendar-date .calendar-date-day:before {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 5px;
        width: 2px;
        height: 100%;
        background-color: #007a52;
        content: "";
    }

    .title-xxlarge-regular {
        font-size: 2rem;
        font-weight: 400;
        line-height: 1.25;
    }

    .has-bg-grey {
        background-color: rgba(0, 122, 82, 0.05);
    }

    .calendar-vertical .calendar-date .calendar-date-day__month {
        font-weight: 600;
        display: flex;
        justify-content: center;
    }

    .calendar-vertical .calendar-date .calendar-date-day .small, .calendar-vertical .calendar-date .calendar-date-day small {
        font-size: 0.875rem;
        line-height: 1;
    }

    .calendar-vertical .calendar-date .calendar-date-day:after {
        content: "";
        width: 0.625rem;
        height: 0.625rem;
        position: absolute;
        z-index: 1;
        top: 1.875rem;
        right: 1px;
        background-color: #007a52;
        border-radius: 5px;
    }

    .title-medium-2 {
        font-size: 1.25rem;
        font-weight: 400;
        line-height: 1.25;
    }

    @media (min-width: 576px) {
        .title-xxlarge-regular {
            font-size: 2.5rem;
        }
        .calendar-vertical .calendar-date .calendar-date-day .small, .calendar-vertical .calendar-date .calendar-date-day small {
            font-size: 0.875rem;
        }
        .title-medium-2 {
            font-size: 1.5rem;
        }
    }

/* ==========================================================================
   GESTINE FOOTER
   ========================================================================== */

  .it-footer-main, .it-footer-small-prints {
    background-color: #202a2e;
  }

  .it-footer-main .it-brand-wrapper a .icon image {
    height: 100%;
    width: 100%;
  }

  .it-footer .logo-wrapper {
      display: flex;
      flex-direction: column;
      gap: 30px;
      padding-top: 32px;
      padding-bottom: 32px;
  }

  .it-footer .it-brand-wrapper {
    padding: 0;
}

  @media (min-width: 576px) {
      .it-footer .logo-wrapper {
          flex-direction: row;
          align-items: flex-start;
      }
  }

/* ==========================================================================
   COLORI DINAMICI TEMPLATE
   Queste regole usano le variabili CSS iniettate dinamicamente dall'index.php
   ========================================================================== */

/* Header specifici che non usano le variabili di default */
.it-header-center-wrapper,
.navbar,
.navbar-collapsable .menu-wrapper {
    background-color: var(--bs-primary) !important;
}

@media (min-width: 992px) {
    .it-header-navbar-wrapper,
    .navbar {
        background-color: var(--bs-primary) !important;
    }
}

/* Breadcrumb */
.cmp-breadcrumbs .breadcrumb-item a {
    color: var(--bs-primary) !important;
}

/* Category link nelle card */
.card .card-body .category-top a.category {
    color: var(--bs-primary) !important;
}

/* Bottoni */
.btn-primary,
.btn-info {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.btn-info {
    color: #fff !important;
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    box-shadow: inset 0 0 0 2px var(--bs-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    box-shadow: inset 0 0 0 2px var(--bs-primary) !important;
}
.btn-outline-primary:hover .icon,
.btn-outline-primary:focus .icon {
    fill: #fff !important;
}
.btn-dropdown,
.accordion-header .accordion-button,
.link-list-wrapper ul li a span,
.navbar.it-navscroll-wrapper .link-list-wrapper ul li a.active span,
.link-list-wrapper ul li a.active span,
a.read-more {
    color: var(--bs-primary) !important;
}
.dropdown .btn-dropdown {
    --bs-btn-hover-color: var(--bs-btn-hover-color) !important;
}

/* Hover per i bottoni */
.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-info:hover,
.btn-info:focus {
    background-color: #2c2c2c !important;
    color: #fff !important;
}

/* Icone e bordi */
.icon-primary,
a.read-more .icon {
    fill: var(--bs-primary) !important;
}
aside .cmp-navscroll .navbar.it-navscroll-wrapper .link-list-wrapper ul li a.active {
    border-left: 2px solid var(--bs-primary) !important;
}

/* Testo bianco per bg-primary */
.bg-primary > .container > .moduletable > h1,
.bg-primary > .container > .moduletable > h2,
.bg-primary > .container > .moduletable > h3,
.bg-primary > .container > .moduletable > h4,
.bg-primary > .container > .moduletable > h5,
.bg-primary > .container > .moduletable > h6,
.bg-primary > .container > h1,
.bg-primary > .container > h2,
.bg-primary > .container > h3,
.bg-primary > .container > h4,
.bg-primary > .container > h5,
.bg-primary > .container > h6,
.bg-primary > .container > p,
.bg-primary > .container > .moduletable > p {
    color: #fff !important;
}

/* Menu mobile */
.navbar-collapsable .menu-wrapper .nav-link:hover,
.navbar-collapsable .menu-wrapper .nav-link:focus,
.navbar-collapsable .menu-wrapper .nav-link.active,
.navbar-collapsable .menu-wrapper .nav-item.active .nav-link {
    background-color: var(--bs-btn-hover-color) !important;
    color: #fff !important;
}

/* ========================================= */
/* OVERRIDE ARTICOLO SINGOLO                 */
/* ========================================= */

/* Distanziamento flessibile per i Tag di Joomla */
.comuni-tags ul.tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.comuni-tags ul.tags li {
    margin: 0;
}

/* Bottoni Condividi e Azioni */
.btn-action-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--bs-primary) !important;
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}
.btn-action-icon svg.icon {
    fill: var(--bs-primary);
    transition: fill 0.2s ease-in-out;
}
.btn-action-icon:hover,
.btn-action-icon:focus {
    background-color: var(--bs-primary) !important;
}
.btn-action-icon:hover svg.icon,
.btn-action-icon:focus svg.icon {
    fill: #ffffff;
}

/* ========================================= */
/* FIX MENU MOBILE (OVERLAP BACKDROP)        */
/* ========================================= */

/* Porta l'intero header sopra la coperta scura (che di solito ha z-index 1040) */
.it-header-wrapper {
    z-index: 1050 !important;
}

/* Assicura che il menu a comparsa sia in primissimo piano */
.navbar .navbar-collapsable {
    z-index: 1055 !important;
}

/* La "X" di chiusura deve scavalcare assolutamente tutto */
.navbar .close-div {
    z-index: 1060 !important;
}

/* ========================================= */
/* FIX COLORI MENU MOBILE (ALTO CONTRASTO)   */
/* ========================================= */

/* Applichiamo queste regole SOLO sugli schermi più piccoli di 992px (Tablet e Smartphone) */
@media (max-width: 991.98px) {
    /* Forza il testo bianco per tutti i link, i titoli e i testi nel menu mobile */
    .navbar-collapsable .menu-wrapper .nav-link,
    .navbar-collapsable .menu-wrapper .nav-link span,
    .navbar-collapsable .menu-wrapper .list-item,
    .navbar-collapsable .menu-wrapper .list-item span,
    .navbar-collapsable .menu-wrapper .it-brand-title,
    .navbar-collapsable .menu-wrapper .it-socials span {
        color: #ffffff !important;
    }

    /* Forza il riempimento bianco per tutte le icone e le freccette SVG */
    .navbar-collapsable .menu-wrapper .icon,
    .navbar-collapsable .menu-wrapper .nav-link svg,
    .navbar-collapsable .menu-wrapper .list-item svg {
        fill: #ffffff !important;
    }

    /* Rende i bordi separatori tra le voci di menu di un bianco semi-trasparente elegante */
    .navbar-collapsable .menu-wrapper .nav-item,
    .navbar-collapsable .menu-wrapper .dropdown-menu .link-list-wrapper ul li a.list-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    /* Disabilita lo sfondo bianco predefinito del dropdown aperto su mobile */
    .navbar-collapsable .menu-wrapper .dropdown-menu {
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .it-header-wrapper .navbar-collapsable .logo-hamburger {
        color: white;
    }

    .navbar .navbar-collapsable .navbar-nav li a.nav-link.active {
        border-left: 3px solid white;
    }

    .it-header-wrapper .navbar-collapsable .it-socials ul li a svg {
        fill: white !important;
    }

    .navbar-collapsable.expanded .menu-wrapper nav[aria-label="Secondaria"] nav[aria-label="Principale"] {
        padding-left: 0px;
    }

    .dropdown-menu.show .link-list-wrapper li a.list-item {
        border-bottom: none !important;
    }
}

@media (max-width:700px) {
	#main-container {
		padding:0px;
	}
	#main-container .container.pt-4 {
		padding:0px;
	}
}

@media print {
  .cmp-navscroll,
  .dropdown,
  [data-element="personal-area-login"],
  footer,
  header nav {
    display: none !important;
  }
  .it-header-wrapper {
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }
  .it-header-navbar-wrapper {
    display: none !important;
    width: 0 !important;
  }
  .it-header-center-wrapper,
  .it-header-wrapper .it-nav-wrapper .it-brand-wrapper {
    padding-left: 0 !important;
  }
  .it-search-wrapper {
    display: none !important;
  }
}

/* ============================================================
   Paginazione articoli prev/next (com_content)
   ============================================================ */
span.pagination {
  display: flex;
  gap: 0.5rem;
}

/* ============================================================
   Carousel Evidenza (mod_articles layout: evidenza-singolo)
   ============================================================ */
.it-carousel-evidenza.splide {
  padding-bottom: 0 !important;
}
.it-carousel-evidenza .splide__track {
  padding-top: 0 !important;
}
.it-carousel-evidenza .splide__pagination {
  display: none !important;
}
.it-carousel-evidenza .splide__arrow--prev,
.it-carousel-evidenza .splide__arrow--next {
  width: 3rem;
  height: 3rem;
  padding: 0;
  z-index: 10;
}
.it-carousel-evidenza .splide__arrow--prev { left: -0.5rem; }
.it-carousel-evidenza .splide__arrow--next { right: -0.5rem; }
@media (min-width: 992px) {
  .it-carousel-evidenza .splide__arrow--prev { left: -3.5rem; }
  .it-carousel-evidenza .splide__arrow--next { right: -3.5rem; }
}
/* Password toggle button — icona visibile su sfondo trasparente */
.input-group .input-password-toggle {
  background-color: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #5d7083;
  border-left: 0;
  border-radius: 0;
  color: #5d7083;
  box-shadow: none;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
}
.input-group .input-password-toggle:hover {
  background-color: transparent;
  color: #1a1a1a;
  border-bottom-color: #1a1a1a;
}
.input-group .input-password-toggle:focus {
  box-shadow: inset 0 0 0 2px #995c00;
  outline: 0;
}
.input-group .input-password-toggle .icon-eye,
.input-group .input-password-toggle .icon-eye-slash {
  font-size: 1.25rem;
  line-height: 1;
}

.com-tags-tag__items {
  margin-top:30px;
}

/* Tag chip-list del modulo evidenza: adattato al contenuto e testo centrato */
.mod-pa-chips-list .chip {
  min-width: 0;
  height: auto;
  padding: 0px 12px;
  border-radius: 18px;
  background-color: var(--bs-primary);
  border:none;
}

.mod-pa-chips-list .chip .chip-label {
  height: auto;
  transform: none;
  line-height: unset;
  color:white;
}

.mod-pa-chips-list .chip:hover .chip-label, .mod-pa-chips-list .chip .chip-label:hover {
  text-decoration: underline;
}

/* Layout Servizi — sezione "Esplora tutti i servizi" a sfondo grigio full-width.
   Il box-shadow espande il colore oltre i bordi del container Bootstrap;
   clip-path lo limita orizzontalmente a 100vw per ogni lato (prevenendo lo scrollbar)
   e scende 3rem oltre il bordo inferiore della sezione. */
.blog-servizi .servizi-explore,
.blog-notizie .notizie-explore,
.blog-amministrazione .amministrazione-evidenza,
.blog-vivere .vivere-eventi,
.blog-vivere .vivere-luoghi {
  background-color: #f5f5f5;
  box-shadow: 0 0 0 100vw #f5f5f5;
  clip-path: inset(0 -100vw -3rem);
}

/* ============================================================
   FRONTEND EDITING — pulsanti modifica (visibili solo da admin)
   ============================================================ */
a.btn.jmodedit,
a.jmodedit {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background-color: #0066cc;
  color: #fff !important;
  border: 2px solid #fff;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  opacity: 0.9;
  transition: opacity 0.15s ease;
  vertical-align: middle;
  cursor: pointer;
}

a.btn.jmodedit:hover,
a.btn.jmodedit:focus,
a.jmodedit:hover,
a.jmodedit:focus {
  opacity: 1;
  color: #fff !important;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

a.jmodedit .visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  border: 0 !important;
}

a.jmodedit .icon-edit {
  color: #fff;
}

a.jmodedit + div[role="tooltip"] {
  display: inline-block;
  vertical-align: middle;
  background: rgba(33, 37, 41, 0.93);
  color: #f8f9fa;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.74rem;
  line-height: 1.5;
  max-width: 240px;
  margin-left: 0.4rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

/* Override pulsante Torna su per usare il colore primario del template */
.back-to-top {
    background-color: var(--bs-primary) !important;
}