/* GoCamp – Danmarkskortet på forsiden. */

.gc-danmarkskort {
	margin: 0 auto;
}

.gc-danmarkskort__filtre {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 22px 0 18px;
}

.gc-danmarkskort__filter {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid var(--gc-kant, #e2dacb);
	border-radius: 999px;
	background: var(--gc-hvid, #fffdf9);
	color: var(--gc-tekst, #26302a);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gc-danmarkskort__filter:hover {
	border-color: var(--gc-salvie, #a9b8a0);
}

.gc-danmarkskort__filter[aria-pressed="true"] {
	background: var(--gc-skov, #2f4a3a);
	border-color: var(--gc-skov, #2f4a3a);
	color: var(--gc-hvid, #fffdf9);
}

.gc-danmarkskort__filter:focus-visible,
.gc-danmarkskort__find-mig:focus-visible {
	outline: 3px solid var(--gc-okker, #c9973f);
	outline-offset: 2px;
}

.gc-danmarkskort__prik {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(255, 253, 249, 0.9);
}

.gc-danmarkskort__tal {
	font-weight: 400;
	opacity: 0.75;
}

.gc-danmarkskort__ramme {
	position: relative;
	border-radius: var(--gc-radius, 14px);
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(31, 51, 41, 0.12);
	background: var(--gc-salvie-lys, #dde5d6);
}

.gc-danmarkskort__kort {
	width: 100%;
}

.gc-danmarkskort__status {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
	color: var(--gc-tekst-bloed, #4a554d);
}

.gc-danmarkskort__find-mig {
	position: absolute;
	left: 12px;
	bottom: 24px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--gc-hvid, #fffdf9);
	color: var(--gc-skov, #2f4a3a);
	font-weight: 600;
	box-shadow: 0 4px 14px rgba(31, 51, 41, 0.2);
	cursor: pointer;
}

.gc-danmarkskort__find-mig[disabled] {
	opacity: 0.6;
}

/* Over OpenStreetMap-krediteringen, der ligger over Googles logo (ca. 52-70 px oppe). */
.gc-danmarkskort--osm-kredit .gc-danmarkskort__find-mig {
	bottom: 80px;
}

.gc-danmarkskort__fod {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 16px 0 0;
	color: var(--gc-tekst-bloed, #4a554d);
}

/* Klynger (MarkerClusterer med cssClass: kun top/left sættes inline;
   klasserne hedder cluster0–cluster4). */
.gc-danmarkskort .gc-klynge {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(47, 74, 58, 0.92);
	box-shadow: 0 0 0 5px rgba(47, 74, 58, 0.25);
	color: #fffdf9;
	font: 700 13px/1 "Figtree", system-ui, sans-serif;
	cursor: pointer;
}

.gc-danmarkskort .gc-klynge.cluster0 { width: 34px; height: 34px; }
.gc-danmarkskort .gc-klynge.cluster1 { width: 40px; height: 40px; }
.gc-danmarkskort .gc-klynge.cluster2 { width: 48px; height: 48px; font-size: 14px; }
.gc-danmarkskort .gc-klynge.cluster3 { width: 56px; height: 56px; font-size: 15px; background: rgba(31, 51, 41, 0.94); }
.gc-danmarkskort .gc-klynge.cluster4 { width: 64px; height: 64px; font-size: 16px; background: rgba(31, 51, 41, 0.96); }

/* Infoboks. */
.gc-danmarkskort__info {
	max-width: 240px;
	font-family: "Figtree", system-ui, sans-serif;
	color: var(--gc-tekst, #26302a);
}

.gc-danmarkskort__info img {
	display: block;
	width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 8px;
}

.gc-danmarkskort__info p {
	margin: 0 0 6px;
}

.gc-danmarkskort__info-titel {
	font-family: "Fraunces", Georgia, serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
}

.gc-danmarkskort__info-meta {
	font-size: 13px;
	color: var(--gc-tekst-bloed, #4a554d);
}

.gc-danmarkskort__info-maerker {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.gc-danmarkskort__info-maerker span {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--gc-salvie-lys, #dde5d6);
	color: var(--gc-skov, #2f4a3a);
	font-size: 12px;
	font-weight: 600;
}

.gc-danmarkskort__info-link {
	display: inline-block;
	margin-top: 4px;
	font-weight: 700;
	color: var(--gc-terracotta, #b8683f);
}

@media (max-width: 600px) {
	.gc-danmarkskort__filtre {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	.gc-danmarkskort__filter {
		flex: 0 0 auto;
	}

	.gc-danmarkskort__fod {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}