/**
 * The world map.
 *
 * The picture is a plain image; every mark on it is an anchor placed by
 * percentage, so the two scale together and the map needs no JavaScript to be
 * clicked, tabbed through or read out.
 */

.vnk-world {
	margin: 2.5rem 0;
}

.vnk-world-frame {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 0 0 1px #333 inset;
	/* The shape the map was drawn in, so the space is held before it loads. */
	aspect-ratio: var(--vnk-world-ratio, 25 / 14);
	background-color: #e9e5dc;
}

.vnk-world-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/**
 * A mark.
 *
 * The anchor is the dot: a fixed size in pixels, because a marker that scaled
 * with the picture would be a smudge on a phone and a saucer on a desk. It is
 * pulled back by half its own size so the point of it, not its corner, sits on
 * the town.
 */
.vnk-world-pin {
	position: absolute;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	border: 2px solid #fff;
	background-color: #c81e2d;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
	text-decoration: none;
	/* Above its neighbours only while it is being used. */
	z-index: 1;
	transition: transform 0.12s ease, background-color 0.12s ease;
}

.vnk-world-pin:hover,
.vnk-world-pin:focus-visible {
	transform: scale(1.35);
	background-color: #e8323f;
	z-index: 3;
	outline: none;
}

/* The name, shown only when the mark is pointed at or tabbed to. */
.vnk-world-pin span {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	padding: 3px 8px;
	border-radius: 3px;
	background-color: rgba(20, 20, 20, 0.92);
	color: #fff;
	font-family: var(--font-sub, inherit);
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.02em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

.vnk-world-pin:hover span,
.vnk-world-pin:focus-visible span {
	opacity: 1;
}

/* Name over date, both centred, in the drawn map's plain tooltip. */
.vnk-world-pin span .vnk-world-name,
.vnk-world-pin span .vnk-world-when {
	display: block;
	text-align: center;
}

/*
 * Required by the licence on OpenStreetMap's data. Same treatment as the trip
 * map's: in the corner of the picture, quiet but never hidden.
 */
.vnk-world .vnk-map-credit {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 1px 5px;
	border-radius: 3px 0 0 0;
	background-color: rgba(255, 255, 255, 0.7);
	color: #3a3a3a;
	font-family: var(--font-sub, inherit);
	font-size: 10px;
	line-height: 1.5;
	white-space: nowrap;
}

.vnk-world-caption {
	margin-top: 0.6rem;
	font-family: var(--font-sub, inherit);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #8a8a8a;
}

/*
 * On a phone a 14px dot is about the smallest thing a finger can hit, and the
 * hover label never appears at all - so the dot grows and the name is left to
 * the page the mark leads to.
 */
@media (max-width: 700px) {
	.vnk-world-pin {
		width: 18px;
		height: 18px;
		margin: -9px 0 0 -9px;
	}
}

/* ==========================================================================
   The live map
   ========================================================================== */

/*
 * The box the map is built into. It keeps the drawn proportions so the page
 * does not move while the tiles arrive, and carries the same frame as the
 * picture it replaces.
 */
.vnk-world-live {
	background-color: #e9e5dc;
}

/* Leaflet paints its own panes; the rounded corner has to be told twice. */
.vnk-world-live .leaflet-container {
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background-color: #e9e5dc;
	font-family: var(--font-sub, inherit);
}

/*
 * A mark. Same red dot as the drawn map, so the two versions of this page look
 * like the same map rather than two different ones.
 */
.vnk-world-marker {
	background: none;
	border: 0;
}

.vnk-world-dot {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #fff;
	background-color: #c81e2d;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
	transition: transform 0.12s ease, background-color 0.12s ease;
}

.vnk-world-marker:hover .vnk-world-dot,
.vnk-world-marker:focus .vnk-world-dot {
	transform: scale(1.3);
	background-color: #e8323f;
}

/* Several trips in one place: the count, on a larger disc. */
.vnk-world-marker--many .vnk-world-dot {
	width: 26px;
	height: 26px;
	line-height: 22px;
	text-align: center;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
}

.vnk-world-name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * The date, quieter than the name it sits under: it answers a second question
 * - which visit this was - and should not compete with the first.
 */
.vnk-world-when {
	display: block;
	margin-top: 1px;
	color: #a8a8a8;
	font-size: 11px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/*
 * The card a mark shows.
 *
 * One of these whether the mark stands for one trip or several, pointed at
 * rather than clicked in both cases. It used to be two different things - a
 * floating label with no tail for a single trip, a popup with one for a group,
 * one on hover and the other on click - so two marks a centimetre apart
 * behaved like two different pieces of software.
 */
.vnk-world-popup .leaflet-popup-content-wrapper {
	border-radius: 4px;
	background-color: #2e2e2e;
	color: #ececec;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.vnk-world-popup .leaflet-popup-tip {
	background-color: #2e2e2e;
}

.vnk-world-popup .leaflet-popup-content {
	margin: 0.6rem 0.8rem;
	min-width: 160px;
}

/*
 * The gap between the mark and the card is crossed with the pointer, on the
 * way to the links inside it, so nothing in that corridor may swallow the
 * pointer. Leaflet's wrapper reaches further than it looks.
 */
.vnk-world-popup .leaflet-popup-content-wrapper,
.vnk-world-popup .leaflet-popup-tip-container {
	pointer-events: auto;
}

.vnk-world-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vnk-world-list li + li {
	margin-top: 0.5rem;
}

/*
 * A row per trip: picture, then name over date. Padded and rounded because
 * the whole row is the target - aiming at four words of a title is harder
 * than it needs to be when three trips are stacked in one card.
 */
.vnk-world-list a {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 3px;
	border-radius: 4px;
	color: #a9c9ff;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background-color 0.12s ease;
}

/* Name and date beside the picture, not either side of it. */
.vnk-world-list .vnk-world-text {
	min-width: 0;
}

/*
 * The picture.
 *
 * Weighed against Leaflet's own ".leaflet-container .leaflet-popup img", so
 * the selector carries an element of its own to match it - two classes alone
 * lost, and the picture came out its natural size.
 */
.leaflet-container .vnk-world-list img.vnk-world-thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	margin: 0;
	border-radius: 3px;
	object-fit: cover;
	background-color: #3a3a3a;
}

.vnk-world-list a:hover,
.vnk-world-list a:focus {
	background-color: rgba(255, 255, 255, 0.09);
	color: #fff;
}

/* Leaflet's own credit line, matched to the drawn map's corner. */
.vnk-world-live .leaflet-control-attribution {
	background-color: rgba(255, 255, 255, 0.7);
	color: #3a3a3a;
	font-size: 10px;
}

.vnk-world-live .leaflet-control-attribution a {
	color: #1a4f8a;
}

/*
 * The padlock on a trip only its owner can see - in a mark's card, and in the
 * drawn map's tooltip. On the date's line, the same as everywhere else on the
 * site, so the map is not saying the one thing a second way.
 *
 * A mask rather than a picture, so it takes the colour of the line it sits on
 * and there is one copy of the shape rather than one per place that draws it.
 */
:root {
	--vnk-world-lock-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6a5.4 5.4 0 0 0-5.4 5.4v2.6H6A2.4 2.4 0 0 0 3.6 12v8A2.4 2.4 0 0 0 6 22.4h12A2.4 2.4 0 0 0 20.4 20v-8A2.4 2.4 0 0 0 18 9.6h-.6V7A5.4 5.4 0 0 0 12 1.6zm0 2.2A3.2 3.2 0 0 1 15.2 7v2.6H8.8V7A3.2 3.2 0 0 1 12 3.8z'/%3E%3C/svg%3E");
}

.vnk-world-lock {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	margin-right: 0.4em;
	vertical-align: -0.24em;
	background-color: currentColor;
	opacity: 0.75;
	-webkit-mask: var(--vnk-world-lock-shape) center / contain no-repeat;
	mask: var(--vnk-world-lock-shape) center / contain no-repeat;
}