/* BoekJeStudio — gedeelde basis voor alle ontwerpen.
   Tokens volgen design/apple-design.md, de accentkleur design/brand.md. */

/* Inter = de vervanger van SF Pro buiten Apple-apparaten, zie design/apple-design.md. taste-skill-ignore */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");

:root {
  --bg: #ffffff;
  --surface: #f5f5f7;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --accent: #b4441f;
  --accent-press: #9c3a1a;
  --accent-ink: #ffffff;
  --dark: #272729;
  --dark-2: #1d1d1f;
  --dark-ink: #ffffff;
  --dark-muted: #c7c7cc;
  --accent-on-dark: #f08a5d;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;

  --step-small: 0.875rem;                              /* 14px */
  --step-body: 1.0625rem;                              /* 17px, Apple body */
  --step-sub: 1.3125rem;                               /* 21px */
  --step-lead: clamp(1.3125rem, 1rem + 1vw, 1.75rem);  /* 21–28px */
  --step-head: clamp(2.125rem, 1.4rem + 2.6vw, 3.5rem);    /* 34–56px */

  --margin: clamp(1rem, 2.4vw, 2rem);
  --gutter: clamp(1rem, 2vw, 1.5rem);
  --section: clamp(7.5rem, 12vw, 12rem);
  --radius: 0px;
  --pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 200ms;
  --t-ui: 300ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.47; letter-spacing: -0.022em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--surface); }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 5rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { font-weight: 600; text-wrap: balance; letter-spacing: -0.03em; line-height: 1.05; }
p { max-width: 62ch; text-wrap: pretty; }
.nums { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: var(--step-small); line-height: 1.43; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.cover { width: 100%; height: 100%; object-fit: cover; }

/* knoppen: de Apple-pil, één vorm voor de hele site */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 2.875rem; padding: 0 1.4rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--pill); font-size: var(--step-body); text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.button:hover { background: var(--accent-press); }
.button:active { transform: scale(0.95); }
.button--paper { background: var(--bg); color: var(--ink); }
.button--paper:hover { background: var(--surface); }
.link { color: var(--accent); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
.link:hover { text-decoration-color: currentColor; }
.on-dark .link { color: var(--accent-on-dark); }

/* filterchips en velden */
.chip { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border-radius: var(--pill); background: var(--surface); color: var(--ink); font-size: var(--step-small); transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.chip:hover { background: #e8e8ed; }
.chip:active { transform: scale(0.95); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.field { min-height: 2.875rem; padding: 0 1.1rem; background: var(--bg); border: 0; border-radius: var(--pill); font-size: 1rem; color: var(--ink); }
.stepper { display: inline-flex; align-items: center; gap: 0.25rem; }
.stepper button { width: 2.75rem; height: 2.75rem; border-radius: var(--pill); background: var(--surface); font-size: 1.25rem; line-height: 1; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.stepper button:hover { background: #e8e8ed; }
.stepper button:active { transform: scale(0.92); }
.stepper output { min-width: 4.5ch; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* beweging: inhoud blijft zichtbaar zonder JavaScript */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise 800ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 100ms); }
  .js .shutter[data-reveal] img { transform: scale(1.08); transition: transform 1400ms var(--ease-soft); }
  .js .shutter[data-reveal].is-in img { transform: none; }
  .drift { animation: drift 24s var(--ease-soft) infinite alternate; }
}
.shutter { overflow: hidden; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.08) translate(-1.5%, -1%); } }

/* kaart (Leaflet): een echt interface-onderdeel, daarom data-ui op de container */
.map { position: relative; width: 100%; height: 100%; min-height: 22rem; background: #e8e8ed; z-index: 0; }
.map .leaflet-tile { filter: grayscale(1) contrast(0.78) brightness(1.12); }
.map .leaflet-tile-pane { opacity: 0.72; }
.map.leaflet-container { background: #f4f4f6; }
.map .leaflet-control-attribution { font-size: 11px; background: rgba(255,255,255,.85); }
.map .leaflet-control-zoom a { width: 2.5rem; height: 2.5rem; line-height: 2.5rem; font-size: 1.25rem; color: var(--ink); }
.pin-wrap { background: none; border: 0; }
.pin { display: inline-block; transform: translate(-50%, -50%); padding: 0.45rem 0.75rem; border-radius: var(--pill); background: var(--bg); color: var(--ink); font: 700 0.9375rem/1 var(--font); box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.12); letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; outline: 1px solid rgba(0,0,0,.12); transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); cursor: pointer; }
.pin:hover { transform: translate(-50%, -50%) scale(1.06); }
.pin.is-active { background: var(--ink); color: var(--bg); outline-color: var(--ink); }
.map-pop .leaflet-popup-content-wrapper { padding: 0; border-radius: 12px; overflow: hidden; }
.map-pop .leaflet-popup-content { margin: 0; width: 240px !important; }
.map-pop .leaflet-popup-tip-container { display: none; }
.map-card { display: block; color: var(--ink) !important; text-decoration: none; font-family: var(--font); }
.map-card img { width: 100%; height: 150px; object-fit: cover; }
.map-card-body { display: grid; gap: 0.15rem; padding: 0.75rem 0.9rem 0.9rem; font-size: 0.875rem; line-height: 1.35; color: var(--muted); }
.map-card-body strong { font-size: 1.0625rem; color: var(--ink); font-weight: 600; }
.map-card-price { color: var(--ink); font-weight: 600; margin-top: 0.25rem; }
.map-card-price small { font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.map-card:hover strong { color: var(--accent); }
.pin--group { background: var(--ink); color: var(--bg); outline-color: var(--ink); }
.map .marker-cluster, .map .marker-cluster div { background: none; }
.map, .map .leaflet-container, .map .leaflet-control-attribution { font-family: var(--font); }