/* Anime Routes Japan - the place map inside a route guide.
   Loaded only on guides that contain a map. Colours come from the site
   palette; every pin also carries its number, so colour is never the only way
   to tell one kind of place from another. */

.arj-map {
	margin: 1.9rem 0 2.3rem;
	padding: 1.1rem 1.2rem 1.2rem;
	border: 1px solid var(--arj-hair, #e8dce3);
	border-radius: 8px;
	background-color: #fff;
}

/* Several parts of the block start hidden and are revealed once the map is
   open. The rules below set display on those elements, so hidden has to be
   restated here or it would lose to them. */
.arj-map [hidden] {
	display: none;
}

.arj-map__intro {
	margin: 0 0 0.85rem;
	color: var(--arj-second, #566273);
	font-size: 0.9rem;
	line-height: 1.6;
}

.arj-map__show {
	display: inline-block;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--arj-rose, #a63e68);
	border-radius: 999px;
	background-color: var(--arj-rose, #a63e68);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.arj-map__show:hover,
.arj-map__show:focus {
	background-color: var(--arj-rose-dark, #893253);
	border-color: var(--arj-rose-dark, #893253);
}

.arj-map__show[disabled] {
	opacity: 0.6;
	cursor: default;
}

.arj-map__canvas {
	height: 430px;
	margin: 1rem 0 0.6rem;
	border: 1px solid var(--arj-hair, #e8dce3);
	border-radius: 6px;
	background-color: var(--arj-petal, #fff0f5);
}

.arj-map__areas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.6rem 0 0;
}

.arj-map__areas button {
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--arj-hair, #e8dce3);
	border-radius: 999px;
	background-color: #fff;
	color: var(--arj-indigo, #21344c);
	font-size: 0.85rem;
	cursor: pointer;
}

.arj-map__areas button[aria-pressed="true"] {
	border-color: var(--arj-rose, #a63e68);
	background-color: var(--arj-petal, #fff0f5);
	color: var(--arj-rose-dark, #893253);
	font-weight: 600;
}

.arj-map__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	margin: 0.8rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--arj-second, #566273);
	font-size: 0.82rem;
}

.arj-map__legend span {
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	margin-right: 0.35rem;
	border-radius: 50%;
	vertical-align: -1px;
}

.arj-map__legend .is-anime { background-color: #a63e68; }
.arj-map__legend .is-transport { background-color: #21344c; }
.arj-map__legend .is-sight { background-color: #356e6b; }

.arj-map__listwrap {
	margin: 0.9rem 0 0;
}

.arj-map__listwrap > summary {
	display: list-item;
	width: fit-content;
	padding: 0.35rem 0.5rem;
	border-radius: 3px;
	color: var(--arj-second, #566273);
	font-size: 0.9rem;
	cursor: pointer;
	list-style-position: inside;
}

.arj-map__list {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.arj-map__item {
	display: grid;
	grid-template-columns: 1.9rem 1fr;
	gap: 0.1rem 0.6rem;
	margin: 0;
	padding: 0.65rem 0;
	border-top: 1px solid var(--arj-hair, #e8dce3);
}

.arj-map__item:first-child {
	border-top: 0;
}

.arj-map__num {
	grid-row: span 3;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background-color: #a63e68;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.7rem;
	text-align: center;
}

.arj-map__item[data-type="transport"] .arj-map__num { background-color: #21344c; }
.arj-map__item[data-type="sight"] .arj-map__num { background-color: #356e6b; }

.arj-map__name {
	color: var(--arj-indigo, #21344c);
	font-weight: 600;
}

.arj-map__ja {
	display: block;
	color: var(--arj-second, #566273);
	font-size: 0.82rem;
	font-weight: 400;
}

.arj-map__note {
	color: var(--arj-second, #566273);
	font-size: 0.88rem;
	line-height: 1.55;
}

.arj-map__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 1rem;
	font-size: 0.85rem;
}

.arj-map__links a,
.arj-map__links button {
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: var(--arj-rose-dark, #893253);
	font-size: 0.85rem;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	cursor: pointer;
}

.arj-map__fail {
	margin: 0.8rem 0 0;
	color: var(--arj-second, #566273);
	font-size: 0.9rem;
}

.arj-map__credit {
	margin: 0.9rem 0 0;
	color: var(--arj-second, #566273);
	font-size: 0.76rem;
	line-height: 1.5;
}

.arj-map a:focus-visible,
.arj-map button:focus-visible {
	outline: 3px solid var(--arj-rose, #a63e68);
	outline-offset: 2px;
	border-radius: 3px;
}

/* The numbered pins on the map itself. */
.arj-pin {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(16, 32, 50, 0.45);
	background-color: #a63e68;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
}

.arj-pin--transport { background-color: #21344c; }
.arj-pin--sight { background-color: #356e6b; }

.arj-map__popup-name {
	margin: 0 0 0.3rem;
	color: #21344c;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.35;
}

.arj-map__popup-ja {
	display: block;
	color: #566273;
	font-size: 0.8rem;
	font-weight: 400;
}

.arj-map__popup-note {
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
	line-height: 1.5;
}

.arj-map__popup-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.9rem;
	margin: 0;
	font-size: 0.85rem;
}

.arj-map__popup-links a {
	color: #893253;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

@media (max-width: 767px) {
	.arj-map {
		padding: 0.9rem 0.9rem 1rem;
	}

	.arj-map__canvas {
		height: 330px;
	}

	.arj-map__show {
		display: block;
		width: 100%;
		text-align: center;
	}

	.arj-map__item {
		grid-template-columns: 1.7rem 1fr;
	}

	.arj-map__note,
	.arj-map__links a,
	.arj-map__links button {
		font-size: 0.92rem;
	}
}