/* 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;
  /* Paginabreedte in rem en omslagpunten in em: kiest iemand in de browser een
     grotere letter, dan groeien ze mee en loopt de kop niet uit beeld. */
  --maat: 70rem;
  --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); }
/* De skiplink valt bij focus over de donkere voorbeeldbalk: daarom een licht
   vlak met een donkere ring binnen dat vlak, anders liepen de teksten in
   elkaar over en was de ring onzichtbaar. Laag genoeg om ook op desktop, waar
   de balk één regel hoog is, binnen de balk te blijven. */
.skiplink { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--linnen); color: var(--inkt); font-weight: 700; padding: 0.3rem 0.9rem; }
.skiplink:focus { left: 1rem; top: 0.2rem; }
.skiplink:focus-visible { outline: 2px solid var(--inkt); outline-offset: -5px; }

/* 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; }
/* Ruimte voor de plakkende kop bij ankers en bij focus met Tab: zo valt een
   element dat focus krijgt nooit onder de kop (WCAG 2.4.11). Waar de
   onderbalk staat, komt er onderin ruimte bij. */
html { scroll-padding-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: 60em) {
  .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: 60em) {
  .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-padding-top, zodat hij onder de kop
   blijft. Niet op lage schermen. */
@media (min-width: 60em) and (min-height: 40em) {
  .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: 47.5em) {
  /* Ruimte voor de onderbalk, die op een iPhone met thuisbalk hoger wordt. */
  body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  /* Een link of vraag die focus krijgt, valt niet achter de onderbalk. */
  html { scroll-padding-bottom: calc(5.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; }

/* Onder 20em: een telefoon met een grote browserletter (bij de
   standaardletter pas onder 320 px). Logo en Menu mogen dan over twee regels
   en de kop plakt niet meer bovenaan, zodat er ruimte voor de tekst
   overblijft. Een lang woord (Borrelarrangement) breekt af met een
   afbreekstreepje in plaats van buiten beeld te lopen. */
@media (max-width: 19.9375em) {
  html { scroll-padding-top: 1rem; }
  .site-kop { position: relative; }
  .site-kop__inner { flex-wrap: wrap; row-gap: 0.5rem; }
  body { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 16 6 6; }
  :is(h1, h2, h3, th, dt, .gerecht__naam, .site-voet__naam) { hyphenate-limit-chars: 8 3 3; }
  /* Arrangementen en vacatures: de prijs onder de naam, anders bleef er voor
     de naam maar een smalle kolom over. */
  .rijen li { grid-template-columns: minmax(0, 1fr); }
  .rijen h3, .rijen .prijs, .rijen p { grid-column: 1; grid-row: auto; }
}
/* Een telefoon met een grote browserletter: onder 18.25em passen Reserveer en
   Bel niet meer naast elkaar (ze hebben samen 17,8em nodig). Dan staan ze
   onder elkaar en komt er onderin ruimte bij. Bij de standaardletter is dat
   pas onder 320 px. */
@media (max-width: 18.25em) {
  body { padding-bottom: calc(8.25rem + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(9.25rem + env(safe-area-inset-bottom)); }
  .onderbalk { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}