/* Styles for site layout (e.g. header and footer). */

:root {
	--width-site: 960px;
	--width-site-desktop-wide: 1140px;
	--size-sidebar-tablet: 13rem;
	--size-sidebar-tablet-plus: 15rem;
	--size-sidebar-desktop: 16rem;
}

/* Header. */
.header {
	background-color: var( --background-color-interactive );
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* Ensure contents aren't wider than the viewport. */
	width: 100vw;
	min-height: var( --min-size-header );
	z-index: 100;
}

.header__title {
	padding-top: var( --spacing-header );
}

.site-title {
	display: flex;
	align-items: center;
	color: var( --color-base );
	margin-top: 0;
	font-family: var( --font-family-system-sans );
	font-size: var( --font-size-site-title );
	font-weight: var( --font-weight-semi-bold );
	/* Match headings. */
	line-height: var( --line-height-xxx-small );
	letter-spacing: 0.5px;
	text-transform: none;
}

.site-title a {
	color: inherit;
	display: inline-block;
	padding: 0 var( --spacing-horizontal-nav-item-small );
	transition: color var( --transition-duration-medium );
}

.site-title a:hover {
	color: var( --color-emphasized );
	text-decoration: none;
}

/* Page/content. */
.page {
	background-color: var( --background-color-base );
	position: relative;
	margin-top: var( --min-size-header );
	padding: var( --min-size-header ) 0;
	box-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 );
}

.content-box {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.flex-cols {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.flex-col--start {
	flex-shrink: 0;
}

/* Footer. */
.footer {
	background-color: var( --background-color-interactive );
	color: var( --color-base );
	padding: 1.5rem 0;
	font-size: 0.8125rem;
}

.footer__list {
	padding: 0;
}

.footer__list:first-child {
	margin: 0;
}

.footer__list::after {
	content: ' ';
	display: block;
	clear: both;
}

.footer__list li {
	list-style: none none;
	display: block;
	padding: 0.5rem 0 0;
}

.footer__list li:first-child {
	padding-top: 0;
}

.footer__list + p {
	margin-top: 0.75rem;
}

.lnk--wikimedia-project {
	display: inline-block;
	padding: 0.25rem 0;
	text-transform: uppercase;
}

/* Smartphone portrait */
@media ( min-width: 240px ) {
	.content-box,
	.site-title a {
		transition-property: background-color, padding;
		transition-duration: var( --transition-duration-medium );
	}

	.site-title {
		/* Account for menu button. */
		margin-left: 2.625rem;
	}

	.site-title a {
		padding-left: 0;
	}

	.flex-cols {
		flex-wrap: wrap;
	}

	.flex-col {
		width: 100%;
	}
}

/* Smartphone+ portrait */
@media ( min-width: 414px ) {
	.content-box {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.footer__list li {
		display: list-item;
		float: left;
		padding: 0 0.5rem 0 0;
	}

	.footer__list li::after {
		content: '\2022'; /* bullet dot: '•' */
		color: var( --color-subtle );
		padding: 0 0 0 0.5rem;
		font-weight: 100;
	}

	.footer__list li:last-child::after {
		content: '';
		padding: 0;
	}
}

/* Tablet */
@media ( min-width: 768px ) {
	.content-box {
		width: 100%;
		max-width: 960px;
	}

	.header .content-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header__title {
		padding-top: 0;
	}

	.site-title {
		margin-left: 0;
	}

	.site-title a {
		padding-top: 0;
		/* Align with the main nav items. */
		padding-left: var( --spacing-horizontal-nav-item-small );
		padding-right: var( --spacing-horizontal-nav-item-small );
	}

	.flex-cols {
		flex-wrap: nowrap;
	}

	.flex-col {
		/* Prevent overflow of content. Flex items hav a default min-width of `auto`, which
		makes them at least as wide as their content. */
		min-width: 0;
	}

	.flex-col--start {
		position: sticky;
		/* Header height + page padding-top. */
		top: calc( var( --min-size-header ) * 2 );
		width: var( --size-sidebar-tablet );
		max-height: calc( 100vh - var( --min-size-header ) * 2 );
		overflow-y: auto;
		margin-right: 2rem;
		z-index: 1;
		transition: width var( --transition-duration-medium );
	}
}

/* Tablet+ / Netbook */
@media ( min-width: 992px ) {
	.content-box {
		width: 100%;
		max-width: var( --width-site-desktop-wide );
	}

	.site-title a {
		padding-left: var( --spacing-horizontal-nav-item-large );
		padding-right: var( --spacing-horizontal-nav-item-large );
	}

	.flex-col--start {
		width: var( --size-sidebar-tablet-plus );
	}
}

@media ( min-width: 1200px ) {
	.content-box {
		width: var( --width-site-desktop-wide );
	}

	.flex-col--start {
		width: var( --size-sidebar-desktop );
	}
}