.site-header {
	position: sticky;
	top: 0;

	z-index: 100;

	display: grid;
	grid-template-columns: var(--layout);
	gap: var(--gutter);

	/* center mast-head the same way inner-column is centered in page content */
	mast-head {
		grid-column: 1 / -1;

		@media (width >= 1000px) {
			grid-column: 2 / -2;
		}
	}

	inner-column {
		padding: 0;
		a {
			padding: 1rem;
		}
	}
}

/* Skip link — the first item in .site-menu. Only visible when focused.
   Collapse both the link AND its parent <li> when not focused, so it
   doesn't leave a phantom gap between items. */
.site-menu li:has(> .skip-link) {
	width: 0;
	overflow: hidden;

	&:focus-within {
		width: auto;
		overflow: visible;
	}
}

.skip-link {
	display: inline-block;
	white-space: nowrap;

	&:not(:focus) {
		/* visually hidden but still focusable via keyboard */
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		border: 0;
	}
}

/* Admin attention indicator — added to the admin link when admin_has_attention()
   returns true (pending reviews, confirmed office-hour RSVPs, etc.). The link
   wraps the insignia dot rendered by peInsignia(). */

.site-menu a.has-attention {
	color: var(--accent);
	&:focus-visible {
		background-color: var(--big-accent);
		color: var(--fill-primary);
	}
}

/* Site/user menu link presentation. Flat across viewports — no fold-up
   or hamburger for v3. Links and the toolbox trigger render as flex
   centers so they vertically fill the masthead row (stretched by the
   flex parents) without uniform gaps above/below the text. */
.site-menu a,
.user-menu a,
.user-menu .settings-trigger {
	display: flex;
	align-items: center;
	padding: 1rem 1.25rem;
	text-decoration: none;
	color: var(--accent);
	background: transparent;
	border: 0;
	font: inherit;
	cursor: pointer;
}

/* Beat styles/components/toolbox.css for the masthead instance of the
   trigger. toolbox.css loads after site-header.css and ties on the
   `button.toolbox-trigger` rules, so we bump specificity here to keep
   the trigger reading identically to the surrounding nav links. */
.user-menu button.settings-trigger {
	font-size: inherit;
	line-height: inherit;
}

.user-menu button.settings-trigger:focus-visible {
	background-color: var(--big-accent);
	color: var(--fill-primary);
	outline: 0;
	border-radius: 0;
}

/*
	a:focus:not(:focus-visible) {
	  outline: none;
	}
*/

mast-head {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;

	background-color: var(--fill-primary);

	box-shadow: 0 3px 3px 2px rgb(0 0 0 / .01);

	.site-menu, .user-menu {
		display: flex;

		.item-list {
			display: flex;
			flex-direction: row;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		/* `<li class='item'>` stretches its child <a>/<button> to the
		   full masthead height so the links sit edge-to-edge with no
		   uniform space above or below them. */
		.item {
			display: flex;
		}
	}

	.user-menu {

	}

	a, summary, .settings-trigger {
		&:focus {
			outline: 0;
		}
		&:focus-visible {
			background-color: var(--big-accent);
			color: var(--fill-primary);
			outline: 0;
		}
	}

	@container (width > 600px) {

	}
}