@use "../../abstracts/__index" as *;

.site-header {
	position: var(--site-header-position, relative);
	top: var(--site-header-top, auto);
	z-index: 12;
	width: 100%;
	color: var(--site-header-color, var(--color-body));
	background: var(--site-header-background, var(--color-header));
	border-bottom: var(--site-header-border-bottom, var(--border));
	box-shadow: var(--site-header-box-shadow, none);
	transition: var(--transition);
}

.site-header-wrap {
	display: var(--site-header-wrap-display, flex);
	flex-wrap: var(--site-header-wrap-flex-wrap, nowrap);
	gap: var(--site-header-wrap-gap, var(--spacing-lg));
	align-items: var(--site-header-wrap-align-items, center);
	justify-content: var(--site-header-wrap-justify-content, var(--site-header-wrap-justify-content-mobile, unset));
	width: var(--site-header-wrap-width, (calc(100% - calc(var(--side-spacing) * 2))));
	max-width: var(--site-header-wrap-max-width, var(--wrap-max-width));
	margin-right: auto;
	margin-left: auto;
}

.header-spacer {
	display: block;
	height: var(--header-spacer-height, 0px); // Needs px for smoother transition.
	transition: var(--title-area-transition, var(--transition));
}

.has-transparent-header {
	// Need px value for calc().
	--header-height-full-fallback: calc(var(--header-height, 0px) + (var(--title-area-padding-desktop, 0px) - var(--title-area-padding-mobile, 0px)));
	--transparent-header-offset: calc(var(--header-height-full, var(--header-height-full-fallback)) + var(--after-header-height, 0px) + var(--nav-after-header-height, 0px));
	--site-inner-margin-top: calc(var(--transparent-header-offset, 0px) * -1);

	.is-alignfull-first.page-header > .wrap,
	.is-alignfull-first.wp-block-cover > div[class*="__inner-container"],
	.is-alignfull-first.wp-block-group > div[class*="__inner-container"] {
		margin-top: var(--transparent-header-offset, 0);
	}
}

.has-dark-header:not(.has-transparent-header),
.has-dark-header.has-dark-transparent-header:not(.header-stuck),
.has-dark-header.has-transparent-header.header-stuck {
	--site-header-color: var(--color-white);
	--title-area-color: var(--color-white);
	--site-header-border-bottom: 0;

	.title-area {
		--link-color-hover: var(--color-white);
	}
}

.has-transparent-header:not(.header-stuck) {
	--site-header-background: transparent;
	--site-header-border-bottom: 0;
}

.has-dark-header:not(.has-transparent-header) .site-header-wrap,
.has-dark-header.has-transparent-header.header-stuck .site-header-wrap,
.has-dark-transparent-header:not(.header-stuck) .site-header-wrap,
.has-dark-mobile-menu .mobile-menu {

	@extend %dark-bg;
}

.has-dark-mobile-menu .mobile-menu {
	--mobile-menu-color: var(--color-white);
	--sub-menu-link-color: var(--color-white);
	--sub-menu-link-color-hover: var(--color-white);
}

.has-sticky-header {

	@include mq(sm, false, portrait) {
		--site-header-position: sticky;
		--site-header-top: var(--body-top);
	}

	@include mq(md) {
		--site-header-position: sticky;
		--site-header-top: var(--body-top);
	}


	&.header-stuck {

		@include mq(lg) {
			--header-spacer-height: var(--header-shrink-offset);
			--site-header-box-shadow: 0 0 24px rgba(0, 0, 0, 0.07);
		}
	}
}