/* Nový Plzenec digital – základ je bílá a grafitová, akcent je červená (--np-red). Barvy se ladí tady. */
:root {
	--np-bg: #ffffff;
	--np-soft: #f5f7fa;
	--np-line: #e3e8ef;
	--np-ink: #1a1d21;
	--np-muted: #5f6670;
	--np-red: #d0222b;
	--np-stone: #9aa1a9;
	/* barvy pixelové mapy */
	--np-water: #4f9fc8;
	--np-forest: #c2dcc8;
	--np-road: #c9ced4;
	--np-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--np-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
	--np-radius: 14px;
	--np-wrap: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--np-bg);
	color: var(--np-ink);
	font: 17px/1.6 var(--np-sans);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--np-ink); text-decoration-color: var(--np-red); text-underline-offset: 3px; }
code, .np-mono { font-family: var(--np-mono); }

.np-wrap { width: 100%; max-width: var(--np-wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .np-wrap { padding: 0 32px; } }

.np-skip { position: absolute; left: -999px; top: 8px; background: var(--np-ink); color: #fff; padding: 8px 12px; z-index: 100; }
.np-skip:focus { left: 8px; }

.np-eyebrow { font: 600 13px/1.4 var(--np-mono); color: var(--np-red); letter-spacing: .04em; margin: 0 0 12px; }

/* Hlavička */
.np-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, .85);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--np-line);
}
.np-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.np-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--np-ink); }
.np-logo__mark { width: 34px; height: 34px; display: block; }
.np-logo__text { font: 700 17px/1 var(--np-mono); letter-spacing: -.02em; }
.np-logo__text span { color: var(--np-muted); font-weight: 500; }
.np-nav__list { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.np-nav__list a {
	display: block; padding: 8px 12px; border-radius: 8px;
	color: var(--np-ink); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap;
	transition: background .2s, color .2s;
}
.np-nav__list a:hover, .np-nav__list .current-menu-item > a { background: var(--np-soft); color: var(--np-red); }
@media (max-width: 560px) {
	.np-logo__text span { display: none; }
	.np-nav__list a { padding: 8px 8px; font-size: 14px; }
}
@media (max-width: 420px) {
	.np-logo__text { display: none; }
}

/* Hero: z kostiček se nakreslí mapa Plzence a přelije se do loga; pod ním jedna věta */
.np-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.np-hero { display: flex; align-items: center; min-height: calc(100vh - 64px - 74px); min-height: calc(100svh - 64px - 74px); padding: 24px 0 32px; text-align: center; }
.np-hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; max-width: min(900px, calc((100vh - 200px) * 1.4)); max-width: min(900px, calc((100svh - 200px) * 1.4)); }
.np-hero__title { margin: 0; width: 100%; font-size: inherit; line-height: 0; }
/* Výšku plátna nastavuje skript podle mřížky, aby se kostičky nikdy nezdeformovaly. */
.np-hero__logo { display: block; width: 100%; height: auto; }
/* Věta se umístí těsně pod hotové logo (pozici dopočítá skript). */
.np-hero__lead { position: absolute; left: 0; right: 0; font-size: 17px; line-height: 1.5; color: var(--np-muted); max-width: 32em; margin: 0 auto; padding: 0 16px; }
.js .np-hero__after { opacity: 0; transform: translateY(10px); transition: opacity 1s ease, transform 1s ease; }
.js .np-hero.is-done .np-hero__after { opacity: 1; transform: none; }

.np-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 20px; border-radius: 10px;
	border: 1.5px solid var(--np-ink); color: var(--np-ink); background: var(--np-bg);
	font-weight: 600; font-size: 16px; text-decoration: none;
	transition: transform .15s, box-shadow .15s;
}
.np-btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--np-ink); }
.np-btn--primary { background: var(--np-ink); border-color: var(--np-ink); color: #fff; }
.np-btn--primary:hover { box-shadow: 4px 4px 0 var(--np-red); }

/* Obsah stránek */
.np-content { padding: 56px 16px 88px; max-width: 760px; }
.np-entry + .np-entry { margin-top: 56px; }
.np-entry__title { font-size: clamp(30px, 5vw, 44px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 24px; }
.np-entry__title a { color: inherit; text-decoration: none; }
.np-entry__body > * { max-width: 100%; }

/* Patička */
.np-footer { border-top: 1px solid var(--np-line); padding: 24px 0; }
.np-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.np-footer p { margin: 0; font: 12px/1.6 var(--np-mono); color: var(--np-stone); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.js .np-hero__after { opacity: 1; transform: none; }
}