/* ===========================================================================
   Pasta e Sfizi — menu styles for the website.

   For whoever builds pastaesfizi.ch. This is the same typographic treatment
   the printed A4 and the in-restaurant tablet use, rewritten to drop into
   somebody else's theme.

   ---------------------------------------------------------------------------
   COPY THIS FILE INTO THE THEME. DO NOT LINK TO IT FROM RMN.
   ---------------------------------------------------------------------------

   It is served from the till so you have somewhere to copy it from, and for
   no other reason. A <link> pointing at rmn.pastaesfizi.ch is a menu page
   that loses its layout the moment a till in Lausanne reboots during service
   — which is the same failure the feed's caching rules exist to prevent, in a
   different coat. Copy it, own it, change it.

   Everything is scoped under `.pes-menu`, so nothing here can reach the rest
   of the site. Nothing is !important. There is no reset.

   By default it inherits the theme's own body font and colour; the custom
   properties below are the seams. Override them in your own stylesheet after
   this one and every rule follows.

   The markup it expects is documented in docs/menu-api-contract.md, and maps
   one-to-one onto the JSON from /menu/api/v1/.
   =========================================================================== */

.pes-menu {
  /* ── the seams ─────────────────────────────────────────────────────────
     Override these and leave the rest alone. */
  --pes-ink: inherit;                    /* dish names, prices */
  --pes-ink-soft: #6d6357;               /* descriptions */
  --pes-ink-faint: #9a9084;              /* allergens, small print */
  --pes-accent: #8c6d34;                 /* section headings */
  --pes-rule: #ded5c6;                   /* hairlines */
  --pes-tint: rgba(140, 109, 52, .06);   /* note panels */

  /* Inherits the theme's body face unless you say otherwise. A menu set in
     the site's own serif looks like it belongs to the site; one that arrives
     with its own font looks like an embed. */
  --pes-font: inherit;
  --pes-font-heading: inherit;

  --pes-size: 1rem;                      /* dish name */
  --pes-size-desc: .9375rem;             /* description */
  --pes-size-meta: .75rem;               /* allergens, diet */
  --pes-gap: 1.75rem;                    /* between sections */

  font-family: var(--pes-font);
  color: var(--pes-ink);
  max-width: 44rem;
  margin-inline: auto;
  /* `text-wrap: balance` on headings needs a modern browser and degrades to
     nothing, which is the correct degradation. */
  line-height: 1.5;
}

/* ── sections ───────────────────────────────────────────────────────────── */

.pes-menu__section { margin: 0 0 var(--pes-gap); }

.pes-menu__heading {
  font-family: var(--pes-font-heading);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pes-accent);
  margin: 0 0 .25rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--pes-rule);
  text-wrap: balance;
}

.pes-menu__heading-note {
  font-size: var(--pes-size-desc);
  font-style: italic;
  color: var(--pes-ink-soft);
  margin: .625rem 0 0;
}

/* A prix fixe: one price for the whole section, and the dishes under it carry
   none. Comes from `fixed_price` on the group. When it is set, the items'
   own `price` is null — do not invent one. */
.pes-menu__fixed-price {
  font-size: 1.25rem;
  margin: .625rem 0 0;
  font-variant-numeric: tabular-nums;
}

/* ── dishes ─────────────────────────────────────────────────────────────── */

.pes-menu__items { list-style: none; margin: 0; padding: 0; }

.pes-menu__item {
  padding: .875rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--pes-rule) 50%, transparent);
}
/* color-mix is recent; this is the fallback for anything that ignores it. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .pes-menu__item { border-bottom-color: var(--pes-rule); }
}
.pes-menu__item:last-child { border-bottom: 0; }

.pes-menu__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .875rem;
}

.pes-menu__name {
  font-family: var(--pes-font-heading);
  font-size: var(--pes-size);
  font-weight: 500;
  margin: 0;
  line-height: 1.3;
}

.pes-menu__price {
  white-space: nowrap;
  color: var(--pes-ink-soft);
  /* Digits line up down the right-hand edge, which is most of what makes a
     menu look set rather than typed. */
  font-variant-numeric: tabular-nums;
}

.pes-menu__desc {
  margin: .3125rem 0 0;
  font-size: var(--pes-size-desc);
  color: var(--pes-ink-soft);
  /* A measure, not a width: descriptions read badly across a wide column. */
  max-width: 54ch;
}

.pes-menu__meta {
  margin: .4375rem 0 0;
  font-size: var(--pes-size-meta);
  font-family: var(--pes-font-heading);
}

.pes-menu__diet {
  display: inline-block;
  padding: .125rem .5rem;
  margin-right: .375rem;
  border-radius: .625rem;
  background: #e7efe2;
  color: #4d6b3d;
  letter-spacing: .04em;
}

.pes-menu__allergens { color: var(--pes-ink-faint); }

/* `available: false` in the feed — RMN still lists it, the kitchen has it off.
   Shown rather than hidden on purpose: a guest who cannot see it will ask for
   it anyway and be told no. Drop the item instead if you prefer, but then drop
   it, do not style it as available. */
.pes-menu__item.is-unavailable .pes-menu__name,
.pes-menu__item.is-unavailable .pes-menu__price {
  color: var(--pes-ink-faint);
  text-decoration: line-through;
}
.pes-menu__item.is-unavailable .pes-menu__desc { color: var(--pes-ink-faint); }

.pes-menu__sold-out {
  display: inline-block;
  padding: .125rem .5rem;
  margin-right: .375rem;
  border-radius: .625rem;
  background: #f0e2e0;
  color: #9c5346;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── notes and declarations ─────────────────────────────────────────────── */

/* From `texts` in the payload, and from a group's own `notes`. Much of this is
   obligation rather than decoration — Swiss law wants the origin of meat and
   fish declared — so it must not be styled as something skippable. */
.pes-menu__note {
  font-size: var(--pes-size-desc);
  color: var(--pes-ink-soft);
  background: var(--pes-tint);
  border-radius: .375rem;
  padding: .6875rem .875rem;
  margin: 0 0 1.125rem;
}
.pes-menu__note--foot { margin-top: 1.625rem; }

/* From `machine_translation_notice`. Print it when the feed sends one. It is
   the honest alternative to implying a person checked a hundred Japanese
   sentences, and the printed card carries the identical line. */
.pes-menu__disclosure {
  margin: 1.25rem 0 0;
  font-size: var(--pes-size-meta);
  color: var(--pes-ink-faint);
}

/* ── the weekly card ────────────────────────────────────────────────────── */

.pes-menu__day { margin: 0 0 calc(var(--pes-gap) * 1.4); }

.pes-menu__day-name {
  font-family: var(--pes-font-heading);
  font-size: 1.375rem;
  font-weight: 500;
  margin: 0 0 .875rem;
  padding-bottom: .375rem;
  border-bottom: 2px solid var(--pes-accent);
}

/* Mark today's with this and it stands out on a page showing the whole week. */
.pes-menu__day.is-today .pes-menu__day-name { color: var(--pes-accent); }

/* ── narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 30rem) {
  .pes-menu { --pes-size: .9375rem; --pes-size-desc: .875rem; }
  /* The price drops under the name rather than squeezing it to two words a
     line, which is what space-between does to a long dish name on a phone. */
  .pes-menu__line { flex-direction: column; gap: .125rem; }
  .pes-menu__price { align-self: flex-start; }
}

/* ── dark themes ────────────────────────────────────────────────────────────
   Only the values that are hard-coded above. Everything else already inherits
   from the theme, so a dark site gets a dark menu without help. Delete this
   block if the site commits to one appearance. */

@media (prefers-color-scheme: dark) {
  .pes-menu {
    --pes-ink-soft: #b8ac9b;
    --pes-ink-faint: #837868;
    --pes-accent: #c9a457;
    --pes-rule: #3a352c;
    --pes-tint: rgba(201, 164, 87, .08);
  }
  .pes-menu__diet { background: #24301f; color: #a9c795; }
  .pes-menu__sold-out { background: #33211e; color: #d99a8b; }
}

/* ── somebody will print the page ───────────────────────────────────────── */

@media print {
  .pes-menu { max-width: none; color: #000; }
  .pes-menu__note { background: none; padding-left: 0; padding-right: 0; }
  .pes-menu__section { break-inside: avoid-page; }
  .pes-menu__item { break-inside: avoid; }
}