/**
 * doral/project-map — dark map section with a per-state Map Card tooltip.
 *
 * Values from the Figma variable set (Doral Renewables Design V1); the card follows the
 * "map card / variant 3" component. Self-contained so the block does not inherit anything
 * from the active theme.
 */

.doral-mapblock {
	--dm-primary: #005050;
	--dm-primary-light: #007373;
	--dm-primary-800: #002828;
	--dm-tint-100: #cddbdb;
	--dm-tint-200: #9bb7b7;
	--dm-ink: #0e1a1a;
	--dm-ink-3: #5a6a6a;
	--dm-paper: #fff;

	--dm-s1: 8px;
	--dm-s2: 16px;
	--dm-s3: 24px;
	--dm-s4: 32px;
	--dm-s10: 80px;
	--dm-s21: 148px;

	--dm-radius: 8px;

	--dm-font: "proxima-nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: var(--dm-s21) var(--dm-s10);
	background: var(--dm-primary-800);
	font-family: var(--dm-font);
	color: var(--dm-paper);
}

.doral-mapblock *,
.doral-mapblock *::before,
.doral-mapblock *::after {
	box-sizing: border-box;
}

/*
 * Themes style headings and lists inside post content — Kadence puts a 72px margin-top on
 * h2, which tears the eyebrow away from the heading. These are doubled-up class selectors
 * so they outrank `.entry-content h2` and friends no matter which theme the block lands in
 * or what order the stylesheets load in.
 */
.doral-mapblock .doral-mapblock__heading,
.doral-mapblock .doral-mapblock__eyebrow,
.doral-mapblock .doral-mapblock__legend-title,
.doral-mapblock .doral-mapblock__legend-items,
.doral-mapblock .doral-mapcard__state,
.doral-mapblock .doral-mapcard__list,
.doral-mapblock .doral-mapcard__list li,
.doral-mapblock .doral-mapcard__totals {
	margin: 0;
	padding: 0;
	text-indent: 0;
}

.doral-mapblock .doral-mapblock__legend-items,
.doral-mapblock .doral-mapcard__list {
	list-style: none;
}

/*
 * Colour needs the same treatment — the editor canvas applies its own heading colour, which
 * otherwise renders the headline near-invisible against the dark panel.
 */
.doral-mapblock .doral-mapblock__heading,
.doral-mapblock .doral-mapblock__legend-title,
.doral-mapblock .doral-mapblock__legend-items li {
	color: var(--dm-paper);
}

/* the editor also imposes its own heading weight/size, so pin the whole H2 style here */
.doral-mapblock .doral-mapblock__heading {
	font-family: var(--dm-font);
	font-size: 48px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.1;
	letter-spacing: -0.48px;
	text-transform: none;
}

.doral-mapblock .doral-mapblock__eyebrow {
	color: var(--dm-tint-200);
}

.doral-mapblock .doral-mapcard__state {
	color: var(--dm-ink);
}

.doral-mapblock .doral-mapcard__totals {
	color: var(--dm-ink-3);
}

.doral-mapblock .doral-mapcard__list li::marker {
	content: "";
}

/* the comp sits a photo behind the panel at 3% */
.doral-mapblock__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.03;
	pointer-events: none;
}

.doral-mapblock__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dm-s10);
	max-width: 1280px;
	margin-inline: auto;
}

.doral-mapblock__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--dm-s4);
	width: 100%;
}

.doral-mapblock__intro {
	display: flex;
	flex-direction: column;
	gap: var(--dm-s4);
	max-width: 624px;
}

.doral-mapblock__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--dm-s2);
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 5.2px;
	text-transform: uppercase;
	color: var(--dm-tint-200);
}

.doral-mapblock__mark {
	display: inline-flex;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.doral-mapblock__mark svg {
	width: 100%;
	height: 100%;
	display: block;
}

.doral-mapblock__heading {
	margin: 0;
	font-size: 48px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.1;
	letter-spacing: -0.48px;
	color: var(--dm-paper);
}

.doral-mapblock__legend {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--dm-s2);
	padding: var(--dm-s4);
	background: rgba(14, 26, 26, 0.3);
	border-radius: var(--dm-radius);
}

.doral-mapblock__legend-title {
	margin: 0;
	font-size: 20px;
	line-height: 1.5;
}

.doral-mapblock__legend-items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dm-s4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.doral-mapblock__legend-items li {
	display: flex;
	align-items: center;
	gap: var(--dm-s1);
	font-size: 16px;
	line-height: 1.5;
}

/*
 * The icons carry the accent while the labels stay white — same treatment the type icons
 * get inside the map card, so one project type reads the same colour everywhere.
 */
.doral-mapblock .doral-mapblock__legend-items .doral-icon {
	color: var(--dm-primary-light);
}

.doral-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
}

.doral-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ------------------------------------------------------------------ map */

.doral-mapblock__map {
	position: relative;
	width: 100%;
	max-width: 1056px;
}

.doral-mapblock__map > svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.doral-mapblock__map path {
	fill: var(--dm-primary);
	stroke: var(--dm-primary-800);
	stroke-width: 1;
	stroke-linejoin: round;
	transition: fill 0.15s ease;
}

.doral-mapblock__map path.has-projects {
	fill: var(--dm-tint-100);
	cursor: pointer;
}

.doral-mapblock__map path.has-projects:hover,
.doral-mapblock__map path.has-projects.is-active {
	fill: var(--dm-paper);
}

.doral-mapblock__map path.has-projects:focus-visible {
	outline: none;
	stroke: var(--dm-paper);
	stroke-width: 2.5;
}

/* ------------------------------------------------------------------ map card
   Figma "map card / variant 3" (590:926) */

.doral-mapcard {
	position: absolute;
	z-index: 5;
	width: 304px;
	display: flex;
	flex-direction: column;
	border-radius: var(--dm-radius);
	background: var(--dm-paper);
	filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25));
	color: var(--dm-ink);
	pointer-events: none;
	text-align: left;
}

.doral-mapcard[hidden] {
	display: none;
}

.doral-mapcard__media {
	height: 137px;
	overflow: hidden;
	border-radius: var(--dm-radius) var(--dm-radius) 0 0;
	background: var(--dm-tint-100);
	flex: 0 0 auto;
}

.doral-mapcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.doral-mapcard__body {
	display: flex;
	flex-direction: column;
	gap: var(--dm-s2);
	padding: var(--dm-s3);
	border-radius: 0 0 var(--dm-radius) var(--dm-radius);
}

/* when a state has no image the body owns all four corners */
.doral-mapcard__media + .doral-mapcard__body {
	border-radius: 0 0 var(--dm-radius) var(--dm-radius);
}

.doral-mapcard__body:first-child {
	border-radius: var(--dm-radius);
}

.doral-mapcard__head {
	display: flex;
	flex-direction: column;
	gap: var(--dm-s1);
}

.doral-mapcard__titlerow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dm-s2);
}

.doral-mapcard__state {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--dm-ink);
}

.doral-mapcard__types {
	display: flex;
	align-items: flex-start;
	gap: var(--dm-s1);
	color: var(--dm-primary-light);
}

.doral-mapcard__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* two classes so it outranks the reset guard above, which zeroes list padding */
.doral-mapblock .doral-mapcard__list li {
	padding: 4px 0;
	border-bottom: 1px solid var(--dm-tint-100);
	font-size: 13px;
	line-height: 1.3;
	color: var(--dm-ink-3);
}

.doral-mapcard__totals {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dm-s2);
	margin: 0;
	font-size: 20px;
	line-height: 1.5;
	white-space: nowrap;
	color: var(--dm-ink-3);
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1000px) {
	.doral-mapblock {
		padding: var(--dm-s10) var(--dm-s4);
	}
	.doral-mapblock__head {
		flex-direction: column;
		align-items: flex-start;
	}
	.doral-mapblock__heading {
		font-size: 36px;
	}
	.doral-mapblock__legend {
		width: 100%;
	}
}

@media (max-width: 680px) {
	.doral-mapblock {
		padding: var(--dm-s10) var(--dm-s3);
	}
	.doral-mapblock__heading {
		font-size: 30px;
	}
	.doral-mapblock__inner {
		gap: var(--dm-s4);
	}

	/*
	 * There is no room to float a 304px card beside a state on a phone, and hover does not
	 * exist — so the card is pinned across the bottom of the map instead of tracking the
	 * pointer.
	 */
	.doral-mapcard {
		position: static;
		width: 100%;
		max-width: 100%;
		margin-top: var(--dm-s3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.doral-mapblock * {
		transition: none !important;
	}
}