/* ==========================================================================
   Georgie's Chelsea — menu component
   --------------------------------------------------------------------------
   The styling half of the store's own menu renderer. Paired with
   menus/menu-georgies.js, which explains in its header why Georgie's doesn't
   use the shared component — so unlike menus/menu.js + menus/menu.css on the
   other store sites, this pair IS the per-store copy and is edited here.

   Split out of styles.css so the menu's behaviour and styling sit together in
   one folder. Nothing else on the site uses these selectors, so this file is
   linked from menu.html alone. Two sources feed it: the page writes the venue
   switch and each panel's tabs / filters / skeleton / container scaffolding,
   and the renderer emits everything inside those containers.

   Everything draws on the tokens in styles.css (:root) plus two of its own,
   --menu-ink and --menu-paper. Re-pointing that pair is how the downstairs
   page runs the same menu in green — see `.theme-night` in styles.css §10.

   Loaded after styles.css, matching the other store sites, so the store's
   page-level theming sits last. It doesn't have to: `.theme-night .menu-page`
   already outranks `.menu-page` on specificity.

   Contents
     1. Menu component    (matches the live menu CSS; themed for day/night)
     2. Skeleton loader
   ========================================================================== */

/* 1. Menu component ---------------------------------------------------- */
/* Rendered by menus/menu-georgies.js. Styling follows the live menu CSS; the
   hard-coded --downstairs-* colours there are replaced by two tokens so the same
   menu can run on the cream page and the green one.

   THE CORNERED SECTION TITLE — the site's signature. Two headings positioned
   absolutely in the section's top-left: `.section-horizontal` lies along the top,
   `.section-vertical` stands up in the left gutter reading bottom-to-top, so the
   pair reads as one phrase turning the corner: "From" ↑ then "The Tap" →. */

.menu-page {
  --menu-ink: var(--secondary-color);
  --menu-paper: var(--primary-color);
  padding: 0 var(--gutter) clamp(3rem, 8vw, 5rem);
  color: var(--menu-ink);
}

/* Venue switch — picks between the upstairs and downstairs menus, which come
   from two separate sheets. Deliberately a size up and visually heavier than the
   category tabs below it, so the hierarchy reads venue → category rather than
   two peer rows of buttons. */
.venue-switch {
  display: flex;
  justify-content: center;
  gap: 0.5em;
  margin: 0 0 clamp(1.5rem, 5vw, 2.5rem);
}

.venue-switch button {
  flex: 0 1 auto;
  min-height: 44px;
  padding: 0.45em 1.6em;
  border: 2px solid var(--menu-ink, var(--secondary-color));
  border-radius: 0;
  background: transparent;
  color: var(--menu-ink, var(--secondary-color));
  font-family: var(--font-heading);
  font-size: var(--text-md);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.venue-switch button[aria-selected="true"] {
  background-color: var(--menu-ink, var(--secondary-color));
  color: var(--menu-paper, var(--primary-color));
}

/* On a phone the two labels plus that generous side padding are wider than the
   row — the pair measured ~458px inside a 389px viewport, so it spilled past both
   edges and "UPSTAIRS" was clipped off-screen. It read as edge-to-edge rather
   than as an overflow because `body { overflow-x: hidden }` was hiding the spill.

   So below the desktop widths the buttons stop being sized by their padding and
   each take an equal half of the padded row, dropping a step down the scale so
   the longer label fits with room to spare. This is the one place a font-size
   changes at a breakpoint: it's a fixed-width control that has to fit a known
   row, not body copy — and it still picks a scale token rather than a one-off
   value. The row's edge margin is .menu-page's gutter. */
@media (max-width: 620px) {
  .venue-switch button {
    flex: 1 1 0;
    min-width: 0;
    /* Tracking and side padding both come in: at 320px the 0.06em tracking alone
       was ~12px of the 112px available, which still clipped "Downstairs". */
    padding-inline: 0.45em;
    letter-spacing: 0.03em;
    font-size: var(--text-sm);
  }
}

/* Only one venue's panel is in the document flow at a time. */
.menu-venue[hidden] {
  display: none;
}

[data-menu-tabs] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 1em;
}

[data-menu-tabs] button {
  border: 2px solid var(--menu-ink);
  border-radius: 0;
  background-color: transparent;
  color: var(--menu-ink);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 5px 10px;
  min-height: 44px;
}

[data-menu-tabs] button:hover,
[data-menu-tabs] button.active {
  background-color: var(--menu-ink);
  color: var(--menu-paper);
  text-decoration: none;
}

/* Tabs scroll inside their own container on phones — no page overflow (MIGRATION.md §2) */
@media (max-width: 700px) {
  [data-menu-tabs] {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [data-menu-tabs]::-webkit-scrollbar {
    display: none;
  }

  [data-menu-tabs] button {
    flex: 0 0 auto;
  }
}

.tabs-hint {
  margin: 0 0 1em;
  font-size: var(--text-sm);
  font-style: italic;
  opacity: 0.7;
}

@media (min-width: 701px) {
  .tabs-hint {
    display: none;
  }
}

[data-menu-diets] {
  margin-bottom: 1.5em;
}

[data-menu-diets] .diet-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1.2em;
}

[data-menu-diets] label {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  font-size: var(--text-sm);
  cursor: pointer;
}

[data-menu-diets] input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  appearance: none;
  border: 2px solid var(--menu-ink);
  border-radius: 3px;
  background: transparent;
  position: relative;
  flex: 0 0 auto;
}

[data-menu-diets] input[type="checkbox"]:checked {
  background: var(--menu-ink);
}

[data-menu-diets] input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 10px;
  border: solid var(--menu-paper);
  border-width: 0 2.5px 2.5px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

.diet-icon-svg {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  display: inline-block;
  color: var(--accent-1);
  flex: 0 0 auto;
}

/* Category heading — the script register */
.menu-category-title {
  font-family: var(--font-script);
  font-size: var(--text-display);
  line-height: 1;
  margin: 1.2em 0 0.5rem;
  color: var(--menu-ink);
}

.menu-category-note {
  max-width: 52ch;
  margin: 0 0 1.4em;
  font-style: italic;
  opacity: 0.8;
}

/* --- the cornered section --- */
.menu-section {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 3em;
  padding-top: 2.5em;
  padding-left: 2.5em;
  color: var(--menu-ink);
}

.menu-section-header {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.section-horizontal {
  position: absolute;
  top: 0;
  left: 0.1em;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--menu-ink);
  white-space: nowrap;
}

.section-vertical {
  position: absolute;
  top: 1.2em;
  left: 0;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--menu-ink);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-orientation: mixed;
  letter-spacing: 0.08em;
  opacity: 0.85;
  white-space: nowrap;
}

/* Items span both grid columns and lay out as a two-up list on desktop */
.menu-section__items {
  grid-column: 1 / -1;
  display: grid;
  gap: 0;
}

@media (min-width: 900px) {
  .menu-section__items {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }
}

.menu-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5em;
  padding: 0.6em;
}

.menu-item.highlighted {
  background: var(--menu-ink);
  border: 5px solid var(--menu-ink);
  border-radius: 0;
}

.menu-item.highlighted h3,
.menu-item.highlighted p,
.menu-item.highlighted .price {
  color: var(--menu-paper);
}

.menu-item.highlighted .diet-icon-svg,
.menu-item.highlighted .menu-item__glyph {
  color: var(--accent-1);
}

.left-col-wrapper {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  flex: 1;
  width: 100%;
}

/* Glassware icons are masked, so one SVG per glass inherits the ink colour of
   whichever theme it lands in instead of shipping a recoloured copy. */
.menu-item__glyph {
  flex: 0 0 auto;
  width: 26px;
  height: 42px;
  background-color: currentColor;
  opacity: 0.85;
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  mask-position: center top;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.main-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1em;
  width: 100%;
}

.text-col {
  flex: 1;
  min-width: 0;
}

.title-with-icons {
  display: flex;
  align-items: center;
  gap: 0.4em;
  flex-wrap: wrap;
}

.menu-item h3 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1.3;
  color: var(--menu-ink);
}

.menu-item p {
  font-size: var(--text-sm);
  font-weight: 300;
  margin: 0.2em 0 0;
  color: var(--menu-ink);
  opacity: 0.85;
}

.price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex: 0 0 auto;
}

.menu-item .price {
  font-weight: 700;
  color: var(--menu-ink);
  white-space: nowrap;
  margin-bottom: 0.2em;
  font-variant-numeric: tabular-nums;
}

.menu-item .icons {
  display: flex;
  gap: 0.4em;
  flex-wrap: wrap;
}

.top-pick {
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--menu-paper);
  color: var(--menu-ink);
  padding: 2px 6px;
  border-radius: 0;
  text-align: center;
  align-self: flex-end;
  font-family: var(--font-heading);
  letter-spacing: 0.12em;
}

.menu-empty,
.menu-error {
  padding: 1.4em 0;
  font-style: italic;
}

.menu-error {
  border: 2px solid var(--menu-ink);
  padding: 1.2em;
  font-style: normal;
}

@media (max-width: 700px) {
  .menu-section {
    grid-template-columns: 1fr;
  }

  .menu-item {
    flex-direction: column;
    gap: 0.5em;
  }

  .main-content {
    flex-direction: row;
  }
}

/* 2. Skeleton loader --------------------------------------------------- */
/* Mirrors the finished layout — cornered brackets, script-scale category line,
   the same item grid — so nothing jumps on load (MIGRATION.md §5.1). */

.menu-skeleton[hidden] {
  display: none;
}

.skeleton-line,
.skeleton-pill {
  background-color: color-mix(in srgb, var(--menu-ink) 12%, transparent);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--menu-ink) 14%, transparent) 50%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.skeleton-tabs {
  display: flex;
  gap: 0.5em;
  overflow: hidden;
  margin-bottom: 1em;
}

.skeleton-tabs .skeleton-pill {
  height: 44px;
  flex: 0 0 auto;
}

.skeleton-category {
  height: 3.5em;
  width: min(58%, 320px);
  margin: 1.2em 0 1.4em;
}

.skeleton-section {
  position: relative;
  margin-bottom: 3em;
  padding-top: 2.5em;
  padding-left: 2.5em;
}

.skeleton-section__h {
  position: absolute;
  top: 0;
  left: 0.1em;
  height: 1.1em;
  width: 130px;
}

.skeleton-section__v {
  position: absolute;
  top: 1.2em;
  left: 0;
  width: 1.1em;
  height: 96px;
}

.skeleton-items {
  display: grid;
  gap: 0;
}

@media (min-width: 900px) {
  .skeleton-items {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }
}

.skeleton-item {
  display: grid;
  gap: 0.5em;
  padding: 0.6em;
}

.skeleton-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.skeleton-item__name { height: 1em; width: 58%; }
.skeleton-item__price { height: 1em; width: 46px; }
.skeleton-item__desc { height: 0.7em; width: 86%; }