/**
 * AGD Style Kit — mobile navigation.
 *
 * Geometry and breakpoint corrections for the theme's drawer. Everything here
 * either overrides a specific rule in the theme or adds an element the theme
 * does not have; nothing is decoration for its own sake.
 */

/* ------------------------------------------------------------------
 * Breakpoint
 *
 * The theme swaps to the hamburger below 1300px, which means a 1280-wide
 * laptop gets a phone menu. Moving it to 1024px keeps the full menu on
 * laptops and small desktops, where there is ample room for seven items,
 * and leaves the drawer to tablets and phones where it belongs.
 * ---------------------------------------------------------------- */

@media (min-width: 1024px) {

	/* Undo the drawer the theme still applies between 1024 and 1299. */
	.site-header .primary-navigation {
		display: block;
		position: static;
		inset: auto;
		width: auto;
		height: auto;
		max-height: none;
		padding: 0;
		background: none;
		box-shadow: none;
		transform: none;
		overflow: visible;
	}

	.site-header .menu-toggle,
	.agdsk-nav-backdrop,
	.agdsk-sub-toggle {
		display: none !important;
	}
}

@media (max-width: 1023px) {

	.site-header .primary-navigation {
		display: block;

		/* 100vh on a phone is the viewport with the browser UI hidden, so a
		   drawer sized to it is taller than the screen and its last item sits
		   below the fold — reachable only by scrolling a drawer most people
		   will not think to scroll. 100dvh is the height actually on screen.
		   The vh line stays as the fallback for older browsers. */
		height: 100vh;
		height: 100dvh;

		/* Measured from the real header rather than assumed, so the first menu
		   item clears it whether or not the admin bar is present. */
		padding-top: calc(var(--agdsk-header-h, 90px) + 12px);

		/* The home indicator on a modern iPhone sits over the bottom of the
		   drawer; without this the last item is under it. */
		padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));

		/* Stops a flick at the end of the menu from scrolling the page behind
		   it, which reads as the drawer "jumping". */
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;

		z-index: 1000;
	}

	/* The toggle is the way out, so it has to stay on top of the thing it
	   opened. It sits in the header at the right edge and the drawer is fixed
	   to that same edge, so without this the drawer covers the only control
	   that closes it — which, with Escape and tap-outside both doing nothing,
	   is a menu with no exit. The theme already animates the bars into a cross
	   when aria-expanded flips, so lifting it is all that is needed; a second
	   close button would land on top of this one. */
	.site-header .menu-toggle {
		position: relative;
		z-index: 1002;
		background: #FFFFFF;
	}

	/* Sits inside the header, in the same stacking context as the drawer, so
	   these numbers are compared against each other rather than against the
	   header's own z-index. See the note in nav.js. */
	.agdsk-nav-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(15, 20, 28, .55);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility .25s;
		z-index: 998;
	}
	.agdsk-nav-backdrop.is-visible {
		opacity: 1;
		visibility: visible;
	}

	/* Belt and braces on the scroll lock: the class is added at the same
	   moment the body is pinned, so if a browser ever honours one and not the
	   other the page still stays put. */
	body.agdsk-nav-locked {
		overflow: hidden;
	}


	/* ---- submenu disclosure ---- */

	.primary-menu .menu-item-has-children {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.primary-menu .menu-item-has-children > a {
		flex: 1 1 auto;
	}

	.agdsk-sub-toggle {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;

		/* 44px square: a chevron that shares a row with a link has to be big
		   enough to hit without hitting the link instead. */
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		color: #4B5563;
		background: transparent;
		border: 0;
		cursor: pointer;
		transition: transform .2s ease;
	}
	.menu-item-has-children.is-open > .agdsk-sub-toggle {
		transform: rotate(180deg);
		color: #1C75BC;
	}

	.primary-menu .menu-item-has-children > .sub-menu {
		flex: 1 0 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header .primary-navigation,
	.agdsk-nav-backdrop,
	.agdsk-sub-toggle {
		transition: none !important;
	}
}