/* Responsive Design for Mobile Devices */

/* Mobile-first: Default styles for mobile */
@media (max-width: 767px) {

    /* Full width container on mobile */
    body>div {
        width: 100% !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    /* Stack navigation items */
    nav ul {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    nav ul li a {
        white-space: nowrap;
    }

    /* Responsive images */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Stack columns vertically with custom order */
    .flex {
        flex-direction: column !important;
    }

    /* Full width sidebars and main content on mobile */
    aside,
    main {
        width: 100% !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb;
    }

    /* Change order: Main content first, then left sidebar, then right sidebar */
    main {
        order: 1;
    }

    aside:first-of-type {
        order: 2;
        /* Left sidebar after main */
    }

    aside:last-of-type {
        order: 3;
        /* Right sidebar last */
        border-bottom: none;
    }

    /* Footer columns stack */
    .flex.border-t.border-gray-300>div {
        width: 100% !important;
        margin-bottom: 1.5rem;
    }

    .flex.border-t.border-gray-300>div:last-child {
        margin-bottom: 0;
    }
}

/* Tablet and Desktop: Keep boxed design */
@media (min-width: 768px) {
    body>div {
        width: 960px;
        margin: 1rem auto;
    }
}