/**
 * Mobile navigation — the bottom tab bar and the full-screen menu.
 *
 * Built to feel like the app it leads to: thumb-reachable tabs, 48px+ tap
 * targets, a sheet that slides up and can be swiped away, and room for the
 * notch and home indicator (viewport-fit=cover in header.php).
 *
 * @package Farminext
 */

:root {
	--fx-tabbar-height: 4rem;
	--fx-tabbar-space: calc(var(--fx-tabbar-height) + env(safe-area-inset-bottom, 0px));
}

/* Nothing here exists on the desktop layout. */
.fx-tabbar,
.fx-menu { display: none; }

/* Icons take the colour of whatever holds them here, not the site's green. */
.fx-tabbar .fx-icon,
.fx-menu .fx-icon,
.nav-toggle .fx-icon { color: inherit; }

/* =========================================================================
 * Tab bar — phones
 * ====================================================================== */

@media (max-width: 760px) {
	.fx-tabbar {
		display: block;
		position: fixed;
		inset: auto 0 0 0;
		z-index: 70;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: rgba(251, 252, 249, 0.94);
		backdrop-filter: saturate(1.4) blur(18px);
		-webkit-backdrop-filter: saturate(1.4) blur(18px);
		border-top: 1px solid var(--fx-line);
		box-shadow: 0 -8px 24px rgba(12, 26, 18, 0.06);
	}

	@supports not (backdrop-filter: blur(1px)) {
		.fx-tabbar { background: var(--fx-surface); }
	}

	/* The page ends above the bar, not underneath it. */
	body { padding-bottom: var(--fx-tabbar-space); }

	/* On phones the flags and sign-in links are in the menu instead. */
	.fx-utility { display: none; }

	html { scroll-padding-bottom: var(--fx-tabbar-space); }
}

.fx-tabbar__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	list-style: none;
	margin: 0 auto;
	padding: 0 0.25rem;
	max-width: 36rem;
	height: var(--fx-tabbar-height);
}

.fx-tabbar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fx-ink-subtle, #5d665f);
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.fx-tabbar__icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 1.875rem;
	border-radius: var(--fx-radius-pill);
	transition: background var(--fx-duration-fast) var(--fx-ease), transform var(--fx-duration-fast) var(--fx-ease);
}

.fx-tabbar__icon .fx-icon { width: 1.375rem; height: 1.375rem; }

.fx-tabbar__label {
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.fx-tabbar__item.is-active,
.fx-tabbar__menu[aria-expanded="true"] { color: var(--fx-brand-dark); }

.fx-tabbar__item.is-active .fx-tabbar__icon,
.fx-tabbar__menu[aria-expanded="true"] .fx-tabbar__icon { background: var(--fx-brand-wash); }

.fx-tabbar__item.is-active .fx-tabbar__label { font-weight: 700; }

.fx-tabbar__item:active .fx-tabbar__icon { transform: scale(0.92); }

.fx-tabbar__item:focus-visible { outline: none; }
.fx-tabbar__item:focus-visible .fx-tabbar__icon { box-shadow: 0 0 0 2px var(--fx-brand); }

/* =========================================================================
 * Full-screen menu — phones and tablets
 * ====================================================================== */

@media (max-width: 1080px) {
	.fx-menu:not([hidden]) {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 200;
	}

	/* The page behind stays put. */
	html.fx-menu-open,
	html.fx-menu-open body { overflow: hidden; }
	html.fx-menu-open body { padding-right: var(--fx-scrollbar, 0); }
}

.fx-menu__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(7, 16, 11, 0.55);
	opacity: 0;
	transition: opacity 320ms var(--fx-ease);
}

.fx-menu__sheet {
	position: absolute;
	inset: max(0.625rem, env(safe-area-inset-top, 0px)) 0 0 0;
	display: flex;
	flex-direction: column;
	background: var(--fx-bone);
	border-radius: 1.25rem 1.25rem 0 0;
	box-shadow: 0 -12px 40px rgba(7, 16, 11, 0.25);
	transform: translateY(100%);
	transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1);
	overflow: hidden;
	will-change: transform;
}

.fx-menu__sheet.is-dragging { transition: none; }

.fx-menu-open .fx-menu__backdrop { opacity: 1; }
.fx-menu-open .fx-menu__sheet { transform: translateY(0); }

/* A tablet gets a sheet at a comfortable width rather than a stretched list. */
@media (min-width: 761px) {
	.fx-menu__sheet {
		inset: 1rem 1rem 1rem auto;
		width: min(28rem, calc(100% - 2rem));
		border-radius: 1.25rem;
		transform: translateX(calc(100% + 1.5rem));
	}

	.fx-menu-open .fx-menu__sheet { transform: translateX(0); }
	.fx-menu__handle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fx-menu__sheet,
	.fx-menu__backdrop { transition: none; }
}

/* Top bar */
.fx-menu__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.125rem 1rem 0.875rem 1.25rem;
	border-bottom: 1px solid var(--fx-line-soft);
	background: var(--fx-bone);
	flex-shrink: 0;
	touch-action: none;
}

.fx-menu__handle {
	position: absolute;
	top: 0.4375rem;
	left: 50%;
	width: 2.25rem;
	height: 0.25rem;
	margin-left: -1.125rem;
	border-radius: 1rem;
	background: var(--fx-line);
}

.fx-menu__logo { display: flex; }
.fx-menu__logo img { height: 24px; width: auto; }

.fx-menu__close {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fx-surface);
	box-shadow: inset 0 0 0 1px var(--fx-line);
	color: var(--fx-ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.fx-menu__close .fx-icon { width: 1.25rem; height: 1.25rem; }
.fx-menu__close:active { transform: scale(0.94); }
.fx-menu__close:focus-visible { outline: 2px solid var(--fx-brand); outline-offset: 2px; }

/* Scrolling body */
.fx-menu__scroll {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
	display: grid;
	grid-auto-rows: max-content; /* the account card clips its glow, and would otherwise collapse */
	gap: 1.5rem;
	align-content: start;
}

/* Account card */
.fx-menu__account {
	position: relative;
	overflow: hidden;
	padding: 1.375rem 1.25rem 1.25rem;
	border-radius: 1rem;
	background:
		radial-gradient(18rem 10rem at 100% 0%, rgba(123, 192, 67, 0.28), transparent 70%),
		var(--fx-forest);
	color: var(--fx-on-dark);
}

.fx-menu__kicker {
	margin: 0 0 0.5rem;
	font-family: var(--fx-font-mono);
	font-size: var(--fx-mono-sm);
	letter-spacing: var(--fx-ls-label);
	text-transform: uppercase;
	color: var(--fx-brand-light);
}

.fx-menu__account-title {
	margin: 0 0 1.125rem;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--fx-on-dark);
	max-width: 22ch;
}

.fx-menu__account-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.625rem;
}

.fx-menu__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0 0.875rem;
	border-radius: 0.75rem;
	font-size: var(--fx-text-sm);
	font-weight: 600;
	-webkit-tap-highlight-color: transparent;
	transition: transform var(--fx-duration-fast) var(--fx-ease), background var(--fx-duration-fast) var(--fx-ease);
}

.fx-menu__btn .fx-icon { width: 1.125rem; height: 1.125rem; }
.fx-menu__btn:active { transform: scale(0.97); }

.fx-menu__btn--primary { background: var(--fx-brand); color: #fff; }
.fx-menu__btn--primary:hover { background: var(--fx-brand-dark); color: #fff; }

.fx-menu__btn--ghost { background: rgba(255, 255, 255, 0.08); color: var(--fx-on-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.fx-menu__btn--ghost:hover { background: rgba(255, 255, 255, 0.14); color: var(--fx-on-dark); }

/* Search */
.fx-menu__search {
	position: relative;
	display: flex;
	align-items: center;
	margin-top: -0.5rem;
}

.fx-menu .fx-menu__search .fx-icon {
	position: absolute;
	left: 0.9375rem;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--fx-ink-faint);
	pointer-events: none;
}

.fx-menu__search input {
	width: 100%;
	min-height: 3rem;
	padding: 0 1rem 0 2.875rem;
	border: 0;
	border-radius: 0.75rem;
	background: var(--fx-surface);
	box-shadow: inset 0 0 0 1px var(--fx-line);
	color: var(--fx-ink);
	font: inherit;
	font-size: 1rem; /* 16px stops iOS zooming into the field. */
	-webkit-appearance: none;
	appearance: none;
}

.fx-menu__search input::placeholder { color: var(--fx-ink-faint); }
.fx-menu__search input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--fx-brand); }

/* Section headings */
.fx-menu__section { display: grid; gap: 0.625rem; }

.fx-menu__heading-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.fx-menu__heading {
	margin: 0;
	padding-inline: 0.25rem;
	font-family: var(--fx-font-mono);
	font-size: var(--fx-mono-sm);
	font-weight: 400;
	letter-spacing: var(--fx-ls-label);
	text-transform: uppercase;
	color: var(--fx-ink-faint);
}

.fx-menu__see-all {
	padding: 0.25rem;
	font-size: var(--fx-text-xs);
	font-weight: 600;
	color: var(--fx-brand);
}

/* Explore tiles */
.fx-menu__tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fx-menu__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 5.5rem;
	padding: 0.875rem 0.375rem;
	border-radius: 0.875rem;
	background: var(--fx-surface);
	box-shadow: inset 0 0 0 1px var(--fx-line);
	color: var(--fx-ink);
	text-align: center;
	-webkit-tap-highlight-color: transparent;
	transition: transform var(--fx-duration-fast) var(--fx-ease), box-shadow var(--fx-duration-fast) var(--fx-ease);
}

.fx-menu__tile:active { transform: scale(0.96); }

.fx-menu__tile-icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	background: var(--fx-brand-wash);
	color: var(--fx-brand-dark);
}

.fx-menu__tile-icon .fx-icon { width: 1.375rem; height: 1.375rem; }

.fx-menu__tile-label {
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
}

.fx-menu__tile.is-active { box-shadow: inset 0 0 0 2px var(--fx-brand); }
.fx-menu__tile.is-active .fx-menu__tile-icon { background: var(--fx-brand); color: #fff; }

/* Grouped lists */
.fx-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-radius: 0.875rem;
	background: var(--fx-surface);
	box-shadow: inset 0 0 0 1px var(--fx-line);
	overflow: hidden;
}

.fx-menu__list > li + li { border-top: 1px solid var(--fx-line-soft); }

.fx-menu__row {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-height: 3.5rem;
	padding: 0.625rem 0.875rem 0.625rem 0.75rem;
	color: var(--fx-ink);
	-webkit-tap-highlight-color: transparent;
	transition: background var(--fx-duration-fast) var(--fx-ease);
}

a.fx-menu__row:active { background: var(--fx-bone); }
a.fx-menu__row:hover { color: var(--fx-ink); }

.fx-menu__row-icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.625rem;
	background: var(--fx-bone);
	color: var(--fx-ink-muted);
}

.fx-menu__row-icon .fx-icon { width: 1.25rem; height: 1.25rem; }
.fx-menu__row-icon--brand { background: var(--fx-brand-wash); color: var(--fx-brand-dark); }

.fx-menu__row-body { display: grid; gap: 0.125rem; flex: 1; min-width: 0; }

.fx-menu__row-label {
	flex: 1;
	min-width: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.fx-menu__row-label--soft { font-weight: 400; font-size: var(--fx-text-sm); color: var(--fx-ink-muted); }

.fx-menu__row-text {
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--fx-ink-muted);
}

.fx-menu .fx-menu__chevron {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	color: var(--fx-ink-faint);
}

.fx-menu__row.is-active { background: var(--fx-brand-wash); }
.fx-menu__row.is-active .fx-menu__row-icon { background: var(--fx-brand); color: #fff; }
.fx-menu__row.is-active .fx-menu__row-label { font-weight: 600; color: var(--fx-brand-dark); }

.fx-menu__row:focus-visible,
.fx-menu__tile:focus-visible,
.fx-menu__btn:focus-visible,
.fx-menu__see-all:focus-visible { outline: 2px solid var(--fx-brand); outline-offset: -2px; }

/* Countries */
.fx-menu__flags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fx-menu__flags li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.5rem;
	padding: 0 0.875rem 0 0.625rem;
	border-radius: var(--fx-radius-pill);
	background: var(--fx-surface);
	box-shadow: inset 0 0 0 1px var(--fx-line);
	font-size: var(--fx-text-sm);
	font-weight: 500;
}

.fx-menu__flags .fx-flag { box-shadow: 0 0 0 1px var(--fx-line); }

.fx-menu__flags-soon { color: var(--fx-brand-dark); }
.fx-menu__flags li.fx-menu__flags-soon { background: var(--fx-brand-wash); box-shadow: none; }
.fx-menu__flags-soon .fx-icon { width: 1.125rem; height: 1.125rem; }

/* Social and legal */
.fx-menu__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fx-menu__social a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0 1rem;
	border-radius: var(--fx-radius-pill);
	background: var(--fx-surface);
	box-shadow: inset 0 0 0 1px var(--fx-line);
	font-size: var(--fx-text-sm);
	font-weight: 500;
	color: var(--fx-ink);
}

.fx-menu__foot {
	display: grid;
	gap: 0.75rem;
	padding: 0.5rem 0.25rem 0;
	border-top: 1px solid var(--fx-line-soft);
}

.fx-menu__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.125rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fx-menu__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	font-size: var(--fx-text-xs);
	color: var(--fx-ink-muted);
}

.fx-menu__copy {
	margin: 0;
	font-size: var(--fx-text-2xs);
	color: var(--fx-ink-faint);
}

@media print {
	.fx-tabbar,
	.fx-menu { display: none !important; }
}