/**
 * Wereldwinkel Wijhe — huisstijl en layout (2026-10)
 *
 * Opzet: één rustige schaal, veel witruimte, blauw als anker en groen alleen
 * als status. Bewust géén kaarten voor vanzelfsprekende dingen: een lijst met
 * foto en tekst is voor een kleine winkel leesbaarder dan een grid vol kaders.
 */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/dm-serif-display-latin.woff2') format('woff2');
}

:root {
  /* Officiële huisstijl: Pantone 302 C, RAL 5009, RAL 9010, RAL 7016 */
  --blue: #003B5C;
  --blue-dark: #002A44;
  --blue-light: #225F78;
  --blue-tint: #EAF0F4;
  --green: #2D6A5F;
  --green-tint: #E9F1EF;
  --amber: #8A5A17;
  --amber-tint: #F7EFE2;
  /* Drie oppervlakken, van warm wit naar zand: de pagina krijgt ritme zonder
     kaders. RAL 9010 blijft de basis; --paper en --sand zijn afgeleiden ervan. */
  --paper: #FFFDFA;
  --bg: #F7F4EE;
  --tint: #F0EEE7;
  --sand: #EAE1D2;
  --surface: #FFFFFF;
  --ink: #293133;
  --ink-soft: #4A5256;
  --line: #D8D6CE;
  --line-soft: #E6E4DD;

  --radius: 6px;
  --radius-lg: 8px;
  --radius-sm: 4px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;

  --space-2xs: 0.35rem;
  --space-xs: 0.6rem;
  --space-s: 0.9rem;
  --space-m: 1.4rem;
  --space-l: 2rem;
  --space-xl: 3rem;

  --container: 1200px;
  --narrow: 720px;
  --header-h: 76px;

  /* Eén zachte schaduw, blauw-getint en wijd: diepte zonder randje. */
  --shadow: 0 1px 2px rgba(0, 59, 92, .04), 0 14px 30px -18px rgba(0, 59, 92, .22);
  --focus: 3px solid #225F78;
}

/* ------------------------------------------------------------
   Basis
   ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, canvas, iframe { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 var(--space-s);
  letter-spacing: -0.01em;
  color: var(--blue);
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 1.5rem + 2.1vw, 3.25rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 var(--space-m); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
a:hover { color: var(--blue-dark); }

ul, ol { margin: 0 0 var(--space-m); padding-left: 1.2rem; }
li { margin-bottom: var(--space-2xs); }

address { font-style: normal; }

:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-m); }
.container--narrow { max-width: var(--narrow); }
.eyebrow { color: var(--blue-light); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; font-weight: 600; margin-bottom: var(--space-s); }
.text-link { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; font-weight: 600; }

.lead { font-size: clamp(1.1rem, 1.02rem + .4vw, 1.28rem); line-height: 1.6; color: var(--ink-soft); }
.note { font-size: .9rem; color: var(--ink-soft); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Zachte entree van de secties zodra ze in beeld komen. De class .js komt uit
   de header en wordt alleen gezet als IntersectionObserver bestaat en de
   bezoeker geen verminderde beweging vraagt: zonder die class is alles zichtbaar. */
.js .section {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}
.js .section--visible { opacity: 1; transform: none; }

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -100px;
  z-index: 100;
  padding: .7rem 1.1rem;
  background: var(--blue);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-xs); color: #fff; }

/* ------------------------------------------------------------
   Header: één kalme balk met merk, navigatie en status
   ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-height: var(--header-h);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-m);
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
  min-width: 0;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}
.brand__mark svg { width: 20px; height: 20px; }

.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; white-space: nowrap; }
.brand__tagline {
  font-size: .74rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav { display: flex; align-items: center; }

.nav__list {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: block;
  padding: .55rem .8rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: .97rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.nav__link:hover { background: var(--blue-tint); color: var(--blue-dark); }
/* Actieve pagina: een compact blauw vlak met leesbaar wit label. */
.nav__link--current {
  color: var(--paper);
  background: var(--blue);
  font-weight: 600;
}
.nav__link--current:hover { background: var(--blue-dark); color: var(--paper); }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .45rem 0 .45rem .9rem;
  border-left: 1px solid var(--line);
  color: var(--ink);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.status-chip:hover { border-color: var(--blue-light); color: var(--blue-dark); }
.status-chip__long, .status-chip__compact { display: none; }
.status-chip__short { display: inline; }
.status-chip__dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ink-soft);
}
.status-chip--open { color: var(--green); }
.status-chip--open .status-chip__dot { background: var(--green); }
.status-chip--lunch { color: var(--amber); }
.status-chip--lunch .status-chip__dot { background: var(--amber); }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0;
  cursor: pointer;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block;
  width: 20px;
  height: 2px;
  margin-inline: auto;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
}
.nav-toggle__bar::before { content: ''; position: absolute; top: -6px; left: 0; }
.nav-toggle__bar::after { content: ''; position: absolute; top: 6px; left: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { top: 0; transform: rotate(-45deg); }

/* ------------------------------------------------------------
   Secties
   ------------------------------------------------------------ */

.section { padding-block: clamp(2.75rem, 5vw, 4.75rem); }
.section--tight { padding-block: clamp(1.75rem, 3vw, 2.75rem); }
/* Eén hairline bovenop een vlak: twee aangrenzende vlakken geven samen nooit
   een dubbele lijn van 2 px. */
.section--tint { background: var(--tint); border-top: 1px solid var(--line-soft); }
.section--paper { background: var(--paper); border-top: 1px solid var(--line-soft); }
.section--sand { background: var(--sand); border-top: 1px solid var(--line-soft); }

/* Zachte container voor dingen die bij elkaar horen: het formulier, de tijden,
   het adres. Geen kaartjes om losse content. */
.panel {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.15rem, 3vw, 1.75rem);
}

.section-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: var(--space-l); margin-bottom: var(--space-l); }
.section-head h2 { margin-bottom: var(--space-2xs); }
.section-head p { margin: 0; color: var(--ink-soft); }
.section-more { margin-top: var(--space-m); }

.page-intro { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--sand); }
.page-intro h1 { margin-bottom: var(--space-s); }
.page-intro .container--narrow { max-width: var(--container); }
.page-intro .lead { max-width: 52ch; }
.page-intro--feature { background: var(--bg); }
.page-intro--feature .split { gap: clamp(2rem, 5vw, 4.5rem); }
.page-intro--feature .split__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.story-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.story-layout .prose h2 { margin-top: 0; }
.story-layout .principle-list { margin: 0; }

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--space-l); }
.prose h3 { margin-top: var(--space-m); }

.split {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.75rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.split--narrow { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
}
.split__media--tall img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ------------------------------------------------------------
   Knoppen
   ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .6rem 1.2rem;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn:disabled { cursor: wait; opacity: .65; }
.btn--ghost { background: transparent; color: var(--blue); }
.btn--ghost:hover { background: var(--blue-tint); color: var(--blue-dark); border-color: var(--blue); }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }

/* ------------------------------------------------------------
   Home: hero
   ------------------------------------------------------------ */

.hero {
  background: var(--bg);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem) var(--space-m);
}
.hero__body { order: -1; }
.hero__media { margin: 0; position: relative; padding-bottom: 1.25rem; }
/* De foto zoomt binnen zijn eigen afgeronde kader: de rand blijft heel. */
.hero__media picture { display: block; overflow: hidden; border-radius: var(--radius-lg); }
.hero__media img {
  width: 100%;
  aspect-ratio: 6 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
/* Zoom is een muisuitnodiging; op aanraakschermen blijft de foto stilstaan. */
@media (hover: hover) {
  .hero__media:hover img { transform: scale(1.03); }
}
.hero__media figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .7rem .7rem .7rem 1.15rem;
  background: var(--sand);
  color: var(--blue);
  font-size: .9rem;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* "Kom binnen!" — de kortste weg van de gevelfoto naar de 360°-rondleiding op
   de bezoekpagina. Lint met speelfiguur en rustige pulse, gewoon een link: 
   werkt zonder JavaScript en stilstaat bij verminderde beweging. */
.hero__tour {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  padding: .4rem .55rem .4rem .4rem;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 24px -14px rgba(0, 42, 68, .9);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hero__tour:hover, .hero__tour:focus-visible {
  background: var(--blue-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(0, 42, 68, .9);
}
.hero__tour:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 3px; }
.hero__tour-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
}
.hero__tour-icon svg { width: 15px; margin-left: 2px; }
.hero__tour-icon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .7);
  animation: tour-pulse 2.8s cubic-bezier(.2, .7, .2, 1) infinite;
}
.hero__tour-label { display: grid; gap: 1px; padding-right: .3rem; font-size: .95rem; font-weight: 700; line-height: 1.2; }
.hero__tour-sub { font-size: .76rem; font-weight: 600; letter-spacing: .02em; color: #B9CEDD; }
.hero__tour-arrow { padding-right: .25rem; transition: transform .2s ease; }
.hero__tour:hover .hero__tour-arrow { transform: translateX(4px); }

@keyframes tour-pulse {
  0% { transform: scale(.85); opacity: .75; }
  70% { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* Zachte entree van de hero; de globale verminderde-beweging-regel zet dit uit. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.hero__media, .hero__body > * { animation: rise .65s cubic-bezier(.2, .7, .2, 1) both; }
.hero__media { animation-delay: .05s; }
.hero__body > *:nth-child(2) { animation-delay: .1s; }
.hero__body > *:nth-child(3) { animation-delay: .16s; }
.hero__body > *:nth-child(4) { animation-delay: .22s; }
.hero__body > *:nth-child(5) { animation-delay: .28s; }

.hero__kicker {
  margin: 0 0 var(--space-xs);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue-light);
}

.hero__lead { font-size: clamp(1.06rem, 1rem + .4vw, 1.2rem); color: var(--ink-soft); max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }

.hero__facts {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: minmax(0, 1fr);
  margin: var(--space-l) 0 0;
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}
.hero__facts dt {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.hero__facts dd { margin: 0; font-size: .95rem; }
.hero__status { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.hero__status .status-line__dot { width: 9px; height: 9px; }

/* ------------------------------------------------------------
   Lijsten met foto (geen kaarten nodig voor zes dingen)
   ------------------------------------------------------------ */

.category-list,
.maker-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-l);
  list-style: none;
  margin: 0;
  padding: 0;
}
.category-list img,
.maker-list img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: var(--space-xs);
  transition: filter .18s ease;
}
.category-list__item > a { display: block; text-decoration: none; color: var(--blue); transition: transform .22s ease; }
@media (hover: hover) {
  .category-list__item > a:hover { transform: translateY(-3px); }
}
.category-list__item > a:hover img { filter: brightness(.94); }
.category-list__item > a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.category-list__body { display: flex; gap: .5rem; align-items: baseline; justify-content: space-between; }
.maker-list__body { display: block; }
.category-list__body strong,
.maker-list__body strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
}
.category-list__body span,
.maker-list__body span { font-size: .95rem; color: var(--ink-soft); }

.example-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  margin: var(--space-s) 0 0;
  padding: 0;
}
.example-list li {
  margin: 0;
  padding: 0;
  font-size: .95rem;
  color: var(--ink-soft);
}
.example-list li:not(:last-child)::after { content: ' /'; padding-left: .4rem; color: var(--blue-light); }

.check-list { list-style: none; margin: 0 0 var(--space-m); padding: 0; }
.check-list li { position: relative; padding-left: 1.5rem; margin-bottom: var(--space-xs); }
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-light);
}

.principle-list { margin: 0 0 var(--space-m); }
.principle-list__item { padding: var(--space-s) 0; border-top: 1px solid var(--line); }
.principle-list__item dt { font-weight: 600; }
.principle-list__item dd { margin: .15rem 0 0; color: var(--ink-soft); font-size: .97rem; }

/* Eén groot openingsbeeld, daarna paren. De foto's krijgen ruimte zonder zes
   lange, identieke zigzagsecties of productkaarten. */
.assortment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
.category-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; margin-top: var(--space-m); }
.category-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.category-block {
  min-width: 0;
}
.category-block:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.category-block:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.category-block:last-child picture { order: 2; }
.category-block img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.category-block h2 { margin-block: var(--space-s) var(--space-xs); font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem); }
.category-block p { margin-bottom: 0; color: var(--ink-soft); }

/* ------------------------------------------------------------
   Nieuws
   ------------------------------------------------------------ */

.news-list { list-style: none; margin: 0; padding: 0; }
.news-list__item { border-top: 1px solid var(--line); }
.news-list__item:last-child { border-bottom: 1px solid var(--line); }
.news-list__item > a {
  display: grid;
  gap: .3rem;
  padding: var(--space-m) 0;
  text-decoration: none;
  color: inherit;
}
.news-list__item > a { transition: background .18s ease; }
.news-list__item > a:hover .news-list__title { color: var(--blue); }
.news-list__item > a:hover .news-list__title { text-decoration: underline; text-underline-offset: 4px; }
.news-list__body { display: grid; align-content: center; gap: .6rem; }
.news-list--full .news-list__item > a { grid-template-columns: 190px minmax(0, 1fr); gap: var(--space-m); align-items: center; padding-block: var(--space-l); }
.news-list--full .news-list__item > a:not(:has(.news-list__media)) { grid-template-columns: 1fr; }
.news-list__meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .9rem; color: var(--ink-soft); }
.news-list__meta span:not(:only-child)::after { content: '·'; margin-left: .5rem; }
.news-list__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--blue);
}
.news-list__excerpt { color: var(--ink-soft); font-size: .97rem; }
.news-list__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }

/* ------------------------------------------------------------
   Documentenlijst (ANBI-jaarrekeningen): jaar als kop, metadata ernaast
   ------------------------------------------------------------ */

.doc-list { list-style: none; margin: var(--space-m) 0 0; padding: 0; }
.doc-list__item { border-top: 1px solid var(--line); }
.doc-list__item:last-child { border-bottom: 1px solid var(--line); }
.doc-list__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .15rem 1.5rem;
  padding: var(--space-s) 0;
  text-decoration: none;
  color: inherit;
}
.doc-list__link:hover .doc-list__title { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.doc-list__link:focus-visible { outline: var(--focus); outline-offset: 3px; }
.doc-list__title { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; color: var(--blue); }
.doc-list__meta { font-size: .9rem; color: var(--ink-soft); }

/* ------------------------------------------------------------
   Openen, tijden, adres
   ------------------------------------------------------------ */

.status-line {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-weight: 500;
  font-size: .95rem;
}
.status-line__dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--ink-soft); }
.status-line--open { background: var(--green-tint); border-color: rgba(45, 106, 95, .35); }
.status-line--open .status-line__dot { background: var(--green); }
.status-line--lunch { background: var(--amber-tint); border-color: rgba(138, 90, 23, .3); }
.status-line--lunch .status-line__dot { background: var(--amber); }

.hours-hours { margin: var(--space-m) 0; }
/* Vaste dagkolom en links uitgelijnde tijden: een lijst die je in één keer
   afleest, met tabelcijfers zodat de minuten onder elkaar staan. */
.hours-hours__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--space-s);
  padding: .6rem .6rem;
  border-bottom: 1px solid var(--line-soft);
}
.hours-hours__row:last-child { border-bottom: 0; }
.hours-hours__row dt { color: var(--ink-soft); }
.hours-hours__row dd { margin: 0; font-variant-numeric: tabular-nums; }
.hours-period { white-space: nowrap; display: inline-block; }
.hours-join { display: inline-block; margin-inline: .25em; }
/* Dichte dagen iets zachter, maar bewust niet met opacity: #5F676B houdt
   5.2:1 op de pagina en 4.6:1 op het zandige vlak. */
.hours-hours__row--dicht dd { color: #5F676B; }
.hours-hours__row--today {
  background: var(--paper);
  box-shadow: inset 3px 0 0 var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.hours-hours__row--today dt,
.hours-hours__row--today dd { color: var(--ink); font-weight: 600; }

/* Footer: donkerblauw, eigen ritme, vandaag wit met een streepje. */
.footer-hours { width: 100%; border-collapse: collapse; font-size: 1rem; }
.footer-hours caption { text-align: left; }
.footer-hours th,
.footer-hours td {
  text-align: left;
  padding: .4rem 0;
  border: 0;
  vertical-align: baseline;
  font-weight: 400;
}
.footer-hours th { width: 6.4rem; padding-right: var(--space-s); color: #AFC5D1; }
.footer-hours td { color: #E7EDF1; font-variant-numeric: tabular-nums; }
.footer-hours .hours-period { display: block; }
.footer-hours .hours-join { display: none; }
/* Dichte dagen zachter, maar nog 5.1:1 op het blauw (AA voor klein lettertype). */
.footer-hours .is-dicht th,
.footer-hours .is-dicht td { color: #93AFC0; }
.footer-hours .is-vandaag th,
.footer-hours .is-vandaag td { color: #fff; font-weight: 600; }
.footer-hours .is-vandaag th { box-shadow: inset 2px 0 0 #7FB2CE; padding-left: .55rem; }

.address-card {
  margin-top: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-left: 3px solid var(--blue);
  background: var(--paper);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .96rem;
}

.contact-list { list-style: none; margin: 0 0 var(--space-m); padding: 0; }
.contact-list li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--space-s);
  padding: .5rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.contact-list li span { color: var(--ink-soft); font-size: .9rem; }

.social { display: flex; flex-wrap: wrap; gap: var(--space-s); list-style: none; margin: 0; padding: 0; }
.social li { margin: 0; }

/* ------------------------------------------------------------
   Artikel
   ------------------------------------------------------------ */

.article__header { margin-bottom: var(--space-m); }
.article__meta { color: var(--ink-soft); font-size: .9rem; }
.article__media { margin: 0 0 var(--space-l); }
.article__media img { width: 100%; border-radius: var(--radius); }
.article__back { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--line); }

.photo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-s);
  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;
}
.photo-row img { width: 100%; border-radius: var(--radius); }

/* ------------------------------------------------------------
   Formulier
   ------------------------------------------------------------ */

/* Bezoek & contact: feiten links (kleiner, rustiger), formulier rechts als
   het dominante blok. Op smalere schermen stapelen ze onder elkaar. */
.contact-zone {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.contact-facts {
  border-top: 2px solid var(--blue);
  padding-top: var(--space-s);
}
.contact-facts h2 { font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.4rem); }
.contact-facts .lead { font-size: 1rem; }
.contact-form { scroll-margin-top: 90px; }

.form-group { margin-bottom: var(--space-m); }
.form-label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .3rem; }
.form-input, .form-textarea {
  width: 100%;
  padding: .7rem .8rem;
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid #7D817E;
  border-radius: var(--radius);
}
.form-input:focus, .form-textarea:focus { border-color: var(--blue); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); }
.form-hint { font-size: .9rem; color: var(--ink-soft); margin: 0 0 var(--space-m); }
.form-error { color: #A32A2A; font-size: .9rem; margin: .35rem 0 0; }
.form-textarea { resize: vertical; min-height: 8rem; }
.form-input[aria-invalid="true"], .form-textarea[aria-invalid="true"] { border-color: #A32A2A; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.4rem; font-weight: 600; margin: var(--space-xs) 0; }
.form-status[data-state="ok"] { color: var(--green); }
.form-status[data-state="error"] { color: #A32A2A; }

/* ------------------------------------------------------------
   FAQ, kaart, panorama
   ------------------------------------------------------------ */

.faq { list-style: none; margin: 0; padding: 0; }
.faq li { padding: var(--space-s) 0; border-top: 1px solid var(--line); }
.faq li:last-child { border-bottom: 1px solid var(--line); }
.faq h3 { margin-bottom: .2rem; font-size: 1.1rem; }
.faq summary { min-height: 48px; padding-block: .4rem; font-size: 1.1rem; font-weight: 600; color: var(--blue); cursor: pointer; }
.faq details[open] summary { margin-bottom: .4rem; }
.faq p { margin: 0; color: var(--ink-soft); }

.map {
  width: 100%;
  height: clamp(260px, 40vw, 380px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.pano__stage {
  position: relative;
  overflow: hidden;
  /* De browser mag horizontale sleepgebaren niet als bladgebaar gebruiken;
     verticaal blijft de pagina gewoon scrollen. */
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  cursor: grab;
  border-radius: var(--radius);
  background: #1C2225;
  aspect-ratio: 16 / 7;
}
.pano__stage--dragging, .pano__stage:active { cursor: grabbing; }
.pano__canvas, .pano__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pano__canvas { display: none; }
.pano__canvas--ready { display: block; }
.pano--flat .pano__canvas { display: none; }
.pano__poster--hidden { display: none; }
.pano--flat .pano__controls, .pano--flat .pano__hint { display: none; }
.pano__hint {
  transition: opacity .4s ease;
  position: absolute;
  left: 50%;
  bottom: var(--space-s);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(28, 34, 37, .72);
  color: #fff;
  font-size: .82rem;
}
.pano__controls { position: absolute; right: var(--space-s); top: var(--space-s); display: flex; gap: .3rem; }
.pano__btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.pano__btn:hover { background: #fff; }
.pano__hint--hidden { opacity: 0; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

.site-footer {
  padding-top: clamp(2.75rem, 5vw, 4rem);
  background: var(--blue);
  color: #E7EDF1;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: #CFE0EA; }
.site-footer :focus-visible { outline-color: #fff; }
.site-footer .social a { display: inline-block; padding-block: .4rem; }

.site-footer__grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  grid-template-columns: 1.05fr .85fr 1.4fr;
  padding-bottom: var(--space-l);
}
.site-footer__name { font-family: var(--font-display); font-size: 1.55rem; margin: 0 0 .6rem; color: #fff; }
.site-footer__text { font-size: .94rem; color: #C8D6DF; margin: 0 0 var(--space-s); }
.site-footer__title {
  font-family: var(--font);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9FB8C6;
  margin: 0 0 var(--space-s);
}
.site-footer__address { font-size: .95rem; margin-bottom: var(--space-s); }
.site-footer__note { font-size: .84rem; color: #AFC5D1; margin-top: var(--space-xs); }
.site-footer__brand .footer-links { margin-bottom: var(--space-s); }
.site-footer__grid .footer-hours .hours-period { display: inline-block; }
.site-footer__grid .footer-hours .hours-join { display: inline-block; }

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: 0; }
.footer-links a { display: inline-block; padding: .4rem 0; font-size: 1rem; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-block: var(--space-m);
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .86rem;
  color: #B8CCD7;
}
.site-footer__bottom p { margin: 0; }

/* ------------------------------------------------------------
   Hulppagina's voor oude URLs
   ------------------------------------------------------------ */

.redirect-page {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 100vh;
  margin: 0;
  padding: var(--space-l);
  text-align: center;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
}
.redirect-page p { margin: .3rem 0; }

/* ------------------------------------------------------------
   Mobiel
   ------------------------------------------------------------ */

@media (max-width: 1080px) {
  :root { --header-h: 60px; }
  .site-header__bar { flex-wrap: wrap; padding-block: 6px; gap: .4rem; }
  .nav-toggle { display: block; order: 3; width: 44px; height: 44px; }
  .status-chip { order: 2; padding: .35rem .6rem; font-size: .82rem; }
  .status-chip__long { display: none; }
  .status-chip__short { display: inline; }

  .nav { order: 4; flex-basis: 100%; }
  .nav__list { width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--space-s); }
  /* De menu-items blijven op telefoon ruim aantikbaar. */
  .nav__link { border-radius: var(--radius-sm); padding: .85rem .6rem; }
  .nav__list[hidden] { display: none; }
  .nav__link { font-size: 1.05rem; border-bottom: 1px solid var(--line-soft); }

  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .site-footer__grid > div:last-child { grid-column: 1 / -1; }
  .footer-hours { max-width: 420px; }
}

@media (min-width: 761px) and (max-width: 1000px) {
  .contact-list li { grid-template-columns: 1fr; gap: 0; }
  .hours-hours__row .hours-period { display: block; }
  .hours-hours__row .hours-join { display: none; }
}

@media (max-width: 760px) {
  .hero__body { order: 0; }
  .hero__media { order: -1; }
  .hero__media img { aspect-ratio: 16 / 9; }
  .hero__media { padding-bottom: 0; }
  /* Op telefoon staat het bijschrift onder de foto, zodat de gevel heel blijft. */
  .hero__media figcaption {
    position: static;
    margin-top: .6rem;
    border-radius: var(--radius-lg);
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding: .7rem .7rem .7rem .85rem;
    font-size: .85rem;
  }
  .hero__tour { justify-content: center; }
  .hero { gap: var(--space-m); }
  .hero__facts { margin-top: var(--space-m); padding-top: var(--space-s); gap: .6rem; }
  .hero__facts dt { display: none; }
  .section-head, .story-layout { grid-template-columns: 1fr; gap: var(--space-s); }
  .section-head h2 { margin: 0; }
  .story-layout { gap: var(--space-m); }

  .hero,
  .split,
  .split--narrow,
  .contact-zone,
  .category-block:first-child,
  .category-block:last-child { grid-template-columns: minmax(0, 1fr); }
  /* Op smal scherm staat de lijst van feiten kort en direct boven het formulier. */
  .contact-zone { gap: var(--space-l); }
  .contact-facts { border-top-width: 2px; }
  .category-block:last-child picture { order: 0; }
  .assortment-grid { grid-template-columns: 1fr 1fr; gap: var(--space-l) var(--space-m); }
  .category-block:first-child, .category-block:last-child { gap: 0; }
  .category-block h2 { font-size: 1.6rem; }
  .example-list { font-size: .9rem; }
  .hero { padding-top: var(--space-m); }
  .page-intro--feature .split { gap: var(--space-m); }
  .page-intro--feature .split__media img { aspect-ratio: 16 / 9; }
}

@media (max-width: 600px) {
  body { font-size: 1.0625rem; }
  /* Het panorama verdient op telefoon meer hoogte: meer sleepvlak per gebaar. */
  .pano__stage { aspect-ratio: 4 / 3; }
  .pano__btn { width: 44px; height: 44px; font-size: 1.2rem; }
  .brand__name { font-size: 1.05rem; }
  .brand__tagline { display: none; }
  .status-chip__short { display: none; }
  .status-chip__compact { display: inline; }
  /* Op telefoon: merknaam en menu blijven compact; de live-status staat
     in de hero, binnen het eerste scherm. */
  .site-header .status-chip { display: none; }
  :root { --space-m: 1.25rem; }
  .hero__kicker { font-size: .78rem; }
  .hero h1 { font-size: clamp(2rem, 7.8vw, 2.5rem); }
  .hero__actions { align-items: center; gap: .3rem 1rem; }
  .hero__actions .btn { padding-inline: .9rem; }
  .hero__lead { margin-bottom: 0; }
  .hero__facts { grid-template-columns: 1fr; }
  .hero__facts dd { font-size: .95rem; }
  .category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m) 1rem; }
  .category-list__body strong { font-family: var(--font); font-weight: 600; font-size: 1rem; line-height: 1.4; }
  .category-list__body > span { display: none; }
  .maker-list { grid-template-columns: 1fr; }
  .maker-list__item { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-s); align-items: start; }
  .maker-list img { aspect-ratio: 1; }
  .maker-list__body strong { font-size: 1.25rem; }
  .assortment-grid { grid-template-columns: 1fr; }
  .category-block:first-child, .category-block:last-child { grid-column: auto; }
  .category-block picture img { aspect-ratio: 3 / 2; }
  .news-list--full .news-list__item > a { grid-template-columns: 1fr; gap: var(--space-s); }
  .news-list__media img { aspect-ratio: 2 / 1; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-l) var(--space-m); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__grid > div:nth-child(2) { grid-column: 1 / -1; }
  .site-footer__grid .footer-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-s); }
  .site-footer__brand .footer-links { display: block; }
  .site-footer__grid > div:last-child { grid-column: 1 / -1; }
  .footer-hours { max-width: 360px; }
  .footer-hours .hours-period { display: inline-block; }
  .footer-hours .hours-join { display: inline-block; }
  .hours-hours__row { grid-template-columns: 6.2rem minmax(0, 1fr); gap: var(--space-xs); padding-inline: .5rem; }
  .hours-hours__row .hours-period { display: block; }
  .hours-hours__row .hours-join { display: none; }
  .footer-hours th { width: 5.2rem; }
  .contact-list li { grid-template-columns: 1fr; gap: 0; }
  .btn-group .btn { flex: 1 1 165px; }
}

@media (max-width: 380px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__grid > div { grid-column: auto; }
  .footer-hours .hours-period { display: block; }
  .footer-hours .hours-join { display: none; }
  .site-footer__grid .footer-hours .hours-period { display: block; }
  .site-footer__grid .footer-hours .hours-join { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__media, .hero__body > * { animation: none; }
  .hero__media img { transition: none; }
  .hero__media:hover img { transform: none; }
  .js .section { opacity: 1; transform: none; transition: none; }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .pano__controls, .map, .hero__media { display: none; }
  .js .section { opacity: 1; transform: none; }
  .panel, .section--tint, .section--paper, .section--sand { background: none; box-shadow: none; border: 0; }
  body { background: #fff; color: #000; }
  .btn { border: 1px solid #000; color: #000; background: transparent; }
}