/**
 * map-toggle-touch-fix.css
 * 
 * CSS-based solution to prevent drag interference on mobile map toggle buttons
 * 
 * Add this CSS to your stylesheet or create a new link tag in your HTML
 * This approach uses pointer-events to prevent the buttons from capturing
 * mouse/touch events that should go to the map
 */

/* 
 * SOLUTION 1: Disable pointer events on button container entirely
 * This allows touches to pass through to the map
 * The SVG icons inside handle their own interactions
 */
.map-toggle {
  /* Allow the map to receive drag/pan events even if finger touches button */
  pointer-events: none;
}

/* 
 * Re-enable pointer events for the actual clickable SVG icon
 * This allows users to still tap/click the button
 */
.map-toggle svg {
  pointer-events: auto;
  cursor: pointer;
}

/* 
 * Additional touch-action CSS property for better mobile handling
 * Prevents default browser touch behaviors that might conflict with map
 */
.map-toggle {
  touch-action: manipulation;
}

/* ============================================================
 * SOLUTION 2: Using touch-action for more control (Alternative)
 * ============================================================
 * 
 * If the above doesn't work well with your map library,
 * you can instead use touch-action to control how the button
 * responds to touch gestures:
 * 
 * .map-toggle {
 *   touch-action: none;  // Prevents all default touch behaviors
 *   pointer-events: auto; // But still allows clicks/taps
 * }
 * 
 * Then use JavaScript to handle the tap events manually
 */

/* ============================================================
 * SOLUTION 3: Using user-select for additional refinement
 * ============================================================
 * 
 * Prevent text selection when interacting with buttons on mobile
 */
.map-toggle {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* ============================================================
 * RESPONSIVE ADJUSTMENTS
 * ============================================================
 * 
 * Only apply these restrictions on small screens (mobile)
 * On desktop, normal interaction is fine
 */
@media screen and (max-width: 700px) {
  .map-toggle {
    pointer-events: none;
  }

  .map-toggle svg {
    pointer-events: auto;
  }
}

/* ============================================================
 * HOW TO USE:
 * 
 * 1. Add this file to your CSS folder:
 *    css/map-toggle-touch-fix.css
 * 
 * 2. Link it in your index.html AFTER main.css:
 *    <link rel="stylesheet" href="css/main.css" />
 *    <link rel="stylesheet" href="css/map-toggle-touch-fix.css" />
 * 
 * 3. Done! The buttons won't interfere with map panning on mobile
 * 
 * ============================================================
 */