/**
 * R&H Interactive Map — FRONTEND styling.
 *
 * IMPORTANT: This file consumes ONLY `--rh-map-*` custom properties, which are
 * emitted per-instance from the user's Appearance settings (Elementor globals
 * or manual). It deliberately contains NO RAW&HUNGRY design tokens — the map's
 * look belongs to the host site, not the plugin's admin brand.
 *
 * Sensible fallbacks are baked into each var() so the map renders even if a
 * variable is missing.
 */

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

.rh-map__stage {
	position: relative;
	width: 100%;
	line-height: 0;
	padding: 7%;
}

@media (max-width: 1024px) {
	.rh-map__stage {
		padding: 5%;
	}
}

@media (max-width: 767px) {
	.rh-map__stage {
		padding: 3%;
	}
}

/* Backdrop flows naturally so it always shows in full and defines the stage
 * height — no forced aspect, no cropping, no empty bands. */
.rh-map__backdrop {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
}

/* Pins overlay the world map exactly (relative to the stage box). */
.rh-map__pins {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Branded decoration layer (circuit lines, corner grids, curves). Rendered
 * undistorted (SVG default xMidYMid meet). */
.rh-map__deco {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	user-select: none;
}

.rh-map__inner {
	position: relative;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Framed layout — decorations ON.
 * The container adopts the ORIGINAL artwork aspect (1597:857) so the branded
 * decorations render exactly as designed (undistorted). The accurate world
 * map is centred inside, filling the width; the natural top/bottom margin is
 * where the framing circuit lines sit — matching the source composition.
 * ------------------------------------------------------------------------- */
.rh-map--framed {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 53.6631%; /* 857 / 1597 */
}
.rh-map--framed .rh-map__stage {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
}

.rh-map__sr-live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Pinpoints — positioned absolutely via inline left/top percentages.
 * ------------------------------------------------------------------------- */
.rh-pinpoint {
	position: absolute;
	transform: translate(-50%, -50%);
	pointer-events: auto;
}

/* Simple pinpoint: a small dot, no interaction. */
.rh-pinpoint--simple {
	width: var(--rh-map-simple-size, 5px);
	height: var(--rh-map-simple-size, 5px);
	border-radius: 50%;
	background: var(--rh-map-simple-color, #8a837a);
	pointer-events: none;
}

/* When titles-on-hover is enabled, the dot must receive pointer events
   so its mouseenter/mouseleave listeners can fire. */
.rh-pinpoint--simple[data-show-title="1"] {
	pointer-events: auto;
}

/* HQ pinpoint. */
.rh-pinpoint--hq {
	width: 0;
	height: 0;
}

.rh-pinpoint__hit {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: var(--rh-map-hq-glow-size, 64px);
	height: var(--rh-map-hq-glow-size, 64px);
	min-width: 24px;
	min-height: 24px;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.rh-pinpoint__hit:focus-visible {
	outline: 2px solid var(--rh-map-hq-color, #dc0312);
	outline-offset: 4px;
	border-radius: 50%;
}

.rh-pinpoint__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(1);
	width: var(--rh-map-hq-glow-size, 64px);
	height: var(--rh-map-hq-glow-size, 64px);
	border-radius: 50%;
	background: var(--rh-map-hq-glow-color, #dc0312);
	opacity: 0.2;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.rh-pinpoint__dot {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: var(--rh-map-hq-size, 10px);
	height: var(--rh-map-hq-size, 10px);
	border-radius: 50%;
	background: var(--rh-map-hq-color, #dc0312);
}

/* Hover / focus lift (JS also drives this via GSAP; CSS is the no-JS fallback). */
.rh-pinpoint--hq .rh-pinpoint__hit:hover .rh-pinpoint__glow,
.rh-pinpoint--hq .rh-pinpoint__hit:focus-visible .rh-pinpoint__glow {
	transform: translate(-50%, -50%) scale(var(--rh-map-hover-scale, 1.15));
	opacity: 0.3;
}

/* ---------------------------------------------------------------------------
 * Tooltip / badge.
 * ------------------------------------------------------------------------- */
.rh-pinpoint__tooltip {
	position: absolute;
	left: 50%;
	bottom: calc(50% + (var(--rh-map-hq-glow-size, 64px) / 2) + 6px);
	transform: translate(-50%, 8px);
	opacity: 0;
	visibility: hidden;
	z-index: 20;
	min-width: 120px;
	max-width: 280px;
	transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
	pointer-events: none;
}

.rh-map__boundaries-container {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
}

.rh-map__boundaries {
	width: 100%;
	height: 100%;
	display: block;
}

.rh-map__boundary-path {
	fill: var(--rh-map-boundary-fill);
	fill-opacity: var(--rh-map-boundary-opacity, 0.05);
	stroke: var(--rh-map-boundary-stroke, #ff3c00);
	stroke-width: var(--rh-map-boundary-width, 1.5);
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

/* Boundary colour follows the pinpoint it belongs to. Doubled class keeps these
   above the base rule regardless of source order. */
.rh-map__boundary-path.rh-map__boundary-path--hq {
	fill: var(--rh-map-hq-color, #dc0312);
	stroke: var(--rh-map-hq-color, #dc0312);
}
.rh-map__boundary-path.rh-map__boundary-path--simple {
	fill: var(--rh-map-simple-color, #8a837a);
	stroke: var(--rh-map-simple-color, #8a837a);
}

.rh-pinpoint__simple-tip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 10px;
	padding: 8px 16px;
	background: #1a1816;
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	border-radius: 8px;
	pointer-events: none;
	z-index: 100;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.rh-pinpoint__tooltip-inner {
	background: var(--rh-map-tooltip-bg, #dc0312);
	color: var(--rh-map-tooltip-text, #fff);
	border-radius: var(--rh-map-tooltip-radius, 23px);
	padding: var(--rh-map-tooltip-padding, 14px) calc(var(--rh-map-tooltip-padding, 14px) + 6px);
	text-align: center;
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.4);
}

.rh-pinpoint__tooltip-pointer {
	position: absolute;
	left: 50%;
	bottom: -9px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 12px solid var(--rh-map-tooltip-bg, #dc0312);
}

.rh-pinpoint__title {
	display: block;
	font-family: var(--rh-map-tooltip-font, inherit);
	font-weight: var(--rh-map-tooltip-weight, 600);
	font-size: var(--rh-map-tooltip-font-size, 14px);
	line-height: 1.2;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}
.rh-pinpoint__title--link:hover {
	text-decoration: underline;
}

.rh-pinpoint__desc {
	font-family: var(--rh-map-tooltip-body-font, inherit);
	font-size: calc(var(--rh-map-tooltip-font-size, 14px) - 2px);
	line-height: 1.5;
	margin-top: 6px;
	opacity: 0.92;
	white-space: normal;
}
.rh-pinpoint__desc p {
	margin: 0 0 0.4em;
}
.rh-pinpoint__desc p:last-child {
	margin-bottom: 0;
}

/* Visible states (driven by JS class + default-visible fallback). */
.rh-pinpoint--hq.is-open .rh-pinpoint__tooltip,
.rh-pinpoint--hq.is-tooltip-default-visible .rh-pinpoint__tooltip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

/* Flip tooltip below the pinpoint when JS detects top overflow. */
.rh-pinpoint__tooltip.is-below {
	bottom: auto;
	top: calc(50% + (var(--rh-map-hq-glow-size, 64px) / 2) + 6px);
}
.rh-pinpoint__tooltip.is-below .rh-pinpoint__tooltip-pointer {
	bottom: auto;
	top: -9px;
	border-top: none;
	border-bottom: 12px solid var(--rh-map-tooltip-bg, #dc0312);
}

/* ---------------------------------------------------------------------------
 * Reduced motion: kill transitions; states still resolve instantly.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rh-pinpoint__glow,
	.rh-pinpoint__tooltip {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Pinpoint Count Shortcode
 * ------------------------------------------------------------------------- */
.rh-map-count {
	display: inline-block;
	line-height: 1;
}

.rh-map-count--hq {
	font-family: var(--rh-map-hq-count-font, inherit);
	font-weight: var(--rh-map-hq-count-weight, 700);
	color: var(--rh-map-hq-count-color, #dc0312);
	font-size: var(--rh-map-hq-count-size, 24px);
}

.rh-map-count--simple {
	font-family: var(--rh-map-simple-count-font, inherit);
	font-weight: var(--rh-map-simple-count-weight, 700);
	color: var(--rh-map-simple-count-color, #8a837a);
	font-size: var(--rh-map-simple-count-size, 24px);
}