/* ==========================================================================
   The WAT? submenu
   --------------------------------------------------------------------------
   One item in the header carries children, and this is the only file that
   knows about them. Nothing here restyles a link, a colour, a size or a
   spacing the header already owns - the children inherit the header's own
   link rules, so the panel reads as the same navigation, set smaller.

   It opens on hover and on keyboard focus, and it does so in CSS. There is no
   script: :focus-within is the browser's own answer to "is the keyboard inside
   this item", so the panel opens for a tab as readily as for a pointer, and it
   cannot get stuck open because a script missed an event.

   Below the header's 900px breakpoint the navigation is already a panel the
   visitor has opened deliberately, and there is no hover to open anything
   with. There the children are simply shown, indented under WAT?, so a touch
   visitor reaches them without a second disclosure to discover.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop and up
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {

	.nsn-nav .menu-item-has-children {
		position: relative;
	}

	.nsn-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 20;

		/*
		 * Centred under its parent, and pulled up so the panel begins level
		 * with the bottom of the header's band rather than against the label.
		 */
		transform: translateX(-50%);
		min-width: max-content;
		margin: 0;
		padding: clamp(0.9rem, 1.6vh, 1.4rem) clamp(1.1rem, 1.8vw, 1.8rem);

		list-style: none;
		text-align: left;

		background: var(--nsn-ink);
		border: 1px solid var(--nsn-rule);

		/*
		 * Closed. Hidden from assistive tech and from the pointer as well as
		 * from the eye, so a closed panel is not a set of invisible links the
		 * keyboard can land in.
		 */
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateX(-50%) translateY(-6px);
		transition:
			opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 220ms;
	}

	/*
	 * A bridge across the gap between the label and the panel, so the pointer
	 * can travel down without passing over dead space and closing it.
	 */
	.nsn-nav .menu-item-has-children > a::before {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: clamp(0.6rem, 1.4vh, 1.1rem);
	}

	.nsn-nav .menu-item-has-children:hover > .sub-menu,
	.nsn-nav .menu-item-has-children:focus-within > .sub-menu {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
		transition-delay: 0s, 0s, 0s;
	}

	.nsn-nav .sub-menu .menu-item + .menu-item {
		margin-top: clamp(0.55rem, 1.1vh, 0.9rem);
	}

	/*
	 * The children are set a step smaller than their parent. Everything else
	 * about them - face, tracking, colour, the underline on hover - is the
	 * header's, untouched.
	 */
	.nsn-nav .sub-menu .menu-item > a {
		display: block;
		white-space: nowrap;
		font-size: var(--nsn-step-xs);
	}
}

/* --------------------------------------------------------------------------
   The header's panel, below 900px

   No hover here, and the panel is already open by the visitor's own choice, so
   the children are shown rather than hidden behind a second gesture.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

	.nsn-nav .sub-menu {
		margin: clamp(0.6rem, 1.4vh, 1rem) 0 0;
		padding: 0;
		list-style: none;
	}

	.nsn-nav .sub-menu .menu-item + .menu-item {
		margin-top: clamp(0.5rem, 1.2vh, 0.85rem);
	}

	.nsn-nav .sub-menu .menu-item > a {
		font-size: var(--nsn-step-xs);
	}
}