/* 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); }
/* phone (and any other link) in the brand block stays as quiet as the text around it */
.brandblock p a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

/* 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, under the client's brand block ----------
   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; }

/* ---------- 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); }

.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); }

/* Dutch dish names run long beside the 112px rail. 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; }

/* the order number sits in front of the dish name - people order by number on the phone */
.dish-num { font-family: var(--font-body); font-size: 12px; font-weight: 600;
            color: var(--muted); margin-right: 7px; }
/* 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; }

.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); }

/* 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; }

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); }
.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; }
.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;
}
.sum-total { display: flex; justify-content: space-between; align-items: baseline;
             padding-top: var(--s4); font-size: 17px; font-weight: 700; }

/* ---------- 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);
  }
}