/* Friture de Wien — kleuren, maten en clamps overgenomen uit het originele ontwerp. */

:root {
  --cream: #F2EBDD;
  --panel: #FBF6EA;
  --sand: #EAE1CF;
  --ink: #262019;
  --brick: #8E3B2B;
  --brick-dark: #6B2A1E;
  --green: #2E4C3B;
  --gold: #E0B978;
  --open: #25623F;

  --line: rgba(38, 32, 25, 0.15);
  --line-soft: rgba(38, 32, 25, 0.08);
  --ink-70: rgba(38, 32, 25, 0.77);
  --ink-60: rgba(38, 32, 25, 0.62);
  --ink-50: rgba(38, 32, 25, 0.5);
  --cream-70: rgba(242, 235, 221, 0.72);
  --cream-60: rgba(242, 235, 221, 0.6);
  --cream-line: rgba(242, 235, 221, 0.15);

  --shell: 1120px;
  --pad: clamp(18px, 5vw, 30px);
  --display: 'Alfa Slab One', Georgia, serif;
  --body: 'Work Sans', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Let op: géén `scroll-behavior: smooth` hier. Daarmee negeert Chrome de sprong
   naar een anker bij het laden van /#uren en blijft de bezoeker bovenaan staan.
   Het soepele scrollen bij klikken regelt initAnchors() in app.js. */

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; }
img { max-width: 100%; display: block; }
a { color: var(--brick); text-decoration: none; }
a:hover { color: var(--brick-dark); }

:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; }

/* ---------- herbruikbare onderdelen ---------- */

.shell { max-width: var(--shell); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 500 15px var(--body);
  padding: 9px 16px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease;
}
.btn-brick { background: var(--brick); color: var(--cream); }
.btn-brick:hover { background: var(--ink); color: var(--cream); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--cream); color: var(--ink); transform: translateY(-2px); }
.btn-plain { background: var(--cream); color: var(--ink); border: 1px solid rgba(38, 32, 25, 0.2); }
.btn-plain:hover { background: var(--sand); color: var(--ink); }
.btn-lg { font-size: 17px; padding: 16px 28px; }
.btn-lg.btn-brick:hover { transform: translateY(-2px); }
.btn-block { width: 100%; padding: 13px 16px; font-size: 16px; gap: 9px; }

.btn-link {
  color: var(--ink);
  padding: 16px 4px;
  font: 500 17px var(--body);
  border-bottom: 2px solid rgba(38, 32, 25, 0.2);
}
.btn-link:hover { color: var(--ink); border-bottom-color: var(--brick); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font: 500 14px var(--body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow .rule { width: 34px; height: 1px; background: currentColor; display: block; flex: none; }
.eyebrow-gold { color: var(--gold); margin-bottom: 16px; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brick); display: block; flex: none; }
.dot-green { width: 8px; height: 8px; background: var(--open); }

.lede {
  font: 300 clamp(17px, 2.1vw, 20px)/1.72 var(--body);
  color: var(--ink-70);
  max-width: 42ch;
  margin: 0 0 28px;
  text-wrap: pretty;
}

.note {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 0;
  font: 400 16px/1.5 var(--body);
  color: rgba(38, 32, 25, 0.65);
  text-wrap: pretty;
}
.note .dot { position: relative; top: -2px; }
.note strong { font-weight: 500; color: var(--ink); white-space: nowrap; flex: none; }
.note .muted { font-weight: 300; color: rgba(38, 32, 25, 0.6); }

.frame { border: 1px solid var(--line); overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame-45 { aspect-ratio: 4 / 5; }
.frame-34 { aspect-ratio: 3 / 4; }
.tilt { transform: rotate(-1.5deg); }

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

.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: rgba(242, 235, 221, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%);
  transition: transform 0.45s var(--ease);
}
.hdr.is-shown { transform: translateY(0); }

.hdr-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 12px clamp(16px, 4vw, 30px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 30px);
  flex-wrap: wrap;
  row-gap: 10px;
}
.hdr-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.hdr-brand img { height: 34px; width: auto; }
.hdr-brand span { font-family: var(--display); font-size: 19px; line-height: 1; letter-spacing: -0.01em; }

.hdr-nav { margin-left: auto; display: flex; gap: clamp(14px, 2.2vw, 24px); flex-wrap: wrap; }
.hdr-nav a {
  font: 400 16px var(--body);
  color: var(--ink-70);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.hdr-nav a:hover { color: var(--ink); border-bottom-color: var(--brick); }

.hdr-cta { display: flex; align-items: center; gap: 12px; }

/* ---------- hero ---------- */

.hero {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(64px, 10vw, 104px) var(--pad) 0;
  scroll-margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 40px);
  align-items: center;
}
.hero-text { position: relative; z-index: 2; }
.hero-text .eyebrow { margin-bottom: 24px; }
.hero h1 {
  font-size: clamp(34px, 6.4vw, 58px);
  line-height: 1.04;
  margin: 0 0 24px;
  max-width: 15ch;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.hero .accent { color: var(--brick); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.hero-figure { margin: 0 0 0 clamp(-40px, calc(760px - 100vw), 0px); position: relative; }
.hero-figure figcaption {
  font: italic 400 14px var(--body);
  color: var(--ink-50);
  margin-top: 12px;
  text-align: right;
}

/* ---------- pijlers ---------- */

.pillars {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) var(--pad) 0;
}
.pillars-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  background: var(--green);
  color: var(--cream);
}
.pillar { padding: clamp(24px, 3vw, 32px) clamp(22px, 3vw, 34px); border-left: 1px solid var(--cream-line); }
.pillar:first-child { border-left: 0; }
.pillar-num { font: 500 13px var(--body); letter-spacing: 0.2em; color: var(--gold); margin: 0 0 12px; }
.pillar h2 { font-size: 19px; margin: 0 0 8px; }
.pillar p { font: 300 16px/1.65 var(--body); color: var(--cream-70); margin: 0; }

/* ---------- menukaart ---------- */

.menu {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 88px) var(--pad);
  scroll-margin-top: 80px;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 44px);
  align-items: flex-start;
}
.menu-rail { position: sticky; top: 104px; flex: 0 1 200px; min-width: 180px; }
.menu-title { font-size: 30px; line-height: 1.1; margin: 0 0 22px; }
.menu-tabs { display: flex; flex-direction: column; gap: 2px; margin-bottom: 22px; }

.menu-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-left: 2px solid var(--line);
  text-align: left;
  cursor: pointer;
  font: 400 17px var(--body);
  color: var(--ink-60);
  padding: 9px 12px 9px 14px;
  transition: background 0.2s ease, color 0.2s ease;
}
.menu-tab:hover { background: rgba(38, 32, 25, 0.03); }
.menu-tab[aria-selected="true"] {
  color: var(--brick);
  border-left-color: var(--brick);
  background: rgba(142, 59, 43, 0.06);
  font-weight: 500;
}

.menu-trust { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.menu-trust p { font: 400 15px/1.6 var(--body); color: var(--ink-50); margin: 0; }

/* Zonder JavaScript staan alle categorieën onder elkaar — leesbaar, en
   zoekmachines zien ze allemaal. Draait JS wel, dan verbergt deze regel de
   niet-actieve panelen meteen (geen flits), tot initMenu() het overneemt
   met het hidden-attribuut en `js-tabs` toevoegt. */
html.js:not(.js-tabs) .menu-panel-inner:not(:first-of-type) { display: none; }
[hidden] { display: none !important; }

.menu-panel { background: var(--panel); border: 1px solid var(--line); padding: 8px; flex: 1 1 420px; min-width: 0; }
.menu-panel-inner { border: 1px solid var(--line-soft); padding: clamp(18px, 3.5vw, 30px) clamp(18px, 4vw, 38px) clamp(24px, 4vw, 34px); }

.cat-head { display: flex; align-items: baseline; gap: 14px; }
.cat-head h3 { font-size: clamp(21px, 3vw, 25px); margin: 0; color: var(--brick); line-height: 1.2; }
.cat-head .fill { flex: 1; height: 1px; background: var(--line); display: block; }
.cat-count { font: 400 14px var(--body); color: var(--ink-50); white-space: nowrap; }

/* drie prijskolommen (friet) */
.sizes { padding-top: 16px; }
.sizes-head { display: flex; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.sizes-head .spacer { flex: 1; min-width: 8px; }
.sizes-head span:not(.spacer) {
  width: clamp(48px, 6.5vw, 62px);
  text-align: right;
  font: 500 11px var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.row { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; }
.row .name { font: 400 17px/1.45 var(--body); min-width: 0; }
.row .leader { flex: 1; min-width: 10px; border-bottom: 1px dotted rgba(38, 32, 25, 0.2); transform: translateY(-5px); }
.row .p { width: clamp(48px, 6.5vw, 62px); text-align: right; font: 400 16px var(--body); color: rgba(38, 32, 25, 0.6); font-variant-numeric: tabular-nums; }
.row .p-main { font: 500 17px var(--body); color: var(--ink); }

/* groepen in kolommen */
.groups { column-width: 280px; column-gap: clamp(26px, 3.5vw, 48px); }
.group { break-inside: avoid; padding-top: 26px; }
.group h4 {
  font: 600 12px var(--body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  margin: 0 0 6px;
}
.group .row { padding: 5px 0; }
.group .price { font: 500 17px var(--body); font-variant-numeric: tabular-nums; }
.group .qty { font: 400 14px var(--body); color: var(--ink-50); white-space: nowrap; }
.group-note { font: italic 400 14px/1.55 var(--body); color: var(--ink-50); margin: 8px 0 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  font: 600 10px var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--green);
  border-radius: 999px;
  padding: 2px 8px 2px 6px;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: 1px;
}
.badge .star { color: var(--gold); font-size: 10px; line-height: 1; }

/* ---------- woensdagdeal ---------- */

.deal { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad) clamp(56px, 8vw, 88px); scroll-margin-top: 80px; }
.deal-inner {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.deal-stamp {
  position: absolute;
  top: -26px;
  right: clamp(14px, 4vw, 44px);
  width: clamp(86px, 10vw, 104px);
  height: clamp(86px, 10vw, 104px);
  margin: 0;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(-8deg);
  z-index: 2;
}
.deal-stamp span:first-child { font: 500 11px var(--body); letter-spacing: 0.16em; text-transform: uppercase; }
.deal-stamp span:last-child { font-family: var(--display); font-size: 16px; line-height: 1.45; margin-top: 2px; }

.deal-text { padding: clamp(30px, 5vw, 54px) clamp(22px, 4.5vw, 48px); }
.deal-text h2 { font-size: clamp(30px, 5vw, 44px); line-height: 1.06; margin: 0 0 18px; letter-spacing: -0.02em; }
.deal-text .lede { font-size: 19px; line-height: 1.72; color: var(--cream-70); max-width: 40ch; margin: 0 0 26px; }
.deal-price { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0 0 16px; }
.deal-now { font-family: var(--display); font-size: clamp(34px, 5vw, 46px); color: var(--gold); line-height: 1; }
.deal-was { font: 400 16px var(--body); color: var(--cream-60); text-decoration: line-through; }
.deal-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.deal-note { font: 400 16px var(--body); color: var(--cream-60); }
.deal-figure { min-height: 310px; position: relative; }
.deal-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- over ons ---------- */

.about {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(56px, 8vw, 88px);
  scroll-margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.about-figure { margin: 0; padding-bottom: 52px; }
/* uitsnede zoals in het ontwerp ingesteld (zoom 1.19, iets omlaag) */
.about-figure img { transform: scale(1.186) translate(-0.22%, 3.74%); }
.about-text h2 { font-size: clamp(26px, 4.4vw, 38px); line-height: 1.14; margin: 0 0 22px; letter-spacing: -0.02em; }
.about-text .lede { font-size: 19px; line-height: 1.78; max-width: 46ch; margin: 0 0 16px; }
.about-text .lede:last-of-type { margin-bottom: 32px; }
.quote { border-top: 1px solid var(--line); padding-top: 26px; max-width: 40ch; margin: 0; }
.quote p { font: italic 400 clamp(20px, 2.6vw, 24px)/1.5 var(--body); margin: 0 0 10px; text-wrap: pretty; }
.quote cite { font: 400 15px var(--body); letter-spacing: 0.04em; color: rgba(38, 32, 25, 0.6); font-style: normal; }

/* ---------- openingstijden & adres ---------- */

.info { background: var(--sand); border-top: 1px solid var(--line); padding: clamp(48px, 7vw, 72px) var(--pad); scroll-margin-top: 80px; }
.info-inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(34px, 5vw, 56px);
}
.info h2 { font-size: clamp(24px, 3.4vw, 30px); line-height: 1.2; margin: 0 0 24px; letter-spacing: -0.015em; }
.info .eyebrow { margin-bottom: 14px; }

.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 10px;
  margin: 0 -10px;
  border-bottom: 1px solid rgba(38, 32, 25, 0.12);
}
.hours .day { font: 400 18px var(--body); min-width: 106px; }
.hours .fill { flex: 1; }
.hours .times { font: 400 17px var(--body); font-variant-numeric: tabular-nums; }
.hours li.is-today { background: rgba(142, 59, 43, 0.07); }
.hours li.is-today .day, .hours li.is-today .times { color: var(--brick); }
.hours li.is-today .day { font-weight: 600; }

.map {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  /* het streepjespatroon blijft staan zolang de kaart nog laadt */
  background: repeating-linear-gradient(135deg, #DFD5C0 0 14px, #E6DCC8 14px 28px);
  overflow: hidden;
  margin-bottom: 14px;
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

.map-link { margin: 0 0 24px; }
.map-link a {
  font: 500 16px var(--body);
  color: var(--ink);
  border-bottom: 1px solid rgba(38, 32, 25, 0.25);
  padding-bottom: 2px;
}
.map-link a:hover { color: var(--brick); border-bottom-color: var(--brick); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 24px clamp(20px, 3vw, 36px); margin: 0; }
.facts dt { font: 500 14px var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(38, 32, 25, 0.6); margin-bottom: 6px; }
.facts dd { margin: 0; font: 400 18px var(--body); }
.facts dd a { font-weight: 500; font-size: 19px; color: var(--ink); overflow-wrap: anywhere; }
.facts dd a:hover { color: var(--brick); }

/* ---------- footer ---------- */

.ftr { background: var(--ink); color: var(--cream); padding: clamp(34px, 5vw, 48px) var(--pad); }
.ftr-inner { max-width: var(--shell); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.ftr-brand { display: flex; align-items: center; gap: 13px; }
.ftr-brand img { height: 40px; width: auto; }
.ftr-brand > span { display: flex; flex-direction: column; line-height: 1.25; }
.ftr-name { font-family: var(--display); font-size: 19px; }
.ftr-sub { font: 300 15px var(--body); color: var(--cream-60); }
.ftr-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.ftr-nav a { font: 400 16px var(--body); color: var(--cream-60); }
.ftr-nav a:hover { color: var(--gold); }
.ftr-addr { font: 400 15px var(--body); color: rgba(242, 235, 221, 0.5); }

/* ---------- smalle schermen ---------- */

@media (max-width: 759px) {
  .hdr-nav { display: none; }
  .hdr-cta { margin-left: auto; }

  .menu-rail { position: static; flex: 1 1 100%; min-width: 0; }
  .menu-tabs { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
  .menu-trust { max-width: 440px; }

  /* Naam plus volledige belknop passen niet naast elkaar; zonder deze
     verkleining wikkelt de header om naar twee regels en wordt hij 105px hoog. */
  .hdr-inner { padding: 10px clamp(14px, 4vw, 30px); gap: 10px; }
  .hdr-brand img { height: 30px; }
  .hdr-brand span { font-size: 17px; }
  .hdr-cta { gap: 8px; }
  .hdr-cta .btn { font-size: 15px; padding: 9px 14px; }
  .hdr-bel { display: none; }
}

/* De drie punten stapelen op telefoons tot één hoge groene lap — 484px voor drie
   korte zinnen — en de scheidingsstreepjes staan links, dus na het stapelen zie
   je ze niet meer. Nummer naast de kop en lijntjes tussen de punten maakt het
   compacter en laat zien waar het ene punt ophoudt. */
@media (max-width: 759px) {
  .pillars-inner { grid-template-columns: 1fr; }
  .pillar {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 14px;
    padding: 18px 22px;
    border-left: 0;
    border-top: 1px solid var(--cream-line);
  }
  .pillar:first-child { border-top: 0; }
  .pillar-num { margin: 0; }
  .pillar h2 { margin: 0 0 4px; }
  /* let op: het nummer is ook een <p>, dus expliciet uitsluiten — anders belandt
     dat op een eigen regel en staat het niet naast de kop.
     Volle breedte en niet ingesprongen: inspringen maakt de regel smaller,
     waardoor de tekst juist vaker omwikkelt. */
  .pillar p:not(.pillar-num) { grid-column: 1 / -1; }
}

/* De header moet op één regel passen, anders wordt hij 105px hoog en eet hij
   het halve scherm op. Het statusbolletje is hier een kale stip zonder uitleg;
   bij de openingstijden staat hetzelfde bolletje mét "Nu open" ernaast. */
@media (max-width: 480px) {
  .hdr-cta .dot { display: none; }
  .hdr-cta .btn { padding: 9px 12px; }
}

/* Alleen op de echt smalle toestellen (iPhone SE 1e generatie) ook de naam weg;
   die staat groot in de hero. Op 360px past hij nog gewoon. */
@media (max-width: 340px) {
  .hdr-brand span { display: none; }
}

/* Telefoons: de prijstabel heeft naast de gerechtnaam drie prijskolommen nodig.
   Smallere kolommen en kleinere marges houden de namen op één regel. */
@media (max-width: 480px) {
  .hero-actions .btn-lg { flex: 1 1 100%; }
  .hero-figure { margin-left: 0; }

  .menu-panel { padding: 6px; }
  .menu-panel-inner { padding: 16px 12px 22px; }

  .row { gap: 6px; }
  .group .price { font-size: 16px; }
  .badge { margin-left: 6px; }

  /* Naam en prijzen naast elkaar passen hier niet zonder te wrappen
     ("Friet champ. roomsaus" vraagt 180px, er is er 151). Daarom de naam
     op een eigen regel, met de prijzen eronder in dezelfde kolommen. */
  .sizes-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .sizes-head .spacer { display: none; }
  .sizes-head span:not(.spacer) { width: auto; }

  .sizes .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px 6px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .sizes .row:last-child { border-bottom: 0; }
  .sizes .row .name { grid-column: 1 / -1; }
  .sizes .row .leader { display: none; }
  .sizes .row .p { width: auto; }
}

/* ---------- fade-in bij scrollen ---------- */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}