/**
 * PropOffice Designs — Property Location.
 *
 * ONE stylesheet for every surface: the native PropOffice screen, the
 * [propoffice_property_location] shortcode, and the Elementor widget.
 *
 * PALETTE. Every colour reads a PropOffice design token with the token's own
 * value as the fallback. No brand colour is hard-coded, and none of this looks
 * like an embedded third-party widget — the map is a PropOffice component.
 *
 * ISOLATION. Every selector is namespaced under `.po-location`. Nothing here
 * can reach Property Card, Contact, Media, Overview, Breadcrumb, Description,
 * Features, Elementor chrome or theme navigation.
 *
 * LAYOUT. Intrinsic and container-relative. The map's height scales with its
 * own width through an aspect ratio, so it is proportionate in a full-width
 * content column and in a narrow sidebar without one media query.
 */

.po-location {
	font-family: var(--po-ds-font-family);
	--po-location-ink: var(--po-ds-color-text);
	--po-location-muted: var(--po-ds-color-muted);
	--po-location-border: var(--po-ds-color-border);
	--po-location-surface: var(--po-ds-color-surface);
	--po-location-accent: var(--po-ds-color-primary);
	--po-location-radius: 10px;

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	color: var(--po-location-ink);
	font-size: 15px;
	line-height: 1.6;
}

.po-location *,
.po-location *::before,
.po-location *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------- heading ---- */

/*
 * 🚨 SCOPED UNDER THE COMPONENT ROOT, TO SURVIVE A GLOBAL HEADING RULE.
 *
 * This is drawn on a real heading element, and both Elementor's global font kit
 * and most themes style headings by TAG: `.elementor-kit-10 h3` is (0,1,1) and
 * outranks a lone `.po-location__heading` at (0,1,0).
 *
 * MEASURED on the live Kava install at 1440x720, that kit rule had taken over
 * 8 of the 11 PropOffice headings on a property page. The Features category
 * label is the clearest case: declared 12px/600 uppercase with 0.06em tracking,
 * it drew at 24px/400 with tracking `normal` — LARGER than the 22px section
 * heading it sits under, so the hierarchy read backwards and the label had
 * stopped looking like a label at all.
 *
 * One extra class is the whole fix, and it is not a guess: on that same page
 * `.po-finance .po-finance__heading` and `.po-overview .po-overview__title`
 * already carried it and rendered exactly what they declare. Both at (0,2,0),
 * both winning. That is why Finance looked right and this did not — never a
 * difference of design, only of specificity.
 */
.po-location .po-location__heading {
	margin: 0 0 4px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 600;
}

.po-location__label {
	margin: 0 0 14px;
	color: var(--po-location-muted);
	overflow-wrap: anywhere;
}

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

.po-location__map-wrap {
	position: relative;
	width: 100%;
	min-width: 0;
}

/* The map is a window onto the tile grid: it clips, and nothing inside it can
   escape to widen the page. The aspect ratio keeps it proportionate at every
   container width, with a floor so a narrow sidebar still gets a usable map
   rather than a letterbox slot. */
.po-location__map {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 220px;
	overflow: hidden;
	border: 1px solid var(--po-location-border);
	border-radius: var(--po-location-radius);
	/* Shows through wherever a tile has not arrived, so a gap reads as missing
	   map data rather than as a hole in the page. */
	background: var(--po-location-border);
	cursor: grab;
	touch-action: none;
}

.po-location__map.is-dragging {
	cursor: grabbing;
}

.po-location__tiles {
	position: absolute;
	inset: 0;
}

.po-location__tile {
	position: absolute;
	width: 256px;
	height: 256px;
	max-width: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* -------------------------------------------------------------- marker ---- */

/* Anchored at its own centre, so the point it marks is the point it sits on.
   `pointer-events: none` keeps it from swallowing a drag that starts on it. */
.po-location__marker {
	position: absolute;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* An exact point is a pin: a filled dot with a ring, asserting a location. */
.po-location__marker--exact {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--po-location-accent);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 1px 4px rgba(15, 23, 42, 0.4);
}

/* An approximate point is an AREA, not a pin. A pin asserts a doorstep, and
   when the location has been blurred deliberately that assertion would be
   false — so the shape says "somewhere in here" instead. */
.po-location__marker--approximate {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: rgba(37, 99, 235, 0.18);
	border: 2px solid var(--po-location-accent);
}

/* ------------------------------------------------------------ controls ---- */

.po-location__controls {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* 40px square: a real touch target, not an icon that needs aiming at. */
.po-location__control {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: var(--po-location-ink);
	background: var(--po-location-surface);
	border: 1px solid var(--po-location-border);
	border-radius: 6px;
	cursor: pointer;
}

.po-location__control:hover {
	border-color: var(--po-location-accent);
}

/* --------------------------------------------------- text beneath the map -- */

.po-location__desc,
.po-location__attribution {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 18px;
	color: var(--po-location-muted);
	overflow-wrap: anywhere;
}

/* The controlled state when there is no map. PropOffice's own words, styled
   as part of the page rather than as an error. */
.po-location__unavailable {
	margin: 0;
	padding: 24px;
	text-align: center;
	color: var(--po-location-muted);
	background: var(--po-location-surface);
	border: 1px dashed var(--po-location-border);
	border-radius: var(--po-location-radius);
}

/* --------------------------------------------------------------- focus ---- */

/* Never `outline: none`. The map container is focusable — that is how a
   keyboard pans it — so its ring matters as much as the buttons'. */
.po-location__map:focus-visible,
.po-location__control:focus-visible {
	outline: 2px solid var(--po-location-accent);
	outline-offset: 2px;
}

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

/* --------------------------------------------------------------- views ---- */

/*
 * The choice of views — "Street map" / "Street view".
 *
 * 🚨 Rendered ONLY when the installation can actually show more than one, so on
 * a stock install this selector matches nothing. There is deliberately no
 * disabled state anywhere in this block: a greyed-out "Street view" teaches a
 * visitor the page is broken, where its absence teaches them nothing at all,
 * which is the truth.
 */
.po-location__views {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: 12px;
}

.po-location__view {
	padding: 8px 16px;
	border: 1px solid var(--po-location-border);
	background: none;
	font-family: var(--po-type-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--po-ds-color-muted);
	cursor: pointer;
}

/* The view currently on screen. `aria-pressed` is the state, so the styling
   reads the same attribute a screen reader does rather than a second class
   somebody has to remember to keep in step. */
.po-location__view[aria-pressed="true"] {
	border-color: var(--po-ds-color-text);
	color: var(--po-ds-color-text);
}

.po-location__view:focus-visible {
	outline: 2px solid var(--po-ds-color-text);
	outline-offset: 2px;
}

/* ----------------------------------------------------------- panorama ---- */

.po-location__panorama-wrap[hidden] {
	display: none;
}

/*
 * 🚨 The SAME box as the map, declaration for declaration.
 *
 * Aspect ratio, minimum height, border and radius all match
 * `.po-location__map` — switching views must not move the page or change the
 * shape of the thing being looked at. Measured on the rig, a panorama viewport
 * without these was the same width but a different height and had no edge,
 * which read as a hole rather than as a second view of the same place.
 */
.po-location__panorama {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 220px;
	overflow: hidden;
	border: 1px solid var(--po-location-border);
	border-radius: var(--po-location-radius);
	background: var(--po-location-border);
}

.po-location__panorama-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The map's own controls, while the map is what is on screen. Hidden with it,
   because a zoom button over a panorama zooms nothing. */
.po-location__controls[hidden] {
	display: none;
}