/* Mobile Navigation - Simplified */
@media (max-width: 968px) {
    /* Fixed navigation bar */
    .nav {
        padding: 1rem 1.5rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: rgba(15, 17, 8, 0.98);
        backdrop-filter: blur(10px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(212, 168, 67, 0.2);

        
    }
    
    .nav-logo {
        font-size: 1.3rem;
    }
    
    /* Nav links - push to right */
    .nav-links {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    /* Push login button to the far right */
    .nav-links a[href="login.html"] {
        margin-left: auto;
    }

    /* Push avatar to the far right when logged in */
    .nav-links .user-menu {
        margin-left: auto;
    }
    
    /* Hide all nav links except login/avatar 
    .nav-links > a:not([href="login.html"]) {
        display: none !important;
    }*/

    /* Hide normal nav links on mobile */
@media (max-width: 968px) {
    .nav-links a {
        display: none;
    }

    /* Always allow login link */
    .nav-links a[href="login.html"] {
        display: inline-flex;
    }

    /* Always allow user avatar */
    .nav-links .user-menu {
        display: inline-flex;
        margin-left: auto;
    }
}

    
    /* Show login button */
    .nav-links > a[href="login.html"] {
        display: inline-flex !important;
        padding: 0.6rem 1.5rem;
        background: rgba(212, 168, 67, 0.1);
        border: 2px solid var(--gold);
        border-radius: 50px;
        font-size: 0.875rem;
        font-weight: 600;
    }
    
    /* User avatar in top right */
    a.user-menu {
        display: inline-flex !important;
    }
    
    a.user-menu .user-avatar {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
}

/* Page-specific top spacing */
@media (max-width: 968px) {
    /* Pages with page-hero */
    .page-hero {
        margin-top: 80px;
    }
    
    /* Auth pages */
    .auth-section {
        padding-top: 100px;
    }
    
    /* Tickets page */
    .tickets-section {
        padding-top: 100px;
    }
    
    /* Dashboard */
    .dashboard-section {
        padding-top: 100px;
    }
    
    /* Cart page */
    .cart-section {
        padding-top: 100px;
    }
    
    /* Contact page */
    .contact-section {
        padding-top: 100px;
    }
    
    /* Home page hero - NO extra spacing */
    .hero {
        margin-top: 0;
        padding-top: 0;
    }
}

/* Tablet and mobile styles */
@media (max-width: 768px) {
    .hero-shape {
        display: none;
    }

    .logo {
        width: 90px;
        height: 90px;
    }

    .hero-content {
        padding: 1.5rem;
    }

    .tagline {
        margin-bottom: 2rem;
    }

    /* Visual grid - original layout */
    .visual-section {
        padding: 4rem 2rem;
    }
    
    .visual-grid {
        gap: 2rem;
    }
    
    .visual-item:nth-child(1),
    .visual-item:nth-child(2),
    .visual-item:nth-child(3) {
        grid-column: 1 / 13;
        grid-row: auto;
        aspect-ratio: 1;
    }

    .ticket-details {
        gap: 2.5rem;
    }

    .about-preview,
    .ticket-cta {
        padding: 6rem 2rem;
    }

    .visual-text {
        font-size: 1.5rem;
    }

    .detail-item::before {
        width: 30px;
    }

    /* Footer - NOT fixed, vertical list */
    footer {
        position: relative;
        background: rgba(15, 17, 8, 0.95);
        padding: 2rem 1rem;
        border-top: 2px solid var(--gold);
        margin-top: 3rem;
    }
    
    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        margin-bottom: 2rem;
    }
    
    .footer-links a {
        text-align: center;
        padding: 1rem;
        border-bottom: 1px solid rgba(212, 168, 67, 0.2);
        font-size: 0.9rem;
    }
    
    .footer-links a:last-child {
        border-bottom: none;
    }
    
    .footer-links a:active {
        background: rgba(212, 168, 67, 0.1);
    }
    
    .footer-bottom {
        text-align: center;
        font-size: 0.75rem;
        opacity: 0.6;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .cta-btn {
        min-height: 48px;
        padding: 1.2rem 3rem;
    }

    .footer-links a {
        padding: 1rem;
        min-height: 48px;
    }

    .visual-item:hover {
        transform: none;
    }

    .visual-overlay {
        opacity: 0.8;
    }
}

/* Desktop - show everything normally */
@media (min-width: 969px) {
    .nav-links > a {
        display: inline-block !important;
    }
}

.about-image .visual-item {
    width: 100%;
    
    height: 600px; /* adjust as needed */
    background-size: cover;
    background-position: center;
    display: block;
}