/* ==================================================
   IDENTITÀ "CROMO NERO, COLORE VIVO"
   Si carica dopo styles.css e ne sovrascrive colori, caratteri e forme.
   Il colore della serata (--mood, --mood-deep, --on-mood) lo imposta js/core/background.js su <html>,
   dove sono definiti i 4 colori del motto; qui sotto c'è solo quello di partenza (Breathe).
   ================================================== */
:root {
    --mood: #1fa39a;
    --mood-deep: #062f35;
    --on-mood: #050508;
    /* per i testi colorati su fondo nero: il colore della serata un po' schiarito */
    --mood-text: color-mix(in srgb, var(--mood) 70%, #ffffff);

    --ink: #eceaf4;
    --panel: rgba(5, 5, 8, 0.8);
    --panel-line: rgba(236, 234, 244, 0.12);

    --f-display: 'League Gothic', 'Oswald', 'Arial Narrow', Impact, sans-serif;
    --f-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
}

/* ---------- Sfondo ---------- */
.site-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* si vede finché l'elica non è pronta, o se il telefono non supporta il 3D */
    background: radial-gradient(80% 70% at 62% 60%, color-mix(in srgb, var(--mood-deep) 45%, #000) 0%, #000 75%);
}
.site-background canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.site-background.ready canvas { opacity: 1; }
/* pagine pubbliche (sfondo con data-tap): croce ovunque, un clic fa partire un glitch (background.js);
   link, bottoni e campi tengono il loro cursore */
@media (prefers-reduced-motion: no-preference) {
    html:has(.site-background[data-tap]) body { cursor: crosshair; }
    /* icone social non ancora attive: non sono comandi, prendono la croce anche loro */
    html:has(.site-background[data-tap]) :is(.social-bottom, .footer-links) span { cursor: inherit; }
    :where(html:has(.site-background[data-tap])) :where(a[href], button, select, label, summary, [role="button"]) { cursor: pointer; }
    :where(html:has(.site-background[data-tap])) :where(input:not([type="checkbox"], [type="radio"]), textarea) { cursor: text; }
}

/* ---------- Caratteri ---------- */
/* testi in IBM Plex Sans; date, orari ed etichette restano in Space Mono dove styles.css lo indica */
body,
.landing-page { font-family: var(--f-body); }

.event-card-title,
.section-title,
.page-title,
.login-card h2,
#login-section h2,
#success-section h2,
.modal-content h2,
.registration-gate h3 {
    font-family: var(--f-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 0.02em !important;
    line-height: 0.95 !important;
    text-wrap: balance;
}
.event-card-title { font-size: 2.1rem; }
.event-card-title.text-lg { font-size: 2.4rem !important; }
.section-title { font-size: 3rem; }
.page-title { font-size: 2.6rem; }
.login-card h2, #login-section h2 { font-size: 2.6rem !important; margin-bottom: 1rem !important; }
.modal-content h2 { font-size: 2.4rem !important; }
/* INGRESSO RISERVATO (evento con password) */
.registration-gate h3 { font-size: 2rem !important; }

/* Etichette delle sezioni (Prossimi eventi, Eventi passati): titoli veri, leggibili sopra l'elica */
.section-label {
    font-family: var(--f-display) !important;
    font-size: 2.6rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    line-height: 1;
    color: var(--ink) !important;
    text-shadow: 0 0 10px #000, 0 0 30px #000;
}
.no-events {
    color: rgba(236, 234, 244, 0.6) !important;
    text-shadow: 0 0 8px #000, 0 0 24px #000;
}

.hero-tagline-center {
    font-family: 'Space Mono', monospace;
    color: var(--ink);
    letter-spacing: 0.4em;
    text-shadow: 0 0 6px #000, 0 0 18px #000;
}
.dna-seq {
    position: relative;
    z-index: 10;
    margin-top: 1rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    color: var(--mood-text);
    white-space: nowrap;
    max-width: 92vw;
    overflow: hidden;
    text-align: center;
    opacity: 0.85;
    user-select: none;
    -webkit-user-select: none;
}

/* ---------- Forme: angoli vivi, pannelli scuri senza sfocatura ---------- */
input,
textarea,
select,
.submit-btn,
.event-card-btn,
.custom-select,
#search-input,
.form-message,
.event-card-item,
.event-card,
.login-card,
#login-section,
.custom-modal,
.modal-content,
.dropdown-content {
    border-radius: 0 !important;
}

.event-card,
.event-card-item,
.login-card,
#login-section,
.custom-modal,
.modal-content,
.dropdown-content {
    background: var(--panel) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--panel-line) !important;
}
.event-card-item:hover { border-color: color-mix(in srgb, var(--mood) 45%, transparent) !important; }

/* Le locandine restano a colori pieni */
.event-card-item img { border-radius: 0 !important; }

/* ---------- Stati ed avvisi ---------- */
/* Etichette di stato (ISCRIZIONI APERTE, PROSSIMO EVENTO...): nel colore della serata */
.status-open { color: var(--mood-text) !important; }

/* Messaggio di conferma sotto i moduli: nel colore della serata, mai verde */
.form-message.success {
    border-color: var(--mood);
    color: var(--mood-text);
}

/* Riquadri di avviso sotto l'evento: angoli vivi, pannello scuro, titolo in Space Mono */
.alert { border-radius: 0 !important; }
.alert h3 {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}
.alert p { color: rgba(236, 234, 244, 0.7); }
/* Avviso non negativo (es. evento senza iscrizioni): bordo e titolo nel colore della serata */
.alert-mood {
    padding: 2rem;
    background: var(--panel);
    border: 1px solid color-mix(in srgb, var(--mood) 45%, transparent);
}
.alert-mood h3 { color: var(--mood-text); }

/* ---------- Bottoni: pieni, con un riflesso che passa come sul cromo ----------
   Pericolo (.btn-danger: ELIMINA, ESCI) e secondario (.btn-secondary: FILTRI) restano vuoti, vedi sotto */
.submit-btn:not(.outline-btn):not(.btn-danger):not(.btn-secondary):not(:disabled),
.hero-next-event-btn {
    background: var(--mood) !important;
    color: var(--on-mood, #050508) !important;
    border-color: var(--mood) !important;
    font-weight: 700;
}
.submit-btn:not(.outline-btn):not(.btn-danger):not(.btn-secondary):not(:disabled):hover,
.hero-next-event-btn:hover {
    color: var(--on-mood, #050508) !important;
    filter: brightness(1.08);
}
.submit-btn:not(.outline-btn):not(.btn-danger):not(.btn-secondary):not(:disabled)::after,
.hero-next-event-btn::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    left: -60%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    transform: skewX(-20deg);
    animation: chromeGlint 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes chromeGlint {
    0%, 70% { left: -60%; }
    100% { left: 130%; }
}
/* Pericolo (ELIMINA, ESCI): vuoto, bordo rosso al 40%; passando sopra si riempie di rosso al 15%.
   I colori li dà .btn-danger in styles.css; qui si toglie solo la velatura bianca, niente riflesso */
.submit-btn.btn-danger::before,
.submit-btn.btn-secondary::before { display: none; }
/* Pericolo spento (ELIMINA senza iscritti selezionati): come gli altri bottoni spenti, bordo al 5% e testo al 20% */
.submit-btn.btn-danger:disabled,
.submit-btn.btn-danger:disabled:hover {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.2) !important;
    transform: none;
}
/* Secondario (FILTRI): vuoto, bordo al 24%, testo al 70%; passando sopra il fondo si accende al 6% */
.submit-btn.btn-secondary {
    border-color: rgba(236, 234, 244, 0.24) !important;
    color: rgba(236, 234, 244, 0.7) !important;
}
.submit-btn.btn-secondary:hover {
    background: rgba(236, 234, 244, 0.06) !important;
    border-color: rgba(236, 234, 244, 0.5) !important;
    color: var(--ink) !important;
}

.nav-right a.active,
.nav-right button.active { color: var(--mood-text) !important; }

input:focus,
textarea:focus,
select:focus,
#search-input:focus {
    border-color: var(--mood) !important;
}

/* ---------- Finestre (avvisi, conferme, iscrizione completata) ---------- */
.custom-modal,
.modal-content {
    background: rgba(5, 5, 8, 0.92) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.custom-modal p {
    font-family: var(--f-body);
    font-size: 0.95rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--ink);
}
.custom-modal-actions,
#custom-modal-btn-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}
.custom-modal .modal-close-btn {
    position: relative;
    overflow: hidden;
    min-width: 9rem;
    padding: 0 1.75rem;
    border-radius: 0;
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: filter 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* bottone principale (OK, CONFERMA): pieno nel colore della serata, come .submit-btn */
.custom-modal .modal-close-btn.is-primary {
    background: var(--mood);
    border: 1px solid var(--mood);
    color: var(--on-mood, #050508);
}
.custom-modal .modal-close-btn.is-primary:hover {
    background: var(--mood);
    filter: brightness(1.08);
}
.custom-modal .modal-close-btn.is-primary::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    left: -60%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    transform: skewX(-20deg);
    animation: chromeGlint 4.5s ease-in-out infinite;
    pointer-events: none;
}
/* A finestra chiusa (resta nella pagina, trasparente) il riflesso si ferma: niente lavoro invisibile */
.custom-modal-overlay:not(.active) .modal-close-btn.is-primary::after { animation: none; }
/* ANNULLA: vuoto, bordo sottile */
.custom-modal .modal-close-btn.is-ghost {
    background: transparent;
    border: 1px solid rgba(236, 234, 244, 0.24);
    color: rgba(236, 234, 244, 0.7);
}
.custom-modal .modal-close-btn.is-ghost:hover {
    background: rgba(236, 234, 244, 0.06);
    border-color: rgba(236, 234, 244, 0.5);
    color: var(--ink);
}
@media (max-width: 480px) {
    .custom-modal { padding: 2rem 1.25rem; }
    .custom-modal .modal-close-btn { flex: 1 1 100%; }
    /* CONFERMA sopra, ANNULLA sotto */
    .custom-modal-actions .is-primary { order: -1; }
}

/* ---------- Glitch sui titoli, insieme all'elica ---------- */
body.glitching .event-card-title,
body.glitching .section-title,
body.glitching .page-title,
body.glitching .section-label,
body.glitching .hero-tagline-center,
body.glitching .login-card h2,
body.glitching #login-section h2,
body.glitching .modal-content h2,
body.glitching .registration-gate h3,
body.glitching .nav-logo {
    transform: translateX(var(--gx, 0));
    text-shadow: -3px 0 var(--mood), 3px 0 rgba(255, 255, 255, 0.75);
}
body.glitching .nav-logo {
    filter: drop-shadow(-3px 0 var(--mood)) drop-shadow(3px 0 rgba(255, 255, 255, 0.6));
}

@media (prefers-reduced-motion: reduce) {
    .submit-btn:not(.outline-btn):not(.btn-danger):not(.btn-secondary):not(:disabled)::after,
    .hero-next-event-btn::after,
    .custom-modal .modal-close-btn.is-primary::after { animation: none; display: none; }
}