/* inner-header.css — page-specific styles for the inner-page header burger.
 * Linked only by components/layout/InnerHeader.tsx, NEVER globally (Error #3).
 * Loads on object / collection / static inner pages; NOT on the main page.
 *
 * Desktop (≥1000px): drawer is `display:contents` so its children flex
 *   normally inside #searchbox and the bar looks identical to v0.15.
 * Mobile (≤999px): big logo on the left, language + burger pinned right;
 *   burger opens an off-canvas drawer (search + currency) from the right
 *   with a dim backdrop.
 */

/* ── Desktop default ──────────────────────────────────────────── */

.inner-header__burger,
.inner-header__drawer-close,
.inner-header__backdrop {
	display: none;
}

.inner-header__drawer {
	/* Layout-transparent: children (search wrapper + currency button)
	   participate in the #searchbox flex layout via their own `order:`
	   rules (see algolia-search.css / index.css). Drawer's DOM order is
	   search-then-currency, so when both end up at `order:3` source-order
	   tie-break renders search left of currency (matches v0.15). */
	display: contents;
}

.inner-header__search {
	/* Same layout-transparent trick so the .ais-SearchBox that Algolia
	   mounts inside this wrapper behaves as a direct flex child of
	   #searchbox (carrying its own `order:3 / width:80%` from
	   algolia-search.css). */
	display: contents;
}

/* Desktop only (≥1000px): shorten the search box and push the currency +
   language group to the right edge. Without these caps the global
   algolia-search.css gives `.ais-SearchBox` width:80% which fills the row
   and squeezes the right group. Mobile keeps the drawer rules unchanged. */
@media (min-width: 1000px) {
	#searchbox .ais-SearchBox {
		width: auto;
		max-width: 560px;
		flex: 0 1 560px;
	}
	#searchbox .header-currency {
		margin-left: auto;
	}
}

/* Search field — natural states:
 *   idle:      thin neutral grey border, no glow.
 *   :focus:    brand-blue ring (active state).
 * Selectors prefixed with #searchbox so they win source-order ties
 * against the global algolia-search.css. */
#searchbox .ais-SearchBox-input {
	border: 1px solid rgb(213, 213, 213);
	border-radius: 6px;
	box-shadow: none;
	background-color: white;
	/* Share row space with the magnifier icon. */
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	/* Leave room for the magnifier icon overlaid at the right edge. */
	padding-right: 44px;
}
#searchbox .ais-SearchBox-input:hover {
	border-color: rgb(180, 180, 180);
}
#searchbox .ais-SearchBox-input:focus,
#searchbox .ais-SearchBox-input:focus-visible {
	outline: none;
	border-color: rgb(0, 119, 232);
	box-shadow: 0 0 0 3px rgba(0, 119, 232, 0.25);
}

/* Magnifier — borderless icon at the right edge of the input. Algolia's
   built-in svg is hidden; a small inline magnifier svg (teal) is painted
   on top of the input padding. The button itself is transparent and not
   a visible affordance — clicks still submit. */
#searchbox .ais-SearchBox-form {
	gap: 0;
	margin: 0;
	display: flex;
	align-items: stretch;
	position: relative;
}
#searchbox .ais-SearchBox-submit {
	/* algolia-search-main.css (loaded globally for the home page) sets
	   display:none on the submit; override that for inner pages. */
	display: block;
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	border: 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230c6776' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	cursor: pointer;
	box-shadow: none;
}
#searchbox .ais-SearchBox-submit:hover,
#searchbox .ais-SearchBox-submit:focus,
#searchbox .ais-SearchBox-submit:focus-visible {
	outline: none;
	box-shadow: none;
	background-color: transparent;
}
#searchbox .ais-SearchBox-submitIcon {
	display: none;
}
#searchbox .ais-SearchBox-reset,
#searchbox .ais-SearchBox-resetIcon,
#searchbox .ais-SearchBox-loadingIndicator,
#searchbox .ais-SearchBox-loadingIcon {
	display: none;
}

/* ── Mobile overrides (≤999px) ─────────────────────────────────── */

@media (max-width: 999px) {
	/* Tighter padding so the bar reads as a clean single row. */
	#searchbox {
		padding: 12px 16px;
		align-items: center;
	}

	/* Logo: prominent on the left (was a thin 20% slice at v0.15). */
	.header-logo {
		width: 150px !important;
		height: 40px;
		order: 1;
	}

	/* Language button (RU + flag) pinned to the right. `margin-left:auto`
	   on the first right-aligned flex item pushes itself and everything
	   after it (the burger) to the bar's right edge. */
	.header-language {
		order: 4;
		margin-left: auto;
		width: auto !important;
		min-width: 70px;
		gap: 6px;
	}

	.header-language img {
		width: 22px;
	}

	.inner-header__burger {
		order: 5;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		padding: 0;
		margin-left: 8px;
		border: 0;
		background: transparent;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
	}

	.inner-header__burger span {
		display: block;
		width: 22px;
		height: 2px;
		background-color: rgb(12, 103, 118);
		border-radius: 2px;
	}

	/* Drawer becomes an off-canvas slide-in panel from the right. */
	.inner-header__drawer {
		display: flex;
		flex-direction: column;
		gap: 16px;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(82vw, 360px);
		max-width: 100vw;
		padding: 24px 16px;
		background: white;
		box-shadow: -2px 0 16px rgba(0, 0, 0, 0.18);
		z-index: 1001;
		transform: translateX(100%);
		transition: transform 0.28s ease-out;
		overflow-y: auto;
	}

	.inner-header__drawer.open {
		transform: translateX(0);
	}

	.inner-header__search {
		display: block;
		width: 100%;
	}

	/* Algolia's emitted search box: revert desktop order/width quirks so it
	   fills the drawer naturally on mobile. */
	.inner-header__drawer .ais-SearchBox {
		width: 100%;
		order: 0;
	}

	.inner-header__drawer .ais-SearchBox-input {
		width: auto;
		flex: 1 1 auto;
	}

	/* Currency button inside the drawer is a normal, full-width button. */
	.inner-header__drawer .header-currency {
		order: 0;
		width: 100%;
		text-align: left;
		padding: 12px 0;
		margin-right: 0;
		border-top: 1px solid rgb(232, 232, 232);
	}

	.inner-header__drawer-close {
		display: inline-flex;
		align-self: flex-end;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.inner-header__drawer-close img {
		width: 28px;
		height: 28px;
	}

	.inner-header__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.35);
		z-index: 1000;
		opacity: 0;
		visibility: hidden;
		transition:
			opacity 0.28s ease-out,
			visibility 0.28s ease-out;
	}

	.inner-header__backdrop.open {
		opacity: 1;
		visibility: visible;
	}

	/* Prevent background scroll while the drawer is open. */
	body.inner-header-drawer-open {
		overflow: hidden;
	}
}