/* ==========================================================================
   innovalextax — Topbar (search + language switcher)
   Sits above the main header, follows the site container width, and mirrors
   the header's scroll behaviour (shrinks + solidifies on scroll).
   ========================================================================== */

:root {
	--ix-topbar-h:     50px;  /* total bar height (top space + content + small gap) */
	--ix-topbar-h-min: 0px;   /* collapses on scroll so the header docks to top */
}

/* ---- Topbar shell -------------------------------------------------------- */
.ix-topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 101;                       /* above the header */
	/* The BAR spans the full viewport width (full-bleed background). */
	width: 100%;
	height: var(--ix-topbar-h);
	display: flex;
	align-items: flex-end;              /* content hugs the bottom → close to header */
	padding-bottom: 6px;                /* ≤15px gap from elements to the header */
	background: #fff;  /* identical to .ix-header */
	backdrop-filter: saturate(180%) blur(14px);
	overflow: hidden;
	transition: height .5s var(--ix-ease),
	            background .5s var(--ix-ease),
	            opacity .5s var(--ix-ease),
	            padding .5s var(--ix-ease);
}

/* The main header is pushed down to sit directly beneath the topbar. */
.ix-header {
	top: 25px;
}

/* Keep anchored sections clear of BOTH bars. */
html {
	scroll-padding-top: calc(var(--ix-header-h-min) + 16px);
}

/* ---- Topbar inner: two groups pushed to the right, aligned to the page
   column. The .ix-container class on this element supplies the width +
   centring (same column as the header content below). ------------------- */
.ix-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;   /* both elements hug the right edge */
	gap: 14px;
}

/* ---- Scroll state: mirror the header. Topbar collapses away so the header
   slides up to the very top, exactly like before the topbar existed. ------ */
.ix-topbar.is-scrolled {
	height: var(--ix-topbar-h-min);
	padding-bottom: 0;
	opacity: 0;
	pointer-events: none;
}

/* When the topbar collapses, the header docks to the top. */
.ix-header.is-scrolled {
	top: 0;
}

/* ---- Clearance: at the top of the page the topbar adds height above the
   fixed header. Sections that pad for the header must also clear the topbar.
   (On scroll the topbar collapses, so this only matters at the very top,
   which is exactly where these padding rules apply.) -------------------- */
.ix-hero,
.ix-page-hero,
.ix-archive-hero,
.ix-search-hero {
	padding-top: calc(var(--ix-header-h) + var(--ix-topbar-h) + var(--ix-space-md));
}

/* ---- Transparent-over-hero state: match the header's transparent look --- */
.has-transparent-header .ix-topbar:not(.is-scrolled) {
	background: transparent;
	backdrop-filter: none;
}
.has-transparent-header .ix-topbar:not(.is-scrolled) .ix-topsearch__input,
.has-transparent-header .ix-topbar:not(.is-scrolled) .ix-topsearch__icon,
.has-transparent-header .ix-topbar:not(.is-scrolled) .ix-lang,
.has-transparent-header .ix-topbar:not(.is-scrolled) .ix-lang__code {
	color: var(--ix-on-dark);
}
.has-transparent-header .ix-topbar:not(.is-scrolled) .ix-topsearch {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.28);
}
.has-transparent-header .ix-topbar:not(.is-scrolled) .ix-topsearch__input::placeholder {
	color: var(--ix-on-dark-muted);
}
.has-transparent-header .ix-topbar:not(.is-scrolled) .ix-lang .ix-flag {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* ---- Mobile menu open: keep the topbar solid + dark so the search field
   and language switcher stay visible against the white menu panel. ------ */
body.is-menu-open .ix-topbar {
	background: rgba(255, 255, 255, 0.96) !important;
	backdrop-filter: saturate(180%) blur(14px);
}
body.is-menu-open .ix-topbar .ix-topsearch__input,
body.is-menu-open .ix-topbar .ix-topsearch__icon,
body.is-menu-open .ix-topbar .ix-lang,
body.is-menu-open .ix-topbar .ix-lang__code {
	color: var(--ix-text) !important;
}
body.is-menu-open .ix-topbar .ix-topsearch {
	background: var(--ix-bg) !important;
	border-color: var(--ix-line) !important;
}
body.is-menu-open .ix-topbar .ix-topsearch__input::placeholder {
	color: var(--ix-faint) !important;
}

/* ==========================================================================
   SEARCH (topbar)
   ========================================================================== */
.ix-topbar__search {
	position: relative;
	width: clamp(150px, 18vw, 230px);
}

.ix-topsearch {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 30px;
	padding: 0 12px;
	background: var(--ix-bg);
	border: 1px solid var(--ix-line);
	border-radius: var(--ix-radius);
	transition: border-color .4s var(--ix-ease),
	            box-shadow .4s var(--ix-ease),
	            background .4s var(--ix-ease);
}
.ix-topsearch:focus-within {
	border-color: var(--ix-primary);
	box-shadow: 0 0 0 3px var(--ix-primary-ring);
}
.ix-topsearch__icon {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--ix-muted);
}
.ix-topsearch__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: var(--ix-font-primary);
	font-size: 0.82rem;
	letter-spacing: var(--ix-letter-spacing);
	color: var(--ix-text);
	outline: none;
}
.ix-topsearch__input::placeholder {
	color: var(--ix-faint);
}

/* ---- Live-search results dropdown --------------------------------------- */
.ix-livesearch__results {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: min(380px, 86vw);
	max-height: min(70vh, 460px);
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--ix-line);
	border-radius: var(--ix-radius-lg);
	box-shadow: var(--ix-shadow-lg);
	padding: 6px;
	z-index: 120;
}
.ix-livesearch__results[hidden] { display: none; }

.ix-livesearch__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ix-livesearch__item { margin: 0; }
.ix-livesearch__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: var(--ix-radius);
	color: var(--ix-text);
	transition: background .3s var(--ix-ease);
}
.ix-livesearch__link:hover,
.ix-livesearch__item.is-active .ix-livesearch__link {
	background: var(--ix-primary-soft);
}
.ix-livesearch__thumb {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--ix-radius-sm);
	overflow: hidden;
	background: var(--ix-bg-tint);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ix-livesearch__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ix-livesearch__thumb--empty {
	color: var(--ix-faint);
}
.ix-livesearch__thumb--empty svg {
	width: 18px;
	height: 18px;
}
.ix-livesearch__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.ix-livesearch__title {
	font-family: var(--ix-font-primary);
	font-weight: 600;
	font-size: 0.86rem;
	line-height: 1.3;
	color: var(--ix-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ix-livesearch__type {
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ix-tracking-wide);
	color: var(--ix-primary);
}
.ix-livesearch__empty {
	padding: 16px 12px;
	text-align: center;
	color: var(--ix-muted);
	font-size: 0.86rem;
}
.ix-livesearch__more {
	display: block;
	margin-top: 4px;
	padding: 10px 12px;
	text-align: center;
	font-family: var(--ix-font-primary);
	font-weight: 600;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: var(--ix-letter-spacing);
	color: var(--ix-primary);
	border-top: 1px solid var(--ix-line-soft);
	border-radius: 0 0 var(--ix-radius) var(--ix-radius);
	transition: background .3s var(--ix-ease);
}
.ix-livesearch__more:hover { background: var(--ix-primary-soft); }

/* Loading state on the input wrapper. */
.ix-topbar__search.is-loading .ix-topsearch__icon {
	animation: ix-spin .8s linear infinite;
}
@keyframes ix-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   LANGUAGE SWITCHER
   ========================================================================== */
.ix-topbar__lang {
	flex: none;
	display: flex;
	align-items: center;
}
.ix-lang {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	font-family: var(--ix-font-primary);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: var(--ix-letter-spacing);
	color: var(--ix-text);
	transition: opacity .4s var(--ix-ease);
}
.ix-lang:hover {
	opacity: 0.75;
}
.ix-lang .ix-flag {
	display: block;
	flex: none;
	width: 20px;
	height: 14px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(8, 18, 44, 0.10);
}
.ix-lang__code { line-height: 1; }

/* ==========================================================================
   RESPONSIVE — topbar
   ========================================================================== */
@media (max-width: 1024px) {
	:root { --ix-topbar-h: 44px; }

	/* The burger button is 44px wide with a 24px icon centred inside it, so
	   the icon visually sits ~10px in from the button's right edge. Nudge the
	   actions group out by that amount so the burger icon lines up with the
	   page margin (the same column the logo hugs). */
	.ix-header__actions { margin-right: -10px; }
}

@media (max-width: 600px) {
	/* On phones: center both elements, search shrinks, dropdown spans width. */
	.ix-topbar__inner {
		justify-content: center;
		gap: 10px;
	}
	.ix-topbar__search {
		width: clamp(140px, 52vw, 220px);
	}
	.ix-livesearch__results {
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		width: 92vw;
	}
	.ix-lang {
		padding: 0 10px;
		height: 30px;
	}
}

/* ==========================================================================
   SEARCH RESULTS PAGE
   ========================================================================== */
.ix-search-hero__form {
	margin-top: var(--ix-space-md);
	max-width: 520px;
}
/* Make the reusable search form readable on the dark hero. */
.ix-search-hero__form .ix-search {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	padding: 0 18px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--ix-radius);
	transition: border-color .4s var(--ix-ease), background .4s var(--ix-ease);
}
.ix-search-hero__form .ix-search:focus-within {
	background: rgba(255, 255, 255, 0.18);
	border-color: #fff;
}
.ix-search-hero__form .ix-search__icon {
	width: 18px;
	height: 18px;
	color: var(--ix-on-dark-soft);
	flex: none;
}
.ix-search-hero__form .ix-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: var(--ix-font-primary);
	font-size: 0.95rem;
	letter-spacing: var(--ix-letter-spacing);
	outline: none;
}
.ix-search-hero__form .ix-search__input::placeholder {
	color: var(--ix-on-dark-muted);
}

/* ---- Results list -------------------------------------------------------- */
.ix-search-results {
	display: flex;
	flex-direction: column;
	gap: var(--ix-space-md);
}
.ix-search-result {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--ix-space-md);
	align-items: center;
	padding-bottom: var(--ix-space-md);
	border-bottom: 1px solid var(--ix-line);
}
.ix-search-result:last-child { border-bottom: 0; padding-bottom: 0; }

.ix-search-result__media {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--ix-radius-lg);
	overflow: hidden;
	background: var(--ix-bg-tint);
}
.ix-search-result__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ix-ease);
}
.ix-search-result__media:hover img { transform: scale(1.04); }

.ix-search-result__type {
	display: inline-block;
	font-family: var(--ix-font-primary);
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ix-tracking-wide);
	color: var(--ix-primary);
	margin-bottom: 8px;
}
.ix-search-result__title {
	font-family: var(--ix-font-display);
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 8px;
}
.ix-search-result__title a {
	color: var(--ix-text);
	transition: color .4s var(--ix-ease);
}
.ix-search-result__title a:hover { color: var(--ix-primary); }
.ix-search-result__excerpt {
	color: var(--ix-secondary);
	font-size: 0.95rem;
	margin-bottom: 12px;
}

/* No-image rows collapse the media column. */
.ix-search-result:not(:has(.ix-search-result__media)) {
	grid-template-columns: 1fr;
}

/* ---- Empty state --------------------------------------------------------- */
.ix-search-empty {
	text-align: center;
	max-width: 480px;
	margin-inline: auto;
	padding-block: var(--ix-space-lg);
}
.ix-search-empty__icon {
	width: 48px;
	height: 48px;
	color: var(--ix-faint);
	margin-bottom: var(--ix-space-sm);
}
.ix-search-empty__title {
	font-family: var(--ix-font-display);
	font-size: clamp(1.4rem, 3vw, 1.8rem);
	font-weight: 600;
	margin-bottom: 8px;
}
.ix-search-empty__text {
	color: var(--ix-secondary);
	margin-bottom: var(--ix-space-md);
}
.ix-search-empty__form .ix-search {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	padding: 0 18px;
	background: var(--ix-bg);
	border: 1px solid var(--ix-line);
	border-radius: var(--ix-radius);
	max-width: 420px;
	margin-inline: auto;
}
.ix-search-empty__form .ix-search:focus-within {
	border-color: var(--ix-primary);
	box-shadow: 0 0 0 3px var(--ix-primary-ring);
}
.ix-search-empty__form .ix-search__icon { width: 18px; height: 18px; color: var(--ix-muted); flex: none; }
.ix-search-empty__form .ix-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--ix-text);
	font-size: 0.95rem;
	outline: none;
}

@media (max-width: 720px) {
	.ix-search-result {
		grid-template-columns: 1fr;
		gap: var(--ix-space-sm);
	}
	.ix-search-result__media { aspect-ratio: 16 / 9; }
}