/**
 * ALLOut Main Top Area — portal area menu.
 *
 * Responsive in its own way, and deliberately NOT the header's way.
 *
 * The header collapses to a burger because its nav shares one line with a logo, search, two CTAs
 * and a language switcher. This menu owns its whole strip, and its items are frequently in-page
 * anchors — so a burger is the wrong answer twice over: it hides where you are on the page behind
 * a closed panel, and it costs two taps to reach a section you can see. Instead the strip scrolls
 * horizontally, every item stays reachable at every width, and the active one is scrolled into
 * view for you.
 *
 * @author ALLOut Security
 * @link   https://alloutsecurity.com
 */

.aomta-pm {
	--pm-fg: #001e47;
	--pm-fg-muted: #5b6880;
	--pm-accent: #e11d2a;
	--pm-bg: transparent;
	--pm-hover-bg: rgba(8, 22, 52, .05);
	--pm-active-bg: rgba(225, 29, 42, .08);
	--pm-border: rgba(8, 22, 52, .12);
	--pm-radius: 10px;

	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
	background: var(--pm-bg);
	font-family: inherit;
}

/* The scroller. overflow-x here and nowhere else, so the dropdowns below can escape it. */
.aomta-pm__scroll {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	/* Snap so a swipe lands on an item rather than halfway through a label. */
	scroll-snap-type: x proximity;
}
.aomta-pm__scroll::-webkit-scrollbar { display: none; }

.aomta-pm__list {
	display: flex;
	align-items: stretch;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none !important;
}

.aomta-pm__item {
	position: relative;
	flex: 0 0 auto;
	scroll-snap-align: start;
	list-style: none !important;
}

.aomta-pm__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 14px;
	border-radius: var(--pm-radius);
	color: var(--pm-fg);
	font-weight: 650;
	font-size: 14.5px;
	line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.aomta-pm__link:hover,
.aomta-pm__link:focus-visible { background: var(--pm-hover-bg); color: var(--pm-accent); }

.aomta-pm__ico { display: inline-flex; flex: none; opacity: .8; }
.aomta-pm__link:hover .aomta-pm__ico { opacity: 1; }

.aomta-pm__chev { flex: none; opacity: .5; transition: transform .2s ease; }
.aomta-pm__item.is-open > .aomta-pm__link .aomta-pm__chev { transform: rotate(180deg); }

/* Current item: the page you are on, or the section you are looking at. The underline is drawn
   inside the padding box so it lines up across items of different label lengths. */
.aomta-pm__link.is-current {
	color: var(--pm-accent);
	background: var(--pm-active-bg);
}
.aomta-pm__link.is-current .aomta-pm__ico { opacity: 1; }

/* ----------------------------------------------------------------- submenus */

.aomta-pm__sub {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 60;
	min-width: 240px;
	max-width: min(360px, calc(100vw - 24px));
	margin: 0;
	padding: 6px;
	list-style: none !important;
	background: #fff;
	border: 1px solid var(--pm-border);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(8, 22, 52, .16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.aomta-pm__item.is-open > .aomta-pm__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* Opens leftward when it would otherwise run off the right edge. Set by the JS. */
.aomta-pm__item.is-flipped > .aomta-pm__sub { left: auto; right: 0; }

.aomta-pm__sub li { margin: 0; list-style: none !important; }

.aomta-pm__sublink {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 8px;
	color: var(--pm-fg);
	text-decoration: none !important;
	transition: background .14s ease;
}
.aomta-pm__sublink:hover,
.aomta-pm__sublink:focus-visible { background: var(--pm-hover-bg); }
.aomta-pm__sublink:hover .aomta-pm__label { color: var(--pm-accent); }
.aomta-pm__sublink.is-current .aomta-pm__label { color: var(--pm-accent); }

.aomta-pm__subtext { display: flex; flex-direction: column; min-width: 0; }
.aomta-pm__sub .aomta-pm__label { font-weight: 650; font-size: 14px; line-height: 1.3; }
.aomta-pm__desc {
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--pm-fg-muted);
	white-space: normal;
}

/* -------------------------------------------------------------- page arrows */

/* Shown by the JS only while the strip actually overflows — a nav that fits has no use for them,
   and rendering them anyway would take space from the items on the narrowest screens. */
.aomta-pm__page {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--pm-border);
	border-radius: 50%;
	background: #fff;
	color: var(--pm-fg);
	cursor: pointer;
	transition: background .14s ease, color .14s ease, opacity .14s ease;
}
.aomta-pm__page:hover { background: var(--pm-hover-bg); color: var(--pm-accent); }
.aomta-pm__page[hidden] { display: none; }
.aomta-pm__page:disabled { opacity: .3; cursor: default; }

/* Fades at the edges so a cut-off item reads as "there is more", not as a broken layout.
   Pointer-events off: they sit over the scroller and must not eat taps. */
.aomta-pm.is-overflowing .aomta-pm__scroll { position: relative; }
.aomta-pm.is-overflowing::before,
.aomta-pm.is-overflowing::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 28px;
	pointer-events: none;
	z-index: 5;
	opacity: 0;
	transition: opacity .18s ease;
}
.aomta-pm.is-overflowing::before {
	left: 34px;
	background: linear-gradient(to right, var(--pm-fade, #fff), transparent);
}
.aomta-pm.is-overflowing::after {
	right: 34px;
	background: linear-gradient(to left, var(--pm-fade, #fff), transparent);
}
.aomta-pm.can-prev::before { opacity: 1; }
.aomta-pm.can-next::after { opacity: 1; }

/* ------------------------------------------------------------------ narrow */

@media (max-width: 782px) {
	/* The arrows are a pointer affordance. On touch the strip is swiped directly, and two
	   permanent buttons would only take room from the items. */
	.aomta-pm__page { display: none; }
	.aomta-pm.is-overflowing::before { left: 0; }
	.aomta-pm.is-overflowing::after { right: 0; }

	.aomta-pm__link { padding: 10px 12px; font-size: 14px; }

	/* A dropdown pinned to its item would hang off the side of a strip that is itself scrolled.
	   Full width, anchored to the nav, is the only version that stays on screen. */
	.aomta-pm__sub {
		position: fixed;
		left: 12px;
		right: 12px;
		top: auto;
		min-width: 0;
		max-width: none;
	}
	.aomta-pm__item.is-flipped > .aomta-pm__sub { left: 12px; right: 12px; }
}

/* Long labels get less room before they are allowed to sit closer together. */
@media (max-width: 480px) {
	.aomta-pm__link { gap: 6px; padding: 10px; font-size: 13.5px; }
	.aomta-pm__list { gap: 0; }
}

/* ============================================================ the tabs variant */

/*
 * The 2026 portal-navigation redesign, applied to the PARTNERS menu only (Portal_Menu::variant()).
 *
 * A 64px white bar of tabs, and every piece of feedback is carried by the TEXT COLOUR alone — no
 * fills, no pills, no underline indicator, no focus ring. Navy at rest, red when you hover it,
 * red while it is the page you are on. The first cut of this design used a red underline and grey
 * hover fills; the revision took all of it out, and the restraint is the point, so anything that
 * paints a box behind a menu item is a regression rather than a refinement.
 *
 * The sign-out action is still set apart on the right past a hairline divider, because it is the
 * one item in the bar that ENDS the session rather than navigating within it.
 *
 * Below 920px the row collapses to a "Menu" bar and a full-width drawer. That is the opposite of
 * the strip above, and deliberately so: this menu's items are page-level destinations, where a
 * drawer is the familiar answer. The strip exists for menus whose items are in-page anchors, and
 * that trade-off is written up at the top of this file.
 */

.aomta-pm--tabs {
	/* Tokens from the design handoff, kept verbatim so a change to the spec is a change here. */
	--pm-navy-600: #1a2a52;
	--pm-navy-700: #14224a;
	--pm-red-600: #d11f2c;
	--pm-red-700: #ae1822;
	--pm-gray-100: #eff1f6;
	--pm-gray-200: #e3e7ef;

	/* Feed the shared parts (fades, arrows, dropdowns) from the same palette. The grey hover fill
	   survives ONLY on those: they are icon-only controls, not text menu items. */
	--pm-fg: var(--pm-navy-700);
	--pm-accent: var(--pm-red-600);
	--pm-hover-bg: var(--pm-gray-100);
	--pm-border: var(--pm-gray-200);

	height: 64px;
	padding: 0 16px;
	gap: 0;
	background: #fff;
}

/*
 * Centre the bar and cap it at the site's content width.
 *
 * Written with the `nav` qualifier it was signed off with, so it lands at the same specificity it
 * was tested at rather than a weaker one that some theme rule could outrank.
 *
 * This is a MAX width, so it does nothing at all below 1252px — every narrow layout, the 920px
 * collapse and the drawer are reached by viewports this rule cannot affect. The auto margins are
 * likewise inert once the bar is the full width of its container. Nothing responsive changes.
 */
nav.aomta-pm.aomta-pm--tabs {
	max-width: 1252px;
	margin: 0 auto 10px auto;
}

.aomta-pm--tabs .aomta-pm__bar { display: none; }
.aomta-pm--tabs .aomta-pm__list { width: 100%; align-items: center; gap: 2px; }

/* 18px per the handoff. Sized here rather than in the renderer's width/height attributes so the
   strip variant keeps its own 17px and the two do not have to agree. The icon takes the label's
   colour with it — stroke is currentColor, so there is nothing else to switch. */
.aomta-pm--tabs .aomta-pm__ico { opacity: 1; }
.aomta-pm--tabs .aomta-pm__ico svg { width: 18px; height: 18px; }

.aomta-pm--tabs .aomta-pm__link {
	padding: 10px 14px 12px;
	border-radius: 8px;
	background: transparent !important;
	color: var(--pm-navy-700) !important;
	font-weight: 700;
	font-size: 15px;
	transition: color .15s ease;
}

.aomta-pm--tabs .aomta-pm__link:hover { background: transparent !important; color: var(--pm-red-600) !important; }
.aomta-pm--tabs .aomta-pm__link.is-current { background: transparent !important; color: var(--pm-red-600) !important; }

/*
 * Focus: the handoff removes the ring, and its own a11y note asks production to put a visible
 * keyboard indicator back. This is that indicator — an underline, on :focus-visible only, so a
 * mouse user never sees it and a keyboard user is never lost. Nothing here paints a box.
 */
.aomta-pm--tabs .aomta-pm__link:focus-visible {
	outline: none;
	background: transparent !important;
	color: var(--pm-red-600) !important;
	text-decoration: underline !important;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

/* No pressed state. The first handoff specified a 1px nudge and a grey fill on :active and it was
   rejected in review; the revision drops the fills anyway. Do not reinstate either. */

/* ---------------------------------------------------- the right-hand end group */

/*
 * The sign-out group: a divider, then the action.
 *
 * It sits directly after the last tab rather than being flung to the right-hand edge. This
 * deliberately drops the handoff's `flex:1` spacer (which was margin-left:auto here) — with the
 * bar now capped at 1252px and centred, pushing the action to the far edge left it stranded a
 * long way from the menu it belongs to.
 *
 * An item joins this group by carrying the CSS class aomta-pm-end (or aomta-pm-logout), or by
 * being recognised as the sign-out link. See Portal_Menu::is_logout().
 */
.aomta-pm--tabs .aomta-pm__item--end { display: flex; align-items: center; }
.aomta-pm--tabs .aomta-pm__item--end::before {
	content: "";
	flex: none;
	width: 1px;
	height: 26px;
	margin: 0 10px;
	background: var(--pm-gray-200);
}
/* Consecutive items in the group sit behind one divider, not a row of dividers. */
.aomta-pm--tabs .aomta-pm__item--end + .aomta-pm__item--end::before { display: none; }

/* A touch darker than the tabs at rest, and it warms the same way on hover. */
.aomta-pm--tabs .aomta-pm__item--logout > .aomta-pm__link {
	padding: 10px 16px;
	color: var(--pm-navy-600) !important;
}
.aomta-pm--tabs .aomta-pm__item--logout > .aomta-pm__link:hover {
	background: transparent !important;
	color: var(--pm-red-600) !important;
}
.aomta-pm--tabs .aomta-pm__item--logout > .aomta-pm__link:focus-visible {
	background: transparent !important;
	color: var(--pm-red-600) !important;
}

/* ------------------------------------------------------- the bar and its drawer */

.aomta-pm__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 919px) {
	.aomta-pm--tabs {
		display: block;
		position: relative;
		height: auto;
		padding: 0;
	}

	.aomta-pm--tabs .aomta-pm__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 56px;
		padding: 0 18px;
		background: #fff;
	}
	.aomta-pm--tabs .aomta-pm__barlabel {
		font-weight: 700;
		font-size: 15px;
		color: var(--pm-navy-700);
	}
	.aomta-pm--tabs .aomta-pm__toggle {
		flex: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 1px solid var(--pm-gray-200);
		border-radius: 10px;
		background: #fff;
		color: var(--pm-navy-700);
		cursor: pointer;
		transition: background .15s ease;
	}
	.aomta-pm--tabs .aomta-pm__toggle:hover { background: var(--pm-gray-100); }
	.aomta-pm--tabs .aomta-pm__toggle-close { display: none; }
	.aomta-pm--tabs.is-drawer-open .aomta-pm__toggle-open { display: none; }
	.aomta-pm--tabs.is-drawer-open .aomta-pm__toggle-close { display: block; }

	/* The strip's paging arrows and edge fades belong to a strip. There isn't one here. */
	.aomta-pm--tabs .aomta-pm__page { display: none; }
	.aomta-pm--tabs.is-overflowing::before,
	.aomta-pm--tabs.is-overflowing::after { display: none; }

	/*
	 * display:none rather than a height animation. The drawer holds real links, and a collapsed
	 * panel that is merely zero-height still puts every one of them in the tab order.
	 */
	.aomta-pm--tabs .aomta-pm__scroll {
		display: none;
		overflow: visible;
		padding: 8px;
		border-top: 1px solid var(--pm-gray-200);
		background: #fff;
	}
	.aomta-pm--tabs.is-drawer-open .aomta-pm__scroll { display: block; }

	.aomta-pm--tabs .aomta-pm__list { flex-direction: column; align-items: stretch; gap: 0; }
	.aomta-pm--tabs .aomta-pm__item { width: 100%; display: block; }

	.aomta-pm--tabs .aomta-pm__link {
		display: flex;
		gap: 12px;
		padding: 14px;
		border-radius: 10px;
		font-size: 15.5px;
	}
	/* Same rule as the bar: the row's text goes red, and nothing is painted behind it. */
	.aomta-pm--tabs .aomta-pm__link.is-current { background: transparent !important; color: var(--pm-red-600) !important; }
	.aomta-pm--tabs .aomta-pm__chev { margin-left: auto; }

	/*
	 * The pinned group has no right-hand edge to sit against, so the divider lies down — as a
	 * pseudo-element rather than a border on the item, which is what keeps it inset 12px from the
	 * drawer's edges while the row it separates stays full width.
	 */
	.aomta-pm--tabs .aomta-pm__item--end { display: block; margin: 0; }
	.aomta-pm--tabs .aomta-pm__item--end::before {
		content: "";
		display: block;
		width: auto;
		height: 1px;
		margin: 6px 12px;
		background: var(--pm-gray-200);
	}
	.aomta-pm--tabs .aomta-pm__item--end + .aomta-pm__item--end::before { display: none; }

	/* The sign-out row reads red from the start here, and darkens rather than warms on hover. */
	.aomta-pm--tabs .aomta-pm__item--logout > .aomta-pm__link { padding: 14px; color: var(--pm-red-600) !important; }
	.aomta-pm--tabs .aomta-pm__item--logout > .aomta-pm__link:hover { background: transparent !important; color: var(--pm-red-700) !important; }
	.aomta-pm--tabs .aomta-pm__item--logout > .aomta-pm__link:focus-visible { color: var(--pm-red-700) !important; }

	/*
	 * Submenus open in place inside the drawer. The strip's floating panel is fixed-position so it
	 * can escape a horizontal scroller — there is no scroller here, and a panel that floats over
	 * the list it belongs to would cover the items either side of it.
	 */
	.aomta-pm--tabs .aomta-pm__sub {
		position: static;
		display: none;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 0 0 4px 26px;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.aomta-pm--tabs .aomta-pm__item.is-open > .aomta-pm__sub { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.aomta-pm__scroll { scroll-behavior: auto; }
	.aomta-pm__sub { transition: none; }
	.aomta-pm__chev { transition: none; }
	.aomta-pm--tabs .aomta-pm__link { transition: none; }
}

/* ------------------------------------------------------------- dark surface */

/*
 * OPT-IN, and never automatic.
 *
 * This shipped as @media (prefers-color-scheme: dark), which was simply wrong: that query reports
 * the VISITOR'S OPERATING SYSTEM, not the colour of the strip the menu is sitting on. The portal
 * sub-header is white, so every visitor with dark mode switched on got #eef1f8 text on white —
 * i.e. an invisible grey menu — while the site itself stayed light around it. The browser cannot
 * know what is behind this nav; only the caller can.
 *
 * So: the default is the brand navy on a light strip, always. Put the menu on a dark surface and
 * ask for it explicitly — [allout_mta_portal_menu class="aomta-pm--on-dark"], or the same via
 * allout_mta_render_portal_menu()'s class argument.
 */
.aomta-pm--on-dark {
	--pm-fg: #eef1f8;
	--pm-fg-muted: #a9b3c7;
	--pm-hover-bg: rgba(255, 255, 255, .10);
	--pm-active-bg: rgba(255, 255, 255, .14);
	--pm-border: rgba(255, 255, 255, .18);
	--pm-accent: #ff6b74;
	--pm-fade: #0a1a3a;
}
.aomta-pm--on-dark .aomta-pm__sub { background: #14224a; }
.aomta-pm--on-dark .aomta-pm__page { background: transparent; }