/**
 * Minimal custom layer — only for what Bootstrap Italia doesn't cover.
 * Keep every rule scoped; do NOT override the BI palette / primary colour here.
 */

/* -------------------------------------------------------------------------
 * Calendario (paragraph--calendario) — padding laterale su mobile
 * -------------------------------------------------------------------------
 * Il carosello calendario usa data-bs-carousel-splide: Splide scrive INLINE
 * padding-left/right sulla .splide__track (effetto "peek" della slide
 * successiva). A <=768px il carosello passa a perPage:1 e quel padding sul
 * singolo giorno si vede male. Lo azzeriamo solo su mobile; su desktop il
 * peek resta perche' segnala che il carosello scorre (7 giorni, perPage 4).
 * Lo stile inline di Splide non ha !important, quindi il nostro !important vince.
 * BI gia' azzera il padding-top della track del calendario: qui completiamo l'asse X.
 */
@media (max-width: 768px) {
  .it-calendar-wrapper .splide__track {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* -------------------------------------------------------------------------
 * Card teaser a 3 colonne (card-teaser-block-3) con MENO di 3 card
 * -------------------------------------------------------------------------
 * BI imposta justify-content:space-between con .card-teaser a flex:0 0 32%.
 * Con 3 card lo slack (4%) diventa i due gap: layout corretto.
 * Con 1-2 card lo space-between le spinge agli estremi opposti (buco al centro).
 * Quando manca la 3a card allineamo a sinistra e ricreiamo il gap del layout a 3
 * (2% = lo stesso spazio che space-between lascia tra 3 card), cosi' le card
 * restano compatte a sinistra come nel caso pieno. Il caso a 3 card NON viene
 * toccato (il selettore :not(:has(...)) non fa match). Specificita' > BI => niente !important.
 */
@media (min-width: 768px) {
  .card-wrapper.card-teaser-wrapper.card-teaser-block-3:not(:has(> .card-teaser:nth-child(3))) {
    justify-content: flex-start;
  }
  .card-wrapper.card-teaser-wrapper.card-teaser-block-3:not(:has(> .card-teaser:nth-child(3))) > .card-teaser:not(:last-child) {
    margin-right: 2%;
  }
}

/* -------------------------------------------------------------------------
 * Toolbar (gin) — altezza 0px
 * -------------------------------------------------------------------------
 * Il paragrafo toolbar e' un placeholder per il layout, non ha contenuto.
 */
.toolbar {
  height: 0px !important;
}

/* -------------------------------------------------------------------------
 * Modale di ricerca fullscreen (.search-modal)
 * -------------------------------------------------------------------------
 * Stili del template ufficiale italia/design-comuni-pagine-statiche
 * (src/components/cmp-modal/_cmp-modal-header-search.scss), assenti dal
 * bundle bootstrap-italia-comuni.min.css v1.7.1 del tema. CSS compilato
 * ripreso dal demo ufficiale; il colore primario del demo (#007a52) e'
 * sostituito con var(--bs-primary) per seguire la palette del sito.
 */
.search-modal .modal-dialog {
  max-width: 100%;
  margin: 0;
  height: 100vh;
}
.search-modal .modal-dialog .modal-content {
  height: 100%;
}
.search-modal .modal-dialog .modal-content .modal-body {
  overflow-y: auto;
}
@media (max-width: 767.8px) {
  .search-modal .modal-dialog .modal-content .modal-body {
    padding: 0;
  }
  .search-modal .modal-dialog .modal-content .modal-body .container {
    max-width: 100%;
    padding: 0;
  }
}
.search-modal .modal-title {
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  padding: 1.125rem 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: #455a64;
  margin-bottom: 4rem;
}
@media (min-width: 576px) {
  .search-modal .modal-title {
    font-size: 3rem;
    padding: 1rem 1.25rem;
    margin-bottom: 3.5rem;
  }
}
@media (min-width: 768px) {
  .search-modal .modal-title {
    box-shadow: none;
    justify-content: space-between;
  }
}
.search-modal .modal-title h2,
.search-modal .modal-title .h2 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
}
@media (min-width: 576px) {
  .search-modal .modal-title h2,
  .search-modal .modal-title .h2 {
    font-size: 3rem;
  }
}
@media (min-width: 768px) {
  .search-modal .modal-title h2,
  .search-modal .modal-title .h2 {
    line-height: 1.25;
  }
}
.search-modal .modal-title .search-link {
  margin-right: 1.5rem;
}
@media (min-width: 576px) {
  .search-modal .modal-title .search-link {
    margin-right: 1.25rem;
  }
}
.search-modal .modal-title .search-link svg {
  fill: var(--bs-primary);
}
.search-modal .form-group {
  display: flex;
  align-items: flex-end;
  gap: 1.875rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 576px) {
  .search-modal .form-group {
    gap: 1.67rem;
    padding-left: 1.33rem;
    padding-right: 1.33rem;
  }
}
.search-modal .form-group .autocomplete-icon {
  left: 20px;
  top: 50%;
  right: auto;
  transform: translateY(-50%);
}
.search-modal .form-group .autocomplete-icon .icon,
.search-modal .form-group .input-group-prepend svg {
  fill: var(--bs-primary);
}
@media (max-width: 575.8px) {
  .search-modal .form-group .input-group-prepend svg {
    width: 1rem;
    height: 1rem;
  }
}
.search-modal .form-group label {
  opacity: 0;
  visibility: hidden;
}
.search-modal .form-group input {
  background-color: #fff;
  font-size: 1rem;
  /* BI core ufficiale da' width:100% a tutti gli input testuali; il bundle
   * del tema no — senza, l'input non riempie la riga flex del form-group. */
  width: 100%;
}
@media (min-width: 576px) {
  .search-modal .form-group input {
    font-size: 2.5rem;
  }
}
@media (min-width: 768px) {
  .search-modal .form-group input {
    height: auto;
  }
}
.search-modal .form-group input::placeholder {
  font-weight: 400;
  color: #455b71;
  opacity: 0.4;
}
.search-modal .searches-list-wrapper {
  padding: 1.125rem 1.5rem;
}
@media (min-width: 576px) {
  .search-modal .searches-list-wrapper {
    padding: 1rem 1.25rem;
  }
}
.search-modal .searches-list-wrapper .other-link-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  color: #191919;
  margin-bottom: 1rem;
}
.search-modal .searches-list li + li {
  margin-top: 1rem;
}
.search-modal .searches-list li a {
  font-size: 1.125rem;
  color: var(--bs-primary);
  line-height: 1.5;
  text-decoration: underline;
}
.search-modal .searches-list li a:hover {
  text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Campo di ricerca della pagina risultati (.cmp-input-search-button)
 * -------------------------------------------------------------------------
 * Stessa origine e stesso motivo del blocco .search-modal qui sopra
 * (src/components/cmp-input-search-button/cmp-input-search-button.scss).
 */
.cmp-input-search-button.form-group {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
}
.cmp-input-search-button.form-group .input-group-prepend svg {
  fill: var(--bs-primary);
}
@media (max-width: 767.8px) {
  .cmp-input-search-button.form-group .input-group-prepend svg {
    width: 1rem;
    height: 1rem;
  }
}
.cmp-input-search-button.form-group label {
  opacity: 0;
  visibility: hidden;
}
.cmp-input-search-button.form-group input {
  font-size: 1rem;
}
@media (min-width: 576px) {
  .cmp-input-search-button.form-group input {
    font-size: 2.5rem;
  }
}
@media (min-width: 768px) {
  .cmp-input-search-button.form-group input {
    height: auto;
  }
}
.cmp-input-search-button.form-group input::placeholder {
  color: #191919;
  font-size: 1rem;
}
@media (min-width: 576px) {
  .cmp-input-search-button.form-group input::placeholder {
    font-size: 2.5rem;
  }
}
@media (min-width: 768px) {
  .cmp-input-search-button.form-group input::placeholder {
    color: #455a64;
  }
}

/* -------------------------------------------------------------------------
 * Regole globali del layer comuni assenti dal bundle v1.7.1
 * -------------------------------------------------------------------------
 * Il reset globale del layer ufficiale (base/_reset.scss) azzera il chrome
 * dei <button> nudi. Qui e' limitato ai bottoni del modale di ricerca per
 * non cambiare l'aspetto di markup nato sul bundle vecchio.
 */
.search-modal .search-link {
  background-color: transparent;
  border-width: 0;
  padding: 0;
  cursor: pointer;
}

/* Nel layer ufficiale e' globale: quando l'input accanto e' piu' alto del
 * box dell'icona (es. campo di ricerca della pagina risultati), fa riempire
 * in altezza l'input-group-text cosi' l'icona si centra e il bordo inferiore
 * combacia con quello dell'input. Con altezze uguali non cambia nulla.
 */
.input-group .input-group-text {
  height: 100%;
}


/* -------------------------------------------------------------------------
 * Footer — colore di fondo unico (#202a2e)
 * -------------------------------------------------------------------------
 * Il bundle BI colora il footer su due bande diverse:
 *   .it-footer-main         -> rgb(0,76.5,153)  (blu primario scuro)
 *   .it-footer-small-prints -> #036             (banda legale piu' scura)
 * Qui le uniformiamo. custom.css e' caricato dopo il bundle in
 * comuni_theme.libraries.yml e la specificita' e' identica (una classe),
 * quindi vince per ordine: niente !important.
 */
.it-footer-main,
.it-footer-small-prints {
  background-color: #202a2e;
}

/* Con le due bande dello stesso colore lo stacco cromatico che separava i link
 * di servizio (Media policy, Mappa del sito, ...) non c'e' piu': al suo posto
 * la <ul class="it-footer-small-prints-list"> porta le utility
 * `border-white border-top`, le stesse del separatore sopra la sezione
 * contatti (region--footer.html.twig). Nessuna regola serve qui. */

/* -------------------------------------------------------------------------
 * Mappa disservizi (paragraph mappa_disservizi / view segnalazioni_disservizi)
 * -------------------------------------------------------------------------
 * Le due sole cose che Bootstrap Italia non copre in questa pagina.
 */

/* Leaflet ha bisogno di un'altezza esplicita sul contenitore: senza, #map
 * collassa a 0 e le tile non si vedono.
 */
.mappa-disservizi #map {
  height: 600px;
}

/* Card evidenziata quando si arriva dal marker ("Vedi nell'elenco"):
 * map-custom.js le mette la classe .is-active.
 */
.mappa-disservizi .js-segnalazione {
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.mappa-disservizi .js-segnalazione.is-active {
  border-color: var(--bs-primary);
  box-shadow: inset 0 0 0 2px var(--bs-primary);
}