/* Header menu (views/index.php #navLinks). Loaded after index.css, memberGate.css and kaizen_r4_mobile.css.
   "..." item after Read (nav.js toggleMore): Local, International and Directory in a dropdown on desktop;
   in the phone menu (576px and down) the button goes away and they list inline. */
header nav .nav-more {
	position: relative;
}
header nav .nav-more__btn {
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 18px;
	padding: 0 6px 6px;
	border-radius: 4px;
	transition: color 100ms ease-in;
}
header nav .nav-more__btn:hover,
header nav .nav-more.is-open .nav-more__btn {
	color: #0ab39f;
}
header nav .nav-more__btn:focus-visible {
	outline: 2px solid #0ab39f;
	outline-offset: 2px;
}
header nav .nav-more__menu {
	display: none;
	position: absolute;
	top: calc(100% + 14px);
	right: 50%;
	transform: translateX(50%);
	min-width: 170px;
	padding: 6px 0;
	background: #0c0e17;
	border: 1px solid #1b243c;
	border-radius: 6px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
	z-index: 1000;
}
header nav .nav-more.is-open .nav-more__menu {
	display: block;
}
header nav .nav-more__menu a {
	display: block;
	padding: 10px 18px;
	white-space: nowrap;
}
header nav .nav-more__menu a:hover,
header nav .nav-more__menu a:focus-visible {
	background: #1b243c;
	outline: none;
}

@media (max-width: 576px) {
	/* The phone menu is a panel under the 67px header. It scrolls on its own so the member buttons
	   (name, My Activity, Logout) at the end are always reachable, and rows are tighter than index.css's
	   1.2rem padding so the whole menu fits on most phones without scrolling. */
	header nav .nav-links {
		height: calc(100vh - 67px);
		height: calc(100dvh - 67px);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
		padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	}
	header nav .nav-links > li {
		flex-shrink: 0;
		padding: 0.25rem 5%;
	}

	/* The "..." item and its dropdown drop out of the layout so the three links stack as rows of the menu,
	   spaced like the other items (li padding + the 44px touch target from kaizen_r4_mobile.css). */
	header nav .nav-links .nav-more,
	header nav .nav-links .nav-more .nav-more__menu {
		display: contents;
	}
	header nav .nav-more__btn {
		display: none;
	}
	header #navLinks .nav-more__menu a.page-link {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		box-sizing: content-box;
		min-height: 44px;
		padding: 0.25rem 5%;
		font-size: 16px;
		letter-spacing: 0.03rem;
		line-height: 0;
		white-space: normal;
	}
	header #navLinks .nav-more__menu a.page-link:hover,
	header #navLinks .nav-more__menu a.page-link:focus-visible {
		background: none;
	}

	/* Member buttons: set apart from the sections, wrapping when a long name shares the row. */
	header nav .nav-links .member-nav--mobile {
		flex-wrap: wrap;
		gap: 10px 12px;
		width: 100%;
		box-sizing: border-box;
		margin-top: 12px;
		padding: 16px 5% 0;
		border-top: 1px solid #1b243c;
	}
	header nav .nav-links .member-nav--mobile .member-nav__name {
		flex-basis: 100%;
		max-width: 100%;
	}
}