/*
 * Site header, najlepsiemobily layout (design/najlepsiemobily-kategoria-desktop.html), mobilky colours/radii/font.
 * .wa-container (shared by header, benefits strip and footer), .wa-skip-link,
 * .wa-topbar(__inner|__contact|__avatar|__call|__line|__phone|__number|__hours|__links(--mobile|--desktop)),
 * .wa-header (+ .is-sticky / .is-fading-in / .is-nav-hidden / .is-nav-instant), .wa-header__main(-inner), .wa-header-hamburger-menu (+ __menu-toggle),
 * .wa-header__logo(-img), .wa-header__searchbar(--main|--row), .wa-header__search-row, .wa-header__actions,
 * .wa-header__account(-icon|-label), .wa-header__minicart,
 * megamenu bar: .wa-header__row, .wa-header__slot(--left|--center|--right), .wa-header__bottom-area (58px links from 1024px in megamenu.css).
 * Mobile first: phone layout below 721px, compact desktop row from 721px, megamenu (and no menu toggle) from 1024px.
 * Class names avoid the Scripts Organizer snippets (189, 742434), which still style the old Oxygen classes.
 */

/* ---- Shared content width (mockup .container) ---- */
.wa-container {
	width: 100%;
	max-width: var(--nd-container);
	margin-inline: auto;
	padding-inline: var(--nd-gutter-sm);
}

@media (min-width: 721px) {
	.wa-container {
		padding-inline: var(--nd-gutter);
	}
}

/* ---- Skip link: visible only when focused ---- */
.wa-skip-link {
	position: absolute;
	top: var(--nd-sp-8);
	left: var(--nd-sp-8);
	z-index: 1000;
	padding: var(--nd-sp-10) var(--nd-sp-16);
	border-radius: var(--nd-radius-btn);
	background-color: var(--nd-c-brand);
	color: var(--nd-c-on-brand);
	font-weight: var(--nd-fw-bold);
	transform: translateY(-200%);
}

body .wa-skip-link:focus,
body .wa-skip-link:hover {
	color: var(--nd-c-on-brand);
}

.wa-skip-link:focus {
	transform: none;
}

/* ---- Header shell ---- */
.wa-header {
	position: relative;
	background-color: var(--nd-c-surface);
	font-family: var(--nd-font);
}

/* ---- Topbar: avatar + call line on the left, quick links on the right ---- */
.wa-topbar {
	border-bottom: var(--border-width) solid var(--nd-c-line-soft);
	color: var(--nd-c-head);
	font-size: var(--nd-fs-14);
}

.wa-topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--nd-sp-16);
	padding-block: var(--nd-sp-10);
}

.wa-topbar__contact {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-10);
	min-width: 0;
}

.wa-topbar__avatar {
	flex-shrink: 0;
	width: var(--nd-avatar);
	height: var(--nd-avatar);
	border-radius: var(--nd-radius-round);
	object-fit: cover;
}

.wa-topbar__call {
	display: grid;
	line-height: var(--nd-lh-snug);
}

.wa-topbar__line {
	display: none;
	margin: 0;
	font-size: var(--nd-fs-14);
	font-weight: var(--nd-fw-medium);
	line-height: inherit;
}

.wa-topbar__phone {
	display: flex;
	align-items: baseline;
	gap: var(--nd-sp-8);
	margin: 0;
	line-height: inherit;
}

/* The tap area grows to --nd-tap without growing the bar (negative block margin). */
.wa-topbar__number {
	display: inline-flex;
	align-items: center;
	min-height: var(--nd-tap);
	margin-block: calc((var(--nd-tap) - 1lh) / -2);
	font-size: var(--nd-fs-16);
	letter-spacing: var(--nd-ls-phone);
	white-space: nowrap;
}

body .wa-topbar__number {
	color: var(--nd-c-head);
	font-weight: var(--nd-fw-bold);
}

body .wa-topbar__number:hover {
	color: var(--nd-c-brand);
}

.wa-topbar__hours {
	display: none;
	color: var(--nd-c-muted);
	font-size: var(--nd-fs-13);
	white-space: nowrap;
}

.wa-topbar__links .wa-nav__list {
	gap: var(--nd-sp-28);
}

.wa-topbar__links .menu-item {
	line-height: var(--nd-lh-snug);
}

.wa-topbar__links .menu-item a {
	font-size: var(--nd-fs-15);
	white-space: nowrap;
}

.wa-topbar__links .menu-item a:hover {
	color: var(--nd-c-brand);
}

.wa-topbar__links--mobile .menu-item a {
	min-height: var(--nd-tap);
	margin-block: calc((var(--nd-tap) - 1lh) / -2);
	color: var(--nd-c-brand);
}

.wa-topbar__links--desktop {
	display: none;
}

.wa-topbar__links--desktop .menu-item a {
	color: var(--nd-c-head);
}

@media (min-width: 721px) {
	.wa-topbar__inner {
		padding-block: var(--nd-sp-8);
	}

	.wa-topbar__contact {
		gap: var(--nd-sp-12);
	}

	.wa-topbar__line,
	.wa-topbar__hours {
		display: block;
	}

	.wa-topbar__number {
		min-height: 0;
		margin-block: 0;
	}

	.wa-topbar__links--mobile {
		display: none;
	}

	.wa-topbar__links--desktop {
		display: flex;
	}
}

/* ---- Main row: menu toggle, logo, search, account, minicart ---- */
.wa-header__main-inner {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-12) var(--nd-sp-10);
	padding-block: var(--nd-sp-12) var(--nd-sp-14);
}

@media (min-width: 721px) {
	.wa-header__main-inner {
		gap: var(--nd-sp-28);
		padding-block: var(--nd-sp-16);
	}
}

/* Off-canvas close button (rendered in footer.php; offcanvas.css only resets its margin). */
.wa-header-hamburger-menu--close {
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--nd-close-btn);
	height: var(--nd-close-btn);
	padding-inline: 0;
	border: 0;
	border-radius: var(--radius-m);
	background-color: var(--primary);
	color: var(--white);
	font: inherit;
	cursor: pointer;
	transition: background-color var(--transition-duration) var(--transition-timing);
}

.wa-header-hamburger-menu--close:hover {
	background-color: var(--primary-hover);
	color: var(--white);
}

.wa-header-hamburger-menu--close .wa-icon svg {
	width: var(--nd-icon-close);
	height: var(--nd-icon-close);
}

@media (min-width: 480px) {
	.wa-header-hamburger-menu--close {
		width: auto;
		height: var(--header-control-height);
		padding-inline: var(--nd-sp-16);
	}

	.wa-header-hamburger-menu--close .wa-icon svg {
		width: var(--nd-icon-close-lg);
		height: var(--nd-icon-close-lg);
	}
}

/* Header toggle: below 1024px only, where the megamenu bar is hidden. */
.wa-header__menu-toggle {
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: var(--nd-tap);
	height: var(--nd-tap);
	padding: 0;
	border: 0;
	border-radius: var(--nd-radius);
	background-color: var(--nd-c-brand);
	color: var(--nd-c-on-brand);
	font: inherit;
	cursor: pointer;
	transition: background-color var(--transition-duration) var(--transition-timing);
}

.wa-header__menu-toggle:hover {
	background-color: var(--nd-c-brand-hover);
	color: var(--nd-c-on-brand);
}

.wa-header__menu-toggle .wa-icon svg {
	width: var(--nd-icon-m);
	height: var(--nd-icon-m);
}

@media (min-width: 1024px) {
	.wa-header__menu-toggle {
		display: none;
	}
}

/* Logo: centred in the free space on phones, fixed at the row start from 721px. */
.wa-header__logo {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: var(--nd-tap);
}

.wa-header__logo-img {
	width: auto;
	max-width: 100%;
	height: var(--nd-logo-h-sm);
	object-fit: contain;
}

@media (min-width: 721px) {
	.wa-header__logo {
		flex: none;
		max-width: var(--nd-logo-max-w-md);
	}

	.wa-header__logo-img {
		height: var(--nd-logo-h);
	}
}

/* From 1024px the row has room for the full-size logo; below it is capped so the search keeps its width. */
@media (min-width: 1024px) {
	.wa-header__logo {
		max-width: none;
	}
}

/* Search ([wa_search_field] from wa-fibosearch-rail), restyled through its custom properties.
 * .wa-header__searchbar .wa-sf-form outranks the plugin defaults and its admin "Štýly" overrides on .wa-sf-form. */
.wa-header__searchbar {
	width: 100%;
	min-width: 0;
}

.wa-header__searchbar .wa-sf-form {
	--wa-sf-height: var(--nd-search-h);
	--wa-sf-pad-x: var(--nd-sp-22);
	--wa-sf-pad-y: var(--nd-sp-14);
	--wa-sf-radius: var(--nd-radius-pill);
	--wa-sf-wrap-radius: var(--nd-radius-pill);
	--wa-sf-wrap-pad: 0px; /* a length: the plugin adds it to --wa-sf-height inside calc() */
	--wa-sf-bg: var(--nd-c-surface);
	--wa-sf-ink: var(--nd-c-ink);
	--wa-sf-placeholder: var(--nd-c-placeholder);
	--wa-sf-border-w: var(--border-width);
	--wa-sf-border: transparent;
	--wa-sf-ring: var(--nd-c-line-soft);
	--wa-sf-border-focus: var(--nd-c-brand);
	--wa-sf-font-size: var(--nd-fs-15);
	--wa-sf-line-height: var(--nd-lh-tight);
	--wa-sf-submit-size: var(--nd-search-btn);
	--wa-sf-submit-inset: var(--nd-sp-10);
	--wa-sf-icon: var(--nd-c-brand);
}

/* Room for the submit button on the right (the plugin pads both sides alike). */
.wa-header__searchbar .wa-sf-field .wa-sf-input[type="search"] {
	padding-inline-end: var(--nd-sp-52);
	box-shadow: 0 0 0 var(--wa-sf-border-w) var(--wa-sf-ring), var(--nd-shadow-search);
}

.wa-header__searchbar .wa-sf-field .wa-sf-input[type="search"]:focus {
	box-shadow: none;
}

/* Main-row search: from 721px; the phone layout uses the row below the header row. */
.wa-header__searchbar--main {
	display: none;
	flex: 1 1 auto;
}

.wa-header__search-row {
	padding-bottom: var(--nd-sp-12);
}

.wa-header__searchbar--row .wa-sf-form {
	--wa-sf-height: var(--nd-search-h-sm);
	--wa-sf-pad-x: var(--nd-sp-18);
	--wa-sf-pad-y: var(--nd-sp-12);
	--wa-sf-font-size: var(--nd-fs-14);
	--wa-sf-submit-size: var(--nd-tap);
	--wa-sf-submit-inset: 0;
}

.wa-header__searchbar--row .wa-sf-field .wa-sf-input[type="search"] {
	padding-inline-end: var(--nd-sp-48);
}

@media (min-width: 721px) {
	.wa-header__searchbar--main {
		display: block;
	}

	.wa-header__search-row {
		display: none;
	}
}

/* ---- Actions: account + minicart ---- */
.wa-header__actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--nd-sp-6);
}

@media (min-width: 721px) {
	.wa-header__actions {
		gap: var(--nd-sp-16);
		margin-left: auto;
	}
}

/* Account: only the person icon (no name); a bare icon on phones, a grey square from 721px. */
.wa-header__account {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: var(--nd-tap);
	height: var(--nd-tap);
	border-radius: var(--nd-radius-round);
	color: var(--nd-c-account-icon);
	transition: background-color var(--transition-duration) var(--transition-timing);
}

body .wa-header__account {
	color: var(--nd-c-account-icon);
}

.wa-header__account-icon {
	font-size: var(--nd-icon-l);
}

/* The label stays in the accessibility tree (the link's name) but is visually hidden. */
.wa-header__account-label {
	position: absolute;
	width: var(--border-width);
	height: var(--border-width);
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 721px) {
	.wa-header__account {
		width: var(--nd-account-h);
		height: var(--nd-account-h);
		border-radius: var(--nd-radius-pill);
		background-color: var(--nd-c-account-bg);
	}

	.wa-header__account-icon {
		font-size: var(--nd-icon-m);
	}

	.wa-header__account:hover,
	.wa-header__account:focus-visible {
		background-color: var(--nd-c-brand);
	}

	body .wa-header__account:hover,
	body .wa-header__account:focus-visible {
		color: var(--nd-c-on-brand);
	}
}

/* Minicart: the [wooptima-minicart] app and its trigger are the plugin's own, only placed here
 * (wrapper sizing as before the redesign). */
.wa-header__minicart {
	flex-shrink: 0;
	width: var(--nd-cart-sm);
	height: var(--nd-cart-sm);
}

@media (min-width: 480px) {
	.wa-header__minicart {
		width: auto;
		height: auto;
		min-width: var(--nd-cart-min-w);
	}
}

@media (min-width: 1024px) {
	.wa-header__minicart {
		min-width: 0;
	}
}

/* ---- Megamenu bar (Oxygen port; 58px links from 1024px in megamenu.css): rows hold a .container with three slots, from 1024px ---- */
.wa-header__row {
	display: block;
	width: 100%;
}

.wa-header__slot {
	display: flex;
	align-items: center;
}

.wa-header__bottom-area {
	display: none;
	padding: 0;
	background-color: var(--primary);
}

.wa-header__bottom-area .wa-header__slot--left {
	justify-content: flex-start;
	width: 100%;
}

.wa-header__bottom-area .wa-header__slot--center,
.wa-header__bottom-area .wa-header__slot--right {
	display: none;
}

@media (min-width: 1024px) {
	.wa-header__bottom-area {
		display: block;
	}
}

/* ---- Sticky state (header-footer.js adds .is-sticky after 250px of scroll) ---- */
.wa-header.is-sticky {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 999;
}

.wa-header.is-fading-in {
	animation: mobilky-fade-in 0.2s;
}

.wa-header.is-sticky .wa-topbar {
	display: none;
}

.wa-header.is-sticky .wa-header__main-inner {
	padding-block: var(--nd-sp-6);
}

@media (min-width: 721px) {
	.wa-header.is-sticky {
		box-shadow: var(--nd-shadow-sticky);
	}
}

/* ---- Compact desktop header (variant A): 64px main row + 58px category bar (megamenu.css) ---- */
@media (min-width: 1024px) {
	.wa-header {
		--nd-logo-h: 30px;
		--nd-search-h: 42px;
		--nd-account-h: 42px;
	}

	.wa-header__main-inner {
		padding-block: var(--nd-sp-11);
	}

	/* The 46px tap-target minimum would make the row taller than the 42px controls. */
	.wa-header__logo {
		min-height: 0;
	}

	/* The plugin's minicart button (50px) matches the 42px controls. */
	.wa-header__minicart .wooptima-cart-header {
		height: var(--nd-account-h);
	}

	/* Scrolling down tucks the category bar under the main row, scrolling up brings it back
	 * (header-footer.js: .is-nav-hidden, --nd-header-nav-h = the bar's height). The header moves
	 * up by the bar's height while the main row moves down by the same, so the main row stays put. */
	.wa-header.is-sticky,
	.wa-header.is-sticky .wa-header__main {
		transition: transform var(--transition-duration) var(--ease-underline);
	}

	.wa-header__main {
		position: relative;
		z-index: 2;
		background-color: var(--nd-c-surface);
	}

	.wa-header.is-sticky.is-nav-hidden {
		transform: translateY(calc(-1 * var(--nd-header-nav-h, 0px)));
	}

	.wa-header.is-sticky.is-nav-hidden .wa-header__main {
		transform: translateY(var(--nd-header-nav-h, 0px));
	}

	.wa-header.is-nav-instant,
	.wa-header.is-nav-instant .wa-header__main {
		transition: none;
	}
}

/* WordPress admin bar: absolute below 601px, 46px tall up to 782px, 32px above. */
@media (min-width: 601px) {
	.admin-bar .wa-header.is-sticky {
		top: var(--nd-adminbar-h);
	}
}

@media (min-width: 783px) {
	.admin-bar .wa-header.is-sticky {
		top: var(--nd-adminbar-h-lg);
	}
}

@keyframes mobilky-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}