:root {
	--bg-top: #07271f;
	--bg-mid: #051a16;
	--bg-bot: #020c0a;
	--panel: rgba(8, 30, 27, 0.72);
	--panel-border: rgba(120, 200, 170, 0.15);
	--gold: #e9cd86;
	--gold-soft: #d8be7e;
	--green: #57e08a;
	--green-glow: rgba(87, 224, 138, 0.55);
	--text: #eaf4f0;
	--muted: #8fb3aa;
	--other: #6fb6e8;
	--none: #b9c4c0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--text);
	background: var(--bg-bot);
	min-height: 100vh;
	overflow-x: hidden;
}

/* Map as fixed full-page background */
.map-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	background: radial-gradient(1100px 720px at 50% 8%, var(--bg-top) 0%, var(--bg-mid) 48%, var(--bg-bot) 100%);
}
.map-bg .map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	overflow: visible;
}
/* readability scrim + atmospheric veil over the whole viewport */
.map-scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(2, 12, 10, 0.82) 0%, rgba(2, 12, 10, 0.08) 24%, rgba(2, 12, 10, 0.08) 64%, rgba(2, 12, 10, 0.85) 100%);
	box-shadow: inset 0 0 100px 24px rgba(1, 10, 9, 0.35);
}
/* brighten the base + settlement-labels tile layers (own canvases via OL className) */
.map-bg .base-layer { filter: brightness(1.28) saturate(0.9); }
.map-bg .labels-layer { filter: brightness(1.5) contrast(1.12); }
.map-bg .ol-control { display: none; }
.map-bg .ol-attribution {
	display: block;
	right: 14px; bottom: 8px; left: auto;
	background: transparent; font-size: 10px;
}
.map-bg .ol-attribution ul { color: rgba(180, 205, 198, 0.5); text-shadow: none; }
.map-bg .ol-attribution button { display: none; }

/* Overlay content — empty areas let clicks reach the map below */
.page {
	position: relative;
	z-index: 2;
	pointer-events: none;
}
.brand, .nav-links a, .stat-card, .legend, .cta, .footer a, .map-popup, .search-bar { pointer-events: auto; }

/* Top band (nav + hero heading, up to and including the "Sva hrvatska groblja…" title)
   captures the wheel so it scrolls the page instead of zooming the map underneath.
   The open map area below the heading still passes through and zooms. The negative
   margin pulls the capture zone up over the hero's top padding so there is no gap. */
.nav { pointer-events: auto; }
.hero .hero-inner {
	pointer-events: auto;
	padding-top: 34px;
	margin-top: -34px;
}

/* Nav */
.nav {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 34px;
	max-width: 1180px;
	margin: 0 auto;
}
.brand { font-size: 22px; font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: .2px; }
.brand-mark { width: 26px; height: 26px; margin-right: 9px; vertical-align: middle; border-radius: 6px; }
.brand-tld { color: var(--gold); }
.nav-links a {
	color: var(--muted);
	text-decoration: none;
	margin-left: 28px;
	font-size: 15px;
	transition: color .15s ease;
}
.nav-links a:hover { color: var(--text); }

/* Hero — heading sits high; the rest of the first screen reveals the map background */
.hero { padding: 34px 16px 0; min-height: 76vh; }
.hero-inner { max-width: 1120px; margin: 0 auto; text-align: center; }
.content { padding: 0 16px 36px; }

.badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	letter-spacing: 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--gold);
	border: 1px solid rgba(233, 205, 134, 0.32);
	border-radius: 999px;
	padding: 7px 20px;
	margin-bottom: 26px;
	background: rgba(233, 205, 134, 0.04);
}
.badge i { color: var(--green); font-style: normal; font-size: 9px; }

.hero h1 {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: clamp(27px, 3.9vw, 45px);
	line-height: 1.08;
	margin: 0 0 40px;
	font-weight: 600;
	letter-spacing: -0.2px;
}
.hero h1 em {
	color: var(--gold);
	font-style: italic;
	font-weight: 600;
}
/* keep the title on a single line from medium screens up */
@media (min-width: 700px) {
	.hero h1 { white-space: nowrap; }
}

/* Cemetery search / autocomplete */
.search-bar {
	position: relative;
	max-width: 540px;
	margin: 0 auto 8px;
}
.search-input {
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	color: var(--text);
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: 14px;
	padding: 16px 20px;
	backdrop-filter: blur(7px);
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(87, 224, 138, 0.15); }

.search-results {
	position: absolute;
	z-index: 20;
	top: calc(100% + 8px);
	left: 0; right: 0;
	margin: 0;
	padding: 8px;
	list-style: none;
	text-align: left;
	background: linear-gradient(160deg, rgba(16, 58, 53, 0.98), rgba(8, 36, 33, 0.98));
	border: 1px solid var(--panel-border);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(8px);
	max-height: 360px;
	overflow-y: auto;
}
.search-results[hidden] { display: none; }
.search-result {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 9px;
	cursor: pointer;
	transition: background .12s ease;
}
.search-result:hover, .search-result.active { background: rgba(120, 200, 170, 0.1); }
.search-result .dot { flex: 0 0 auto; }
.search-result-name { font-size: 14px; font-weight: 600; }
.search-result-loc {
	margin-left: auto;
	padding-left: 12px;
	font-size: 12px;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.search-result-empty {
	padding: 14px 12px;
	color: var(--muted);
	font-size: 14px;
	text-align: center;
}

/* Panel: stats (left) + legend (right), like the mock */
.panel {
	display: flex;
	align-items: stretch;
	gap: 20px;
	margin-bottom: 48px;
	text-align: left;
}
.stats {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.stat-card {
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: 16px;
	padding: 22px 24px;
	backdrop-filter: blur(7px);
}
.stat-value { font-size: 40px; font-weight: 700; color: var(--gold); letter-spacing: -0.5px; line-height: 1.05; }
.stat-label { font-size: 14px; color: var(--muted); margin-top: 7px; }

/* legend: vertical, right side */
.legend {
	list-style: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	margin: 0;
	padding: 22px 24px;
	min-width: 220px;
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: 16px;
	backdrop-filter: blur(7px);
	font-size: 14px;
	color: var(--muted);
}
.legend li {
	display: flex; align-items: center; gap: 11px;
	cursor: pointer;
	user-select: none;
	border-radius: 8px;
	padding: 4px 8px;
	margin: -4px -8px;
	transition: color .12s ease, opacity .12s ease;
}
.legend li:hover { color: var(--text); background: rgba(120, 200, 170, 0.07); }
/* disabled category: dimmed text + hollow dot */
.legend li.off { color: rgba(143, 179, 170, 0.45); text-decoration: line-through; }
.legend li.off .dot { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(143, 179, 170, 0.45); }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot-egroblje { background: var(--green); box-shadow: 0 0 10px var(--green-glow); }
.dot-other { background: var(--other); box-shadow: 0 0 8px rgba(111, 182, 232, 0.5); }
.dot-none { background: var(--none); }

/* CTA */
.cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	text-align: left;
	background: linear-gradient(118deg, rgba(16, 58, 53, 0.95), rgba(8, 38, 35, 0.95));
	border: 1px solid var(--panel-border);
	border-radius: 20px;
	padding: 40px 44px;
	overflow: hidden;
}
.cta-text { max-width: 60%; }
.cta-mark {
	display: block;
	width: 48px; height: 48px; border-radius: 12px;
	margin-bottom: 16px;
	box-shadow: 0 0 22px rgba(87, 224, 138, 0.28);
}
.cta-text h2 { margin: 0 0 10px; font-size: 27px; letter-spacing: -0.3px; }
.cta-text p { margin: 0 0 22px; color: var(--muted); font-size: 15px; }
.cta-btn {
	display: inline-block;
	background: linear-gradient(180deg, #f0d693, var(--gold));
	color: #261a07;
	font-weight: 600;
	text-decoration: none;
	padding: 13px 26px;
	border-radius: 11px;
	transition: transform .12s ease, box-shadow .12s ease;
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(233, 205, 134, 0.28); }

/* Phone mockup */
.cta-phone { position: relative; flex: 0 0 150px; display: flex; justify-content: center; }
.phone {
	position: relative;
	z-index: 2;
	width: 126px; height: 244px;
	border-radius: 26px;
	padding: 9px;
	background: linear-gradient(165deg, #1c5650, #0a2a27);
	border: 1px solid rgba(120, 200, 170, 0.35);
	box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(87, 224, 138, 0.18);
	/* tilt like the mockup — leaning slightly, seen in 3D */
	transform: perspective(900px) rotateY(-16deg) rotate(7deg);
	transform-origin: bottom center;
}
.phone-screen {
	width: 100%; height: 100%;
	border-radius: 18px;
	background: radial-gradient(120% 90% at 50% 28%, #0f4a40, #06231f);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px;
}
.phone-mark { width: 38px; height: 38px; border-radius: 9px; filter: drop-shadow(0 0 12px var(--green-glow)); }
.phone-brand { color: #d9efe6; font-weight: 600; font-size: 15px; letter-spacing: .3px; }
.phone-glow {
	position: absolute;
	z-index: 1;
	left: 50%; bottom: -22px; transform: translateX(-50%);
	width: 180px; height: 80px;
	background: radial-gradient(ellipse at center, rgba(87, 224, 138, 0.7), rgba(87, 224, 138, 0) 70%);
	filter: blur(11px);
}

/* ---- Cemetery detail popup (anchored over a marker) ------------------- */
.map-popup {
	position: fixed;
	z-index: 50;
	left: 0; top: 0;
	transform: translate(-50%, calc(-100% - 16px));
	width: 248px;
	text-align: left;
	background: linear-gradient(160deg, rgba(16, 58, 53, 0.98), rgba(8, 36, 33, 0.98));
	border: 1px solid var(--panel-border);
	border-radius: 14px;
	padding: 16px 16px 15px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 26px rgba(87, 224, 138, 0.12);
	backdrop-filter: blur(8px);
	color: var(--text);
}
.map-popup[hidden] { display: none; }
/* little pointer triangle */
.map-popup::after {
	content: "";
	position: absolute;
	left: 50%; bottom: -8px; transform: translateX(-50%);
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-top: 9px solid rgba(8, 36, 33, 0.98);
}
.map-popup-close {
	position: absolute; top: 8px; right: 11px;
	background: none; border: none; cursor: pointer;
	color: var(--muted); font-size: 18px; line-height: 1;
}
.map-popup-close:hover { color: var(--text); }
.map-popup-prov {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 11px; font-weight: 600; letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 8px;
}
.map-popup-prov .dot { width: 9px; height: 9px; }
.map-popup h3 {
	font-family: "Playfair Display", Georgia, serif;
	margin: 0 0 4px; font-size: 19px; font-weight: 600; padding-right: 14px;
}
.map-popup .loc { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.map-popup-btn {
	display: inline-block; width: 100%; text-align: center;
	background: linear-gradient(180deg, #f0d693, var(--gold));
	color: #261a07; font-weight: 600; font-size: 14px;
	text-decoration: none; padding: 9px 14px; border-radius: 9px;
	transition: transform .12s ease;
}
.map-popup-btn:hover { transform: translateY(-1px); }

/* ---- Info modal (Digitalizacija / O projektu / Saznajte više) --------- */
.modal {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.modal[hidden] { display: none; }
.modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 12, 10, 0.72);
	backdrop-filter: blur(4px);
}
.modal-dialog {
	position: relative;
	width: min(620px, 100%);
	max-height: min(80vh, 720px);
	overflow-y: auto;
	background: linear-gradient(160deg, rgba(16, 58, 53, 0.98), rgba(8, 36, 33, 0.98));
	border: 1px solid var(--panel-border);
	border-radius: 16px;
	padding: 30px 34px 28px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 32px rgba(87, 224, 138, 0.12);
	color: var(--text);
}
.modal-close {
	position: absolute; top: 12px; right: 16px;
	background: none; border: none; cursor: pointer;
	color: var(--muted); font-size: 24px; line-height: 1;
}
.modal-close:hover { color: var(--text); }
.modal-body h2 {
	font-family: "Playfair Display", Georgia, serif;
	margin: 0 0 14px; font-size: 26px; font-weight: 600;
	color: var(--gold);
	padding-right: 24px;
}
.modal-body p { margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: var(--text); }
.modal-body p:last-child { margin-bottom: 0; }
.modal-body ul { margin: 0 0 14px; padding-left: 20px; }
.modal-body li { margin-bottom: 8px; font-size: 14px; line-height: 1.6; }
.modal-body a { color: var(--green); }
body.modal-open { overflow: hidden; }

/* Footer */
.footer {
	text-align: center;
	padding: 30px 16px 44px;
	color: var(--muted);
	font-size: 13px;
}

@media (max-width: 880px) {
	.panel { flex-direction: column; }
	.legend { min-width: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 760px) {
	.stats { grid-template-columns: 1fr; }
	.cta { flex-direction: column; text-align: center; align-items: center; }
	.cta-text { max-width: 100%; }
	.cta-mark { margin-left: auto; margin-right: auto; }
	.nav { flex-wrap: wrap; justify-content: center; gap: 10px 20px; padding: 16px 20px; text-align: center; }
	.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
	.nav-links a { margin-left: 0; font-size: 13px; }
}