/* Full-screen mobile menu (inc/mobile-menu.php, js/mobile-menu.js).
   Not a critical-CSS source sheet: editing it keeps critical CSS on. */

.spf-mm[hidden] { display: none !important; }
.spf-mm {
	--spf-mm-bg: #f5f5f5;
	--spf-mm-ink: #333333;
	--spf-mm-soft: #4c4c4c;
	--spf-mm-line: #e3e3e3;
	--spf-mm-field: #ffffff;
	position: fixed;
	inset: 0;
	z-index: 999; /* under .main-nav (1000), so the logo and close button stay on top */
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--spf-mm-bg);
	color: var(--spf-mm-ink);
	/* Starts as the header bar's shape (js sets the insets), grows to the screen. */
	clip-path: inset(var(--spf-mm-t, 20px) var(--spf-mm-r, 20px) var(--spf-mm-b, 90%) var(--spf-mm-l, 20px) round 20px);
	transition: clip-path 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
.spf-mm.is-open { clip-path: inset(0 0 0 0 round 0); }

.spf-mm__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: calc(var(--spf-mm-top, 100px) + 8px) var(--spf-mm-x, 24px) calc(32px + env(safe-area-inset-bottom));
}

/* Each block slides up in turn once the bar has grown. */
.spf-mm__item {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.spf-mm.is-open .spf-mm__item {
	opacity: 1;
	transform: none;
	transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
	transition-delay: calc(0.22s + var(--i, 0) * 0.05s);
}

/* Search */
.spf-mm__search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 16px;
	border: 1px solid var(--spf-mm-line);
	border-radius: 30px;
	background: var(--spf-mm-field);
	color: var(--spf-mm-ink);
}
.spf-mm__search svg { flex-shrink: 0; }
.spf-mm__search input {
	width: 100%;
	min-width: 0;
	height: 48px;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: "Neue Montreal-Medium", "Neue Montreal-Medium Fallback", Helvetica, sans-serif;
	font-size: 16px;
	color: var(--spf-mm-ink);
}
.spf-mm__search input::placeholder { color: #999999; }
.spf-mm__search:focus-within { border-color: #ff6b00; }

.spf-mm .nav-toggle { display: inline-flex; width: fit-content; }
.spf-mm .toggle-btn { padding: 8px 18px; font-size: 16px; text-decoration: none; }

/* Main links: big, one per row, with an arrow. */
.spf-mm__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--spf-mm-line); }
.spf-mm__list li { margin: 0; border-bottom: 1px solid var(--spf-mm-line); }
.spf-mm__list a,
.spf-mm__list a.nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	border: 0;
	font-family: "Neue Montreal-Bold", "Neue Montreal-Bold Fallback", Helvetica, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--spf-mm-ink);
	text-decoration: none;
}
.spf-mm__arrow { flex-shrink: 0; transition: transform 0.2s ease; }
.spf-mm__list a:hover,
.spf-mm__list a:focus-visible,
.spf-mm__list .current-menu-item > a { color: #ff6b00; }
.spf-mm__list a:hover .spf-mm__arrow,
.spf-mm__list a:focus-visible .spf-mm__arrow { transform: translateX(4px); }

/* Footer links: smaller, two columns. */
.spf-mm__minor {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 16px;
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
}
.spf-mm__minor li { margin: 0; }
.spf-mm__minor a {
	display: block;
	font-family: "Neue Montreal-Medium", "Neue Montreal-Medium Fallback", Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.3;
	color: var(--spf-mm-soft);
	text-decoration: none;
}
.spf-mm__minor a:hover,
.spf-mm__minor .current-menu-item > a { color: #ff6b00; }

/* Buttons sit at the bottom of the screen. */
.spf-mm__cta { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 12px; }
.spf-mm__cta .btn { width: 100%; padding: 16px 24px; font-size: 16px; }
.spf-mm__cta .btn-secondary { background-color: var(--spf-mm-field); }

/* While open: the page doesn't scroll and the header bar loses its shadow. */
html.spf-mm-lock, html.spf-mm-lock body { overflow: hidden; }
html.spf-mm-lock .main-nav .nav-container { box-shadow: none !important; }

/* Dark mode */
html[data-theme="dark"] .spf-mm {
	--spf-mm-bg: #1b1b1c;
	--spf-mm-ink: #ebebeb;
	--spf-mm-soft: #b8b8b8;
	--spf-mm-line: rgba(235, 235, 236, 0.2);
	--spf-mm-field: #232325;
}
html[data-theme="dark"] .spf-mm__list,
html[data-theme="dark"] .spf-mm__list li { border-color: rgba(235, 235, 236, 0.2); }
html[data-theme="dark"] .spf-mm__search input::placeholder { color: #8a8a8a; }
html[data-theme="dark"] .spf-mm__cta .btn-secondary { background-color: #232325; color: #ebebeb; }
html[data-theme="dark"] .spf-mm__cta .btn-secondary:hover { background-color: #2c2c2f; color: #ebebeb; }

@media (min-width: 1280px) {
	.spf-mm { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.spf-mm, .spf-mm__item, .spf-mm.is-open .spf-mm__item { transition: opacity 0.2s ease; transition-delay: 0s; transform: none; }
	.spf-mm { clip-path: none; opacity: 0; }
	.spf-mm.is-open { opacity: 1; }
}