/* The restaurant and cafe pages (src/pages/venue.njk): the facts list and
   jump links at the top, the Book a table panel with its live times under a
   day and a party size and the dialog that holds Foys' SevenRooms booking
   page, the photographs, the menus (partials/foys-menu.njk) and the
   questions. The venue page names this file for those two pages alone, so
   site.css stays inside its weight budget. Brass marks the venue zone. The dialog fills a phone's screen and sits centred on a
   wider one; its bar is pale, so the navy Close button keeps its contrast.

   The times grid: a row an hour, a cell a quarter hour, each cell a tap
   target 40px high even at 320px. Book, Ask and Full differ by form as well
   as colour, so they read on a phone in sunlight: solid navy, a dashed navy
   outline, and pale and struck through. A cell outside the hours keeps its
   place in the row, unseen. */
.foys-live { background: var(--card); border: 1px solid var(--canvas-2); border-top: 3px solid var(--brass); padding: .8rem 1rem .2rem; margin: 1rem 0; max-width: 34rem; }
.foys-live[hidden] { display: none; }
.foys-pick { display: flex; flex-wrap: wrap; gap: .6rem 1rem; }
.foys-pick label { display: flex; flex-direction: column; gap: .2rem; font-weight: 600; font-size: .9rem; }
.foys-pick label:first-child { flex: 1 1 11rem; }
.foys-pick select { font: inherit; font-size: 1rem; font-weight: 400; padding: .45rem .5rem; border: 1px solid var(--slate); border-radius: 2px; background: var(--card); color: var(--ink); }
.foys-status { margin: .9rem 0 .3rem; font-weight: 600; }
.foys-live[aria-busy] .foys-status { font-weight: 400; color: var(--slate); }
.foys-key { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .6rem; }
.foys-key .foys-slot { min-height: 0; min-width: 3.4rem; padding: .15rem .5rem; font-size: .85rem; }
.foys-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; list-style: none; margin: 0; padding: 0; }
.foys-grid li { margin: 0; }
.foys-slot { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 2.5rem; border-radius: 2px; font-size: .95rem; font-variant-numeric: tabular-nums; text-decoration: none; }
.foys-slot.is-book { background: var(--navy-2); color: var(--card); font-weight: 600; }
a.foys-slot.is-book:hover { background: var(--navy); }
.foys-slot.is-ask { background: var(--card); color: var(--navy-2); border: 2px dashed var(--navy-2); font-weight: 600; }
a.foys-slot.is-ask:hover { background: var(--canvas); }
/* site.css colours the venue zone's links brass with a rule of three classes
   and two elements; the times are links, so their colours take four. */
.foys-live .foys-grid .foys-slot.is-book { color: var(--card); }
.foys-live .foys-grid .foys-slot.is-ask { color: var(--navy-2); }
.foys-slot.is-full { background: var(--canvas); color: var(--slate); text-decoration: line-through; }
.foys-slot.is-none { visibility: hidden; }
.foys-hint { margin: .5rem 0 0; font-size: .85rem; color: var(--slate); }
.foys-areas { margin: .6rem 0 0; font-size: .9rem; }
.foys-areas:empty { display: none; }
.foys-times { margin: 0 0 .7rem; }
.foys-times dt { margin-top: .35rem; font-size: .9rem; color: var(--slate); }
.foys-times dd { margin: 0; }

.foys-dialog[open] { display: flex; flex-direction: column; padding: 0; border: 0; background: var(--card); width: min(40rem, 100vw); max-width: 100vw; height: min(56rem, 100vh); height: min(56rem, 100dvh); max-height: 100dvh; }
.foys-dialog::backdrop { background: rgb(9 12 33 / .75); }
.foys-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem .5rem .4rem 1rem; background: var(--canvas); border-bottom: 1px solid var(--canvas-2); }
.foys-dialog-bar h2 { margin: 0; font-size: 1.05rem; color: var(--navy-2); }
.foys-dialog iframe { flex: 1; width: 100%; border: 0; }
html:has(.foys-dialog[open]) { overflow: hidden; }

/* The lead paragraph and the facts at the top of the page: a label and a
   sentence a row, the label a fixed column so the sentences line up. */
.venue-lead { font-size: 1.1rem; max-width: 46rem; }
.facts { display: grid; grid-template-columns: 5.5rem 1fr; gap: .45rem 1rem; margin: 1rem 0 1.25rem; max-width: 46rem; }
.facts > div { display: contents; }
.facts dt { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); padding-top: .15rem; }
.facts dd { margin: 0; }

/* Jump links: chips a thumb can hit, wrapping rather than scrolling. */
.jump { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; }
.jump a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .3rem .85rem; border: 1px solid var(--brass); border-radius: 999px; background: var(--card); color: var(--navy-2); font-weight: 600; font-size: .95rem; text-decoration: none; }
.jump a:hover { background: var(--canvas); }
.jump-quiet a { min-height: 2.4rem; font-size: .88rem; font-weight: 500; border-color: var(--canvas-2); }

.photo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: .75rem; list-style: none; margin: 1.5rem 0; padding: 0; }
.photo-strip li { margin: 0; }
.photo-strip figure { margin: 0; }
.photo-strip img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.photo-strip figcaption { font-size: .85rem; color: var(--slate); margin-top: .3rem; }

/* The menus. A dish is a row: its name on the left, its prices on the right
   and never wrapped apart, the member price in brass and first; its
   description and codes under it. The codes are two-letter tags with their
   meaning as the title and in the key. */
.menus { max-width: 46rem; }
.menu-block { margin-top: 2.25rem; }
.menu-block h2 { margin-bottom: .35rem; }
.menu-block h3 { margin: 1.5rem 0 .4rem; padding-bottom: .25rem; border-bottom: 2px solid var(--brass); }
.menu-pricing { margin: .35rem 0; }
/* The surcharge, under each menu's heading beside the prices it applies
   to: a quiet notice in the venue's brass. */
.menu-surcharge { margin: .5rem 0; padding: .35rem .7rem; border-left: 3px solid var(--brass); background: var(--card); font-size: .95rem; }
/* Today's sentence (surcharge-today.js) on a line of its own under the
   surcharge and in the facts list, bold on a day the surcharge applies;
   until the script runs the line names the next public holiday. */
.surcharge-today { display: block; margin-top: .15rem; }
.surcharge-today.is-on { font-weight: 600; }
/* The dietary filter: chips that press in (solid navy) and a sentence
   counting what is shown. A dish the kitchen makes so on request keeps
   its place with a mark saying so. */
.menu-filter { margin: .9rem 0 .4rem; padding: .6rem .8rem .5rem; border: 1px solid var(--canvas-2); background: var(--card); }
.menu-filter[hidden] { display: none; }
/* The legend floats, which takes it off the border and sets it inside the
   box as a line of its own, in the body size and colour: a label half on
   the card and half on the page was hard to read. */
.menu-filter legend { float: left; width: 100%; margin: 0 0 .55rem; padding: 0; font-size: 1rem; font-weight: 600; color: var(--ink); }
.menu-filter-row { clear: both; }
.menu-filter-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.menu-filter-btn, .menu-filter-clear { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .3rem .85rem; border: 1px solid var(--navy-2); border-radius: 999px; background: var(--card); color: var(--navy-2); font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; }
.menu-filter-btn[aria-pressed="true"] { background: var(--navy-2); color: var(--card); }
.menu-filter-clear { border-color: var(--canvas-2); font-weight: 500; }
.menu-filter-clear[hidden] { display: none; }
.menu-filter-status { margin: .5rem 0 0; font-size: .92rem; }
.menu-filter-status:empty { display: none; }
.menu-item[hidden], .menu-section[hidden] { display: none; }
.menu-ask { display: inline-block; margin-left: .35rem; padding: 0 .45rem; border: 1px dashed var(--brass-ink); border-radius: 2px; font-size: .78rem; line-height: 1.35rem; color: var(--brass-ink); white-space: nowrap; vertical-align: baseline; }
.menu-key { font-size: .85rem; color: var(--slate); margin: .35rem 0 0; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-item { margin: 0; padding: .55rem 0; border-bottom: 1px solid var(--canvas-2); }
.menu-item:last-child { border-bottom: 0; }
.menu-row { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.menu-name { font-weight: 600; }
.menu-price { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-member { color: var(--brass-ink); font-weight: 600; }
.menu-price .menu-member::after { content: ""; display: inline-block; width: 1px; height: .9em; margin: 0 .5rem; background: var(--canvas-2); vertical-align: -.1em; }
.menu-desc { display: block; margin: .1rem 0 0; font-size: .92rem; color: var(--slate); }
.menu-extra, .menu-note { margin: .15rem 0 0; font-size: .85rem; color: var(--slate); }
.menu-note { margin-top: .6rem; }
.menu-codes abbr { display: inline-block; padding: 0 .3rem; margin-left: .15rem; border: 1px solid var(--canvas-2); border-radius: 2px; font-size: .72rem; line-height: 1.35rem; letter-spacing: .03em; color: var(--slate); text-decoration: none; cursor: help; }
.menu-key .menu-codes abbr { margin: 0 .1rem 0 0; }
.menu-table { font-size: .92rem; }
.menu-table th, .menu-table td { padding: .4rem .45rem; }
.menu-table .menu-num { text-align: right; width: 3.6rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* On a phone the three price columns give the wine its name back. */
@media (max-width: 26rem) {
  .menu-table th, .menu-table td { padding: .4rem .3rem; }
  .menu-table .menu-num { width: 2.5rem; }
}
.menu-table th.menu-num { font-size: .72rem; }
.menu-table-name { font-weight: 600; }
.menu-table .menu-desc { font-weight: 400; }
/* A wine's tasting note and the dishes it goes with, as small chips, in a
   row of their own under the wine, the full width of the table, with no
   line between the two rows; on a dish, the wine or beer it goes with at
   the price of the pour. A Draft mark heads the menus while the file says
   the notes await Foys' confirmation. */
.menu-table tr:has(+ .menu-table-more) td { border-bottom: 0; }
.menu-table-more td { border-top: 0; padding-top: 0; }
.menu-tasting { display: block; font-size: .85rem; font-weight: 400; color: var(--ink); }
.menu-pairs { display: block; margin: .15rem 0 0; font-size: .8rem; font-weight: 400; color: var(--slate); }
.menu-pairs a { display: inline-block; margin: .15rem .1rem 0 0; padding: 0 .35rem; border: 1px solid var(--canvas-2); border-radius: 2px; line-height: 1.45rem; text-decoration: none; }
.menu-pairs a:hover { border-color: var(--brass); }
.menu-pair { margin: .2rem 0 0; font-size: .88rem; }
.menu-draft { margin: .35rem 0; }

/* The questions: a heading and an answer each, always open, so a reader
   and a search engine see the same words. */
.faq { max-width: 46rem; margin-top: 2rem; }
.faq h3 { margin: 1.1rem 0 .25rem; font-size: 1.02rem; }
.faq p { margin: 0; }