/*
 * Fixes layered on top of the original rga2017 stylesheet.
 * Loaded after assets/css/style.css.
 */

/* ---------------------------------------------------------------------------
 * Sticky header
 *
 * The original rule was `.header { position: fixed }` with no `top`, paired
 * with `.page { padding-top: 80px }` to reserve the space it no longer
 * occupied. Two separate numbers describing one height is what broke: any
 * change above the header (the WordPress admin bar) or to the header's own
 * height left a strip the page content scrolled through.
 *
 * `position: sticky` keeps the header in normal flow, so it reserves its own
 * space and there is no band above it for content to show through. Nothing
 * needs to be kept in sync.
 * ------------------------------------------------------------------------ */

.header {
	position: sticky;
	top: 0;
	width: auto;
}

/* The original padding existed only to compensate for the fixed header. */
.page {
	padding-top: 0;
}

/* On desktop the admin bar is fixed over the top 32px, so the header parks
   just below it. */
@media screen and (min-width: 783px) {
	body.admin-bar .header {
		top: 32px;
	}
}

/* Below 783px WordPress stops fixing the admin bar and lets it scroll away,
   so the header must stick to 0 — offsetting it here is what left a 46px
   gap on phones. */

/* Anchor targets must clear the stuck header. */
[id]:not(body) {
	scroll-margin-top: 80px;
}

/* ---------------------------------------------------------------------------
 * Navigation breakpoint
 *
 * The original swaps the burger for the full nav at 940px, but the six items
 * plus the logo need ~960px before a scrollbar is accounted for. Between
 * roughly 940px and 1000px the nav therefore wrapped onto a second row and
 * the header doubled to 160px tall.
 *
 * This was always wrong; with the old fixed header it was just less visible,
 * because only 80px of space was ever reserved and the second row overlapped
 * the page. Hold the burger until the nav genuinely fits.
 *
 * Deviates from the 2018 CSS by moving one breakpoint: 940px -> 1024px.
 * ------------------------------------------------------------------------ */

@media screen and (min-width: 940px) and (max-width: 1023px) {
	.header-nav {
		display: none;
	}

	.menu-button {
		display: block;
	}
}

/* ---------------------------------------------------------------------------
 * HTML sitemap
 * ------------------------------------------------------------------------ */

.sitemap-list {
	list-style: none;
	margin: 0 0 2em;
	padding: 0;
}

.sitemap-list li {
	border-bottom: 1px solid #F2F2F2;
	padding: .5em 0;
}

.sitemap-date {
	color: gray;
	font-size: .85em;
	margin-left: .75em;
	white-space: nowrap;
}