/* Mobile UI Fixes - Safe CSS-only changes */
/* This file only adds mobile-specific styles without modifying existing functionality */
/* Note: Hamburger positioning is now in styles.css for global application */

/* Fix 2: Hero section - Show text ABOVE visual on mobile */
@media (max-width: 900px) {
    /* Override the existing order: -1 on hero-stack-visual */
    .hero-stack-visual {
        order: 2 !important; /* Visual goes second */
    }
    
    .hero-text-stack,
    .hero-content {
        order: 1 !important; /* Text goes first */
    }
    
    /* Ensure proper spacing */
    .hero-layout {
        gap: 2rem;
    }
    
    /* Center align text on mobile for better readability */
    .hero-text-stack {
        text-align: center;
    }
    
    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Ensure these fixes don't affect desktop */
@media (min-width: 901px) {
    .hero-stack-visual {
        order: initial;
    }
    
    .hero-text-stack,
    .hero-content {
        order: initial;
    }
}

@media (min-width: 769px) {
    .hamburger {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
    }
}