/**
 * Tidhar Custom Map
 *
 * Everything is driven by custom properties on .tcm. Elementor's controls
 * (including their per-breakpoint values) only set those properties, so the
 * layout follows the site's own breakpoints.
 *
 * --tcm-u is "1% of the widget width": all default sizes are multiples of it,
 * so the buttons scale together with the map wherever the widget is placed.
 */

.tcm {
	/* 1% of the widget width (falls back to the viewport in old browsers). */
	--tcm-u: 1vw;

	/* Buttons: 1 = over the map's side panel, 0 = below the map. */
	--tcm-ov: 1;
	--tcm-bpos: absolute;

	/* Side panel of the artwork (share of the SVG width). It is cropped when the buttons sit below the map. */
	--tcm-panel: 0.172;

	/* Zoom and the point the zoom grows from (% of the visible map). */
	--tcm-scale: 1;
	--tcm-fx: 62%;
	--tcm-fy: 60%;

	/* Position of the buttons column over the map (% of the map). */
	--tcm-bx: 87.9%;
	--tcm-by: 24.32%;
	--tcm-bw: 7.85%;

	/* Defaults of the "over the map" layout. */
	--tcm-cols-d: 1;
	--tcm-gap-d: calc(var(--tcm-u) * 0.893);
	--tcm-bpad-d: 0px;
	--tcm-fs-d: calc(var(--tcm-u) * 1.11);

	position: relative;
	width: 100%;
	container-type: inline-size;
	/* Size containment makes the map 0 wide when its width comes from its content
	   (e.g. inside a row container with no width set). This gives it a sane width there. */
	contain-intrinsic-inline-size: 640px;
}

@supports (width: 1cqw) {
	.tcm {
		--tcm-u: 1cqw;
	}
}

.tcm__stage {
	position: relative;
}

/* ---------- Map ---------- */

.tcm__viewport {
	--tcm-crop: calc(var(--tcm-panel) * (1 - var(--tcm-ov)));

	position: relative;
	overflow: hidden;
	width: 100%;
	direction: ltr; /* keeps the crop on the right side on RTL pages */
}

.tcm__canvas {
	width: calc(100% / (1 - var(--tcm-crop)));
	transform: scale(var(--tcm-scale));
	transform-origin: calc(var(--tcm-fx) * (1 - var(--tcm-crop))) var(--tcm-fy);
}

.tcm__svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--tcm-vbw) / var(--tcm-vbh);
	/* The shapes of the artwork touch each other with nothing underneath, so whatever is
	   behind the map shows as hairlines along their edges. Backing it with the land colour hides them. */
	background-color: var(--tcm-map-bg, #eee7d6);
}

/* Layers that a button switches on and off. */
.tcm__svg [data-tcm-layer] {
	transition: opacity 0.35s ease, visibility 0s linear 0s;
}

.tcm__svg [data-tcm-layer][data-tcm-off] {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

/* ---------- Roads animation ----------
   Layer names in the SVG: "roads" with "large_roads" and "small_roads" inside. */

.tcm--roads-anim .tcm__svg [data-tcm-layer="roads"] path {
	stroke-miterlimit: 10;
	animation: tcm-dash var(--tcm-road-duration, 40s) linear infinite var(--tcm-road-direction, normal);
}

.tcm--roads-anim .tcm__svg [data-tcm-layer="large_roads"] path {
	stroke-width: 6;
	stroke-dasharray: 6 8;
}

.tcm--roads-anim .tcm__svg [data-tcm-layer="small_roads"] path {
	stroke-width: 3;
	stroke-dasharray: 3 4;
}

/* No point animating what nobody sees: off-screen or switched off. */
.tcm--roads-anim.is-paused .tcm__svg [data-tcm-layer="roads"] path,
.tcm--roads-anim .tcm__svg [data-tcm-off] path {
	animation-play-state: paused;
}

/* 798 is a whole number of both dash patterns (14 and 7), so the loop has no jump. */
@keyframes tcm-dash {
	to {
		stroke-dashoffset: 798;
	}
}

/* ---------- Buttons ---------- */

.tcm__buttons {
	position: var(--tcm-bpos);
	z-index: 2;
	left: calc(var(--tcm-bx) * var(--tcm-ov));
	top: calc(var(--tcm-by) * var(--tcm-ov));
	width: calc(var(--tcm-bw) * var(--tcm-ov) + 100% * (1 - var(--tcm-ov)));
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(var(--tcm-cols, var(--tcm-cols-d)), minmax(0, 1fr));
	gap: var(--tcm-gap, var(--tcm-gap-d));
	margin: 0;
	padding: var(--tcm-bpad, var(--tcm-bpad-d));
}

/* The states are listed explicitly so theme / kit button styles cannot leak in. */
.tcm .tcm__btn,
.tcm .tcm__btn:hover,
.tcm .tcm__btn:focus,
.tcm .tcm__btn:active {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	min-width: 0;
	min-height: var(--tcm-btn-h, 0);
	aspect-ratio: 150.7 / 102.37;
	margin: 0;
	padding: 0.657em 0.3em 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--tcm-btn-radius, 0.238em);
	outline: 0;
	box-shadow: none;
	background: var(--tcm-btn-bg, var(--tcm-btn-bg-d, #5d6668));
	color: var(--tcm-btn-color, rgba(249, 249, 244, 0.8));
	font: inherit;
	font-size: var(--tcm-fs, var(--tcm-fs-d));
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	opacity: var(--tcm-off-opacity, 0.6);
	transition: opacity 0.3s ease;
	-webkit-tap-highlight-color: transparent;
}

.tcm .tcm__btn[aria-pressed="true"] {
	opacity: var(--tcm-on-opacity, 1);
}

.tcm .tcm__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.tcm__btn-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: flex-end;
	justify-content: center;
	height: var(--tcm-icon-h, 2.2045em);
	pointer-events: none;
}

.tcm__btn-icon svg {
	display: block;
	width: auto;
	height: 100%;
	fill: currentColor;
}

.tcm__btn-icon i {
	font-size: var(--tcm-icon-h, 2.2045em);
	line-height: 1;
}

.tcm__btn-label {
	display: block;
	max-width: 100%;
	margin-top: 0.16em;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

/* ---------- Misc ---------- */

.tcm--error {
	padding: 1em;
	border: 1px dashed currentColor;
	font-size: 14px;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.tcm--roads-anim .tcm__svg [data-tcm-layer="roads"] path {
		animation: none;
	}

	.tcm__svg [data-tcm-layer],
	.tcm__svg [data-tcm-layer][data-tcm-off],
	.tcm .tcm__btn {
		transition: none;
	}
}