/**
 * Simple Mobile Adjustments for TATopoExplorer
 * Just make sidebar narrower on mobile without breaking functionality
 */

/* Mobile adjustments for sidebar width */
@media screen and (max-width: 768px) {
    
    /* Make sidebar narrower on mobile */
    .sidebar {
        width: calc(100% - 50px);
    }
    
    /* Adjust map margin for narrower sidebar */
    .sidebar-map {
        margin-left: calc(100% - 50px);
    }
    
    /* Fix hamburger menu touch reliability */
    #homeLayer {
        touch-action: manipulation;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    #homeLayer a {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
        cursor: pointer;
    }
    
    .leaflet-control-opacity input[type="range"] {
          touch-action: manipulation;
          -webkit-tap-highlight-color: transparent;
          pointer-events: auto;
    }

    .leaflet-control-opacity {
          touch-action: manipulation;
        }    
    .googleEarthSection {
        display: none;
    }

    /* Hide instructional text on mobile to reduce scrolling */
    .mobile-hide {
        display: none !important;
    }

    /* Make layer menu items slightly larger for easier touch interaction */
    .leaflet-control-layers label {
        font-size: 14px !important;
        padding: 2px 0 !important;
        cursor: pointer;
    }

    .leaflet-control-layers-selector {
        margin-top: 4px !important;
        margin-right: 6px !important;
        width: 18px;
        height: 18px;
    }

}