/**
 * CK Nursery Map - front-end styles.
 * Scoped under .ckmap so it can't leak into the theme.
 */

.ckmap {
	--ckmap-max: 1100px;
	width: 100%;
	--ckmap-radius: 10px;
	max-width: var(--ckmap-max);
	margin: 1.5rem auto;
	font-family: inherit;
}

.ckmap__intro {
	margin: 0 0 1.25rem;
	font-size: 1.02rem;
	line-height: 1.6;
}
.ckmap__intro p:last-child { margin-bottom: 0; }

.ckmap__setup {
	padding: 0.85rem 1rem;
	background: #fff8e1;
	border: 1px solid #ffe08a;
	border-radius: 8px;
}

/* Stage: image + svg overlay locked to the photo's aspect ratio. */
.ckmap__stage {
	position: relative;
	width: 100%;
	margin: 0;
	aspect-ratio: var(--ckmap-aspect, 1064 / 1154);
	background: #e9ecef;
	border-radius: var(--ckmap-radius);
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.ckmap__img,
.ckmap__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.ckmap__img {
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}

.ckmap__svg {
	/* SVG sits over the photo; only the shapes catch pointer events. */
	pointer-events: none;
	overflow: visible;
}

/* Zones (both <a> and informational <g>). */
.ckmap__zone { pointer-events: auto; }

.ckmap__zone polygon {
	fill: var(--zone, #1f7a34);
	fill-opacity: 0;
	stroke: #ffffff;
	stroke-width: 0.25;
	stroke-opacity: 0;
	transition: fill-opacity 0.16s ease, stroke-opacity 0.16s ease;
	cursor: pointer;
	vector-effect: non-scaling-stroke;
	/* Hit-test the whole interior even while the fill is fully transparent -
	   without this, a 0-opacity polygon would not receive hover/click. */
	pointer-events: fill;
}

/* Hover / focus / active highlight (links only). */
.ckmap__zone:not(.is-info):hover polygon,
.ckmap__zone:not(.is-info):focus polygon,
.ckmap__zone.is-active polygon,
.ckmap__zone.is-group-active polygon {
	fill-opacity: 0.42;
	stroke-opacity: 0.9;
	stroke-width: 2;
}

.ckmap__zone:focus { outline: none; }
.ckmap__zone:focus-visible polygon {
	fill-opacity: 0.42;
	stroke-opacity: 1;
	stroke: #ffd43b;
	stroke-width: 2.5;
}

/* Informational buildings: subtle, no pointer link, faint on hover. */
.ckmap__zone.is-info polygon { cursor: default; }
.ckmap__zone.is-info:hover polygon { fill-opacity: 0.28; stroke-opacity: 0.6; stroke-width: 1.5; }

/* Tooltip chip. */
.ckmap__tip {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	max-width: 60%;
    min-width: 120px;
	padding: 5px 10px;
	background: rgba(20, 24, 22, 0.94);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.3;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	white-space: nowrap;
	transition: opacity 0.12s ease;
	/* JS sets left/top to the box's top-left corner and clamps it inside the
	   stage, so the tip is never cut off by the image edge. */
}
.ckmap__tip[hidden] { display: none; }

/* Arrow — tracks the real point via --ckmap-arrow-x, and flips to the top edge
   when the tip is dropped below the point (i.e. near the image's top edge). */
.ckmap__tip::after {
	content: "";
	position: absolute;
	left: var(--ckmap-arrow-x, 50%);
	transform: translateX(-50%);
	border: 6px solid transparent;
}
.ckmap__tip:not(.is-below)::after {
	top: 100%;
	border-top-color: rgba(20, 24, 22, 0.94);
}
.ckmap__tip.is-below::after {
	bottom: 100%;
	border-bottom-color: rgba(20, 24, 22, 0.94);
}
.ckmap__tip .ckmap__tip-go {
	display: inline-block;
	font-style: italic;
	opacity: 0.75;
    line-height: 1.2;
	font-weight: 300;
}

/* Legend / link list. */
.ckmap__legend {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.4rem 0.9rem;
}
.ckmap__legend-item { margin: 0; }
.ckmap__legend-item a {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 0.6rem;
	border-radius: 7px;
	text-decoration: none;
	color: inherit;
	line-height: 1.3;
	transition: background 0.14s ease;
}
.ckmap__legend-item a:hover,
.ckmap__legend-item a:focus-visible {
	background: rgba(0, 0, 0, 0.06);
}
.ckmap__swatch {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	background: var(--zone, #1f7a34);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.ckmap__legend-label { font-weight: 600; }
.ckmap__legend-ids {
	margin-left: auto;
	font-size: 0.78rem;
	opacity: 0.6;
	padding-left: 0.5rem;
}

@media (prefers-color-scheme: dark) {
	.ckmap__legend-item a:hover,
	.ckmap__legend-item a:focus-visible { background: rgba(255, 255, 255, 0.08); }
}

@media (max-width: 600px) {
	.ckmap__tip { max-width: 75%; white-space: normal; }
	.ckmap__legend { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.ckmap__zone polygon,
	.ckmap__tip,
	.ckmap__legend-item a { transition: none; }
}