/*
 * Mobile main navigation (Header.html / lib.headerMenuMain).
 *
 * The submenu toggle is a real button rendered by lib.submenuToggle, so the link stays a link
 * and the open state is exposed via aria-expanded. The arrow therefore moves from the link
 * onto the button. The career navigation ships its own toggle and is excluded here.
 *
 * The selectors carry #header #top-bar because bootstrap.min.css sets the link padding
 * with two IDs and !important.
 */

@media only screen and (max-width: 767px) {
	header:not(.career) #header #top-bar .nav li.hassubnav > a,
	header:not(.career) #header #top-bar .nav li.hassubnav.mobileopen > a {
		background-image: none;
		/* keeps long titles out of the button area */
		padding-right: 58px !important;
	}

	/* bootstrap.min.css lifts the link to z-index 10000 without a media query, for the desktop tab
	   look (.nav .open > a, and .<unit> .nav > li > a.active:hover). mnv_custom.js adds .open on
	   mouseenter on every pointer device, so in this layout the link would paint over the
	   absolutely positioned toggle and swallow its icon. Neutralise the lift, the mobile rows do
	   not overlap anything. */
	header:not(.career) #header #top-bar .nav li > a {
		z-index: auto;
	}

	/* The list items are display:inline while their link is display:block, so the inline box breaks
	   into fragments. Gecko and WebKit then position the absolute toggle against the first, empty
	   fragment (width 0), pushing it to x = -48 and out of view; Blink uses the full box. Making the
	   item a block gives one unambiguous containing block. Renders identically, the link already
	   fills the row. */
	header:not(.career) #header #top-bar .nav li {
		display: block;
	}

	#header #top-bar .nav .submenu-toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 48px;
		height: 40px;
		margin: 0;
		padding: 0;
		border: 0;
		/* Hardening, not the cause of anything seen so far: normalize.css inside bootstrap.min.css
		   sets -webkit-appearance: button, and WebKit can then paint the native control instead of
		   a background-image. PhotoSwipe in this project opts out the same way. */
		-webkit-appearance: none;
		appearance: none;
		border-radius: 0;
		background-color: transparent;
		background-image: url("../../Images/Framework/icon_arrow_open_gray.png");
		background-repeat: no-repeat;
		background-position: center center;
		cursor: pointer;
	}

	/* Submenu rows are lower than first level rows, the button follows the link box. */
	#header #top-bar .nav ul li > .submenu-toggle {
		height: 34px;
	}

	/* Compensate the border-top of the deeper submenu links. */
	#header #top-bar .nav ul ul li > .submenu-toggle {
		top: 1px;
	}

	#header #top-bar .nav li.mobileopen > .submenu-toggle {
		background-image: url("../../Images/Framework/icon_arrow_close_gray.png");
	}

	#header #top-bar .nav .submenu-toggle:focus-visible {
		outline: 2px solid #444444;
		outline-offset: -3px;
	}
}

/* Desktop uses the mega menu, so the toggle must not be visible or focusable. */
@media only screen and (min-width: 768px) {
	#header #top-bar .nav .submenu-toggle {
		display: none;
	}
}