@charset "UTF-8";
/**
 * Association theme family - Navigation (SHARED: keep identical across
 * Charter, Quorum and Commons; per-theme looks come from tokens.css / skin.css)
 *
 * Styles the markup produced by core's menu_bs5.cfm inside .main-nav:
 *   li.nav-item > a.nav-link                               (plain item)
 *   li.nav-item.dropdown > a.nav-link + a.dropdown-toggle-split + ul.dropdown-menu
 * Top-level items stay links; the split chevron is the only toggle.
 *
 * Desktop (992px+): one row beside the logo; dropdowns open on hover and on
 * :focus-within (and on click of the chevron, via Bootstrap). Titles only.
 * Mobile: the nav collapses behind the Menu button (Bootstrap collapse) and
 * drops onto its own full-width row; dropdowns become indented lists that are
 * always open, as in the comp.
 *
 * Two levels by design: deeper levels (.dropend) are hidden.
 */


.main-nav.navbar {
	padding: 0;
	background: transparent;
	box-shadow: none;
	border: 0;
	height: auto !important;
}

/* Chevron on the split toggle (replaces Bootstrap's caret). A mask keeps it
   in currentColor without depending on the Font Awesome kit. */
.main-nav .dropdown-toggle::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0;
	border: 0;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6a32 32 0 0 0 45.3 0l192-192a32 32 0 0 0-45.3-45.3L256 338.7 86.6 169.4a32 32 0 0 0-45.3 45.3l192 192z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6a32 32 0 0 0 45.3 0l192-192a32 32 0 0 0-45.3-45.3L256 338.7 86.6 169.4a32 32 0 0 0-45.3 45.3l192 192z'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: .55;
	transition: transform .18s;
}

/* Two levels only */
.main-nav .dropdown-menu .dropdown-menu,
.main-nav .dropend > .dropdown-toggle-split { display: none !important; }

/* ========================================
   Desktop
   ======================================== */
@media (min-width: 992px) {
	.main-nav .navbar-nav {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0 14px;
		margin: 0;
		padding: 0;
	}
	.main-nav .navbar-nav > .nav-item {
		position: relative;
		display: flex;
		align-items: center;
	}
	.main-nav .navbar-nav > .nav-item > .nav-link {
		display: inline-flex;
		align-items: center;
		min-height: var(--tap-min);
		padding: 0;
		color: var(--ink);
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
	}
	.main-nav .navbar-nav > .nav-item > .nav-link:hover,
	.main-nav .navbar-nav > .nav-item > .nav-link.active { color: var(--brand-primary); }

	/* The split chevron sits right next to its label */
	.main-nav .navbar-nav > .dropdown > .dropdown-toggle-split {
		justify-content: center;
		width: 22px;
		margin-left: 2px;
		color: var(--ink);
	}
	.main-nav .navbar-nav > .dropdown:is(:hover, :focus-within) > .dropdown-toggle::after,
	.main-nav .navbar-nav > .dropdown > .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

	/* Dropdown panel */
	.main-nav .navbar-nav > .dropdown > .dropdown-menu {
		position: absolute;
		top: 100%;
		left: -14px;
		display: block;
		min-width: 240px;
		margin: 0;
		padding: 10px;
		border: 1px solid var(--line);
		border-radius: var(--radius-md);
		background: var(--surface);
		box-shadow: var(--shadow-float);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .18s, transform .18s, visibility .18s;
	}
	.main-nav .navbar-nav > .dropdown:is(:hover, :focus-within) > .dropdown-menu,
	.main-nav .navbar-nav > .dropdown > .dropdown-menu.show {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.main-nav .dropdown-item {
		display: block;
		padding: 10px 14px;
		border-radius: var(--radius-input);
		color: var(--ink);
		font-size: 1rem;
		font-weight: 500;
		line-height: 1.35;
		white-space: normal;
	}
	.main-nav .dropdown-item:hover,
	.main-nav .dropdown-item:focus-visible,
	.main-nav .dropdown-item.active {
		background: var(--primary-tint);
		color: var(--brand-primary);
	}

	.main-nav .menu-account { display: none; }
}
@media (min-width: 1200px) {
	.main-nav .navbar-nav { gap: 0 22px; }
	.main-nav .navbar-nav > .nav-item > .nav-link { font-size: 1.0625rem; }
}

/* ========================================
   Mobile (under 992px): full-width panel under the header row
   ======================================== */
@media (max-width: 991.98px) {
	.main-nav {
		order: 10;
		width: 100%;
	}
	.main-nav .navbar-nav {
		flex-direction: column;
		margin: 0;
		padding: 8px 0 0;
		border-top: 1px solid var(--line);
	}
	.main-nav .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle-split) {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 48px;
		padding: 0;
		color: var(--ink);
		font-size: 1.125rem;
		font-weight: 600;
	}
	.main-nav .navbar-nav > .nav-item > .nav-link.active:not(.dropdown-toggle-split) { color: var(--brand-primary); }

	/* Children are always shown, indented; the chevron toggle is not needed */
	.main-nav .navbar-nav > .dropdown > .dropdown-toggle-split { display: none !important; }
	.main-nav .navbar-nav > .dropdown > .dropdown-menu {
		position: static !important;
		display: block;
		float: none;
		min-width: 0;
		margin: 0;
		padding: 0 0 8px 16px;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		transform: none !important;
		inset: auto !important;
	}
	.main-nav .dropdown-item {
		display: flex;
		align-items: center;
		min-height: var(--tap-min);
		padding: 0 12px;
		border-radius: var(--radius-input);
		color: var(--ink);
		font-size: 1rem;
		font-weight: 500;
		white-space: normal;
	}
	.main-nav .dropdown-item:hover,
	.main-nav .dropdown-item:focus-visible,
	.main-nav .dropdown-item.active { background: var(--primary-tint); color: var(--brand-primary); }

	/* Account links (the header's Log in button is hidden at this width) */
	.main-nav .menu-account {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 20px;
		margin: 8px 0 16px;
		padding-top: 8px;
		border-top: 1px solid var(--line);
	}
	.main-nav .menu-account a {
		display: inline-flex;
		align-items: center;
		min-height: var(--tap-min);
		font-weight: 700;
		text-decoration: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.main-nav .dropdown-menu,
	.main-nav .dropdown-toggle::after { transition: none !important; }
	.main-nav .navbar-collapse.collapsing { transition: none; }
}