/* ---------------------------------------------------------------------------
   AIA Sezione di Reggio Calabria - stile del sito pubblico
   --------------------------------------------------------------------------- */

:root {
    --blu:        #0d2b52;
    --blu-scuro:  #071a33;
    --blu-chiaro: #1b4a86;
    --oro:        #e0a92b;
    --oro-chiaro: #f6d98a;
    --testo:      #1c2530;
    --testo-tenue:#5c6a7a;
    --bordo:      #dde3ea;
    --sfondo:     #f5f7fa;
    --bianco:     #ffffff;
    --successo:   #1e7a4b;
    --errore:     #b3261e;
    --avviso:     #a26b00;
    --raggio:     10px;
    --ombra:      0 2px 10px rgba(13, 43, 82, .08);
    --ombra-alta: 0 10px 30px rgba(13, 43, 82, .14);
    --max:        1160px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--testo);
    background: var(--sfondo);
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--blu-chiaro); }
a:hover { color: var(--blu); }

h1, h2, h3, h4 { line-height: 1.25; color: var(--blu); margin: 0 0 .6em; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }

.contenitore { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }

.solo-lettori {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.salta-contenuto {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--oro); color: var(--blu-scuro); padding: 10px 16px; font-weight: 600;
}
.salta-contenuto:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------- Intestazione */

/* Intestazione in vetro: semitrasparente, con il contenuto sottostante sfocato */
.intestazione {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow: var(--ombra);
    position: sticky; top: 0; z-index: 50;
}

/* Se il browser non supporta la sfocatura, sfondo pieno per non perdere leggibilita' */
@supports not (backdrop-filter: blur(1px)) {
    .intestazione { background: var(--bianco); }
}

.barra-superiore {
    background: var(--blu-scuro);
    color: rgba(255, 255, 255, .85);
    font-size: .82rem;
}
.barra-superiore a { color: var(--oro-chiaro); text-decoration: none; }
.barra-superiore a:hover { text-decoration: underline; }
.barra-superiore-int {
    display: flex; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; padding-top: 7px; padding-bottom: 7px;
}

.intestazione-int {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding-top: 14px; padding-bottom: 14px;
}

.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo img { border-radius: 6px; flex: 0 0 auto; }
.logo-testo { display: flex; flex-direction: column; line-height: 1.2; }
.logo-testo strong { color: var(--blu); font-size: 1.02rem; letter-spacing: .2px; }
.logo-testo em { color: var(--testo-tenue); font-style: normal; font-size: .85rem; }

.menu ul { display: flex; gap: 7px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.menu a {
    display: block; padding: 9px 13px; border-radius: 8px;
    color: var(--blu); text-decoration: none; font-weight: 600; font-size: .93rem;
}

/* Ogni voce di primo livello ha un contorno e un fondo sfocato:
   si stacca dall'immagine di copertina quando l'intestazione le passa sopra. */
.menu > ul > li > a,
.menu .voce-composta {
    border: 1px solid var(--bordo);
    background: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background .16s, border-color .16s, color .16s, box-shadow .16s;
}
.menu > ul > li > a:hover,
.menu .voce-composta:hover {
    background: var(--bianco);
    border-color: var(--blu-chiaro);
    box-shadow: 0 2px 8px rgba(13, 43, 82, .12);
}

.menu a.attivo,
.menu .voce-composta.attivo {
    background: var(--blu); border-color: var(--blu); color: var(--bianco);
}
.menu a.attivo:hover,
.menu .voce-composta.attivo:hover { background: var(--blu-chiaro); border-color: var(--blu-chiaro); }

/* Voce in risalto: "Diventa arbitro" */
.menu a.in-risalto {
    background: var(--oro); border-color: var(--oro); color: var(--blu-scuro);
    box-shadow: 0 3px 12px rgba(224, 169, 43, .38);
}
.menu a.in-risalto:hover {
    background: var(--oro-chiaro); border-color: var(--oro-chiaro); color: var(--blu-scuro);
    box-shadow: 0 5px 16px rgba(224, 169, 43, .5);
}
.menu a.in-risalto.attivo {
    background: var(--oro); border-color: var(--blu-scuro); color: var(--blu-scuro);
}

.apri-menu {
    display: none; flex-direction: column; gap: 5px; padding: 10px;
    background: none; border: 1px solid var(--bordo); border-radius: 8px; cursor: pointer;
}
.apri-menu span { width: 22px; height: 2px; background: var(--blu); display: block; }

/* ------------------------------------------------------- Menu a discesa */

.menu li { position: relative; }

/* "La Sezione": il testo porta alla panoramica, la freccia apre l'elenco */
.voce-composta { display: inline-flex; align-items: center; border-radius: 6px; }
.voce-composta > a { padding-right: 4px; }
.voce-composta:hover { background: var(--sfondo); }
.voce-composta.attivo { background: var(--blu); }
.voce-composta.attivo > a,
.voce-composta.attivo .apri-sottomenu { color: var(--bianco); }

.apri-sottomenu {
    display: flex; align-items: center;
    padding: 9px 11px 9px 4px; border: none; border-radius: 6px; background: none;
    color: var(--blu); font: inherit; font-weight: 600; font-size: .93rem; cursor: pointer;
}
.apri-sottomenu .freccia { font-size: .7em; transition: transform .15s; }
.apri-sottomenu[aria-expanded="true"] .freccia { transform: rotate(180deg); }

/* I selettori sono ancorati a .menu per prevalere su ".menu ul { display: flex }" */
.menu .sottomenu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
    min-width: 250px; padding: 8px; margin: 0; list-style: none; flex-direction: column;
    background: var(--bianco); border: 1px solid var(--bordo);
    border-radius: var(--raggio); box-shadow: var(--ombra-alta);
}
.menu .ha-sottomenu:hover .sottomenu,
.menu .ha-sottomenu:focus-within .sottomenu,
.menu .sottomenu.aperto { display: block; animation: tendina-giu .16s ease; }
.menu .sottomenu li { width: 100%; }
.menu .sottomenu a {
    display: block; padding: 9px 12px; border-radius: 6px;
    font-size: .9rem; font-weight: 500; white-space: nowrap;
}
.menu .sottomenu a:hover { background: var(--sfondo); }

@keyframes tendina-giu {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.esterno { font-size: .8em; opacity: .75; }

/* Voci visibili solo nel menu mobile (es. la panoramica dentro il sottomenu) */
.solo-mobile { display: none; }

/* --------------------------------------------------------------------- Hero */

/* Sfondo: Waterfront di Reggio Calabria. La velatura scura serve a tenere
   leggibile il testo bianco sopra la fotografia. */
.hero {
    background:
        linear-gradient(rgba(7, 26, 51, .62), rgba(13, 43, 82, .74)),
        url("../img/sfondo.jpg") center 55% / cover no-repeat,
        #0d2b52;
    color: var(--bianco);
    padding: 96px 0;
}
.hero h1 { color: var(--bianco); font-size: 2.6rem; max-width: 20ch; }
.hero p { font-size: 1.12rem; max-width: 60ch; color: rgba(255, 255, 255, .9); }
.hero-azioni { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero-etichetta {
    display: inline-block; background: rgba(224, 169, 43, .18); color: var(--oro-chiaro);
    border: 1px solid rgba(224, 169, 43, .45); border-radius: 999px;
    padding: 5px 14px; font-size: .8rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px;
}

/* ------------------------------------------------------------------ Bottoni */

.btn {
    display: inline-block; padding: 11px 22px; border-radius: 8px;
    font-weight: 600; text-decoration: none;
    background: var(--bianco); border: 1px solid var(--bordo); color: var(--testo);
    cursor: pointer; font-size: .96rem; font-family: inherit;
    transition: background .15s, color .15s;
}
.btn:hover { background: #f2f5fa; color: var(--blu); }
.btn-primario   { background: var(--oro); color: var(--blu-scuro); }
.btn-primario:hover { background: var(--oro-chiaro); color: var(--blu-scuro); }
.btn-secondario { background: transparent; color: var(--bianco); border-color: rgba(255, 255, 255, .6); }
.btn-secondario:hover { background: rgba(255, 255, 255, .12); color: var(--bianco); }
.btn-blu        { background: var(--blu); color: var(--bianco); }
.btn-blu:hover  { background: var(--blu-chiaro); color: var(--bianco); }

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

.sezione { padding: 60px 0; }
.sezione-chiara { background: var(--bianco); }

.titolo-sezione { text-align: center; margin-bottom: 38px; }
.titolo-sezione h2 { margin-bottom: 8px; }
.titolo-sezione p  { color: var(--testo-tenue); margin: 0; }
.titolo-sezione::after {
    content: ""; display: block; width: 58px; height: 3px;
    background: var(--oro); margin: 16px auto 0; border-radius: 2px;
}

.griglia { display: grid; gap: 24px; }
.griglia-2 { grid-template-columns: repeat(2, 1fr); }
.griglia-3 { grid-template-columns: repeat(3, 1fr); }
.griglia-4 { grid-template-columns: repeat(4, 1fr); }
.griglia-articolo { grid-template-columns: 2.4fr 1fr; align-items: start; }

/* -------------------------------------------------------------------- Card */

.card {
    background: var(--bianco); border: 1px solid var(--bordo);
    border-radius: var(--raggio); overflow: hidden;
    display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--ombra-alta); }
.card-corpo { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.card-img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--sfondo); }
.card h3 { margin-bottom: 8px; font-size: 1.1rem; }
.card h3 a { color: var(--blu); text-decoration: none; }
.card h3 a:hover { color: var(--blu-chiaro); }
.card p { color: var(--testo-tenue); font-size: .94rem; margin: 0 0 14px; }
.card .meta { margin-top: auto; }

.meta { font-size: .82rem; color: var(--testo-tenue); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.etichetta {
    display: inline-block; background: #eaf0f8; color: var(--blu);
    border-radius: 999px; padding: 3px 11px; font-size: .76rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
}

/* --------------------------------------------- Messaggio in evidenza (home) */

.sezione-messaggio { padding: 34px 0 0; }

.messaggio-evidenza {
    display: flex; gap: 20px; align-items: flex-start;
    background: linear-gradient(120deg, #fff8e8, #fdf1d5);
    border: 1px solid var(--oro); border-left: 6px solid var(--oro);
    border-radius: var(--raggio); padding: 26px 28px;
    box-shadow: var(--ombra);
}
.messaggio-evidenza .icona {
    background: var(--oro); color: var(--blu-scuro); margin: 0; flex: 0 0 54px;
}
.messaggio-evidenza h2 { margin: 4px 0 8px; font-size: 1.35rem; }
.messaggio-evidenza p  { margin: 0 0 10px; }
.messaggio-evidenza p:last-child { margin-bottom: 0; }

.messaggio-etichetta {
    display: inline-block; background: var(--blu); color: var(--bianco);
    border-radius: 999px; padding: 4px 13px; font-size: .72rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
}

@media (max-width: 560px) {
    .messaggio-evidenza { flex-direction: column; gap: 14px; padding: 22px 20px; }
}

/* -------------------------------------------------- Riquadri con icona */

.riquadro-icona {
    background: var(--bianco); border: 1px solid var(--bordo);
    border-radius: var(--raggio); padding: 26px 24px;
    transition: transform .16s, box-shadow .16s, border-color .16s;
}
.riquadro-icona:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombra-alta);
    border-color: #c9d7e8;
}
.riquadro-icona h3 { margin-bottom: 8px; }
.riquadro-icona p  { margin: 0; color: var(--testo-tenue); font-size: .95rem; }

.icona {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 14px;
    background: linear-gradient(140deg, #e8f0fa, #dae6f5);
    color: var(--blu); margin-bottom: 16px;
    transition: background .16s, color .16s;
}
.icona svg { width: 27px; height: 27px; }
.riquadro-icona:hover .icona {
    background: linear-gradient(140deg, var(--blu-chiaro), var(--blu));
    color: var(--oro-chiaro);
}

/* Elenco dei requisiti con icona a sinistra */
.elenco-icone { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.elenco-icone li { display: flex; gap: 14px; align-items: flex-start; }
.elenco-icone .icona { width: 42px; height: 42px; border-radius: 11px; margin: 0; flex: 0 0 42px; }
.elenco-icone .icona svg { width: 21px; height: 21px; }
.elenco-icone strong { display: block; color: var(--blu); margin-bottom: 2px; }
.elenco-icone span { color: var(--testo-tenue); font-size: .95rem; }

/* ------------------------------------------- Coppia di pulsanti coordinati */

.blocco-azioni { padding: 38px 34px; }
.blocco-azioni h2 { margin-top: 0; }
.blocco-azioni p  { margin: 0 0 26px; color: rgba(255, 255, 255, .9); }

.azioni-griglia { display: grid; grid-template-columns: 1.2fr .8fr; gap: 38px; align-items: center; }
.azioni-griglia.senza-carosello { grid-template-columns: 1fr; text-align: center; }
.azioni-griglia.senza-carosello p { max-width: 62ch; margin-left: auto; margin-right: auto; }
.azioni-griglia.senza-carosello .coppia-azioni { justify-content: center; }

.coppia-azioni { display: flex; gap: 16px; flex-wrap: wrap; }

/* ------------------------------------------------- Carosello di immagini */

.carosello { max-width: 330px; margin: 0 auto; width: 100%; }

.carosello-vetrina {
    position: relative; aspect-ratio: 4 / 5; overflow: hidden;
    border-radius: 12px; background: rgba(255, 255, 255, .08);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
.carosello-vetrina img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1s ease;
}
.carosello-vetrina img.attiva { opacity: 1; }

.carosello-punti { display: flex; gap: 9px; justify-content: center; margin-top: 15px; }
.carosello-punti button {
    width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .38); cursor: pointer;
    transition: background .2s, transform .2s;
}
.carosello-punti button:hover { background: rgba(255, 255, 255, .7); }
.carosello-punti button.attivo { background: var(--oro); transform: scale(1.3); }

@media (max-width: 820px) {
    .azioni-griglia { grid-template-columns: 1fr; text-align: center; }
    .azioni-griglia .coppia-azioni { justify-content: center; }
    .azioni-griglia p { max-width: 60ch; margin-left: auto; margin-right: auto; }
    .carosello { max-width: 280px; order: -1; margin-bottom: 6px; }
}

/* Chi preferisce meno animazioni vede solo la prima immagine, senza dissolvenze */
@media (prefers-reduced-motion: reduce) {
    .carosello-vetrina img { transition: none; }
}

/* I due pulsanti condividono forma, dimensioni e allineamento dell'icona:
   cambia solo il colore, cosi' si leggono come una coppia. */
.btn-azione {
    display: inline-flex; align-items: center; gap: 11px;
    min-width: 260px; justify-content: center;
    padding: 15px 28px; border-radius: 11px;
    font-size: 1rem; font-weight: 700; text-decoration: none;
    border: 2px solid transparent; cursor: pointer;
    transition: transform .16s, background .16s, color .16s, box-shadow .16s;
}
.btn-azione svg { width: 21px; height: 21px; flex: 0 0 21px; }
.btn-azione:hover { transform: translateY(-2px); }

.btn-azione-oro {
    background: var(--oro); color: var(--blu-scuro); border-color: var(--oro);
    box-shadow: 0 6px 18px rgba(224, 169, 43, .3);
}
.btn-azione-oro:hover { background: var(--oro-chiaro); border-color: var(--oro-chiaro); color: var(--blu-scuro); }

.btn-azione-chiaro { background: transparent; color: var(--bianco); border-color: rgba(255, 255, 255, .55); }
.btn-azione-chiaro:hover { background: rgba(255, 255, 255, .14); color: var(--bianco); border-color: var(--bianco); }

@media (max-width: 560px) {
    .btn-azione { width: 100%; min-width: 0; }
}

/* ------------------------------------------------ Percorso a tappe (timeline) */

.percorso {
    list-style: none; margin: 0 auto; padding: 0; max-width: 780px; counter-reset: tappa;
}
.percorso li { position: relative; padding: 0 0 40px 86px; }
.percorso li:last-child { padding-bottom: 0; }

/* Linea di collegamento fra un pallino e il successivo */
.percorso li::before {
    content: ""; position: absolute; left: 27px; top: 62px; bottom: 6px;
    width: 2px; background: var(--bordo);
}
.percorso li:last-child::before { display: none; }

.percorso-numero {
    position: absolute; left: 0; top: 0;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--blu); color: var(--bianco);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; font-weight: 800; line-height: 1;
    box-shadow: 0 4px 12px rgba(13, 43, 82, .22);
}
.percorso li:hover .percorso-numero { background: var(--blu-chiaro); }

.percorso h3 { margin: 12px 0 8px; font-size: 1.22rem; }
.percorso p  { margin: 0; color: var(--testo-tenue); }

@media (max-width: 560px) {
    .percorso li { padding-left: 64px; padding-bottom: 32px; }
    .percorso li::before { left: 21px; top: 50px; }
    .percorso-numero { width: 44px; height: 44px; font-size: 1.1rem; }
    .percorso h3 { margin-top: 6px; font-size: 1.1rem; }
}

/* --------------------------------------------------------- Blocchi generici */

.riquadro {
    background: var(--bianco); border: 1px solid var(--bordo);
    border-radius: var(--raggio); padding: 26px;
}
.riquadro-evidenza {
    background: var(--blu); color: var(--bianco); border: none;
}
.riquadro-evidenza h2, .riquadro-evidenza h3 { color: var(--bianco); }

.numero-grande { font-size: 2.3rem; font-weight: 800; color: var(--oro); line-height: 1; }

.elenco-spunte { list-style: none; padding: 0; margin: 0; }
.elenco-spunte li { padding-left: 30px; position: relative; margin-bottom: 12px; }
.elenco-spunte li::before {
    content: ""; position: absolute; left: 0; top: .45em;
    width: 9px; height: 9px; border-radius: 50%; background: var(--oro);
    box-shadow: 0 0 0 4px rgba(224, 169, 43, .22);
}

/* ------------------------------------------------------------ Testata pagina */

.testata-pagina {
    background: linear-gradient(120deg, var(--blu-scuro), var(--blu-chiaro));
    color: var(--bianco); padding: 46px 0;
}
.testata-pagina h1 { color: var(--bianco); margin-bottom: 6px; }
.testata-pagina p  { margin: 0; color: rgba(255, 255, 255, .85); }
.briciole { font-size: .84rem; margin-bottom: 10px; color: rgba(255, 255, 255, .7); }
.briciole a { color: var(--oro-chiaro); text-decoration: none; }

/* --------------------------------------------------- Fascia di copertina */

/* Immagine agganciata sotto la testata blu: la sovrappone leggermente,
   cosi' l'intestazione e il contenuto restano legati senza titoli di mezzo. */
.foto-copertina {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    object-position: center 62%;
    border-radius: var(--raggio);
    box-shadow: var(--ombra-alta);
    margin-top: -38px;
    position: relative;
    z-index: 2;
}

/* Per le foto in cui il soggetto sta in alto (relatore, schermo, palco) */
.foto-copertina.foto-alta { object-position: center 22%; }

@media (max-width: 820px) {
    .foto-copertina { aspect-ratio: 4 / 3; margin-top: -24px; }
}

/* ------------------------------------------------------------------ Persone */

.persona { text-align: center; }
.persona img,
.persona .iniziali {
    width: 108px; height: 108px; border-radius: 50%; object-fit: cover;
    margin: 0 auto 14px; border: 3px solid var(--bianco); box-shadow: var(--ombra);
}
.persona .iniziali {
    display: flex; align-items: center; justify-content: center;
    background: var(--blu); color: var(--oro-chiaro); font-size: 1.6rem; font-weight: 700;
}
.persona strong { display: block; color: var(--blu); }
.persona span   { color: var(--testo-tenue); font-size: .9rem; }
.persona a      { font-size: .86rem; }

/* -------------------------------------------------------- Quote associative */

.avviso-scadenza { text-align: center; padding: 34px 30px; }
.avviso-scadenza h2 { margin: 0 0 8px; font-size: 1.9rem; }
.avviso-scadenza p  { color: rgba(255, 255, 255, .9); margin: 0; }

.scadenze-doppie {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 26px;
}
.scadenze-doppie .scadenza {
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px; padding: 14px 22px; min-width: 220px;
}
.scadenze-doppie .scadenza.attiva { border-color: var(--oro); background: rgba(224, 169, 43, .18); }
.scadenze-doppie strong { display: block; font-size: 1.15rem; color: var(--bianco); }
.scadenze-doppie span   { font-size: .86rem; color: rgba(255, 255, 255, .82); }

.importo-grande {
    font-size: 2.4rem; font-weight: 800; color: var(--oro);
    line-height: 1; margin: 0 0 14px;
}

.tabella-quote { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabella-quote td { padding: 12px 4px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.tabella-quote tr:last-child td { border-bottom: none; }
.tabella-quote .importo { text-align: right; white-space: nowrap; font-weight: 800; color: var(--blu); }

.riquadro-iban { max-width: 760px; margin: 0 auto; }
.iban-blocco {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--sfondo); border: 1px dashed var(--bordo);
    border-radius: 10px; padding: 18px 20px;
}
.iban-etichetta {
    font-size: .74rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--testo-tenue);
}
.iban {
    font-family: "Consolas", "Courier New", monospace; font-size: 1.12rem;
    font-weight: 700; color: var(--blu); letter-spacing: .04em; flex: 1;
    word-break: break-all;
}
.copia-iban { flex: 0 0 auto; }

@media (max-width: 560px) {
    .avviso-scadenza h2 { font-size: 1.5rem; }
    .scadenze-doppie .scadenza { min-width: 0; width: 100%; }
    .iban { font-size: .98rem; }
    .copia-iban { width: 100%; }
}

/* ------------------------------------------------------- Riunioni tecniche */

.prossima-riunione {
    display: grid; grid-template-columns: .85fr 1.15fr; gap: 0;
    background: var(--bianco); border: 1px solid var(--bordo);
    border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra-alta);
}
.prossima-riunione.senza-foto { grid-template-columns: 1fr; }

.prossima-foto { position: relative; min-height: 300px; background: var(--blu); }
.prossima-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.prossima-corpo { padding: 34px 34px 30px; }
.prossima-etichetta {
    display: inline-block; background: var(--oro); color: var(--blu-scuro);
    border-radius: 999px; padding: 5px 15px; font-size: .76rem; font-weight: 800;
    letter-spacing: .09em; text-transform: uppercase; margin-bottom: 14px;
}
.prossima-corpo h2 { margin-bottom: 6px; }
/* La maiuscola iniziale del giorno la mette il PHP: qui niente capitalize,
   altrimenti diventerebbero maiuscoli anche "settembre" e "ore". */
.prossima-quando {
    font-size: 1.12rem; font-weight: 700; color: var(--blu-chiaro); margin: 0 0 22px;
}

.prossima-dettagli { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.prossima-dettagli li { display: flex; gap: 13px; align-items: flex-start; }
.prossima-dettagli .icona { width: 40px; height: 40px; border-radius: 10px; margin: 0; flex: 0 0 40px; }
.prossima-dettagli .icona svg { width: 20px; height: 20px; }
.prossima-dettagli strong { display: block; color: var(--blu); }
.prossima-dettagli span  { color: var(--testo-tenue); font-size: .93rem; }
.prossima-note { margin: 22px 0 0; color: var(--testo-tenue); font-size: .94rem; }

/* Tabella del calendario */
.tabella-riunioni { width: 100%; border-collapse: collapse; background: var(--bianco); font-size: .94rem; }
.tabella-riunioni th {
    background: #eef2f7; color: var(--blu-chiaro); font-weight: 600;
    padding: 15px 16px; text-align: center; border-bottom: 1px solid var(--bordo);
}
.tabella-riunioni td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--bordo); color: var(--blu-chiaro); }
.tabella-riunioni tbody tr:nth-child(odd) td { background: #f6f8fb; }
.tabella-riunioni .col-relatore { text-align: center; color: var(--blu-chiaro); }
.tabella-riunioni .col-relatore strong { color: var(--blu); }
.tabella-riunioni .col-data, .tabella-riunioni .col-ora { white-space: nowrap; }

.riunioni-svolte { margin-top: 30px; }
.riunioni-svolte summary {
    cursor: pointer; font-weight: 700; color: var(--blu);
    padding: 13px 16px; background: var(--bianco);
    border: 1px solid var(--bordo); border-radius: 8px;
}
.riunioni-svolte summary:hover { background: var(--sfondo); }
.riunioni-svolte[open] summary { margin-bottom: 16px; }

@media (max-width: 820px) {
    .prossima-riunione { grid-template-columns: 1fr; }
    .prossima-foto { min-height: 220px; }
    .prossima-corpo { padding: 26px 22px; }
    .tabella-riunioni { font-size: .88rem; }
    .tabella-riunioni th, .tabella-riunioni td { padding: 11px 10px; }
}

/* ---------------------------------------------------------------- Documenti */

.doc {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--bianco); border: 1px solid var(--bordo);
    border-radius: var(--raggio); padding: 18px;
}
.doc-icona {
    flex: 0 0 46px; height: 56px; border-radius: 6px;
    background: #fdeceb; color: #b3261e; font-weight: 800; font-size: .72rem;
    display: flex; align-items: center; justify-content: center;
}
.doc-corpo { flex: 1; min-width: 0; }
.doc-corpo h3 { margin-bottom: 4px; font-size: 1.02rem; }
.doc-corpo p  { margin: 0 0 10px; color: var(--testo-tenue); font-size: .9rem; }

/* -------------------------------------------------------------- Calendario */

.calendario-griglia {
    display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: start;
}

.calendario-mese, .calendario-dettaglio {
    background: var(--bianco); border: 1px solid var(--bordo);
    border-radius: var(--raggio); padding: 20px;
}

.calendario-barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 14px;
}
.calendario-barra .cal-titolo {
    font-size: 1.15rem; color: var(--blu); text-transform: capitalize; font-weight: 700;
}
.cal-nav {
    width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--bordo);
    background: var(--bianco); color: var(--blu); font-size: 1.3rem; line-height: 1;
    cursor: pointer; font-family: inherit;
}
.cal-nav:hover { background: var(--sfondo); }

.cal-intestazione, .cal-giorni { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-intestazione {
    margin-bottom: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    color: var(--testo-tenue); text-align: center;
}

.cal-vuoto { aspect-ratio: 1; }
.cal-giorno {
    aspect-ratio: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; border: 1px solid transparent; border-radius: 8px;
    background: var(--sfondo); color: var(--testo); cursor: pointer;
    font-family: inherit; font-size: .92rem; padding: 0;
}
.cal-giorno:hover { border-color: var(--blu-chiaro); }
.cal-giorno.con-eventi { background: #eaf0f8; font-weight: 700; }
.cal-giorno.oggi { border-color: var(--oro); box-shadow: inset 0 0 0 1px var(--oro); }
.cal-giorno.scelto { background: var(--blu); color: var(--bianco); border-color: var(--blu); }
.cal-giorno.scelto .cal-numero { color: var(--bianco); }

.cal-punti { display: flex; gap: 3px; height: 7px; align-items: center; }
.cal-punto { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.cal-punto.tipo-blu   { background: var(--blu-chiaro); }
.cal-punto.tipo-verde { background: #1e7a4b; }
.cal-punto.tipo-oro   { background: var(--oro); }
.cal-punto.tipo-viola { background: #6b4ea8; }
.cal-punto.tipo-rosso { background: #b3261e; }

.cal-legenda {
    display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 0;
    font-size: .82rem; color: var(--testo-tenue); text-transform: capitalize;
}
.cal-voce-legenda { display: inline-flex; align-items: center; gap: 6px; }

.cal-dettaglio-titolo { text-transform: capitalize; margin-bottom: 14px; }
.cal-nessuno { color: var(--testo-tenue); font-size: .93rem; margin: 0; }

.cal-evento {
    border-left: 4px solid var(--blu-chiaro); background: var(--sfondo);
    border-radius: 8px; padding: 13px 15px; margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 3px;
}
.cal-evento.tipo-verde { border-left-color: #1e7a4b; }
.cal-evento.tipo-oro   { border-left-color: var(--oro); }
.cal-evento.tipo-viola { border-left-color: #6b4ea8; }
.cal-evento.tipo-rosso { border-left-color: #b3261e; }
.cal-evento strong { color: var(--blu); font-size: 1.02rem; }
.cal-evento .cal-ora { font-weight: 700; font-size: .9rem; }
.cal-evento .cal-luogo { font-size: .9rem; }
.cal-evento .cal-indirizzo,
.cal-evento p { font-size: .87rem; color: var(--testo-tenue); margin: 0; }
.cal-mappa { font-size: .87rem; font-weight: 600; margin-top: 4px; }

/* Foto dell'appuntamento nel dettaglio del giorno */
.cal-foto {
    display: block; border-radius: 8px; overflow: hidden;
    margin-bottom: 10px; aspect-ratio: 16 / 9; background: var(--bordo);
}
.cal-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 820px) {
    .calendario-griglia { grid-template-columns: 1fr; }
    .cal-giorno { font-size: .85rem; }
}

/* -------------------------------------------------------------------- Form */

.form-campo { margin-bottom: 18px; }
.form-campo label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92rem; }
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="date"],
input[type="number"], select, textarea {
    width: 100%; padding: 11px 13px; border: 1px solid var(--bordo);
    border-radius: 8px; font: inherit; font-size: .96rem; background: var(--bianco); color: var(--testo);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--blu-chiaro); outline-offset: 1px; border-color: var(--blu-chiaro);
}
textarea { min-height: 150px; resize: vertical; }
.aiuto { font-size: .83rem; color: var(--testo-tenue); margin-top: 4px; }
.onorario { position: absolute; left: -9999px; }

/* Checkbox di consenso (privacy, ecc.): l'intera etichetta e' toccabile,
   non solo la casella, che su mobile e' spesso troppo piccola per essere
   premuta con precisione col dito. */
.consenso {
    display: flex; align-items: flex-start; gap: 12px;
    font-weight: 400; cursor: pointer;
    padding: 12px 14px; border: 1px solid var(--bordo); border-radius: 8px;
    background: var(--bianco); transition: border-color .15s, background .15s;
}
.consenso:has(input:checked) { border-color: var(--blu-chiaro); background: #f4f8fd; }
.consenso input[type="checkbox"] {
    flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0;
    accent-color: var(--blu); cursor: pointer;
}
.consenso span { font-size: .92rem; line-height: 1.45; }

@media (max-width: 560px) {
    .consenso { gap: 14px; padding: 14px 16px; }
    .consenso input[type="checkbox"] { width: 26px; height: 26px; }
    .consenso span { font-size: .95rem; }
}

/* ------------------------------------------------------------------ Avvisi */

.avviso {
    border-radius: 8px; padding: 13px 16px; margin: 18px 0;
    border-left: 4px solid; font-size: .94rem;
}
.avviso-success { background: #e8f5ee; border-color: var(--successo); color: #14532d; }
.avviso-error   { background: #fdecea; border-color: var(--errore);   color: #7f1d1d; }
.avviso-warning { background: #fff6e5; border-color: var(--avviso);   color: #7c4a03; }
.avviso-info    { background: #e9f0fa; border-color: var(--blu-chiaro); color: #123a6b; }

/* ------------------------------------------------------------------ Articolo */

.articolo { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 34px; }
.articolo img { border-radius: 8px; margin-bottom: 22px; }
.articolo p { margin: 0 0 1.1em; }
.articolo .sommario { font-size: 1.08rem; color: var(--testo-tenue); font-weight: 500; }

.impaginazione { display: flex; gap: 8px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.impaginazione a, .impaginazione span {
    padding: 9px 15px; border-radius: 8px; border: 1px solid var(--bordo);
    background: var(--bianco); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.impaginazione .corrente { background: var(--blu); color: var(--bianco); border-color: var(--blu); }

.vuoto { text-align: center; padding: 50px 20px; color: var(--testo-tenue); }

/* ------------------------------------------------------------ Banner cookie */

/* Finche' il banner e' visibile si riserva spazio in fondo alla pagina: senza,
   coprirebbe l'ultima parte del contenuto, per esempio il pulsante di invio di
   un modulo, rendendolo impossibile da premere. */
body.con-banner { padding-bottom: 230px; }

@media (min-width: 701px) {
    body.con-banner { padding-bottom: 170px; }
}

.banner-cookie {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
    max-width: 1000px; margin: 0 auto;
    display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
    background: var(--bianco); color: var(--testo);
    border: 1px solid var(--bordo); border-top: 4px solid var(--oro);
    border-radius: var(--raggio); padding: 20px 24px;
    box-shadow: 0 12px 40px rgba(7, 26, 51, .28);
}
.banner-cookie-testo { flex: 1 1 380px; }
/* Solo il titolo va a blocco: i "strong" dentro il paragrafo devono
   restare in linea, altrimenti spezzano il testo a ogni parola evidenziata. */
.banner-cookie-testo > strong {
    display: block; color: var(--blu); margin-bottom: 6px; font-size: 1.02rem;
}
.banner-cookie-testo p strong { color: var(--testo); }
.banner-cookie-testo p { margin: 0; font-size: .88rem; color: var(--testo-tenue); line-height: 1.55; }

.banner-cookie-azioni {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.banner-cookie-azioni form { display: flex; gap: 12px; flex-wrap: wrap; }
.banner-cookie-link { font-size: .82rem; color: var(--testo-tenue); }

/* Elenco dei cookie, aperto solo su richiesta per non allungare il banner */
.banner-cookie-dettagli { margin-top: 10px; }
.banner-cookie-dettagli summary {
    cursor: pointer; font-size: .84rem; font-weight: 700; color: var(--blu);
}
.banner-cookie-dettagli ul {
    list-style: none; margin: 12px 0 0; padding: 0;
    display: grid; gap: 10px;
}
.banner-cookie-dettagli li {
    background: var(--sfondo); border-radius: 8px; padding: 10px 12px; font-size: .82rem;
}
.banner-cookie-dettagli code {
    display: inline-block; font-weight: 700; color: var(--blu); margin-bottom: 3px;
}
.banner-cookie-dettagli span { display: block; color: var(--testo-tenue); }
.banner-cookie-dettagli em {
    display: block; margin-top: 4px; font-style: normal; color: var(--blu-chiaro); font-weight: 600;
}
.banner-cookie-nota { font-size: .8rem; margin: 12px 0 0; }

/* I due pulsanti hanno la stessa dimensione e lo stesso peso visivo:
   rifiutare dev'essere facile quanto accettare. */
.btn-cookie {
    min-width: 190px; padding: 12px 20px; border-radius: 8px; cursor: pointer;
    font: inherit; font-weight: 700; font-size: .92rem;
    background: var(--bianco); color: var(--blu); border: 2px solid var(--blu);
    transition: background .15s, color .15s;
}
.btn-cookie:hover { background: var(--blu); color: var(--bianco); }

@media (max-width: 700px) {
    .banner-cookie { left: 10px; right: 10px; bottom: 10px; padding: 18px; gap: 16px; }
    .banner-cookie-azioni, .banner-cookie-azioni form { width: 100%; }
    .btn-cookie { flex: 1 1 100%; min-width: 0; }
}

/* Mappa statica della sede: immagine nostra, nessuna richiesta esterna */
.mappa-sede {
    border: 1px solid var(--bordo); border-radius: var(--raggio);
    overflow: hidden; box-shadow: var(--ombra); line-height: 0;
}
.mappa-sede img { width: 100%; height: auto; display: block; }

/* Segnaposto al posto dei contenuti esterni non ancora autorizzati */
.blocco-esterno {
    background: var(--sfondo); border: 1px dashed var(--bordo);
    border-radius: var(--raggio); padding: 30px 26px; text-align: center;
}
.blocco-esterno h3 { margin-bottom: 8px; font-size: 1.05rem; }
.blocco-esterno p { color: var(--testo-tenue); font-size: .9rem; margin: 0 auto 16px; max-width: 46ch; }

/* -------------------------------------------------------------------- Piede */

.pie { background: var(--blu-scuro); color: rgba(255, 255, 255, .78); font-size: .93rem; }

/* ------------------------------------------------------ Instagram nel piede */

.pie-instagram { border-bottom: 1px solid rgba(255, 255, 255, .12); padding: 34px 0; }

.instagram-intestazione {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.instagram-profilo {
    display: inline-flex; align-items: center; gap: 14px;
    color: var(--bianco); text-decoration: none;
}
.instagram-profilo svg {
    width: 40px; height: 40px; flex: 0 0 40px; padding: 8px;
    border-radius: 12px; box-sizing: content-box;
    background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888 75%, #8134af);
    color: var(--bianco);
}
.instagram-profilo strong { display: block; color: var(--bianco); font-size: 1.05rem; }
.instagram-profilo em { font-style: normal; color: var(--oro-chiaro); font-size: .9rem; }
.instagram-profilo:hover strong { text-decoration: underline; }

@media (max-width: 820px) {
    .instagram-intestazione { justify-content: center; text-align: center; }
}
.pie h3 { color: var(--bianco); font-size: 1rem; margin-bottom: 14px; }
.pie a { color: var(--oro-chiaro); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
/* Colonna unica con i recapiti della Sezione, centrata */
.pie-griglia {
    padding: 46px 20px 40px; text-align: center;
    display: grid; gap: 34px; justify-items: center; align-items: start;
}
.pie-griglia img { margin-left: auto; margin-right: auto; }
.pie-griglia p { margin: 6px 0; }

/* Da 700 px in su le due colonne stanno affiancate; sotto restano in colonna */
@media (min-width: 700px) {
    .pie-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pie-link ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pie-link a { display: inline-block; padding: 2px 0; }
.pie-elenco { list-style: none; padding: 0; margin: 0; }
.pie-elenco li { margin-bottom: 8px; }
.pie-basso { border-top: 1px solid rgba(255, 255, 255, .12); padding: 16px 0; font-size: .85rem; }
.pie-basso .contenitore { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.pie-basso p { margin: 0; }

/* ------------------------------------------------------------------ Mobile */

@media (max-width: 980px) {
    .griglia-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Larghezze intermedie: il menu esteso e' ancora visibile ma lo spazio e' poco.
   Il testo accanto al logo viene nascosto perche' il logo stesso riporta gia'
   "Associazione Italiana Arbitri - Sezione di Reggio Calabria". */
@media (min-width: 821px) and (max-width: 1120px) {
    .logo-testo { display: none; }
    .menu a { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 820px) {
    .apri-menu { display: flex; }
    .menu {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        background: var(--bianco); border-top: 1px solid var(--bordo); box-shadow: var(--ombra-alta);
        /* Se le voci superano lo schermo, il menu scorre al suo interno */
        max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .menu.aperto { display: block; animation: menu-giu .2s ease; }
    .menu ul { flex-direction: column; padding: 10px; gap: 2px; }
    .menu a { padding: 13px 14px; }

    /* Su mobile il sottomenu e' un elenco rientrato sempre presente ma alto
       zero: cosi' apertura e chiusura scorrono in modo fluido, cosa impossibile
       passando di colpo da display none a block.

       L'altezza da raggiungere non e' scritta qui: la misura il JavaScript sul
       contenuto reale e la applica come stile in linea. Serve perche' le regole
       :hover e :focus-within qui sotto hanno specificita' maggiore di .aperto e
       vincerebbero su qualunque altezza dichiarata in questo foglio - e
       :focus-within si attiva proprio quando si tocca la voce, che riceve il
       fuoco. Uno stile in linea invece prevale sempre. */
    .voce-composta { width: 100%; justify-content: space-between; }
    .voce-composta > a { flex: 1; }
    .apri-sottomenu { padding: 13px 20px; }
    .menu .sottomenu,
    .menu .ha-sottomenu:hover .sottomenu,
    .menu .ha-sottomenu:focus-within .sottomenu,
    .menu .sottomenu.aperto {
        display: block; position: static; box-shadow: none; border: none;
        min-width: 0; padding: 0 0 0 14px; margin: 0;
        border-left: 2px solid var(--bordo); border-radius: 0;
        overflow: hidden; max-height: 0; animation: none;
        transition: max-height .28s ease, margin .28s ease;
    }
    .solo-mobile { display: block; }
    .intestazione-int { position: relative; }
    .griglia-2, .griglia-3, .griglia-articolo { grid-template-columns: 1fr; }
    .doc { flex-wrap: wrap; }
    .doc .btn { width: 100%; text-align: center; }
    .hero { padding: 54px 0; }
    .hero h1 { font-size: 1.95rem; }
    .barra-superiore-int { justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
    body { font-size: 16px; }
    .griglia-4 { grid-template-columns: 1fr; }
    .articolo { padding: 22px; }
    .logo-testo strong { font-size: .92rem; }
}

@keyframes menu-giu {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}

/* Chi ha chiesto al sistema di ridurre le animazioni non ne vede nessuna */
@media (prefers-reduced-motion: reduce) {
    .menu.aperto,
    .menu .sottomenu,
    .menu .sottomenu.aperto,
    .menu .ha-sottomenu:hover .sottomenu,
    .menu .ha-sottomenu:focus-within .sottomenu { animation: none; transition: none; }
    .apri-sottomenu .freccia { transition: none; }
}

@media print {
    .intestazione, .pie, .apri-menu { display: none; }
    body { background: #fff; }
}