/*
	Sticky transparent header
	Targets the Avada Header Builder section (.fusion-tb-header) rendered by the parent theme.
	Fixed at the top from page load, so the banner below slides up behind it; js/sticky-header.js
	pads the first content section by the header height so its content still clears the header,
	and adds .header-scrolled once the page is scrolled to fade in the dark background + shadow.
*/
body:not(.fusion-builder-live) .fusion-tb-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99990;
	background-color: transparent;
	transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

/* Hidden while a .free-tool-code section is in the viewport */
body:not(.fusion-builder-live) .fusion-tb-header.header-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-100%);
}

/* Scrolled state — dark bg matches the site palette (--awb-color8 #141617) with slight transparency */
body:not(.fusion-builder-live) .fusion-tb-header.header-scrolled {
	background-color: rgba(20, 22, 23, 0.96);
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* Keep the header below the WP admin bar when logged in */
body.admin-bar:not(.fusion-builder-live)  .fusion-tb-header {
	top: 32px;
}

body:not(.fusion-builder-live) .fusion-menu-element-wrapper[data-count="1"] .fusion-menu-element-list > li.nav-btn a:hover span {
    background-color: #fff;
    color: #141617;
}

body:not(.fusion-builder-live) .fusion-menu-element-wrapper[data-count="1"] .fusion-menu-element-list > li.nav-btn a span {
    padding: 12px 16px;
    border: 1px solid #fff;
    border-radius: 4px;
}


@media screen and (max-width: 782px) {
	body.admin-bar:not(.fusion-builder-live)  .fusion-tb-header {
		top: 46px;
	}
}
@media screen and (max-width: 600px) {
	/* admin bar scrolls away on small screens */
	body.admin-bar:not(.fusion-builder-live)  .fusion-tb-header {
		top: 0;
	}
}

/*
	Dark-header variant — pages using the "100% Width - Dark Header" page template add the
	body.skyciv-dark-header class (see 100-width-dark-header.php). Their first section is
	light-coloured, so on load the transparent header needs DARK menu text + a darkened
	logo instead of the default white. These overrides only apply while the header is at
	the top (:not(.header-scrolled)); once scrolled, the dark background returns and the
	menu text / logo revert to their normal light colour.
*/
body.skyciv-dark-header:not(.fusion-builder-live) .fusion-tb-header:not(.header-scrolled) .menu-text,
body.skyciv-dark-header:not(.fusion-builder-live) .fusion-tb-header:not(.header-scrolled) .fusion-menu-element-list > li.menu-item > a,
body.skyciv-dark-header:not(.fusion-builder-live) .fusion-tb-header:not(.header-scrolled) .fusion-open-nav-submenu:before {
	color: #141617 !important;
}
body.skyciv-dark-header:not(.fusion-builder-live) .fusion-tb-header:not(.header-scrolled) li.menu-item > a.fusion-background-highlight {
	border-color: #141617 !important;
}
body.skyciv-dark-header:not(.fusion-builder-live) .fusion-tb-header:not(.header-scrolled) .header__logo img {
	filter: brightness(0);
}


.fusion-menu-element-wrapper>.avada-menu-mobile-menu-trigger {
	padding: 0 !important;
    font-size: 31px !important;
    background: transparent !important;
	color: #fff;
}
body.skyciv-dark-header:not(.fusion-builder-live) .fusion-menu-element-wrapper>.avada-menu-mobile-menu-trigger {
	color: #141617 !important;
}
body.skyciv-dark-header:not(.fusion-builder-live) .header-scrolled  .fusion-menu-element-wrapper>.avada-menu-mobile-menu-trigger,
body .fusion-menu-element-wrapper>.avada-menu-mobile-menu-trigger,
.header-scrolled .fusion-menu-element-wrapper>.avada-menu-mobile-menu-trigger {
    color: #fff !important;
}

body.skyciv-dark-header:not(.fusion-builder-live) .fusion-menu-element-wrapper[data-count="1"] .fusion-menu-element-list > li.nav-btn a:hover span {
    background-color: #141617;
    color: #fff !important;
}

body.skyciv-dark-header:not(.fusion-builder-live) .fusion-menu-element-wrapper[data-count="1"] .fusion-menu-element-list > li.nav-btn a span {
    padding: 12px 16px;
    border: 1px solid #141617;
    border-radius: 4px;
}