/* Nasze Korzenie — styles. Senior-friendly: large fonts, high contrast, generous spacing. */
.nk-wrap {
	position: relative;
	font-size: 18px;
	line-height: 1.6;
	color: #1a1a1a;
}

.nk-map {
	width: 100%;
	height: min(70vh, 700px);
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Full-bleed: mapa wyrywa się z kontenera motywu i zajmuje całą szerokość okna.
   Wersja odporna na asymetryczne kontenery (np. front-page z innym wrapperem
   niż zwykła strona). Liczy offset od FAKTYCZNEJ pozycji rodzica, nie zakłada
   że jest wycentrowany. */
.nk-wrap--fullwidth {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	/* Przesuń element w lewo o tyle, ile parent jest oddalony od lewej krawędzi okna. */
	left: 50%;
	transform: translateX(-50vw);
	overflow-x: hidden;
}
/* Safari/iOS — transform na elementach z position:relative + fixed children
   bywa kapryśny; ten wariant jest bezpieczniejszy. */
@supports not (transform: translateX(-50vw)) {
	.nk-wrap--fullwidth {
		left: 0;
		transform: none;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
}
.nk-wrap--fullwidth .nk-map {
	height: min(85vh, 900px);
	border-radius: 0;
	box-shadow: none;
}
/* Zapobiega poziomemu scrollowi gdy theme dodaje paddingi */
html, body { overflow-x: hidden; }

/* CTA — duży, sticky, widoczny */
.nk-cta-add {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 24px;
	height: 56px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: #2c5f2d;
	border-radius: 999px;
	box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(0,0,0,.28);
	text-decoration: none;
	white-space: nowrap;
	transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.nk-cta-add__icon {
	flex: 0 0 auto;
	display: block;
}
.nk-cta-add:hover, .nk-cta-add:focus-visible {
	background: #1e4220;
	transform: translateY(-2px);
	color: #fff;
	outline: none;
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ffd95a, 0 8px 22px rgba(0,0,0,.3);
}

@media (max-width: 640px) {
	.nk-cta-add {
		left: 16px;
		right: 16px;
		bottom: 16px;
		justify-content: center;
	}
}

/* Side panel */
.nk-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: min(480px, 100%);
	height: 100vh;
	background: #fff;
	box-shadow: -4px 0 24px rgba(0,0,0,.18);
	transform: translateX(100%);
	transition: transform .25s ease;
	z-index: 1001;
	overflow-y: auto;
	padding: 24px;
}
.nk-panel.is-open { transform: translateX(0); }
.nk-panel-content:focus { outline: none; }
.nk-panel-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 48px; height: 48px;
	font-size: 32px;
	line-height: 1;
	background: #f0f0f0;
	border: 2px solid #999;
	border-radius: 50%;
	cursor: pointer;
	z-index: 2;
}
.nk-panel-close:hover { background: #e0e0e0; }

.nk-hero {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin: 40px 0 20px;
	padding-bottom: 20px;
	border-bottom: 2px solid #f0eee8;
}
.nk-avatar {
	flex-shrink: 0;
	width: 64px; height: 64px;
	background: linear-gradient(135deg, #2c5f2d, #4a8c3a);
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	box-shadow: 0 3px 10px rgba(44, 95, 45, .3);
	letter-spacing: -0.5px;
}
.nk-hero-text { flex: 1; min-width: 0; }
.nk-hero-text h2 {
	margin: 0 0 6px;
	font-size: 24px;
	color: #1a3a1c;
	line-height: 1.2;
}
.nk-origin {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0 0 10px;
	font-size: 15px;
	color: #555;
	line-height: 1.4;
}
.nk-origin svg {
	flex-shrink: 0;
	color: #c0392b;
	margin-top: 2px;
}
.nk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.nk-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	background: #f0eee8;
	color: #555;
	font-size: 13px;
	font-weight: 600;
	border-radius: 999px;
}
.nk-chip svg { color: #888; }

.nk-photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 6px;
	margin: 0 0 20px;
}
.nk-photos a { display: block; overflow: hidden; border-radius: 6px; }
.nk-photos img {
	width: 100%; height: 140px;
	object-fit: cover;
	display: block;
	transition: transform .3s;
}
.nk-photos a:hover img { transform: scale(1.05); }

.nk-story {
	font-size: 17px;
	line-height: 1.7;
	color: #2a2a2a;
}
.nk-story p { margin: 0 0 1em; }
.nk-story p:last-child { margin-bottom: 0; }
.nk-story--empty {
	color: #999;
	font-style: italic;
	padding: 16px;
	background: #faf9f5;
	border-radius: 6px;
	text-align: center;
}

/* Marker historii — duża, dobrze widoczna pinezka */
.nk-story-icon { background: transparent; border: none; }
.nk-story-pin {
	display: block;
	width: 28px; height: 36px;
	background: #c0392b;
	border: 3px solid #fff;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: 0 3px 8px rgba(0,0,0,.4);
	transition: transform .15s, background .15s;
	cursor: pointer;
}
.nk-story-pin::after {
	content: '';
	position: absolute;
	top: 8px; left: 8px;
	width: 9px; height: 9px;
	background: #fff;
	border-radius: 50%;
}
.leaflet-marker-icon:hover .nk-story-pin {
	background: #e74c3c;
	transform: rotate(-45deg) scale(1.15);
}
/* Cluster — kolorowe kółka */
.marker-cluster-small  { background: rgba(192, 57, 43, .35); }
.marker-cluster-small  div { background: rgba(192, 57, 43, .85); color: #fff; font-weight: 700; }
.marker-cluster-medium { background: rgba(192, 57, 43, .45); }
.marker-cluster-medium div { background: rgba(192, 57, 43, .9); color: #fff; font-weight: 700; }
.marker-cluster-large  { background: rgba(192, 57, 43, .55); }
.marker-cluster-large  div { background: rgba(192, 57, 43, .95); color: #fff; font-weight: 700; }

/* Marker Kiełczowa — zielony dom, wyróżnia się od czerwonych pinezek historii */
.nk-home-icon { background: transparent; border: none; }
.nk-home-pin {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	background: #2c5f2d;
	color: #fff;
	font-size: 22px;
	border: 4px solid #fff;
	border-radius: 50%;
	box-shadow: 0 3px 10px rgba(0,0,0,.4);
	cursor: default;
}
.nk-home-label {
	background: rgba(44, 95, 45, .95) !important;
	color: #fff !important;
	border: none !important;
	font-weight: 700;
	font-size: 14px;
	padding: 4px 10px;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0,0,0,.3) !important;
}
.nk-home-label::before { display: none !important; }

/* Panel kontrolny — wyszukiwarka + slider lat */
.nk-controls {
	position: absolute;
	top: 16px; left: 60px;
	z-index: 500;
	background: rgba(255,255,255,.97);
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0,0,0,.2);
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(420px, calc(100vw - 80px));
}
.nk-controls-row {
	display: flex;
	gap: 8px;
	align-items: center;
}
.nk-controls input[type="search"] {
	flex: 1;
	padding: 10px 12px;
	font-size: 16px;
	border: 2px solid #ccc;
	border-radius: 5px;
	background: #fff;
	min-width: 0;
}
.nk-controls input[type="search"]:focus { outline: none; border-color: #2c5f2d; }
.nk-search-count {
	font-size: 14px;
	color: #555;
	white-space: nowrap;
	padding: 0 4px;
	min-width: 60px;
}
.nk-search-clear {
	background: #eee;
	border: none;
	width: 32px; height: 32px;
	border-radius: 50%;
	font-size: 18px;
	cursor: pointer;
	display: none;
	flex-shrink: 0;
}
.nk-search-clear.is-visible { display: block; }
.nk-search-clear:hover { background: #ddd; }

.nk-year-row label {
	font-size: 14px;
	font-weight: 600;
	color: #333;
	white-space: nowrap;
}
.nk-year-row input[type="range"] {
	flex: 1;
	min-width: 0;
	accent-color: #2c5f2d;
}
.nk-year-row output {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: #2c5f2d;
	min-width: 44px;
	text-align: center;
}
.nk-year-all {
	background: #2c5f2d;
	color: #fff;
	border: none;
	padding: 6px 12px;
	border-radius: 5px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.nk-year-all:hover { background: #1e4220; }
.nk-year-all.is-active { background: #888; }

@media (max-width: 640px) {
	.nk-controls { left: 8px; right: 8px; width: auto; top: 70px; padding: 8px; }
	.nk-year-row { flex-wrap: wrap; }
}

/* Form */
.nk-form {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px;
	background: #fafaf7;
	border-radius: 12px;
}
.nk-form fieldset { border: none; padding: 0; margin: 0 0 24px; }
.nk-form legend { font-size: 22px; font-weight: 700; color: #2c5f2d; margin-bottom: 16px; }
.nk-form label {
	display: block;
	font-size: 18px;
	font-weight: 600;
	margin: 16px 0 6px;
}
.nk-form .nk-help { font-size: 15px; color: #666; font-weight: 400; }
.nk-form input[type="text"],
.nk-form input[type="email"],
.nk-form input[type="number"],
.nk-form textarea,
.nk-form select {
	width: 100%;
	padding: 14px;
	font-size: 18px;
	border: 2px solid #888;
	border-radius: 6px;
	background: #fff;
	box-sizing: border-box;
}
.nk-form input:focus, .nk-form textarea:focus, .nk-form select:focus {
	outline: 3px solid #ffd95a;
	border-color: #2c5f2d;
}
.nk-form textarea { min-height: 180px; }
.nk-form .nk-error {
	color: #a00;
	font-size: 16px;
	margin-top: 4px;
	display: block;
}
.nk-form input[aria-invalid="true"], .nk-form textarea[aria-invalid="true"] {
	border-color: #a00;
	background: #fff5f5;
}
.nk-actions {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
}
.nk-actions button {
	min-height: 56px;
	padding: 12px 28px;
	font-size: 18px;
	font-weight: 700;
	border-radius: 8px;
	cursor: pointer;
	border: 2px solid #2c5f2d;
}
.nk-actions .nk-btn-primary { background: #2c5f2d; color: #fff; }
.nk-actions .nk-btn-secondary { background: #fff; color: #2c5f2d; }
.nk-actions .nk-btn-primary:hover { background: #1e4220; }

.nk-progress {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;
}
.nk-progress span {
	flex: 1;
	height: 10px;
	background: #ddd;
	border-radius: 5px;
}
.nk-progress span.is-active { background: #2c5f2d; }

.nk-hp { position: absolute; left: -9999px; }

.nk-step { display: none; }
.nk-step.is-active { display: block; }

.nk-geocoder-results {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	border: 2px solid #888;
	border-top: none;
	background: #fff;
	max-height: 240px;
	overflow-y: auto;
}
.nk-geocoder-results li {
	padding: 12px;
	cursor: pointer;
	border-bottom: 1px solid #eee;
}
.nk-geocoder-results li:hover, .nk-geocoder-results li:focus {
	background: #ffd95a;
}

.nk-pickmap {
	height: 300px;
	margin-top: 12px;
	border-radius: 6px;
}

.nk-success, .nk-failure {
	padding: 24px;
	border-radius: 8px;
	font-size: 18px;
}
.nk-success { background: #e6f4ea; border: 2px solid #2c5f2d; }
.nk-failure { background: #fdecea; border: 2px solid #a00; }

.nk-photo-list { list-style: none; padding: 0; margin: 8px 0; }
.nk-photo-list li { padding: 8px; background: #fff; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; }