/* ============================================================
   forhandler.css
   Tilpasninger for forhandlerrekrutterings-landingsside.
   Eksisterende bootstrap.css, fonts.css og style.css er urørt.
   ============================================================ */

/* Hero: USP-linje under hovedteksten */
.hero-usp {
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-top: 0.5rem;
}

/* Forhandler-kart wrapper og selve kartet */
.forhandler-map-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 500px;
}

#forhandler-map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 500px;
	z-index: 1;
}

/* Badge oppe på kartet ("20+ forhandlere over hele Norge").
   Plassert til høyre for Leaflets +/- zoom-kontroller. */
.forhandler-map-badge {
	position: absolute;
	top: 10px;
	left: 60px;
	z-index: 1000;
	background: rgba(33, 33, 33, 0.92);
	color: #fff;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	border-radius: 2px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	pointer-events: none;
}

/* Demp basekartet ytterligere slik at markører står tydelig frem.
   Markører ligger i .leaflet-marker-pane og påvirkes ikke av denne. */
.leaflet-tile-pane {
	filter: grayscale(35%) brightness(102%);
}

/* Custom forhandler-pin: mørk grå (#212121) med hvit kant og hvit prikk.
   Matcher button-gray-800 og badge-en på kartet. */
.nordsjo-marker {
	background: none;
	border: none;
}

.nordsjo-marker svg {
	display: block;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
	transition: transform 0.2s ease-out;
	transform-origin: 50% 100%;
}

.nordsjo-marker:hover svg {
	transform: scale(1.18);
}

/* Hold den hovrede pin-en over de andre */
.leaflet-marker-icon.nordsjo-marker:hover {
	z-index: 1001 !important;
}

/* Leaflet popup-styling */
.leaflet-popup-content {
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	margin: 12px 16px;
}

.leaflet-popup-content strong {
	display: block;
	font-size: 15px;
	margin-bottom: 2px;
}

.forhandler-popup-adr {
	color: #6c6c6c;
	font-size: 13px;
}

/* På små skjermer: gi kartet en fast høyde slik at det blir synlig
   under skjemaet i stedet for å være avhengig av forelderens høyde */
@media (max-width: 1199px) {
	.forhandler-map-wrap,
	#forhandler-map {
		min-height: 420px;
		height: 420px;
	}
	.forhandler-map-wrap {
		position: relative;
	}
	#forhandler-map {
		position: relative;
		inset: auto;
	}
}