/* Roodnoot base styles. Nuchter, ambachtelijk, "geen poeha" -- a taproom-
   signage system rather than the generic "warm cream + serif" brewery
   look: stone/charcoal neutrals, the existing brand red, a condensed
   industrial display face for headings, paired with a warm grotesk for
   body text. Design direction proposed + approved as a homepage mockup
   before landing here; see docs/ for the reasoning if that gets written
   up, otherwise ask -- this file is the source of truth for the palette.

   Token names (--color-*, --font-body) are unchanged from the original
   plain stylesheet on purpose, so every existing template/page inherits
   the new look without needing per-page edits; new tokens (--color-bg-
   panel, --color-border, --color-copper, --color-malt, --font-display)
   are additive. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/static/fonts/archivo-variable.woff2) format('woff2');
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/static/fonts/big-shoulders-display-variable.woff2) format('woff2');
}

:root {
  --color-text: #241f19;
  --color-bg: #e7e0cd;
  --color-bg-panel: #f2ecdd;
  --color-border: #c9bfa0;
  --color-accent: #8a1f11; /* roodnoot */
  --color-copper: #8a4d24;
  --color-malt: #96700f;
  --color-text-muted: #5b4f3f;

  --font-body: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Big Shoulders Display', ui-sans-serif, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #ede4cf;
    --color-bg: #1c1712;
    --color-bg-panel: #262019;
    --color-border: #3a3226;
    --color-accent: #d3654a;
    --color-copper: #c98a52;
    --color-malt: #e0b054;
    --color-text-muted: #b8ab8e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-wrap: balance;
  letter-spacing: 0.01em;
}

a { color: var(--color-accent); }

/* Default page chrome: most pages (forms, tables, staff dashboards) are a
   single centered column at 60rem. The homepage overrides this via
   .site-header/main.home/.site-footer below, each owning a wider (74rem)
   .wrap internally instead -- two different content widths, so the cap
   can't live on the bare element selector for all three. */
header, main, footer {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem;
}
.site-header, .site-footer, main.home {
  max-width: none;
  margin: 0;
  padding: 0;
}

.error { color: var(--color-accent); }

/* Language switcher: native <details>/<summary>, no JS needed. */
.lang-switcher { position: relative; font-size: 0.85rem; }
.lang-switcher summary {
  display: flex; align-items: center; gap: 0.4rem;
  cursor: pointer; list-style: none;
  padding: 0.4rem 0.6rem; border: 1px solid var(--color-border); border-radius: 999px;
  font-weight: 700; letter-spacing: 0.04em;
}
.lang-switcher summary::-webkit-details-marker { display: none; }
.lang-switcher summary:hover { border-color: var(--color-text); }
.lang-switcher .lang-flag { font-size: 1.05rem; line-height: 1; }
.lang-switcher .lang-code { font-size: 0.76rem; text-transform: uppercase; }
.lang-switcher-label { font-size: 0.76rem; font-weight: 700; color: var(--color-text-muted); }
.lang-menu {
  position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 20;
  list-style: none; margin: 0; padding: 0.4rem;
  background: var(--color-bg-panel); border: 1px solid var(--color-border); border-radius: 10px;
  min-width: 11rem;
}
[dir="rtl"] .lang-menu { right: auto; left: 0; }
.lang-menu li { margin: 0; }
.lang-menu a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.6rem; border-radius: 6px;
  color: var(--color-text); text-decoration: none; font-size: 0.9rem;
}
.lang-menu a:hover { background: var(--color-bg); }
.lang-menu a.active { font-weight: 800; color: var(--color-accent); }
.lang-menu .lang-flag { font-size: 1.15rem; }
.notice { background: var(--color-bg-panel); padding: 0.75rem 1rem; border-left: 3px solid var(--color-accent); }
.notice--blocked { border-left-color: var(--color-accent); }

form label { display: block; margin-top: 0.75rem; }
form input, form select, form textarea, form button { font: inherit; padding: 0.5rem; }
form button {
  margin-top: 1rem;
  background: var(--color-accent);
  color: #f5ead9;
  border: none;
  cursor: pointer;
  font-weight: 700;
}

.autosave-status { font-size: 0.8rem; color: var(--color-text-muted); margin-left: 0.5rem; }
fieldset { margin-top: 1rem; border-color: var(--color-border); }
textarea { width: 100%; max-width: 40rem; display: block; }

/* Event photo on the detail page -- scales with the page, capped so a
   large upload never dominates the layout. */
.event-foto {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
}

/* Evenementenlijst: tekst links (datum/tijd, titel, beschrijving), foto
   rechts op een vaste kolombreedte -- elke foto wordt op dezelfde
   standaardmaat getoond (aspect-ratio + object-fit: cover), ongeacht het
   formaat van de upload. Zelfde grid+object-fit aanpak als .hero-grid /
   .hero-photo hierboven. */
.events { list-style: none; margin-top: 1.5rem; padding: 0; }
.event-item {
  display: grid;
  grid-template-columns: 1fr 22rem;
  gap: 2rem;
  align-items: start;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--color-border);
}
.event-item:first-child { padding-top: 0; }
.event-main { min-width: 0; }
.event-datum { display: block; font-size: 0.85rem; color: var(--color-text-muted); }

/* Category sits right after the title, at a fixed tab-stop so it lines up
   in the same spot for every event with a short title -- via a min-width
   on the title rather than an absolutely positioned tag: a title longer
   than the tab-stop (e.g. "HeyRay & Trouble No More", or most translated
   titles) pushes the tag along, or onto the next line, instead of running
   underneath it. */
.event-titel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  margin-top: 0.3rem;
}
.event-titel-row > a { min-width: 13.2rem; }
.event-titel { display: inline; font-size: 1.3rem; }

.event-beschrijving { margin: 0.6rem 0 0; color: var(--color-text-muted); }

.event-foto-col { display: block; }
.event-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

table { border-collapse: collapse; width: 100%; margin-top: 1rem; }
th, td { border: 1px solid var(--color-border); padding: 0.4rem 0.6rem; text-align: left; font-size: 0.9rem; }
tr.status-geannuleerd { opacity: 0.5; }
/* Capaciteit: a closed day is dimmed like a cancelled reservation, except
   its last cell -- a faded "Weer openzetten" button reads as disabled. */
tr.dag-dicht td:not(:last-child) { opacity: 0.5; }
tr.status-wacht_op_bevestiging { background: var(--color-bg-panel); }

/* Reserveringen-overzicht: cellen breken niet af (behalve de opmerking,
   zie .bericht-cell) -- past de tabel niet, dan scrollt hij horizontaal. */
.table-scroll { overflow-x: auto; }
/* With js/table_scrollbar.js: the box's own scrollbar (at the bottom of
   the table, often off screen) makes way for one that sticks to the bottom
   of the window while the table is in view. */
.table-scroll-wrap > .table-scroll { scrollbar-width: none; }
.table-scroll-wrap > .table-scroll::-webkit-scrollbar { display: none; }
.table-scrollbar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  overflow-x: scroll;
  overflow-y: hidden;
  background: var(--color-bg);
}
.table-scrollbar > div { height: 0.75rem; }
/* Staff pages with wide tables use the whole window instead of the 60rem
   column, so on a desktop screen the table usually fits without scrolling. */
main.breed { max-width: none; }
.reservations-table td, .reservations-table th { white-space: nowrap; }
/* The guest's remark is the one cell that wraps: staff must be able to
   read all of it without hovering. */
.reservations-table .bericht-cell {
  white-space: pre-line;
  min-width: 18rem;
  max-width: 26rem;
  overflow-wrap: anywhere;
}
.weergave-keuze a[aria-current] { font-weight: 700; text-decoration: none; color: inherit; }
.aantal-personen-form { display: inline-flex; gap: 0.3rem; align-items: center; }
.aantal-personen-form input { width: 3.5rem; padding: 0.2rem 0.3rem; font: inherit; }
.aantal-personen-form button { padding: 0.15rem 0.5rem; line-height: 1; }
.aantal-personen-form .tijd-invoer { width: auto; padding: 0.2rem 0.3rem; font: inherit; }

/* Date picker on /reserveren: only bookable dates can be clicked */
.kalender { max-width: 22rem; margin-top: 0.25rem; }
.kalender-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.kalender-kop strong { text-transform: capitalize; }
.kalender-kop button { padding: 0.2rem 0.8rem; margin-top: 0; }
.kalender-kop button:disabled { opacity: 0.35; cursor: not-allowed; }
.kalender-dagen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; text-align: center; }
.kalender-dagen span { font-size: 0.8rem; color: var(--color-text-muted); padding-bottom: 0.2rem; }
.kalender-dagen button {
  margin: 0; padding: 0.45rem 0; background: var(--color-bg-panel); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 4px; cursor: pointer;
}
.kalender-dagen button:hover:not(:disabled) { border-color: var(--color-accent); }
.kalender-dagen button.gekozen { background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-weight: 700; }
.kalender-dagen button:disabled {
  background: transparent; border-color: transparent; color: var(--color-text-muted);
  opacity: 0.55; text-decoration: line-through; cursor: not-allowed;
}
.kalender-gekozen { margin: 0.5rem 0 0; font-weight: 600; }
.kalender-uitleg { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--color-text-muted); }

/* ================= site header ================= */
.site-header { border-bottom: 1px solid var(--color-border); padding: 0; }
.site-header .wrap {
  max-width: 74rem;
  margin: 0 auto;
  padding: 1.15rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.wordmark { display: inline-flex; text-decoration: none; }
.wordmark-logo { height: 2.6rem; width: auto; display: block; }
/* The logo art is solid black on transparent -- inverting it in dark mode
   is simpler and sharper than shipping a second asset, and safe here
   because it's genuinely monochrome (no color content to distort). */
@media (prefers-color-scheme: dark) {
  .wordmark-logo { filter: invert(1); }
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.nav-links a { color: var(--color-text); text-decoration: none; }
.nav-links a:hover { color: var(--color-accent); }

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.65rem 1.2rem;
  border: 2px solid var(--color-accent);
}
.btn-solid { background: var(--color-accent); color: #f5ead9; }
.btn-solid:hover { background: transparent; color: var(--color-accent); }
.btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-outline:hover { border-color: var(--color-text); }
.btn-white { background: #f5ead9; color: #241f19; border-color: #f5ead9; }
.btn-white:hover { background: transparent; color: var(--color-text); border-color: var(--color-text); }

/* Evenementen categorie-filter (Alles/Muziek/Quiz/...) as buttons -- same
   visual language as .btn above, outlined by default and filled (like
   .btn-solid) for the active one. */
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.6rem 0; }
.filters a {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.55rem 1.1rem;
  border: 2px solid var(--color-border);
  color: var(--color-text);
}
.filters a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.filters a.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #f5ead9;
}

/* ================= homepage sections ================= */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-copper);
  display: block;
  margin-bottom: 0.6rem;
}

.hero { padding: 3.5rem 0 3rem; }
.hero .wrap { max-width: 74rem; margin: 0 auto; padding: 0 1.75rem; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.95fr; gap: 3.5rem; align-items: center; }
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 0.98;
  max-width: 18ch;
  margin: 0;
}
.hero h1 .accent { color: var(--color-accent); }
.hero h1 .accent2 { color: var(--color-copper); }
.hero-intro { margin-top: 1.6rem; font-size: 1.08rem; color: var(--color-text-muted); max-width: 38rem; }
.hero-intro + .hero-intro { margin-top: 1rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.hero-photo { margin: 0; }
.hero-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border: 1px solid var(--color-border); }
.hero-photo figcaption {
  margin-top: 0.6rem; font-size: 0.8rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-text-muted); font-weight: 700;
}

.facts { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.facts .wrap { max-width: 74rem; margin: 0 auto; padding: 0 1.75rem; }
.facts ul {
  list-style: none; margin: 0; padding: 1.1rem 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem 2.4rem;
}
.facts li { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.facts li strong { color: var(--color-text); }

section.block { padding: 4rem 0; }
section.block .wrap { max-width: 74rem; margin: 0 auto; padding: 0 1.75rem; }
section.block.panel { background: var(--color-bg-panel); }
.section-head { max-width: 40rem; margin-bottom: 2.5rem; }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 0; }
.section-head p { margin-top: 1rem; color: var(--color-text-muted); }
p.wide { max-width: 46rem; }

/* Eten & drinken + nieuwsbrief-inschrijving side by side */
.eten-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; }
.newsletter-card {
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px;
  padding: 1.6rem 1.8rem;
}
.newsletter-card label { display: block; font-weight: 800; font-size: 1.1rem; }
.newsletter-card .newsletter-tekst { margin: 0.4rem 0 1rem; font-size: 0.9rem; color: var(--color-text-muted); }
.newsletter-card input[type="email"] {
  width: 100%; margin-bottom: 0.6rem; border-radius: 4px;
  border: 1px solid var(--color-border); background: var(--color-bg-panel); color: var(--color-text);
}
.newsletter-card button {
  width: 100%; border-radius: 4px; border: 1px solid var(--color-accent);
  background: var(--color-accent); color: #f5ead9;
}
.newsletter-card button:hover { background: transparent; color: var(--color-accent); }
.newsletter-status { margin: 0.6rem 0 0; font-size: 0.82rem; min-height: 1.1em; }

/* Eten/USP strip -- same grid language as .taps, text-only cards */
.usp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--color-border); }
.usp { padding: 1.9rem 1.6rem 2.2rem; border-right: 1px solid var(--color-border); }
.usp:last-child { border-right: none; }
.usp h3 { font-size: 1.4rem; line-height: 1.1; margin: 0 0 0.8rem; }
.usp p { color: var(--color-text-muted); margin: 0; }
.usp .usp-note { display: inline-block; margin-top: 0.7rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-copper); text-decoration: none; }
a.usp-note:hover { color: var(--color-accent); }

/* Evenementen/Vergaderen teaser pair */
.teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.teaser h3 { font-size: 1.6rem; margin: 0.5rem 0 0.9rem; }
.teaser p { color: var(--color-text-muted); margin: 0 0 1.4rem; max-width: 32rem; }

.taps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--color-border); }
.tap { padding: 1.9rem 1.6rem 2.2rem; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.tap:last-child { border-right: none; }
.tap-no { font-weight: 800; font-size: 0.76rem; letter-spacing: 0.14em; color: var(--color-copper); display: block; margin-bottom: 0.9rem; }
.tap h3 { font-size: 1.85rem; line-height: 1.05; margin: 0; }
.tap p { margin: 0.9rem 0 0; color: var(--color-text-muted); font-size: 0.92rem; }

.interior-shot { margin: 2.5rem 0 0; }
.interior-shot img { width: 100%; height: auto; max-height: 26rem; object-fit: cover; display: block; border: 1px solid var(--color-border); }
.interior-shot figcaption {
  margin-top: 0.6rem; font-size: 0.8rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-text-muted); font-weight: 700;
}

/* Geschiedenis-pagina: losse foto of foto-paar per sectie */
.history-photo { width: 100%; max-width: 32rem; height: auto; display: block; margin: 1.4rem 0; border: 1px solid var(--color-border); }
.history-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.4rem 0; }
.history-photos img { width: 100%; height: 16rem; object-fit: cover; display: block; border: 1px solid var(--color-border); }

/* Fixed-palette bands: deliberately theme-invariant (a colored statement
   band, not page chrome) -- bg+fg are always a matched literal pair here,
   never mixed with the flipping --color-* tokens above. */
.band-missie { background: #8a1f11; color: #f5ead9; padding: 3.5rem 0; }
.band-missie .wrap { max-width: 74rem; margin: 0 auto; padding: 0 1.75rem; }
.band-missie .eyebrow { color: #e7b39f; }
.band-missie h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); max-width: 26ch; margin: 0; }
.band-missie p { color: #f3d9cc; font-size: 1.12rem; margin-top: 1.1rem; max-width: 46rem; }

.band-terras { background: #241f19; color: #ede4cf; padding: 5rem 0; position: relative; overflow: hidden; }
.band-terras .wrap { position: relative; z-index: 1; max-width: 74rem; margin: 0 auto; padding: 0 1.75rem; }
.band-terras .eyebrow { color: #c98a52; }
.band-terras h2 { color: #ede4cf; font-size: clamp(1.9rem, 3.6vw, 2.9rem); max-width: 20ch; margin: 0; }
.band-terras p { color: #cabfa8; font-size: 1.06rem; margin-top: 1.1rem; max-width: 38rem; }
.terras-media { position: absolute; inset: 0; z-index: 0; }
.terras-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; display: block; }
.terras-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #1a1611 24%, rgba(26,22,17,0.68) 52%, rgba(26,22,17,0.28) 100%);
}

.band-praktisch { background: #1c1712; color: #ede4cf; padding: 4rem 0 3.5rem; }
.band-praktisch .wrap { max-width: 74rem; margin: 0 auto; padding: 0 1.75rem; }
.band-praktisch .eyebrow { color: #e0b054; }
.band-praktisch h2 { color: #ede4cf; font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0; }
.praktisch-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 2.8rem; margin-top: 2.6rem; }
.chalk-label { font-weight: 800; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: #e0b054; display: block; margin-bottom: 0.9rem; }
table.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 0; }
table.hours td { padding: 0.3rem 0; font-size: 0.94rem; border: none; border-bottom: 1px dashed #3a3226; }
table.hours td:last-child { text-align: right; color: #cabfa8; }
.band-praktisch p { color: #cabfa8; font-size: 0.94rem; margin: 0 0 0.9rem; max-width: none; }
.band-praktisch a { color: #ede4cf; }
.kitchen-note { font-size: 0.82rem; color: #8f8368; margin-top: 0.8rem; }
.farmhouse-shot { width: 100%; height: 9.5rem; object-fit: cover; display: block; margin-bottom: 1.1rem; border: 1px solid #3a3226; }

/* ================= site footer ================= */
.site-footer { padding: 2.6rem 0; border-top: 1px solid var(--color-border); margin-top: 0; max-width: none; }
.site-footer .wrap {
  max-width: 74rem; margin: 0 auto; padding: 0 1.75rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.site-footer .wordmark-logo { height: 2rem; }
.footer-meta { font-size: 0.82rem; color: var(--color-text-muted); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { order: -1; max-width: 22rem; }
}
@media (max-width: 780px) {
  .nav-links { display: none; }
  .lang-switcher-label { display: none; }
  .taps { grid-template-columns: 1fr; }
  .tap { border-right: none; }
  .usp-grid { grid-template-columns: 1fr; }
  .usp { border-right: none; border-bottom: 1px solid var(--color-border); }
  .usp:last-child { border-bottom: none; }
  .teaser-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .eten-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .history-photos { grid-template-columns: 1fr; }
  .praktisch-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .event-item { grid-template-columns: 1fr; }
  .event-foto-col { order: -1; max-width: 22rem; }
  .event-titel-row > a { min-width: 0; }
}