/* Mobile Responsive Styles */

/* Base Mobile Styles */
@media (max-width: 768px) {
    body {
        font-size: 16px !important;
        -webkit-text-size-adjust: 100%;
    }
    
    /* Container adjustments */
    .container {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
    }
    
    /* Touch-friendly buttons */
    button, .btn, a.button, input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
        font-size: 16px;
    }
    
    /* Forms */
    input, select, textarea {
        font-size: 16px !important;
        padding: 12px;
        width: 100%;
        max-width: 100%;
    }
    
    /* Tables responsive */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Images responsive */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Hide horizontal scroll */
    body, html {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Cards/boxes */
    .card, .box {
        margin-bottom: 15px;
        padding: 15px;
    }
    
    /* Navigation */
    nav {
        flex-direction: column;
    }
    
    nav a {
        display: block;
        padding: 15px;
        border-bottom: 1px solid #eee;
    }
}

/* Small phones */
@media (max-width: 480px) {
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }
    
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    button, .btn {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        min-height: 50vh;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    a, button {
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    }
}