.trip-detail {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	font-family: system-ui, sans-serif;
	color: var(--text-color);
	background-color: var(--bg-color);
}

.trip-header {
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 16px;
}

.trip-title {
	font-size: 1.5em;
	margin: 0;
}

.trip-meta {
	font-size: 0.95em;
	color: var(--meta-color);
}

.difficulty-strip {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: middle;
}

.difficulty-veryeasy {
	background-color: limegreen;
}

.difficulty-easy {
	background-color: deepskyblue;
}

.difficulty-medium {
	background-color: gold;
}

.difficulty-challenging {
	background-color: orange;
}

.difficulty-hard {
	background-color: red;
}

.difficulty-extreme {
	background-color: black;
}

.trip-description,
.trip-tags,
.trip-map,
.trip-poi,
.trip-refreshment,
.trip-meta-info {
	margin-bottom: 20px;
}

.tag {
	background-color: var(--tag-bg);
	color: var(--tag-text);
	padding: 4px 10px;
	border-radius: 12px;
	margin-right: 6px;
	font-size: 0.85em;
	display: inline-block;
}

a {
	color: var(--link-color);
	text-decoration: none;
}

	a:hover {
		text-decoration: underline;
	}

/* Light mode */
:root {
	--bg-color: #fff;
	--text-color: #222;
	--meta-color: #666;
	--border-color: #ddd;
	--tag-bg: #eee;
	--tag-text: #333;
	--link-color: #0078d7;
}

/* PoI */
.poi-detail {
	background-color: var(--bg-color);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	padding: 16px;
	margin-top: 20px;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.hidden {
	display: none;
}