/* ==========================================================================
   Global Mobile Optimizations
   ========================================================================== */

@media (max-width: 767px) {
    /* Header Integration for Mobile */
    .site-header {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background: #333333 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
        padding: 8px 16px !important;
        min-height: 48px !important;
    }
    
    .site-header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    
    /* Minimal hamburger menu button */
    #nav-icon,
    label[for="btn-menu"] {
        position: fixed !important;
        top: 30px !important;
        right: 20px !important;
        z-index: 1002 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        cursor: pointer !important;
        width: 28px !important;
        height: 20px !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .nav-icon,
    .nav-icon.circle,
    #nav-icon .circle,
    #nav-icon > div {
        width: 28px !important;
        height: 30px !important;
        background: none !important;
        border-radius: 0 !important;
        display: block !important;
        position: relative !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .nav-icon .line,
    #nav-icon .line {
        position: absolute !important;
        background: #fff !important;
        width: 28px !important;
        height: 3px !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        transition: none !important;
        left: 0 !important;
    }
    
    .nav-icon .line.top,
    #nav-icon .line.top {
        top: 0 !important;
    }
    
    .nav-icon .line.middle,
    #nav-icon .line.middle {
        top: 8px !important;
    }
    
    .nav-icon .line.bottom,
    #nav-icon .line.bottom {
        top: 16px !important;
    }
    
    /* Adjust body for fixed header */
    body {
        padding-top: 60px !important;
    }
}