/* ============================================================
   Divergenze della homepage servita da Laravel rispetto al
   sorgente statico (../balans_homepage).

   Sta FUORI da assets/ apposta: il porting si ri-sincronizza
   ricopiando assets/ e favicon/, quindi una modifica fatta
   dentro quell'albero verrebbe sovrascritta in silenzio al
   primo aggiornamento del sito vetrina. Qui invece sopravvive.

   Va caricato DOPO style.css: sovrascrive, non ridichiara.
   ============================================================ */

/* La CTA di testata non è più il bottone "Iscriviti alla waiting
   list" ma un link di accesso a /login. Deve essere un <a> —
   ctrl+click, tastiera e lettori di schermo si aspettano un link
   per una navigazione — ma `.hdr-cta` è scritta per un <button>:
   dichiara `height` senza `display`, e su un elemento inline
   l'altezza viene ignorata e il testo resta in alto. Queste tre
   righe sono ciò che il <button> dava gratis. */
a.hdr-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ------------------------------------------------------------
   Rimando agli store: i badge nel footer.

   I badge sono l'artwork UFFICIALE di Apple e Google, servito com'è
   da `homepage/badges/` (provenienza e regole d'uso nel README lì
   accanto). Fino al 28/08/2026 qui c'erano due pill di testo, scritte
   per non riprodurre a mano marchi altrui: quel vincolo vale ancora
   per un logo ridisegnato, non per il badge che i due store
   distribuiscono proprio per questo uso.

   Sono due SVG e nessuno dei due porta margini dentro di sé (il rounded
   rect copre tutto il viewBox), quindi le proporzioni sono quelle
   dell'artwork: Apple 119,66x40 = 2,99:1, Google Play 238,96x70,87 =
   3,37:1. Il PNG che Google serve da play.google.com invece i margini
   li porta (250 px di file per 192 px di badge) e avrebbe richiesto un
   fattore di compensazione: vedi il README dei badge per il perché
   quel file è stato scartato.

   La misura condivisa è la LARGHEZZA, non l'altezza, e la differenza
   non è di gusto: a pari altezza i due badge escono lunghi 120 px e
   135 px, e affiancati in fondo alla prima colonna del footer quel 13%
   in più del secondo si legge come un allineamento sbagliato. Le due
   proporzioni sono diverse, quindi una sola delle due misure può
   coincidere: distorcere l'artwork per pareggiarle entrambe è proprio
   la cosa che le linee guida dei due store vietano.

   Prezzo dichiarato: allo stesso 135 px il badge Apple è alto 45 px
   contro i 40 di Google Play. Vanno centrati verticalmente (align-items
   sotto), così i 5 px di scarto si dividono sopra e sotto.

   Il verso dell'uguaglianza non è reversibile: pareggiare sui 120 px di
   Apple porterebbe Google Play a 35,5 px di altezza, sotto i 40 px
   minimi che entrambi gli store pretendono. Si sale, non si scende — e
   se un giorno servisse un badge più piccolo, la risposta è toglierlo,
   non rimpicciolirlo.
   ------------------------------------------------------------ */
.store-badges {
    --store-badge-w: 135px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.store-badges .store-badge {
    /* `.ftr-top a` renderebbe questi link display:block, quindi in
       footer i due badge andrebbero uno sotto l'altro. */
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    opacity: 1;
    transition: opacity .15s ease;
}

.store-badges .store-badge:hover,
.store-badges .store-badge:focus-visible {
    opacity: .82;
}

.store-badges .store-badge:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 10px;
}

.store-badges .store-badge img {
    display: block;
    width: var(--store-badge-w);
    height: auto;
}

/* Footer: il blocco vive dentro la PRIMA colonna di `.ftr-top`, che è
   una griglia a quattro colonne fisse — un quinto blocco andrebbe a
   capo da solo, largo 1.4fr, e sembrerebbe rotto. */
.ftr-apps {
    margin-top: 28px;
}

.ftr-apps h3 {
    margin: 0 0 12px;
}