/**
 * Interactive Map Styles
 *
 * Styles for interactive SVG maps with clickable regions.
 *
 * @package InteractiveElements
 * @since 1.0.0
 */

/* ==========================================================================
   Container Styles
   ========================================================================== */

.ie-interactive-map-container {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

.ie-map-wrapper {
	position: relative;
}

/* SVG Responsive Sizing */
.ie-interactive-map-container svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   Screen Reader Only & Announcements
   ========================================================================== */

.ie-interactive-map-container .ie-sr-only,
.ie-interactive-map-container .ie-sr-announcements {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   SVG Link Styles
   ========================================================================== */

.ie-interactive-map-container svg a {
	cursor: pointer;
	outline: none;
}

.ie-interactive-map-container svg a:focus {
	outline: 2px dashed #0073aa;
	outline-offset: 2px;
}

.ie-interactive-map-container svg a:focus:not(:focus-visible) {
	outline: none;
}

.ie-interactive-map-container svg a:focus-visible {
	outline: 3px solid #0073aa;
	outline-offset: 2px;
}

/* Active link state */
.ie-interactive-map-container svg a.active-svg-link {
	filter: brightness(1.1);
}

.ie-interactive-map-container svg a.active-svg-link rect,
.ie-interactive-map-container svg a.active-svg-link circle,
.ie-interactive-map-container svg a.active-svg-link path,
.ie-interactive-map-container svg a.active-svg-link polygon {
	stroke: #0073aa;
	stroke-width: 3px;
}

/* Hover effects */
.ie-interactive-map-container svg a:hover {
	filter: brightness(1.05);
}

.ie-interactive-map-container svg a:hover rect,
.ie-interactive-map-container svg a:hover circle,
.ie-interactive-map-container svg a:hover path,
.ie-interactive-map-container svg a:hover polygon {
	filter: brightness(1.1);
	transition: filter 0.2s ease;
}

/* ==========================================================================
   Content Reveal Animation
   ========================================================================== */

@keyframes ie-content-reveal {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ie-content-reveal {
	animation: ie-content-reveal 0.3s ease-out forwards;
}

/* Animation speed classes */
.ie-animation-slow .ie-content-reveal {
	animation-duration: 0.5s;
}

.ie-animation-normal .ie-content-reveal {
	animation-duration: 0.3s;
}

.ie-animation-fast .ie-content-reveal {
	animation-duration: 0.15s;
}

/* ==========================================================================
   Map Content Styles
   ========================================================================== */

.ie-map-content {
	margin-top: 20px;
}

/* Generic map content div styling */
.ie-interactive-map-container [id^="map-content-"],
.ie-interactive-map-container .map-content {
	display: none;
	padding: 20px;
	background: #f9f9f9;
	border-radius: 8px;
	border-left: 4px solid #0073aa;
	margin-top: 15px;
}

.ie-interactive-map-container [id^="map-content-"][style*="display: block"],
.ie-interactive-map-container .map-content[style*="display: block"] {
	display: block;
}

/* ==========================================================================
   Notice Styles (Admin)
   ========================================================================== */

.ie-map-notice {
	text-align: center;
	padding: 40px 20px;
	background: #fff8e5;
	border: 1px solid #ffcc00;
	border-radius: 8px;
	margin: 20px 0;
}

.ie-notice-icon {
	font-size: 48px;
	color: #ffcc00;
	margin-bottom: 15px;
}

.ie-notice-icon .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
}

.ie-map-notice h3 {
	margin: 0 0 10px;
	color: #333;
}

.ie-map-notice p {
	margin: 0 0 15px;
	color: #666;
}

.ie-map-id-info {
	font-size: 14px;
}

.ie-map-id-info code {
	background: #fff;
	padding: 3px 8px;
	border-radius: 3px;
	font-family: 'Courier New', monospace;
}

/* ==========================================================================
   Revealed Content Focus
   ========================================================================== */

.ie-interactive-map-container [role="region"]:focus {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
}

.ie-interactive-map-container [role="region"]:focus:not(:focus-visible) {
	outline: none;
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ie-interactive-map-container *,
	.ie-interactive-map-container *::before,
	.ie-interactive-map-container *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}