/**
 * Leaflet Design System Integration - React 19 Compatible
 *
 * Custom styles for vanilla Leaflet integration with Design System 2.0
 * Overrides default Leaflet styles to match heritage gold theme.
 *
 * @package Opanije
 * @subpackage CampFinal
 * @since 3.2.0
 */

/* =================================================================
   MARKER ANIMATIONS
   ================================================================= */

/**
 * Bounce animation for marker pins
 */
@keyframes heritage-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/**
 * Pulse/ping animation for marker highlight ring
 */
@keyframes heritage-ping {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  75%, 100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* =================================================================
   CUSTOM MARKER STYLES
   ================================================================= */

/* Remove default Leaflet marker styles */
.custom-heritage-marker {
  background: transparent !important;
  border: none !important;
}

/* Marker container */
.heritage-marker-container {
  position: relative;
  width: 32px;
  height: 32px;
}

/* Marker pin (main circle) */
.heritage-marker-pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 4px 12px rgba(43, 40, 35, 0.25);
  animation: heritage-bounce 1.5s ease-in-out infinite;
}

/* Marker pulse ring */
.heritage-marker-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  opacity: 0.5;
  animation: heritage-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* =================================================================
   POPUP STYLING
   Design System 2.0 integration for map popups
   ================================================================= */

/* Custom popup class */
.heritage-popup .leaflet-popup-content-wrapper {
  border-radius: 12px;
  border-top: 3px solid #B7780D;
  box-shadow: 0 10px 25px rgba(43, 40, 35, 0.15);
  padding: 0;
  overflow: hidden;
}

.heritage-popup .leaflet-popup-content {
  margin: 0;
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.heritage-popup .leaflet-popup-tip {
  background: white;
  box-shadow: 0 3px 8px rgba(43, 40, 35, 0.1);
}

/* Popup content styling */
.heritage-popup-content {
  padding: 16px;
}

.heritage-popup-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #2B2823;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.heritage-popup-subtitle {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: #59554F;
  margin: 0;
  line-height: 1.4;
}

/* Default Leaflet popup overrides (for any non-custom popups) */
.leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(43, 40, 35, 0.12) !important;
}

.leaflet-popup-content {
  margin: 12px 16px !important;
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 14px;
  line-height: 1.5;
}

.leaflet-popup-tip {
  background: white !important;
}

/* =================================================================
   ZOOM CONTROLS
   Heritage gold accent on hover/focus
   ================================================================= */

.leaflet-control-zoom {
  border: none !important;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(43, 40, 35, 0.08) !important;
}

.leaflet-control-zoom a {
  background: #FFFFFF !important;
  color: #2B2823 !important;
  border: none !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  transition: background-color 150ms ease, color 150ms ease;
}

.leaflet-control-zoom a:first-child {
  border-radius: 8px 8px 0 0 !important;
  border-bottom: 1px solid #F4F3F0 !important;
}

.leaflet-control-zoom a:last-child {
  border-radius: 0 0 8px 8px !important;
}

.leaflet-control-zoom a:hover {
  background: rgba(183, 120, 13, 0.1) !important;
  color: #B7780D !important;
}

/* Improved focus indicator for accessibility - WCAG 2.4.7 (BUG-008 fix) */
.leaflet-control-zoom a:focus {
  outline: 3px solid #B7780D !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(183, 120, 13, 0.3);
}

.leaflet-control-zoom a.leaflet-disabled {
  background: #F4F3F0 !important;
  color: #888580 !important;
  cursor: not-allowed;
}

/* =================================================================
   ATTRIBUTION
   Subdued styling to not distract from map content
   ================================================================= */

.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(4px);
  border-radius: 4px;
  padding: 2px 6px !important;
  font-size: 10px !important;
  color: #888580 !important;
}

.leaflet-control-attribution a {
  color: #59554F !important;
  text-decoration: none;
}

.leaflet-control-attribution a:hover {
  color: #B7780D !important;
  text-decoration: underline;
}

/* =================================================================
   CUSTOM SCROLLBAR FOR LOCATION CARDS
   Heritage gold themed scrollbar
   ================================================================= */

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #B7780D;
  border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #D8A81B;
}

/* Firefox scrollbar styling */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #B7780D transparent;
}

/* =================================================================
   LINE CLAMP UTILITY
   For truncating location descriptions
   ================================================================= */

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =================================================================
   MAP CONTAINER FIXES
   Ensure proper rendering in WordPress context
   ================================================================= */

.leaflet-container {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: #F4F3F0;
}

/* Fix for map tiles in some WordPress themes */
.leaflet-tile-pane img {
  max-width: none !important;
}

/* Ensure proper z-index stacking */
.leaflet-pane {
  z-index: 1;
}

.leaflet-control {
  z-index: 10;
}

/* =================================================================
   RESPONSIVE ADJUSTMENTS
   Mobile-first optimizations
   ================================================================= */

@media (max-width: 767px) {
  /* Larger touch targets for mobile */
  .leaflet-control-zoom a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 20px !important;
  }

  /* Adjust popup for mobile */
  .heritage-popup .leaflet-popup-content-wrapper,
  .leaflet-popup-content-wrapper {
    max-width: 260px;
  }

  /*
   * Mobile markers: Maintain 32px minimum for touch targets
   * BUG-007 fix: Removed scaling that reduced markers to 28px
   * Note: MobileMapExplorer uses separate 48px markers for optimal touch UX
   */
  .heritage-marker-container {
    /* No scaling on mobile - maintain touch target size */
  }

  .heritage-marker-pin,
  .heritage-marker-pulse {
    /* Keep base 32px size for accessibility compliance */
    width: 32px;
    height: 32px;
  }
}

/* =================================================================
   ACCESSIBILITY - REDUCED MOTION
   Respect user preferences for reduced motion
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  .heritage-marker-pin,
  .heritage-marker-pulse {
    animation: none !important;
  }

  .heritage-marker-pulse {
    display: none;
  }

  /* Disable tooltip and popup animations */
  .heritage-tooltip {
    animation: none !important;
    opacity: 1 !important;
  }

  .heritage-popup .leaflet-popup-content-wrapper {
    animation: none !important;
  }

  /* Disable marker hover transitions */
  .heritage-marker-container:hover .heritage-marker-pin,
  .heritage-marker-container.marker-active .heritage-marker-pin {
    transition: none !important;
  }
}

/* =================================================================
   FOCUS INDICATORS - Accessibility
   Clear focus states for keyboard navigation
   ================================================================= */

.heritage-marker-container:focus-visible .heritage-marker-pin,
.leaflet-marker-icon:focus-visible .heritage-marker-pin {
  outline: 3px solid #B7780D !important;
  outline-offset: 4px;
  border-radius: 50%;
}

/* =================================================================
   HIGH CONTRAST MODE
   Enhanced visibility for accessibility
   ================================================================= */

@media (prefers-contrast: high) {
  .heritage-marker-pin {
    border-width: 5px !important;
    border-color: white !important;
  }

  .heritage-marker-container.marker-active .heritage-marker-pin {
    box-shadow: 0 0 0 5px white,
                0 0 30px rgba(0, 0, 0, 0.8) !important;
  }

  .heritage-tooltip {
    background: #000 !important;
    border-left-color: #B7780D !important;
    border-left-width: 4px !important;
  }

  .heritage-popup .leaflet-popup-content-wrapper {
    border: 3px solid #000 !important;
  }
}