/*
 * Site header — floating pill bar that sticks to the top on scroll.
 *
 * Sticky rather than fixed, so the bar keeps its place in the flow and no
 * spacer or scroll-offset is needed to stop the page jumping when it detaches.
 */

.site-header {
	position: sticky;
	top: 0;
	width: 100%;
	padding: 20px var(--gutter-mobile) 0;
	z-index: 20;
}

/*
 * On the homepage the bar overlays the hero photo. Sticky is in-flow, so it
 * would otherwise push the hero down: the negative bottom margin pulls the
 * hero back under it. `--header-h` is the bar's own 20px offset plus its 64px
 * min-height — keep the three values in step.
 */
.site-header:not(.site-header--static) { margin-bottom: calc(var(--header-h) * -1); }

/* Inner pages keep the bar in normal flow above the page hero. */

/* A soft lift once the page has scrolled, so the pill reads above content. */
.site-header.is-stuck .site-header__bar {
	box-shadow: 0 10px 30px rgba(26, 41, 74, 0.12);
}

.site-header__bar { transition: box-shadow 0.2s ease; }

.site-header__bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-4);
	max-width: var(--container);
	min-height: 64px;
	margin: 0 auto;
	padding: 9px 9px 9px 20px;
	border-radius: var(--radius-pill);
	/*
	 * White, not the #F6F6F6 of the Figma bar: once the header sticks it floats
	 * over grey sections, and only pure white keeps the pill distinct from the
	 * page behind it. The header element itself stays transparent — nothing is
	 * painted around the pill.
	 */
	background: var(--color-white);
}

/* Logo */

.site-header__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	flex-shrink: 1;
}

.site-header__logo { flex: 0 0 auto; }

.site-header__logo img {
	width: 111.368px;
	height: 23px;
}

.site-header__tagline {
	color: var(--color-neutral-2);
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: -0.24px;
}

/* Navigation */

.site-nav { display: none; min-width: 0; }

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 32px;
}

.site-nav__item { position: relative; }

.site-nav__link {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-primary);
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: -0.3px;
	white-space: nowrap;
}

.site-nav__link:hover { color: var(--color-accent); }

.site-nav__link::after {
	content: "";
	width: 10.667px;
	height: 8px;
	background: currentColor;
	-webkit-mask: url("../../images/icons/chevron-down.svg") no-repeat center / contain;
	mask: url("../../images/icons/chevron-down.svg") no-repeat center / contain;
}

/* Only items with children get the chevron. */
.site-nav__item:not(.menu-item-has-children) > .site-nav__link::after { display: none; }

/*
 * Submenu.
 *
 * Selector is `ul.site-nav__submenu`, not the bare class: reset.css styles
 * `ul[class]` (0,1,1), which outranks a single class and zeroes the padding.
 *
 * Built from the header pill's own language: white surface, the same soft
 * navy shadow the bar uses when stuck, and the 12px radius. Rows are full-width
 * hit targets with their own hover fill, so the list reads as a menu rather
 * than as loose text on a grey card.
 */
ul.site-nav__submenu {
	position: absolute;
	top: calc(100% + 16px);
	left: -14px;
	z-index: 20;
	min-width: 240px;
	padding: var(--space-2);
	border: 1px solid var(--color-neutral-4);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	box-shadow: 0 16px 40px rgba(26, 41, 74, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/*
 * The 16px gap between the parent and the panel would drop the hover before the
 * pointer arrives, so the panel bridges it with a transparent strip.
 */
.site-nav__submenu::before {
	content: "";
	position: absolute;
	inset: -16px 0 100%;
}

.site-nav__item:hover > .site-nav__submenu,
.site-nav__item:focus-within > .site-nav__submenu,
.site-nav__item.is-open > .site-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.site-nav__submenu .site-nav__item { width: 100%; }

.site-nav__submenu .site-nav__link {
	padding: 11px var(--space-4);
	border-radius: var(--space-2);
	color: var(--color-primary);
	font-size: 15px;
	line-height: 1.35;
	/* Names must not wrap; the panel sizes to its longest row instead. */
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.site-nav__submenu .site-nav__link:hover,
.site-nav__submenu .site-nav__link:focus-visible {
	background: var(--color-neutral-7);
	color: var(--color-accent);
}

.site-nav__submenu .is-current > .site-nav__link {
	background: var(--color-neutral-7);
	font-weight: 600;
}


/* Phone */

.site-header__phone {
	display: none;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.3px;
	white-space: nowrap;
}

.site-header__phone img { width: 14px; height: 14px; }

/* Actions */

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex-shrink: 0;
}

.site-header__lang {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 46px;
	/*
	 * Width is content-driven now that a flag sits inside: the chip was a fixed
	 * 78px pill for two characters, and the Czech header row has about 11px
	 * spare at 1280. The padding is trimmed by the width the flag adds, so the
	 * row is no wider than it was.
	 */
	padding: 14px 14px 14px 12px;
	border: 1px solid var(--color-neutral-4);
	border-radius: var(--radius-pill);
	color: var(--color-primary);
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: -0.3px;
}

.site-header__lang-chevron { width: 10.667px; height: 8px; }

/*
 * The three flag files have different aspect ratios (the Union Jack is 2:1,
 * the Czech flag 3:2), so they are cropped into one box rather than scaled —
 * scaling them to a common width leaves the menu rows visibly ragged.
 */
.site-header__lang-flag {
	flex-shrink: 0;
	width: 20px;
	height: 14px;
	border-radius: 2px;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(16, 24, 48, 0.08);
}

/* Language switcher */

.site-header__lang-wrap {
	position: relative;
	display: none;
}

/* The chip is a <button> now, so it needs the button reset. */
button.site-header__lang {
	background: none;
	font: inherit;
	cursor: pointer;
}

.site-header__lang[aria-expanded="true"] .site-header__lang-chevron { transform: rotate(180deg); }

.site-header__lang-chevron { transition: transform 0.2s ease; }

ul.site-header__lang-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 20;
	display: none;
	min-width: 108px;
	margin: 0;
	padding: 8px;
	list-style: none;
	border: 1px solid var(--color-neutral-4);
	border-radius: var(--radius-md);
	background: var(--color-neutral-7);
	box-shadow: 0 12px 32px rgba(16, 24, 48, 0.12);
}

.site-header__lang-wrap.is-open .site-header__lang-menu { display: block; }

ul.site-header__lang-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: var(--radius-sm);
	color: var(--color-primary);
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
}

ul.site-header__lang-menu a:hover,
ul.site-header__lang-menu a:focus-visible { background: var(--color-neutral-6); }

ul.site-header__lang-menu a[aria-current="true"] { font-weight: 600; }

.site-header__lang-code {
	color: var(--color-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
}

/*
 * The mobile bar carries the logo, the CTA and the toggle only -- the tagline
 * is dropped and the phone number moves into the panel, so the three that stay
 * fit the pill down to 320px. The CTA is tightened to buy that room.
 */
.site-header__tagline { display: none; }

.site-header__actions .btn {
	padding-inline: 14px;
	font-size: 14px;
	white-space: nowrap;
}

/* Below 360px even the tightened CTA will not fit beside the logo. */
@media (max-width: 359px) {
	.site-header__actions .btn { display: none; }
}

/* Mobile toggle */

.site-header__toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0 12px;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
}

.site-header__toggle span {
	display: block;
	height: 2px;
	background: var(--color-neutral-7);
}

/*
 * Mobile panel — an off-canvas drawer that slides in from the right over the
 * page. Fixed and translated rather than shown/hidden, so it can animate; it
 * keeps `visibility: hidden` while closed to stay out of the tab order.
 */

.site-nav--mobile {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	width: 80%;
	max-width: 420px;
	padding: 30px var(--space-6) var(--space-6);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
	background: var(--color-neutral-7);
	box-shadow: -20px 0 60px rgba(26, 41, 74, 0.18);
	visibility: hidden;
	transform: translateX(100%);
	transition: transform 0.3s ease, visibility 0.3s;
}

.site-nav--mobile.is-open {
	visibility: visible;
	transform: translateX(0);
}

/* The drawer covers the bar, so it repeats the logo and carries its own close. */
.site-nav--mobile__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.site-nav--mobile__close {
	position: relative;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
}

.site-nav--mobile__close::before,
.site-nav--mobile__close::after {
	content: "";
	position: absolute;
	left: 13px;
	top: 22px;
	width: 20px;
	height: 2px;
	background: var(--color-neutral-7);
}

.site-nav--mobile__close::before { transform: rotate(45deg); }
.site-nav--mobile__close::after { transform: rotate(-45deg); }

/* Backdrop */

.site-nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: 30;
	background: rgba(26, 41, 74, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s;
}

.site-nav-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

/* Locks the page behind the open drawer. */
body.has-nav-open { overflow: hidden; }

/* The bar drops the phone and the CTA on small screens; the drawer carries them. */
.site-nav--mobile__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-neutral-4);
}

.site-nav--mobile__phone {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
}

.site-nav--mobile__email {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-neutral-1);
	font-size: 15px;
	line-height: 1.2;
	word-break: break-all;
}

.site-nav--mobile__phone img { width: 14px; height: 14px; flex: 0 0 14px; }

/* The envelope is a 14x10 export carrying preserveAspectRatio="none". */
.site-nav--mobile__email img { width: 14px; height: auto; flex: 0 0 14px; }

.site-nav--mobile__cta { margin-top: var(--space-3); }

/*
 * `.site-nav` is hidden below the desktop bar, and the drawer renders the same
 * nav markup -- without this it opens onto nothing but the phone number.
 */
.site-nav--mobile .site-nav {
	display: block;
	margin-top: var(--space-6);
}

.site-nav--mobile .site-nav__list {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-6);
}

.site-nav--mobile .site-nav__link { font-size: 19px; }

/*
 * Submenu toggle.
 *
 * The chevron used to be a ::after on the parent link, which meant it could not
 * be clicked separately from the link. It is now a real button sitting beside
 * the link: the label always navigates to the section page, the button opens
 * the submenu. On the desktop bar the button is only the chevron the design
 * draws (hover still opens the dropdown); in the drawer it is the only way in.
 */
.site-nav__toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	/* Barely wider than the chevron itself — the desktop bar has no room to
	   spare. The drawer widens it to a proper tap target below. */
	width: 14px;
	height: 18px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.site-nav__toggle::before {
	content: "";
	width: 10.667px;
	height: 8px;
	background: currentColor;
	-webkit-mask: url("../../images/icons/chevron-down.svg") no-repeat center / contain;
	mask: url("../../images/icons/chevron-down.svg") no-repeat center / contain;
	transition: transform 0.2s ease;
}

.site-nav__item.is-open > .site-nav__toggle::before { transform: rotate(180deg); }

.site-nav__toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* The old decorative chevron is gone now that a real button carries it. */
.site-nav__link::after { display: none; }

/* Parent rows are a link + a button, so they need to sit on one line. */
.site-nav__item.menu-item-has-children {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Drawer: closed by default, opened by the button. */
.site-nav--mobile .site-nav__item.menu-item-has-children { flex-wrap: wrap; }

/* The drawer keeps the list, not the floating card. */
.site-nav--mobile ul.site-nav__submenu {
	position: static;
	display: none;
	min-width: 0;
	width: 100%;
	padding: var(--space-2) 0 0 var(--space-3);
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.site-nav--mobile .site-nav__submenu::before { content: none; }

.site-nav--mobile .site-nav__item.is-open > .site-nav__submenu { display: block; }

.site-nav--mobile .site-nav__submenu .site-nav__link {
	padding: var(--space-3) var(--space-4);
	font-size: 16px;
}


.site-nav--mobile .site-nav__toggle { width: 32px; height: 32px; }
.site-nav--mobile .site-nav__toggle::before { width: 14px; height: 10px; }


@media (prefers-reduced-motion: reduce) {
	.site-nav--mobile,
	.site-nav-backdrop { transition: none; }
}

@media (min-width: 1024px) {
	.site-header { padding-inline: var(--gutter); }
	.site-header__bar { gap: 24px; padding-left: 29px; }
	.site-header__actions { gap: 9px; }
	.site-header__brand { gap: 20px; flex-shrink: 0; }
	.site-header__tagline { display: block; }
	.site-header__actions .btn { padding: 14px 33px 14px 34px; font-size: var(--btn-size); }
	.site-header__lang { display: inline-flex; }
	.site-header__lang-wrap { display: block; }
}

/*
 * The three dropdown parents each carry a chevron, which the Figma header was
 * not drawn with. That is ~70px the row does not have: the bar is capped at
 * --container (1340px), so a wider viewport never buys more room. Two things
 * pay for it — tighter gaps from 1280 up, and the phone number, which only
 * appears once the row can actually hold it (it is still in the drawer, the
 * contact block and the footer below that).
 *
 * The desktop nav itself also moves up to 1280: eight top-level items never fit
 * the 909px bar at 1024 (they need ~576px in the ~353px left after the logo and
 * the CTA), so 1024-1279 keeps the burger drawer, which nests the submenus.
 */
@media (min-width: 1280px) {
	.site-header__bar { gap: 28px; }
	.site-nav { display: flex; margin-left: auto; }
	.site-nav__list { gap: 24px; }
	.site-header__phone { margin-left: auto; }

	/*
	 * Neither the nav nor the phone may shrink. They are text, so shrinking
	 * them does not reflow anything — it just lets the last label slide under
	 * its neighbour. That is exactly what happened on the English site, where
	 * the labels are ~30px wider than the Czech and "Contact" ended up sitting
	 * on top of the phone number. Everything still fits inside the 1340px bar;
	 * it only needed to stop being squeezed.
	 */
	.site-nav,
	.site-nav__list,
	.site-header__phone,
	.site-header__brand,
	.site-header__actions { flex-shrink: 0; }
	.site-header__toggle { display: none; }
	.site-header__actions { margin-left: 0; }

	/* The drawer and its backdrop never open above the desktop bar. */
	.site-nav--mobile,
	.site-nav-backdrop { display: none; }
}

@media (min-width: 1440px) {
	.site-header__phone { display: flex; }
}

/*
 * Non-Czech headers are tighter.
 *
 * The bar is capped at --container (1340px), so a wider viewport never buys
 * more room, and the Czech row only ever had ~11px to spare. English labels are
 * wider, so the row needs trimming somewhere. The phone number stays — it is
 * the most useful thing in the header — and the gaps give up the space instead.
 *
 * Keyed off the document language rather than a breakpoint, because this is a
 * function of how long the words are, not how wide the screen is.
 */
@media (min-width: 1280px) {
	/*
	 * The CTA pill gives up most of it. Its 33/34px side padding is generous,
	 * and taking a third off is far less noticeable than squeezing every gap in
	 * the row. Scoped to the header so the same pill elsewhere (job cards, the
	 * member "Osobní web" button) keeps its Figma padding.
	 */
	html:not([lang^="cs"]) .site-header__actions .btn--sm-dark {
		padding-right: 19px;
		padding-left: 20px;
	}

	html:not([lang^="cs"]) .site-header__bar { gap: 22px; }
	html:not([lang^="cs"]) .site-nav__list { gap: 18px; }
	html:not([lang^="cs"]) .site-header__actions { gap: 6px; }

	/*
	 * The language chip is a fixed 78px pill with 24px/18px padding for two
	 * characters. Trimming it costs nothing visually and is the last few pixels
	 * the row needs — without them the chip pushed past the rounded right edge
	 * of the header pill, which is what the overflow looked like.
	 */
	html:not([lang^="cs"]) .site-header__lang {
		padding-right: 10px;
		padding-left: 8px;
		gap: 4px;
	}

	/* The flag reads fine a touch smaller, and this is the last 2px the row needs. */
	html:not([lang^="cs"]) .site-header__lang-flag { width: 18px; height: 12px; }
}

/* The drawer is narrow, so names there wrap rather than overflow. */
.site-nav--mobile .site-nav__submenu .site-nav__link { white-space: normal; }