/* Estratto 1:1 dal <style> del sito HTML originale */

body {
    font-family: 'Inter', sans-serif;
    background-color: #0a0d14;
    color: #f8fafc;
}
.glow-orange { box-shadow: 0 0 25px -5px rgba(255, 107, 0, 0.4); }
.glow-orange-sm { box-shadow: 0 0 12px -2px rgba(255, 107, 0, 0.3); }
.bg-grid { background-image: radial-gradient(rgba(255, 107, 0, 0.12) 1px, transparent 0); background-size: 24px 24px; }

.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: #121824; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: #ff6b00; }

/* Animazioni leggere */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-visible { animation: revealUp 0.7s ease forwards; }
@keyframes revealUp {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.55); }
    50% { box-shadow: 0 0 0 10px rgba(255, 107, 0, 0); }
}
.animate-pulse-glow { animation: pulseGlow 1.4s ease-out infinite; }
@keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.animate-float-slow { animation: floatSlow 5s ease-in-out infinite; }
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-down { animation: fadeInDown 0.7s ease both; }

/* Contenuto della singola lezione — stessa resa grafica del vecchio
   renderMarkdownLite() dell'HTML originale, applicata al contenuto scritto
   con l'editor a blocchi di WordPress (Titoli, Citazione, Tabella, Elenchi) */
.gs-lesson-content { color: #cbd5e1; font-size: 0.875rem; line-height: 1.7; }
.gs-lesson-content h1, .gs-lesson-content h2, .gs-lesson-content h3 {
    color: #ff6b00; font-weight: 700; margin-top: 1.75rem; margin-bottom: 0.75rem; font-size: 1.125rem;
}
.gs-lesson-content h4 { color: #fff; font-weight: 700; margin-top: 1.25rem; margin-bottom: 0.5rem; }
.gs-lesson-content p { margin-bottom: 0.75rem; }
.gs-lesson-content blockquote {
    border-left: 4px solid #ff6b00; background: rgba(255,107,0,0.05); padding: 0.65rem 1rem;
    font-style: italic; color: #cbd5e1; margin: 1rem 0; border-radius: 0 0.5rem 0.5rem 0; font-size: 0.875rem;
}
.gs-lesson-content ul, .gs-lesson-content ol { margin: 0.75rem 0; padding-left: 1.25rem; }
.gs-lesson-content li { margin-bottom: 0.4rem; }
.gs-lesson-content table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin: 1rem 0; }
.gs-lesson-content th { text-align: left; color: #ff6b00; font-weight: 700; text-transform: uppercase; font-size: 0.7rem; border-bottom: 2px solid rgba(255,107,0,0.4); padding: 0.5rem 0.75rem; }
.gs-lesson-content td { color: #cbd5e1; padding: 0.5rem 0.75rem; border-bottom: 1px solid #1e293b; vertical-align: top; }
.gs-lesson-content hr { border-color: #1e293b; margin: 1.5rem 0; }
.gs-lesson-content a { color: #ff6b00; text-decoration: underline; }

/* Step del Virtual Beatmaker attivi */
.beat-step.is-active {
    background-color: #ff6b00 !important;
    border-color: #ff6b00 !important;
}

/* Step attualmente in riproduzione (il "playhead" del sequencer) */
.beat-step.is-current {
    box-shadow: 0 0 0 2px #fff8, 0 0 12px 2px rgba(255,255,255,0.55);
    transform: scale(1.12);
    transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.beat-step.is-current.is-active {
    background-color: #ffb347 !important;
    border-color: #ffffff !important;
}

/* ==========================================================================
   RISTILIZZAZIONE dei moduli di Paid Member Subscriptions (login/registrazione)
   dentro la card #gs-auth-card, per farli sembrare parte del tema invece che
   il modulo grezzo del plugin. Regole generiche (non legate a classi
   specifiche del plugin, che possono cambiare da versione a versione).
   ========================================================================== */
#gs-auth-card form { color: #f8fafc; }
#gs-auth-card label {
    display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    color: #cbd5e1; margin-bottom: 0.35rem; margin-top: 0.9rem;
}
#gs-auth-card label:first-child { margin-top: 0; }
#gs-auth-card input[type="text"],
#gs-auth-card input[type="email"],
#gs-auth-card input[type="password"],
#gs-auth-card input[type="tel"],
#gs-auth-card select,
#gs-auth-card textarea {
    width: 100% !important; background: #0f172a !important; border: 1px solid #334155 !important; border-radius: 0.5rem !important;
    padding: 0.55rem 0.75rem !important; font-size: 0.875rem !important; color: #fff !important; box-sizing: border-box !important;
}
#gs-auth-card input:focus, #gs-auth-card select:focus, #gs-auth-card textarea:focus {
    outline: none; border-color: #ff6b00;
}
#gs-auth-card input[type="submit"],
#gs-auth-card button[type="submit"],
#gs-auth-card .pms-button,
#gs-auth-card .button {
    width: 100%; background: #ff6b00; color: #000 !important; font-weight: 800; font-size: 0.875rem;
    padding: 0.75rem; border-radius: 0.75rem; border: none; margin-top: 1.25rem; cursor: pointer;
}
#gs-auth-card input[type="submit"]:hover,
#gs-auth-card button[type="submit"]:hover { background: #ea580c; }
#gs-auth-card a { color: #ff6b00; }
#gs-auth-card .pms-form-title, #gs-auth-card h2, #gs-auth-card h3 { display: none; } /* i titoli li mette già la nostra card */
#gs-auth-card table, #gs-auth-card table td, #gs-auth-card table th { border: none; padding: 0; background: none; }
#gs-auth-card .pms-checkbox-field label,
#gs-auth-card input[type="checkbox"] + label { display: inline; text-transform: none; font-weight: 400; margin: 0; }
#gs-auth-card .pms-notice, #gs-auth-card .pms-message {
    font-size: 0.75rem; padding: 0.6rem; border-radius: 0.5rem; margin-bottom: 0.75rem;
    background: rgba(244,63,94,0.1); border: 1px solid rgba(244,63,94,0.2); color: #fb7185;
}

/* ==========================================================================
   RISTILIZZAZIONE del modulo di Contact Form 7 dentro .gs-contact-form,
   stesso principio dei form di login/registrazione qui sopra.
   ========================================================================== */
.gs-contact-form form p { margin: 0 0 0.9rem 0; }
.gs-contact-form label { display: block; font-size: 0.75rem; font-weight: 700; color: #cbd5e1; margin-bottom: 0.35rem; }
.gs-contact-form input[type="text"],
.gs-contact-form input[type="email"],
.gs-contact-form input[type="tel"],
.gs-contact-form textarea {
    width: 100% !important; background: #0f172a !important; border: 1px solid #334155 !important; border-radius: 0.5rem !important;
    padding: 0.6rem 0.75rem !important; font-size: 0.875rem !important; color: #fff !important; box-sizing: border-box !important;
}
.gs-contact-form input:focus, .gs-contact-form textarea:focus { outline: none; border-color: #ff6b00 !important; }
.gs-contact-form input[type="submit"] {
    background: #ff6b00; color: #000; font-weight: 800; font-size: 0.875rem;
    padding: 0.7rem 1.5rem; border-radius: 0.75rem; border: none; cursor: pointer;
}
.gs-contact-form input[type="submit"]:hover { background: #ea580c; }
.gs-contact-form .wpcf7-not-valid-tip { color: #fb7185; font-size: 0.7rem; margin-top: 0.25rem; }
.gs-contact-form .wpcf7-response-output { font-size: 0.75rem; border-radius: 0.5rem; margin-top: 0.75rem !important; }
.gs-contact-form form.sent .wpcf7-response-output { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3) !important; color: #34d399; }
.gs-contact-form form.invalid .wpcf7-response-output,
.gs-contact-form form.failed .wpcf7-response-output,
.gs-contact-form form.aborted .wpcf7-response-output,
.gs-contact-form form.spam .wpcf7-response-output,
.gs-contact-form form.unaccepted .wpcf7-response-output { background: rgba(244,63,94,0.1); border-color: rgba(244,63,94,0.3) !important; color: #fb7185; }