/* ——————————————————————————————————————————
   /menu — „kubek jako miara".
   Spójna z home (krem, te same panele i cienie).
   Trzy role pisma: Chivo 900 nagłówki, Archivo Narrow nazwy dań,
   DM Mono ceny i dane. Ceny stoją w kolumnie o stałej szerokości,
   wyrównane do prawej — bez linii prowadzącej.
   —————————————————————————————————————————— */

@font-face {
  font-family: "Archivo Narrow";
  src: url("../fonts/archivonarrow-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212;
}

.menupage {
  --font-narrow: "Archivo Narrow", "Chivo", system-ui, sans-serif;
  --price-col: 6.5rem;
  --rule: rgba(46, 33, 6, 0.22);
  --rule-soft: rgba(46, 33, 6, 0.12);
}

/* ——————————————————————————————————————————
   1. Otwarcie: cztery kubki i nic więcej
   —————————————————————————————————————————— */

.opener {
  padding-block: calc(var(--space-6) + 40px) var(--space-5);
  border-bottom: 2px solid var(--ink);
}
.opener .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-5);
  align-items: center;
}
.opener h1 { margin-bottom: var(--space-3); }
.opener h1 .accent { color: var(--amber); }
.opener__lead { max-width: 40ch; }
.opener__picks { margin: var(--space-3) 0 0; }             /* wejście do /buzz-picks */
.opener__note {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-top: var(--space-3);
  max-width: 42ch;
}

/* — przełącznik rozmiaru —
   Taca jasna, jak reszta strony. Kubki są kremowe, więc na kremie by zniknęły —
   dlatego przepuszczamy je przez `brightness(0)`: sylwetka robi się ciemna,
   a twarz Buzza (przezroczysta w grafice) zostaje kremowa. Pełny kontrast. */
.cupset {
  background: var(--cream-hi);
  border: var(--border);
  box-shadow: 8px 8px 0 var(--amber);
  padding: var(--space-3) var(--space-3) var(--space-2);
}
.cupset__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
}
.cupset__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  align-items: end;
}
.cupbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 118px;
  padding: 8px 4px 10px;
  background: transparent;
  border: 2px solid transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), transform 0.16s var(--ease);
}
/* Kubki stoją na wspólnej linii i rosną — drabinka rozmiarów jest tu
   informacją, nie ozdobą, więc wysokości są celowo równomierne. */
.cupbtn img { width: auto; filter: brightness(0); opacity: 0.32; transition: opacity 0.16s var(--ease); }
.cupbtn[data-size="1"] img { height: 42px; }
.cupbtn[data-size="2"] img { height: 56px; }
.cupbtn[data-size="3"] img { height: 70px; }
.cupbtn[data-size="4"] img { height: 84px; }
.cupbtn span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.3;
  padding-bottom: 6px;
  border-bottom: 3px solid transparent;
}
/* Podświetlenie po dotknięciu myliłoby się ze stanem „wybrany rozmiar". */
@media (hover: hover) {
  .cupbtn:hover { background: rgba(246, 179, 31, 0.28); }
  .cupbtn:hover img { opacity: 0.7; }
}
.cupbtn[aria-pressed="true"] { background: var(--amber); border-color: var(--ink); }
.cupbtn[aria-pressed="true"] img { opacity: 1; }
.cupbtn[aria-pressed="true"] span { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }

.cupset__hint {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
}
/* Bez JS-a przełącznik nic nie przełącza — wtedy go nie ma, a tabela
   pokazuje wszystkie cztery kolumny cen. Treść jest ta sama w obu wypadkach. */
.cupset { display: none; }
.js .cupset { display: block; }
html:not(.js) .opener .wrap { grid-template-columns: minmax(0, 1fr); }

/* wejście kubków — jeden raz, przy wczytaniu */
.js .cupset__row .cupbtn { animation: cup-rise 0.5s var(--ease) backwards; }
.js .cupbtn[data-size="1"] { animation-delay: 0.05s; }
.js .cupbtn[data-size="2"] { animation-delay: 0.12s; }
.js .cupbtn[data-size="3"] { animation-delay: 0.19s; }
.js .cupbtn[data-size="4"] { animation-delay: 0.26s; }
@keyframes cup-rise { from { opacity: 0; transform: translateY(14px); } }

/* ——————————————————————————————————————————
   2. Układ: szyna nawigacyjna + lista
   —————————————————————————————————————————— */

.menulayout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding-block: var(--space-5) var(--space-6);
}

.rail { position: sticky; top: 96px; }
.rail h2 {
  font-size: 0.7rem;
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}
.rail ol { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.rail a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px 7px 12px;
  text-decoration: none;
  border-left: 3px solid transparent;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
@media (hover: hover) { .rail a:hover { background: rgba(246, 179, 31, 0.25); } }
.rail a[aria-current="true"] { border-left-color: var(--amber); background: rgba(246, 179, 31, 0.18); }

/* — pasek filtrów — */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--space-4);
}
.toolbar__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.toolbar__diets { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 8px 14px;
  background: var(--cream-hi);
  color: var(--ink);
  border: var(--border);
  cursor: pointer;
  transition: background 0.16s var(--ease), box-shadow 0.12s var(--ease), transform 0.12s var(--ease);
}
/* To samo co przy kubkach: chip ma stan włączony/wyłączony, więc zawieszone
   podświetlenie po dotknięciu wyglądałoby jak włączony filtr. */
@media (hover: hover) { .chip:hover { background: rgba(246, 179, 31, 0.3); } }
.chip[aria-pressed="true"] { background: var(--amber); box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px, -1px); }
.toolbar__all {
  min-height: 44px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--ink);
  padding: 2px 0;
  color: var(--ink);
  cursor: pointer;
}
.toolbar[hidden] { display: none; }

/* ——————————————————————————————————————————
   3. Lista dań
   —————————————————————————————————————————— */



/* ——— sekcje zwijane ———
   Każda sekcja to <details>: zwinięta na starcie, otwiera się kliknięciem.
   Treść zostaje w HTML od serwera, więc indeksuje się normalnie. */
.course { scroll-margin-top: 100px; border-bottom: 2px solid var(--ink); }
.course__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  cursor: pointer;
  list-style: none;
}
.course__head::-webkit-details-marker { display: none; }
.course__head h2 { font-size: var(--step-2); }
/* Strzałka po prawej — obraca się razem z otwarciem sekcji. */
.course__head::after {
  content: "";
  margin-left: auto;
  align-self: center;
  flex: none;
  width: 13px;
  height: 13px;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.22s var(--ease);
}
.course[open] .course__head::after { transform: rotate(-135deg) translate(-3px, -3px); }
.course__head:hover h2 { color: var(--ink-soft); }
.course__body { padding-bottom: var(--space-5); }
.seephotos-row { margin-top: var(--space-4); }
.course__intro {
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 58ch;
  margin-bottom: var(--space-3);
}

.group { margin-bottom: var(--space-4); }
.group > h3 {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.group ul { list-style: none; margin: 0; padding: 0; }
/* Zupa z batatem — „our famous", wyróżniona na prośbę kawiarni. */
.group__note {
  margin: var(--space-2) 0 0;
  padding: 10px 14px;
  background: rgba(246, 179, 31, 0.22);
  border-left: 4px solid var(--amber);
  font-size: 0.92rem;
}
.group__note b { font-family: var(--font-narrow); font-weight: 600; font-size: 1.02rem; }

.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--price-col);
  align-items: baseline;
  gap: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.item:last-child { border-bottom: 0; }
.item__name {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.35;
  padding-right: var(--space-3);
}
.item__note {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin-top: 1px;
}
.item__price {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-left: var(--space-2);
  white-space: nowrap;
}
.item__price small { font-size: 0.74rem; color: var(--ink-soft); }

/* ——————————————————————————————————————————
   4. Kawa — jedna kolumna cen, sterowana kubkiem
   —————————————————————————————————————————— */

.pricegrid { width: 100%; border-collapse: collapse; }
.pricegrid caption { text-align: left; }
.pricegrid th, .pricegrid td { padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.pricegrid tbody th {
  text-align: left;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 1.06rem;
}
.pricegrid td {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  width: var(--price-col);
  padding-left: var(--space-2);
}
.pricegrid thead th {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
  border-bottom: 2px solid var(--ink);
}
.pricegrid thead th:first-child { text-align: left; }
.pricegrid td.na { color: rgba(91, 74, 34, 0.55); }
.pricegrid td small { display: block; font-size: 0.66rem; letter-spacing: 0.04em; }
.pricegrid tr.row--add th, .pricegrid tr.row--add td { border-bottom: 0; }
.pricegrid tr.row--add th { font-family: var(--font-mono); font-weight: 400; font-size: 0.88rem; color: var(--ink-soft); }

/* Bez JS-a widać wszystkie cztery kolumny. Z JS-em zostaje wybrana jedna
   i ceny robią się duże — to jest cały sens przełącznika. */
.js .pricegrid td { display: none; }
.js .pricegrid thead th:not(:first-child) { display: none; }
.js .pricegrid[data-size="1"] [data-col="1"],
.js .pricegrid[data-size="2"] [data-col="2"],
.js .pricegrid[data-size="3"] [data-col="3"],
.js .pricegrid[data-size="4"] [data-col="4"] { display: table-cell; }
.js .pricegrid td { font-size: 1.05rem; }

.pours__foot {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: var(--space-2);
}

/* ——————————————————————————————————————————
   5. Dodatki
   —————————————————————————————————————————— */

.extras { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.extras li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--price-col);
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.extras b {
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: 1.06rem;
}
.extras .desc {
  display: block;
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin-top: 2px;
  padding-right: var(--space-3);
}
.extras .price {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  text-align: right;
  padding-left: var(--space-2);
  white-space: nowrap;
}
.extras .price small { display: block; font-size: 0.7rem; color: var(--ink-soft); }
.extras .byoc .price small { color: var(--ink); }
.extras .byoc {
  background: var(--amber);
  border: var(--border);
  box-shadow: 6px 6px 0 var(--ink);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}
.extras .byoc .desc { color: var(--ink); }

/* ——————————————————————————————————————————
   6. Drobiazgi
   —————————————————————————————————————————— */

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  border: 1px solid var(--rose);
  color: var(--rose);
  padding: 0 4px;
  margin-left: 6px;
  vertical-align: 2px;
}


.menufoot {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}
.menufoot p { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); max-width: 52ch; }

.item[hidden], .group[hidden], .course[hidden] { display: none; }
.noresults { font-family: var(--font-mono); font-size: 0.9rem; padding: var(--space-4) 0; }

/* ——————————————————————————————————————————
   7. Węższe ekrany
   —————————————————————————————————————————— */

@media (max-width: 1000px) {
  .menulayout { grid-template-columns: 1fr; gap: var(--space-3); }
  .rail { position: static; border-bottom: 1px solid var(--rule-soft); padding-bottom: var(--space-2); }
  .rail ol { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-2); }
  .rail a { border-left: 0; border-bottom: 3px solid transparent; padding: 6px 10px; }
  .rail a[aria-current="true"] { border-left-color: transparent; border-bottom-color: var(--amber); }
}

@media (max-width: 860px) {
  /* Pasek jest wyspą leżącą na treści (margin-bottom: -82px w site.css),
     więc otwarcie musi zejść niżej, inaczej nadlinia chowa się pod wyspą. */
  .opener { padding-top: calc(var(--space-4) + 82px); padding-bottom: var(--space-4); }
  /* Na wąskim ekranie kubki wchodzą zaraz pod lead — nagłówek mówi
     „start with the cup", więc kubek nie może być trzy przewinięcia niżej. */
  .opener .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .opener .wrap > div:first-child { display: contents; }
  .opener .eyebrow { order: 1; margin-bottom: 0; }
  .opener h1 { order: 2; margin-bottom: 0; }
  .opener__lead { order: 3; max-width: none; }
  .cupset { order: 4; }
  .opener__note { order: 5; margin-top: 0; max-width: none; }
  .opener__picks { order: 6; margin-top: 0; }

  /* Kubki: ta sama drabinka rozmiarów, tylko niższa. Kafel schodzi
     ze 118 px na 86 px, czyli o jedną trzecią ekranu telefonu mniej. */
  .cupset { padding: var(--space-2) var(--space-2) 10px; }
  .cupset__label { margin-bottom: var(--space-2); }
  .cupbtn { min-height: 86px; gap: 6px; padding: 6px 2px 8px; }
  .cupbtn[data-size="1"] img { height: 30px; }
  .cupbtn[data-size="2"] img { height: 42px; }
  .cupbtn[data-size="3"] img { height: 54px; }
  .cupbtn[data-size="4"] img { height: 66px; }
  .cupset__hint { margin-top: 8px; }

  /* Szyna sekcji: zawijana lista zajmowała 185 px pionu. Jeden przewijany
     w poziomie rząd robi z tego ok. 50 px. Przewijanie zamyka się w szynie,
     więc strona nadal nie przewija się w bok. */
  .rail { min-width: 0; }
  .rail ol {
    min-width: 0; max-width: 100%;
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; margin-bottom: 0; padding-bottom: 2px;
  }
  .rail ol::-webkit-scrollbar { display: none; }
  .rail li { flex: 0 0 auto; }
  .rail a { white-space: nowrap; }

  /* Filtry: etykieta i trzy przełączniki mieszczą się w jednej linii. */
  .toolbar { gap: 8px var(--space-2); padding-bottom: var(--space-2); }
  .toolbar__label { flex: 0 0 auto; }
}

@media (max-width: 620px) {
  .menupage { --price-col: 5rem; }
  .item, .extras li, .pricegrid td { font-size: 0.95rem; }
  .cupbtn { padding-inline: 0; }
  .cupbtn span { font-size: 0.58rem; letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  .js .cupset__row .cupbtn { animation: none; }
}