/* CodeOrder Theme — mobile navigation as an app-style bottom sheet.
 *
 * Shape and motion deliberately match the CodeOrder auth modal
 * (assets/css/auth-modal.css): rises from the bottom edge, rounded top corners,
 * grab handle, thumb-reachable actions. A visitor who has opened the login sheet
 * should recognise this one instantly.
 *
 * Why a sheet and not a side panel: the drawer used to fly in from the right at
 * min(400px) — a desktop pattern. On a phone it left a dead margin, put the
 * close button in the hardest-to-reach corner, and none of the touch targets
 * were sized for a thumb.
 *
 * This file owns the drawer outright. header.css must not carry drawer rules: an
 * earlier version shipped a second, full-screen dark drawer there and
 * `flex-direction: column` plus `.mm-status.is-open { color: #fff }` leaked
 * through the cascade. Every layout property the sheet relies on is declared
 * here explicitly rather than inherited from a default. */

body.mobile-menu-open {
	overflow: hidden;
	/* iOS keeps rubber-banding the page behind a fixed overlay without this. */
	overscroll-behavior: none;
}

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
	background: transparent;
	color: var(--ink);
	visibility: hidden;
	pointer-events: none;
	/* clip, not hidden: a hidden overflow is still a scroll container, and
	   focusing the close button while the sheet sat below the fold scrolled it
	   ~450px in one frame — the sheet jumped half-way up instead of sliding. */
	overflow: hidden;
	overflow: clip;
	/* Only the backdrop's opacity and the sheet's transform animate — both run on
	   the compositor. Fading this whole container as well forced the sheet, its
	   shadow and every row into an offscreen opacity group for each frame, which
	   is where phones dropped frames. Visibility must be visible in the frame
	   the .open class lands (or the close button cannot take focus) and stays
	   until the sheet has slid out on close. */
	transition: visibility 0s linear 420ms;
}

.mobile-menu.open {
	visibility: visible;
	pointer-events: auto;
	transition: visibility 0s;
}

.mobile-menu-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	/* A plain dim, no backdrop-filter: blurring the full page behind a sliding
	   sheet re-renders the blur every frame and is the main cause of the stutter
	   on phones. The auth modal's dim has none either. */
	background: color-mix(in srgb, var(--scrim) 55%, transparent);
	cursor: default;
	opacity: 0;
	/* Swallows the touch that would otherwise scroll the page while the sheet
	   is still rising (the body lock lands when it has settled). */
	touch-action: none;
	transition: opacity 280ms ease;
}

.mobile-menu.open .mobile-menu-backdrop { opacity: 1; }

/* ---------- The sheet ---------- */
.mobile-menu-panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(560px, 100%);
	height: auto;
	/* Capped so a strip of backdrop stays visible above the sheet — that gap is
	   what makes it read as a sheet rather than a full-screen takeover. */
	max-height: min(86svh, 780px);
	padding: 0;
	border: 0;
	border-radius: 26px 26px 0 0;
	background: var(--surface);
	box-shadow: 0 -8px 28px color-mix(in srgb, var(--scrim) 18%, transparent);
	overflow: hidden;
	transform: translateY(100%);
	/* Its own layer from the start, so the first open does not have to raster
	   the sheet in the same frame it starts moving. */
	will-change: transform;
	contain: layout paint;
	/* iOS sheet curve: quick to leave the edge, long soft settle. */
	transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
}

.mobile-menu.open .mobile-menu-panel { transform: translateY(0); }

/* While a finger is on the sheet, JS drives the transform directly. */
.mobile-menu-panel.is-dragging { transition: none; }

/* ---------- Grab handle ---------- */
.mobile-menu-grip {
	display: grid;
	flex: none;
	place-items: center;
	padding: 11px 0 5px;
	cursor: grab;
	touch-action: none;
}
.mobile-menu-grip span {
	display: block;
	width: 42px;
	height: 4px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ink) 20%, transparent);
}
.mobile-menu-grip:active { cursor: grabbing; }

/* ---------- Pinned head ---------- */
.mobile-menu-head {
	position: static;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	margin: 0;
	padding: 4px 18px 14px;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: transparent;
	/* Part of the drag surface, so the browser must not claim the gesture. */
	touch-action: none;
}

.mobile-menu-head .custom-logo {
	display: block;
	width: auto;
	height: 34px;
	max-width: 190px;
	filter: none;
	opacity: 1;
}

.mobile-menu-head .mm-brand {
	color: var(--heading);
	font-family: var(--font-display);
	font-size: 25px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.mobile-menu-head-actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
	/* Buttons inside the drag surface still need to receive taps. */
	touch-action: auto;
}
.mm-theme-toggle {
	width: 44px;
	height: 44px;
	border-color: var(--line);
	background: var(--surface);
	color: var(--heading);
}

.mobile-close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	color: var(--heading);
	cursor: pointer;
	transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.mobile-close:hover,
.mobile-close:active {
	border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
	background: color-mix(in srgb, var(--brand) 7%, var(--surface));
	color: var(--brand-text);
}

/* ---------- Scrolling content ---------- */
.mobile-menu-scroll {
	flex: 1 1 auto;
	min-height: 0;
	padding: 18px 18px calc(20px + env(safe-area-inset-bottom, 0px));
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.mobile-menu-body {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	min-height: 0;
}

/* ---------- Live status ---------- */
/* One quiet line, not an alert. Closed is a normal state for a restaurant, so
   it gets the same calm surface as open — only the dot changes colour. The
   previous version painted a red danger card and made "Restaurant fermé" the
   second loudest thing in the sheet. */
.mm-status {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	margin: 0 0 16px;
	padding: 11px 14px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface-2);
	color: var(--ink);
	font-size: 14px;
	line-height: 1.35;
}

.mm-status-dot {
	flex: none;
	align-self: center;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--muted);
}
.mm-status.is-open .mm-status-dot { background: var(--ok-dot); }

.mm-status-label { color: var(--heading); font-weight: 700; }
.mm-status-note { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mm-status-location {
	flex-basis: 100%;
	overflow: hidden;
	color: var(--muted);
	font-size: 11px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Nav rows ---------- */
.mobile-menu-links,
.mobile-menu-links-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-menu-links { margin-top: 20px; border-top: 1px solid var(--line); }
.mobile-menu-links .menu-item { margin: 0; list-style: none; }
.mobile-menu-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* 56px: comfortable thumb target, and tall enough that the chevron and label
	   share an optical centre. */
	min-height: 56px;
	padding: 0 4px;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: color 160ms ease;
}

.mobile-menu-links a::after {
	content: '';
	width: 17px;
	height: 17px;
	margin-left: 16px;
	background: currentColor;
	opacity: 0.34;
	-webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
	mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
	transition: opacity 160ms ease, transform 160ms ease;
}

/* Only the current page is indented; a tap moves the chevron (a transform)
   rather than animating padding, which relaid out the list on every touch. */
.mobile-menu-links .current-menu-item a { padding-left: 7px; }
.mobile-menu-links a:hover,
.mobile-menu-links a:active,
.mobile-menu-links .current-menu-item a {
	border-color: var(--line);
	background: transparent;
	color: var(--brand-text);
}
.mobile-menu-links a:hover::after,
.mobile-menu-links a:active::after,
.mobile-menu-links .current-menu-item a::after { opacity: 0.85; transform: translateX(2px); }

/* ---------- Actions ---------- */
.mobile-menu-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
}

.mobile-menu-actions .mm-action {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 15px;
	background: var(--surface);
	color: var(--heading);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.02em;
	line-height: 1.15;
	text-transform: none;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.mobile-menu-actions .mm-action::after { display: none; }
.mobile-menu-actions .mm-action-primary {
	grid-column: 1 / -1;
	min-height: 56px;
	border-color: var(--brand);
	background: var(--brand);
	color: var(--on-brand);
	font-size: 14px;
	box-shadow: 0 12px 26px color-mix(in srgb, var(--brand) 22%, transparent);
}
.mobile-menu-actions .mm-action:active { transform: scale(0.985); }
.mobile-menu-actions .mm-action:hover { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.mobile-menu-actions .mm-action-primary:hover,
.mobile-menu-actions .mm-action-primary:active { border-color: var(--brand-deep); background: var(--brand-deep); }

.mm-action-icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--brand) 8%, transparent);
	flex: 0 0 auto;
}
.mm-action-primary .mm-action-icon { background: color-mix(in srgb, var(--on-brand) 18%, transparent); }

/* ---------- Foot ---------- */
/* No border-top here: the nav list is always rendered (wp_nav_menu falls back to
   codeon_rv2_default_menu), so its last row always supplies the hairline above
   the foot. Adding a second one read as an empty extra row. */
.mobile-menu-foot {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 0;
	padding: 16px 0 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.mobile-menu-foot .mm-contact {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 32px;
	color: var(--muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}
.mobile-menu-foot .mm-contact:hover { color: var(--brand-text); }
.mobile-menu-foot .mm-contact svg { width: 14px; height: 14px; }
.mm-socials { display: flex; gap: 8px; margin: 0 0 0 auto; }
.mm-socials a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	color: var(--heading);
}
.mm-socials a:hover,
.mm-socials a:active { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }

/* ---------- Tight viewports ---------- */
/* Short screens (landscape phones) — trade padding for rows. */
@media (max-height: 620px) {
	.mobile-menu-panel { max-height: 94svh; }
	.mobile-menu-grip { padding: 8px 0 3px; }
	.mobile-menu-head { min-height: 42px; padding: 2px 16px 11px; }
	.mobile-menu-scroll { padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
	.mm-status { margin-bottom: 14px; padding: 10px 12px; }
	.mobile-menu-links a { min-height: 48px; font-size: 16px; }
	.mobile-menu-links { margin-top: 14px; }
	.mobile-menu-actions .mm-action { min-height: 46px; }
	.mobile-menu-actions .mm-action-primary { min-height: 50px; }
	.mobile-menu-foot { padding-top: 12px; }
}

@media (max-width: 360px) {
	.mobile-menu-head { padding-left: 15px; padding-right: 15px; }
	.mobile-menu-scroll { padding-left: 15px; padding-right: 15px; }
	.mobile-menu-actions { grid-template-columns: 1fr; }
}

/* On a tablet the sheet is centred with a capped width, so soften both top
   corners — it no longer spans the full edge. */
@media (min-width: 601px) {
	.mobile-menu-panel {
		border-radius: 28px 28px 0 0;
		box-shadow: 0 -12px 40px color-mix(in srgb, var(--scrim) 20%, transparent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu,
	.mobile-menu-backdrop,
	.mobile-menu-links a,
	.mobile-menu-links a::after { transition-duration: 1ms; }
	/* Nothing slides out, so nothing to wait for before hiding. */
	.mobile-menu { transition-delay: 0s; }
	.mobile-menu-panel { transition: transform 1ms linear; }
	.mobile-menu-actions .mm-action:active { transform: none; }
}