/* header-row.css — Lucky Aussie Reels child theme.

   Puts the category menu on the same line as the site name, to the right of
   it, instead of stacking the menu as a full-width bar underneath the brand.
   The menu's dark backdrop and amber underline are removed so the categories
   read as part of the header row rather than a separate strip.

   Load order note: this file is last, but nav-patch.css pins
   `.lvs-nav, .lvs-nav__bar, .lvs-nav__root { display: block !important }` on
   bare class selectors. Every rule below is therefore scoped with the
   `.lvs-topbar` ancestor, which outranks those bare-class selectors, so the
   row stays a row.

   This file does NOT touch a panel's open/closed state: display, visibility or
   opacity for .lvs-nav__sub must stay false in any rule that applies to it.
   Surface colours live in header-final.css; state lives in nav-dropdown.css. */

/* ---------- Header row ---------------------------------------------------- */
header.lvs-topbar,
.lvs-topbar {
	display: block !important;
	width: 100% !important;
	overflow: visible !important;
}

.lvs-topbar .lvs-topbar__inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px 24px !important;
	width: 100% !important;
	max-width: 1180px !important;
	margin: 0 auto !important;
	padding: 10px 24px !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

.lvs-topbar .lvs-topbar__brand {
	flex: 0 0 auto !important;
	white-space: nowrap !important;
}

/* ---------- Category menu: inline flex item on the right ------------------- */
.lvs-topbar .lvs-nav,
.lvs-topbar nav.lvs-nav {
	width: auto !important;
	max-width: none !important;
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: flex-end !important;
	align-items: center !important;
	margin: 0 0 0 auto !important;
	padding: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	position: relative !important;
	z-index: 110 !important;
	clear: none !important;
	float: none !important;
	overflow: visible !important;
	height: auto !important;
}

.lvs-topbar .lvs-nav .lvs-nav__bar,
.lvs-topbar .lvs-nav > .lvs-nav__bar {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	overflow: visible !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: flex-end !important;
	align-items: center !important;
	height: auto !important;
}

.lvs-topbar .lvs-nav .lvs-nav__root,
.lvs-topbar .lvs-nav ul.lvs-nav__root {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 2px 5px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	width: auto !important;
	height: auto !important;
	position: static !important;
	overflow: visible !important;
}

/* ---------- Density: 11 categories beside the brand ----------------------- */
.lvs-topbar .lvs-nav .lvs-nav__anchor,
.lvs-topbar .lvs-nav .lvs-nav__anchor:link,
.lvs-topbar .lvs-nav .lvs-nav__anchor:visited {
	padding: 7px 9px !important;
	font-size: .82rem !important;
	line-height: 1.2 !important;
	display: inline-block !important;
	white-space: nowrap !important;
}

/* ---------- Dropdown panels must not be clipped by the header ------------- */
.lvs-topbar,
.lvs-topbar__inner,
.lvs-topbar .lvs-nav,
.lvs-topbar .lvs-nav__bar,
.lvs-topbar .lvs-nav__root {
	overflow: visible !important;
}

/* ---------- Second row only when the row genuinely cannot fit ------------- */
@media (max-width: 1180px) {
	.lvs-topbar .lvs-topbar__inner {
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
	}
	.lvs-topbar .lvs-nav {
		flex: 1 1 100% !important;
		justify-content: flex-start !important;
		margin-left: 0 !important;
	}
	.lvs-topbar .lvs-nav .lvs-nav__bar,
	.lvs-topbar .lvs-nav .lvs-nav__root {
		justify-content: flex-start !important;
	}
}

@media (max-width: 600px) {
	.lvs-topbar .lvs-topbar__inner {
		padding: 10px 16px !important;
		gap: 8px !important;
	}
	.lvs-topbar .lvs-nav .lvs-nav__root {
		gap: 4px !important;
	}
	.lvs-topbar .lvs-nav .lvs-nav__anchor {
		padding: 6px 8px !important;
		font-size: .78rem !important;
	}
}