/* ==========================================================================
   BOOTSTRAP UTILITY GAP — passo 0.5 (v3.0)
   --------------------------------------------------------------------------
   Bootstrap 5.3 genera la scala 0,1,2,3,4,5 come interi. Il progetto usa
   anche i passi .5 (gap-2.5, py-1.5, px-3.5, p-2.5...) che NON esistono nella
   libreria: le classi venivano ignorate e il layout risultava senza padding,
   con testo compresso e bottoni schiacciati.

   Invece di correggere ogni occorrenza nei template (80+ in 15 file, quindi
   fragile), qui si definiscono le utility mancanti usando le stesse variabili
   di Bootstrap: se un domani si aggiorna Bootstrap, la sintassi resta valida.

   Attenzione: le classi con il punto devono essere escaped con \ nella CSS.
   ========================================================================== */

:root {
  --dg-half: 0.5;   /* mezzo passo, per leggibilita' */
}

/* --- Gap per flexbox e grid: row-gap e column-gap insieme --- */
.gap-0\.5  { gap: calc(var(--bs-spacer) * 0.5) !important; }
.gap-1\.5  { gap: calc(var(--bs-spacer) * 1.5) !important; }
.gap-2\.5  { gap: calc(var(--bs-spacer) * 2.5) !important; }

/* --- Padding orizzontale --- */
.px-0\.5 { padding-left:  calc(var(--bs-spacer) * 0.5) !important; padding-right:  calc(var(--bs-spacer) * 0.5) !important; }
.px-1\.5 { padding-left:  calc(var(--bs-spacer) * 1.5) !important; padding-right:  calc(var(--bs-spacer) * 1.5) !important; }
.px-2\.5 { padding-left:  calc(var(--bs-spacer) * 2.5) !important; padding-right:  calc(var(--bs-spacer) * 2.5) !important; }
.px-3\.5 { padding-left:  calc(var(--bs-spacer) * 3.5) !important; padding-right:  calc(var(--bs-spacer) * 3.5) !important; }

/* --- Padding verticale --- */
.py-0\.5 { padding-top: calc(var(--bs-spacer) * 0.5) !important; padding-bottom: calc(var(--bs-spacer) * 0.5) !important; }
.py-1\.5 { padding-top: calc(var(--bs-spacer) * 1.5) !important; padding-bottom: calc(var(--bs-spacer) * 1.5) !important; }
.py-2\.5 { padding-top: calc(var(--bs-spacer) * 2.5) !important; padding-bottom: calc(var(--bs-spacer) * 2.5) !important; }
.py-3\.5 { padding-top: calc(var(--bs-spacer) * 3.5) !important; padding-bottom: calc(var(--bs-spacer) * 3.5) !important; }

/* --- Padding perimetrale --- */
.p-0\.5  { padding: calc(var(--bs-spacer) * 0.5) !important; }
.p-1\.5  { padding: calc(var(--bs-spacer) * 1.5) !important; }
.p-2\.5  { padding: calc(var(--bs-spacer) * 2.5) !important; }
.p-3\.5  { padding: calc(var(--bs-spacer) * 3.5) !important; }

/* --- Padding laterale singolo (usato sui bordi dei pulsanti) --- */
.ps-0\.5 { padding-left: calc(var(--bs-spacer) * 0.5) !important; }
.ps-1\.5 { padding-left: calc(var(--bs-spacer) * 1.5) !important; }
.pe-0\.5 { padding-right: calc(var(--bs-spacer) * 0.5) !important; }
.pe-1\.5 { padding-right: calc(var(--bs-spacer) * 1.5) !important; }

/* --- Padding sopra / sotto singoli --- */
.pt-0\.5 { padding-top: calc(var(--bs-spacer) * 0.5) !important; }
.pt-1\.5 { padding-top: calc(var(--bs-spacer) * 1.5) !important; }
.pt-2\.5 { padding-top: calc(var(--bs-spacer) * 2.5) !important; }
.pb-0\.5 { padding-bottom: calc(var(--bs-spacer) * 0.5) !important; }
.pb-1\.5 { padding-bottom: calc(var(--bs-spacer) * 1.5) !important; }
.pb-2\.5 { padding-bottom: calc(var(--bs-spacer) * 2.5) !important; }

/* --- Margin sopra / sotto singoli --- */
.mt-0\.5 { margin-top: calc(var(--bs-spacer) * 0.5) !important; }
.mt-1\.5 { margin-top: calc(var(--bs-spacer) * 1.5) !important; }
.mt-2\.5 { margin-top: calc(var(--bs-spacer) * 2.5) !important; }
.mb-0\.5 { margin-bottom: calc(var(--bs-spacer) * 0.5) !important; }
.mb-1\.5 { margin-bottom: calc(var(--bs-spacer) * 1.5) !important; }
.mb-2\.5 { margin-bottom: calc(var(--bs-spacer) * 2.5) !important; }

/* --- Margin laterale (per le icone dentro i pulsanti) --- */
.me-0\.5 { margin-right: calc(var(--bs-spacer) * 0.5) !important; }
.me-1\.5 { margin-right: calc(var(--bs-spacer) * 1.5) !important; }
.me-2\.5 { margin-right: calc(var(--bs-spacer) * 2.5) !important; }
.ms-0\.5 { margin-left: calc(var(--bs-spacer) * 0.5) !important; }
.ms-1\.5 { margin-left: calc(var(--bs-spacer) * 1.5) !important; }

/* --- Margin orizzontale --- */
.mx-0\.5 { margin-left: calc(var(--bs-spacer) * 0.5) !important; margin-right: calc(var(--bs-spacer) * 0.5) !important; }
.mx-1\.5 { margin-left: calc(var(--bs-spacer) * 1.5) !important; margin-right: calc(var(--bs-spacer) * 1.5) !important; }
.mx-2\.5 { margin-left: calc(var(--bs-spacer) * 2.5) !important; margin-right: calc(var(--bs-spacer) * 2.5) !important; }
.my-0\.5 { margin-top: calc(var(--bs-spacer) * 0.5) !important; margin-bottom: calc(var(--bs-spacer) * 0.5) !important; }
.my-1\.5 { margin-top: calc(var(--bs-spacer) * 1.5) !important; margin-bottom: calc(var(--bs-spacer) * 1.5) !important; }
.my-2\.5 { margin-top: calc(var(--bs-spacer) * 2.5) !important; margin-bottom: calc(var(--bs-spacer) * 2.5) !important; }

/* --- Border radius mezzo passo (raro, per completezza) --- */
.rounded-1 { border-radius: 0.25rem !important; }
.rounded-2 { border-radius: 0.5rem !important; }

/* --- border-opacity 5 / 15: Bootstrap offre 10-75 a passi di 5 ma non 5 --- */
.border-opacity-5  { --bs-border-opacity: 0.05; }
.border-opacity-15 { --bs-border-opacity: 0.15; }

/* ==========================================================================
   FIX LAYOUT — Banner PWA e card circolari
   ========================================================================== */

/* Il banner "Installa l'App" stringeva il testo su una parola per riga:
   il padding .5 era inesistente e il bottone non aveva larghezza minima.
   Qui si assicura un minimo di spazio orizzontale al bottone. */
.pwa-banner-card .btn-pwa-action {
    min-width: 9.5rem;
    white-space: nowrap;
}

/* Su schermi stretti il testo del banner deve poter andare a capo
   su parole intere, non lettera per lettera. */
.pwa-banner-card .pwa-banner-title,
.pwa-banner-card .pwa-banner-sub {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

/* I contenitori con icona circolare devono avere dimensioni fisse,
   altrimenti padding + contenuto rendono un ovale schiacciato. */
.icon-bubble {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}