@charset "UTF-8";
/**
 * DeepBlue Academy — Mobile Optimisation Layer
 * Aggiunge ottimizzazioni mobile senza toccare il design desktop.
 * Incluso in tutti i file HTML dopo il CSS esistente.
 *
 * Breakpoints:
 *   600px  → small phones
 *   900px  → tablets / landscape phones (già gestito inline)
 */

/* ─────────────────────────────────────────
   RESET TOUCH & BASE
   ───────────────────────────────────────── */
@media (max-width: 900px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Prevent horizontal overflow everywhere */
    body {
        overflow-x: hidden;
    }

    /* Fluid font scale */
    html {
        font-size: 15px;
    }

    /* Ensure all interactive elements are thumb-friendly */
    a, button, [role="button"], input, select, textarea,
    .nav-item, .filter-btn, .btn-primary, .btn-ghost,
    .btn-submit, .btn-social, .btn-enroll, .btn-nav,
    .tab-btn, .answer-option, .lesson-row, .doc-row,
    .course-card, .choice-card, .progress-item {
        min-height: 44px;
    }
}

/* ─────────────────────────────────────────
   HAMBURGER MENU (public pages with <nav>)
   ───────────────────────────────────────── */
@media (max-width: 900px) {

    /* The hamburger button — injected by mobile.js */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        background: transparent;
        border: 1px solid rgba(255,255,255,0.12);
        cursor: pointer;
        padding: 8px;
        flex-shrink: 0;
        transition: border-color 0.3s;
    }

        .hamburger:hover {
            border-color: var(--accent, #00c8ff);
        }

        .hamburger span {
            display: block;
            height: 1px;
            background: var(--text, #e8eef5);
            transition: transform 0.35s, opacity 0.35s, width 0.35s;
            transform-origin: center;
        }

        .hamburger.open span:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
        }

        .hamburger.open span:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }

        .hamburger.open span:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
        }

    /* Mobile nav drawer */
    .mobile-nav-drawer {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        background: rgba(3,13,26,0.98);
        backdrop-filter: blur(20px);
        display: flex;
        flex-direction: column;
        padding: 5rem 2rem 2rem;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
    }

        .mobile-nav-drawer.open {
            transform: translateX(0);
        }

        .mobile-nav-drawer ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0;
        }

            .mobile-nav-drawer ul li a,
            .mobile-nav-drawer ul li button {
                display: flex;
                align-items: center;
                padding: 1.1rem 0;
                border-bottom: 1px solid rgba(255,255,255,0.06);
                color: rgba(232,238,245,0.75);
                text-decoration: none;
                font-family: var(--serif, 'Cormorant Garamond', serif);
                font-size: 1.6rem;
                font-weight: 300;
                letter-spacing: 0.02em;
                background: transparent;
                border-top: none;
                border-left: none;
                border-right: none;
                width: 100%;
                text-align: left;
                cursor: pointer;
                transition: color 0.3s;
            }

                .mobile-nav-drawer ul li a:hover,
                .mobile-nav-drawer ul li button:hover {
                    color: var(--accent, #00c8ff);
                }

        .mobile-nav-drawer .drawer-cta {
            margin-top: 2rem;
            display: block;
            text-align: center;
            padding: 1.1rem;
            background: var(--accent, #00c8ff);
            color: #030d1a;
            font-family: var(--sans, 'DM Sans', sans-serif);
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            text-decoration: none;
            clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
            transition: background 0.3s;
        }

            .mobile-nav-drawer .drawer-cta:hover {
                background: var(--accent2, #0af5c8);
            }
}

/* ─────────────────────────────────────────
   BOTTOM NAVIGATION BAR (authenticated pages)
   Sostituisce la sidebar su mobile
   ───────────────────────────────────────── */
@media (max-width: 900px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: rgba(6,15,32,0.97);
        backdrop-filter: blur(20px);
        border-top: 1px solid rgba(255,255,255,0.08);
        padding: 0;
        height: 62px;
        align-items: stretch;
    }

        .bottom-nav a {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            text-decoration: none;
            color: rgba(232,238,245,0.45);
            font-family: var(--sans, 'DM Sans', sans-serif);
            font-size: 0.6rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            border-top: 2px solid transparent;
            transition: color 0.3s, border-color 0.3s;
            padding: 0 4px;
        }

            .bottom-nav a .bnav-icon {
                font-size: 1.25rem;
                line-height: 1;
            }

            .bottom-nav a .bnav-label {
                line-height: 1;
            }

            .bottom-nav a.active {
                color: var(--accent, #00c8ff);
                border-top-color: var(--accent, #00c8ff);
            }

            .bottom-nav a:hover {
                color: rgba(232,238,245,0.8);
            }

    /* Add bottom padding to main content so it's not hidden behind bottom nav */
    .main-content,
    .lesson-content,
    .course-area {
        padding-bottom: 80px !important;
    }
}

/* Hide bottom nav on desktop */
@media (min-width: 901px) {
    .bottom-nav {
        display: none !important;
    }
}

/* ─────────────────────────────────────────
   INDEX PAGE — MOBILE FIXES
   ───────────────────────────────────────── */
@media (max-width: 900px) {
    /* Hero */
    .hero {
        padding: 7rem 1.5rem 4rem;
        text-align: center;
    }

    .hero-sub {
        font-size: 0.95rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }

        .hero-actions a, .hero-actions button {
            width: 100%;
            max-width: 320px;
            text-align: center;
            padding: 1rem 1.5rem;
        }

    /* Stats bar */
    .stats-bar {
        grid-template-columns: repeat(2,1fr) !important;
        padding: 2rem 1.5rem !important;
        gap: 1.5rem;
    }

    .stat-num {
        font-size: 2rem;
    }

    /* Why grid — already 1 col, add padding fix */
    .why-card {
        padding: 2rem 1.5rem;
    }

    /* Steps */
    .steps {
        grid-template-columns: 1fr !important;
        gap: 3rem;
    }

    .step-num {
        margin-bottom: 1.2rem;
    }

    /* Courses preview */
    .courses-preview .course-card {
        max-width: 100%;
    }

    .course-info h3 {
        font-size: 1.1rem;
    }

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* CTA band */
    .cta-band {
        padding: 4rem 1.5rem;
    }

        .cta-band h2 {
            font-size: clamp(1.8rem, 6vw, 2.5rem);
        }

    /* Footer */
    footer {
        grid-template-columns: 1fr 1fr !important;
        padding: 3rem 1.5rem !important;
        gap: 2rem !important;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
        padding: 1.2rem 1.5rem;
    }

    /* Section headings */
    h2 {
        font-size: clamp(1.8rem, 6vw, 2.8rem) !important;
    }

    section {
        padding: 4rem 1.5rem !important;
    }
}

@media (max-width: 480px) {
    footer {
        grid-template-columns: 1fr !important;
    }

    .stats-bar {
        grid-template-columns: repeat(2,1fr) !important;
    }

    h1 {
        font-size: clamp(2.4rem, 10vw, 3.5rem) !important;
    }
}

/* ─────────────────────────────────────────
   NAV — keep lang selector + hamburger aligned
   ───────────────────────────────────────── */
@media (max-width: 900px) {
    nav {
        padding: 1rem 1.2rem !important;
        gap: 0.8rem;
    }
        /* Push the lang selector and hamburger to the right */
        nav > *:last-child {
            margin-left: auto;
        }

    .nav-cta {
        display: none;
    }
    /* Hidden — CTA is in the drawer */

    /* Lang selector in nav: compact on mobile */
    #deepblue-lang-selector .lang-trigger {
        padding: 0.35rem 0.6rem;
        font-size: 0.72rem;
    }

    #deepblue-lang-selector .lang-current-label {
        display: none;
    }
}

/* ─────────────────────────────────────────
   CATALOG PAGE — MOBILE
   ───────────────────────────────────────── */
@media (max-width: 900px) {
    .page-header {
        padding: 7rem 1.5rem 2.5rem !important;
    }

        .page-header h1 {
            font-size: clamp(2rem, 8vw, 3rem);
        }

    .filters {
        padding: 1rem 1.5rem !important;
        gap: 0.6rem;
    }

    .filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }

    .catalog-section {
        padding: 2.5rem 1.5rem !important;
    }

    .catalog-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .course-thumb {
        height: 160px;
    }

    .course-info {
        padding: 1.2rem;
    }

    .cat-header {
        padding-bottom: 1.5rem;
    }

    .cat-divider {
        margin: 2rem 0;
    }
}

/* ─────────────────────────────────────────
   LOGIN PAGE — MOBILE
   ───────────────────────────────────────── */
@media (max-width: 800px) {
    .right-panel {
        padding: 2.5rem 1.5rem !important;
    }

    .auth-container {
        max-width: 100% !important;
    }

    .tab-btn {
        padding: 1rem 0.5rem;
    }

    .btn-submit {
        padding: 1.1rem;
        font-size: 0.85rem;
    }

    .btn-social {
        padding: 1rem;
    }

    .form-group input {
        padding: 1rem 1rem;
        font-size: 1rem;
    }

    .demo-notice {
        font-size: 0.78rem;
    }
    /* Show brand logo at top on mobile */
    .mobile-login-brand {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-bottom: 2rem;
    }
}

/* ─────────────────────────────────────────
   DASHBOARD — MOBILE
   ───────────────────────────────────────── */
@media (max-width: 900px) {
    .page-header {
        margin-bottom: 2rem;
    }

        .page-header h1 {
            font-size: clamp(1.8rem, 7vw, 2.5rem);
        }

    .stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .stat-card {
        padding: 1.2rem;
    }

        .stat-card .val {
            font-size: 1.8rem;
        }

    .choice-grid {
        grid-template-columns: 1fr !important;
        gap: 1.2rem !important;
    }

    .choice-card {
        padding: 2rem 1.5rem;
    }

        .choice-card h3 {
            font-size: 1.5rem;
        }

        .choice-card p {
            font-size: 0.85rem;
        }

    .progress-item {
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
        padding: 1.2rem 1.5rem !important;
    }

    .prog-btn {
        display: inline-block;
        align-self: flex-start;
    }
}

/* ─────────────────────────────────────────
   ENROLLED COURSES — MOBILE
   ───────────────────────────────────────── */
@media (max-width: 900px) {
    .enrolled-grid {
        grid-template-columns: 1fr !important;
        gap: 1.2rem;
    }

    .tab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ─────────────────────────────────────────
   COURSE CARD (scheda-corso) — MOBILE
   ───────────────────────────────────────── */
@media (max-width: 900px) {
    .main-content {
        grid-template-columns: 1fr !important;
    }

    .side-panel {
        display: none !important;
    }

    .course-area {
        padding: 2rem 1.5rem !important;
    }

    .course-header {
        padding: 2rem 1.5rem !important;
    }

        .course-header h1 {
            font-size: 1.7rem;
        }

    .course-stats {
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .cstat-val {
        font-size: 1.3rem;
    }

    .lesson-row {
        padding: 0.9rem 1rem !important;
    }

    .lesson-title {
        font-size: 0.85rem;
    }

    .lesson-icon-box {
        width: 32px;
        height: 32px;
    }
}

/* ─────────────────────────────────────────
   LESSON PAGE — MOBILE
   ───────────────────────────────────────── */
@media (max-width: 900px) {
    .main {
        grid-template-columns: 1fr !important;
    }

    .lesson-nav {
        display: none !important;
    }

    .lesson-content {
        padding: 2rem 1.5rem !important;
    }

    .lesson-header {
        margin-bottom: 2rem;
    }

    h1 em {
        display: inline;
    }

    .lesson-meta-row {
        flex-wrap: wrap;
        gap: 0.8rem;
    }

    .doc-row {
        padding: 1rem !important;
    }

    .doc-name {
        font-size: 0.82rem;
    }

    .quiz-cta {
        padding: 2rem 1.5rem !important;
    }

        .quiz-cta h3 {
            font-size: 1.5rem;
        }

    .btn-quiz {
        padding: 1rem 2rem;
    }
}

/* ─────────────────────────────────────────
   QUIZ PAGE — MOBILE
   ───────────────────────────────────────── */
@media (max-width: 900px) {
    .quiz-topbar {
        padding: 0.8rem 1.2rem !important;
    }

    .quiz-course-name {
        display: none;
    }
    /* troppo lungo su mobile */
    .timer-box {
        font-size: 0.85rem;
    }

    .exit-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.7rem;
    }

    .quiz-main {
        padding: 1.5rem 1rem 80px !important;
        flex-direction: column !important;
    }

    .quiz-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .quiz-sidebar {
        display: none !important;
    }

    .question-box {
        padding: 1.5rem !important;
    }

    .question-text {
        font-size: 1.25rem !important;
        line-height: 1.5;
    }

    .answer-option {
        padding: 1rem 1rem !important;
        gap: 0.8rem;
    }

    .answer-letter {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }

    .answer-text {
        font-size: 0.85rem;
    }

    .btn-verify, .btn-next-q {
        padding: 0.9rem 2rem;
        font-size: 0.82rem;
    }

    .quiz-actions {
        flex-wrap: wrap;
        gap: 0.8rem;
    }

    .q-dots {
        display: none;
    }
    /* replaced by progress bar on mobile */
    /* Result screen */
    .result-screen {
        padding: 3rem 1.5rem 100px !important;
    }
}

@media (max-width: 480px) {
    .quiz-topbar .topbar-left {
        gap: 0.4rem;
    }

    .question-text {
        font-size: 1.1rem !important;
    }
}

/* ─────────────────────────────────────────
   CORSO PRESENTAZIONE — MOBILE
   ───────────────────────────────────────── */
@media (max-width: 900px) {
    .course-hero {
        grid-template-columns: 1fr !important;
    }

    .hero-left {
        display: none !important;
    }

    .hero-right {
        padding: 2rem 1.5rem !important;
    }

    .course-price {
        font-size: 2.5rem;
    }

    .course-content {
        grid-template-columns: 1fr !important;
        padding: 2.5rem 1.5rem !important;
    }

    .sidebar-panel {
        display: none !important;
    }

    .instructor-section, .enroll-band {
        padding: 2.5rem 1.5rem !important;
    }

    .modules-list .module-item {
        padding: 1rem !important;
    }
    /* Enroll button full width */
    .btn-enroll-big {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
}

/* ─────────────────────────────────────────
   LANG SELECTOR — MOBILE in sidebar
   ───────────────────────────────────────── */
@media (max-width: 900px) {
    /* When sidebar is hidden, lang selector floats */
    .sidebar #deepblue-lang-selector {
        display: none !important;
    }
    /* Lang selector gets shown in bottom-nav area instead, or in the drawer */
}

/* ─────────────────────────────────────────
   SCROLLBAR — thin on mobile
   ───────────────────────────────────────── */
@media (max-width: 900px) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0,200,255,0.2);
        border-radius: 2px;
    }
}

/* ─────────────────────────────────────────
   SAFE AREA (iPhone notch / home bar)
   ───────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(62px + env(safe-area-inset-bottom));
    }
}

/* ─────────────────────────────────────────
   OVERFLOW ORIZZONTALE — FIX GLOBALE
   Blocca qualsiasi elemento più largo del viewport
   ───────────────────────────────────────── */

/* Regola universale anti-overflow */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 900px) {
    /* Tutti gli elementi non possono uscire dal viewport */
    *, *::before, *::after {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* ── NAV: padding laterale 4rem → 1.2rem ── */
    nav {
        padding-left: 1.2rem !important;
        padding-right: 1.2rem !important;
    }

    /* ── SECTIONS con padding 4rem ── */
    section,
    .page-header,
    .catalog-section,
    .filters,
    .course-content,
    .instructor-section,
    .enroll-band,
    .cta-band,
    .stats-bar,
    .footer-bottom {
        padding-left: 1.2rem !important;
        padding-right: 1.2rem !important;
    }

    /* ── FOOTER ── */
    footer {
        padding-left: 1.2rem !important;
        padding-right: 1.2rem !important;
    }

    /* ── QUIZ: topbar e main ── */
    .quiz-topbar,
    .quiz-bottom {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .quiz-main {
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
    }

    /* ── QUIZ: bottoni larghi (padding 3rem) ── */
    .btn-verify,
    .btn-next-q,
    .result-actions a,
    .result-actions button {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* ── LOGIN ── */
    .right-panel,
    .auth-container {
        padding-left: 1.2rem !important;
        padding-right: 1.2rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── DASHBOARD / AUTHENTICATED PAGES ── */
    .main-content,
    .course-area,
    .lesson-content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* ── max-width fissi che possono sporgere su schermi <420px ── */
    .auth-container,
    .quiz-container,
    .question-box,
    .result-screen {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* ── Tabelle e pre: scroll orizzontale locale (non globale) ── */
    table, pre, code {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Hero actions: no overflow sui bottoni ── */
    .hero-actions {
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        .hero-actions a,
        .hero-actions button {
            box-sizing: border-box;
            max-width: 100%;
        }

    /* ── corso-presentazione: modal overlay ── */
    .modal-overlay .modal {
        width: calc(100% - 2rem) !important;
        max-width: 100% !important;
        margin: 1rem !important;
        padding: 2rem 1.2rem !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    /* Extra: riduce ancora su telefoni piccoli */
    section,
    .page-header,
    .catalog-section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    nav {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ─────────────────────────────────────────
   SELETTORE LINGUA — POSIZIONE FISSA
   Visibile sempre, non dipende da nav/sidebar
   ───────────────────────────────────────── */

/* Su mobile: selettore lingua posizionato da index.html inline styles */
@media (max-width: 900px) {
    #deepblue-lang-selector {
        top: 0.65rem !important;
        right: 3.8rem !important;
    }
    /* Quando c'è la bottom nav (pagine auth), il selettore resta in alto */
    .lang-trigger {
        padding: 0.4rem 0.65rem !important;
        font-size: 0.72rem !important;
    }
    /* Nasconde la label testuale su mobile, resta solo la bandiera */
    .lang-current-label {
        display: none !important;
    }
    /* Il dropdown si apre verso il basso, mai fuori dallo schermo */
    .lang-dropdown {
        right: 0 !important;
        left: auto !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
}

/* Su desktop il selettore è inline nella nav (gestito da index.html) */