/* =====================================================================
   Home di qr-ita.it — foglio di stile
   Documentazione: docs\20260919-handoff-home-qr-ita.md
   Responsivo (prima il telefono, poi gli schermi larghi), accessibile
   WCAG 2.2, zero risorse esterne. Nomi delle classi in stile BEM.
   Carattere di serie: Verdana (decisione 08/09/2026).
   Carattere ad alta leggibilità: OpenDyslexic, ospitato in casa
   (cartella font\), acceso dal bannerino nel piè di pagina.
   I COLORI SI CAMBIANO QUI SOTTO.
   ===================================================================== */

:root {
    /* ---- Colori: ritoccare liberamente questi valori ---- */
    --carta: #faf9f6;            /* sfondo generale (carta chiara) */
    --bianco: #ffffff;           /* sfondo dei riquadri e delle fasce */
    --inchiostro: #2b2b2b;       /* testo principale */
    --inchiostro-tenue: #575349; /* testi secondari */
    --accento: #8a6508;          /* oro scuro: collegamenti e dettagli (leggibile anche in piccolo) */
    --accento-vivo: #b8860b;     /* oro pieno: titoli grandi e decorazioni (richiama il QR dorato del logo) */
    --accento-scuro: #6d4f06;    /* oro cupo: collegamenti al passaggio del mouse */
    --bordo: #e5dfd2;            /* bordi dei riquadri */
    --evidenza: #f6efdf;         /* fondo dorato tenue della sezione QR */
    --verde: #008c45;            /* verde bandiera (riga tricolore) */
    --rosso: #cd212a;            /* rosso bandiera (riga tricolore) */
    --fuoco: #1d4ed8;            /* contorno degli elementi raggiunti da tastiera */
}

/* ---- Carattere ad alta leggibilità (OpenDyslexic, file in font\) ---- */

@font-face {
    font-family: "OpenDyslexic";
    src: url("font/OpenDyslexic-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "OpenDyslexic";
    src: url("font/OpenDyslexic-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ---- Base ---- */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--inchiostro);
    background: var(--carta);
}

/* I pulsanti ereditano il carattere della pagina (di serie non lo fanno) */
button { font: inherit; }

/* Quando il bannerino accende il carattere ad alta leggibilità:
   lo script aggiunge la classe qui sotto all'elemento html */
html.carattere-dislessia body {
    font-family: "OpenDyslexic", Verdana, Geneva, sans-serif;
    line-height: 1.8;
}

.contenitore {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3 {
    line-height: 1.3;
    color: var(--inchiostro);
}

a { color: var(--accento); }
a:hover { color: var(--accento-scuro); }

a:focus-visible,
summary:focus-visible,
button:focus-visible {
    outline: 3px solid var(--fuoco);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---- Salta al contenuto (visibile solo da tastiera) ---- */

.salta-contenuto {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--inchiostro);
    color: var(--bianco);
    padding: 10px 16px;
    z-index: 10;
}

.salta-contenuto:focus {
    left: 0;
}

/* ---- Testata: logo a bandiera e domanda della copertina ---- */

.testata {
    text-align: center;
    padding: 0 0 32px;
    border-bottom: 1px solid var(--bordo);
}

.testata__logo {
    display: block;
    width: 100%;
    max-width: 927px;   /* larghezza naturale dell'immagine: oltre sgranerebbe */
    height: auto;
    margin: 0 auto 26px;
}

/* La domanda: due righe con pari dignità, «Biglietto da Lavoro?»
   evidenziata per colore e peso senza ridurre l'altra */

.domanda {
    font-weight: normal;
}

.domanda__riga {
    display: block;
}

.domanda__riga--visita {
    font-size: 1.75rem;
}

.domanda__riga--o {
    font-size: 1.05rem;
    color: var(--inchiostro-tenue);
    margin: 2px 0;
}

.domanda__riga--lavoro {
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--accento-vivo);
}

@media (min-width: 600px) {
    .domanda__riga--visita,
    .domanda__riga--lavoro { font-size: 2.3rem; }
}

/* ---- Sezioni ---- */

.sezione { padding: 44px 0; }

.sezione h2 {
    font-size: 1.4rem;
    margin-bottom: 18px;
}

.sezione p + p { margin-top: 12px; }

.sezione__sottotitolo {
    font-size: 1.15rem;
    margin: 28px 0 10px;
}

@media (min-width: 600px) {
    .sezione h2 { font-size: 1.6rem; }
}

/* ---- Le differenze: due riquadri, uno sotto l'altro sul telefono,
        affiancati sugli schermi larghi ---- */

.differenze__intro {
    margin-bottom: 20px;
}

.differenze {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 800px) {
    .differenze { grid-template-columns: 1fr 1fr; }
}

.differenze__colonna {
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: 10px;
    padding: 22px;
}

.differenze__titolo {
    font-size: 1.1rem;
    color: var(--accento);
    margin-bottom: 12px;
}

.differenze__elenco {
    padding-left: 20px;
}

.differenze__elenco li + li { margin-top: 8px; }

/* Elenco con le faccine: niente pallini, la faccina fa da segnaposto
   e le righe lunghe vanno a capo allineate al testo */

.differenze__elenco--emoji {
    list-style: none;
    padding-left: 0;
}

.differenze__elenco--emoji li {
    position: relative;
    padding-left: 2em;
}

.differenze__emoji {
    position: absolute;
    left: 0;
    top: 0;
}

/* ---- Come funziona: fascia bianca, passi numerati in oro ---- */

.sezione--funziona {
    background: var(--bianco);
    border-top: 1px solid var(--bordo);
    border-bottom: 1px solid var(--bordo);
}

.passi {
    padding-left: 24px;
}

.passi__passo { padding-left: 6px; }

.passi__passo + .passi__passo { margin-top: 14px; }

.passi__passo::marker {
    color: var(--accento-vivo);
    font-weight: bold;
}

.riquadro {
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-left: 4px solid var(--accento-vivo);
    border-radius: 6px;
    padding: 14px 16px;
    margin-top: 18px;
}

.riquadro p + p { margin-top: 10px; }

.motto {
    margin-top: 22px;
    text-align: center;
    font-weight: bold;
    color: var(--accento);
}

/* ---- Sezione QR: fondo dorato tenue, consiglio in riquadro ---- */

.sezione--qr {
    background: var(--evidenza);
    border-top: 1px solid var(--bordo);
    border-bottom: 1px solid var(--bordo);
}

.controllo {
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-left: 4px solid var(--accento-vivo);
    border-radius: 6px;
    padding: 14px 16px;
    margin-top: 14px;
}

/* ---- Preferisci parlarne a voce? ---- */

.sezione--voce {
    text-align: center;
}

.voce__numero {
    margin-top: 6px;
}

.voce__numero a {
    display: inline-block;
    background: var(--accento);
    color: var(--bianco);
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 999px;
}

.voce__numero a:hover {
    background: var(--accento-scuro);
    color: var(--bianco);
}

.voce__nota {
    margin-top: 10px;
    color: var(--inchiostro-tenue);
}

@media (min-width: 600px) {
    .voce__numero a { font-size: 1.6rem; }
}

/* ---- Piè di pagina: marchio, informativa, bannerino accessibilità ---- */

.pie-pagina {
    background: var(--bianco);
    border-top: 1px solid var(--bordo);
    padding: 26px 0 34px;
    font-size: 0.92rem;
    color: var(--inchiostro-tenue);
}

.pie-pagina__marchio {
    font-weight: bold;
    color: var(--inchiostro);
}

.pie-pagina__informativa { margin-top: 8px; }

.accessibilita { margin-top: 18px; }

.accessibilita__apri {
    cursor: pointer;
    color: var(--accento);
}

.accessibilita__pannello {
    margin-top: 12px;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 10px;
    padding: 16px 18px;
    max-width: 560px;
}

.accessibilita__interruttore {
    margin-top: 12px;
    background: var(--bianco);
    color: var(--accento);
    border: 2px solid var(--accento);
    border-radius: 999px;
    padding: 10px 18px;
    cursor: pointer;
}

/* Interruttore acceso: si riempie d'oro */
.accessibilita__interruttore[aria-pressed="true"] {
    background: var(--accento);
    color: var(--bianco);
}

.accessibilita__nota {
    margin-top: 10px;
    font-size: 0.85rem;
}

/* ---- Schermi molto piccoli: titoli un filo più contenuti ---- */

@media (max-width: 380px) {
    .domanda__riga--visita,
    .domanda__riga--lavoro { font-size: 1.45rem; }
    .sezione h2 { font-size: 1.25rem; }
}

/* ---- Nota della colonna differenze (aggiunta 23/09/2026) ---- */

.differenze__nota {
    margin-top: 10px;
    font-size: 0.85rem;
    color: #555;
}

/* ---- Pulsante «Guarda un esempio» nella testata (aggiunta 09/10/2026):
        stesso stile del pulsante del telefono in fondo, un po' piu' piccolo ---- */

.testata__esempio {
    margin-top: 22px;
}

.testata__esempio a {
    display: inline-block;
    background: var(--accento);
    color: var(--bianco);
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 26px;
    border-radius: 999px;
}

.testata__esempio a:hover {
    background: var(--accento-scuro);
    color: var(--bianco);
}

/* ---- Riga di menu nella testata e pagina «Le pagine ponte attive»
        (/qr/elenco.php, aggiunta 13/10/2026 —
        docs\20261013-elenco-pagine-ponte.md) ---- */

.testata__menu {
    margin-top: 14px;
    font-size: 0.95rem;
}

.elenco__titolo {
    font-size: 1.7rem;
    color: var(--accento-vivo);
}

.elenco__nota {
    color: var(--inchiostro-tenue);
    margin-bottom: 16px;
}

.elenco-pagine {
    list-style: none;
}

.elenco-pagine li + li { margin-top: 10px; }

.elenco-pagine a {
    font-size: 1.05rem;
    word-break: break-all;
}