/* ============================================================
   WMC House — navigation
   Transparent over the hero, solid once it clears.
   ============================================================ */

/* === Bar === */
.nav { position: fixed; inset: 0 0 auto; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 1.15rem var(--gutter); color: var(--on-dark); transition: background .45s ease, color .45s ease, padding .45s ease, border-color .45s ease; border-bottom: 1px solid transparent; }
.nav.is-stuck { background: var(--nav-bg); color: var(--nav-ink); padding-block: .7rem; border-bottom-color: var(--nav-rule); }

/* === Mark === */
.nav__mark { font-family: var(--font-display); font-size: var(--h3-size); line-height: 1; letter-spacing: -.02em; }
/* Explicit height, not max-height: an SVG without width/height attributes has
   no intrinsic size to cap, so max-height left it stretching to 100% width. */
.nav__mark img { display: block; height: 44px; width: auto; max-width: 240px; object-fit: contain; transition: height .45s ease; }
.nav.is-stuck .nav__mark img { height: 36px; }

/* === Links === */
/* align-items matters here. Without it the flex items stretch, and the one
   item carrying a caret button is taller than its siblings — so its label sat
   off the line the others share. */
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); }
/* Every item is a flex row, not only the ones with a caret. Applying it to
   just the parents put those two labels on a marginally different line box
   from their siblings. */
.nav__links > li { display: flex; align-items: center; }
.nav__links > li > a { white-space: nowrap; }
.nav__links a { opacity: .82; transition: opacity .3s ease; }
.nav__links a:hover { opacity: 1; }

/* Editor-only "no menu assigned" hint. Never rendered for guests. */
.nav__links--empty { opacity: .7; text-decoration: underline dotted; text-underline-offset: 4px; }

/* === Actions ===
   Order, Book and the toggle are ONE group, not three siblings of the bar.
   As three siblings, space-between distributed the leftover width BETWEEN
   them, so the two buttons drifted apart with a gap that grew as the link
   list shrank — and with no links at all they ended up stranded top right.
   Grouping makes the bar a stable three-part layout: mark | links | actions,
   which also degrades correctly when the menu is missing. */
.nav__actions { display: flex; align-items: center; gap: var(--s-2); }

/* === Call to action === */
.nav__cta { padding: .7rem 1.3rem; background: var(--accent); color: var(--accent-ink); white-space: nowrap; transition: filter .3s ease; }
.nav__cta:hover { filter: brightness(1.12); }

/* Order Online sits beside Book a table but must not compete with it —
   booking is the action worth more to the restaurant, so this stays outlined
   while the booking CTA keeps the solid accent fill. */
.nav__order { padding: .7rem 1.3rem; border: 1px solid currentColor; white-space: nowrap; opacity: .82; transition: opacity .3s ease; }
.nav__order:hover { opacity: 1; }

/* === Toggle === */
.nav__toggle { display: none; padding: .6rem; background: none; border: 0; cursor: pointer; color: inherit; }
.nav__bars { display: block; width: 24px; height: 1px; background: currentColor; position: relative; }
.nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; width: 24px; height: 1px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.nav__bars::before { top: -7px; }
.nav__bars::after { top: 7px; }
[aria-expanded="true"] .nav__bars { background: transparent; }
[aria-expanded="true"] .nav__bars::before { top: 0; transform: rotate(45deg); }
[aria-expanded="true"] .nav__bars::after { top: 0; transform: rotate(-45deg); }

/* === Drawer === */
/* Top-aligned, not centred. Centring worked with twelve flat links; with the
   list collapsed into two parents it left a screen of empty cream and read as
   a broken page rather than a menu. */
.drawer { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--s-3); padding: calc(var(--s-6) + 1rem) var(--gutter) var(--s-4); background: var(--nav-bg); color: var(--nav-ink); overflow-y: auto; overscroll-behavior: contain; }
.drawer[hidden] { display: none; }
.drawer__links { display: grid; border-top: 1px solid var(--nav-rule); }
.drawer__links > li { border-bottom: 1px solid var(--nav-rule); padding: .55rem 0; }
.drawer__links > li > a { font-family: var(--font-display); font-size: var(--h3-size); line-height: 1.2; }
.drawer .btn { justify-self: start; }

/* Group the drawer CTAs. Each button previously carried its own top margin ON
   TOP of the drawer's own gap, so the two stacked with a hole between them and
   stretched the full width. One container, one gap, content width. */
/* Inline, Order then Book, wrapping to stacked only when they genuinely will
   not fit. Two full-width bars stacked read as a form, not as a choice. */
.drawer__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.drawer__actions .btn { flex: 1 1 0; min-width: 0; text-align: center; justify-content: center; white-space: nowrap; padding: .95rem .5rem; letter-spacing: .05em; font-size: clamp(10px, 3vw, 12px); }

/* === Breakpoint === */
@media (max-width: 900px) {
.nav__links { display: none; }
.nav__cta { display: none; }
.nav__order { display: none; }
.nav__toggle { display: block; }
}
@media (min-width: 901px) {
.drawer { display: none; }
}

/* ============================================================
   Sub-menus
   Desktop: a panel that drops from the parent link.
   Mobile:  an accordion inside the drawer.
   ============================================================ */

/* Caret. A button, not a pseudo-element on the link, because a parent that is
   also a real page must stay clickable while the caret opens the panel —
   otherwise /menus/ becomes unreachable on touch. Injected by wmc.js, so the
   markup degrades to plain nested lists with no JS. */
.nav__sub-toggle { display: inline-flex; align-items: center; justify-content: center; padding: .35rem; margin-left: .25rem; background: none; border: 0; color: inherit; cursor: pointer; }
.nav__caret { display: block; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform .3s var(--ease); }
.is-open > .nav__sub-toggle .nav__caret { transform: rotate(-135deg) translate(-1px, -1px); }

/* === Desktop panel === */
@media (min-width: 901px) {
	.nav__links .menu-item-has-children { position: relative; }

	/* Hover bridge. The panel sits below the bar's padding, and without this
	   the pointer crosses dead space on the way down and the panel closes
	   under the cursor. */
	.nav__links .menu-item-has-children::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.6rem; }

	.nav__links .sub-menu {
		/* Left-aligned to the parent, not centred on it. Centring put a 208px
		   panel 63px to the left of a 50px label, so it never lined up with the
		   word that opened it. */
		position: absolute; top: calc(100% + 1.4rem); left: 0; z-index: 2;
		min-width: 13rem; display: grid; padding: .6rem 0;
		background: var(--nav-bg); color: var(--nav-ink);
		border: 1px solid var(--nav-rule); border-radius: 10px;
		box-shadow: 0 22px 60px rgba(0, 0, 0, .18);
		opacity: 0; visibility: hidden; pointer-events: none;
		transform: translateY(-8px);
		transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
	}

	.nav__links .sub-menu a { display: block; padding: .6rem 1.4rem; white-space: nowrap; opacity: .74; transition: opacity .25s ease, padding-left .35s var(--ease); }
	.nav__links .sub-menu a:hover { opacity: 1; padding-left: 1.7rem; }

	.nav__links .menu-item-has-children:focus-within > .sub-menu,
	.nav__links .menu-item-has-children.is-open > .sub-menu {
		opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
	}

	/* Flipped by wmc.js when a left-aligned panel would run off the viewport. */
	.nav__links .sub-menu.is-flipped { left: auto; right: 0; }
}

/* Hover only where hovering is real. On touch this rule would latch the panel
   open after a tap and it would need a second tap elsewhere to clear. */
@media (min-width: 901px) and (hover: hover) {
	.nav__links .menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
}

/* === Drawer accordion === */
.drawer__links .menu-item-has-children { display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.drawer__links .menu-item-has-children > a { grid-column: 1; }
.drawer__links .nav__sub-toggle { grid-column: 2; padding: .5rem .75rem; }
.drawer__links .sub-menu { grid-column: 1 / -1; max-height: 0; overflow: hidden; transition: max-height .38s var(--ease); }
.drawer__links .menu-item-has-children.is-open > .sub-menu { max-height: 32rem; }
.drawer__links .sub-menu a { display: block; padding: .4rem 0 .4rem var(--s-2); font-family: var(--font-text); font-size: 1rem; color: var(--nav-ink-soft); }
.drawer__links .sub-menu li:first-child a { padding-top: var(--s-1); }

@media (prefers-reduced-motion: reduce) {
	.nav__links .sub-menu, .drawer__links .sub-menu, .nav__caret { transition: none; }
}

/* ============================================================
   Floating actions — mobile only
   ============================================================ */

/*
 * Armed by wmc.js off the same signal that condenses the bar, so on the
 * homepage it only appears once the hero has scrolled past. Two booking
 * prompts on screen at once is worse than none.
 *
 * Not rendered at all on the booking page: the widget IS the page, and a
 * floating Book a table over it is a distraction pointing at itself.
 */
.nav__float { position: fixed; left: 0; right: 0; bottom: 0; z-index: 58; display: none; gap: .6rem; padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--nav-bg) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--nav-rule); transform: translateY(110%); transition: transform .42s var(--ease); }
.nav__float.is-armed { transform: translateY(0); }
/* One line each. The eyebrow tracking that reads well in the bar is too wide
   for two buttons sharing a 375px screen, and "Order Online" broke onto a
   second line — which makes the pair look like a form, not a choice. */
.nav__float .btn { flex: 1 1 0; justify-content: center; text-align: center; white-space: nowrap; padding: .95rem .5rem; letter-spacing: .05em; font-size: clamp(10px, 3vw, 12px); }

@media (max-width: 900px) {
	.nav__float { display: flex; }
	/* The drawer sits above it, and the float would otherwise cover the last
	   menu item while the drawer is open. */
	body.is-drawer-open .nav__float { transform: translateY(110%); }
}

@media (prefers-reduced-motion: reduce) {
	.nav__float { transition: none; }
}

/* Ghost buttons inside the nav palette.
   .btn--ghost is defined against --ink and --rule for a cream page; on the
   dark bar and drawer that renders dark text on dark ground. Rebind it rather
   than reaching for .btn--ghost-light, which lives in hero.css and therefore
   only loads on the homepage — exactly where the float never shows. */
.nav__float .btn--ghost,
.drawer__actions .btn--ghost { border-color: var(--nav-rule); color: var(--nav-ink); }
.nav__float .btn--ghost:hover,
.drawer__actions .btn--ghost:hover { border-color: var(--nav-ink); }