/* Bakkerij Hamersma — het vaantje uit het logo is de enige vorm op de site:
   fotomaskers, knoppen, opsommingstekens en de voet van de pagina. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 100%;
  font-display: swap;
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ground: #f5f4f2;
  --ground-2: #e9e6e1;
  --ink: #17130e;
  --muted: #4a4238;
  --ochre: #cf8a00;
  --ochre-ink: #855400;
  --ochre-pale: #e9b14a;
  --dark: #1d1812;
  --on-dark: #f5f4f2;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: 800 var(--fs-display)/0.95 var(--font);

  --fs-display: clamp(2.75rem, 1.2rem + 5.4vw, 6rem);
  --fs-h2: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-statement: clamp(1.5rem, 1.1rem + 1.25vw, 2.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;

  --margin: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --gap-section: clamp(6rem, 3rem + 9vw, 11rem);
  --max: 90rem;

  /* het vaantje: rechthoek met een V-inkeping onderaan */
  --vaan: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--notch, 9%)), 0 100%);
  /* liggend vaantje (zwaluwstaart) voor knoppen */
  --wimpel: polygon(0 0, 100% 0, calc(100% - 0.7em) 50%, 100% 100%, 0 100%);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-reveal: 800ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--fs-body)/1.55 var(--font);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--ochre); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.on-dark :focus-visible, .footer :focus-visible { outline-color: currentColor; }

h1, h2, .display {
  font-weight: 800;
  font-variation-settings: "wdth" 75;
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; font-variation-settings: "wdth" 90; }
p { text-wrap: pretty; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--margin); top: -4rem; z-index: 20;
  background: var(--ink); color: var(--ground); padding: 0.75rem 1rem; text-decoration: none;
}
.skip:focus { top: 0.75rem; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }
.section { margin-top: var(--gap-section); }
.prose { max-width: 65ch; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 1em; }
.prose h2:not(.display) { font-size: var(--fs-h3); font-weight: 700; font-variation-settings: "wdth" 90; letter-spacing: 0; line-height: 1.2; margin: 2em 0 0.5em; }
.prose a:not(.btn), .link {
  color: var(--ochre-ink);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease;
}
.lead { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.5; max-width: 40ch; }
.muted { color: var(--muted); }

/* ---------- vaantje ---------- */
.vaan { clip-path: var(--vaan); overflow: hidden; background: var(--ground-2); }
.vaan img { width: 100%; height: 100%; object-fit: cover; }
.bullet-list li { position: relative; padding-left: 1.4em; }
.bullet-list li + li { margin-top: 0.45em; }
.bullet-list li::before {
  content: ""; position: absolute; left: 0.1em; top: 0.38em;
  width: 0.6em; height: 0.78em; background: var(--ochre);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}

/* ---------- knoppen ---------- */
.btn {
  --bg: var(--ink); --fg: var(--ground);
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 3.25rem; padding: 0.85rem 2.1rem 0.85rem 1.4rem;
  background: var(--bg); color: var(--fg);
  font: 700 1.0625rem/1.1 var(--font); font-variation-settings: "wdth" 90;
  text-decoration: none; border: 0; cursor: pointer;
  clip-path: var(--wimpel);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.btn:active { transform: scale(0.97); }
.btn--ochre { --bg: var(--ochre); --fg: var(--ink); }
.btn--light { --bg: var(--ground); --fg: var(--ink); }
.btn:focus-visible { outline: none; --bg: var(--ochre-ink); --fg: #fff; }
.btn--ochre:focus-visible, .btn--light:focus-visible { --bg: var(--ink); --fg: var(--ground); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { --bg: #3a3026; }
  .btn--ochre:hover { --bg: var(--ochre-pale); }
  .btn--light:hover { --bg: #fff; }
  .prose a:not(.btn):hover, .link:hover { color: var(--ink); }
}

/* ---------- kop van de site ---------- */
.header { position: relative; z-index: 10; }
.header__bar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  max-width: var(--max); margin-inline: auto; padding-inline: var(--margin);
}
.logo { display: block; flex: none; width: clamp(4.25rem, 3rem + 3vw, 6rem); transition: transform var(--t-press) var(--ease-out); }
.logo img { width: 100%; height: auto; }
.logo:active { transform: scale(0.97); }
.nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.25rem 1.75rem; padding-top: 1.25rem; padding-left: clamp(1rem, 2.5vw, 2.5rem); }
.nav__list { display: flex; gap: 0.25rem 1.5rem; }
.nav__list a {
  display: inline-block; padding: 0.5rem 0; font-weight: 600; text-decoration: none;
  text-decoration-thickness: 0.1em; text-underline-offset: 0.35em;
}
.nav__list a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--ochre); }
@media (hover: hover) and (pointer: fine) {
  .nav__list a:hover { text-decoration: underline; text-decoration-color: currentColor; }
}
.nav__toggle { display: none; }
.nav .btn { min-height: 2.75rem; padding-block: 0.6rem; }

@media (max-width: 66rem) {
  .nav { justify-content: flex-end; padding-top: 0.9rem; gap: 0.75rem; }
  .nav .btn { display: none; }
  .js .nav__toggle {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1rem;
    font: 700 1rem/1 var(--font); background: var(--ink); color: var(--ground); border: 0; cursor: pointer;
    transition: transform var(--t-press) var(--ease-out);
  }
  .js .nav__toggle:active { transform: scale(0.97); }
  .nav__list { flex-wrap: wrap; justify-content: flex-end; gap: 0 1rem; max-width: 15rem; }
  .js .nav__list {
    position: absolute; right: var(--margin); top: 4.25rem; max-width: none;
    flex-direction: column; gap: 0; min-width: 14rem; padding: 0.5rem 1.25rem 1rem;
    background: var(--ink); color: var(--ground);
    box-shadow: 0 18px 40px -12px rgb(23 19 14 / 0.45); /* taste-skill-ignore: echt uitklapmenu */
    transform-origin: top right;
    opacity: 0; transform: scale(0.96) translateY(-4px); visibility: hidden;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
  }
  .js .nav.is-open .nav__list { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .js .nav__list a { display: block; padding: 0.7rem 0; font-size: 1.125rem; }
  .js .nav__list .nav__shop { display: block; }
  .js .nav__list a:focus-visible { outline-color: var(--ochre); }
}
.nav__shop { display: none; }

/* ---------- startpagina: held ---------- */
.hero { position: relative; margin-top: -1px; }
.hero__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem;
  max-width: var(--max); margin-inline: auto; padding-inline: var(--margin);
  min-height: min(52rem, calc(100svh - 7rem));
}
.hero__text { grid-column: 1 / span 7; align-self: center; padding-block: 3rem 4rem; }
.hero__text h1 { font-size: clamp(3rem, 1rem + 4.4vw, 5.25rem); }
@media (max-width: 52rem) { .hero__text h1 { font-size: 9.4vw; } }
.hero__text .lead { margin-top: 2rem; }
.hero__text .actions { margin-top: 2.25rem; }
.hero__vaan {
  grid-column: 8 / -1; grid-row: 1; align-self: start;
  margin-top: calc(-1 * clamp(5.5rem, 4rem + 4vw, 8rem));
  margin-right: calc(-1 * var(--margin));
  height: min(54rem, calc(100svh + 1rem)); min-height: 34rem;
  --notch: 11%;
}
.vandaag { margin-top: 2.5rem; font-size: var(--fs-small); max-width: 34rem; }
.vandaag strong { font-weight: 700; }
.vandaag__status { display: inline-flex; align-items: center; gap: 0.5em; }
.vandaag__status::before {
  content: ""; width: 0.6em; height: 0.78em; background: var(--muted);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}
.vandaag[data-open="ja"] .vandaag__status::before { background: var(--ochre); }

@media (max-width: 52rem) {
  .hero__grid { display: block; min-height: 0; }
  .hero__text { padding-block: 2.5rem 2.5rem; }
  .hero__vaan { margin: 0 calc(-1 * var(--margin)) 0 auto; width: 88%; height: auto; min-height: 0; aspect-ratio: 4 / 4.6; --notch: 9%; }
}

/* ---------- statement met beeldjes in de regel ---------- */
.statement {
  font-size: var(--fs-statement); line-height: 1.22; font-weight: 600;
  font-variation-settings: "wdth" 90; letter-spacing: -0.01em;
  max-width: 34ch;
}
.statement__img {
  display: inline-block; width: 1.05em; height: 1.2em; vertical-align: -0.22em;
  margin-inline: 0.1em; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
}
.statement__img img { width: 100%; height: 100%; object-fit: cover; }
.intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: end; }
.intro .statement { grid-column: 1 / span 8; }
.intro__side { grid-column: 9 / -1; font-size: var(--fs-body); max-width: 30ch; justify-self: end; }
.intro__side p + p { margin-top: 0.75em; }
@media (max-width: 44rem) {
  .intro { display: block; }
  .intro__side { margin-top: 2rem; justify-self: start; }
}

/* ---------- lijst met foto als opsommingsteken ---------- */
.menu__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 2.75rem; }
.menu__head p { max-width: 42ch; }
.menu__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 4rem); row-gap: 2.25rem; }
.menu__item { display: grid; grid-template-columns: 4.75rem 1fr; gap: 1.25rem; align-items: start; }
.menu__item .vaan { width: 4.75rem; aspect-ratio: 4 / 5; --notch: 14%; }
.menu__item h3 { font-size: 1.1875rem; }
.menu__item h3 a { text-decoration: none; }
.menu__item h3 a::after { content: ""; position: absolute; inset: 0; }
.menu__item { position: relative; }
.menu__item p { margin-top: 0.35rem; color: var(--muted); font-size: var(--fs-small); max-width: 44ch; }
.menu__item .menu__note { color: var(--ochre-ink); font-weight: 600; }
.menu__item .vaan img { transition: transform 600ms var(--ease-soft); }
@media (hover: hover) and (pointer: fine) {
  .menu__item:hover .vaan img { transform: scale(1.08); }
  .menu__item:hover h3 a { text-decoration: underline; text-decoration-color: var(--ochre); text-decoration-thickness: 0.1em; text-underline-offset: 0.25em; }
}
.menu__item:focus-within { outline: 3px solid var(--ink); outline-offset: 6px; }
.menu__item a:focus-visible { outline: none; }
@media (max-width: 44rem) {
  .menu__list { grid-template-columns: 1fr; row-gap: 1.75rem; }
  .menu__item { grid-template-columns: 3.75rem 1fr; gap: 1rem; }
  .menu__item .vaan { width: 3.75rem; }
}

/* ---------- weekaanbiedingen (vierkante foto, dagen) ---------- */
.aanbod { background: var(--ground-2); }
.aanbod__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(2.5rem, 5vw, 5rem); align-items: stretch; }
.aanbod__foto { aspect-ratio: 1; overflow: hidden; }
.aanbod__foto img { width: 100%; height: 100%; object-fit: cover; }
.aanbod__tekst { display: flex; flex-direction: column; gap: 2rem; }
.dagen { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.dagen button {
  min-width: 3rem; min-height: 2.75rem; padding: 0.4rem 0.75rem;
  font: 700 1.0625rem/1 var(--font); color: var(--muted); background: transparent; border: 0; cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.dagen button:active { transform: scale(0.96); }
.dagen button[aria-selected="true"] { background: var(--ink); color: var(--ground); }
@media (hover: hover) and (pointer: fine) { .dagen button:hover:not([aria-selected="true"]) { color: var(--ink); background: rgb(23 19 14 / 0.07); } }
.dagen { display: none; }
.js .dagen { display: flex; }
.aanbod__lijst li { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1.5rem; padding-block: 0.9rem; }
.aanbod__lijst li + li { border-top: 2px solid rgb(23 19 14 / 0.08); }
.aanbod__lijst .wat { font-weight: 700; font-size: 1.1875rem; }
.aanbod__lijst .wanneer { grid-column: 1; color: var(--muted); font-size: var(--fs-small); }
.aanbod__lijst .deal { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-weight: 800; font-variation-settings: "wdth" 80; font-size: 1.375rem; color: var(--ochre-ink); text-align: right; }
.aanbod__lijst li[hidden] { display: none; }
.aanbod__lijst li.is-new { animation: rij-in 360ms var(--ease-out) both; }
@keyframes rij-in { from { opacity: 0; transform: translateY(8px); } }
.aanbod__note { font-size: var(--fs-small); color: var(--muted); }
.aanbod__acties { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.cel {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4.5rem; padding: 1rem 1.25rem; text-decoration: none; font-weight: 700;
  background: var(--ink); color: var(--ground);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.cel--licht { background: var(--ground); color: var(--ink); }
.cel:active { transform: scale(0.98); }
.cel::after { content: ""; width: 0.7em; height: 0.9em; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%); flex: none; }
@media (hover: hover) and (pointer: fine) {
  .cel:hover { background: #3a3026; }
  .cel--licht:hover { background: #fff; }
}
@media (max-width: 52rem) {
  .aanbod__grid { grid-template-columns: 1fr; }
  .aanbod__acties { grid-template-columns: 1fr; }
}

/* ---------- donker paneel met gevormd portret ---------- */
.paneel {
  position: relative; overflow: hidden;
  margin-inline: clamp(0.625rem, 1.4vw, 1.25rem);
  background: var(--dark); color: var(--on-dark);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  min-height: min(58rem, 110svh);
}
.paneel h2 { grid-column: 1 / span 7; grid-row: 1; max-width: 13ch; }
.paneel__foto {
  grid-column: 1 / span 6; grid-row: 2; align-self: end;
  width: min(36vw, 34rem); aspect-ratio: 4 / 5; margin-bottom: calc(-1 * clamp(2rem, 4vw, 3.5rem) - 3.5rem);
  margin-top: 3rem; --notch: 10%;
}
.paneel__tekst { grid-column: 8 / -1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 3rem; padding-top: 0.5rem; max-width: 26rem; }
.paneel__tekst h3 { font-size: 1.375rem; margin-bottom: 0.6rem; color: var(--ochre-pale); }
.paneel__tekst p { font-size: var(--fs-body); }
@media (max-width: 52rem) {
  .paneel { display: block; min-height: 0; padding-bottom: 0; }
  .paneel h2 { max-width: none; }
  .paneel__tekst { margin-top: 2.5rem; gap: 2rem; }
  .paneel__foto { width: 86%; margin: 3rem auto -12%; }
}

/* ---------- tegelwand recepten ---------- */
.tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; padding-inline: 0.5rem; max-width: var(--max); margin-inline: auto; }
.tegel {
  position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1rem; text-align: center; text-decoration: none; overflow: hidden;
  background: var(--t-bg, var(--ink)); color: var(--t-fg, var(--ground));
  transition: transform var(--t-press) var(--ease-out);
}
a.tegel:active { transform: scale(0.98); }
.tegel--a { --t-bg: var(--ink); --t-fg: var(--ground); }
.tegel--b { --t-bg: var(--ochre); --t-fg: var(--ink); }
.tegel--c { --t-bg: var(--ground-2); --t-fg: var(--ink); }
.tegel__groot { font-weight: 800; font-variation-settings: "wdth" 75; font-size: clamp(3.5rem, 1rem + 8vw, 8.5rem); line-height: 0.9; letter-spacing: -0.03em; }
.tegel__klein { position: absolute; left: 1rem; right: 1rem; bottom: 1.1rem; font-size: var(--fs-small); font-weight: 600; }
.tegel h2 { font-size: clamp(1.75rem, 0.9rem + 2.6vw, 3.25rem); }
.tegel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-soft); }
.tegel--foto .tegel__klein { z-index: 1; left: 0; right: auto; top: 0; bottom: auto; padding: 0.45rem 0.75rem; background: var(--ink); color: var(--ground); text-align: left; }
@media (hover: hover) and (pointer: fine) {
  a.tegel--foto:hover img { transform: scale(1.06); }
  a.tegel--b:hover { --t-bg: var(--ochre-pale); }
  a.tegel--a:hover { --t-bg: #3a3026; }
  a.tegel--c:hover { --t-bg: #e3dacb; }
}
a.tegel:focus-visible { outline-offset: -6px; outline-color: currentColor; }
@media (max-width: 44rem) {
  .tegels { grid-template-columns: 1fr 1fr; gap: 0.375rem; padding-inline: 0.375rem; }
  .tegel__groot { font-size: 22vw; }
  .tegel__klein { font-size: 0.8125rem; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; }
}

/* ---------- bon (ontbijt aan huis / contactformulier) ---------- */
.bon {
  --perf: 46%;
  position: relative; background: var(--ochre); color: var(--ink);
  display: grid; grid-template-columns: var(--perf) 1fr;
}
/* de twee ronde inkepingen van de bon, in de kleur van de grond */
.bon__links { position: relative; }
.bon__links::before, .bon__links::after {
  content: ""; position: absolute; left: 100%; top: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--ground); transform: translate(-50%, -50%) translateX(-2.5px);
}
.bon__links::after { top: 100%; }
.bon__links { padding: clamp(2rem, 4vw, 3.5rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; border-right: 5px dotted var(--ground); }
.bon__rechts { padding: clamp(2rem, 4vw, 3.5rem); display: flex; flex-direction: column; gap: 1.5rem; }
.bon h2 { max-width: 10ch; }
.bon__prijs { font-weight: 800; font-variation-settings: "wdth" 75; font-size: clamp(3rem, 1.5rem + 4vw, 5.5rem); line-height: 0.9; letter-spacing: -0.02em; }
.bon__prijs + p { font-weight: 600; margin-top: -0.75rem; }
.bon .bullet-list li::before { background: var(--ink); }
.bon .link { color: var(--ink); }
@media (max-width: 52rem) {
  .bon { grid-template-columns: 1fr; }
  .bon__links::before, .bon__links::after { top: 100%; left: 0; transform: translate(-50%, -50%) translateY(2.5px); }
  .bon__links::after { left: 100%; }
  .bon__links { border-right: 0; border-bottom: 5px dotted var(--ground); }
}

/* formulier in de bon */
.form { display: grid; gap: 0.625rem; }
.form label { font-weight: 600; font-size: 1rem; }
.veld { display: grid; gap: 0.3rem; }
.form input, .form textarea {
  width: 100%; min-height: 3.25rem; padding: 0.8rem 1rem; font: 400 1.0625rem/1.4 var(--font);
  color: var(--ink); background: #f3d79c; border: 2px solid transparent; border-radius: 0;
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease;
}
.form textarea { min-height: 8rem; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: #5c4520; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--ink); background: #f8e6bf; }
.form input:user-invalid { border-color: #7a1d0c; }
.form .hint { font-size: var(--fs-small); }
.form button { width: 100%; justify-content: center; min-height: 3.5rem; margin-top: 0.4rem; clip-path: none; padding-right: 1.4rem; }

/* ---------- voet: het vaantje, groot ---------- */
.footer { margin-top: var(--gap-section); background: var(--ochre); color: var(--ink); padding-bottom: clamp(4rem, 8vw, 7rem); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - clamp(2.5rem, 6vw, 5rem)), 0 100%); }
.footer__merk {
  font-weight: 800; font-variation-settings: "wdth" 62; letter-spacing: -0.03em; line-height: 0.8;
  font-size: clamp(5rem, 22.5vw, 22rem); text-align: center; padding-top: clamp(2rem, 4vw, 3.5rem);
  overflow: hidden; white-space: nowrap;
}
.footer__slogan { text-align: center; font-weight: 700; font-size: var(--fs-h3); margin-top: 0.75rem; }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 2.5rem; margin-top: clamp(3rem, 6vw, 5rem); }
.footer__grid h2 { font-size: var(--fs-h3); font-weight: 700; font-variation-settings: "wdth" 90; letter-spacing: 0; line-height: 1.2; margin-bottom: 0.75rem; }
.footer__adres { grid-column: 1 / span 4; }
.footer__tijden { grid-column: 5 / span 4; }
.footer__links { grid-column: 9 / -1; }
.footer address { font-style: normal; }
.footer a { text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
.footer__links li + li { margin-top: 0.3rem; }
.footer__links a { display: inline-block; padding-block: 0.2rem; }
.tijden { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 1.25rem; font-variant-numeric: tabular-nums; }
.tijden dt { font-weight: 600; }
.tijden .is-vandaag { font-weight: 800; }
.footer__onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; font-size: var(--fs-small); }
@media (hover: hover) and (pointer: fine) { .footer a:hover { text-decoration-thickness: 0.16em; } }
@media (max-width: 52rem) {
  .footer__adres, .footer__tijden, .footer__links { grid-column: 1 / -1; }
  .footer__adres { grid-column: 1 / span 6; }
  .footer__links { grid-column: 7 / -1; grid-row: 1; }
  .footer__tijden { grid-row: 2; }
}
@media (max-width: 30rem) {
  .footer__adres, .footer__links { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- binnenpagina's ---------- */
.kop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
.kop__tekst { grid-column: 1 / span 7; padding-block: clamp(2rem, 5vw, 5rem) 2rem; align-self: center; }
.kop__tekst .lead { margin-top: 1.75rem; }
.kop__tekst .actions { margin-top: 2rem; }
.kop__vaan {
  grid-column: 8 / -1; grid-row: 1; margin-top: calc(-1 * clamp(5.5rem, 4rem + 4vw, 8rem));
  margin-right: calc(-1 * var(--margin)); height: min(40rem, 82svh); min-height: 26rem; --notch: 10%;
}
.kop--zonder .kop__tekst { grid-column: 1 / span 9; }
.terug { display: inline-block; margin-top: 1.5rem; font-weight: 600; }
@media (max-width: 52rem) {
  .kop { display: block; }
  .kop__vaan { margin: 0 calc(-1 * var(--margin)) 0 auto; width: 82%; height: auto; min-height: 0; aspect-ratio: 4 / 4.4; }
}

.tekstblok { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 2.5rem; }
.tekstblok .prose { grid-column: 1 / span 7; }
.tekstblok aside { grid-column: 9 / -1; }
.tekstblok aside .vaan { aspect-ratio: 4 / 5; --notch: 10%; }
.feit { background: var(--ground-2); padding: 1.75rem; }
.feit h2 { font-size: var(--fs-h3); font-weight: 700; font-variation-settings: "wdth" 90; letter-spacing: 0; line-height: 1.2; margin-bottom: 0.6rem; }
.feit + .feit, .vaan + .feit { margin-top: 1rem; }
.feit .actions { margin-top: 1.25rem; }
@media (max-width: 44rem) { .tekstblok .prose, .tekstblok aside { grid-column: 1 / -1; } }
@media (min-width: 44.01rem) and (max-width: 52rem) { .tekstblok .prose { grid-column: 1 / span 7; } .tekstblok aside { grid-column: 8 / -1; } }

/* tijdlijn over ons */
.jaren li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; padding-block: 2.25rem; }
.jaren li + li { border-top: 2px solid rgb(23 19 14 / 0.1); }
.jaren .jaar { grid-column: 1 / span 4; font-weight: 800; font-variation-settings: "wdth" 75; font-size: clamp(3rem, 1.5rem + 5vw, 6rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--ochre-ink); }
.jaren .wat { grid-column: 5 / span 7; }
.jaren h3 { margin-bottom: 0.5rem; }
.jaren p { max-width: 60ch; }
@media (max-width: 44rem) { .jaren li { display: block; } .jaren .jaar { margin-bottom: 0.75rem; } }

/* weekaanbiedingen-pagina: per dag */
.week { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.week li { background: var(--ground-2); padding: clamp(1.5rem, 2.5vw, 2.25rem); display: flex; flex-direction: column; gap: 0.4rem; min-height: 15rem; }
.week li:nth-child(1) { background: var(--ochre); }
.week li:nth-child(6) { background: var(--ink); color: var(--ground); }
.week li:nth-child(6) .week__deal { color: var(--ochre-pale); }
.week .week__dag { font-weight: 600; }
.week h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); }
.week .week__dag { order: 0; }
.week .week__deal { margin-top: auto; padding-top: 1.5rem; font-weight: 800; font-variation-settings: "wdth" 75; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); line-height: 0.95; letter-spacing: -0.02em; }
.week li.is-vandaag { outline: 4px solid var(--ink); outline-offset: -4px; }
.week li.is-vandaag:nth-child(6) { outline-color: var(--ochre); }
@media (max-width: 52rem) { .week { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .week { grid-template-columns: 1fr; } .week li { min-height: 0; } }

/* contact */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 3rem; }
.contact__gegevens { grid-column: 1 / span 5; display: grid; gap: 2.5rem; align-content: start; }
.contact__gegevens h2 { font-size: var(--fs-h3); font-weight: 700; font-variation-settings: "wdth" 90; letter-spacing: 0; line-height: 1.2; margin-bottom: 0.6rem; }
.contact__groot { font-weight: 800; font-variation-settings: "wdth" 75; font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); line-height: 1; letter-spacing: -0.02em; text-decoration: none; }
.contact .bon { grid-column: 7 / -1; grid-template-columns: 1fr; }
.contact .bon__links::before, .contact .bon__links::after { top: 100%; left: 0; transform: translate(-50%, -50%) translateY(2.5px); }
.contact .bon__links::after { left: 100%; }
.contact .bon__links { border-right: 0; border-bottom: 5px dotted var(--ground); }
@media (max-width: 52rem) { .contact__gegevens, .contact .bon { grid-column: 1 / -1; } }

/* recepten */
.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.filter { display: none; }
.js .filter { display: flex; }
.filter button {
  min-height: 2.75rem; padding: 0.5rem 1.1rem; font: 600 1rem/1 var(--font); cursor: pointer;
  background: var(--ground-2); color: var(--ink); border: 0;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.filter button:active { transform: scale(0.96); }
.filter button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
@media (hover: hover) and (pointer: fine) { .filter button:hover:not([aria-pressed="true"]) { background: #e3dacb; } }
.rgrid li[hidden] { display: none; }
.rgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem 1.5rem; }
.rgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rgrid__item { position: relative; }
.rgrid__item .vaan { aspect-ratio: 4 / 3.4; --notch: 9%; margin-bottom: 1rem; }
.rgrid__item .vaan img { transition: transform 700ms var(--ease-soft); }
.rgrid__item h3 { font-size: 1.1875rem; }
.rgrid__item h3 a { text-decoration: none; }
.rgrid__item h3 a::after { content: ""; position: absolute; inset: 0; }
.rgrid__item p { margin-top: 0.3rem; color: var(--muted); font-size: var(--fs-small); }
.rgrid__item:focus-within { outline: 3px solid var(--ink); outline-offset: 6px; }
.rgrid__item a:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .rgrid__item:hover .vaan img { transform: scale(1.06); }
  .rgrid__item:hover h3 a { text-decoration: underline; text-decoration-color: var(--ochre); text-decoration-thickness: 0.1em; text-underline-offset: 0.25em; }
}
@media (max-width: 66rem) { .rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 44rem) { .rgrid, .rgrid--3 { grid-template-columns: 1fr 1fr; gap: 2rem 0.875rem; } .rgrid__item h3 { font-size: 1.0625rem; } }
.recept-kop .kop__vaan { --notch: 8%; }
.recept { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 3rem; }
.recept__ingr { grid-column: 1 / span 4; background: var(--ground-2); padding: clamp(1.5rem, 2.5vw, 2.25rem); align-self: start; }
.recept__ingr h2, .recept__bereiding h2 { font-size: var(--fs-h3); font-weight: 700; font-variation-settings: "wdth" 90; letter-spacing: 0; line-height: 1.2; margin-bottom: 1rem; }
.recept__bereiding { grid-column: 6 / span 7; }
.recept__bereiding.is-vol { grid-column: 1 / -1; max-width: none; columns: 2 24rem; column-gap: 4rem; }
.recept__bereiding.is-vol h2 { column-span: all; }
.recept__bereiding.is-vol p { break-inside: avoid; }
.recept__bereiding ul { display: grid; gap: 1rem; }
@media (max-width: 52rem) { .recept__ingr, .recept__bereiding, .recept__bereiding.is-vol { grid-column: 1 / -1; } }

/* ---------- beweging ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-in] > * { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-expo), transform 900ms var(--ease-expo); }
  .js [data-in].is-in > * { opacity: 1; transform: none; }
  .js [data-in].is-in > *:nth-child(2) { transition-delay: 80ms; }
  .js [data-in].is-in > *:nth-child(3) { transition-delay: 160ms; }
  .js [data-in].is-in > *:nth-child(4) { transition-delay: 240ms; }
  .js [data-in].is-in > *:nth-child(5) { transition-delay: 320ms; }
  .js [data-in].is-in > *:nth-child(n+6) { transition-delay: 380ms; }

  .js [data-rij] > * { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
  .js [data-rij].is-in > * { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 60ms); }

  .js .shutter { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js .shutter img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
  .js .shutter.is-in { clip-path: inset(0); }
  .js .shutter.is-in img { transform: none; }

  .hero__text > * { animation: op 900ms var(--ease-expo) both; }
  .hero__text > *:nth-child(2) { animation-delay: 90ms; }
  .hero__text > *:nth-child(3) { animation-delay: 180ms; }
  .hero__text > *:nth-child(4) { animation-delay: 260ms; }
  @keyframes op { from { opacity: 0; transform: translateY(20px); } }

  .hero__vaan img, .kop__vaan img { animation: adem 18s var(--ease-soft) infinite alternate; }
  @keyframes adem { from { transform: scale(1.0); } to { transform: scale(1.06); } }

  .paneel__foto img { transform: scale(1.1); }
  @supports (animation-timeline: view()) {
    .paneel__foto img { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes drift { from { transform: scale(1.1) translateY(-4%); } to { transform: scale(1.1) translateY(4%); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}