/*
 * Mini-sito di Natale in città 2026 — tema «Notte» dell'area pubblica.
 * Palette, tipografia e componenti da claude/DESIGN.md (§§ 2–5): override di Bootstrap 5.
 */

[data-bs-theme="notte"] {
    --clr-bg: #24090F;
    --clr-surface: #30151A;
    --clr-divider: #5A403E;
    --clr-border: #3D2428;
    --clr-oro: #C9A24B;
    --clr-oro-chiaro: #D9B86A;
    --clr-bordeaux: #6E1423;
    --clr-bordeaux-chiaro: #7E2E39;
    --clr-titolo: #F2E8D8;
    --clr-corpo: #BDA595;
    --clr-secondario: #A08A84;
    --clr-spento: #876E66;

    --bs-body-bg: var(--clr-bg);
    --bs-body-color: var(--clr-corpo);
    --bs-body-color-rgb: 189, 165, 149;
    --bs-body-font-family: 'Public Sans', system-ui, sans-serif;
    --bs-emphasis-color: var(--clr-titolo);
    --bs-heading-color: var(--clr-titolo);
    --bs-secondary-color: var(--clr-secondario);
    --bs-border-color: var(--clr-border);
    --bs-primary: var(--clr-oro);
    --bs-primary-rgb: 201, 162, 75;
    --bs-link-color: var(--clr-oro);
    --bs-link-color-rgb: 201, 162, 75;
    --bs-link-hover-color: var(--clr-oro-chiaro);
    --bs-link-hover-color-rgb: 217, 184, 106;
    --bs-focus-ring-color: rgba(201, 162, 75, 0.35);
    color-scheme: dark;
}

body {
    background: var(--clr-bg);
    color: var(--clr-corpo);
    line-height: 1.5;
}

h1, h2, .titolo-evento {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--clr-titolo);
}

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--clr-oro);
    outline-offset: 2px;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 1.1em;
    vertical-align: middle;
    line-height: 1;
}

.contenitore {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

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

.testata {
    padding: 2.5rem 0 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    border-bottom: 1px solid var(--clr-divider);
}

.occhiello {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--clr-oro);
    margin: 0 0 0.5rem;
}

.occhiello a { color: inherit; text-decoration: none; }
.occhiello a:hover { color: var(--clr-oro-chiaro); }

.testata h1 {
    font-size: 2.75rem;
    font-weight: 400;
    margin: 0;
}

.periodo {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.4rem;
    color: var(--clr-oro);
    margin: 0;
}

.avviso {
    display: flex;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--clr-secondario);
    margin: 1rem 0 0;
}

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

.sezione { padding: 2.5rem 0 0; }

.sezione h2 {
    font-size: 1.75rem;
    font-weight: 400;
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sezione h2 .material-symbols-outlined { color: var(--clr-oro); font-size: 1.5rem; }

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

.cal-settimana, .calendario {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 0.5rem;
}

.cal-settimana {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-secondario);
    padding-bottom: 0.5rem;
}

.calendario { row-gap: 0.5rem; }

.cal-giorno {
    position: relative;
    border-top: 1px solid var(--clr-divider);
    min-height: 3.5rem;
    transition: background-color 0.15s ease;
}

.cal-giorno.fuori { opacity: 0.35; border-top-style: dashed; }
.cal-giorno.con-eventi { border-top: 2px solid var(--clr-oro); }
.cal-giorno.da-confermare { border-top: 2px solid var(--clr-divider); }
.cal-giorno.evidenza { border-top-color: var(--clr-bordeaux-chiaro); background: var(--clr-bordeaux); }
.cal-giorno.con-eventi:hover { background: var(--clr-surface); }
.cal-giorno.evidenza:hover { background: var(--clr-bordeaux-chiaro); }

.cal-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.4rem 0.35rem;
    background: none;
    border: 0;
    color: var(--clr-secondario);
    text-align: left;
    text-decoration: none;
    font: inherit;
}

a.cal-data, button.cal-data { color: var(--clr-titolo); cursor: pointer; }

.cal-num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    line-height: 1.2;
}

.con-eventi .cal-num { color: var(--clr-oro); }
.evidenza .cal-num { color: var(--clr-oro-chiaro); }

.cal-mese {
    font-weight: 600;
    font-size: 0.75rem;
    margin-left: 0.25rem;
    text-transform: lowercase;
    color: var(--clr-secondario);
}

.cal-giorno.oggi .cal-num {
    display: inline-block;
    padding: 0 0.3rem;
    margin-left: -0.3rem;
    border: 1px solid var(--clr-oro);
    border-radius: 0.25rem;
}

.cal-punti { display: flex; gap: 3px; flex-wrap: wrap; }
.cal-punti i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--clr-oro);
}
.cal-punti i.evidenza { background: var(--clr-titolo); }
.cal-punti i.da-confermare, .legenda .campione.da-confermare {
    background: none;
    border: 1px solid var(--clr-secondario);
}

.cal-eventi {
    list-style: none;
    margin: 0;
    padding: 0 0.35rem 0.5rem;
}

.cal-eventi li + li { margin-top: 0.35rem; }

.cal-eventi a {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.25;
    color: var(--clr-titolo);
    text-decoration: none;
}

.cal-eventi a:hover { color: var(--clr-oro-chiaro); text-decoration: underline; }

.cal-eventi .da-confermare {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.85rem;
    line-height: 1.25;
    color: var(--clr-secondario);
    cursor: default;
}

.legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--clr-secondario);
}

.legenda li { display: flex; align-items: center; gap: 0.5rem; }
.legenda .campione { width: 1.25rem; height: 0.75rem; border-top: 2px solid var(--clr-oro); }
.legenda .campione.evidenza { background: var(--clr-bordeaux); border-top-color: var(--clr-bordeaux-chiaro); }
.legenda .campione.oggi { border: 1px solid var(--clr-oro); border-radius: 0.25rem; }
.legenda .campione.da-confermare { width: 0.6rem; height: 0.6rem; border-radius: 50%; }

/* Dropdown dei giorni con più eventi */
.dropdown-menu {
    --bs-dropdown-bg: var(--clr-surface);
    --bs-dropdown-color: var(--clr-titolo);
    --bs-dropdown-border-color: var(--clr-border);
    --bs-dropdown-link-color: var(--clr-titolo);
    --bs-dropdown-link-hover-color: var(--clr-titolo);
    --bs-dropdown-link-hover-bg: var(--clr-border);
    --bs-dropdown-link-active-color: var(--clr-bg);
    --bs-dropdown-link-active-bg: var(--clr-oro);
    --bs-dropdown-header-color: var(--clr-oro);
    --bs-dropdown-border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(36, 9, 15, 0.35);
    min-width: 14rem;
}

.dropdown-header {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dropdown-item {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    white-space: normal;
}

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

.griglia-eventi {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.card-evento {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1rem 1.5rem;
    border-top: 2px solid var(--clr-oro);
    color: var(--clr-corpo);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.card-evento:hover { background: var(--clr-surface); color: var(--clr-corpo); }
.card-evento.in-evidenza { background: var(--clr-bordeaux); }
.card-evento.in-evidenza:hover { background: var(--clr-bordeaux-chiaro); }

.card-evento__data {
    font-weight: 700;
    color: var(--clr-oro);
}

.in-evidenza .card-evento__data { color: var(--clr-oro-chiaro); }

.card-evento .titolo-evento {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.card-evento__luogo {
    display: flex;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--clr-secondario);
}

.in-evidenza .card-evento__luogo { color: var(--clr-corpo); }

/* --- Giorno per giorno ------------------------------------------------------------------- */

.elenco-mese {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--clr-oro);
    margin: 2rem 0 0;
}

.elenco-mese + .giorno { border-top-color: var(--clr-oro); }

/* Agenda: la data in una colonna a sinistra, gli eventi in righe a destra. */
.giorno {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--clr-divider);
    scroll-margin-top: 1rem;
}

.giorno__data {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-top: 0.25rem;
    line-height: 1.15;
}

.giorno__sett {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-secondario);
}

.giorno__num {
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--clr-oro);
}

.giorno__mese { font-size: 0.85rem; color: var(--clr-secondario); }

.giorno__eventi {
    list-style: none;
    margin: 0;
    padding: 0;
}

.giorno__eventi li + li { border-top: 1px solid var(--clr-border); }

.riga-evento {
    display: grid;
    gap: 0.2rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.375rem;
    color: var(--clr-corpo);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.riga-evento:hover { background: var(--clr-surface); color: var(--clr-corpo); }
.riga-evento.in-evidenza { background: var(--clr-bordeaux); }
.riga-evento.in-evidenza:hover { background: var(--clr-bordeaux-chiaro); }

.riga-evento__testa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
}

.riga-evento .titolo-evento {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
}

.riga-evento__periodo {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--clr-oro);
    white-space: nowrap;
}

.riga-evento__luogo {
    display: flex;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--clr-secondario);
}

.in-evidenza .riga-evento__luogo { color: var(--clr-corpo); }
.riga-evento__luogo:empty { display: none; }

/* --- Scheda evento ----------------------------------------------------------------------- */

.scheda {
    max-width: 720px;
    padding: 2.5rem 0 1rem;
}

.torna {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    text-decoration: none;
}

.badge-evidenza {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 2rem 0 0;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--clr-bordeaux);
    color: var(--clr-titolo);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.scheda__data {
    margin: 2rem 0 0;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--clr-oro);
}

.badge-evidenza + .scheda__data { margin-top: 0.75rem; }

.scheda__nota-data {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--clr-secondario);
}

.scheda h1 {
    font-size: 2.75rem;
    font-weight: 600;
    line-height: 1.15;
    margin: 0.5rem 0 1rem;
}

.scheda__lead {
    font-size: 1.2rem;
    margin: 0 0 2rem;
}

.scheda__info {
    margin: 0;
    border-top: 2px solid var(--clr-oro);
}

.scheda__riga {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--clr-border);
}

.scheda__riga > .material-symbols-outlined { color: var(--clr-oro); font-size: 1.5rem; }

.scheda__riga dt {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-secondario);
}

.scheda__riga dd { margin: 0.15rem 0 0; color: var(--clr-titolo); }
.scheda__riga.da-annunciare dd { color: var(--clr-secondario); font-style: italic; }

.scheda__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2.5rem;
}

.scheda__nav a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--clr-divider);
    color: var(--clr-titolo);
    text-decoration: none;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    line-height: 1.25;
}

.scheda__nav a:hover { color: var(--clr-oro-chiaro); }
.scheda__nav a.succ { justify-content: flex-end; text-align: right; }

.scheda__nav small {
    display: block;
    font-family: 'Public Sans', system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--clr-oro);
}

.btn-primary {
    --bs-btn-bg: var(--clr-oro);
    --bs-btn-border-color: var(--clr-oro);
    --bs-btn-color: var(--clr-bg);
    --bs-btn-hover-bg: var(--clr-oro-chiaro);
    --bs-btn-hover-border-color: var(--clr-oro-chiaro);
    --bs-btn-hover-color: var(--clr-bg);
    --bs-btn-active-bg: var(--clr-oro-chiaro);
    --bs-btn-active-color: var(--clr-bg);
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* --- Piè di pagina ----------------------------------------------------------------------- */

.piede {
    margin-top: 3.5rem;
    padding: 1.5rem 0 2.5rem;
    border-top: 1px solid var(--clr-divider);
    font-size: 0.9rem;
    color: var(--clr-secondario);
}

.piede p { margin: 0; }

/* --- Responsive -------------------------------------------------------------------------- */

@media (width < 768px) {
    .contenitore { padding: 0 1rem; }
    .testata { padding-top: 1.75rem; }
    .testata h1, .scheda h1 { font-size: 2rem; }
    .cal-settimana, .calendario { gap: 0 0.25rem; }
    .calendario { row-gap: 0.25rem; }
    .cal-data { align-items: center; padding: 0.4rem 0.1rem; }
    .cal-mese { display: block; margin: 0; text-align: center; }
    .cal-giorno.oggi .cal-num { margin-left: 0; }
    .cal-settimana { text-align: center; letter-spacing: 0; }
}

@media (min-width: 768px) {
    .cal-giorno, .cal-data { min-height: 7rem; }
    .cal-giorno.con-eventi .cal-data, .cal-giorno.da-confermare .cal-data { min-height: 0; }
    .griglia-eventi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .giorno { grid-template-columns: 7rem minmax(0, 1fr); gap: 0 1.5rem; }
}

@media (min-width: 992px) {
    .griglia-eventi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* Su desktop la riga si legge in orizzontale: titolo | descrizione | luogo. */
    .riga-evento {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: baseline;
        gap: 0 1.5rem;
    }
    .riga-evento__luogo:empty { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}