/**
 * Responsive Fixes & Utilities
 * Additional mobile optimization styles
 */

/* =====================================================
   Global Mobile Fixes
   ===================================================== */

/* Prevent horizontal overflow */
html {
    overflow-x: hidden;
    width: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Ensure all children respect container width */
* {
    box-sizing: border-box;
}

/* =====================================================
   Mobile-First Typography
   ===================================================== */
@media (max-width: 768px) {
    /* Better text wrapping */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Better paragraph spacing */
    p {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* =====================================================
   Mobile Navigation Overlay
   ===================================================== */
@media (max-width: 992px) {
    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    
    /* Backdrop overlay */
    .navbar-menu::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        pointer-events: none;
        z-index: -1;
    }
    
    .navbar-menu.active::before {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* =====================================================
   Mobile Content Optimization
   ===================================================== */
@media (max-width: 576px) {
    /* Better image handling */
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    
    /* Prevent code overflow */
    pre, code {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
    /* Better table handling */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    
    /* Better iframe handling */
    iframe {
        max-width: 100%;
    }
}

/* =====================================================
   Mobile Grid Fixes
   ===================================================== */
@media (max-width: 576px) {
    /* Ensure grids don't overflow */
    [class*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    
    /* Fix flex wrapping */
    [class*="flex"] {
        flex-wrap: wrap;
    }
}

/* =====================================================
   Mobile Form Enhancements
   ===================================================== */
@media (max-width: 576px) {
    /* Better input sizing */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important; /* Prevent iOS zoom */
        width: 100%;
        max-width: 100%;
    }
    
    /* Better button spacing */
    button,
    .btn {
        width: 100%;
        max-width: 100%;
    }
}

/* =====================================================
   Utility Classes for Mobile
   ===================================================== */

/* Hide on mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    .show-mobile {
        display: block !important;
    }
}

/* Mobile text alignment */
@media (max-width: 768px) {
    .mobile-center {
        text-align: center !important;
    }
    
    .mobile-left {
        text-align: left !important;
    }
    
    .mobile-right {
        text-align: right !important;
    }
}

/* Mobile spacing */
@media (max-width: 768px) {
    .mobile-mt-1 { margin-top: 0.5rem !important; }
    .mobile-mt-2 { margin-top: 1rem !important; }
    .mobile-mt-3 { margin-top: 1.5rem !important; }
    .mobile-mt-4 { margin-top: 2rem !important; }
    
    .mobile-mb-1 { margin-bottom: 0.5rem !important; }
    .mobile-mb-2 { margin-bottom: 1rem !important; }
    .mobile-mb-3 { margin-bottom: 1.5rem !important; }
    .mobile-mb-4 { margin-bottom: 2rem !important; }
    
    .mobile-p-1 { padding: 0.5rem !important; }
    .mobile-p-2 { padding: 1rem !important; }
    .mobile-p-3 { padding: 1.5rem !important; }
    .mobile-p-4 { padding: 2rem !important; }
}

/* =====================================================
   Safari iOS Fixes
   ===================================================== */
@supports (-webkit-touch-callout: none) {
    /* Fix for iOS viewport height bug */
    .hero {
        min-height: -webkit-fill-available;
    }
    
    /* Better input styling for iOS */
    input,
    textarea,
    select {
        -webkit-appearance: none;
        border-radius: 0;
    }
}

/* =====================================================
   Android Fixes
   ===================================================== */
@media (max-width: 768px) {
    /* Better scrolling on Android */
    .navbar-menu,
    .skills-tabs,
    .projects-filter,
    .code-body {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
}

/* =====================================================
   Performance Optimizations for Mobile
   ===================================================== */
@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
    
    /* Optimize background attachments */
    [style*="background-attachment: fixed"] {
        background-attachment: scroll !important;
    }
}

/* =====================================================
   Accessibility Improvements for Mobile
   ===================================================== */
@media (max-width: 768px) {
    /* Better focus indicators on mobile */
    a:focus,
    button:focus,
    input:focus,
    textarea:focus {
        outline: 2px solid var(--primary, #7C9A82);
        outline-offset: 2px;
    }
    
    /* Larger tap targets */
    a,
    button,
    [role="button"],
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* =====================================================
   Print Friendly on Mobile
   ===================================================== */
@media print {
    /* Hide navigation and decorative elements */
    .navbar,
    .footer,
    .scroll-top,
    .particles-bg,
    .floating-shape,
    .hero-visual,
    .cursor-dot,
    .cursor-outline {
        display: none !important;
    }
    
    /* Optimize for print */
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
}