/* ==========================================================================
   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,
.cmp-hero .it-hero-wrapper .it-hero-text-wrapper .hero-text p,
.com-dpcalendar-vivere .cmp-hero .it-hero-wrapper .it-hero-text-wrapper .hero-text,
.com-dpcalendar-vivere .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,
.com-dpcalendar-vivere .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,
    .cmp-hero .it-hero-wrapper .it-hero-text-wrapper .hero-text p,
    .com-dpcalendar-vivere .cmp-hero .it-hero-wrapper .it-hero-text-wrapper .hero-text,
    .com-dpcalendar-vivere .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,
    .com-dpcalendar-vivere .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;
}

/* Reset liste-UI non gestite da Bootstrap Italia
   (sostituiscono il vecchio reset globale dd, ol, ul: le liste editoriali nel
   corpo articolo tornano native grazie al reboot di Bootstrap Italia, mentre
   queste poche liste strutturali vanno neutralizzate esplicitamente). */
.contact-list {
    padding-left: 0;
    list-style: none;
}
.link-list {
    padding-left: 0;
    list-style: none;
}
.it-socials ul {
    padding: 0;
    margin: 0;
    list-style: 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 0 0.875rem;
        overflow: hidden;
        display: flex;
    align-items: center;
    }

    .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;
	}
}

/* ============================================================
   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;
}

/* ============================================================
   Banner avvisi (posizione modulo "avvisi")
   ============================================================ */
.avvisi-banner {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-top:1rem;
}

/* ============================================================
   MODULO CALENDARIO 
   ============================================================ */

.card .card-calendar {
    top:20px;
    right:20px;
}

/* Fix sovrapposizione "Leggi di più" in mod_dpcalendar_upcoming */
.mod-dpcalendar-upcoming-joomlaPA .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mod-dpcalendar-upcoming-joomlaPA .read-more {
    margin-top: auto;
    padding-top: 1.5rem;
}

.mod-dpcalendar-upcoming-joomlaPA__location {
    margin-bottom: 1rem !important;
}

/* ── DPCalendar lista eventi (layout alternativo "eventi" — sezione 5.3 Modello Comuni) ── */

.tpl-event-list {
    padding-left: 0;
}

.tpl-event-list__item:last-child {
    border-bottom: 0 !important;
}

.tpl-event-card-row {
    border: 0;
}

.tpl-event-card-row--no-img {
    border-left: 4px solid var(--bs-primary) !important;
}

.tpl-event-img-col {
    min-height: 229px; /* mobile fallback; desktop: si allunga fino all'altezza della card */
    overflow: hidden;
}

/* L'immagine riempie tutta la colonna in assoluto (colonna è position-relative) */
.tpl-event-img-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Il placeholder bg-evidenza riempie anch'esso l'intera colonna */
.tpl-event-img-col .tpl-event-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: unset; /* disabilita il 229px fisso del placeholder generico */
}

.tpl-event-no-img {
    width: 100%;
    height: 100%;
    min-height: 180px;
    background-color: var(--bs-primary);
    opacity: 0.12;
}

/* Override Bootstrap Italia .card-calendar dimensioni nella colonna immagine */
.tpl-event-img-col .card-calendar {
    top: 12px;
    right: 12px;
    width: auto;
    height: auto;
    max-height: none;
    padding: 6px 10px;
    min-width: 48px;
    color: var(--bs-primary);
}

/* ── DPCalendar: placeholder bg-evidenza (immagine abilitata ma assente) ── */
.tpl-event-placeholder {
    position: relative;
    width: 100%;
    height: 229px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


/* ── DPCalendar: data pill (immagine disabilitata — caso C) ── */
.tpl-event-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-primary);
    margin-bottom: 0.5rem;
}

.tpl-event-evidenza {
    background-color: var(--bs-primary);
    box-shadow: 0 0 0 100vw var(--bs-primary);
    clip-path: inset(0 -100vw);
}

.tpl-event-evidenza .card a {
    color: var(--bs-primary);
}

.tpl-event-evidenza .card a:hover,
.tpl-event-evidenza .card a:focus {
    color: var(--bs-primary);
    opacity: 0.8;
}

.tpl-event-evidenza .carousel-indicators button {
    background-color: rgba(255, 255, 255, 0.5);
}

.tpl-event-evidenza .carousel-indicators button.active {
    background-color: #fff;
}

/* ── Event card images: altezza fissa 229px (≈ 406×229 — 16:9) ──
   Sovrascrive il sistema padding-top di Bootstrap Italia (.img-responsive-panoramic)
   per garantire card allineate indipendentemente dall'immagine. */
.mod-dpcalendar-upcoming-joomlaPA .img-responsive-wrapper {
    height: 229px;
    overflow: hidden;
}

.mod-dpcalendar-upcoming-joomlaPA .img-responsive-panoramic,
.vivere-eventi .img-responsive-panoramic,
.tpl-event-evidenza .img-responsive-panoramic {
    padding-top: 0 !important;
    height: 229px;
}

/* L'immagine dentro il wrapper assoluto di Bootstrap Italia riempie il box */
.mod-dpcalendar-upcoming-joomlaPA .img-wrapper img,
.vivere-eventi .img-wrapper img,
.tpl-event-evidenza .img-wrapper img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

/* ── Filtro eventi: animazione collapse ── */

/* Garantisce l'animazione height di Bootstrap durante apertura/chiusura del filtro,
   indipendentemente da eventuali override di Bootstrap Italia su .collapsing globale */
.com-dpcalendar-list-eventi .collapsing {
    overflow: hidden;
    transition: height 0.35s ease;
}

/* ── Leaflet: icona pulsante fullscreen ──
   Stessa tecnica del componente DPCalendar: mask-image con SVG reale da /images/icons/. */
.leaflet-control-fullscreen a .leaflet-control-fullscreen-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 7px;
    background-color: #000;
    mask-image: url("/media/com_dpcalendar/images/icons/up-right-and-down-left-from-center.svg");
    mask-repeat: no-repeat;
    mask-position: center;
}

.leaflet-fullscreen-on .leaflet-control-fullscreen a .leaflet-control-fullscreen-icon {
    mask-image: url("/media/com_dpcalendar/images/icons/down-left-and-up-right-to-center.svg");
}

/* ── DPCalendar scheda evento (override com_dpcalendar/event/default) ── */

/* Azzeriamo il padding 1rem che il CSS di DPCalendar (dpcalendar/views/event/default.css)
   applica ai blocchi della scheda evento. Quel foglio è iniettato a runtime via dpdocument
   DOPO template-comuni.css, quindi a pari specificità vincerebbe: serve !important.
   Il nostro layout gestisce già spaziature e sfondi a livello di sezione. */
.com-dpcalendar-event__information,
.com-dpcalendar-event__actions,
.com-dpcalendar-event__cta,
.com-dpcalendar-event__description,
.com-dpcalendar-event_small {
    padding: 0 !important;
}

/* Mappa luogo: nascondiamo testi e bottoni del template standard di DPCalendar
   (mostriamo solo la mappa dentro il wrapper .dp-locations-map-only). */
.dp-locations-map-only .dp-heading,
.dp-locations-map-only .dp-button-bar,
.dp-locations-map-only .dp-location > h3,
.dp-locations-map-only .dp-location__description,
.dp-locations-map-only .dp-location__details-link,
.dp-locations-map-only .dp-location__details {
    display: none !important;
}

/* Bootstrap Italia applica margini negativi a .map-wrapper.map-column
   (margin: 0 -24px e, da lg, margin-left: -3rem) che spostano la mappa
   a sinistra e fuori colonna: li azzeriamo solo dentro #luogo. */
#luogo .map-wrapper.map-column {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Il modificatore vendor com-dpcalendar-event_small vincola la larghezza:
   forziamo la larghezza piena su mappa e contenitori. */
.dp-locations-map-only,
.dp-locations-map-only .com-dpcalendar-event__locations,
.dp-locations-map-only .dp-location,
.dp-locations-map-only .dp-map {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

.dp-locations-map-only .dp-map {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    min-height: 400px;
}