/* ==========================================================================
   Topbar + site header + navigation
   ========================================================================== */

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 200; background: #fff; padding: 0.6rem 1rem; border-radius: 8px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Topbar — simple navy announcement strip */
.topbar {
	background: var(--navy);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.86rem;
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 40px;
	position: relative;
	text-align: center;
}
.topbar__text { margin: 0; }
.topbar__link {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-left: 0.35rem;
}
.topbar__link:hover { text-decoration: none; }

.topbar__close {
	position: absolute;
	right: 0;
	color: rgba(255, 255, 255, 0.6);
	display: inline-flex;
	padding: 0.25rem;
}
.topbar__close svg { width: 1rem; height: 1rem; }
.topbar__close:hover { color: #fff; }

@media (max-width: 600px) {
	.topbar { font-size: 0.8rem; }
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--border);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 74px;
}

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 0.65rem; }
.brand__mark { display: inline-flex; width: 2.1rem; height: 2.1rem; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__name {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--heading);
	letter-spacing: -0.01em;
}

/* Primary nav */
.site-nav { margin-inline: auto; }
.site-nav__list { display: flex; align-items: center; gap: 0.35rem; }
.site-nav__list a {
	display: inline-block;
	padding: 0.5rem 0.85rem;
	color: var(--heading);
	font-weight: 500;
	font-size: 0.96rem;
	border-radius: 8px;
}
.site-nav__list a:hover { color: var(--heading); background: var(--bg-alt); }
/* Active page — brand blue, so the visitor can see where they are.
   Ancestor/parent classes cover a centre page opened under "Naše centra". */
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list .current-menu-parent > a,
.site-nav__list .current_page_parent > a {
	color: var(--primary);
	background: var(--primary-soft);
	font-weight: 700;
}
.site-nav__list .sub-menu .current-menu-item > a,
.site-nav__list .sub-menu .current_page_item > a {
	color: var(--primary);
	background: var(--primary-soft);
	font-weight: 700;
}

/* Desktop dropdown submenu (e.g. Naše centra ▾) — instant reveal, no motion */
.site-nav__list .menu-item-has-children { position: relative; }
.site-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	/* Translate BEFORE rotate — the other order shifts the caret along the
	   rotated axis (down and to the right), which is what threw it off centre.
	   The lift compensates for the chevron's mass sitting below its box centre. */
	transform: translateY(-2px) rotate(45deg);
	vertical-align: middle;
	opacity: 0.55;
}
.site-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 250px;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 24px 48px -22px rgba(6, 29, 97, 0.28);
	display: none;
	z-index: 200;
}
.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu { display: block; }
.site-nav__list .sub-menu a {
	display: block;
	padding: 0.6rem 0.9rem;
	border-radius: 8px;
	white-space: nowrap;
	font-size: 0.92rem;
	font-weight: 500;
}
.site-nav__list .sub-menu a:hover { background: var(--bg-alt); color: var(--primary); }

.site-header__actions { display: flex; align-items: center; gap: 1.1rem; }

/* Phone quick-link */
.site-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--heading);
	font-weight: 600;
	font-size: 0.95rem;
	white-space: nowrap;
}
.site-header__phone svg { width: 1.05rem; height: 1.05rem; color: var(--primary); }
.site-header__phone:hover { color: var(--primary); }

/* Mobile toggle */
.nav-toggle { display: none; color: var(--heading); padding: 0.4rem; }
.nav-toggle svg { width: 1.6rem; height: 1.6rem; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* Mobile nav panel */
.mobile-nav {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(360px, 84vw);
	z-index: 99;
	background: #fff;
	border-left: 1px solid var(--border);
	padding: calc(74px + 1.5rem) 1.5rem 2rem;
	overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__list { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1.5rem; }
.mobile-nav__list a {
	display: block;
	padding: 0.85rem 1rem;
	color: var(--heading);
	font-weight: 500;
	font-size: 1.05rem;
	border-radius: var(--radius-sm);
}
.mobile-nav__list a:hover { background: var(--bg-alt); }
.mobile-nav__list .current-menu-item > a,
.mobile-nav__list .current_page_item > a,
.mobile-nav__list .current-menu-ancestor > a,
.mobile-nav__list .current-menu-parent > a {
	color: var(--primary);
	background: var(--primary-soft);
	font-weight: 700;
}
.mobile-nav__list .sub-menu { padding-left: 1rem; }

body.nav-open { overflow: hidden; }
.nav-scrim {
	position: fixed;
	inset: 0;
	z-index: 98;
	background: rgba(6, 29, 97, 0.45);
}
.nav-scrim[hidden] { display: none; }

@media (max-width: 980px) {
	.site-nav,
	.site-header__cta,
	.site-header__phone { display: none; }
	.nav-toggle { display: inline-flex; }
	.site-header__inner { justify-content: space-between; }
}

/* Official logo (round 7) — replaces the drawn heart mark + site-name text. */
.brand__logo { display: block; height: 44px; width: auto; }
@media (max-width: 600px) { .brand__logo { height: 36px; } }