/**
 * devora/region-map (20-map-and-regions.md 3A.2 and 6a, tags RM1 to RM9). Loaded only where the block
 * renders (block.json style). Theme values come through the theme's custom properties: palette and
 * font presets, border radius presets, custom.color.overlay, custom.badgeLabel (as each region's
 * --devora-region-label, set by the plugin), custom.motion.fast. The spec's new tokens (6d:
 * custom.map.gap, custom.region.*, and the map shadow preset) are read with the Figma value as the
 * fallback, so the block is right before the theme adds them.
 *
 * No script (README G9): a list link's hover or focus, or a shape's or badge's hover, lights every
 * element of that region through :has() on data-region (RM3a), and below 1024 the two lists are native
 * <details> disclosures, collapsed; from 1024 they show open with no toggle where ::details-content
 * is supported.
 */

/* RM1. Block grid: map 852 and side 396 with a 36 gap in the 1284 container from 1024, scaling
 *      together below 1284; one column below 1024 (map, then the lists 36 below it). */
.devora-region-map {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--custom--map--gap, 36px);
	align-items: start;
	padding-block: var(--wp--preset--spacing--30);
}
@media (width >= 1024px) {
	.devora-region-map { grid-template-columns: minmax(0, 852fr) minmax(0, 396fr); }
	.devora-region-map__notice { grid-column: 1 / -1; }
}
.devora-region-map *,
.devora-region-map *::before,
.devora-region-map *::after { box-sizing: border-box; }

/* Editors only: the overlay is not drawn (render.php). */
.devora-region-map__notice {
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--warning);
	border-radius: var(--wp--preset--border-radius--small, 4px);
	font-size: var(--wp--preset--font-size--small);
}

/* RM2. Frame and image: Big Media's look, radius panel, 1px overlay border drawn over the image (so the
 *      shapes keep the image's exact box), 8 above and below from 1024, 4 below. */
.devora-region-map__figure {
	margin: 0;
	padding-block: 4px;
}
@media (width >= 1024px) {
	.devora-region-map__figure { padding-block: var(--wp--preset--spacing--10); }
}
.devora-region-map__frame { position: relative; }
.devora-region-map__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--preset--border-radius--panel, 8px);
	background-color: var(--wp--preset--color--white);
}
.devora-region-map__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border: 1px solid var(--wp--custom--color--overlay);
	border-radius: var(--wp--preset--border-radius--panel, 8px);
	pointer-events: none;
}
.devora-region-map__credit {
	margin-block: var(--wp--preset--spacing--20) 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--caption, 1.25rem);
}

/* RM3. Shapes: the region colour at 10%, blurred, at rest; 20% with a stroke of 4 viewBox units (2px at
 *      852 wide) and no blur when lit. --devora-soften is the block's own blur filter (render.php). */
.devora-region-map__shapes {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.devora-region-map__shapes path {
	fill: var(--devora-region);
	fill-opacity: var(--devora-shape-opacity, 0.1);
	stroke: var(--devora-region);
	stroke-width: var(--devora-shape-stroke, 0);
	stroke-linejoin: round;
	filter: var(--devora-shape-filter, var(--devora-soften));
}

/* RM3a. One region lit: hovering its shape, badge or list link, or focusing its list link, lights its
 *       shape, badge and label. One line per region number (a 13th region needs a line). */
.devora-region-map:has(a[data-region="1"]:hover, [data-region="1"] > a:is(:hover, :focus-visible)) [data-region="1"],
.devora-region-map:has(a[data-region="2"]:hover, [data-region="2"] > a:is(:hover, :focus-visible)) [data-region="2"],
.devora-region-map:has(a[data-region="3"]:hover, [data-region="3"] > a:is(:hover, :focus-visible)) [data-region="3"],
.devora-region-map:has(a[data-region="4"]:hover, [data-region="4"] > a:is(:hover, :focus-visible)) [data-region="4"],
.devora-region-map:has(a[data-region="5"]:hover, [data-region="5"] > a:is(:hover, :focus-visible)) [data-region="5"],
.devora-region-map:has(a[data-region="6"]:hover, [data-region="6"] > a:is(:hover, :focus-visible)) [data-region="6"],
.devora-region-map:has(a[data-region="7"]:hover, [data-region="7"] > a:is(:hover, :focus-visible)) [data-region="7"],
.devora-region-map:has(a[data-region="8"]:hover, [data-region="8"] > a:is(:hover, :focus-visible)) [data-region="8"],
.devora-region-map:has(a[data-region="9"]:hover, [data-region="9"] > a:is(:hover, :focus-visible)) [data-region="9"],
.devora-region-map:has(a[data-region="10"]:hover, [data-region="10"] > a:is(:hover, :focus-visible)) [data-region="10"],
.devora-region-map:has(a[data-region="11"]:hover, [data-region="11"] > a:is(:hover, :focus-visible)) [data-region="11"],
.devora-region-map:has(a[data-region="12"]:hover, [data-region="12"] > a:is(:hover, :focus-visible)) [data-region="12"] {
	--devora-shape-opacity: 0.2;
	--devora-shape-stroke: 4;
	--devora-shape-filter: none;
	--devora-badge-ring: 0 0 0 2px var(--wp--preset--color--white), var(--wp--preset--shadow--map, 0 4px 12px rgba(14, 33, 28, 0.3));
	--devora-badge-z: 3;
	--devora-label-display: block;
	--devora-name-line: underline;
}

/* RM4. The map's printed key, covered as Figma 1203:8545 does (the References list replaces it), and the
 *      frame line it interrupted drawn back in the map's own ink (a colour of the image, not the brand). */
.devora-region-map__legend-cover { fill: var(--wp--preset--color--surface); }
.devora-region-map__frame-line { fill: #1e1a1b; }

/* RM5. Map badges: 32 circles centred on the region, region fill, number in the paired label colour,
 *      ExtraBold, at the headline size with a floor at 18.67 (the theme's custom.region.badgeNumber), so it
 *      is always large bold text (3:1; region 7's pairing is 4.22:1 and would need 4.5 at the headline's 18
 *      on a phone), 2px white ring; lit: 4px ring and the shadow. */
/* The :hover and :focus pair outranks the theme's global link hover colour (elements.link), which
 * would grey the number on a hovered badge. */
.devora-region-map__badge,
.devora-region-map__badge:is(:hover, :focus) {
	position: absolute;
	z-index: var(--devora-badge-z, 2);
	display: grid;
	place-items: center;
	width: var(--wp--custom--region--badge-map, 32px);
	height: var(--wp--custom--region--badge-map, 32px);
	translate: -50% -50%;
	border: 2px solid var(--wp--preset--color--white);
	border-radius: 50%;
	background-color: var(--devora-region);
	box-shadow: var(--devora-badge-ring, none);
	color: var(--devora-region-label);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--region--badge-number, max(1.1667rem, var(--wp--preset--font-size--headline)));
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
}

/* RM6. Hover label: 6 under the badge, primary-strong with white small text (16.76:1). Not shown below
 *      600, where labels of neighbouring regions collide. Below 1440 (a map narrower than 852) a label near
 *      the map's right or left edge lines up with its badge's edge instead of centring, so it stays over
 *      the map and never runs off the page. The label is inside the badge link, so the pointer can rest on
 *      it and the region stays lit (1.4.13 hoverable; a ::before bridges the 6 gap); it is part of the
 *      link, the region's name. No script dismisses it with Esc (README G9), recorded in decisions.md. */
.devora-region-map__label {
	position: absolute;
	top: calc(100% + 2px + var(--wp--custom--region--label-gap, 6px));
	left: 50%;
	display: var(--devora-label-display, none);
	translate: -50% 0;
	padding: 4px var(--wp--preset--spacing--10);
	border-radius: var(--wp--preset--border-radius--small, 4px);
	background-color: var(--wp--preset--color--primary-strong);
	color: var(--wp--preset--color--text-inverse);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--caption, 1.25rem);
	white-space: nowrap;
}
.devora-region-map__label::before {
	content: "";
	position: absolute;
	inset: calc(-2px - var(--wp--custom--region--label-gap, 6px)) 0 100%;
}
@media (width < 1440px) {
	.devora-region-map__badge[data-edge="end"] .devora-region-map__label { left: auto; right: -2px; translate: none; }
	.devora-region-map__badge[data-edge="start"] .devora-region-map__label { left: -2px; translate: none; }
}
@media (width < 600px) {
	.devora-region-map__label { display: none; }
}

/* RM7. Aside: Regions and References, H3s in headline primary; rows 40 with a 12 gap; list badges 40
 *      (32 below 1024). Group gap 48 from 1024; below, rules between the groups and a 24 gap. */
.devora-region-map__aside {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
}
.devora-region-map__group { position: relative; }
.devora-region-map__heading {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--headline);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: normal;
}
.devora-region-map__list,
.devora-region-map__legend {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	list-style: none;
}
.devora-region-map__list li,
.devora-region-map__legend li { margin: 0; }
.devora-region-map__list a,
.devora-region-map__list a:is(:hover, :focus) {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	min-height: 40px;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
}
.devora-region-map__name {
	text-decoration-line: var(--devora-name-line, none);
	text-underline-offset: 0.2em;
}
.devora-region-map__legend li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	min-height: 40px;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
}
.devora-region-map__legend img {
	flex: none;
	display: block;
	width: 60px;
	height: 40px;
}

/* RM9. The region badge in the list: a circle in the region colour, the number in its paired label
 *      colour, ExtraBold, centred, sized as RM5 (never below 18.67, large text). Scoped to the block; the
 *      cards style their own. */
.devora-region-map .devora-region-badge {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: var(--wp--custom--region--badge, 40px);
	height: var(--wp--custom--region--badge, 40px);
	border-radius: 50%;
	background-color: var(--devora-region);
	color: var(--devora-region-label);
	font-size: var(--wp--custom--region--badge-number, max(1.1667rem, var(--wp--preset--font-size--headline)));
	font-weight: 800;
	line-height: 1;
}

/* RM8. Disclosures. Below 1024 each group is a native <details>, collapsed (Figma 1195:14723): the
 *      toggle is a 28 circle in border with a plus (minus when open) in accent-text-strong, over a 44
 *      tall hit area that spans the heading row. */
.devora-region-map__toggle {
	position: absolute;
	inset-inline: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 44px;
	list-style: none;
	cursor: pointer;
}
.devora-region-map__toggle::-webkit-details-marker { display: none; }
.devora-region-map__toggle::after {
	--devora-toggle-ink: var(--wp--preset--color--accent-text-strong);
	content: "";
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background:
		linear-gradient(var(--devora-toggle-ink), var(--devora-toggle-ink)) center / 10px 2px no-repeat,
		linear-gradient(var(--devora-toggle-ink), var(--devora-toggle-ink)) center / 2px 10px no-repeat,
		var(--wp--preset--color--border);
}
.devora-region-map__disclosure[open] > .devora-region-map__toggle::after {
	background:
		linear-gradient(var(--devora-toggle-ink), var(--devora-toggle-ink)) center / 10px 2px no-repeat,
		var(--wp--preset--color--border);
}

@media (width < 1024px) {
	.devora-region-map__aside {
		gap: var(--wp--preset--spacing--40);
		padding-bottom: var(--wp--preset--spacing--40);
		border-bottom: 1px solid var(--wp--preset--color--border);
	}
	.devora-region-map__group {
		padding-top: var(--wp--preset--spacing--40);
		border-top: 1px solid var(--wp--preset--color--border);
	}
	.devora-region-map__heading {
		display: flex;
		align-items: center;
		min-height: 28px;
		padding-inline-end: 44px;
		font-size: var(--wp--preset--font-size--medium);
		line-height: 1.1111;
	}
	.devora-region-map__toggle { top: calc(var(--wp--preset--spacing--40) - 8px); }
	.devora-region-map__list a { min-height: 32px; }
	.devora-region-map .devora-region-badge {
		width: var(--wp--custom--region--badge-map, 32px);
		height: var(--wp--custom--region--badge-map, 32px);
	}
	.devora-region-map__legend li { gap: 10px; }
}

/* From 1024 the lists always show: the toggle goes and the closed <details> content is drawn anyway.
 * Only where the browser can style ::details-content; elsewhere the toggles stay and work. */
@supports selector(::details-content) {
	@media (width >= 1024px) {
		.devora-region-map__toggle { display: none; }
		.devora-region-map__disclosure::details-content { content-visibility: visible; }
	}
}

/* Motion only for those who have not asked for less: no badge scale at all, and fades only here. */
@media (prefers-reduced-motion: no-preference) {
	.devora-region-map__shapes path,
	.devora-region-map__badge { transition: var(--wp--custom--motion--fast, all 0.15s ease-out); }
}

/* Forced colours: a lit shape keeps an outline the user can see; badges keep a ring. */
@media (forced-colors: active) {
	.devora-region-map__shapes path { stroke: CanvasText; }
	.devora-region-map__badge,
	.devora-region-map .devora-region-badge { border: 2px solid CanvasText; }
	.devora-region-map__toggle::after { border: 1px solid ButtonText; }
	.devora-region-map__label { border: 1px solid CanvasText; }
}

/* Visually hidden text ("Region 1: Rangitoto"), in case the theme does not load core's rule. */
.devora-region-map .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
	word-wrap: normal;
}