/* Match Zucoin website menus, public + member pages */

.header-nav-wide {
	gap: clamp(22px, 3vw, 56px);
	height: 78px;
}

.header-nav-wide-group {
	flex: 0 0 auto;
	height: 78px;
	padding-top: 17px;
}

.header-nav-wide-group > summary {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
}

.header-nav-wide-group > summary::-webkit-details-marker {
	display: none;
}

.header-nav-wide-group > summary::after {
	content: '';
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 7px solid currentColor;
}

.header-nav-wide-group > nav {
	position: absolute;
	top: 78px;
	left: 0;
	width: max-content;
	min-width: 240px;
	max-width: 340px;
}

.header-nav-wide-group > nav::before {
	content: '';
	position: absolute;
	top: -24px;
	left: 0;
	width: 100%;
	height: 32px;
}

.header-nav-wide-group:nth-last-child(-n + 2) > nav {
	right: 0;
	left: auto;
}

/* Keep original menu size on hover/focus */

.header-nav-menu > summary,
.header-nav-menu > summary:hover,
.header-nav-menu > summary:focus,
.header-nav-menu > summary:active {
	width: 56px;
	height: 56px;
	list-style: none;
}

.header-nav-menu > summary::-webkit-details-marker {
	display: none;
}

.header-nav-menu-icon,
.header-nav-menu-icon span {
	display: block;
}

.header-nav-menu-icon {
	position: relative;
	width: 30px;
	height: 22px;
}

.header-nav-menu-icon span {
	position: absolute;
	left: 0;
	width: 30px;
	height: 3px;
	border-radius: 3px;
	background: currentColor;
	transition: top var(--transition-duration-1), transform var(--transition-duration-1), opacity var(--transition-duration-1);
}

.header-nav-menu-icon span:nth-child(1) {
	top: 0;
}

.header-nav-menu-icon span:nth-child(2) {
	top: 9px;
}

.header-nav-menu-icon span:nth-child(3) {
	top: 18px;
}

.header-nav-menu[open] .header-nav-menu-icon span:nth-child(1) {
	top: 9px;
	transform: rotate(45deg);
}

.header-nav-menu[open] .header-nav-menu-icon span:nth-child(2) {
	opacity: 0;
}

.header-nav-menu[open] .header-nav-menu-icon span:nth-child(3) {
	top: 9px;
	transform: rotate(-45deg);
}

.header-nav-panel {
	position: fixed;
	top: 78px;
	right: 16px;
	width: min(1040px, calc(100vw - 32px));
	max-height: calc(100vh - 104px);
	overscroll-behavior-y: contain;
}

@media (min-width: 1100px) {
	.header-nav-mobile {
		display: none;
	}
}

@media (max-width: 1099px) {
	.header-nav-wide {
		display: none;
	}
}

/* Match website text sizing, member content keeps larger reading size */

#screen--header {
	font-size: 22px;
}

@media (max-width: 600px) {
	#screen--header {
		font-size: 20px;
	}
}

@media (max-width: 420px) {
	#screen--header {
		font-size: 18px;
	}
}

@media (max-width: 349px) {
	#screen--header {
		font-size: 14px;
	}
}

/* Keep compact header labels on narrow screens */

.flex-shrink-0 {
	flex-shrink: 0;
}
.white-space-nowrap {
	white-space: nowrap;
}