/* ------------------------ */
/* MOBILE OPTIMIZATION CSS  */
/* ------------------------ */

/* Only apply to screens 768px wide or less */
@media only screen and (max-width: 768px) {

    /* --- General layout --- */
    body, html {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    .container, .wrapper, main, section {
        width: 100% !important;
        padding: 10px !important;
        margin: 0 auto !important;
    }

    /* --- Images --- */
    img, .logo, .banner, .hero-image {
        max-width: 100% !important;
        height: auto !important;
    }

    /* --- Navigation --- */
    nav ul {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    nav ul li {
        margin: 10px 0 !important;
        text-align: center !important;
    }

    .menu-toggle {
        display: block !important;
        cursor: pointer;
        font-size: 24px;
        padding: 10px 0;
        text-align: center;
    }

    nav.mobile-menu ul {
        display: none;
        flex-direction: column;
    }

    nav.mobile-menu ul.active {
        display: flex;
    }

    /* --- Text --- */
    h1, h2, h3, h4, h5, h6 {
        font-size: 1.2em !important;
        margin: 10px 0 !important;
    }

    p, li, a {
        font-size: 16px !important;
    }

    /* --- Buttons --- */
    button, .btn, a.button {
        min-height: 44px !important;
        min-width: 44px !important;
        font-size: 16px !important;
        padding: 10px 15px !important;
        display: block;
        width: 100%;
        margin: 10px 0;
    }

    /* --- Forms --- */
    input, textarea, select {
        width: 100% !important;
        padding: 10px !important;
        margin-bottom: 15px !important;
        font-size: 16px !important;
        box-sizing: border-box;
    }

    label {
        display: block !important;
        margin-bottom: 5px !important;
    }

    /* --- Footer --- */
    footer {
        text-align: center !important;
        padding: 20px 10px !important;
    }

    /* --- Hide desktop-only elements --- */
    .desktop-only {
        display: none !important;
    }

    /* --- Optional mobile-only elements --- */
    .mobile-only {
        display: block !important;
    }

    /* --- Adjust sections spacing --- */
    section {
        margin-bottom: 20px !important;
    }

    /* --- Media embeds (video, map) --- */
    iframe, video, embed {
        width: 100% !important;
        height: auto !important;
    }

}