/*---*\
    Interactive Map
    Isometric house illustration with clickable pest-location hotspots.

    KEY FEATURES:
    - Desktop:  Two-column layout – illustration (left ~55%) + text content (right ~45%)
    - Tablet:   Single-column stacked – text content on top, illustration below
    - Mobile:   Text content top, illustration below, callouts appear centered over the diagram
    - Navy wave SVG graphic hardcoded at the bottom of the section
    - Hotspot positions set via ACF draggable map picker (percentage top/left)
    - Callout popups: white card, rounded corners, shadow, fade+slide animation
    - Decorative blue curved arrow (hardcoded per design)

    IMPLEMENTATION NOTES:
    - House illustration image: /assets/images/homepage/interactive-map-house.png
    - Hotspot positions use percentage values relative to .interactive-map__map-wrap (set in block editor)
\*---*/

/* ==========================================================================
   BASE STYLES – MOBILE FIRST
   ========================================================================== */

.interactive-map {
	position: relative;
	background-color: var(--color-bg-white, #ffffff);
	padding-top: 48px;
	margin-bottom: 13px;
}

.interactive-map::before {
    content: '';
    position: absolute;
    /* z-index: -1; */
    width: 100%;
    height: 13px;
    left: 0;
    bottom: -13px;
    background: var(--secondary-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.interactive-map > .container {
	position: relative;
}

.interactive-map + section {
	z-index: -1;
}

/* --------------------------------------------------------------------------
   Main layout – illustration + content columns
   -------------------------------------------------------------------------- */

.interactive-map__layout {
	display: flex;
	flex-direction: column-reverse; /* Illustration DOM-first; content appears on top via reverse */
	gap: 0px;
	align-items: flex-start;
	padding-bottom: 0;
}

/* ==========================================================================
   CONTENT COLUMN (right on desktop, top on tablet/mobile)
   ========================================================================== */

.interactive-map__content {
	width: 100%;
}

.interactive-map__heading {
	font-size: var(--font-size-h2, 28px);
	line-height: 1.15;
	color: var(--color-primary, #0d2b6e);
	margin: 0 0 20px;
}

.interactive-map__body {
	color: var(--color-text-primary, #333333);
	margin-bottom: 28px;
}

.interactive-map__body p {
	margin: 0 0 16px;
}

.interactive-map__body p:last-child {
	margin-bottom: 0;
}

.interactive-map__btn-group {
	margin-top: 8px;
}

/* ==========================================================================
   VISUAL COLUMN (left on desktop, bottom on tablet/mobile)
   ========================================================================== */

.interactive-map__visual {
	width: 100%;
	position: relative;
	margin-bottom: -12px;
}

/* Container that house illustration and hotspot groups are anchored to */
.interactive-map__map-wrap {
	position: relative;
	display: block;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
}

.interactive-map__house {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none; /* Ensure hotspot buttons receive click events */
	user-select: none;
}

/* --------------------------------------------------------------------------
   Decorative arrow icon – hidden on mobile
   -------------------------------------------------------------------------- */

.interactive-map__arrow {
	/* display: none; */
	position: absolute;
	pointer-events: none;
	z-index: 2;
	line-height: 1;
	transform: scale(-1) rotate(337deg);
	top: -80px;
    right: -5px;
}

.interactive-map__arrow i {
	display: block;
	color: #5AA7DB;
	font-size: 75px;
}

/* ==========================================================================
   HOTSPOT GROUPS – absolutely positioned over the illustration
   ========================================================================== */

.interactive-map__hotspot-group {
	position: absolute;
	z-index: 10;
	/* Size matches the button; negative margin centers the group on the coordinate.
	   NO transform here – a transformed ancestor breaks position:fixed on the callout. */
	width: 30px;
	height: 30px;
	margin-left: -15px;
	margin-top: -15px;
}

/* Lift the active group above all siblings so the callout renders on top */
.interactive-map__hotspot-group:has(.interactive-map__callout:not([hidden])) {
	z-index: 9999;
}

/* --------------------------------------------------------------------------
   Hotspot positions are set inline from ACF (position_x / position_y).
   Callout direction modifiers are assigned in PHP based on coordinates.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Hotspot button
   -------------------------------------------------------------------------- */

.interactive-map__hotspot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: #FFF;
    filter: drop-shadow(0 0 20px #2C8AC9);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	z-index: 1;
	transition:
		transform var(--transition-fast, 0.15s) ease,
		box-shadow var(--transition-fast, 0.15s) ease;
}

.interactive-map__hotspot:focus-visible {
	outline: 2px solid var(--color-secondary, #38b6fe);
	outline-offset: 4px;
	border-radius: 50%;
}

.interactive-map__hotspot-icon {
	pointer-events: none;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
	transition: filter var(--transition-fast, 0.15s) ease;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.interactive-map__hotspot-icon--svg {
	display: block;
	width: 15px;
	height: 15px;
}

.interactive-map__hotspot[aria-expanded="true"] {
	background: var(--color-secondary-hover);
}

.interactive-map__hotspot[aria-expanded="true"] .interactive-map__hotspot-icon--svg {
		filter: brightness(0) invert(1);
	}

/* Scale up on hover and when active */
@media (min-width: 1200px) {
	.interactive-map__hotspot:hover,
	.interactive-map__hotspot[aria-expanded="true"] {
		transform: scale(1.15);
		background: var(--color-secondary-hover);
	}

	.interactive-map__hotspot:hover .interactive-map__hotspot-icon--svg,
	.interactive-map__hotspot[aria-expanded="true"] .interactive-map__hotspot-icon--svg {
		filter: brightness(0) invert(1);
	}
}

/* Pulse animation to invite interaction */
@keyframes im-hotspot-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(56, 182, 254, 0.55); }
	65%  { box-shadow: 0 0 0 12px rgba(56, 182, 254, 0);    }
	100% { box-shadow: 0 0 0 0   rgba(56, 182, 254, 0);     }
}

.interactive-map__hotspot:not([aria-expanded="true"]) {
	animation: im-hotspot-pulse 2.6s infinite;
}

@media (prefers-reduced-motion: reduce) {
	.interactive-map__hotspot:not([aria-expanded="true"]) {
		animation: none;
	}
}

/* ==========================================================================
   CALLOUT POPUP
   Base: fixed + centered over the viewport on mobile + tablet.
   Direction-aware absolute positioning is added at the 1200px+ breakpoint.
   ========================================================================== */

.interactive-map__callout {
	position: fixed;
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	width: calc(100vw - 32px);
	max-width: 380px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.14),
		0 2px 8px  rgba(0, 0, 0, 0.08);
	padding: 20px 20px 18px;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, calc(-50% + 12px));
	transition:
		opacity  var(--transition-medium, 0.3s) ease,
		transform var(--transition-medium, 0.3s) ease;
}

/* Visible state – hidden attr removed by JS */
.interactive-map__callout:not([hidden]) {
	opacity: 1;
	transform: translate(-50%, -50%);
	pointer-events: auto;
}

/* JS-positioned (mobile/tablet): left + top are set via inline styles,
   so the default centering translate must not interfere. */
.interactive-map__callout.is-js-positioned,
.interactive-map__callout.is-js-positioned:not([hidden]) {
	transform: none;
}

/* --------------------------------------------------------------------------
   Callout close button
   -------------------------------------------------------------------------- */

.interactive-map__callout-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--color-text-secondary, #666666);
	transition:
		background var(--transition-fast, 0.15s) ease,
		color     var(--transition-fast, 0.15s) ease;
}

.interactive-map__callout-close:hover {
	background: var(--color-bg-gray, #f2f2f2);
	color: var(--color-text-primary, #333333);
}

.interactive-map__callout-close:focus-visible {
	outline: 2px solid var(--color-primary, #0d2b6e);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Callout content
   -------------------------------------------------------------------------- */

.interactive-map__callout-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-tertiary);
	margin: 0 0 10px;
	padding-right: 22px; /* Clear close button */
	line-height: 1.3;
}

.interactive-map__callout-body {
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-text-secondary, #555555);
	max-height: 175px;
	overflow-y: auto;
	padding-right: 10px;

	/* Firefox */
	scrollbar-width: thin;
	scrollbar-color: var(--color-primary, #31AADF) var(--color-bg-light-blue, #EBF7FC);
}

/* Webkit (Chrome, Safari, Edge) */
.interactive-map__callout-body::-webkit-scrollbar {
	width: 5px;
}

.interactive-map__callout-body::-webkit-scrollbar-track {
	background: var(--color-bg-light-blue, #EBF7FC);
	border-radius: 10px;
}

.interactive-map__callout-body::-webkit-scrollbar-thumb {
	background: var(--color-primary, #31AADF);
	border-radius: 10px;
}

.interactive-map__callout-body::-webkit-scrollbar-thumb:hover {
	/* background: var(--color-primary-hover, #0077AA); */
	background: var(--secondary-color);
}

.interactive-map__callout-body p {
	margin: 0 0 8px;
}

.interactive-map__callout-body p:last-child {
	margin-bottom: 0;
}



/* ==========================================================================
   TABLET BREAKPOINT (768px+)
   ========================================================================== */

@media (min-width: 768px) {

	.interactive-map {
		padding-top: 60px;
		padding-bottom: 48px;
		margin-bottom: 0;
	}

	.interactive-map::before {
        width: calc(100% - 104px);
        height: 80px;
        left: 52px;
		bottom: -1px;
    }

	.interactive-map::after {
        content: '';
        position: absolute;
        width: 52px;
        height: 101px;
        right: 0;
        bottom: -11px;
        background: var(--white);
        border-radius: 0 10px;
		z-index: 1;
    }

	.interactive-map + section::before {
		content: '';
        position: absolute;
        width: 52px;
        height: 101px;
        left: 0;
        top: -90px;
        background: var(--white);
        border-radius: 10px 0;
	}

	/* Stacked layout: content on top, illustration below */
	.interactive-map__layout {
		/* flex-direction: column; Content first in DOM = content on top */
		gap: 0px;
		padding-bottom: 0;
	}

	.interactive-map__content {
		max-width: 640px;
	}

	.interactive-map__heading {
		font-size: var(--font-size-h1, 40px);
	}

	.interactive-map__visual {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 0px;
	}

	.interactive-map__map-wrap {
		max-width: 480px;
		margin: 0;
	}

	/* Show hotspot buttons on tablet; re-center for the larger button size */
	.interactive-map__hotspot-group {
		display: block;
		width: 38px;
		height: 38px;
		margin-left: -19px;
		margin-top: -19px;
	}

	/* Decorative arrow – appears on tablet, pointing down toward illustration */
	.interactive-map__arrow {
		display: block;
		top: -80px;
        right: -5px;
        /* bottom: -20px; */
        transform: scale(-1) rotate(337deg);
	}

	.interactive-map__arrow i {
		font-size: 72px;
	}

	/* Scale hotspot buttons slightly on tablet */
	.interactive-map__hotspot {
		width: 38px;
		height: 38px;
	}

	.interactive-map__hotspot-icon--svg {
		width: 20px;
		height: 20px;
	}

}

/* ==========================================================================
   DESKTOP BREAKPOINT (1200px+)
   ========================================================================== */

@media (min-width: 1200px) {

	.interactive-map {
		padding-top: 70px;
		padding-bottom: 0;
	}

	.interactive-map::before {
        left: 0;
        width: calc(50% - 22px);
        height: 92px;
        border-top-left-radius: 0;
    }

	.interactive-map::after {
        width: calc(50% + 22px);
		bottom: -9px;
    }

	.interactive-map + section::before {
		display: none;
	}

	/* Side-by-side layout: illustration left, content right */
	.interactive-map__layout {
		flex-direction: row;
		align-items: flex-end;
		gap: 0;
		padding-bottom: 0;
	}

	/* Illustration column – left, ~55% width */
	.interactive-map__visual {
		flex: 0 0 50%;
        max-width: 50%;
		display: block;
		align-self: flex-end;
	}

	.interactive-map__map-wrap {
		max-width: 100%;
		width: 100%;
		margin: 0;
	}

	/* Content column – right, ~45% width */
	.interactive-map__content {
		flex: 0 0 50%;
        max-width: 50%;
		padding-left: 48px;
		padding-bottom: 37px;
        align-self: center;
        padding-top: 50px;
	}

	.interactive-map__heading {
		font-size: clamp(36px, 3vw, 52px);
		margin-bottom: 24px;
	}

	/* Re-center group for the full-size 44px button */
	.interactive-map__hotspot-group {
		width: 44px;
		height: 44px;
		margin-left: -22px;
		margin-top: -22px;
	}

	/* Full-size hotspot buttons on desktop */
	.interactive-map__hotspot {
		width: 44px;
		height: 44px;
	}

	.interactive-map__hotspot-icon--svg {
		width: 22px;
		height: 22px;
	}

	/* Restore anchored positioning on desktop and set width */
	.interactive-map__callout {
		position: absolute;
		bottom: calc(100% + 14px);
		top: auto;
		left: 50%;
		right: auto;
		width: 265px;
		max-width: none;
		transform: translateX(-50%) translateY(10px);
		z-index: 100;
	}

	.interactive-map__callout:not([hidden]) {
		transform: translateX(-50%) translateY(0);
	}

	/* Triangle pointer – points downward toward the hotspot */
	.interactive-map__callout::after {
		content: '';
		position: absolute;
		bottom: -9px;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 9px solid transparent;
		border-right: 9px solid transparent;
		border-top: 9px solid #ffffff;
		filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.08));
	}

	.interactive-map__callout-body {
		max-height: 250px;
	}

	/* Right-side hotspots – callout opens to the left */
	.interactive-map__hotspot-group--left .interactive-map__callout {
		left: auto;
		right: 50%;
		transform: translateX(50%) translateY(10px);
	}

	.interactive-map__hotspot-group--left .interactive-map__callout:not([hidden]) {
		transform: translateX(50%) translateY(0);
	}

	/* Top hotspots – callout opens below */
	.interactive-map__hotspot-group--below .interactive-map__callout {
		bottom: auto;
		top: calc(100% + 14px);
		transform: translateX(-50%) translateY(-10px);
	}

	.interactive-map__hotspot-group--below .interactive-map__callout:not([hidden]) {
		transform: translateX(-50%) translateY(0);
	}

	.interactive-map__hotspot-group--below .interactive-map__callout::after {
		bottom: auto;
		top: -9px;
		border-top: none;
		border-bottom: 9px solid #ffffff;
	}

	/* Decorative arrow – points right toward the text content */
	.interactive-map__arrow {
		display: block;
		position: absolute;
		top: 0;
        right: -20px;
		bottom: auto;
		transform: none;
		transform: scaleX(-1) rotate(20deg);
	}

	.interactive-map__arrow i {
		font-size: 95px;
	}

}

/* ==========================================================================
   LARGE DESKTOP BREAKPOINT (1367px+)
   ========================================================================== */

@media (min-width: 1367px) {

	.interactive-map__content {
		padding-left: 54px;
	}

	.interactive-map__heading {
		font-size: clamp(40px, 2.8vw, 58px);
	}

}