/**
 * Mobile Enhancements
 * Additional styles for better mobile experience
 */

/* ==================== TOUCH OPTIMIZATIONS ==================== */

/* Larger tap targets for mobile */
@media (max-width: 768px) {
    a, button, input, select, textarea {
        -webkit-tap-highlight-color: rgba(0, 105, 255, 0.2);
    }
    
    /* Prevent text selection on interactive elements */
    .btn, .nav-link, .mobile-nav-menu a {
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Better touch scrolling */
    .mobile-menu-content,
    .footer-content {
        -webkit-overflow-scrolling: touch;
    }
}

/* ==================== MOBILE HEADER ENHANCEMENTS ==================== */

@media (max-width: 768px) {
    /* Fixed header with shadow on scroll */
    .site-header.scrolled {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    /* Animated hamburger menu */
    .mobile-menu-toggle {
        position: relative;
        transition: transform 0.3s ease;
    }
    
    .mobile-menu-toggle:active {
        transform: scale(0.95);
    }
    
    .mobile-menu-toggle span {
        transform-origin: center;
    }
    
    /* Mobile menu slide in animation */
    .mobile-menu-overlay {
        animation: fadeIn 0.3s ease;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    
    .mobile-menu-content {
        animation: slideInTop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    @keyframes slideInTop {
        from {
            transform: translateY(-30px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    /* Mobile nav items stagger animation */
    .mobile-nav-menu li {
        animation: fadeInUp 0.5s ease backwards;
    }
    
    .mobile-nav-menu li:nth-child(1) { animation-delay: 0.1s; }
    .mobile-nav-menu li:nth-child(2) { animation-delay: 0.15s; }
    .mobile-nav-menu li:nth-child(3) { animation-delay: 0.2s; }
    .mobile-nav-menu li:nth-child(4) { animation-delay: 0.25s; }
    .mobile-nav-menu li:nth-child(5) { animation-delay: 0.3s; }
    .mobile-nav-menu li:nth-child(6) { animation-delay: 0.35s; }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Active link indicator */
    .mobile-nav-menu a.active {
        position: relative;
    }
    
    .mobile-nav-menu a.active::before {
        content: '';
        position: absolute;
        left: var(--space-3);
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 60%;
        background: linear-gradient(180deg, var(--color-primary-500), var(--color-secondary-500));
        border-radius: 2px;
    }
}

/* ==================== MOBILE FOOTER ENHANCEMENTS ==================== */

@media (max-width: 768px) {
    /* Collapsible footer sections */
    .footer-section {
        border-bottom: 1px solid var(--color-border-secondary);
        padding-bottom: var(--space-4);
    }
    
    .footer-section:last-of-type {
        border-bottom: none;
    }
    
    .footer-section h4 {
        position: relative;
        padding: var(--space-3) 0;
        cursor: pointer;
        user-select: none;
    }
    
    /* Optional: Accordion style footer */
    .footer-section.collapsed .footer-links {
        display: none;
    }
    
    .footer-section h4::after {
        content: '▼';
        position: absolute;
        right: 0;
        font-size: 0.75rem;
        transition: transform 0.3s ease;
    }
    
    .footer-section.collapsed h4::after {
        transform: rotate(-90deg);
    }
    
    /* Social links - better spacing */
    .footer-social {
        margin-top: var(--space-4);
        gap: var(--space-4);
    }
    
    .social-link {
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .social-link:active {
        transform: scale(0.9);
    }
}

/* ==================== MOBILE TYPOGRAPHY ==================== */

@media (max-width: 768px) {
    /* Better readability on mobile */
    body {
        font-size: 16px; /* Prevent zoom on iOS */
        line-height: 1.6;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    
    p {
        margin-bottom: var(--space-4);
    }
    
    /* Better link contrast on mobile */
    a:not(.btn) {
        text-decoration: underline;
        text-decoration-color: rgba(0, 105, 255, 0.3);
        text-underline-offset: 3px;
    }
    
    a:not(.btn):hover {
        text-decoration-color: var(--color-primary-400);
    }
}

/* ==================== MOBILE BUTTONS ==================== */

@media (max-width: 768px) {
    .btn {
        min-height: 44px; /* iOS touch target */
        font-size: 1rem;
    }
    
    .btn:active {
        transform: scale(0.98);
    }
    
    .btn-sm {
        min-height: 36px;
        font-size: 0.875rem;
    }
    
    .btn-lg {
        min-height: 52px;
        font-size: 1.125rem;
    }
    
    /* Full width buttons on mobile */
    .mobile-nav-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== MOBILE CARDS ==================== */

@media (max-width: 768px) {
    .card {
        padding: var(--space-4);
    }
    
    .card:hover {
        transform: none; /* Disable hover effects on mobile */
    }
    
    .card:active {
        transform: scale(0.98);
    }
}

/* ==================== MOBILE FORMS ==================== */

@media (max-width: 768px) {
    input,
    textarea,
    select {
        font-size: 16px; /* Prevent iOS zoom */
        min-height: 44px;
        padding: var(--space-3) var(--space-4);
    }
    
    textarea {
        min-height: 120px;
    }
    
    /* Better focus states */
    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: var(--color-primary-500);
        box-shadow: 0 0 0 3px rgba(0, 105, 255, 0.2);
    }
}

/* ==================== MOBILE SPACING ==================== */

@media (max-width: 768px) {
    .section-padding {
        padding: var(--space-12) 0;
    }
    
    .section-padding-lg {
        padding: var(--space-16) 0;
    }
    
    .container {
        padding: 0 var(--space-4);
    }
}

/* ==================== MOBILE SCROLL ANIMATIONS ==================== */

@media (max-width: 768px) {
    /* Disable complex animations on mobile for performance */
    .animate-float {
        animation: none;
    }
    
    /* Simpler scroll reveal */
    [data-reveal] {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s ease;
    }
    
    [data-reveal].visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== MOBILE UTILITIES ==================== */

@media (max-width: 768px) {
    /* Hide on mobile */
    .hide-mobile {
        display: none !important;
    }
    
    /* Show only on mobile */
    .show-mobile {
        display: block !important;
    }
    
    /* Text alignment */
    .mobile-text-center {
        text-align: center;
    }
    
    .mobile-text-left {
        text-align: left;
    }
    
    /* Flex direction */
    .mobile-flex-col {
        flex-direction: column;
    }
    
    /* Full width */
    .mobile-w-full {
        width: 100% !important;
    }
}

/* ==================== SAFE AREAS (iPhone X+) ==================== */

@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .site-header {
            padding-left: max(var(--space-4), env(safe-area-inset-left));
            padding-right: max(var(--space-4), env(safe-area-inset-right));
        }
        
        .site-footer {
            padding-bottom: max(var(--space-12), env(safe-area-inset-bottom));
        }
        
        .mobile-menu-content {
            padding-left: max(var(--space-4), env(safe-area-inset-left));
            padding-right: max(var(--space-4), env(safe-area-inset-right));
            padding-bottom: max(var(--space-8), env(safe-area-inset-bottom));
        }
    }
}

/* ==================== LANDSCAPE MODE ==================== */

@media (max-width: 768px) and (orientation: landscape) {
    .header-container {
        height: 52px;
    }
    
    .logo-icon {
        width: 28px;
        height: 28px;
    }
    
    .logo-text {
        font-size: 1rem !important;
    }
    
    .mobile-menu-content {
        padding: var(--space-4);
    }
    
    .mobile-nav-menu a {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
    }
}

/* ==================== DARK MODE SUPPORT ==================== */

@media (prefers-color-scheme: dark) {
    /* Already dark by default, but add overrides if needed */
}

/* ==================== REDUCED MOTION ==================== */

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

/* ==================== HIGH CONTRAST MODE ==================== */

@media (prefers-contrast: high) {
    .btn {
        border: 2px solid currentColor;
    }
    
    .nav-link,
    .mobile-nav-menu a {
        border: 1px solid var(--color-border-accent);
    }
}