/* hurge components - the two house patterns first, then everything built on them */

/* ============ pattern 1: the section heading ============================
   It outranks what sits under it. A dish name is 16.5px, so a category is 23px
   in the brand colour, or the eye reads the list before it reads the category.
   No rule beside it - the space above does the separating. */

.sec { padding: 32px 0 14px; }
.sec h2 {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--brand);
  margin: 0;
  scroll-margin-top: var(--scroll-offset);
}

/* ============ pattern 2: the leader line ================================
   A name on the left, a value on the right, dots carrying the eye across.
   Dish and price on the kaart, day and hours on contact, item and total at
   checkout. One construction doing three jobs is what makes it a language. */

.leader { display: flex; align-items: baseline; gap: 6px; }
.leader .dots { flex: 1; border-bottom: 1px dotted var(--dots); transform: translateY(-4px); }

/* ---------- choices: one pill shape for every either/or on the site ---------- */

.pillbar {
  display: flex;
  padding: 3px;
  border: var(--border) solid var(--brand);
  border-radius: var(--r-pill);
  background: var(--paper);
}

.pillbar button {
  flex: 1;
  height: 34px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.pillbar button.is-active { background: var(--brand); color: var(--brand-ink); }

.ghost {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border: var(--border) solid var(--brand);
  border-radius: var(--r-pill);
  background: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  cursor: pointer;
}

.more { padding: 24px var(--gutter) 0; }

/* ---------- the brand block: closes every page, without exception ---------- */

.brandblock {
  margin: 38px var(--gutter) 30px;
  padding: 28px var(--gutter);
  border: var(--border) solid var(--brand);
  text-align: center;
}

.brandblock .disp { font-size: 30px; line-height: 1; color: var(--brand); }
.brandblock .brandmark { max-width: 62%; max-height: 74px; margin: 0 auto; }
.brandblock .rule { width: 26px; height: var(--border); background: var(--brand); margin: 15px auto; }
.brandblock p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* legal-page link (algemene voorwaarden) under the brand block */
.brandblock-links { margin-top: 12px; font-size: 12px; }
.brandblock-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- colophon: the agency credit, one line under the client's brand block ----------
   Muted, not the brand colour - the red belongs to the client's site, not to us.
   Self-centring at every width - does not lean on the desktop column rule, so a stale
   CSS cache or a dropped @media rule cannot leave it flush against the edge. */

.colophon {
  max-width: var(--max-w);
  margin: 0 auto 26px;
  padding: 0 var(--gutter);
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
}
.colophon a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

/* legal / algemene-voorwaarden page: a paragraph under a section heading, inside .rows */
.legal-text { margin: 6px 0 0; font-size: 13.5px; line-height: 1.75; color: var(--prose); }
.legal-text + .legal-text { margin-top: 12px; }

/* ---------- the kaart ---------- */

.modebar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  padding: var(--s3) var(--s4) var(--s3);
  background: var(--cream);
}

.menu-layout { display: grid; grid-template-columns: var(--rail-w) 1fr; }

.rail {
  position: sticky;
  top: calc(var(--header-h) + var(--modebar-h));
  align-self: start;
  max-height: calc(100vh - var(--header-h) - var(--modebar-h));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* subtract the rail item's own padding so the small label lines up with the first
     category heading, rather than the two boxes lining up and the text not */
  padding: calc(var(--first-gap) + 2px) var(--s1) var(--s5);
}

/* a soft rectangle rather than a pill: "Hoofdgerechten" wraps to two lines and a
   999px radius around wrapped text looks like a mistake */
/* the count sits under the label, in the flow. As a corner badge it landed on top of
   a long word like "Hoofdgerechten" and poked into the item above it - a category name
   in Dutch is often too long to leave a corner free */
.rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: var(--border) solid transparent;
  border-radius: var(--r-soft);
  background: none;
  padding: 8px 5px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--muted);
  cursor: pointer;
}

/* the label is its own element rather than a bare text node: as an anonymous flex item
   inside a centred column it was sized to something narrower than the box and broke
   "Hoofdgerechten" mid-word with room to spare. As a block it gets the full width, and
   the wrap guards below only fire when a name genuinely does not fit. */
.rail-label {
  display: block;
  width: 100%;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

.rail-item.is-active { border-color: var(--brand); color: var(--brand); }

.rail-badge {
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 10.5px;
  font-weight: 700;
}

.dishes { padding: 0 var(--s4) var(--s2) var(--s1); }
.dishes .sec:first-child { padding-top: var(--first-gap); }

/* a one-line serving note under a category heading: bow-tjei's porcelain pan,
   tip-pan's hot plate, "prijs per persoon" on the rijsttafels. Muted, so it reads
   as a caption to the heading and not as a dish. */
.cat-note { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 58ch; }

.dish { padding: 9px 0; }
.dish .nm { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; white-space: nowrap; }
.dish .pr { font-size: 13.5px; font-weight: 700; }
.dish .unit { font-size: 11.5px; font-weight: 500; color: var(--muted); }

.dish-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.dish-desc { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }

/* the printed menu number in front of the dish name - people order by number on the
   phone, so it belongs with the name and wraps with it */
.dish-num { font-family: var(--font-body); font-size: 12px; font-weight: 600;
            color: var(--muted); margin-right: 7px; }

/* Dutch dish names run long, and now carry a number too. The name keeps the left of
   the row and wraps within it; the dotted leader and price stay on the first line at
   the right edge rather than the name shoving the price off the page. */
.dishes .dish .nm { white-space: normal; }
.dishes .dish .leader { flex-wrap: nowrap; }
.dishes .dish .leader .nm { flex: 0 1 auto; min-width: 0; }
.dishes .dish .leader .dots { flex: 1 0 16px; }
.dishes .dish .leader .pr { flex: 0 0 auto; white-space: nowrap; }
/* Two stacked variants. Both put the name, description and price on the left and take
   the right edge for something else, and both let the name wrap because the column is
   narrower than a full-width row. */
.dish--photo, .dish--stack {
  display: grid; grid-template-columns: 1fr auto; align-items: start;
}
.dish--photo .nm, .dish--stack .nm { white-space: normal; }
.dish--photo .pr, .dish--stack .pr { display: block; margin-top: 6px; }
.dish--photo .dish-desc, .dish--stack .dish-desc { max-width: none; }

/* with a photograph there is no room to run dots, and none needed - the image is
   plainly part of the dish */
.dish--photo { gap: var(--s4); }
.dish--photo .leader { display: block; }
.dish--photo .dots { display: none; }

/* without one, the dots carry the name across to the add button, so the button belongs
   to the dish instead of floating beside it. The gap is tighter so they nearly meet,
   and the button is pulled up onto the name's line: a 32px button at -5px centres
   within a whisker of the 22.3px name line box. */
.dish--stack { gap: var(--s2); }
.dish--stack .add-btn { margin-top: -5px; }

/* choice menus: a stack of course selectors under the price, the add button
   holding the top-right as on any ordering row. The guest builds the plate,
   then adds it. */
.dish--choice .pr { margin-bottom: 8px; }
.dish-choices { display: flex; flex-direction: column; gap: 6px; }
.choice-select {
  width: 100%;
  height: 42px;
  padding: 0 var(--s3);
  border: 1px solid var(--hair);
  border-radius: var(--r-soft);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;                 /* 16px: smaller and iOS zooms on focus */
  color: var(--ink);
}

.dish-media { position: relative; }
.dish-photo { width: 96px; height: 96px; border-radius: var(--r-soft); object-fit: cover; }
.dish--photo .add-btn {
  position: absolute;
  top: 0; right: 0;
  transform: translate(34%, -34%);
  border: 3px solid var(--cream);   /* a ring, not a shadow - this site has none */
}

.add-btn {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  margin-top: 2px;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.allergen-note { padding: 20px var(--s4) 0 var(--s1); font-size: 12px; color: var(--muted); }

/* ---------- rows of facts: contact, checkout summary, confirmations ---------- */

.rows { padding: 0 var(--gutter); }
.row { padding: 7px 0; }
.row .k { font-size: 13.5px; }
.row .v { font-size: 13.5px; font-weight: 600; }
.row .v.is-soft { font-weight: 400; color: var(--muted); }
.row.is-closed .k, .row.is-closed .v { color: var(--brand); font-weight: 600; }

.note { margin: 4px 0 0; padding: 0 var(--gutter); font-size: 13px; line-height: 1.7;
        color: var(--prose); max-width: var(--measure); }

address { font-style: normal; font-family: var(--font-display); font-size: 19px; line-height: 1.4; }

/* ---------- cart bar and checkout ---------- */

.cartbar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  z-index: 25;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--gutter);
  background: var(--paper);
  border-top: 1px solid var(--hair);
}

.cartbar .cart-total { font-weight: 700; margin-right: auto; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--action);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.cartbar .btn { width: auto; height: 42px; padding: 0 22px; }
.btn:active { opacity: .9; }
.btn[disabled] { opacity: .45; }

.sum-row { padding: 10px 0; border-bottom: 1px solid var(--hair); }
/* a composed choice-menu name ("Menu (soep, voor, hoofd)") is long: let it take
   its own line and drop the dots + price beneath it rather than crushing them. */
.sum-row .leader { flex-wrap: wrap; }
.sum-row .leader .dots { min-width: 24px; }
.sum-row .nm { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.sum-row .pr { font-size: 13.5px; font-weight: 700; }
.sum-foot { display: flex; align-items: center; justify-content: flex-end; margin-top: 4px; }
.sum-min { margin-right: auto; font-size: 12px; color: var(--muted); }
.stepper { display: flex; align-items: center; gap: var(--s3); }
.stepper button {
  width: 30px; height: 30px;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--font-body); font-size: 15px; cursor: pointer;
}
/* subtotal and delivery fee sit between the summary and the total, muted, so the
   total stays the one heavy line */
.sum-line { display: flex; justify-content: space-between; align-items: baseline;
            padding: 6px 0 0; font-size: 13px; color: var(--muted); }
.sum-total { display: flex; justify-content: space-between; align-items: baseline;
             padding-top: var(--s4); font-size: 17px; font-weight: 700; }

/* checkout notes: kitchen status, delivery minimum, delivery-zone result. They live
   inside .rows, which already carries the gutter, so they take none of their own. */
.rows .note { padding-left: 0; padding-right: 0; }
.status-note { margin: 0 0 var(--s5); color: var(--brand); font-weight: 600; }
.min-note { margin: var(--s3) 0 0; }
.zone-msg { margin: var(--s2) 0 0; }
.zone-takeaway { margin: var(--s2) 0 0; font-size: 13px; }
.zone-takeaway a { font-weight: 600; }

/* ---------- forms ---------- */

.field { margin-bottom: var(--s4); }
.field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%;
  height: 50px;
  padding: 0 var(--s4);
  border: 1px solid var(--hair);
  border-radius: var(--r-soft);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;                 /* smaller and iOS zooms on focus */
  color: var(--ink);
}
.field textarea { height: auto; min-height: 96px; padding: var(--s3) var(--s4); line-height: 1.5; }
.field .error { display: block; margin-top: 5px; font-size: 12.5px; color: var(--action); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--action); }
.honeypot { position: absolute; left: -9999px; }

/* ---------- desktop ---------- */

@media (min-width: 768px) {
  .hero { border-radius: 0; }
  .pagetag, .title, .prose, .rows, .note, .more, .dinkus, .byline {
    max-width: var(--max-w);
    margin-left: auto;
    margin-right: auto;
  }
  .brandblock { max-width: var(--max-w); margin-left: auto; margin-right: auto; }

  .modebar { display: flex; justify-content: center; }
  .modebar .pillbar { width: 320px; }

  /* the rail lies down under the header and the dishes go two-up, like a printed carte */
  .menu-layout { grid-template-columns: 1fr; max-width: var(--max-w); margin: 0 auto; }
  .rail {
    position: sticky;
    top: calc(var(--header-h) + var(--modebar-h));
    flex-direction: row;
    /* "safe" so a rail with more categories than fit falls back to flex-start
       instead of clipping the first and last items past both scroll edges */
    justify-content: safe center;
    align-items: center;
    max-height: none;
    height: var(--rail-h);
    gap: var(--s1);
    padding-inline: var(--s4);
    overflow-x: auto;
    scroll-padding-inline: var(--s4);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background: var(--cream);
  }
  .rail::-webkit-scrollbar { display: none; }
  /* horizontal rail: single-line labels, so the count sits beside the name */
  .rail-item { flex: 0 0 auto; flex-direction: row; gap: 6px;
               padding: 8px 12px; font-size: 11.5px; white-space: nowrap; }

  .dishes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s7); padding: 0; }
  .dishes .sec, .allergen-note { grid-column: 1 / -1; }

  .cartbar {
    left: auto; right: var(--gutter); bottom: var(--gutter);
    width: 360px;
    border: 1px solid var(--hair);
    border-radius: var(--r-soft);
  }
}