/* ═══════════════════════════════════════════════════════════
   SITE HEADER AND FOOTER (.mh, .mf)

   One header and one footer on every page, written by sync-shell.js from
   lib/site-shell.js. Linked right after brand.css and uses its tokens, plus
   --mh-rule for hairlines. Every selector is scoped to .mh or .mf (and most
   carry both classes' weight) so a page's own bare element rules, such as
   the legal pages' `p`, `ul`, `li` and `a`, cannot reach in.

   Surfaces are only --bg and --bg-card, so the focus ring (--focus-color,
   3.17:1 on cream, 10.77:1 on the dark background) always has a plain
   neighbour. Nav text is --text-secondary (7.13:1 / 9.91:1), field and
   button edges --text-muted (4.88:1 / 6.68:1), the current-page rule
   --gold-text (5.34:1 / 10.77:1).
   ═══════════════════════════════════════════════════════════ */

:root { --mh-rule: rgba(26,26,46,.14); }
[data-theme="dark"] { --mh-rule: rgba(232,232,240,.14); }

/* The skip link the header partial starts with. Off screen until it takes
   focus; then a gold tab at the top (ink on gold, 7.45:1 either theme). */
body > a.skip-to-content {
  position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
  z-index: 100000; padding: 12px 24px; border-radius: 0 0 12px 12px;
  background: var(--gold); color: var(--on-gold, #1a1a2e);
  font: 700 .9rem/1.4 var(--font-body); text-decoration: none; white-space: nowrap;
}
body > a.skip-to-content:focus { top: 0; outline: 2px solid var(--on-gold, #1a1a2e); outline-offset: -4px; }
#main[tabindex="-1"]:focus, #filterSection[tabindex="-1"]:focus { outline: none; }

.mh, .mh *, .mf, .mf * { box-sizing: border-box; }
.mh ul, .mf ul { list-style: none; margin: 0; padding: 0; }
.mh li, .mf li { margin: 0; padding: 0; }
.mh p, .mf p, .mh h2, .mf h2, .mh form { margin: 0; }
.mh svg, .mf svg { flex: none; }
.mh .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Header ─────────────────────────────────────────────── */
.mh {
  position: sticky; top: 0; z-index: 120;
  background: var(--bg); border-bottom: 1px solid var(--mh-rule);
  font-family: var(--font-body); line-height: 1.3; color: var(--text);
}
/* The header is sticky on every page but the homepage, so fragment links
   and focus moved by the keyboard stop below it: 72px plus a margin, the
   same value restaurant-detail.css sets for the pages that load it. */
html:has(> body > header.mh:not(.mh--hero)) { scroll-padding-top: 80px; }
/* 64px with the hairline (72px from 1100px up). */
.mh .mh-bar {
  max-width: 1320px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px);
  display: flex; align-items: center; gap: 8px; height: 63px;
}
.mh .mh-brand { font-size: 1.15rem; flex: 0 0 auto; min-width: 0; }
.mh .mh-brand .brand-text .brand-tag { display: none; }

/* Bar links and the Towns summary. */
.mh .mh-nav { margin-left: auto; }
.mh .mh-nav > ul { display: flex; align-items: center; }
.mh .mh-nav > ul > li > a,
.mh .mh-dd > summary {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; white-space: nowrap;
  font: 500 .875rem/1.2 var(--font-body); letter-spacing: .02em;
  color: var(--text-secondary); text-decoration: none; cursor: pointer;
}
.mh .mh-nav > ul > li > a::after,
.mh .mh-dd > summary::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1.5px;
  background: var(--gold); transform: scaleX(0); transform-origin: left center;
  transition: transform .2s ease;
}
.mh .mh-dd > summary::after { right: 30px; }
.mh .mh-nav > ul > li > a:hover,
.mh .mh-dd > summary:hover { color: var(--text); }
.mh .mh-nav > ul > li > a:hover::after,
.mh .mh-dd > summary:hover::after { transform: scaleX(1); }
/* This page, or the section it belongs to: a 2px rule 8px under the text. */
.mh .mh-nav > ul > li > a[aria-current="page"],
.mh .mh-nav > ul > li > a.is-section,
.mh .mh-towns.is-section > .mh-dd > summary { color: var(--text); }
.mh .mh-nav > ul > li > a[aria-current="page"]::after,
.mh .mh-nav > ul > li > a.is-section::after,
.mh .mh-towns.is-section > .mh-dd > summary::after {
  height: 2px; bottom: 5px; background: var(--gold-text); transform: none;
}

/* Towns panel. */
.mh .mh-towns { position: relative; }
.mh .mh-dd > summary { list-style: none; }
.mh .mh-dd > summary::-webkit-details-marker,
.mh .mh-menu > summary::-webkit-details-marker { display: none; }
.mh .mh-chev { width: 12px; height: 12px; transition: transform .2s ease; }
.mh .mh-dd[open] .mh-chev { transform: rotate(180deg); }
/* Closed details are display:none, not just hidden by the UA: Chromium
   size-contains a closed <details>, and the absolutely placed panel and
   sheet still counted toward the page's scroll width (14px at 320px). */
.mh .mh-dd:not([open]) > .mh-panel,
.mh .mh-menu:not([open]) > .mh-sheet { display: none; }
.mh .mh-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 130;
  min-width: 260px; padding: 8px;
  background: var(--bg-card); border: 1px solid var(--mh-rule); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.mh .mh-panel a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px;
  font: 400 .9375rem/1.3 var(--font-body); color: var(--text); text-decoration: none; white-space: nowrap;
}
.mh .mh-panel a:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.mh .mh-panel a[aria-current="page"] { font-weight: 600; box-shadow: inset 2px 0 0 var(--gold-text); }
.mh .mh-panel .mh-panel-all { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--mh-rule); }

/* Search: a field with no box, a rule under it, and the button at its end. */
.mh .mh-search { position: relative; display: flex; align-items: center; flex: 0 1 15rem; min-width: 9rem; }
.mh .mh-search input {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; min-height: 44px; margin: 0;
  padding: 0 44px 0 4px; border: 0; border-bottom: 1px solid var(--text-muted); border-radius: 0;
  background: transparent; box-shadow: none; color: var(--text);
  font: 400 .875rem/1.2 var(--font-body);
}
.mh .mh-search input::placeholder { color: var(--text-muted); opacity: 1; }
.mh .mh-search input:focus { border-bottom: 2px solid var(--focus-color); }
.mh .mh-go {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px;
  background: transparent; color: var(--text-secondary); cursor: pointer;
}
.mh .mh-go svg { width: 18px; height: 18px; }
.mh .mh-go:hover { color: var(--text); }
.mh .mh-sep { flex: none; width: 1px; height: 24px; margin: 0 4px; background: var(--mh-rule); }

/* Icon buttons. */
.mh .mh-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px;
  background: transparent; color: var(--text-secondary); cursor: pointer; text-decoration: none;
}
.mh .mh-icon svg { width: 20px; height: 20px; }
.mh .mh-icon:hover { color: var(--text); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.mh .mh-theme .i-sun { display: none; }
[data-theme="dark"] .mh .mh-theme .i-sun { display: block; }
[data-theme="dark"] .mh .mh-theme .i-moon { display: none; }
/* Theme buttons need script. Without it they keep their space but are out
   of sight, the Tab order and the accessibility tree. */
.mh [data-needs-js] { visibility: hidden; }
.mh .mh-sheet [data-needs-js] { display: none; }

/* Menu (below 1100px). */
.mh .mh-menu { flex: none; }
.mh .mh-menu > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border: 1px solid var(--text-muted); border-radius: 12px;
  font: 600 .875rem/1 var(--font-body); color: var(--text); cursor: pointer; user-select: none;
}
.mh .mh-menu > summary svg { width: 18px; height: 18px; }
/* Only the icon changes when the sheet opens. The word stays "Menu", so the
   name matches the visible label and the expanded state alone says the
   sheet is open (no "Close, expanded"). */
.mh .mh-menu > summary .i-x,
.mh .mh-menu[open] > summary .i-burger { display: none; }
.mh .mh-menu[open] > summary .i-x { display: block; }

/* Focus: the same ring on every control. */
.mh a:focus-visible, .mh button:focus-visible, .mh summary:focus-visible, .mh input:focus-visible,
.mf a:focus-visible, .mf button:focus-visible {
  outline: 2px solid var(--focus-color); outline-offset: 3px;
}

/* Phone sheet. */
.mh .mh-sheet {
  position: absolute; left: 0; right: 0; top: 100%;
  height: calc(100vh - 64px); height: calc(100dvh - 64px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); border-top: 1px solid var(--mh-rule); color: var(--text);
}
/* The cookie-offset contract (cookies.js): while the cookie bar is up, the
   sheet stops at its top edge, so the last rows scroll clear of it. */
html.cc-open .mh .mh-sheet {
  height: calc(100vh - 64px - var(--cc-offset, 0px));
  height: calc(100dvh - 64px - var(--cc-offset, 0px));
}
/* While the sheet is open the header rises above the floating bars (the
   homepage compare bar and back-to-top, --z-fab), so nothing covers its
   last rows or the focused control. It stays below modals, toasts and the
   cookie bar. Two rules: a browser without :has() drops only the first, and
   shell.js sets .is-menu-open for it. */
.mh:has(.mh-menu[open]) { z-index: calc(var(--z-fab, 800) + 1); }
.mh.is-menu-open { z-index: calc(var(--z-fab, 800) + 1); }
.mh .mh-sheet-in { max-width: 640px; margin: 0 auto; padding: 16px 16px 32px; }
.mh .mh-search--sheet { flex: none; width: 100%; min-width: 0; margin-bottom: 8px; }
.mh .mh-search--sheet input { height: 48px; min-height: 48px; font-size: 1rem; }
.mh .mh-list a {
  display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 8px 0;
  border-bottom: 1px solid var(--mh-rule);
  font: 600 1.375rem/1.25 var(--font-display); color: var(--text); text-decoration: none;
}
.mh .mh-list .mh-sub { display: block; margin-top: 2px; font: 400 .8125rem/1.4 var(--font-body); color: var(--text-secondary); }
.mh .mh-h {
  margin: 24px 0 4px; font: 600 .75rem/1.3 var(--font-body);
  text-transform: uppercase; letter-spacing: .16em; color: var(--text-secondary);
}
.mh .mh-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.mh .mh-grid li { border-bottom: 1px solid var(--mh-rule); }
.mh .mh-grid a {
  display: flex; align-items: center; min-height: 44px;
  font: 400 .9375rem/1.3 var(--font-body); color: var(--text); text-decoration: none;
}
.mh .mh-list a[aria-current="page"],
.mh .mh-grid a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--gold-text);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.mh .mh-grid a[aria-current="page"] { font-weight: 600; }
.mh .mh-switch {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 56px; margin-top: 16px; padding: 0; border: 0; border-bottom: 1px solid var(--mh-rule);
  background: transparent; color: var(--text); cursor: pointer; text-align: left;
  font: 500 1rem/1.3 var(--font-body);
}
.mh .mh-knob {
  position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px;
  border: 1px solid var(--text-muted); background: transparent; transition: background-color .2s ease;
}
.mh .mh-knob::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--text-muted); transition: transform .2s ease;
}
.mh .mh-switch[aria-pressed="true"] .mh-knob { background: var(--gold); border-color: var(--gold-text); }
.mh .mh-switch[aria-pressed="true"] .mh-knob::after { transform: translateX(18px); background: var(--on-gold, #1a1a2e); }
.mh .mh-trust { margin-top: 20px; font-size: .875rem; line-height: 1.6; color: var(--text-secondary); }

/* Links inside running text, header and footer alike. */
.mh a.u, .mf a.u {
  display: inline; min-height: 0; padding: 0; color: var(--text);
  text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.mh a.u:hover, .mf a.u:hover { text-decoration-color: var(--gold-text); }

/* ── Breakpoints ────────────────────────────────────────── */
@media (min-width: 1100px) {
  .mh .mh-bar { height: 71px; }
  .mh .mh-search-link, .mh .mh-menu { display: none; }
}
@media (min-width: 1280px) {
  .mh .mh-brand .brand-text .brand-tag { display: block; }
}
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .mh .mh-bar { padding-inline: 24px; }
  .mh .mh-nav > ul > li > a, .mh .mh-dd > summary { padding: 0 10px; }
  .mh .mh-nav > ul > li > a::after, .mh .mh-dd > summary::after { left: 10px; right: 10px; }
  .mh .mh-dd > summary::after { right: 28px; }
  .mh .mh-search { flex-basis: 11rem; }
}
@media (max-width: 1099.98px) {
  .mh .mh-nav, .mh .mh-sep, .mh .mh-bar > .mh-search, .mh .mh-theme { display: none; }
  .mh .mh-search-link { margin-left: auto; }
}
@media (max-width: 480px) {
  .mh .mh-brand { font-size: 1.05rem; }
}
/* Below 382px the full lockup, search icon and Menu button (350px) no
   longer fit inside two 16px gutters, so the island mark stays and the name
   is hidden, still read out. */
@media (max-width: 381.98px) {
  .mh .mh-brand .brand-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (max-width: 360px) {
  .mh .mh-grid { grid-template-columns: 1fr; }
}

/* ── Homepage: over the hero ────────────────────────────── */
/* Not sticky: it scrolls away with the hero, and the filter bar
   (css/06-filters.css) stays the only sticky bar on the page. */
.mh.mh--hero {
  position: absolute; top: 0; left: 0; right: 0;
  background: linear-gradient(rgba(15,15,26,.55), rgba(15,15,26,0));
  border-bottom-color: rgba(250,248,243,.16);
}
.mh--hero .mh-nav > ul > li > a,
.mh--hero .mh-dd > summary,
.mh--hero .mh-bar > .mh-icon,
.mh--hero .mh-menu > summary { color: rgba(250,248,243,.88); }
.mh--hero .mh-menu > summary { border-color: rgba(250,248,243,.7); }
.mh--hero .mh-nav > ul > li > a:hover,
.mh--hero .mh-dd > summary:hover,
.mh--hero .mh-bar > .mh-icon:hover,
.mh--hero .mh-nav > ul > li > a[aria-current="page"],
.mh--hero .mh-towns.is-section > .mh-dd > summary { color: #faf8f3; }
.mh--hero .mh-nav > ul > li > a::after,
.mh--hero .mh-dd > summary::after,
.mh--hero .mh-nav > ul > li > a[aria-current="page"]::after,
.mh--hero .mh-towns.is-section > .mh-dd > summary::after { background: var(--gold-light); }
.mh--hero .mh-bar > .mh-icon:hover { background: rgba(250,248,243,.12); }
.mh--hero .mh-bar > a:focus-visible,
.mh--hero .mh-bar > button:focus-visible,
.mh--hero .mh-nav > ul > li > a:focus-visible,
.mh--hero .mh-dd > summary:focus-visible,
.mh--hero .mh-menu > summary:focus-visible { outline-color: var(--gold-light); }
.mh--hero .mh-bar > .mh-search,
.mh--hero .mh-sep { display: none; }
/* Menu open: a solid navy bar keeps the reversed lockup legible above the
   cream sheet. */
.mh--hero:has(.mh-menu[open]) .mh-bar { background: #1a1a2e; }

/* ── Footer ─────────────────────────────────────────────── */
.mf {
  margin-top: 96px; background: var(--bg); border-top: 1px solid var(--mh-rule);
  font-family: var(--font-body); line-height: 1.5; color: var(--text);
}
.mf .mf-inner {
  max-width: 1320px; margin: 0 auto; padding: 64px clamp(16px, 4vw, 48px) 48px;
  display: grid; gap: 48px 64px;
}
.mf .mf-brand { font-size: 1.15rem; }
.mf .mf-lede { margin-top: 16px; font: italic 400 1.25rem/1.45 var(--font-display); color: var(--text); }
.mf .mf-trust { margin-top: 12px; font-size: .875rem; line-height: 1.6; color: var(--text-secondary); }
.mf .mf-cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr; gap: 32px; }
.mf .mf-h {
  margin: 0 0 12px; font: 600 .75rem/1.3 var(--font-body);
  text-transform: uppercase; letter-spacing: .16em; color: var(--text);
}
.mf .mf-cols ul a {
  display: inline-block; padding-block: 5px;
  font-size: .9375rem; line-height: 1.4; color: var(--text-secondary); text-decoration: none;
}
.mf .mf-cols ul a:hover,
.mf .mf-legal a:hover {
  color: var(--text); text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.mf .mf-cols ul a[aria-current="page"],
.mf .mf-legal a[aria-current="page"] { color: var(--text); font-weight: 600; }
.mf .mf-dispatch p { margin-bottom: 16px; font-size: .875rem; line-height: 1.6; color: var(--text-secondary); }
.mf .mf-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--gold-text); border-radius: 12px;
  color: var(--gold-text); font-weight: 600; font-size: .9375rem; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.mf .mf-btn:hover { background: var(--gold); color: var(--on-gold, #1a1a2e); }

.mf .mf-base {
  position: relative; max-width: 1320px; margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 48px) 32px;
  display: grid; grid-template-areas: "legal credit" "copy family"; grid-template-columns: 1fr auto;
  gap: 8px 32px; align-items: center;
  font-size: .8125rem; line-height: 1.5; color: var(--text-secondary);
}
.mf .mf-base::before {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--mh-rule);
  left: clamp(16px, 4vw, 48px); right: clamp(16px, 4vw, 48px);
}
.mf .mf-legal { grid-area: legal; }
.mf .mf-legal ul { display: flex; flex-wrap: wrap; column-gap: 20px; }
.mf .mf-legal a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text); text-decoration: none; }
.mf .mf-copy { grid-area: copy; }
.mf .mf-family { grid-area: family; }
.mf .mf-family-list, .mf .mf-family-list li { display: inline; }
.mf .mf-family-list li + li::before { content: "·"; margin: 0 .4em; }
.mf .mf-credit { grid-area: credit; }
.mf p a { display: inline; min-height: 0; }
.mf .mf-linkbtn {
  display: inline; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--text);
  text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
@media (min-width: 1100px) {
  .mf .mf-inner { grid-template-columns: minmax(340px, 400px) 1fr; }
  .mf .mf-credit, .mf .mf-family { justify-self: end; text-align: right; }
}
@media (max-width: 1099.98px) {
  .mf .mf-cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}
/* Touch: every footer link is a 44px row. */
@media (pointer: coarse), (max-width: 639.98px) {
  .mf .mf-cols ul a, .mf .mf-legal a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  .mf .mf-linkbtn { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; }
}
@media (max-width: 639.98px) {
  .mf { margin-top: 64px; }
  .mf .mf-inner { padding: 48px 16px 32px; }
  .mf .mf-dispatch { grid-column: 1 / -1; }
  .mf .mf-base {
    grid-template-areas: "legal" "copy" "family" "credit"; grid-template-columns: 1fr;
    padding-inline: 16px;
  }
  .mf .mf-base::before { left: 16px; right: 16px; }
}
@media (max-width: 360px) {
  .mf .mf-cols { grid-template-columns: 1fr; }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mh *, .mh *::before, .mh *::after,
  .mf *, .mf *::before, .mf *::after,
  body > a.skip-to-content { transition: none !important; animation: none !important; }
}