/* Brasserie Waterhoen, voorbeeldsite van joepa (dit restaurant bestaat niet).
   Eigen stijl, los van de joepa-kleuren. Letters: Young Serif (koppen) en
   Albert Sans (tekst), zelf gehost (SIL Open Font License, zie fonts/).
   Albert Sans is een variabel font: één bestand voor 400 tot 700.
   Contrast (WCAG AA): inkt #1e2622 op linnen #f6f1e8 13,8:1; inkt-zacht
   #4f5a53 op linnen 6,4:1; roest #a4471f op linnen 5,3:1 en wit op roest
   6,0:1; linnen op groen #274a3c 8,8:1. */
@font-face { font-family: "Young Serif"; src: url("fonts/young-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("fonts/albert-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --linnen: #f6f1e8;
  --linnen-diep: #ece4d6;
  --inkt: #1e2622;
  --inkt-zacht: #4f5a53;
  --groen: #274a3c;
  --roest: #a4471f;
  --roest-diep: #86381a;
  --lijn: rgba(30, 38, 34, 0.14);
  --wit: #ffffff;
  --kop: "Young Serif", Georgia, "Times New Roman", serif;
  --tekst: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maat: 1120px;
  --rond: 6px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--tekst); font-size: 1.0625rem; line-height: 1.6; color: var(--inkt); background: var(--linnen); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--kop); font-weight: 400; line-height: 1.15; margin: 0 0 0.6em; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--roest-diep); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--inkt); outline-offset: 3px; }
.voorbeeldbalk :focus-visible, .site-voet :focus-visible { outline-color: var(--linnen); }
.skiplink { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--inkt); color: var(--linnen); padding: 0.6rem 1rem; }
.skiplink:focus { left: 1rem; top: 1rem; }

/* De voorbeeldbalk staat op elke pagina bovenaan. */
.voorbeeldbalk { background: var(--inkt); color: var(--linnen); font-size: 0.9rem; text-align: center; padding: 0.5rem 1rem; }
.voorbeeldbalk p { margin: 0; }
.voorbeeldbalk a { color: var(--linnen); font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }

/* Kop met menu en de reserveerknop, plakt bovenaan. */
.site-kop { position: sticky; top: 0; z-index: 20; background: var(--linnen); border-bottom: 1px solid var(--lijn); }
.site-kop__inner { max-width: calc(var(--maat) + 2.5rem); margin: 0 auto; padding: 0.8rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; }
.site-kop__logo { display: flex; flex-direction: column; text-decoration: none; color: var(--inkt); line-height: 1; }
.site-kop__naam { font-family: var(--kop); font-size: 1.6rem; }
.site-kop__sub { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--inkt-zacht); margin-top: 0.25rem; }
.site-nav { display: flex; gap: 1.4rem; margin-left: auto; }
.site-nav a { color: var(--inkt); text-decoration: none; font-weight: 500; padding: 0.3rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--roest); }
.site-kop__menu { display: none; }
section[id] { scroll-margin-top: 6rem; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font: inherit; font-weight: 600; padding: 0.75rem 1.3rem; border-radius: var(--rond); border: 2px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.2; transition: background-color 0.15s ease, transform 0.1s ease; }
.knop--vol { background: var(--roest); color: var(--wit); border-color: var(--roest); }
.knop--vol:hover { background: var(--roest-diep); border-color: var(--roest-diep); }
.knop--lijn { background: transparent; color: var(--inkt); border-color: var(--inkt); }
.knop--lijn:hover { background: var(--linnen-diep); }
.knop:active { transform: translateY(1px); }
.tekstknop { font: inherit; background: none; border: 0; padding: 0; color: var(--roest-diep); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.tekstlink { font-weight: 600; color: var(--inkt); text-decoration: underline; text-decoration-color: var(--roest); text-underline-offset: 0.2em; }

/* Blokken */
.blok { padding: clamp(2.5rem, 6vw, 5rem) 1.25rem; }
.blok__inner { max-width: var(--maat); margin: 0 auto; }
.blok__inner--twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.blok__inner--midden { align-items: center; }
.blok__inner--drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.blok__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.blok__kop h2 { margin: 0; }
.blok__kop-rechts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; margin: 0; }
.blok--zacht { background: var(--linnen-diep); }
.blok p { max-width: 60ch; }

/* Kop van de pagina: beeld boven, tekst eronder (geen tekst over een foto). */
.hero { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.hero__beeld img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero--laag .hero__beeld img { aspect-ratio: 21 / 9; }
.hero__tekst { max-width: calc(var(--maat) + 2.5rem); margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) 1.25rem 0; }
.hero__tekst p { max-width: 60ch; font-size: 1.15rem; }
.hero__tekst .v { margin-left: 0; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }

/* Vanaf 960px staat de kop naast de foto: kop en knoppen staan op het
   eerste scherm en de foto houdt een rustige verhouding. */
@media (min-width: 960px) {
  .hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 4vw, 4.5rem); max-width: calc(var(--maat) + 2.5rem); margin: 0 auto; padding: clamp(1.5rem, 3vw, 2.5rem) 1.25rem clamp(2.5rem, 5vw, 4rem); }
  .hero__beeld { grid-column: 2; grid-row: 1; }
  .hero__beeld img { aspect-ratio: 4 / 3; max-height: min(72svh, 36rem); border-radius: var(--rond); }
  .hero--laag .hero__beeld img { aspect-ratio: 16 / 9; }
  .hero__tekst { grid-column: 1; grid-row: 1; max-width: none; margin: 0; padding: 0; }
  .hero h1 { font-size: clamp(2rem, 1rem + 2vw, 2.8rem); }
}

/* Openingstijden en afwijkende dagen */
.tijden { border-collapse: collapse; width: 100%; max-width: 30rem; }
.tijden th, .tijden td { text-align: left; padding: 0.55rem 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tijden th { font-weight: 500; padding-right: 1rem; }
.tijden__noot { font-size: 0.95rem; color: var(--inkt-zacht); margin-top: 0.8rem; }
.afwijkend { list-style: none; margin: 0; padding: 0; }
.afwijkend li { padding: 0.55rem 0; border-bottom: 1px solid var(--lijn); }

/* Gerechten met foto (home en boven de kaart) */
.gerechten-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); }
.gerechten-grid img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rond); margin-bottom: 0.8rem; }
.gerechten-grid h3 { margin-bottom: 0.3rem; }
.gerechten-grid p { margin: 0; color: var(--inkt-zacht); }
.gerechten-grid .prijs { color: var(--inkt); font-weight: 600; margin-top: 0.4rem; }

/* De kaart als tekst */
.kaart-sectie { padding: clamp(2rem, 5vw, 3.5rem) 1.25rem; border-top: 1px solid var(--lijn); }
.kaart-sectie__inner { max-width: var(--maat); margin: 0 auto; }
.kaart-sectie__inner > * { max-width: 44rem; }
.kaart-sectie .gerechten-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.5rem, 2vw, 1rem); margin: 0 0 1.5rem; }
.kaart-sectie .gerechten-grid img { aspect-ratio: 1 / 1; margin-bottom: 0; }
.kaart-sectie__noot { color: var(--inkt-zacht); margin-top: -0.4rem; }
.gerechten { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.gerechten li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1.5rem; padding: 0.7rem 0; border-bottom: 1px solid var(--lijn); }
.gerecht__naam { grid-column: 1; grid-row: 1; font-weight: 600; }
.gerecht__prijs { grid-column: 2; grid-row: 1; align-self: baseline; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gerecht__uitleg { grid-column: 1 / -1; grid-row: 2; color: var(--inkt-zacht); font-size: 0.95rem; }
.v { font-style: normal; text-decoration: none; display: inline-block; margin-left: 0.4rem; padding: 0 0.4rem; border: 1px solid var(--groen); border-radius: 999px; color: var(--groen); font-size: 0.75rem; line-height: 1.5; vertical-align: middle; }
.verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kaart-legenda { font-size: 0.95rem; color: var(--inkt-zacht); white-space: nowrap; }
.kaart-legenda .v { margin: 0 0.35rem 0 0; }

/* Vanaf 960px is de kaart een menukaart: titel en noot links, gerechten
   rechts. De hero volgt dezelfde kolommen, zodat de foto op dezelfde lijn
   begint als de gerechten. Zelfde tussenruimte als de hero, anders lopen de
   randen niet gelijk. Staat na de basisregel voor .kaart-sectie__inner > *,
   anders wint die en blijft de lijst op 44rem steken. */
@media (min-width: 960px) {
  .hero--laag { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .kaart-sectie__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
  .kaart-sectie__inner > * { max-width: none; }
  /* .gerechten li heeft eigen ruimte tussen de regels (padding-top), maar dat
     duwt de eerste gerechtsnaam los van de titel ernaast. Alleen de eerste
     regel van de eerste lijst in het lijstblok schuift daarom omhoog. */
  .kaart-sectie__lijst > .gerechten:first-child li:first-child { padding-top: 0; }
}
/* De titel blijft in beeld naast een lange lijst. Werkt alleen met
   align-items: start hierboven en zonder overflow op de sectie of de
   wrapper; top gelijk aan de scroll-margin-top, zodat hij onder de kop
   blijft. Niet op lage schermen. */
@media (min-width: 960px) and (min-height: 640px) {
  .kaart-sectie__kop { position: sticky; top: 6rem; }
}

/* Sfeer, route, voet */
#sfeer img { border-radius: var(--rond); aspect-ratio: 4 / 3; object-fit: cover; }
.site-voet { background: var(--groen); color: var(--linnen); padding: clamp(2rem, 5vw, 3.5rem) 1.25rem; }
.site-voet__inner { max-width: var(--maat); margin: 0 auto; }
.site-voet__naam { font-family: var(--kop); font-size: 1.4rem; margin-bottom: 0.3rem; }
.site-voet a, .site-voet .tekstknop { color: var(--linnen); }
.site-voet__joepa { margin-top: 1.5rem; font-size: 0.9rem; }

/* Rijen (arrangementen, vacatures) */
.rijen { list-style: none; margin: 0; padding: 0; max-width: 48rem; }
.rijen li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 2rem; padding: 1.2rem 0; border-top: 1px solid var(--lijn); }
.rijen h3 { grid-column: 1; grid-row: 1; margin: 0; }
.rijen .prijs { grid-column: 2; grid-row: 1; align-self: baseline; font-weight: 600; color: var(--inkt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rijen p { grid-column: 1 / -1; grid-row: 2; margin: 0; color: var(--inkt-zacht); }

/* Onderbalk op de telefoon: altijd Reserveer en Bel. */
.onderbalk { display: none; }
@media (max-width: 760px) {
  /* Ruimte voor de onderbalk, die op een iPhone met thuisbalk hoger wordt. */
  body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  .onderbalk { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom)); background: var(--linnen); border-top: 1px solid var(--lijn); }
  .site-kop__reserveer { display: none; }
  .site-kop__menu { display: inline-block; margin-left: auto; font: inherit; font-weight: 600; background: none; border: 2px solid var(--inkt); border-radius: var(--rond); padding: 0.45rem 0.9rem; cursor: pointer; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--linnen); border-bottom: 1px solid var(--lijn); padding: 0.5rem 1.25rem 1rem; }
  .site-kop--open .site-nav { display: flex; }
  .site-nav a { padding: 0.7rem 0; border-bottom: 1px solid var(--lijn); }
  .blok__inner--twee, .blok__inner--drie, .gerechten-grid { grid-template-columns: 1fr; }
}

/* De melding achter reserveren, bellen en mailen. */
.melding { border: 0; border-radius: var(--rond); padding: 1.75rem; max-width: 26rem; width: calc(100% - 2rem); color: var(--inkt); background: var(--wit); box-shadow: 0 20px 60px rgba(30, 38, 34, 0.25); }
.melding::backdrop { background: rgba(30, 38, 34, 0.45); }
.melding__kop { font-family: var(--kop); font-size: 1.3rem; margin-bottom: 0.5rem; }
.melding__sluit { margin-top: 0.5rem; }
.hero { position: relative; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}