/*
 * LandDU header, matching the "Landdu Header" design.
 *
 * Restyles the existing BuddyBoss header (logo + search + aside) into the
 * white bar with a pill search, gold "Post a Listing" CTA and the dark green
 * category nav underneath. The BuddyBoss markup is left intact - only layout
 * and skin are changed - so the mobile header, side panels and logged-in
 * avatar menu all keep working.
 */

:root {
	--idu-hdr-green: #17301f;
	--idu-hdr-green-2: #244a31;
	--idu-hdr-gold: #f5a21b;
	--idu-hdr-gold-2: #e8951a;
	--idu-hdr-line: #e3e6e2;
	--idu-hdr-line-2: #cfd6d1;
	--idu-hdr-muted: #5b665e;
	--idu-hdr-h: 46px;
	/* The real height of .bb-mobile-header in the theme CSS. The theme's own
	   --bb-header-height is written from the desktop header setting (68px here),
	   so using it on mobile parks the sticky bar 8px too high and it slides in
	   behind the header. */
	--idu-mhdr-h: 76px;
}

/* ---------- top bar ---------- */
.site-header--bb {
	background: #fff;
	border-bottom: 1px solid var(--idu-hdr-line);
	box-shadow: none;
}

.site-header--bb .site-header-container.default-header {
	max-width: 1280px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	height: auto;
	min-height: 0;
}

.site-header--bb #site-logo {
	flex: 0 0 auto;
	margin: 0;
}

.site-header--bb #site-logo .bb-logo {
	height: 44px;
	width: auto;
	max-height: none;
	display: block;
}

/* ---------- search: pill with icon, location and button ---------- */
.site-header--bb .header-search-wrap.header-search-primary {
	flex: 1 1 440px;
	min-width: 0;
	order: 1;
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	background: transparent;
	box-shadow: none;
	padding: 0;
	height: auto;
}

.site-header--bb .header-search-primary > .container {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

.site-header--bb .header-search-primary .search-form {
	display: flex;
	align-items: stretch;
	height: var(--idu-hdr-h);
	border: 1.5px solid var(--idu-hdr-line-2);
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
	margin: 0;
	width: 100%;
	position: relative;
}

.site-header--bb .header-search-primary .search-form:focus-within {
	border-color: var(--idu-hdr-green);
}

.site-header--bb .header-search-primary .search-form label {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 6px 0 18px;
	margin: 0;
}

.site-header--bb .header-search-primary .search-form .search-field-top,
.site-header--bb .header-search-primary .search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	width: auto;
	height: auto;
	border: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--idu-hdr-green);
}

.site-header--bb .header-search-primary .search-form input::placeholder {
	color: var(--idu-hdr-muted);
	font-weight: 500;
}

/* icon + location segment + submit, injected by idu-header.js */
.idu-hdr-ico {
	flex: 0 0 auto;
	display: block;
	color: var(--idu-hdr-muted);
}

.idu-hdr-loc {
	flex: 0 1 200px;
	min-width: 120px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 6px 0 14px;
	border-left: 1.5px solid var(--idu-hdr-line);
}

.idu-hdr-loc input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	padding: 0;
	height: auto;
	font-size: 15px;
	font-weight: 500;
	color: var(--idu-hdr-green);
}

.idu-hdr-submit {
	flex: 0 0 auto;
	border: 0;
	background: var(--idu-hdr-green);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 0 24px;
	cursor: pointer;
	font-family: inherit;
	line-height: 1;
	transition: background 0.15s ease;
}

.idu-hdr-submit:hover,
.idu-hdr-submit:focus {
	background: var(--idu-hdr-green-2);
	color: #fff;
}

/* ---------- Post a Listing CTA ---------- */
.site-header--bb .idu-hdr-cta {
	flex: 0 0 auto;
	order: 2;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: var(--idu-hdr-h);
	padding: 0 22px;
	border-radius: 999px;
	background: var(--idu-hdr-gold);
	color: var(--idu-hdr-green);
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
	text-decoration: none;
	transition: background 0.15s ease;
}

.site-header--bb .idu-hdr-cta:hover,
.site-header--bb .idu-hdr-cta:focus {
	background: var(--idu-hdr-gold-2);
	color: var(--idu-hdr-green);
}

/* ---------- right side (auth / avatar) ---------- */
.site-header--bb #header-aside {
	flex: 0 0 auto;
	order: 3;
	margin-left: 0;
}

.site-header--bb #header-aside .header-aside-inner {
	display: flex;
	align-items: center;
	gap: 18px;
}

.site-header--bb .bb-header-buttons .button.signup {
	background: var(--idu-hdr-green);
	border-color: var(--idu-hdr-green);
	color: #fff;
}

.site-header--bb .bb-header-buttons .button.signup:hover {
	background: var(--idu-hdr-green-2);
	border-color: var(--idu-hdr-green-2);
}

/* ---------- dark category nav ---------- */
.idu-hdr-nav {
	background: var(--idu-hdr-green);
}

.idu-hdr-nav__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 2px;
}

.idu-hdr-nav__all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px 14px 0;
	margin-right: 8px;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	text-decoration: none;
	border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.idu-hdr-nav__all:hover,
.idu-hdr-nav__all:focus {
	color: var(--idu-hdr-gold);
}

.idu-hdr-nav__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.idu-hdr-nav__menu li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.idu-hdr-nav__menu a {
	display: block;
	padding: 14px 11px;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.idu-hdr-nav__menu a:hover,
.idu-hdr-nav__menu a:focus,
.idu-hdr-nav__menu .current-menu-item > a,
.idu-hdr-nav__menu .current_page_item > a {
	color: var(--idu-hdr-gold);
	border-bottom-color: var(--idu-hdr-gold);
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	.site-header--bb .header-search-wrap.header-search-primary {
		flex-basis: 320px;
	}
	.idu-hdr-loc {
		display: none;
	}
}

@media (max-width: 900px) {
	.site-header--bb .site-header-container.default-header {
		padding: 12px 16px;
		gap: 12px 16px;
	}
	.site-header--bb .header-search-wrap.header-search-primary {
		order: 4;
		flex: 1 1 100%;
	}
	.site-header--bb .idu-hdr-cta {
		padding: 0 16px;
	}
	.idu-hdr-nav__inner {
		padding: 0 16px;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.idu-hdr-nav__inner::-webkit-scrollbar {
		display: none;
	}
}

/* The dark nav is desktop chrome; BuddyBoss has its own mobile header + panel. */
@media (max-width: 767px) {
	.idu-hdr-nav {
		display: none;
	}
}

/* The nav is moved inside #masthead by idu-header.js (the header is fixed, so
   anything after </header> would sit behind it). Let the header grow to fit. */
.site-header--bb,
.site-header--bb #masthead {
	height: auto;
	max-height: none;
}

.site-header--bb .idu-hdr-nav.is-in-header {
	width: 100%;
}

/* The side padding that insets the green bar lives on .site-header--bb itself;
   the inner containers supply the gutters, so clear it outright. */
.site-header.site-header--bb {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ---------- mobile header (burger + logo + post ad + bell + account) ---------- */
.bb-mobile-header .idu-mhdr-aside {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	margin-left: auto;
}

.bb-mobile-header .idu-mhdr-post {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 34px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--idu-hdr-gold);
	color: var(--idu-hdr-green);
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	text-decoration: none;
}

.bb-mobile-header .idu-mhdr-post:hover,
.bb-mobile-header .idu-mhdr-post:focus {
	background: var(--idu-hdr-gold-2);
	color: var(--idu-hdr-green);
}

.bb-mobile-header .idu-mhdr-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--idu-hdr-green);
	text-decoration: none;
}

.bb-mobile-header .idu-mhdr-icon:hover,
.bb-mobile-header .idu-mhdr-icon:focus {
	background: #eef1ee;
	color: var(--idu-hdr-green);
}

.bb-mobile-header .idu-mhdr-me img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: #eef1ee;
}

@media (max-width: 480px) {
	.bb-mobile-header .idu-mhdr-post {
		padding: 0 10px;
		font-size: 12px;
	}
	.bb-mobile-header .idu-mhdr-aside {
		gap: 6px;
	}
}

/* No line under the green bar. The nav now lives INSIDE the header, so the
   header's own bottom border/shadow lands beneath it. The theme also draws a
   1px shadow via `.sticky-header .site-header`, which outranks a plain
   `box-shadow: none`, hence the explicit selectors. */
.site-header.site-header--bb,
.sticky-header .site-header.site-header--bb,
body.sticky-header .site .site-header.site-header--bb {
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* Keep the white bar separated from the green nav instead. */
.site-header--bb .site-header-container.default-header {
	border-bottom: 1px solid var(--idu-hdr-line);
}

/* ---------- mobile: one header only ----------
   BuddyBoss hides the desktop bar below 768px and shows .bb-mobile-header.
   The desktop rules above (display:flex on .default-header, and forcing the
   primary search visible) were overriding that and producing a second header.
   Stand down on mobile and let the BuddyBoss mobile header own the screen;
   the child theme's .idu-mobile-search-bar already sits underneath it. */
@media (max-width: 767px) {
	.site-header--bb .site-header-container.default-header,
	.site-header--bb .header-search-wrap.header-search-primary {
		display: none !important;
	}
	.site-header.site-header--bb .site-header-container.default-header {
		border-bottom: 0;
	}
}

/* ---------- mobile search stays stuck under the header ----------
   The bar is display:none on desktop, so this needs no media query. It sticks
   directly below the fixed mobile header, just under it in the stacking order.
   position:sticky dies inside a scroll-clipping ancestor, and this theme sets
   `overflow-x: hidden` on .site - `clip` stops the sideways scroll without
   creating a scroll container, so sticky keeps working. */
.idu-mobile-search-bar {
	position: sticky;
	top: var(--idu-mhdr-h, 76px);
	z-index: 611;
	background: #fff;
}

@media (max-width: 991px) {
	.site {
		overflow-x: clip;
	}
}

/* Space sits to the LEFT of the +; the + then sits tight against the P. */
.bb-mobile-header .idu-mhdr-post {
	padding: 0 14px 0 16px;
	gap: 4px;
}

@media (max-width: 480px) {
	.bb-mobile-header .idu-mhdr-post {
		padding: 0 12px 0 14px;
		gap: 4px;
	}
}

/* Nudge the + away from the button's left edge.
   Scoped to this button on purpose: a bare `svg:not(:root)` rule would hit
   every inline icon on the site (cards, filters, buttons) and shift them all. */
.bb-mobile-header .idu-mhdr-post svg:not(:root) {
	margin-left: 10px;
}

/* Once moved inside the fixed header the bar travels with it, so the sticky
   offset and the margin that used to clear the header are both dropped. The
   doubled class beats the child theme's own rule without !important. */
.idu-mobile-search-bar.is-in-header {
	position: static;
	top: auto;
	margin-top: 0;
}