/* Ritter'Hoft — Semainier du menu de la semaine.
 *
 * Page-scoped stylesheet, loaded only by menu-du-jour. Deliberately NOT part of
 * styles.css: that file is generated and managed by Hallmark, so anything
 * written there is lost on the next regeneration.
 *
 * Layout contract, in priority order:
 *   1. All five days live in the DOM. Google indexes the whole week, and the
 *      page works with JavaScript off (the days simply stack).
 *   2. Desktop shows the five at once so a visitor can compare and decide to
 *      come Thursday. That comparison is the conversion.
 *   3. Mobile keeps the five days visible in a compact vertical list: no day
 *      is hidden behind a tab or another interaction.
 *
 * Structure mirrors the restaurant's actual menu: each day is a fixed
 * entrée / plat / dessert sequence, not a choice of mains.
 *
 * Uses the existing tokens (--gold-deep, --line, --paper-2, ...) so the block
 * belongs to the same system as the carte.
 */

/* ---- Week header -------------------------------------------------------- */

.sem-week {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 16px;
  margin-top: 8px;
}

.sem-week__range {
  font-family: var(--logo);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--gold-deep);
}

/* "midi uniquement" is the single most misreadable fact on this page: someone
   who books for dinner expecting this menu has a bad evening. It is styled as
   a statement, not a footnote. */
.sem-week__when {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}

.sem-week__when svg { width: 14px; height: 14px; color: var(--gold-deep); }

/* ---- Price cards -------------------------------------------------------- */

.sem-prices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 28px;
}

.sem-price {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.4vw, 26px);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

/* The full menu is the offer the house leads with, so it carries the accent. */
.sem-price--lead { border-left: 3px solid var(--gold); }

.sem-price__name {
  font-family: var(--logo);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  margin: 0 0 4px;
  line-height: 1.25;
}

.sem-price__what { font-size: .84rem; color: var(--ink-faint); margin: 0; }

.sem-price__amount {
  font-family: var(--logo);
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
}

/* Legacy tab styles. The selector stays hidden: the week is intentionally
   presented in full at every viewport width. */
.sem-tabs {
  display: none;
  gap: 8px;
  margin-top: 30px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}

.sem-tabs::-webkit-scrollbar { display: none; }
.sem-tabs[data-ready] { display: flex; }

.sem-tab {
  flex: 1 0 auto;
  scroll-snap-align: start;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: .2s ease;
}

.sem-tab__day { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }

.sem-tab__date {
  font-family: var(--logo);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

/* "Aujourd'hui" and "Demain" are longer than "Lun": let them breathe rather
   than wrap mid-word. */
.sem-tab[data-rel] { flex-basis: auto; padding-inline: 18px; }
.sem-tab[data-rel] .sem-tab__day { white-space: nowrap; color: var(--gold-deep); font-weight: 600; }

.sem-tab[aria-selected="true"] {
  border-color: var(--gold);
  background: var(--paper-2);
  color: var(--gold-deep);
}

.sem-tab:hover { border-color: var(--gold); }
.sem-tab:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* ---- The week grid ------------------------------------------------------ */

.sem-grid {
  display: grid;
  gap: 16px;
  margin-top: 26px;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}

.sem-day {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 1.6vw, 22px);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 110px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* The `hidden` attribute is only a UA-stylesheet `display:none`, which the
   `display:flex` above outranks — without this rule every day stays painted
   once the tabs take over, which is exactly the bug this page shipped with. */
.sem-day[hidden] { display: none; }

/* Today is marked, not spotlit. Over-emphasising it nudges people toward
   "today or nothing" and suppresses booking ahead. */
.sem-day[data-today] { border-color: var(--gold); background: var(--paper-2); }

/* Days already gone recede instead of disappearing: on Thursday, Monday is
   still useful context for judging the week, just not an offer. */
.sem-day[data-past] { opacity: .55; }

.sem-day__head {
  text-align: center;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

/* The badge slot exists on every day but is filled on only two. It must occupy
   an identical box when empty, or today's and tomorrow's headers grow taller
   and the Entrée/Plat/Dessert rows stop lining up across the week — which
   defeats the point of a grid meant to be scanned horizontally.
   A min-height guess left a 9px drift (22.87px filled vs 20px empty), so the
   empty slot instead carries a non-breaking space through the same padding and
   font metrics and comes out exactly the same height. */
.sem-day__rel {
  display: inline-block;
  margin-bottom: 7px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--gold-deep);
  color: var(--white);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}

.sem-day__rel:empty { background: transparent; }
.sem-day__rel:empty::before { content: "\00a0"; }

.sem-day__name { font-family: var(--logo); font-size: 1.2rem; margin: 0; line-height: 1.2; }

.sem-day__date {
  display: block;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 3px;
}

/* ---- Courses ------------------------------------------------------------ */

/* An ordered list because the day genuinely is a sequence: entrée, then plat,
   then dessert. The label column makes that legible without reading. */
.sem-courses { list-style: none; margin: 0; padding: 0; display: grid; flex: 1; }

.sem-course { padding: 13px 0; border-bottom: 1px solid rgba(33, 39, 37, .09); }
.sem-course:last-child { border-bottom: 0; }

.sem-course__label {
  display: block;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 4px;
}

.sem-course__dish { display: block; font-weight: 500; font-size: .93rem; line-height: 1.4; }

/* A day can override the week price (the printed menu marks it with an
   asterisk and a footnote — this says it in place instead). */
.sem-day__special {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .8rem;
  color: var(--gold-deep);
}

.sem-day__special b { font-family: var(--logo); font-size: 1.05rem; font-weight: 400; }

/* ---- Per-day booking ---------------------------------------------------- */

/* The whole point of the page is that someone reads Thursday's plat and wants
   Thursday. Sending them to a generic booking panel that opens on today makes
   them re-pick the date they just chose by reading, and that re-pick is where
   they leave. This button carries the day with it (see data-zc-day in
   zenchef.js), so the panel opens already on the right date.
   `margin-top: auto` is what pins it to the bottom of the card: .sem-courses
   has flex:1, so on a day with a shorter dish name the button still lines up
   with its neighbours instead of floating mid-card. */
.sem-day__book {
  margin-top: 16px;
  width: 100%;
  text-align: center;
  padding-block: 11px;
  font-size: .82rem;
}

/* A past day cannot be booked. Hiding it outright would make the card jump
   shorter than the rest of the week and break the horizontal alignment the
   grid exists for, so the slot is kept and only the affordance is removed.
   menu-semaine.js sets data-past from the visitor's own clock. */
.sem-day[data-past] .sem-day__book {
  pointer-events: none;
  opacity: .45;
  filter: grayscale(1);
}

/* ---- Secondary offers --------------------------------------------------- */

.sem-extras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 34px; }

.sem-extra {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: var(--shadow-sm);
}

.sem-extra__kicker {
  color: var(--gold-deep);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .7rem;
  margin-bottom: 8px;
}

.sem-extra__title { font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 0 0 14px; }

.sem-extra__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.sem-extra__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: .92rem;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(33, 39, 37, .07);
}

.sem-extra__list li:last-child { border-bottom: 0; padding-bottom: 0; }

.sem-extra__list b {
  font-family: var(--logo);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sem-extra__note { margin: 14px 0 0; font-size: .8rem; color: var(--ink-faint); }

/* ---- Booking actions ---------------------------------------------------- */

/* At 11:30 for a same-day lunch the phone is not a fallback, it is the primary
   channel — so it gets equal visual weight to the widget. */
.sem-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.sem-actions .btn { min-width: 210px; justify-content: center; }

.sem-actions__note {
  flex: 1 1 100%;
  text-align: center;
  font-size: .82rem;
  color: var(--ink-faint);
  margin: 4px 0 0;
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 1080px) {
  .sem-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  /* A true weekly planner rather than five stacked cards. Each day is one
     compact row: the date forms a stable left rail and the dishes line up on
     the right. The main course carries the visual emphasis because it is the
     information people use to choose their day. */
  .sem-tabs { display: none !important; }
  .sem-grid { grid-template-columns: 1fr; gap: 7px; margin-top: 20px; }
  .sem-day {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    height: auto;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: none;
  }
  .sem-day__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    text-align: left;
    padding: 11px 10px;
    margin: 0;
    border: 0;
    border-right: 1px solid var(--line);
    background: var(--paper-2);
  }
  .sem-day__rel {
    order: 3;
    margin: 4px 0 0;
    padding: 2px 6px;
    font-size: .5rem;
    letter-spacing: .08em;
  }
  .sem-day__rel:empty { display: none; }
  .sem-day__name { font-size: 1.08rem; }
  .sem-day__date { margin: 0; white-space: nowrap; font-size: .61rem; }
  .sem-courses { padding: 7px 12px; gap: 0; }
  .sem-course {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    padding: 3px 0;
    border: 0;
  }
  .sem-course__label { margin: 0; font-size: .5rem; letter-spacing: .1em; }
  .sem-course__dish {
    font-size: .76rem;
    line-height: 1.22;
    color: var(--ink-faint);
    font-weight: 400;
  }
  .sem-course:nth-child(2) { padding-block: 5px; }
  .sem-course:nth-child(2) .sem-course__label { color: var(--gold-deep); font-weight: 700; }
  .sem-course:nth-child(2) .sem-course__dish {
    font-size: .94rem;
    line-height: 1.25;
    font-weight: 650;
    color: var(--ink);
  }
  /* The page already ends with one prominent booking action. Repeating a
     large button five times breaks the weekly scan on a narrow screen. */
  .sem-day__book { display: none; }
  .sem-day[data-today] { box-shadow: inset 3px 0 0 var(--gold); }
  .sem-prices, .sem-extras { grid-template-columns: 1fr; }
  .sem-actions .btn { flex: 1 1 100%; }
}