/**
 * 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)
 * -------------------------------------------------------------------------
 * Markup in templates/region/region--footer.html.twig, aperto dal trigger in
 * templates/region/region--header.html.twig.
 * Stili del template ufficiale italia/design-comuni-pagine-statiche
 * (src/components/cmp-modal/_cmp-modal-header-search.scss), assenti dal
 * bundle bootstrap-italia-cm.min.css v1.7.1 del tema: senza di questi il
 * modale resta una normale .modal-lg di Bootstrap. 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 .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;
}
@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;
}
/* Modale dell'header e pagina risultati: il campo prende lo spazio libero e
 * il pulsante resta su una riga. Senza, a 390px "Cerca" andava a capo
 * ("Ce/rc/a" nella modale, "Cer/ca" nella pagina risultati). */
.search-modal .form-group .input-group,
.cmp-input-search-button.form-group .input-group {
  flex: 1 1 auto;
  min-width: 0;
}
.search-modal .form-group .btn,
.cmp-input-search-button.form-group .btn {
  flex-shrink: 0;
  white-space: nowrap;
}
.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
 * cm_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. */

/*carousel*/
/* Desktop: 3 colonne, niente frecce, bullets visibili */
@media (min-width: 992px) {
  #splide01 .splide__arrows {
    display: none !important;
  }

  #splide01 .splide__pagination {
    display: flex !important;
  }
}

/* Tablet/mobile: niente frecce, bullets visibili.
 * Prima qui erano nascosti ENTRAMBI (il commento diceva "frecce visibili", la
 * regola sotto le spegneva): sotto i 992px il carosello mostrava 1 slide su 3-5
 * e non restava nessun comando per raggiungere le altre, se non lo swipe. Lo
 * swipe non e' disponibile da tastiera ne' da screen reader, quindi il resto
 * della galleria era irraggiungibile (WCAG 2.1.1, criterio di livello A).
 * I bullet sono <button> veri generati da Splide: focalizzabili e annunciati.
 */
@media (max-width: 991.98px) {
  #splide01 .splide__pagination {
    display: flex !important;
  }

  #splide01 .splide__arrows {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------
 * Logo dell'header (.it-brand-logo) — nessuno scroll orizzontale a 320px
 * -------------------------------------------------------------------------
 * Markup in templates/region/region--header.html.twig. Il box del logo e'
 * 220x56px via attributi width/height sull'<svg>; qui lo rendiamo cedevole
 * sotto i 320px di viewport, dove 220px + zona destra sfonderebbero comunque
 * la colonna (WCAG 1.4.10). L'<image> interna ha object-fit:contain, quindi
 * riducendo la larghezza il logo rimpicciolisce senza deformarsi.
 * Il bundle BI non ha regole su .it-brand-wrapper svg: niente !important.
 */
.it-brand-logo {
  max-width: 100%;
  height: auto;
}

/* -------------------------------------------------------------------------
 * Header — fascia centrale bianca
 * -------------------------------------------------------------------------
 * La classe theme-light sulla .it-header-center-wrapper la mette
 * templates/region/region--header.html.twig: le regole sono gia' nel bundle
 * (fondo bianco, brand/social/right zone in primario) e in css/drupal.css per
 * il bottone della ricerca, che qui e' un <button> e non l'<a> di BI.
 * Solo la fascia centrale diventa bianca: slim in alto e navbar restano blu,
 * come su dev.cittametropolitanaroma.it.
 * Unico ritocco: la right zone ("Seguici su", "Cerca", icone social) passa dal
 * #06c di BI al blu piu' scuro del sito di riferimento, che su fondo bianco
 * sale da 4,6:1 a 7,6:1 di contrasto (WCAG 1.4.3 chiede 4,5:1).
 */
.it-header-center-wrapper.theme-light .it-header-center-content-wrapper .it-right-zone {
  color: #004d99;
}
.it-header-center-wrapper.theme-light .it-header-center-content-wrapper .it-right-zone .it-socials ul .icon {
  fill: #004d99;
}

/* -------------------------------------------------------------------------
 * Chip lunghe su viewport stretti — a capo, non troncate
 * -------------------------------------------------------------------------
 * Markup in templates/macros/chips.html.twig. La .chip di BI e' inline-flex
 * senza limite di larghezza: un'etichetta lunga (i nomi delle competenze lo
 * sono spesso) sfonda la colonna sui viewport stretti e obbliga allo
 * scorrimento orizzontale (WCAG 1.4.10). Qui la chip non supera mai il suo
 * contenitore e l'etichetta va a capo.
 *
 * Prima l'etichetta veniva troncata con l'ellissi: risolveva l'1.4.10 ma ne
 * apriva un'altra: a zoom 200% su uno schermo da 1280 il viewport CSS diventa
 * 640px, questa media query scatta e le chip perdevano testo a video ("Enti
 * pubblici", "Imprese" misurati su /servizi/autorizzazione-unica-ambientale-aua-0).
 * WCAG 1.4.4 chiede che a 200% non si perda contenuto, e l'ellissi e' perdita
 * di contenuto anche se il DOM resta intero. Andare a capo soddisfa 1.4.10 e
 * 1.4.4 insieme.
 *
 * min-width:0 serve perche' .chip-label e' un flex item: senza, il suo
 * min-width:auto gli impedisce di rimpicciolirsi sotto la larghezza del testo.
 */
@media (max-width: 767.98px) {
  .chip {
    max-width: 100%;
    height: auto;
  }
  .chip .chip-label {
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    /* BI da' all'etichetta height:16px con transform:translateY(-2px) per
     * centrarla nella chip alta 24px: su piu' righe quel box fisso taglia le
     * righe successive, quindi l'altezza torna al contenuto e la centratura
     * la fa l'align-items della chip. */
    height: auto;
    line-height: 1.4;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
 * Card delle competenze
 * -------------------------------------------------------------------------
 * Markup in templates/views/views-view-fields--esplora-categoria--terms.html.twig
 * via macros/card-semplice.html.twig. La stessa view rende anche le categorie
 * di servizi e novita': quelle non ricevono queste classi e restano come sono.
 *
 * Le misure vengono dalle card di dev.cittametropolitanaroma.it, dove le due
 * liste sono due componenti diversi:
 *   home  -> .card-body.card-esplora-home, nessuna cornice, titolo 18px/700
 *            centrato, icona .competenze_icon 80x90 con 1rem sotto;
 *   /tutte-le-competenze -> .card.shadow-sm.rounded con
 *            .card-title.title-xlarge 32px/700 allineato a sinistra.
 * Il bundle v1.7.1 non ha ne' title-xlarge ne' quelle classi, quindi i valori
 * si riscrivono qui sopra .it-card-title.h5 (1.25rem) del macro.
 */

/* Comune alle due liste: il link del titolo non e' sottolineato (l'area
 * cliccabile e' gia' segnalata dalla card). La sottolineatura torna su hover e
 * su focus da tastiera, cosi' il link resta distinguibile quando lo si
 * raggiunge (WCAG 2.4.7). */
.it-card.card-competenza .it-card-title a {
  text-decoration: none;
}
.it-card.card-competenza .it-card-title a:hover,
.it-card.card-competenza .it-card-title a:focus-visible {
  text-decoration: underline;
}

/* Elenco /tutte-le-competenze */
.it-card.card-competenza .it-card-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Home: titolo piu' piccolo e nessuna cornice. Il macro non stampa gia' piu'
 * `rounded shadow` (opzione riquadro:false), qui resta da togliere il fondo
 * bianco di .it-card, che su una sezione non bianca si vedrebbe come un
 * riquadro. Stessa specificita' della regola dell'elenco qui sopra: vince
 * perche' viene dopo. */
.it-card.card-competenza-home {
  background-color: transparent;
}
.it-card.card-competenza-home .it-card-title {
  font-size: 1.125rem;
  line-height: 1.45;
}

/* -------------------------------------------------------------------------
 * Hero della home — altezza minima 620px
 * -------------------------------------------------------------------------
 * BI da' min-height:300px a .it-hero-wrapper e le classi it-hero-large /
 * it-hero-medium scritte nei template non esistono nel bundle v1.7.1: senza
 * questa regola tutte le hero restano alte 300px.
 * 620px e' il valore che dev.cittametropolitanaroma.it ottiene dal bundle BI
 * 2.x (`@media (min-width:992px){.it-hero-wrapper{min-height:620px}}`), che il
 * bundle v1.7.1 di questo tema non ha. Qui e' senza breakpoint perche' la
 * richiesta e' 600px come minimo anche sotto i 992px.
 * Lo scope e' la sola home (.path-frontpage, classe sul <body> ripristinata
 * in templates/html/html.html.twig): le hero di "Vivere il territorio" —
 * paragraph--hero-immagine, sola immagine senza testo — non devono crescere.
 */
.path-frontpage .it-hero-wrapper {
  min-height: 620px;
}

/* -------------------------------------------------------------------------
 * Hero con overlay — velatura nera al posto del blu
 * -------------------------------------------------------------------------
 * BI vela l'immagine di .it-overlay.it-dark con rgba(23,50,77,.8), un blu
 * scuro. Qui diventa nera, come l'overlay che paragraph--random-hero-con-scritta
 * si disegna gia' da se' inline (linear-gradient su rgba(0,0,0,.5)): le due
 * hero della home usano template diversi e devono somigliarsi.
 * Stessa specificita' della regola BI: vince custom.css perche' e' caricato
 * dopo il bundle in cm_theme.libraries.yml, niente !important.
 */
.it-hero-wrapper.it-overlay.it-dark .img-responsive-wrapper:after {
  background: rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------------------------------
 * Rich text redazionale — parole lunghe non spezzabili
 * -------------------------------------------------------------------------
 * .font-serif e' il contenitore dei campi compilati in CKEditor. Un indirizzo
 * email lungo (misurato: direttoreareeprotette@cittametropolitanaroma.it, 408px
 * in un box da 272) non ha punti di a-capo e costringe l'intera pagina a
 * scorrere in orizzontale a 320px, violando WCAG 1.4.10. La redazione non puo'
 * spezzare a mano gli indirizzi: la difesa sta qui.
 * break-word e non anywhere: non altera la larghezza min-content dei box.
 */
.font-serif {
  overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
 * Controlli zoom di OpenLayers — bersaglio da 24px
 * -------------------------------------------------------------------------
 * ol.css disegna .ol-control button a 1.375em (22px misurati) con 1px di
 * margine: 22x22 con 2px di spazio fra i due pulsanti. WCAG 2.5.8 (AA) chiede
 * 24x24, e l'eccezione "spaziatura sufficiente" non si applica perche' i due
 * bersagli sono adiacenti. ol.css e' vendorizzato qui dentro
 * (css/ol/ol.css), ma si tocca solo da custom.css per non divergere
 * dall'upstream. Attenzione: ol.css arriva dalla library openlayers_map, che si
 * attacca solo sulle pagine con una mappa e quindi carica DOPO custom.css: a
 * parita' di specificita' vincerebbe lui. [class] alza la specificita' a
 * (0,2,1) senza !important.
 */
.ol-control button[class] {
  width: 24px;
  height: 24px;
  line-height: 24px;
}

/* -------------------------------------------------------------------------
 * Mappe dei confini comunali (js/mappa-confini.js)
 * -------------------------------------------------------------------------
 * node--comune: territorio del comune con la sede; views-view--mappa-comuni:
 * tutti i comuni, con il popup che porta alla scheda. OpenLayers ha bisogno di
 * un'altezza esplicita sul contenitore, senza la mappa collassa a 0.
 */
.mappa-confini {
  position: relative;
  width: 100%;
  height: 476px;
}
.mappa-confini--comuni {
  height: 600px;
}

/* Il popup e' un ol.Overlay: OpenLayers lo ancora per l'angolo in alto a
 * sinistra al punto interno del comune, da qui lo spostamento verso l'alto e
 * la freccia a 48px dal bordo sinistro. */
.mappa-confini-popup {
  position: absolute;
  bottom: 12px;
  left: -50px;
  min-width: 250px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
}
.mappa-confini-popup::before,
.mappa-confini-popup::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  border: solid transparent;
  pointer-events: none;
}
.mappa-confini-popup::after {
  left: 48px;
  margin-left: -10px;
  border-width: 10px;
  border-top-color: #fff;
}
.mappa-confini-popup::before {
  left: 48px;
  margin-left: -11px;
  border-width: 11px;
  border-top-color: #ccc;
}
.mappa-confini-popup-chiudi {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
}

/* -------------------------------------------------------------------------
 * Testo su viewport stretti - parole non spezzabili
 * -------------------------------------------------------------------------
 * Regola ripresa da comuni_theme. La difesa su .font-serif qui sopra copre
 * solo il rich text: fuori da li' un indirizzo PEC o un URL lungo (footer,
 * card, contatti) a 320px sfora la colonna e porta tutta la pagina in
 * scorrimento orizzontale (WCAG 1.4.10).
 * 'anywhere' e non 'break-word' perche' agisce anche sul min-content, quindi
 * regge dentro flex e grid. Il breakpoint 'sm' lascia invariati tablet e
 * desktop: su comune-lol l'overflow c'era solo a 320px, e con la regola attiva
 * fino a lg cambiavano posizione centinaia di elementi senza guadagno.
 */
@media (max-width: 575.98px) {
  span, a, p, h1, h2, h3, h4 {
    overflow-wrap: anywhere;
  }
}

/* WCAG 1.4.10 (Reflow): sotto lg la colonna che contiene .it-hero-card e'
   px-0, quindi non ha padding per assorbire i margini negativi (-12px) delle
   .row che stanno dentro la card — briciole di pane comprese, che arrivano dal
   blocco breadcrumb e non si possono correggere dal template chiamante. A
   320px la pagina finiva a 332px e scorreva in orizzontale. Azzerando quei
   margini la card resta a tutta larghezza e il contenuto guadagna i 12px di
   padding delle sue colonne, invece di stare appiccicato al bordo. */
.it-hero-card > .row,
.it-hero-card > .block > .row {
  margin-left: 0;
  margin-right: 0;
}

/* WCAG 1.1.1: la freccia dell'accordion. Bootstrap Italia non la disegna con
   background-image (come fa Bootstrap) ma con
   .accordion-header .accordion-button:after { content: url("data:image/svg+xml,...") },
   e un content:url() e' un elemento sostituito: Chrome lo espone nell'albero di
   accessibilita' come "image" senza nome dentro il <button>. Ogni accordion
   della pagina diventa cosi' una segnalazione "immagine priva di nome"
   (5 sulle domande frequenti, una per FAQ).
   La sintassi content: <url> / <alt> assegna al contenuto generato un testo
   alternativo: con stringa vuota il nodo sparisce dall'albero e la freccia
   resta identica a prima. I browser che non supportano l'alt-text scartano la
   dichiarazione e restano sulla regola di BI, quindi l'icona non sparisce mai.
   La data URI e' copiata tale e quale da css/bootstrap-italia-cm.min.css
   (BI 2.18.3): se si aggiorna BI e la freccia cambia, va riallineata. */
.accordion-header .accordion-button:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath fill='hsl(210, 100%, 40%)' d='M12,10.3l4.8,4.8c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1c0,0,0,0,0,0l-4.8-4.8c-0.6-0.6-1.5-0.6-2.1,0L6.2,14c-0.3,0.3-0.3,0.8,0,1c0,0,0,0,0,0c0.3,0.3,0.8,0.3,1.1,0L12,10.3z'/%3E%3C/g%3E%3C/svg%3E") / "";
}

/* -------------------------------------------------------------------------
 * "Carica altri risultati" (views_show_more) nelle liste a .row.g-*
 * -------------------------------------------------------------------------
 * Ogni pagina caricata arriva come una nuova .row dentro .view-content. Il
 * margin-top negativo di .row.g-* annulla il margin-top della prima card, e la
 * prima card nuova finiva attaccata all'ultima vecchia (/servizi/ambiente: 0px
 * invece di 16px; /servizi: 16px invece di 32px). Dalla seconda riga in poi il
 * margine negativo non serve: tra le righe resta lo stesso spazio che c'e' fra
 * le card della stessa riga.
 * Solo vista tutti_i_servizi: novita, comuni e luoghi usano lo stesso schema ma
 * con card a margine proprio, e li' la regola raddoppiava lo spazio (48px).
 */
.view-tutti-i-servizi .view-content > .row + .row {
  margin-top: 0;
}