/**
 * Map Widget Styles
 *
 * Interactive world map with hex-polygon location markers and info cards.
 * Styles derived from Figma nodes 2676:4963 (map), 2676:7200 (tooltip card),
 * 2676:7196 (active marker), 2676:7191 (inactive marker).
 *
 * Active state:
 *  - Marker color swaps from orange (#FF5000) to aqua (#6EDAD5)
 *  - `.zededa-map__card` becomes visible
 *
 * @package Zededa
 */

/* ==========================================================================
   1. Elementor Kit overrides
   ========================================================================== */

[class*="elementor-kit-"] .zededa-map__marker {
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
}

/* ==========================================================================
   2. Widget wrapper + stage
   ========================================================================== */

.zededa-map {
	width: 100%;
	max-width: 1510px;
	margin-inline: auto;
	padding-inline: var(--spacing-lg, 24px);
	box-sizing: border-box;

	--zededa-map-marker: var(--color-brand-primary, #ff5000);
	--zededa-map-marker-active: var(--color-navigation-cta-background, #6edad5);
	/* Light gray matches Figma 2676:4963 — dot fill #133844 at low opacity
	   on cream renders ~#d4d4d4. Override per-instance via the Style control. */
	--zededa-map-color: var(--color-border-light, #d4d4d4);

	/* Custom easing curves — stronger than built-in ease/ease-out.
	   --zededa-ease-out       : UI interactions (entrance, press-release)
	   --zededa-ease-out-strong: hero motion (drawer settle)
	   NOTE: the line-draw + card-reveal entry sequence uses `linear` so
	   velocity is constant through both phases. Chrome starts at 220ms
	   (line is ~67% done, tip is ~40px from card edge) for a 75ms
	   overlap — enough simultaneous motion to erase the handoff seam,
	   not so much that the card emerges before the line is near it.
	   Durations (line 220ms, chrome 160ms) sit in Emil Kowalski's
	   recommended ranges for tooltip/dropdown motion — under 300ms
	   individually, 380ms total. */
	--zededa-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--zededa-ease-out-strong: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Stage forces its height via the ::before padding-hack so the height
   is deterministic on every viewport (doesn't rely on `aspect-ratio`
   being honoured through every parent container). The pseudo creates
   a block that is exactly 862/1510 = 57.085% of the stage width tall,
   which sets the stage's content height. Absolutely positioned children
   (SVG graphic, markers, cards) use that content height for their
   percentage offsets, so markers line up with SVG dots perfectly. */
.zededa-map__stage {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.zededa-map__stage::before {
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 57.085%; /* 862 / 1510 */
}

.zededa-map__graphic {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--zededa-map-color);
}

.zededa-map__graphic svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ==========================================================================
   3. Markers — hex polygon, orange inactive / aqua active
   ========================================================================== */

.zededa-map__marker {
	position: absolute;
	transform: translate(-50%, -50%);
	cursor: pointer;
	/* Marker SVG aspect ratio = 48.86 / 42.19 ≈ 1.158 */
	width: 48px;
	height: 42px;
	z-index: 5;
	appearance: none;
	color: var(--zededa-map-marker);
	/* Button-press feedback range: 100-160ms. Strong ease-out so color and
	   scale snap into place rather than drifting in. */
	transition: color 160ms var(--zededa-ease-out), transform 160ms var(--zededa-ease-out);
}

.zededa-map__marker-icon {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.zededa-map__marker-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Focus + active (selected) state — always applies regardless of input method. */
.zededa-map__marker:focus-visible,
.zededa-map__marker.is-active {
	color: var(--zededa-map-marker-active);
	transform: translate(-50%, -50%) scale(1.1);
}

/* Hover amplification gated behind pointer:fine so touch devices don't
   trigger the scale on initial tap before the card appears. */
@media (hover: hover) and (pointer: fine) {
	.zededa-map__marker:hover {
		color: var(--zededa-map-marker-active);
		transform: translate(-50%, -50%) scale(1.1);
	}
}

/* Press feedback — subtle scale-down confirms the button heard the click.
   Takes precedence over the :hover/.is-active scale(1.1) via specificity
   + source order. */
.zededa-map__marker:active {
	transform: translate(-50%, -50%) scale(0.97);
}

.zededa-map__marker:focus-visible {
	outline: 2px solid var(--zededa-map-marker-active);
	outline-offset: 4px;
	border-radius: 4px;
}

/* ==========================================================================
   4. Info card (Figma 2676:7200)
   Dark navy panel, orange left accent strip, white title + address.
   ========================================================================== */

/* The card wrapper is a positioning frame for the connector SVG + chrome.
   It has no visual chrome of its own (navy bg lives on __card-body, line
   color on __card-connector-path), so it only toggles via `visibility`.
   Using visibility instead of opacity avoids compounding the fade with
   chrome's own opacity transition — on exit, chrome and line can animate
   cleanly without their opacity multiplying against a wrapper fade.

   The 170ms exit delay on visibility matches the longest child exit
   (chrome + line both 170ms) so descendants finish just as the wrapper
   removes from rendering. */
.zededa-map__card {
	position: absolute;
	z-index: 10;
	width: 320px;
	min-height: 238px;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear 170ms;
	box-sizing: border-box;
}

.zededa-map__card.is-active {
	visibility: visible;
	pointer-events: auto;
	transition: visibility 0s linear 0s;
}

/* Chrome = the visible card surface (accent strip + navy body). It unfurls
   from the line's attachment point via scaleX/scaleY with a placement-aware
   transform-origin, so the card visually ORIGINATES from the line endpoint
   instead of materializing next to it.

   Axis of expansion matches the line's direction:
   - right/left placements: horizontal line → scaleX from left/right center
   - above/below placements: vertical line → scaleY from center bottom/top

   Blur + opacity ride along to mask the scale distortion on text, producing
   a "focus into existence" effect. Starts at 500ms — right when the line
   reaches the card edge — so the handoff feels continuous.

   Exit uses ease-in-out instead of ease-out. Ease-out front-loads motion
   (80% of change in first 30% of time) which reads as "snap" on a short
   exit. Ease-in-out spreads the visible motion across the duration, so
   the user sees the card actually retract into the line rather than blink
   away. 170ms sits in Emil's button-press-feedback range (100–160ms) —
   faster than the entry (540ms) per "exit fast, entry deliberate". */
.zededa-map__card-chrome {
	display: flex;
	width: 100%;
	min-height: 238px;
	opacity: 0;
	filter: blur(6px);
	transform: scaleX(0);
	transform-origin: left center;
	transition:
		opacity 170ms ease-in-out,
		filter 170ms ease-in-out,
		transform 170ms ease-in-out;
}

.zededa-map__card.is-active .zededa-map__card-chrome {
	opacity: 1;
	filter: blur(0);
	transform: scaleX(1);
	/* Linear easing — constant velocity start to finish so the chrome has
	   no acceleration ramp at the handoff. Chrome starts at 220ms while
	   the line is at ~67% progress (tip is ~40px from the card edge), so
	   both animations are visibly in motion together for 75ms — enough
	   overlap to eliminate the handoff seam without the card appearing
	   before the line is near it. */
	transition:
		opacity 160ms linear 220ms,
		filter 160ms linear 220ms,
		transform 160ms linear 220ms;
}

/* Placement-aware origin + axis. Default (pre-JS) is the right-placement
   transform; JS sets data-auto-side on activation which flips the origin
   / axis to match the line's attachment direction. */
.zededa-map__card[data-auto-side="right"] .zededa-map__card-chrome {
	transform-origin: left center;
}

.zededa-map__card[data-auto-side="left"] .zededa-map__card-chrome {
	transform-origin: right center;
}

.zededa-map__card[data-auto-side="above"] .zededa-map__card-chrome,
.zededa-map__card[data-auto-side="below"] .zededa-map__card-chrome {
	transform: scaleY(0);
}

.zededa-map__card[data-auto-side="above"] .zededa-map__card-chrome {
	transform-origin: center bottom;
}

.zededa-map__card[data-auto-side="below"] .zededa-map__card-chrome {
	transform-origin: center top;
}

.zededa-map__card.is-active[data-auto-side="above"] .zededa-map__card-chrome,
.zededa-map__card.is-active[data-auto-side="below"] .zededa-map__card-chrome {
	transform: scaleY(1);
}

.zededa-map__card-accent {
	display: block;
	flex: 0 0 auto;
	width: 6px;
	background-color: var(--color-brand-primary, #ff5000);
}

.zededa-map__card-body {
	flex: 1 1 auto;
	padding: var(--spacing-lg, 24px);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs, 4px);
	background-color: var(--color-container-blue, #133844);
}

.zededa-map__card-title {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading, sans-serif);
	font-size: clamp(24px, 2vw + 12px, 35px);
	font-weight: var(--typography-font-weight-bold, 700);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-neutral-white, #ffffff);
	text-transform: capitalize;
	margin: 0 0 var(--spacing-sm, 8px);
}

.zededa-map__card-address,
.zededa-map__card-phone {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base, sans-serif);
	font-size: clamp(14px, 0.5vw + 12px, 21px);
	font-weight: var(--typography-font-weight-semibold, 600);
	line-height: 1.45;
	letter-spacing: -0.005em;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
}

.zededa-map__card-phone a {
	color: inherit;
	text-decoration: none;
}

.zededa-map__card-phone a:hover {
	color: var(--color-neutral-white, #ffffff);
	text-decoration: underline;
}

/* ==========================================================================
   5. Card placement — side variants
   Wrapper sits AT the marker coordinate; `data-side` controls offset.
   The yellow connector spans the gap (122 × 95px from Figma 2676:7195).
   ========================================================================== */

.zededa-map {
	--zededa-map-connector-w: 122px;
	--zededa-map-connector-h: 95px;
}

/* Card placement is fully JS-driven — `placeCard()` writes inline left/top
   and sets data-auto-side. The CSS below is just a fallback transform for
   the brief moment before JS runs (prevents flash-of-unstyled-card on
   first activation). */
.zededa-map__card:not([data-auto-side]) {
	transform: translate(var(--zededa-map-connector-w), calc(-50% - var(--zededa-map-connector-h)));
}

/* ==========================================================================
   5a. Yellow connector (Figma 2676:7195)
   Bottom-left of connector sits on the marker; top-right meets the card
   at its vertical center.
   ========================================================================== */

.zededa-map__card-connector {
	position: absolute;
	width: var(--zededa-map-connector-w);
	height: var(--zededa-map-connector-h);
	color: var(--color-brand-sunrise, #f5bc47);
	pointer-events: none;
}

.zededa-map__card-connector svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Stroke-draw entrance/exit: the yellow line uses a plain transition between
   two declared stroke-dashoffset values instead of a keyframe animation,
   because keyframe animations don't trigger transitions on removal — the
   line would snap invisible on dismiss. With a transition, both directions
   animate automatically.

   Asymmetric timing via override on .is-active:
   - Enter: 450ms with 150ms delay + strong ease-out (deliberate draw)
   - Exit:  200ms, no delay, ease-out (quick retract, syncs with card fade)

   pathLength="1" on the SVG normalizes the dasharray so a single 1 → 0
   offset covers the whole stroke. */
.zededa-map__card-connector-path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	/* Exit: ease-in-out so the retraction is perceptible across the full
	   duration instead of snapping away in the first 30% (as ease-out does).
	   170ms matches chrome exit — both disappear in sync. */
	transition: stroke-dashoffset 170ms ease-in-out;
}

.zededa-map__card.is-active .zededa-map__card-connector-path {
	stroke-dashoffset: 0;
	/* Linear — the stroke draws at a constant rate so it doesn't decelerate
	   into the card edge. Paired with the chrome's linear entry, velocity
	   at the handoff is constant on both sides = no visible "end/start"
	   inflection, just one continuous steady motion. */
	transition: stroke-dashoffset 220ms linear 75ms;
}

/* Above/below variants use a plain rectangle (no SVG path), so the draw
   animation doesn't apply — they stay hidden until card fades in. */
.zededa-map__card[data-auto-side="above"] .zededa-map__card-connector-path,
.zededa-map__card[data-auto-side="below"] .zededa-map__card-connector-path {
	animation: none;
}

/* Right placement — connector exits from card's LEFT edge at vertical center */
.zededa-map__card .zededa-map__card-connector,
.zededa-map__card[data-auto-side="right"] .zededa-map__card-connector {
	right: 100%;
	top: 50%;
	left: auto;
	transform: none;
}

/* Left placement — mirror connector horizontally, exits from card's RIGHT edge */
.zededa-map__card[data-auto-side="left"] .zededa-map__card-connector {
	left: 100%;
	top: 50%;
	right: auto;
	transform: scaleX(-1);
	transform-origin: center;
}

/* Above / below — diagonal connector replaced with a short vertical yellow
   line so narrow viewports (where horizontal placement can't fit) still
   visually link the card to its marker. JS sets `left` and `height` inline
   so the line lands on the marker's X and spans the gap to the card edge. */
.zededa-map__card[data-auto-side="above"] .zededa-map__card-connector,
.zededa-map__card[data-auto-side="below"] .zededa-map__card-connector {
	width: 4px;
	height: 16px;
	background-color: var(--color-brand-sunrise, #f5bc47);
	right: auto;
	transform: none;
}

.zededa-map__card[data-auto-side="above"] .zededa-map__card-connector {
	top: 100%;
	bottom: auto;
}

.zededa-map__card[data-auto-side="below"] .zededa-map__card-connector {
	bottom: 100%;
	top: auto;
}

.zededa-map__card[data-auto-side="above"] .zededa-map__card-connector svg,
.zededa-map__card[data-auto-side="below"] .zededa-map__card-connector svg {
	display: none;
}

/* ==========================================================================
   6. Accessibility
   ========================================================================== */

.zededa-map .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.zededa-map__marker {
		transition: none;
	}
	.zededa-map__card {
		transition: none;
	}
	.zededa-map__card.is-active .zededa-map__card-connector-path {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
	}
	.zededa-map__card-chrome {
		filter: none;
		transform: none;
	}
	.zededa-map__card.is-active .zededa-map__card-chrome {
		filter: none;
		transform: none;
		transition: opacity 160ms linear;
	}
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.zededa-map {
		--zededa-map-connector-w: 96px;
		--zededa-map-connector-h: 75px;
	}

	.zededa-map__marker {
		width: 40px;
		height: 35px;
	}

	.zededa-map__card {
		width: 260px;
		min-height: 0;
	}

	.zededa-map__card-chrome {
		min-height: 0;
	}
}

@media (max-width: 768px) {
	.zededa-map {
		--zededa-map-connector-w: 72px;
		--zededa-map-connector-h: 56px;
	}

	/* Keep stage aspect matching the SVG (1510:862) so markers align to dots. */

	.zededa-map__marker {
		width: 32px;
		height: 28px;
	}

	.zededa-map__card {
		width: 220px;
		min-height: 0;
	}

	.zededa-map__card-chrome {
		min-height: 0;
	}

	.zededa-map__card-body {
		padding: var(--spacing-md, 16px);
	}

	.zededa-map__card-title {
		font-size: clamp(20px, 5vw, 24px);
	}

	.zededa-map__card-address,
	.zededa-map__card-phone {
		font-size: clamp(12px, 3.5vw, 14px);
	}
}