/**
 * Site-wide header restyle: black-transparent bar, menu text that stays visible on
 * hover/active on every device, a single Login/Sign up button, and a fixed-size logo.
 * CSS (+ a little JS) only — Traveler's markup, menus and login/register modals are
 * untouched, so existing behaviour can't break.
 */

/* 1. Black transparent header, same on every device — one flat, solid colour.
   (A bottom fade was tried, but on any page where the menu wraps to two lines the
   header grows taller and the percentage-based fade left a large, uneven patch of
   near-transparent space — the exact "left vs. right" mismatch that was reported.
   A flat colour has no such failure mode regardless of the header's height.)
   #header (an ID) is used on purpose: the site has an existing custom snippet
   forcing "background: transparent !important" on this same element for the
   Elementor header/footer template, and only an ID beats that reliably.
   No backdrop-filter here: it would turn .header into a containing block for its
   own position:fixed mobile menu panel, breaking that panel's full-screen height. */
#header.header,
#header .header,
#header .header-sticky-menu {
	background: rgba(0, 0, 0, .85) !important;
}

/* 2 & 3. Menu text stays visible — default, hover and "current page" all get an
   explicit, always-legible colour instead of inheriting the site's --main-color
   (which can be a dark colour meant for light backgrounds, invisible here). */
#main-menu > li > a,
#main-menu > li > a .fa,
.header .topbar-item > a {
	color: #ffffff !important;
}
#main-menu > li > a:hover,
#main-menu > li > a:focus,
#main-menu > li.active > a,
#main-menu > li.current-menu-item > a,
#main-menu > li.current-menu-ancestor > a,
#main-menu > li:hover > a,
#main-menu > li > a:hover .fa,
#main-menu > li.current-menu-item > a .fa,
#main-menu > li.current-menu-ancestor > a .fa {
	color: #d9b878 !important;
}
#main-menu > li.current-menu-item > a::after,
#main-menu > li.current-menu-ancestor > a::after,
#main-menu > li > a:hover::after {
	background: #d9b878 !important;
}

/* The mobile off-canvas panel reuses the same markup with a solid white background —
   give it the same black-transparent treatment instead, so point 1 and 3 match.
   On desktop #st-main-menu is just the inline nav wrapper — no background of its
   own — so this is scoped to the mobile/off-canvas breakpoint only, or it would
   paint an extra, unwanted opaque block behind the desktop menu. */
@media (max-width: 991px) {
	#st-main-menu,
	ul#main-menu {
		/* #st-main-menu is the nav wrapper itself — wider/taller than the ul#main-menu
		   panel it contains (it is also the dimmed backdrop behind that panel) and kept
		   its own, much lighter rgba(0,0,0,.5), which read as a mismatched black patch. */
		background: rgba(0, 0, 0, .85) !important;
	}
}
#main-menu .sub-menu,
#main-menu .menu-dropdown {
	background: rgba(20, 18, 16, .97) !important;
}
#main-menu .sub-menu a,
#main-menu .menu-dropdown a {
	color: #f3efe8 !important;
}
#main-menu .sub-menu a:hover,
#main-menu .menu-dropdown a:hover {
	color: #d9b878 !important;
}
#st-main-menu .back-menu {
	color: #fff;
}

/* Mobile hamburger icon: force it white too, in case a page's own colour
   setting (meant for a light header) would otherwise render it dark-on-dark.
   Covers both an SVG (stroke- or fill-drawn) and an icon-font character. */
.toggle-menu,
.toggle-menu i {
	color: #fff !important;
}
.toggle-menu svg g,
.toggle-menu svg path,
.toggle-menu svg rect,
.toggle-menu svg line,
.toggle-menu svg polyline {
	stroke: #fff !important;
	fill: none !important;
}
/* The site's own Customizer CSS redraws this icon as 3 plain bars on mobile for
   the main (Elementor) template, using ::before/::after plus a middle ".toggle-menu
   span" — but the actual link has no such <span>, so only the top and bottom bars
   ever appeared. Turning the <i> (always present, otherwise empty here since that
   same CSS hides its svg) into the missing middle bar completes the icon. */
@media (max-width: 991px) {
	body.page-template-elementor_header_footer .toggle-menu i {
		display: block !important;
		width: 100% !important;
		height: 2.5px !important;
		background-color: #fff !important;
		padding: 0 !important;
	}
}

/* 4. Login + Sign up merged into one button (built by header.js), same on every device. */
.ath-account-item { position: relative; }
.ath-account-btn {
	display: inline-flex !important;
	align-items: center;
	padding: 8px 18px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 999px;
	color: #fff !important;
	font-weight: 500;
	white-space: nowrap;
	transition: background .15s, border-color .15s;
}
.ath-account-btn:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #d9b878;
	color: #d9b878 !important;
}
.ath-account-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	min-width: 160px;
	background: rgba(14, 12, 10, .97);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
	padding: 6px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	z-index: 60;
}
.ath-account-item.is-open .ath-account-menu { display: block; }
.ath-account-menu a {
	display: block;
	padding: 9px 14px;
	border-radius: 8px;
	color: #f3efe8 !important;
	text-decoration: none;
}
.ath-account-menu a:hover { background: rgba(255, 255, 255, .08); color: #d9b878 !important; }

/* Inside the mobile off-canvas panel the button spans the row, no floating dropdown. */
#main-menu .ath-account-item { width: 100%; }
#main-menu .ath-account-btn { width: 100%; justify-content: center; border-radius: 10px; }
#main-menu .ath-account-menu { position: static; margin-top: 6px; box-shadow: none; width: 100%; }

/* 6. Logo: fixed box on every device so it never pushes the menu around.
   (display is left alone — Traveler's own d-none/d-lg-block classes decide which
   of the two logo variants is shown at which breakpoint; we only constrain size.) */
.header .logo {
	height: 46px;
	max-width: 180px;
	overflow: hidden;
	line-height: 0;
}
.header .logo img {
	height: 100%;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* 5. Responsive guardrails: never let the header wrap or overflow on small screens. */
@media (max-width: 991px) {
	.header .logo { height: 38px; max-width: 150px; }
	.header { flex-wrap: nowrap; }
	/* On tour/activity search results, the search banner is already set to
	   visibility:hidden below this width (an existing site style, not ours) but it
	   still reserved its full height, leaving a tall empty gap above "Filters".
	   #st-content-wrapper is needed to outweigh that existing rule's own specificity. */
	#st-content-wrapper.search-result-page .banner { display: none !important; }
}
@media (max-width: 480px) {
	.header .logo { height: 32px; max-width: 120px; }
}
/* Laptop widths (~1200-1366px): the desktop menu was just wide enough to wrap to a
   second line, which made the header grow much taller than intended. Trimming the
   link spacing a little gives it the room it needs without hiding anything. */
@media (min-width: 992px) and (max-width: 1366px) {
	#main-menu > li > a { padding-left: 14px !important; padding-right: 14px !important; }
}