/* ======================================================
   DEVICE-COMPATIBILITY.CSS – FINAL CLEAN VERSION (FIXED)
   PURPOSE:
   - Device-based responsiveness only
   - Font scaling per screen size
   - Safe flex direction changes
   - NO colors
   - NO header/footer styling
   - NO layout overrides
====================================================== */

/* ===================== GLOBAL NORMALIZATION ===================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

/* ===================== BASE TYPOGRAPHY ===================== */
html {
    font-size: 14px;          /* Mobile-first base */
    scroll-behavior: smooth;
}

/* ===================== CONTAINER SAFETY (DESKTOP DEFAULT) ===================== */
.container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 16px;
}

/* ======================================================
   MOBILE PHONES (≤ 480px)
   - FULL WIDTH FIX
   - Remove grey sides / narrow column issue
====================================================== */
@media (max-width: 480px) {

    html {
        font-size: 14px;
    }

    /* ✅ CRITICAL FIX: container full width on mobile */
    .container {
        max-width: 100%;
        margin-inline: 0;
        padding-inline: 16px;
    }

    /* Generic stacking helpers */
    .stack-mobile {
        flex-direction: column !important;
    }

    /* Forms & wrappers */
    .contact-wrapper {
        flex-direction: column;
        gap: 40px;
    }
}

/* ======================================================
   SMALL DEVICES / LARGE PHONES (481px – 768px)
====================================================== */
@media (min-width: 481px) and (max-width: 768px) {

    html {
        font-size: 15px;
    }

    /* ✅ Same full-width safety for tablets */
    .container {
        max-width: 100%;
        margin-inline: 0;
        padding-inline: 20px;
    }
}

/* ======================================================
   TABLETS / SMALL LAPTOPS (769px – 1024px)
====================================================== */
@media (min-width: 769px) {

    html {
        font-size: 15.5px;
    }

    .container {
        max-width: 1200px;
        margin-inline: auto;
        padding-inline: 24px;
    }

    .contact-wrapper {
        flex-direction: row;
        gap: 50px;
    }
}

/* ======================================================
   DESKTOP (1025px – 1440px)
====================================================== */
@media (min-width: 1025px) {

    html {
        font-size: 16px;
    }

    .container {
        max-width: 1200px;
        padding-inline: 32px;
    }
}

/* ======================================================
   LARGE DESKTOPS (1441px+)
====================================================== */
@media (min-width: 1441px) {

    html {
        font-size: 17px;
    }

    .container {
        max-width: 1320px;
    }
}

/* ======================================================
   ACCESSIBILITY – REDUCED MOTION
====================================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}