/* Responsive layout: phone, tablet, desktop.
 *
 * The pages were built entirely with inline styles and, until this file, had
 * no width-based media query anywhere — the only @media rule in the whole site
 * was prefers-reduced-motion. Desktop held together on clamp() and auto-fit
 * grids; a phone did not.
 *
 * Not authored mobile-first, and deliberately so. Mobile-first means the base
 * rules are the phone rules, but the base here is a style attribute on every
 * element of seven hand-built pages — there is no base stylesheet to invert.
 * Re-authoring those inline styles is a rewrite with no visible payoff and a
 * large chance of breaking a working site, so this sheet layers over them
 * instead. The outcome is the same one mobile-first is for: nothing overflows,
 * nothing is too small to tap, and every section fits a 375px screen.
 *
 * Every rule here carries !important out of necessity, not preference: an
 * inline style attribute outranks any selector in an external sheet, and the
 * markup is generated, so moving those styles out is a separate job. Keep the
 * selectors structural (nav > div, not .some-class) — the generated markup has
 * no stable class names to hook. Where structure is not enough, the inline
 * style itself is the hook: [style*="padding:80px 24px"] matches the section
 * padding the pages actually use, which is exact in a way guessing is not.
 *
 * Every such selector is written twice, once tight and once spaced. The page
 * runtime re-serialises inline styles when it renders — the HTML ships
 * padding:80px 24px and the DOM ends up with padding: 80px 24px — so a single
 * tight selector silently matches only account.html, the one page the runtime
 * does not touch. That failure is invisible: the rule is valid, it just never
 * applies.
 *
 * Breakpoints, and why these:
 *   <= 1024px  tablets and small laptops — the wide section padding only
 *   <=  820px  the drawer nav takes over; layouts are single column below here
 *   <=  520px  phones proper
 */

/* --- Every width ---------------------------------------------------------
 * Media images scale with their column. Scoped away from the absolutely
 * positioned hero covers, which are already sized to their container and
 * would collapse if given height:auto. No !important on height, so an inline
 * height (the 44px logo, the 1.35em inline icons) still wins.
 */
img,
video,
iframe {
  max-width: 100%;
}

img:not([style*="position:absolute"]):not([style*="height"]) {
  height: auto;
}

/* Nothing may push the page sideways at any width. */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* --- Tablets and small laptops ------------------------------------------
 * Layout is fine here — the grids are auto-fit and reflow themselves. What
 * does not survive is the desktop section padding: 100px of vertical air per
 * section reads as generous at 1440px and as scrolling past nothing at 900.
 */
@media (max-width: 1024px) {
  [style*="padding:100px 24px"], [style*="padding: 100px 24px"] {
    padding: 64px 28px !important;
  }

  [style*="padding:80px 24px"], [style*="padding: 80px 24px"] {
    padding: 56px 28px !important;
  }
}

@media (max-width: 820px) {

  /* --- Navigation -------------------------------------------------------
   * The five links sat in a flex row with margin-left:auto and wrap enabled.
   * At 390px that wrapped into a ragged three-line block roughly 180px tall,
   * and because the bar is sticky it stole that space at every scroll
   * position — over a quarter of the viewport, permanently.
   *
   * Now: logo and Book Now share the first line, the links get their own
   * line underneath, spread edge to edge.
   */
  nav {
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    padding: 10px 14px !important;
  }

  nav > a:first-of-type img {          /* logo */
    height: 34px !important;
  }

  nav > div {                          /* the link group */
    order: 3 !important;
    width: 100% !important;
    margin-left: 0 !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    font-size: 11.5px !important;
    letter-spacing: .04em !important;
  }

  /* Icons are charming at desktop size and unreadable at 11px next to a
   * shrunken label. The words survive; the pictures go. */
  nav > div a img {
    display: none !important;
  }

  nav > div a {
    gap: 0 !important;
    padding: 9px 2px !important;       /* a real tap target, not a 19px line */
  }

  nav > a:last-of-type {               /* Book Now */
    margin-left: auto !important;
    font-size: 11.5px !important;
    padding: 10px 14px !important;
    white-space: nowrap !important;
  }

  /* --- Drawer nav -------------------------------------------------------
   * Everything below applies only once mobile-nav.js has marked <html>, so
   * a failed or blocked script leaves the wrapped bar above intact rather
   * than a logo with no links.
   *
   * With the drawer in play the bar is a single line: logo, Book Now, and
   * the toggle. The five links move into the panel where they get room for
   * their icons and a 56px row each.
   */
  .js-nav nav {
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  .js-nav nav > div {                  /* the inline link group */
    display: none !important;
  }

  .js-nav nav > a:last-of-type {       /* Book Now */
    margin-left: auto !important;
    order: 0 !important;
  }

  .mnav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(47, 230, 216, .28);
    border-radius: 4px;
    background: transparent;
    color: #EDEDEB;
    cursor: pointer;
  }

  .mnav-toggle:active {
    background: rgba(47, 230, 216, .12);
  }

  /* Three bars drawn from one element: the middle is the box, the outer two
     are its pseudo-elements. Turns into an ✕ when the panel is open. */
  .mnav-bars,
  .mnav-bars::before,
  .mnav-bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
  }

  .mnav-bars::before,
  .mnav-bars::after {
    content: "";
    position: absolute;
  }

  .mnav-bars {
    position: relative;
  }

  .mnav-bars::before { transform: translateY(-6px); }
  .mnav-bars::after  { transform: translateY(6px); }

  .mnav-toggle[aria-expanded="true"] .mnav-bars {
    background: transparent;
  }

  .mnav-toggle[aria-expanded="true"] .mnav-bars::before {
    transform: translateY(0) rotate(45deg);
  }

  .mnav-toggle[aria-expanded="true"] .mnav-bars::after {
    transform: translateY(0) rotate(-45deg);
  }

  /* The panel itself. Slides from the right over a scrim; both fade with the
     same 220ms so the two never look out of step. */
  .mnav-root {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 999;
  }

  .mnav-root[hidden] {
    display: none !important;
  }

  .mnav-scrim {
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 7, .72);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .22s ease;
  }

  .mnav-root.is-open .mnav-scrim {
    opacity: 1;
  }

  .mnav-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(84vw, 340px);
    display: flex;
    flex-direction: column;
    padding: 14px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    background: #0B0B0C;
    border-left: 1px solid rgba(47, 230, 216, .18);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .6);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .22s ease;
  }

  .mnav-root.is-open .mnav-panel {
    transform: translateX(0);
  }

  .mnav-close {
    align-self: flex-end;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8A8A88;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  .mnav-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
  }

  .mnav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 0 4px;
    color: #EDEDEB;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(237, 237, 235, .08);
  }

  .mnav-link img {
    height: 26px;
    width: 26px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .mnav-link.is-current {
    color: #2FE6D8;
  }

  .mnav-link:active {
    color: #2FE6D8;
  }

  .mnav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin-top: 24px;
    background: #2FE6D8;
    color: #0B0B0C;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
  }

  /* The page behind a modal panel must not scroll with it. */
  .mnav-locked,
  .mnav-locked body {
    overflow: hidden !important;
  }

  /* --- Section rhythm ---------------------------------------------------
   * The desktop sections are 80-100px of padding top and bottom with 24px at
   * the sides. On a 375px screen that is a third of the viewport spent on
   * emptiness before any content, and 24px each side of a 327px column.
   */
  [style*="padding:100px 24px"], [style*="padding: 100px 24px"] {
    padding: 44px 18px !important;
  }

  [style*="padding:80px 24px"], [style*="padding: 80px 24px"] {
    padding: 40px 18px !important;
  }

  [style*="padding:48px 24px"], [style*="padding: 48px 24px"] {
    padding: 32px 18px !important;
  }

  [style*="padding:88px 24px"], [style*="padding: 88px 24px"] {
    padding: 40px 18px !important;
  }

  /* --- Tap targets ------------------------------------------------------
   * Measured at 375px before this: fifteen links under 40px on the home page
   * alone, footer rows at 17px tall. The guidance everyone quotes is 44px;
   * the reason is that a fingertip is about 9mm and does not aim precisely.
   *
   * Scoped to links that are already laid out as blocks or buttons. A link
   * inside a paragraph is left alone — stretching it to 44px would break the
   * line box around it and it is read, not aimed at.
   */
  /* box-sizing matters here and is easy to miss: only account.html sets
     border-box globally, so everywhere else min-height is the height of the
     content box and the element's own padding is added on top. Without this
     the nav's Book Now went from 36px to 64px — a button that grew by half
     again in the name of being easier to tap. */
  footer a,
  a[style*="inline-flex"] {
    box-sizing: border-box !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Short footer words — "Eat", "Home" — clear 44px in height and miss it by
     half in width. The padding is what makes them hittable, not the label. */
  footer a {
    min-width: 44px !important;
    justify-content: center !important;
    padding: 0 6px !important;
  }

  /* Footer link rows need the height without the columns collapsing. */
  footer > div > div {
    gap: 4px 18px !important;
  }

  /* The logo is the way back to the home page and was 71x34 — the one link
     on every page that everybody reaches for. */
  nav > a:first-of-type {
    box-sizing: border-box !important;
    min-height: 44px !important;
    align-items: center !important;
  }

  /* Standalone "Full calendar →" / "See the full menu →" links: bold, upper
     case, no display of their own, and 17px tall. Excluding the inline-flex
     ones leaves the nav and the buttons alone, which are handled above. */
  a[style*="text-transform:uppercase"]:not([style*="inline-flex"]):not([style*="background:"]):not([style*="background: "]),
  a[style*="text-transform: uppercase"]:not([style*="inline-flex"]):not([style*="background:"]):not([style*="background: "]) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }

  /* --- Headings ---------------------------------------------------------
   * Most headings already carry clamp() and look after themselves. These are
   * the fixed-size ones that do not, and at 375px they set the line width
   * rather than the other way round.
   */
  h1[style*="font-size:44px"], h1[style*="font-size: 44px"],
  h1[style*="font-size:48px"], h1[style*="font-size: 48px"],
  h1[style*="font-size:54px"], h1[style*="font-size: 54px"] {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.05 !important;
  }

  h2[style*="font-size:32px"], h2[style*="font-size: 32px"],
  h2[style*="font-size:34px"], h2[style*="font-size: 34px"],
  h2[style*="font-size:36px"], h2[style*="font-size: 36px"],
  h2[style*="font-size:40px"], h2[style*="font-size: 40px"] {
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.1 !important;
  }

  /* Long unbroken strings — an address, a ref, a URL in an error — must wrap
   * rather than widen the page. */
  h1, h2, h3, p, a, span, li, td {
    overflow-wrap: break-word;
  }

  /* --- Forms ------------------------------------------------------------
   * iOS Safari zooms the whole page when a focused field's text is under
   * 16px, and never zooms back out. Every field on the site was 13-14px.
   */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Comfortable hit areas on the controls people actually tap. */
  button, input[type="submit"] {
    min-height: 44px !important;
  }

  /* Nothing should ever be able to push the page sideways. */
  html, body {
    overflow-x: hidden !important;
  }

  img, video, iframe, table {
    max-width: 100% !important;
  }
}

/* The drawer and its toggle exist in the DOM at every width — the script does
   not rebuild on resize — so they stay hidden until the media query above
   turns them on. */
.mnav-toggle,
.mnav-root {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .mnav-panel,
  .mnav-scrim,
  .mnav-bars,
  .mnav-bars::before,
  .mnav-bars::after {
    transition: none !important;
  }
}

/* Phones proper — tighten the padding the desktop layout is generous with. */
@media (max-width: 520px) {
  nav > div {
    font-size: 11px !important;
  }

  /* At this width the drawer holds the links, so the no-JS shrink below is
     only a fallback. */
  .js-nav nav > div {
    display: none !important;
  }

  /* 10px credit text in the footer is below the readable floor. */
  footer, footer * {
    font-size: max(12px, 1em) !important;
  }

  /* The last of the desktop padding. Below 520 the side gutters matter more
     than the vertical rhythm — content is the width of a thumb's reach. */
  [style*="padding:100px 24px"], [style*="padding: 100px 24px"],
  [style*="padding:88px 24px"], [style*="padding: 88px 24px"],
  [style*="padding:80px 24px"], [style*="padding: 80px 24px"] {
    padding: 36px 16px !important;
  }

  [style*="padding:48px 24px"], [style*="padding: 48px 24px"] {
    padding: 28px 16px !important;
  }

  /* Cards and panels carry their own inner padding on top of the section's. */
  [style*="padding:28px"], [style*="padding: 28px"],
  [style*="padding:24px"], [style*="padding: 24px"] {
    padding: 18px !important;
  }

  /* A two-up grid at 375px gives each cell about 150px, which is narrower
     than the words inside it. Anything still in columns goes single file. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}