/*
 * layout.css — the page shell, width declarations, header, navigation, footer.
 *
 * Breakpoints are Breakdance's own, read off live: 1119, 1023, 767, 479.
 * The tokens below are live's section spacing (global settings, "Sections"):
 * 50px above and below on a wide screen, 60px from 1119 down, 40px from
 * 767 down; no side padding until 1119, then 20px. Live's container is
 * 1080px, which is theme.json's contentSize and wideSize both.
 */

:root {
	--eb-pad-y: 50px;
	--eb-pad-x: 0px;
	--eb-gutter: 0px;
	--eb-header-py: 50px;
}

@media (max-width: 1119px) {
	:root {
		--eb-pad-y: 60px;
		--eb-pad-x: 20px;
		--eb-header-py: 25px;
	}
}

@media (max-width: 767px) {
	:root {
		--eb-pad-y: 40px;
		--eb-header-py: 15px;
	}
}

/* --- Width is the template's statement --- */

/*
 * Every direct child of .site-main declares what it is: `measure` for the
 * reading measure, `alignwide` for the wide size, `alignfull` for the whole
 * width. This site's bands are all `alignfull` and hold their own
 * container (.eb-band__inner), so the shell adds no side padding of its
 * own and --eb-gutter is 0. The list templates (archive, search, 404) use
 * `measure` and give it the band's side padding themselves.
 *
 * Decision of record and the fork boundary: docs/SITE-BUILD-PROTOCOL.md §8,
 * in the Ready.Salted repo.
 */
.site-main > .measure {
	max-width: var(--eb-measure);
	margin-inline: auto;
	padding-inline: var(--eb-pad-x);
}

.site-main > .alignwide {
	max-width: var(--wp--style--global--wide-size, 67.5rem);
	margin-inline: auto;
	padding-inline: var(--eb-pad-x);
}

.site-main > .alignfull {
	max-width: none;
	margin-inline: calc(-1 * var(--eb-gutter));
}

/*
 * Markup the theme does not write. Core prints the posts-pagination and
 * post-navigation wrappers (`.navigation`), so no template can put a
 * class on them; they declare here, once, at the measure.
 */
.site-main > .navigation {
	max-width: var(--eb-measure);
	margin-inline: auto;
	padding-inline: var(--eb-pad-x);
}

/* --- Bands --- */

/*
 * A band is a full-width strip with a container inside it. The container
 * is 1080px, centred, with live's side padding; a band's vertical rhythm is
 * --eb-pad-y unless a template says otherwise.
 */
.eb-band {
	display: flow-root;
}

.eb-band__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 67.5rem);
	margin-inline: auto;
	padding: var(--eb-pad-y) var(--eb-pad-x);
}

/* --- Header --- */

.site-header {
	background: var(--wp--preset--color--background);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: var(--wp--style--global--wide-size, 67.5rem);
	margin-inline: auto;
	padding: var(--eb-header-py) 0;
}

.site-title {
	margin: 0;
	font-size: inherit;
	line-height: 0;
}

.site-title a,
.site-title a:hover {
	display: block;
	text-decoration: none;
}

.site-logo {
	width: 300px;
	height: auto;
}

/* --- Navigation --- */

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

.nav-toggle {
	display: none;
}

.site-navigation__panel {
	display: flex;
	align-items: center;
	gap: 50px;
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: 50px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu a {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 4px;
	text-transform: uppercase;
	text-decoration: none;
}

.eb-social {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 10px;
	border-radius: 100%;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--accent);
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.eb-social__link:hover,
.eb-social__link:focus-visible {
	transform: scale(1.1);
	opacity: 0.8;
	text-decoration: none;
}

.eb-social .eb-icon {
	width: 18px;
	height: 18px;
}

@media (max-width: 1119px) {
	.site-header__inner {
		padding-inline: 25px;
	}
}

@media (max-width: 1023px) {
	.site-navigation {
		display: block;
	}

	.nav-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--wp--preset--color--accent);
		cursor: pointer;
	}

	/* The three bars: one element, its ::before and ::after. */
	.nav-toggle__bars,
	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		display: block;
		width: 24px;
		height: 3px;
		border-radius: 3px;
		background: currentColor;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.nav-toggle__bars {
		position: relative;
	}

	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.nav-toggle__bars::before {
		top: -8px;
	}

	.nav-toggle__bars::after {
		top: 8px;
	}

	.site-navigation[data-open="true"] .nav-toggle__bars {
		background: transparent;
	}

	.site-navigation[data-open="true"] .nav-toggle__bars::before {
		transform: translateY(8px) rotate(45deg);
	}

	.site-navigation[data-open="true"] .nav-toggle__bars::after {
		transform: translateY(-8px) rotate(-45deg);
	}

	/*
	 * The panel drops from under the toggle, full width, over the page:
	 * 47px below the top of the button (its 32px plus live's 15px), which is
	 * flush with the header at 767 and below and 10px under it above.
	 */
	.site-header {
		position: relative;
	}

	.site-navigation {
		position: static;
	}

	.site-navigation__panel {
		position: absolute;
		top: calc(var(--eb-header-py) + 47px);
		right: 0;
		left: 0;
		z-index: 10;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--wp--preset--color--background);
	}

	.site-navigation[data-open="true"] .site-navigation__panel {
		display: flex;
	}

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.primary-menu a {
		padding: 20px;
		border-top: 1px solid var(--wp--preset--color--foreground);
		font-size: 17.5px;
		letter-spacing: 0;
		text-transform: none;
	}

	.eb-social {
		padding: 20px;
		border-top: 1px solid var(--wp--preset--color--foreground);
		border-bottom: 1px solid var(--wp--preset--color--foreground);
	}
}

@media (max-width: 767px) {
	.site-header__inner {
		gap: 0;
	}
}

@media (max-width: 479px) {
	.site-logo {
		width: 250px;
	}
}

/* --- Smooth scrolling, and the progress bar --- */

/*
 * The menu's three links are anchors on the home page; they glide unless the
 * reader has asked for less motion. The header is not sticky, so a target
 * needs no offset.
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/*
 * The reading-progress bar (assets/js/progress.js), as on kerrygodliman: a
 * 4px strip of the accent colour whose width tracks the scroll. That site's
 * sits in a sticky header; this header scrolls away, so the bar is fixed to
 * the top of the viewport, above everything including the open menu.
 */
.scroll-progress {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 20;
	height: 4px;
	background: transparent;
	pointer-events: none;
}

.scroll-progress__bar {
	display: block;
	width: 0;
	height: 100%;
	background: var(--wp--preset--color--accent);
}

/* --- Footer --- */

.site-footer {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: var(--wp--style--global--wide-size, 67.5rem);
	margin-inline: auto;
	padding: 20px var(--eb-pad-x);
}

.site-info {
	margin: 0;
	text-align: left;
}

@media (max-width: 1023px) {
	.site-footer {
		gap: 20px;
	}
}