/* 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; }
tr.status-wacht_op_bevestiging { background: var(--color-bg-panel); }

/* Reserveringen-overzicht: elke rij op 1 regel, ook bij lange
   opmerkingen/e-mailadressen -- de tabel scrollt horizontaal in plaats
   van rijen te laten wrappen. */
.table-scroll { overflow-x: auto; }
.reservations-table td, .reservations-table th { white-space: nowrap; }
.reservations-table .bericht-cell {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.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; }

/* ================= 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; }
}