/**
 * Mobile Responsive Fixes
 *
 * Overrides for site-wide mobile margins, padding, and layout
 * consistency. Loaded after app.css to patch compiled Tailwind.
 *
 * @package govstack
 */

/* ============================================
   Mobile – ensure consistent side margins
   ============================================ */
@media (max-width: 767px) {
    /* Increase default container side padding on mobile */
    .container {
        padding-right: 1.25rem; /* 20px */
        padding-left: 1.25rem;
    }

    /* Sections that use px-8 (32px) – reduce on mobile */
    .px-8 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Sections using px-16 (64px) – way too wide on mobile */
    .px-16 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Prevent content overflow on mobile */
    body {
        overflow-x: hidden;
    }

    /* Fix hero section padding */
    section > .container {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    /* Tighten large vertical spacing on mobile */
    .py-20 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .py-16 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .mb-24 {
        margin-bottom: 3rem !important;
    }

    .mt-24 {
        margin-top: 3rem !important;
    }

    .mb-20 {
        margin-bottom: 2.5rem !important;
    }

    .mt-20 {
        margin-top: 2.5rem !important;
    }

    /* Ensure images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* ============================================
   Small phones (< 480px)
   ============================================ */
@media (max-width: 479px) {
    .container {
        padding-right: 1rem; /* 16px */
        padding-left: 1rem;
    }

    section > .container {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Prevent horizontal scroll from elements with negative margins */
    .-mx-8 {
        margin-left: -1rem !important;
        margin-right: -1rem !important;
    }
}