/* ===== MOBILE RESPONSIVE - LIGHTWEIGHT FIXES ===== */
/* Focus on layout fixes, not typography overrides */

/* Prevent horizontal scrolling */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ===== MOBILE (max-width: 900px) ===== */
@media (max-width: 900px) {

    /* Images responsive */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Containers - prevent overflow */
    .container,
    .wrapper {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
    }

    /* Grid layouts - single column */
    .features-grid,
    .grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Cards take full width */
    .feature-card,
    .card {
        width: 100%;
        max-width: 100%;
    }

    /* Two-column layouts stack */
    .two-column,
    .col-2 {
        flex-direction: column;
    }

    .column,
    .col {
        width: 100%;
        max-width: 100%;
    }

    /* Modals fit screen */
    .auth-box,
    .modal-content,
    .support-modal-content {
        width: 95%;
        max-width: 400px;
        margin: 20px auto;
        padding: 20px;
    }
}

/* ===== SMALL PHONES (max-width: 480px) ===== */
@media (max-width: 480px) {

    /* Slightly smaller hero text */
    .hero h1 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 0.95rem;
    }

    /* Tighter section padding */
    section {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ===== TOUCH DEVICE FORM FIX ===== */
@media (hover: none) and (pointer: coarse) {

    /* Prevent iOS zoom on input focus */
    input,
    select,
    textarea {
        font-size: 16px;
    }
}

/* ===== LANDSCAPE PHONE ===== */
@media (max-height: 500px) and (orientation: landscape) {

    .hero,
    .hero-section {
        min-height: auto;
        padding-top: 80px;
    }

    nav {
        height: 60px;
    }
}

/* ===== FIX OVERFLOW ===== */
pre,
code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
}

table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

video,
iframe {
    max-width: 100%;
    height: auto;
}