/*
 * The header — 4B direction. See includes/header.php.
 *
 * Values are written out rather than read from variables, because the 4B mockup's tokens live in
 * the mockup and not in the live theme. A missing variable would leave the header with inherited
 * colours, which on a white page could be unreadable.
 *
 * Rules that are not cosmetic and must not be relaxed:
 *   - no horizontal scrolling at 360, 768 or 1440
 *   - every control at least 44px tall
 *   - the search input is 16px, because anything smaller makes iPhone Safari zoom the page
 *     on focus - which is exactly the defect the current checkout has
 */

.irkn-hdr {
	--irkn-blue: #203ba6;
	--irkn-blue-2: #3b62e8;
	--irkn-blue-lt: #eef2ff;
	--irkn-ink: #111827;
	--irkn-ink2: #46536b;
	--irkn-line: #e5e7eb;
	--irkn-bg: #f7f8fa;
	--irkn-red: #d63638;
}

/*
 * THE HEADER'S TYPOGRAPHY, NORMALISED TO THE MOCKUP.
 *
 * WHY EVERY LINE HERE IS NEEDED (measured in the browser on 2026-10-10, clone vs mockup, same element
 * and same property):
 *   - font-family: the theme sets **Open Sans** on `body` and the header inherited it.
 *   - letter-spacing: the theme sets **1px** and it INHERITS down the whole header, so every element was
 *     spaced out - 1.5px on the search button. **This, not the font, was the visible mismatch the owner
 *     reported.**
 *   - text-transform: the theme **uppercases buttons**, so the search button read `IEŠKOTI` where the
 *     mockup reads `Ieškoti`.
 *
 * Declared on the header AND on its common descendants, because **a rule set directly on an element beats
 * an inherited one** - which is exactly how the theme was winning.
 */
.irkn-hdr,
.irkn-hdr a,
.irkn-hdr span,
.irkn-hdr li,
.irkn-hdr p,
.irkn-hdr input,
.irkn-hdr button {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	letter-spacing: normal;
	text-transform: none;
}

.irkn-hdr__wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 18px;
}

/* ---------- utility bar ---------- */

.irkn-hdr__util {
	background: #fff;
	border-bottom: 1px solid var(--irkn-line);
	font-size: 14px;
	color: var(--irkn-ink2);
}

.irkn-hdr__util .irkn-hdr__wrap {
	justify-content: space-between;
	gap: 12px;
	min-height: 50px;
	flex-wrap: wrap;
}

.irkn-hdr__tel a {
	color: var(--irkn-blue);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.irkn-hdr__tel a:hover {
	color: #16286f;
}

/* ---------- main row: logo, search, actions ---------- */

.irkn-hdr__main {
	background: #fff;
	border-bottom: 1px solid var(--irkn-line);
}

.irkn-hdr__main .irkn-hdr__wrap {
	flex-wrap: wrap;
	padding-top: 12px;
	padding-bottom: 12px;
	gap: 14px;
}

.irkn-hdr__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	/* The mark is 38px tall at phone widths. Without this the LINK is 38px too - measured. The
	   image keeps its size; only the area a thumb has to hit grows to the 44px minimum. */
	min-height: 44px;
	line-height: 0;
}

.irkn-hdr__logoimg {
	height: clamp(38px, 4vw, 54px);
	width: auto;
	display: block;
}

.irkn-hdr__search {
	flex: 1 1 260px;
	min-width: 0;
	display: flex;
	background: var(--irkn-bg);
	border: 1px solid var(--irkn-line);
	border-radius: 999px;
	padding: 4px;
}

.irkn-hdr__search:focus-within {
	border-color: var(--irkn-blue);
	box-shadow: 0 0 0 4px rgba(32, 59, 166, 0.12);
}

.irkn-hdr__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.irkn-hdr__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	border: 0;
	background: transparent;
	padding: 0 16px;
	/* 16px, not 14: below 16 iPhone Safari zooms the whole page on focus. */
	font-size: 16px;
	color: var(--irkn-ink);
	border-radius: 999px;
	-webkit-appearance: none;
	appearance: none;
}

.irkn-hdr__search button {
	flex: 0 0 auto;
	height: 44px;
	min-width: 96px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: var(--irkn-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.irkn-hdr__search button:hover {
	background: #16286f;
}

.irkn-hdr__acts {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.irkn-hdr__act {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 14px;
	border-radius: 999px;
	/* Mockup `.ib`: a white pill with a hairline border. It was transparent with no border here, which
	   is why the action row looked different from the mockup. */
	background: #fff;
	border: 1px solid var(--irkn-line);
	color: var(--irkn-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.irkn-hdr__act:hover {
	border-color: var(--irkn-blue-2);
	color: var(--irkn-blue);
	background: #fff;
}

.irkn-hdr__pill {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--irkn-blue);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}

/* ---------- navigation ---------- */

.irkn-nav {
	background: #fff;
	border-bottom: 1px solid var(--irkn-line);
	position: sticky;
	top: 0;
	z-index: 40;
}

.irkn-nav .irkn-hdr__wrap {
	padding: 8px 20px;
	display: block;
}

/*
 * The mobile menu toggle.
 *
 * Hidden by default, and revealed only inside the phone media query AND only when the script has
 * marked the page as having JavaScript. Both conditions are needed, because either one alone
 * breaks a visitor: without the media query the button would sit on the desktop header where the
 * full menu is already visible, and without the JavaScript condition it would appear on a page
 * where it cannot open anything at all.
 */
.irkn-nav__btn {
	display: none;
}

.irkn-nav__list,
.irkn-nav__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.irkn-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	/*
	 * CENTRED, at the owner's request on 2026-10-10 (D-105): *"can we center out Mega menu?"*.
	 * He calls the navigation bar the "mega menu", which is exactly what it is on the live site -
	 * an ElementsKit mega menu inside Elementor template #137. Here it is this list.
	 *
	 * ⚠️ THIS DELIBERATELY BREAKS ONE ALIGNMENT RULE. D-094/D-096 established that every block on the
	 * page begins its content at the same edge - the notice bar, the header, the hero, the sections
	 * and the footer all start at x=93 on a 1440px screen. A centred nav is the one row that no longer
	 * does, and it cannot be both. Measured before the change: the six links ended at x=829 inside a
	 * 1240px content box, so 504px of empty space sat to their right.
	 *
	 * SMALL SCREENS ARE EXEMPT - see the max-width:899px block further down, where the list wraps and a
	 * centred wrapped list reads as a mistake rather than a choice.
	 */
	justify-content: center;
}

.irkn-nav__list > li {
	position: relative;
}

/*
 * OceanWP injects its own cart as a menu item into EVERY call to wp_nav_menu(), and this nav is
 * one of them. In this header the cart already lives in the actions row, so the injected one is a
 * duplicate - and its 350px dropdown is positioned at right:-20px, which pushed the whole page
 * 20px wider than the screen on a phone.
 *
 * Measured, not guessed: with this header switched off the page had 0px of horizontal overflow at
 * 360, 768 and 1440; with it on, 20px at 360 and 768. The offender was
 * `li.woo-menu-icon > .current-shop-items-dropdown`, inside this nav.
 */
.irkn-nav__list > li.woo-menu-icon {
	display: none;
}

/*
 * TWO MORE INJECTED ITEMS, the same way: OceanWP and Ivory Search each add a search toggle to every
 * wp_nav_menu() call, so this nav carried two magnifying glasses beside a search box that already
 * has its own button. Measured in the rendered page: 48x44 for OceanWP's `li.search-toggle-li` and
 * 52x44 for Ivory Search's `li.astm-search-menu`.
 *
 * Hidden rather than unregistered, because neither is a menu entry - both are added by filters on
 * the menu's HTML, so there is nothing in the database to take out. Hiding them also removes Ivory
 * Search's own hidden 0x0 search form from the page.
 */
.irkn-nav__list > li.search-toggle-li,
.irkn-nav__list > li.astm-search-menu {
	display: none;
}

/*
 * The wishlist.
 *
 * In the 4B mockup the wishlist is an icon in the actions row, not an entry in the navigation, and
 * it now renders there - see irkn_wishlist_url() in includes/header.php.
 *
 * ⚠️ THIS IS HIDDEN, NOT REMOVED. The menu entry the owner created (item 3837, a bare ❤️ linking to
 * /wishlist/) is still in the WordPress menu and still appears in Appearance -> Menus, so nothing
 * was thrown away and it correctly reappears if the new header is switched off. Removing it from
 * the menu itself is a data change and needs the owner's word.
 */
.irkn-nav__list > li.menu-item-3837 {
	display: none;
}

.irkn-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 17px;
	border-radius: 999px;
	/* Mockup `.nl a`: PLAIN TEXT with a transparent border - the pill only appears on hover. It was a
	   permanent grey pill here, which is why the navigation read as a row of buttons. */
	background: transparent;
	border: 1px solid transparent;
	color: var(--irkn-ink2);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.irkn-nav__list > li > a:hover,
.irkn-nav__list > li > a:focus-visible {
	background: var(--irkn-blue-lt);
	color: var(--irkn-blue);
	border-color: #dfe6fb;
}

/* Sub-categories. Shown on hover AND on keyboard focus, so they are not mouse-only. */
.irkn-nav__list ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	min-width: 260px;
	max-height: 70vh;
	overflow: auto;
	background: #fff;
	border: 1px solid var(--irkn-line);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(17, 24, 39, 0.14);
	padding: 8px;
}

.irkn-nav__list > li:hover > ul,
.irkn-nav__list > li:focus-within > ul {
	display: block;
}

.irkn-nav__list ul a {
	display: flex;
	align-items: center;
	/* 44px: the project's minimum. A sub-category link is still a link a thumb has to hit,
	   and these measured 38px before this rule was added. */
	min-height: 44px;
	padding: 6px 12px;
	border-radius: 10px;
	color: var(--irkn-ink);
	font-size: 14.5px;
	text-decoration: none;
}

.irkn-nav__list ul a:hover,
.irkn-nav__list ul a:focus-visible {
	background: var(--irkn-bg);
	color: var(--irkn-blue);
}

/*
 * On a phone the navigation WRAPS rather than scrolling sideways.
 *
 * A sideways-scrolling row hides whatever is off-screen, which for this shop means hiding whole
 * categories - the opposite of what the owner asked for ("navigation should be simple"). The
 * earlier mockups were changed for the same reason.
 *
 * Sub-categories are shown INLINE on small screens, indented. That makes for a long list, and it
 * is deliberate: the alternative is sub-categories that a phone cannot reach at all.
 */
@media (max-width: 899px) {

	/*
	 * The main row, re-ordered so it costs two lines instead of three.
	 *
	 * Measured before this rule: logo + search + actions = 237px, because the search's 260px
	 * minimum width would not fit beside the logo, so each of the three took a line of its own.
	 * Now the logo and the two account links share the first line, and the search takes the
	 * second. Same controls, roughly half the height.
	 */
	.irkn-hdr__main .irkn-hdr__wrap {
		gap: 10px;
	}

	.irkn-hdr__logo {
		order: 1;
	}

	.irkn-hdr__acts {
		order: 2;
		width: auto;
		margin-left: auto;
		flex-wrap: nowrap;
	}

	.irkn-hdr__search {
		order: 3;
		flex: 1 1 100%;
	}

	/*
	 * The words "Prisijungti" and "Krepšelis" are taken out of the layout on a phone, but NOT out
	 * of the page. They are shrunk to a 1px box rather than set to display:none on purpose: the
	 * accessible name of those two links comes from this text, so hiding it properly would leave
	 * them announced as an unnamed link with a picture in it.
	 */
	.irkn-hdr__actlbl {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
	}

	.irkn-hdr__act {
		padding: 0 12px;
	}

	/*
	 * The address, removed from this bar on a phone.
	 *
	 * The notice bar directly above already says the full address, including the entrance note,
	 * so this line repeated a fact the visitor had just read - the same kind of repetition the
	 * benefit strip was removed for (D-069). The telephone number stays: it is the part of this
	 * bar a thumb can act on, and on a phone it is the most useful thing on the page.
	 */
	.irkn-hdr__loc {
		display: none;
	}

	/* The toggle, present only when the script has marked the page. */
	html.irkn-has-js .irkn-nav__btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		padding: 0 14px;
		border: 1px solid var(--irkn-line);
		border-radius: 999px;
		background: #fff;
		color: var(--irkn-ink);
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;
	}

	html.irkn-has-js .irkn-nav__btn:hover {
		background: var(--irkn-bg);
		color: var(--irkn-blue);
	}

	html.irkn-has-js .irkn-nav__btnicon {
		font-size: 18px;
		line-height: 1;
	}

	/*
	 * Collapsed until the button is pressed - and only when the script is running, so a visitor
	 * without JavaScript keeps the full list instead of an empty header.
	 */
	html.irkn-has-js .irkn-nav__list {
		display: none;
	}

	html.irkn-has-js .irkn-nav.is-open .irkn-nav__list {
		display: flex;
	}

	.irkn-nav .irkn-hdr__wrap {
		padding: 8px 14px;
	}

	/*
	 * Left-aligned again below 900px, overriding the centred rule above.
	 *
	 * Two reasons: the links wrap onto several rows at these widths, and centring each wrapped row
	 * staggers them so the left edge of the third link sits under the middle of the first; and the
	 * menu behind the "Meniu" toggle is a vertical list, where centring would put each item in a
	 * different place. A nav you have to hunt for is worse than a nav that is not centred.
	 */
	.irkn-nav__list {
		gap: 4px;
		justify-content: flex-start;
	}

	.irkn-nav__list > li {
		position: static;
	}

	.irkn-nav__list > li > a {
		padding: 0 13px;
		font-size: 14.5px;
	}

	.irkn-nav__list ul {
		display: block;
		position: static;
		min-width: 0;
		width: 100%;
		max-height: none;
		border: 0;
		box-shadow: none;
		padding: 4px 0 8px 10px;
	}

	/*
	 * Sub-categories on a phone are ALWAYS open, not hover-only.
	 *
	 * There used to be `> li > ul { display: none }` followed by `> li:hover > ul { display:block }`
	 * here. The child combinator made the first rule more specific than the inline rule above, so
	 * it won, and the sub-tree stayed shut. That was survivable while the menu wrapped in the open,
	 * because a finger could still reach the top level - but it is not survivable now that the menu
	 * is collapsed, and it was never right anyway: a touch device has no hover, and tapping the
	 * parent link navigates away instead of opening it. Measured on the clone: with the menu open,
	 * zero sub-menus were visible.
	 */
	.irkn-nav__list ul a {
		min-height: 44px;
	}

	/* a smaller bar on a small screen, but still 44px for the tappable parts */
	.irkn-hdr__util {
		font-size: 13.5px;
	}

	.irkn-hdr__util .irkn-hdr__wrap {
		padding: 0 14px;
	}
}