/* 
   ==========================================================================
   MOBILE STYLE (< 768px)
   ========================================================================== 
*/

@media screen and (max-width: 767px) {
    .header { 
        position: relative;
        padding: 15px;
    }

    .menu-toggle { 
        display: block; 
        background: #f8f9fa;
        border: 1px solid #ddd;
        padding: 10px 15px;
        border-radius: 5px;
        color: #333;
        cursor: pointer;
    }

    .menu-toggle:active { background: #eee; }

    .nav { 
        display: none; /* Hidden by default */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column; 
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .nav.active {
        display: flex;
    }

    .nav a { 
        margin: 0; 
        padding: 15px 20px; 
        border-bottom: 1px solid #eee; 
    }
    
    .container { width: 95%; margin: 5px auto; padding: 10px; }
    
    .layout-sidebar_left, .layout-sidebar_right { display: block; }
    .sidebar { width: 100%; margin-bottom: 20px; }
    
    /* Gallery: 2 images per row */
    .widget-render.type-image { width: 50% !important; }
    
    /* Form: Always 100% on mobile for better usability */
    .form-item.w-50, .form-item.w-100 { width: 100%; }
    
    /* Columns: Stack them vertically */
    .column-wrapper { flex-direction: column; gap: 10px; }
    
    .hero-banner h1 { font-size: 24px; }
    .hero-banner p { font-size: 14px; }
    
    .sosmed-container { justify-content: center !important; }
}