/* Syder navigation integration: stacking, social links, customizer controls, branding. */

.syder-nav-menu {
	z-index: 10050;
	isolation: isolate;
	--syder-menu-link-gap: var(--syder-menu-link-gap-control, clamp(0.85rem, 2vw, 1.5rem));
	--syder-menu-button-gap: var(--syder-menu-button-gap-control, clamp(3.75rem, 8vw, 5rem));
	--syder-nav-branding-bar-height: clamp(4.25rem, 8vw, 5.75rem);
	--syder-nav-branding-bottom-offset: 0;
	--syder-nav-branding-padding: clamp(1rem, 3vw, 2rem);
	--syder-nav-branding-logo-height: clamp(2.25rem, 5vw, 3.5rem);
	--syder-nav-branding-logo-width: min(260px, calc(100vw - 7rem));
}

.syder-nav-menu__overlay {
	z-index: 1;
}

.syder-nav-menu:not(.syder-nav-menu--open) .syder-nav-menu__overlay {
	pointer-events: none;
}

.syder-nav-menu ul {
	z-index: 2;
	pointer-events: none;
}

.syder-nav-menu.syder-nav-menu--open ul,
.syder-nav-menu.syder-nav-menu--open ul a {
	pointer-events: auto;
}

.syder-nav-menu .syder-social-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--syder-menu-social-gap-control, 9px);
}

.syder-nav-menu .syder-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-alt);
	font-size: 0;
	line-height: 1;
	text-decoration: none;
}

.syder-nav-menu .syder-social-link::before {
	content: none;
}

.syder-nav-menu .syder-social-icon {
	display: inline-flex;
	width: 1.65rem;
	height: 1.65rem;
	color: currentColor;
	opacity: 0.72;
	transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.syder-nav-menu .syder-social-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.syder-nav-menu .syder-social-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.syder-nav-menu .syder-social-link:hover .syder-social-icon,
.syder-nav-menu .syder-social-link:focus .syder-social-icon {
	color: var(--color-frame-alt);
	opacity: 1;
	transform: translateY(-1px);
}

.syder-nav-menu__trigger {
	z-index: 1000;
	color: transparent;
	font-size: 0;
	line-height: 0;
	pointer-events: auto;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.syder-nav-menu__trigger::before {
	position: absolute;
	inset: -10px;
	content: "";
}

.syder-nav-menu__trigger span {
	pointer-events: none;
}

.syder-nav-menu--bottom-bar ul {
	display: flex;
	align-items: center;
	justify-content: center;
}

.syder-nav-menu--bottom-left > ul:not(.syder-social-menu) {
	justify-content: flex-start;
}

.syder-nav-menu--bottom-right > ul:not(.syder-social-menu) {
	justify-content: flex-end;
}

.syder-nav-menu--bottom-bar ul li {
	display: block;
	margin: 0 var(--syder-menu-link-gap);
}

.syder-nav-menu--bottom-bar ul li:nth-child(2) {
	margin-right: var(--syder-menu-button-gap);
}

.syder-nav-menu--bottom-bar ul li:nth-child(3) {
	margin-left: var(--syder-menu-button-gap);
	margin-right: var(--syder-menu-link-gap);
}

.syder-nav-menu--bottom-bar ul li:nth-child(4) {
	margin-left: var(--syder-menu-link-gap);
}

.syder-nav-menu--bottom-left > ul:not(.syder-social-menu) li:nth-child(n),
.syder-nav-menu--bottom-right > ul:not(.syder-social-menu) li:nth-child(n) {
	margin-left: var(--syder-menu-link-gap);
	margin-right: var(--syder-menu-link-gap);
}

.syder-nav-menu--bottom-bar ul li a {
	font-size: 1em;
	white-space: nowrap;
}

.syder-nav-menu--bottom-bar .syder-social-menu {
	bottom: 90px;
	height: 0;
}

.syder-nav-menu--bottom-bar.syder-nav-menu--open .syder-social-menu {
	height: 60px;
}

.syder-nav-menu--bottom-bar .syder-social-menu li {
	height: 60px;
	line-height: 60px;
	margin: 0;
	width: auto;
}

.syder-nav-menu--bottom-bar .syder-social-menu li:nth-child(n) {
	margin-left: 0;
	margin-right: 0;
}

.syder-nav-menu--bottom-bar .syder-social-link {
	width: 2.5rem;
	height: 2.5rem;
}

.syder-nav-menu--bottom-bar {
	--syder-nav-branding-bottom-offset: var(--syder-menu-bar-height);
}

.syder-nav-menu--right-rail,
.syder-nav-menu--left-rail {
	--syder-menu-rail-width: var(--syder-menu-rail-width-auto, var(--syder-menu-rail-width-control, clamp(9.5rem, 18vw, 18rem)));
	--syder-menu-rail-max: var(--syder-menu-rail-max-control, 50vw);
	--syder-nav-branding-bottom-offset: var(--syder-menu-rail-item-height);
}

.syder-nav-menu--right-rail.syder-nav-menu--open {
	border-width: 30px min(var(--syder-menu-rail-width), var(--syder-menu-rail-max)) 90px 30px;
}

.syder-nav-menu--left-rail.syder-nav-menu--open {
	border-width: 0 0 50px min(var(--syder-menu-rail-width), var(--syder-menu-rail-max));
}

.syder-nav-menu--right-rail .syder-nav-menu__trigger {
	right: max(1rem, calc((min(var(--syder-menu-rail-width), var(--syder-menu-rail-max)) - 50px) / 8));
}

.syder-nav-menu--left-rail .syder-nav-menu__trigger {
	left: max(1rem, calc((min(var(--syder-menu-rail-width), var(--syder-menu-rail-max)) - 50px) / 8));
}

.syder-nav-menu--right-rail ul:first-of-type,
.syder-nav-menu--left-rail ul:first-of-type {
	width: min(var(--syder-menu-rail-width), var(--syder-menu-rail-max));
	max-width: var(--syder-menu-rail-max);
}

.syder-nav-menu--right-rail ul:first-of-type {
	right: 0;
}

.syder-nav-menu--left-rail ul:first-of-type {
	left: 0;
}

.syder-nav-menu--right-rail ul:first-of-type li,
.syder-nav-menu--left-rail ul:first-of-type li {
	width: 100%;
	max-width: var(--syder-menu-rail-max);
}

.syder-nav-menu--right-rail ul:first-of-type li a,
.syder-nav-menu--left-rail ul:first-of-type li a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 1em;
}

.syder-nav-menu--right-rail ul:nth-of-type(2) {
	right: min(var(--syder-menu-rail-width), var(--syder-menu-rail-max));
}

.syder-nav-menu--right-rail .syder-social-link,
.syder-nav-menu--left-rail .syder-social-link {
	width: 100%;
	height: 100%;
}

.syder-nav-menu--right-rail .syder-social-icon {
	width: 2rem;
	height: 2rem;
}

.syder-nav-menu--left-rail .syder-social-icon {
	width: 1.55rem;
	height: 1.55rem;
}

.syder-nav-branding {
	position: absolute;
	z-index: 1000;
	color: var(--color-text);
	pointer-events: auto;
	max-width: calc(100vw - (var(--syder-nav-branding-padding) * 2));
}

.syder-nav-menu--branding-in-nav:not(.syder-nav-menu--open) .syder-nav-branding {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}

.syder-nav-menu--branding-in-nav.syder-nav-menu--open .syder-nav-branding {
	opacity: 1;
	transition: opacity 0.3s 0.3s;
}

.syder-nav-branding__img {
	display: block;
	width: auto;
	max-width: var(--syder-nav-branding-logo-width);
	max-height: var(--syder-nav-branding-logo-height);
	height: auto;
	object-fit: contain;
}

.syder-nav-branding__text {
	font-family: var(--font-heading);
	font-size: clamp(1.15rem, 3.2vw, 1.6rem);
	font-weight: 600;
	color: currentColor;
	line-height: 1.05;
	max-width: var(--syder-nav-branding-logo-width);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.syder-nav-menu--branding-in-nav:is(.syder-nav-menu--branding-top-center, .syder-nav-menu--branding-top-left, .syder-nav-menu--branding-top-right).syder-nav-menu--open {
	border-top-width: var(--syder-nav-branding-bar-height);
}

.syder-nav-menu--branding-in-nav:is(.syder-nav-menu--branding-top-center, .syder-nav-menu--branding-top-left, .syder-nav-menu--branding-top-right, .syder-nav-menu--branding-bottom-center, .syder-nav-menu--branding-bottom-left, .syder-nav-menu--branding-bottom-right) .syder-nav-branding {
	position: fixed;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	color: var(--syder-menu-link-color);
	width: 100%;
	height: var(--syder-nav-branding-bar-height);
	padding: 0 var(--syder-nav-branding-padding);
	transform: none;
}

.syder-nav-menu--branding-in-nav:is(.syder-nav-menu--branding-top-center, .syder-nav-menu--branding-top-left, .syder-nav-menu--branding-top-right) .syder-nav-branding {
	top: 0;
}

.syder-nav-menu--branding-in-nav:is(.syder-nav-menu--branding-bottom-center, .syder-nav-menu--branding-bottom-left, .syder-nav-menu--branding-bottom-right) .syder-nav-branding {
	bottom: 0
}

.syder-nav-menu--branding-top-center .syder-nav-branding {
	justify-content: center;
}

.syder-nav-menu--branding-bottom-center .syder-nav-branding {
	justify-content: center;
}

.syder-nav-menu--branding-top-left .syder-nav-branding {
	justify-content: flex-start;
}

.syder-nav-menu--branding-bottom-left .syder-nav-branding {
	justify-content: flex-start;
}

.syder-nav-menu--branding-top-right .syder-nav-branding {
	justify-content: flex-end;
}

.syder-nav-menu--branding-bottom-right .syder-nav-branding {
	justify-content: flex-end;
}

.syder-nav-menu--branding-side-l-top .syder-nav-branding,
.syder-nav-menu--branding-side-l-bottom .syder-nav-branding,
.syder-nav-menu--branding-side-r-top .syder-nav-branding,
.syder-nav-menu--branding-side-r-bottom .syder-nav-branding {
	display: flex;
	align-items: center;
	justify-content: center;
}

.syder-nav-menu--branding-side-l-top .syder-nav-branding {
	top: 2rem;
	left: 1rem;
}

.syder-nav-menu--branding-side-l-bottom .syder-nav-branding {
	bottom: 2rem;
	left: 1rem;
}

.syder-nav-menu--branding-side-r-top .syder-nav-branding {
	top: 2rem;
	right: 1rem;
}

.syder-nav-menu--branding-side-r-bottom .syder-nav-branding {
	bottom: 2rem;
	right: 1rem;
}

.syder-nav-menu[class*="--branding-side-"] .syder-nav-branding__text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.syder-nav-menu[class*="--branding-side-"] .syder-nav-branding__img {
	max-width: 60px;
	max-height: min(160px, 36vh);
}

@media screen and (max-width: 32em) {
	.syder-nav-menu--bottom-bar {
		--syder-menu-link-gap: min(var(--syder-menu-link-gap-control, 0.45rem), 0.45rem);
		--syder-menu-button-gap: min(var(--syder-menu-button-gap-control, 2.75rem), 2.75rem);
	}

	.syder-nav-menu {
		--syder-nav-branding-bar-height: 4rem;
		--syder-nav-branding-logo-height: 2.35rem;
		--syder-nav-branding-logo-width: min(210px, calc(100vw - 5.5rem));
	}

	.syder-nav-menu--bottom-bar ul li {
		margin-left: var(--syder-menu-link-gap);
		margin-right: var(--syder-menu-link-gap);
	}

	.syder-nav-menu--bottom-bar ul li:nth-child(2) {
		margin-right: var(--syder-menu-button-gap);
	}

	.syder-nav-menu--bottom-bar ul li:nth-child(3) {
		margin-left: var(--syder-menu-button-gap);
	}

	.syder-nav-menu--bottom-left > ul:not(.syder-social-menu) li:nth-child(n),
	.syder-nav-menu--bottom-right > ul:not(.syder-social-menu) li:nth-child(n) {
		margin-left: var(--syder-menu-link-gap);
		margin-right: var(--syder-menu-link-gap);
	}

	.syder-nav-menu--bottom-left > ul:not(.syder-social-menu),
	.syder-nav-menu--bottom-right > ul:not(.syder-social-menu) {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	.syder-nav-menu--bottom-left > ul:not(.syder-social-menu),
	.syder-nav-menu--bottom-right > ul:not(.syder-social-menu) {
		justify-content: center;
	}

	.syder-nav-menu--bottom-left .syder-nav-menu__trigger,
	.syder-nav-menu--bottom-right .syder-nav-menu__trigger {
		left: 50%;
		right: auto;
		margin-left: calc(var(--syder-menu-trigger-size) / -2);
	}
}