/* Two blocks: a masthead that scrolls away, and a nav bar pinned to top: 0.
   Stickiness and the dropdowns are pure CSS; JS only drives the mobile panel.

   1240px is the drawer breakpoint; the nine top-level items need the room.
   Media queries can't read custom properties, so it stays a literal. */

.header {
	position: relative;
	background-color: var(--c-white);

	/* --- Masthead ----------------------------------------------------------- */

	> div {
		display: grid;
		place-items: center;

		> a {
			grid-area: 1 / 1;
			z-index: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			width: calc(var(--w) * 2);
			max-width: calc(100vw - (2 * var(--s-sm)));
			padding: var(--s-sm) 0;

			> img {
				width: 100%;
				height: auto;
			}
		}
	}

	/* --- Nav bar ------------------------------------------------------------ */

	> nav {
		position: sticky;
		z-index: 100;
		top: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		padding: 0 var(--s-sm);
		background-color: var(--c-white);
		border-top: 1px solid var(--c-br-lt);
		border-bottom: 1px solid var(--c-br-lt);

		/* Toggle — only shown at the drawer breakpoint */
		> button {
			display: none;
			width: var(--s-icon-lg);
			height: var(--s-icon-lg);
			margin: var(--s-xs) 0;
			padding: 0;
			border: 0;
			background: none;
			color: var(--c-black);
			cursor: pointer;
			transition: color var(--a-sm);

			&:hover {
				color: var(--c-blue-dk);
			}

			> i {
				display: block;
				width: 100%;
				height: 100%;
			}

			> .close,
			&[aria-expanded="true"] > .open {
				display: none;
			}

			&[aria-expanded="true"] > .close {
				display: block;
			}
		}

		a {
			display: flex;
			align-items: center;
			gap: calc(var(--s) * 0.5);
			color: var(--c-black);
			font-family: var(--f-l);
			font-size: 0.8125rem;
			font-weight: bold;
			line-height: 1;
			letter-spacing: 2px;
			text-transform: uppercase;
			text-decoration: none;
			transition: color var(--a-sm);

			&:hover {
				color: var(--c-blue-dk);
			}
		}

		/* Sized in em so a link with a chevron has the same content box as one
		   without — otherwise the two sit at different heights in the bar. */
		i {
			display: block;
			flex: none;
			width: 1em;
			height: 1em;
		}

		/* Top level */
		> ul > li {
			/* Flex so the link fills the row and every label centres identically,
			   whether or not the item owns a submenu. */
			display: flex;
			flex-direction: column;

			> a {
				flex: 1;
				padding: var(--s-sm) 0;
			}

			&.is-active > a {
				color: var(--c-blue-dk);
			}

			/* Submenu — stacked and always open in the panel */
			> ul {
				padding-left: var(--s-sm);

				> li > a {
					padding: calc(var(--s) * 1.5) 0;
					font-weight: normal;
					color: var(--c-fg-md);
				}

				> li.is-active > a {
					color: var(--c-blue-dk);
				}
			}
		}
	}

	/* --- Homepage hero ------------------------------------------------------ */

	&.mod-variant-hero > div {
		/* Artwork shares the lockup's grid cell rather than stacking, so it sits
		   behind without absolute positioning. */
		> div {
			grid-area: 1 / 1;
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center 70%;

			&:after {
				content: "";
				display: block;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.55);
			}

			@media (min-width: 768px) {
				background-attachment: fixed;
				background-position: center 65%;
			}
		}

		> a {
			min-height: 45vh;
			width: var(--w-md);

			@media (min-width: 768px) {
				min-height: 65vh;
			}
		}
	}

	/* --- Panel (mobile) ----------------------------------------------------- */

	@media (max-width: 1239px) {
		> nav > button {
			display: block;
		}

		html.btw-js & > nav > ul {
			position: fixed;
			top: var(--h-header);
			right: 0;
			width: min(320px, 85vw);
			height: calc(100% - var(--h-header));
			overflow-y: auto;
			padding: var(--s-sm);
			background-color: var(--c-white);
			border-left: 1px solid var(--c-br-lt);
			transform: translateX(100%);
			visibility: hidden;
			transition: transform var(--a-md), visibility var(--a-md);

			&.is-open {
				transform: translateX(0);
				visibility: visible;
			}
		}
	}

	/* --- Inline row (desktop) ----------------------------------------------- */

	@media (min-width: 1240px) {
		> nav {
			justify-content: center;

			> ul {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				column-gap: var(--s-sm);

				> li {
					position: relative;

					/* Dropdowns are CSS-only, so they work without JS */
					> ul {
						position: absolute;
						z-index: 10;
						top: 100%;
						left: 50%;
						transform: translateX(-50%) translateY(calc(var(--s) * -1));
						visibility: hidden;
						opacity: 0;
						min-width: max-content;
						padding: var(--s-xs) var(--s-sm);
						background-color: var(--c-bg-lt);
						border: 1px solid var(--c-br-lt);
						transition: opacity var(--a-sm), transform var(--a-sm), visibility var(--a-sm);
					}

					&:hover > ul,
					&:focus-within > ul {
						visibility: visible;
						opacity: 1;
						transform: translateX(-50%) translateY(0);
					}

					&.has-children > a > i {
						transition: transform var(--a-sm);
					}

					&:hover > a > i,
					&:focus-within > a > i {
						transform: rotate(180deg);
					}
				}
			}
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.header,
	.header * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}