/* Header — desktop geometry from Figma 34:84 (logo 118.4/38.2 282×72, rule y=129 202→1080, nav row 144–192),
   mobile from 106:600 (logo 24/36 240×61, vertical rule x=291, hamburger 308/30) and off-canvas menu 111:1992. */

.rn-header {
	position: relative;
	z-index: 2; /* above the sticky hero stage while it scrolls away */
}

.rn-header__inner {
	position: relative;
	height: var(--header-h-mobile);
}

/* Logo: mobile 240×61 at (24,36); desktop 282×72 at (118.4,38.2) → 84px left of the content column. */
.rn-header__logo {
	position: absolute;
	top: 36px;
	left: var(--inset-mobile);
	width: 240px;
	display: block;
}
.rn-header__logo img {
	width: 100%;
	height: auto;
}

/* Mobile: vertical rule left of the hamburger (Line 3, 1px #D9D9D9, y 30–103 at x 291). */
.rn-header__rule {
	position: absolute;
	top: 30px;
	left: calc(100% - 69px);            /* x = 291 on the 360 frame (24 + 267) */
	width: 1px;
	height: 73px;
	background: var(--c-line);
}

.rn-header__toggle {
	position: absolute;
	top: 30px;
	right: 20px;                         /* hamburger frame at x 308 (24 + 284) */
	width: var(--icon);
	height: var(--icon);
	color: var(--c-link);
}

/* ---------- Off-canvas menu (mobile) ---------- */
.rn-nav {
	--link-hover: var(--c-white);        /* white links on the red off-canvas menu keep white on hover (underline reveals) */
	position: fixed;
	inset: 0;
	z-index: 50;
	background: var(--c-pink);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	color: var(--c-white);
	visibility: hidden;
	transform: translateX(100%);
	transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
.rn-nav.is-open {
	visibility: visible;
	transform: none;
	transition: transform 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
	.rn-nav,
	.rn-nav.is-open {
		transition: none;
	}
}
/* Vertical white line at x=62 (17.22% of 360), full height. */
.rn-nav::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 62px;
	width: 1px;
	background: var(--c-white);
}
.rn-nav__close {
	position: absolute;
	top: 30px;
	left: 16px;
	width: var(--icon);
	height: var(--icon);
	color: var(--c-white);
}
.rn-nav__home {
	position: absolute;
	top: 84px;
	left: 76px;
	width: var(--icon);
	height: var(--icon);
	color: var(--c-white);
}
.rn-nav__list {
	position: absolute;
	top: 159px;
	left: 85px;
	font-size: var(--fs-small);
	letter-spacing: var(--ls-caps);
	line-height: normal;
	text-transform: uppercase;
}
.rn-nav__list li + li {
	margin-top: 37.5px; /* two empty 16px lines in Figma */
}
.rn-nav__list a {
	color: var(--c-white);
}
/* Selected item (and the home icon) is pure black in the off-canvas menu (111:1992); it stays selected on
   deeper levels (single doctor/service) via the ancestor classes. */
.rn-nav__home.is-current,
.rn-nav__list .current-menu-item > a,
.rn-nav__list .current_page_parent > a,
.rn-nav__list .current-menu-ancestor > a {
	color: var(--c-black);
	--link-hover: var(--c-black);
}
/* Current-page marker: white triangle on the line (Subtract, 8.5×17 at x=62). */
.rn-nav__list li {
	position: relative;
}
.rn-nav__home.is-current::after,
.rn-nav__list .current-menu-item > a::after,
.rn-nav__list .current_page_parent > a::after,
.rn-nav__list .current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8.5px 0 8.5px 8.5px;
	border-color: transparent transparent transparent var(--c-white);
	transform: translateY(-50%);
}
.rn-nav__home.is-current::after {
	left: -14px;
}
.rn-nav__list .current-menu-item > a::after,
.rn-nav__list .current_page_parent > a::after,
.rn-nav__list .current-menu-ancestor > a::after {
	left: -23px;
}
.rn-nav__cta {
	position: absolute;
	top: 389px;                         /* below the 4th item (Cenik) of the off-canvas menu — user request 25. 9. */
	left: 81px;
	--btn-w: 231px;
	--btn-pl: 18px;
	--btn-pr: 12px;
	/* inverse variant inside the red off-canvas menu */
	--btn-color: var(--c-white);
	--btn-border: var(--c-white);
	--btn-hover-bg: var(--c-white);
	--btn-hover-color: var(--c-link);
}
body.rn-menu-open {
	overflow: hidden;
}

/* ---------- Desktop (≥ 900px) ---------- */
@media (min-width: 900px) {
	.rn-header__inner {
		height: var(--header-h);
	}
	.rn-header--focused .rn-header__inner {
		height: var(--header-h-focused);
	}
	/* Logo: ONE position on every page (2026-08-21 — the per-frame Figma offsets 44.6/41.6/38.2 made it
	   jump between pages; unified to the home value). */
	.rn-header__logo {
		top: 38.2px;
		left: max(var(--inset-mobile), calc(var(--inset-l) - 84px));
		width: 282px;
	}
	/* Horizontal rule 202→1080 at y=128.5 (1px #D9D9D9). */
	.rn-header__rule {
		top: 128px;
		left: var(--inset-l);
		right: var(--inset-r);
		width: auto;
		height: 1px;
	}
	.rn-header__toggle,
	.rn-nav__close {
		display: none;
	}
	.rn-nav {
		position: absolute;
		inset: 144px var(--inset-r) auto var(--inset-l);
		height: 48px;
		visibility: visible;
		transform: none;
		transition: none;
		--link-hover: var(--c-link-on-dark);
		background: none;
		box-shadow: none;
		color: var(--c-link);
		display: flex;
		align-items: flex-start;        /* home icon at y=148, text at 156, pill at 144 (34:84) */
	}
	.rn-nav::before {
		display: none;
	}
	/* Home icon at x=209 (col + 7), y=148: linkpink like the other items, antracit only when on home (45:267). */
	.rn-nav__home {
		position: relative;
		top: auto;
		left: auto;
		margin: 4px 0 0 7px;
		color: var(--c-link);
		transition: color var(--t-fast) var(--ease);
	}
	.rn-nav__home.is-current {
		color: var(--c-antracit);
	}
	/* Text items start at x=289 (48px after the icon); next word starts 58px after the previous box.
	   Gaps flex below 1200 so the row fits the flexing columns (fixed 202 left offset). */
	.rn-nav__list {
		position: relative;
		top: auto;
		left: auto;
		display: flex;
		align-items: center;
		gap: clamp(18px, calc(11.33vw - 78px), 58px); /* 58 at 1200 (45:300), 24 at 900 — four items incl. Cenik fit next to the pill */
		margin: 12px 0 0 clamp(24px, calc(5vw - 12px), 48px);
	}
	.rn-nav__list li + li {
		margin-top: 0;
	}
	.rn-nav__list a {
		color: var(--c-link);
	}
	/* Selected item: antracit (45:267); hover underlines in the same dark grey. Stays selected on deeper
	   levels (single doctor/service) via the ancestor classes. */
	.rn-nav__list .current-menu-item > a,
	.rn-nav__list .current_page_parent > a,
	.rn-nav__list .current-menu-ancestor > a {
		color: var(--c-antracit);
		--link-hover: var(--c-antracit);
	}
	/* Desktop current marker: 29.7px square rotated 45°, centred under the item, top at y=194 (Rectangle 58 on 45:267). */
	.rn-nav__home.is-current::after {
		display: none;
	}
	.rn-nav__list .current-menu-item > a::after,
	.rn-nav__list .current_page_parent > a::after,
	.rn-nav__list .current-menu-ancestor > a::after {
		left: 50%;
		top: calc(100% + 19px);
		width: 29.7px;
		height: 29.7px;
		border: 0;
		background: var(--c-pink);
		transform: translateX(-50%) rotate(45deg);
	}
	/* Pill at the right edge of the column: 189×48. */
	.rn-nav__cta {
		position: relative;
		top: auto;
		left: auto;
		margin-left: auto;
		--btn-w: 189px;
		--btn-pl: 18px;
		--btn-pr: 11px;
		/* standard variant on the light header */
		--btn-color: var(--c-link);
		--btn-border: var(--c-link);
		--btn-hover-bg: var(--c-link-on-dark);
		--btn-hover-color: var(--c-white);
	}
}