/**
 * Nature Park Map - SVG Icon Styles
 *
 * Styles for custom SVG icons injected via JavaScript
 * in Getwid Image Hotspot blocks (Nature Park page only).
 *
 * @package irvine-guide-2023
 * @version 1.0.0
 * @date 2026-04-09
 */

/**
 * Lock green circle size - ensures consistent hotspot dot size
 * regardless of SVG icon size inside
 * Sized to match Figma design specs
 */
.wp-block-getwid-image-hotspot__dot.has-custom-icon { display: flex; 
  align-items: center; justify-content: center;
  width: 40px !important; height: 40px !important;
}

/**
 * Icon container - ensure it's properly sized and centered
 */
.wp-block-getwid-image-hotspot__dot-icon[data-svg-icon-applied="true"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

.wp-block-getwid-image-hotspot .wp-block-getwid-image-hotspot__dot.has-animation-pulse:before {
  animation: 'getwidPulseAnimation' 2s ease infinite!important;
}

/**
 * Hide original Font Awesome icon
 * ONLY for hotspots with custom SVG icons
 */
.wp-block-getwid-image-hotspot__dot.has-custom-icon .wp-block-getwid-image-hotspot__dot-icon:before {
  display: none !important;
  content: none !important;
}

/**
 * SVG Icon Sizing and Display
 */
.wp-block-getwid-image-hotspot__dot-icon-svg {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;

  /* Make SVGs white to show against green hotspot background */
  filter: brightness(0) invert(1);

  /* Smooth rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;

  /* Remove any default margins */
  margin: 0;
  padding: 2px;
}
.wp-block-getwid-image-hotspot__dot-icon-svg.center {
  width: 24px;
  height: 24px;
}

/**
 * Preserve pulse animation behavior
 * (Animation is applied to parent .wp-block-getwid-image-hotspot__dot)
 */
.wp-block-getwid-image-hotspot__dot:hover .wp-block-getwid-image-hotspot__dot-icon-svg {
  /* Maintain icon appearance on hover */
  filter: brightness(0) invert(1);
}

/**
 * Responsive sizing
 * Proportionally scaled circles and icons for tablet/mobile
 * Based on 40px desktop size from Figma
 */
@media screen and (max-width: 768px) {
  /* Tablet: 33px (83% of desktop) */
  .wp-block-getwid-image-hotspot__dot.has-custom-icon {
    width: 33px !important;
    height: 33px !important;
    min-width: 33px !important;
    min-height: 33px !important;
  }

  .wp-block-getwid-image-hotspot__dot-icon-svg {
    width: 1.18em;
    height: 1.18em;
    max-width: 1.18em;
    max-height: 1.18em;
  }
}

@media screen and (max-width: 600px) {
  /* Mobile: 29px (72% of desktop) */
  .wp-block-getwid-image-hotspot__dot.has-custom-icon {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    min-height: 29px !important;
  }

  .wp-block-getwid-image-hotspot__dot-icon-svg {
    width: 1.06em;
    height: 1.06em;
    max-width: 1.06em;
    max-height: 1.06em;
  }
}

/**
 * Fallback for browsers that don't support object-fit
 */
@supports not (object-fit: contain) {
  .wp-block-getwid-image-hotspot__dot-icon-svg {
    height: auto;
    width: 100%;
  }
}

/**
 * Ensure tooltips still work
 * (Tippy.js attaches to .wp-block-getwid-image-hotspot__dot parent)
 */
.wp-block-getwid-image-hotspot__dot[data-svg-icon-applied] {
  /* Preserve clickable area */
  cursor: pointer;
}

/**
 * Loading state (optional)
 * Show while SVGs are being replaced
 */
.wp-block-getwid-image-hotspot__dot-icon:not([data-svg-icon-applied="true"]) {
  /* Keep original Font Awesome icon visible until SVG loads */
  opacity: 1;
  transition: opacity 0.2s ease;
}

.wp-block-getwid-image-hotspot__dot-icon[data-svg-icon-applied="true"] {
  /* Fade in SVG */
  opacity: 1;
}

/**
 * Debug mode (uncomment to highlight replaced icons)
 */
/*
.wp-block-getwid-image-hotspot__dot-icon[data-svg-icon-applied="true"] {
  outline: 2px dashed red;
}
*/