/* =========================================================
   Juffinger's Gaumenwerk — printable menu sheet component
   Ported from the Café-Zillertal "menu sheet", rebuilt for the
   Gaumenwerk Wochenmenüplan: a weekday × ABO matrix instead of
   label+text rows.

   Everything is sized in cqw (container-query units), so the SAME
   markup fits a small card thumbnail, the lightbox and an A4
   printout without a single font-size override.

   Colours sampled from the client's own Menüplan PDF:
     purple headline/logo  #4d3555 – #544365
     weekday labels        #685c82
     frame + column rules  #284259  (navy, not black)
   ========================================================= */
/* --- fit wrapper -------------------------------------------------------------
   Аркуш ЗАВЖДИ верстається в справжньому розмірі A4 (794×1123px = 210×297mm при
   96dpi) і лише масштабується під контейнер через transform:scale(--ms-k), який
   ставить fitMenuSheets() у menu-sheet.js.
   Чому не просто width:100% + cqw: усі розміри тоді масштабуються, але метрики
   шрифта округлюються до пікселя на КОЖНОМУ рядку, і на ~30 рядках це давало
   +29px висоти — мініатюра в картці обрізала контактний блок, хоча у великому
   вигляді той самий аркуш вміщався. Фіксована база = однакові метрики скрізь:
   картка, великий вигляд і друк — це одна й та сама сторінка в різному масштабі.
   Бонус: --ms-k:1 у print дає рівно A4 без жодних перерахунків. */
.ms-fit {
  position: relative;
  width: 100%;
  aspect-ratio: 210 / 297;
  overflow: hidden;
}
.ms-fit > .menu-sheet {
  position: absolute;
  top: 0;
  left: 0;
  width: 794px;
  height: 1123px;
  transform: scale(var(--ms-k, 1));
  transform-origin: 0 0;
}

.menu-sheet {
  width: 100%;
  aspect-ratio: 210 / 297;                 /* A4 portrait */
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  font-family: "Fraunces", Georgia, serif;
  background: var(--ms-bg);
  color: var(--ms-fg);
}
.menu-sheet * { box-sizing: border-box; }

.menu-sheet--light {
  --ms-bg: #ffffff;
  --ms-fg: #1c1c1c;
  --ms-purple: #543f63;
  --ms-purple-d: #4d3555;
  --ms-purple-l: #685c82;
  --ms-frame: #284259;
  --ms-head-fg: #ffffff;
  --ms-rule: rgba(40, 66, 89, .55);
}
/* інверсія для темного варіанта: та сама сітка, фон — фірмовий фіолетовий */
.menu-sheet--dark {
  --ms-bg: #4d3555;
  --ms-fg: #f4ecef;
  --ms-purple: #f1e7df;
  --ms-purple-d: #2c1b33;
  --ms-purple-l: #d8c9d3;
  --ms-frame: rgba(241, 231, 223, .55);
  --ms-head-fg: #2c1b33;
  --ms-rule: rgba(241, 231, 223, .4);
}

.menu-sheet-inner {
  position: absolute;
  inset: 2.4cqw;
  border: .28cqw solid var(--ms-frame);
  padding: 3.4cqw 3.6cqw 2.6cqw;
  display: flex;
  flex-direction: column;
}

/* --- logo head (the purple square from the client's PDF) ---
   aspect-ratio обов'язковий: без нього висота блоку з'являється лише після
   завантаження картинки, і сторінка міряється то на 84px нижчою, то вищою
   (логотип квадратний — 200×200). */
.ms-brand { text-align: center; margin-bottom: 1.2cqw; }
.ms-brand img {
  display: block;
  width: 12cqw;
  aspect-ratio: 1;
  height: auto;
  margin: 0 auto;
}

/* --- headline block --- */
.ms-headline {
  margin: 0;
  text-align: center;
  color: var(--ms-purple);
  font-weight: 700;
  font-size: 5.8cqw;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1;
}
.ms-validity {
  margin: 1.4cqw 0 0;
  text-align: center;
  font-size: 2.9cqw;
  letter-spacing: .01em;
  font-weight: 400;
}

/* --- the matrix ---------------------------------------------------------
   One CSS grid for the whole table: first column = weekday label, then one
   column per ABO. Cells are placed by the renderer in row-major order, so
   adding an ABO column needs no CSS change — only --ms-cols. */
/* flex:0 0 auto — НЕ flex:1. З flex:1 таблиця стискалась нижче свого вмісту
   (min-height:0), рядки виходили за її бокс на ~74px і накладались на футер,
   хоча загального overflow сторінка не показувала. Тепер таблиця займає свою
   висоту, а вільний простір забирає margin-top:auto у .ms-foot. */
.ms-table {
  flex: 0 0 auto;
  margin-top: 2.4cqw;
  display: grid;
  grid-template-columns: 10.5cqw repeat(var(--ms-cols, 3), minmax(0, 1fr));
  column-gap: 1.2cqw;
  align-content: start;
}
.ms-corner { /* empty top-left cell above the weekday column */ }
.ms-col-head {
  background: var(--ms-purple-d);
  color: var(--ms-head-fg);
  text-align: center;
  font-weight: 700;
  font-size: 2.8cqw;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .8cqw .6cqw;
  margin-bottom: 1cqw;
}
.ms-day {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: .9cqw 1cqw .9cqw 0;
  color: var(--ms-purple-l);
  font-weight: 600;
  font-size: 2.4cqw;
  letter-spacing: .01em;
  text-align: right;
}
.ms-cell {
  padding: .7cqw .8cqw;
  text-align: center;
  font-size: 2cqw;
  line-height: 1.28;
  white-space: pre-line;
  /* вертикальні лінійки між ABO-колонками — як у PDF клієнта */
  border-left: .16cqw solid var(--ms-rule);
}
/* остання колонка теж має праву межу, щоб таблиця виглядала замкненою */
.ms-cell--last { border-right: .16cqw solid var(--ms-rule); }

/* --- footer block -------------------------------------------------------
   Розміри тут (як і в таблиці вище) підібрані так, щоб типовий тижневий план —
   3 колонки × 5 днів із рядками до чотирьох рядків тексту — вміщався в A4 із
   запасом. Аркуш — це сторінка фіксованого формату, тому дуже довгі описи
   все одно можуть не влізти: overflow:hidden їх обріже (так само працює
   оригінальне рішення на cafe-zillertal). */
/* margin-top:auto — футер тримається низу сторінки, коли таблиця коротка
   (напр. три дні замість пʼяти), і просто зсувається вниз, коли довга */
.ms-foot { margin-top: auto; padding-top: 1.5cqw; text-align: center; }
.ms-note {
  margin: 0;
  color: var(--ms-purple);
  font-weight: 700;
  font-size: 2.8cqw;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ms-allergens {
  margin: 1.1cqw auto 0;
  max-width: 88%;
  font-size: 2.05cqw;
  line-height: 1.28;
}
.ms-signature {
  margin: 1.3cqw 0 0;
  color: var(--ms-purple);
  font-size: 3cqw;
  letter-spacing: .01em;
}
.ms-contact {
  margin: 1.8cqw auto 0;
  width: max-content;
  max-width: 70%;
  border: .16cqw solid var(--ms-purple);
  color: var(--ms-purple);
  padding: .8cqw 2.2cqw;
  font-size: 1.95cqw;
  line-height: 1.4;
  white-space: pre-line;
}