/* World of Facta — the illustration is a single image, the islands are
   hotspots laid over it.

   Stacking, bottom to top:
     0  .wof-spot          hotspot + drop shadow
     1  .wof-illustration  the illustration itself
     2  .wof-label         the sector label

   The hotspot sits below the illustration so its shadow falls behind the island
   and behind the surrounding roads and trees. Pointer events still reach it,
   because the illustration is set to pointer-events: none.

   Everything hangs off .world-of-facta. That is not cosmetic here: Salient
   styles bare <button> and <li> elements with selectors more specific than a
   single class, and those have to be beaten. See the notes below. */

.world-of-facta {
	position: relative;
	/* Labels scale with the illustration, not with the viewport. */
	container-type: inline-size;
	/* Keeps the z-indexes below scoped to this component. */
	isolation: isolate;

	.wof-illustration {
		position: relative;
		z-index: 1;
		display: block;
		inline-size: 100%;
		pointer-events: none;
		/* Salient gives every image in a column 15px of bottom margin
		   (`.row .col img`, more specific than a single nested class). That space
		   counts toward this component's height, which makes the hotspot layer
		   taller than the illustration and pushes every island down. */
		margin-bottom: 0 !important;
	}

	.wof-sectors {
		position: absolute;
		inset: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Salient's `ul li { list-style: disc }` puts the bullet on the <li> itself.
	   A list-style inherited from the <ul> above always loses to that, however
	   specific it is. So it goes on the item as well. */
	.wof-sector {
		list-style: none;
	}

	.wof-spot {
		position: absolute;
		z-index: 0;
		left: var(--x);
		top: var(--y);
		inline-size: var(--w);
		block-size: var(--h);
		/* Isometric disc: elliptical top and bottom face with a straight edge
		   between them. 44% is half the height of the top face, from Figma.

		   !important because salient-dynamic-styles.css gives every <button> a
		   `border-radius: 4px !important` (rule on
		   `body[data-button-style*="slightly_rounded"] button`). Without this the
		   drop shadow is a rectangle instead of an island. Only this component is
		   affected, so the patch belongs here and not in overrides.css. */
		border-radius: 50% / 44% !important;
		padding: 0;
		border: 0;
		background: none;
		appearance: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		/* The same Salient rule sets its own transition on every button. */
		transition: box-shadow 0.2s ease;
	}

	/* Both lift layers: the illustration straddles the edge between the dark band
	   and the page background, so the islands in the top half need the light
	   shadow and the ones in the bottom half the dark one. See tokens.css. */
	.wof-spot:hover,
	.wof-spot:focus-visible {
		box-shadow: var(--shadow-lifted), var(--shadow-lifted-on-dark);
	}

	/* The hotspot sits below the illustration, so the focus ring from base.css
	   would half disappear behind the island. It moves to the label, which does
	   sit on top and shows on focus anyway. */
	.wof-spot:focus-visible {
		outline: none;
	}

	.wof-label {
		position: absolute;
		z-index: 2;
		left: var(--lx);
		top: var(--ly);
		/* The anchor is the edge that touches the island, at half the label
		   height. */
		translate: 0 -50%;
		padding: 0.75em 1.5em;
		border-radius: var(--radius);
		background-color: var(--color-surface);
		color: var(--color-primary);
		/* Figma: Bold 16 on a cropped artboard 1032 wide. */
		font-size: clamp(0.8125rem, 1.55cqi, 1rem);
		font-weight: 700;
		line-height: 1.2;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.wof-label[data-side="left"] {
		translate: -100% -50%;
	}

	.wof-spot:hover + .wof-label,
	.wof-spot:focus-visible + .wof-label {
		opacity: 1;
	}

	.wof-spot:focus-visible + .wof-label {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.world-of-facta :is(.wof-spot, .wof-label) {
		transition: none;
	}
}