/* ==========================================================================
   PRIMARY NAV DROPDOWN
   Submenu behaviour for any primary-nav item that has children.

   Open state is driven entirely by the .is-dd-open class set in
   assets/acme-nav-dropdown.js, so hover, focus, keyboard and touch cannot
   contradict each other or the aria-expanded value. The closed state is
   unconditional CSS and does not wait for script, so the submenu cannot
   render open between first paint and script execution.

   All selectors are new. No existing rule is modified. Two blocks
   deliberately out-specify existing rules and are marked inline.
   ========================================================================== */

/* Positioning context for the panel. */
.site-header .primary-nav li.menu-item-has-children {
	position: relative;
}

/* ==========================================================================
   INDICATOR
   The theme reuses one ::after on nav links for both the sliding hover
   underline (acme-mockup.css) and a border drawn caret (style.css:264), so the
   caret rendered as a dash and the underline could not exist on a parent item
   at all. These rules give the underline that pseudo element back and put the
   chevron on the list item's own, which no rule in either theme targets
   (measured: li::before and li::after both compute content:none).
   ========================================================================== */

/* Hand ::after back to the underline on parent items. This declares ONLY the
   caret properties from style.css:264 (0,3,2) and nothing else, so transform,
   transform-origin, left, right, bottom, background and content all still come
   from the underline rule and behave as they do on any other nav link. This
   selector is (0,3,3), so the win does not depend on load order. The 2px
   mirrors the underline rule's own height in acme-mockup.css. */
.site-header .primary-nav li.menu-item-has-children > a::after {
	position: absolute;
	top: auto;
	width: auto;
	height: 2px;
	margin-left: 0;
	border: 0;
}

/* The old caret occupied 14px of inline space (8px box plus 6px margin), so
   reserving the same 14px keeps every nav item at the x it had before. */
@media (min-width: 1101px) {
	.site-header .primary-nav li.menu-item-has-children > a {
		padding-right: 28px;
	}
}

/* The chevron. CSS drawn from two borders, no icon font and no request.
   The colour is set on the list item rather than the pseudo element so
   currentColor tracks it. The link sets its own colour, so this reaches the
   chevron and nothing else; measured, the list item would otherwise inherit
   #333 and the chevron would not match the nav text at either breakpoint. */
.site-header .primary-nav li.menu-item-has-children {
	color: var(--color-navy, #060143);
}

.site-header .primary-nav li.menu-item-has-children::after {
	content: "";
	position: absolute;
	right: 13px;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center center;
	transition: transform 0.2s ease;
	pointer-events: none;
}

/* Open state follows the expanded state, not hover. Kept as two separate rules
   on purpose: an unsupported :has() would invalidate a whole selector list, and
   the class rule has to survive that. */
.site-header .primary-nav li.menu-item-has-children.is-dd-open::after {
	transform: rotate(-135deg);
}

.site-header .primary-nav li.menu-item-has-children:has(> a[aria-expanded="true"])::after {
	transform: rotate(-135deg);
}

/* ==========================================================================
   DESKTOP, panel overlays the page, no reflow
   ========================================================================== */
@media (min-width: 1101px) {

	.site-header .primary-nav .sub-menu {
		display: block;
		position: absolute;
		top: calc(100% + 20px);
		left: 50%;
		transform: translateX(-50%) translateY(-6px);
		min-width: 208px;
		margin: 0;
		padding: 8px;
		list-style: none;
		background: var(--color-white, #fff);
		border-radius: 10px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		z-index: 1001;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	/* Keeps the pointer inside the item while it crosses the gap between the
	   pill and the panel, so the panel does not close in transit. */
	.site-header .primary-nav .sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -20px;
		height: 20px;
	}

	.site-header .primary-nav li.menu-item-has-children.is-dd-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
	}

	.site-header .primary-nav .sub-menu li {
		width: 100%;
		margin: 0;
	}

	.site-header .primary-nav .sub-menu a {
		display: block;
		width: 100%;
		padding: 10px 14px;
		border-radius: 6px;
		color: var(--color-navy, #0b0f2b);
		white-space: nowrap;
		text-align: left;
	}

	/* The sliding underline is wrong on a stacked panel. */
	.site-header .primary-nav .sub-menu a::after {
		content: none;
	}

	.site-header .primary-nav .sub-menu a:hover,
	.site-header .primary-nav .sub-menu a:focus-visible {
		background: rgba(9, 0, 127, 0.07);
		color: var(--color-navy, #0b0f2b);
	}

	.site-header .primary-nav .sub-menu a:focus-visible {
		outline: 2px solid var(--color-navy, #0b0f2b);
		outline-offset: -2px;
	}
}

/* ==========================================================================
   MOBILE, child items collapse inline inside the existing full screen panel
   ========================================================================== */
@media (max-width: 1100px) {

	html body .site-header .primary-nav .sub-menu {
		display: block;
		position: static;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		opacity: 0;
		transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0s linear 0.28s;
	}

	html body .site-header .primary-nav li.menu-item-has-children.is-dd-open > .sub-menu {
		max-height: 60vh;
		visibility: visible;
		opacity: 1;
		transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0s;
	}

	/* OUT-SPECIFIES html body .site-header .primary-nav .primary-nav__menu li
	   (0,4,3) in style.css, which puts a bottom border on every item in the
	   mobile panel. This is (0,5,3) and reaches submenu items only. */
	html body .site-header .primary-nav .primary-nav__menu .sub-menu li {
		width: 100%;
		border-bottom: none;
		margin: 0;
	}

	html body .site-header .primary-nav .primary-nav__menu .sub-menu a {
		display: block;
		width: 100%;
		padding: 14px 8px 14px 28px;
		opacity: 0.85;
	}

	html body .site-header .primary-nav .primary-nav__menu .sub-menu a::after {
		content: none;
	}

	html body .site-header .primary-nav .primary-nav__menu .sub-menu a:hover,
	html body .site-header .primary-nav .primary-nav__menu .sub-menu a:focus-visible {
		opacity: 1;
	}

	/* Links go white in the mobile panel, so the chevron follows. */
	.site-header .primary-nav li.menu-item-has-children {
		color: var(--color-white, #FFFFFF);
	}

	/* The row is full width here, so the chevron sits at its right edge. The
	   offset is the closed row (16px padding + 27px line + 16px padding = 59)
	   halved, less half the 6px box. Anchored to the top rather than centred,
	   because this list item grows when the accordion opens. */
	.site-header .primary-nav li.menu-item-has-children::after {
		right: 12px;
		top: 26.5px;
		bottom: auto;
		margin-top: 0;
		margin-bottom: 0;
	}
}

/* Covers this file's own animation only. The underline's transition belongs to
   the existing rule and is left exactly as it is. */
@media (prefers-reduced-motion: reduce) {
	.site-header .primary-nav .sub-menu,
	.site-header .primary-nav li.menu-item-has-children::after {
		transition: none;
	}
}