/* ============================================
   Responsive — Mobile-first breakpoints
   ============================================ */

/* ---- TABLET / MOBILE NAV (< 992px) ---- */
@media (max-width: 992px) {

    /* Nav bar — rimuove backdrop-filter che rende la nav un containing block
       per i figli position:fixed, causando altezza zero del menu mobile */
    .nav {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--color-white);
    }

    .nav__toggle {
        display: flex;
    }

    .nav__cta {
        display: none;
    }

    /* ---- Full-screen dark overlay menu ---- */
    .nav__links {
        display: none;
        position: fixed;
        top: 72px; left: 0; right: 0; bottom: 0;
        background: var(--color-charcoal-dark);
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-4) var(--space-8) var(--space-10);
        gap: 0;
        overflow-y: auto;
        border-top: 1px solid rgba(255,255,255,0.08);
        z-index: var(--z-nav);
    }

    .nav__links.open {
        display: flex;
        animation: navMobileIn 0.22s ease both;
    }

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

    /* ---- Main nav links ---- */
    .nav__link {
        font-size: var(--text-xl);
        font-weight: 600;
        font-family: var(--font-heading);
        color: rgba(255,255,255,0.75);
        padding: var(--space-4) 0;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        letter-spacing: 0.01em;
    }

    .nav__link:hover,
    .nav__link.active {
        color: var(--color-green-light);
    }

    /* Disabilita l'underline indicator desktop */
    .nav__link::after,
    .nav__link.active::after,
    .nav__link:hover::after {
        display: none !important;
    }

    /* Freccia dropdown — colore chiaro su sfondo scuro */
    .nav__arrow {
        color: rgba(255,255,255,0.35);
        font-size: 0.75em;
        transition: transform var(--transition-fast);
    }

    .nav__dropdown.open > .nav__link .nav__arrow {
        transform: rotate(180deg);
    }

    /* ---- Dropdown submenu ---- */
    .nav__dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: transparent;
        opacity: 1;
        visibility: visible;
        display: none;
        padding: var(--space-1) 0 var(--space-3) var(--space-5);
        min-width: 0;
    }

    /* Override hover/focus-within da components.css (specificità più alta).
       Su mobile touch il :hover rimane attivo dopo il tap e applica
       transform: translateX(-50%) che sposta il menu fuori dallo schermo. */
    .nav__dropdown:hover .nav__dropdown-menu,
    .nav__dropdown:focus-within .nav__dropdown-menu {
        transform: none;
        opacity: 1;
        visibility: visible;
    }

    .nav__dropdown.open .nav__dropdown-menu {
        display: block;
    }

    .nav__dropdown-menu li {
        border-left: 2px solid rgba(89,176,49,0.3);
        margin-left: var(--space-2);
        margin-bottom: 2px;
    }

    .nav__dropdown-menu li a {
        display: block;
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
        font-weight: 500;
        color: rgba(255,255,255,0.5);
        border-radius: var(--radius);
        background: transparent;
        transition: all var(--transition-fast);
        letter-spacing: 0.01em;
    }

    .nav__dropdown-menu li a:hover {
        color: var(--color-green-light);
        background: rgba(255,255,255,0.05);
    }

    /* ---- CTA in fondo al menu mobile ---- */
    .nav__mobile-cta {
        margin-top: auto;
        padding-top: var(--space-8);
        border-bottom: none;
    }

    .nav__mobile-cta a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: var(--text-base);
    }

    /* ---- Footer ---- */
    .footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }

    .footer__brand {
        grid-column: 1 / -1;
    }
}

/* ---- MOBILE (< 768px) ---- */
@media (max-width: 768px) {

    /* Section header */
    .section-header p {
        font-size: var(--text-base);
    }

    /* Footer */
    .footer__inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .footer__bottom .container {
        flex-direction: column;
        text-align: center;
        gap: var(--space-2);
    }

    /* Cookie banner */
    .cookie-banner__inner {
        flex-direction: column;
        gap: var(--space-4);
    }

    .cookie-banner__actions {
        width: 100%;
        justify-content: center;
    }

    /* Page header */
    .page-header {
        text-align: center;
    }

    /* Timeline — mobile: tutto a sinistra */
    .timeline-line {
        left: 24px;
        transform: none;
    }

    /* CTA */
    .cta-section .btn-group {
        flex-direction: column;
        align-items: center;
    }
}

/* ---- SMALL MOBILE (< 480px) ---- */
@media (max-width: 480px) {
    .btn--large {
        width: 100%;
        justify-content: center;
    }
}

/* ---- LARGE SCREEN (> 1400px) ---- */
@media (min-width: 1400px) {
    h1 { font-size: var(--text-7xl); }
}

/* ---- MOTION REDUCED ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
    }
}