/*
 * components.css
 * Header, navigation, footer and shared UI.
 *
 * Navigation breakpoint is 56rem. It is mirrored in assets/js/navigation.js
 * via matchMedia — change both together.
 */

/* -------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------- */

.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--z-header);
	background-color: color-mix(in srgb, var(--color-bg) 85%, transparent);
	backdrop-filter: blur(12px);
	transition:
		transform var(--transition-normal),
		background-color var(--transition-normal),
		border-color var(--transition-normal);
	border-block-end: 1px solid transparent;
}

/* Set by navigation.js once the page is scrolled away from the top. */
.site-header.is-scrolled {
	border-block-end-color: var(--color-line);
}

/* Set by navigation.js when scrolling down, to give media more room. */
.site-header.is-hidden {
	transform: translateY(-100%);
}

.site-header.is-open {
	background-color: var(--color-bg);
	transform: none;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: var(--header-height);
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--page-padding);
}

/* -------------------------------------------------------------------
 * Brand
 * ------------------------------------------------------------------- */

.site-brand {
	font-size: var(--text-md);
	line-height: 1;
}

.site-brand__link {
	display: inline-flex;
	align-items: center;
}

.site-brand__wordmark {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-tight);
	text-transform: lowercase;
}

.site-brand__logo {
	width: auto;
	max-height: calc(var(--header-height) * 0.4);
}

/* -------------------------------------------------------------------
 * Navigation
 * ------------------------------------------------------------------- */

.nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.nav__link {
	position: relative;
	display: inline-block;
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
	text-transform: lowercase;
	transition: color var(--transition-fast);
}

/* Underline that draws in from the left on hover. */
.nav__link::after {
	content: "";
	position: absolute;
	inset-block-end: -0.25em;
	inset-inline-start: 0;
	width: 100%;
	height: 1px;
	background-color: currentcolor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition-normal);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.current-menu-item > .nav__link::after {
	transform: scaleX(1);
}

/* -------------------------------------------------------------------
 * Menu toggle
 * ------------------------------------------------------------------- */

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-inline-end: calc(var(--space-xs) * -1);
	color: var(--color-fg);
}

.nav-toggle__bars {
	display: block;
	position: relative;
	width: 1.5rem;
	height: 0.625rem;
}

.nav-toggle__bar {
	position: absolute;
	inset-inline: 0;
	height: 1px;
	background-color: currentcolor;
	transition:
		transform var(--transition-normal),
		opacity var(--transition-fast);
}

.nav-toggle__bar:first-child {
	inset-block-start: 0;
}

.nav-toggle__bar:last-child {
	inset-block-end: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child {
	transform: translateY(0.3125rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child {
	transform: translateY(-0.3125rem) rotate(-45deg);
}

/* -------------------------------------------------------------------
 * Mobile navigation
 * ------------------------------------------------------------------- */

@media (max-width: 55.999rem) {
	.nav-toggle {
		display: inline-flex;
	}

	.site-nav {
		position: fixed;
		inset: var(--header-height) 0 0;
		z-index: var(--z-nav);
		display: flex;
		align-items: flex-start;
		padding: var(--space-lg) var(--page-padding) var(--space-xl);
		background-color: var(--color-bg);
		overflow-y: auto;
		visibility: hidden;
		opacity: 0;
		transition:
			opacity var(--transition-normal),
			visibility var(--transition-normal);
	}

	.site-nav.is-open {
		visibility: visible;
		opacity: 1;
	}

	/*
	 * Without JavaScript the panel cannot be toggled, so keep the links in
	 * the flow and hide the toggle instead.
	 */
	.no-js .site-nav {
		position: static;
		inset: auto;
		visibility: visible;
		opacity: 1;
		padding: 0;
		background: none;
		overflow: visible;
	}

	.no-js .nav-toggle {
		display: none;
	}

	.site-nav .nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-sm);
		width: 100%;
	}

	.no-js .site-nav .nav__list {
		flex-direction: row;
		gap: var(--space-sm);
	}

	.site-nav .nav__link {
		font-size: var(--text-xl);
		letter-spacing: var(--tracking-tight);
	}

	.no-js .site-nav .nav__link {
		font-size: var(--text-sm);
		letter-spacing: var(--tracking-wide);
	}

	.site-nav .nav__link::after {
		content: none;
	}
}

/* -------------------------------------------------------------------
 * Button
 * ------------------------------------------------------------------- */

.button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-md);
	border: 1px solid var(--color-line);
	color: var(--color-fg);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
	text-transform: lowercase;
	transition:
		background-color var(--transition-fast),
		color var(--transition-fast),
		border-color var(--transition-fast);
}

.button:hover,
.button:focus-visible {
	background-color: var(--color-fg);
	border-color: var(--color-fg);
	color: var(--color-bg);
}

/* -------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------- */

.site-footer {
	border-block-start: 1px solid var(--color-line);
	padding-block: var(--space-lg);
	font-size: var(--text-sm);
}

.site-footer__inner {
	display: grid;
	gap: var(--space-md);
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--page-padding);
}

@media (min-width: 48rem) {
	.site-footer__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: start;
		column-gap: var(--space-lg);
	}

	.site-footer__legal {
		grid-column: 1 / -1;
	}
}

.site-footer__wordmark {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-tight);
	text-transform: lowercase;
}

.site-footer__location {
	color: var(--color-muted);
}

.site-footer__nav .nav__list,
.site-footer__emails,
.site-footer__social {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2xs);
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.site-footer__email,
.site-footer__social-link {
	transition: color var(--transition-fast);
}

.site-footer__email:hover,
.site-footer__social-link:hover {
	color: var(--color-muted);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-md);
	padding-block-start: var(--space-md);
	border-block-start: 1px solid var(--color-line);
	color: var(--color-muted);
	font-size: var(--text-xs);
}