/* ============================================================
   Slagerij Finesse — homepage (voorstel)
   Palette: warme ivoor / warm inkt / beenhouwer-rood (uit hun logo)
   Type: Gambetta (display serif) + Switzer (tekst) — self-hosted
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family:'Gambetta'; src:url('../fonts/gambetta-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Gambetta'; src:url('../fonts/gambetta-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Gambetta'; src:url('../fonts/gambetta-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Switzer'; src:url('../fonts/switzer-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Switzer'; src:url('../fonts/switzer-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Switzer'; src:url('../fonts/switzer-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  --ivory:#F6F1E7;
  --ivory-deep:#EFE7D8;
  --paper:#FBF8F1;
  --kraft:#EEE4D2;             /* warm butcher-paper — section variation */
  --ink:#211712;
  --ink-soft:rgba(33,23,18,0.70);
  --ink-mute:rgba(33,23,18,0.52);
  --red:#C0141F;               /* accent — hun ribbon-rood, licht getemperd */
  --red-deep:#97121B;
  --red-band:#B01620;          /* grote rode band-achtergrond */
  --cream:#F8F4EB;
  --cream-soft:rgba(248,244,235,0.82);
  --line:rgba(33,23,18,0.14);
  --line-soft:rgba(33,23,18,0.08);
  --open:#4E9E5A;

  --serif:'Gambetta','Times New Roman',serif;
  --sans:'Switzer',-apple-system,'Helvetica Neue',sans-serif;

  --wrap:1120px;
  --pad:clamp(1.25rem,4vw,2.5rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:5.5rem; }
body {
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3 { font-family:var(--serif); font-weight:500; line-height:1.1; margin:0; }
h2 { font-size:clamp(1.9rem,4.5vw,2.9rem); letter-spacing:-0.01em; }
p { margin:0; }
img { max-width:100%; height:auto; display:block; }
ul { margin:0; padding:0; list-style:none; }

.skip {
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--ivory);
  padding:0.6rem 1.2rem; z-index:100; border-radius:0 0 8px 0; text-decoration:none;
}
.skip:focus { left:0; }
:focus-visible { outline:2px solid var(--red); outline-offset:3px; border-radius:2px; }
main:focus { outline:none; } /* skip-link landt hier; geen kader rond de hele pagina */

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.4em;
  font-family:var(--sans); font-weight:500; font-size:1rem;
  padding:0.85em 1.7em; border-radius:999px; min-height:44px;
  text-decoration:none; white-space:nowrap; cursor:pointer; border:0;
  transition:background-color .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
}
.btn--primary { background:var(--red); color:var(--cream); }
.btn--primary:hover { background:var(--red-deep); transform:translateY(-1px); }
.btn--ghost {
  color:var(--cream); border:1px solid rgba(248,244,235,0.55);
  background:rgba(28,21,18,0.20);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.btn--ghost:hover { background:rgba(248,244,235,0.14); border-color:rgba(248,244,235,0.85); }
.btn--small { font-size:0.9rem; padding:0.55em 1.15em; }
.btn--onband { background:var(--ivory); color:var(--ink); }
.btn--onband:hover { background:var(--ivory-deep); transform:translateY(-1px); }
.btn--dark { background:var(--ink); color:var(--cream); }
.btn--dark:hover { background:#3a2a20; transform:translateY(-1px); }
.btn-ico { width:1.05em; height:1.05em; flex:none; }

.text-link {
  position:relative; color:var(--red); font-weight:500; text-decoration:none;
  border-bottom:1px solid rgba(192,20,31,0.35); transition:border-color .2s ease;
}
.text-link:hover { border-color:var(--red); }
.text-link--light { color:var(--cream); border-bottom-color:rgba(248,244,235,0.4); }
.text-link--light:hover { border-color:var(--cream); }
.text-link::after { content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:44px; }

/* ---------- Topbar ---------- */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:0.8rem var(--pad);
  transition:background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
.topbar.scrolled {
  background:rgba(246,241,231,0.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line); padding-top:0.55rem; padding-bottom:0.55rem;
}
.brand { display:inline-flex; align-items:center; text-decoration:none; }
.brand-logo { height:56px; width:auto; display:block; filter:drop-shadow(0 2px 7px rgba(0,0,0,0.35)); transition:height .3s ease; }
.topbar.scrolled .brand-logo { height:48px; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.12)); }
.topbar-num { font-variant-numeric:tabular-nums; }
@media (max-width:480px){ .topbar-num{ display:none; } .brand-logo{ height:48px; } }

/* ---------- Hero ---------- */
.hero {
  position:relative; min-height:clamp(33rem,64vh,42rem);
  display:flex; align-items:flex-end; overflow:hidden; isolation:isolate;
}
.hero-img {
  position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
  filter:saturate(1.04) contrast(1.03); animation:heroSettle 18s ease-out both;
}
@keyframes heroSettle { from{ transform:scale(1.045); } to{ transform:scale(1); } }
.hero-shade {
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right, rgba(26,12,8,0.64) 0%, rgba(26,12,8,0.20) 44%, rgba(26,12,8,0) 72%),
    linear-gradient(to top, rgba(26,12,8,0.86) 0%, rgba(26,12,8,0.46) 38%, rgba(26,12,8,0.10) 66%, rgba(26,12,8,0.26) 100%);
}
/* Fijne filmkorrel: geeft de hero een tastbare, gedrukte textuur (niet generiek/AI-glad). */
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:0.5; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
.hero-inner { width:100%; max-width:var(--wrap); margin:0 auto; padding:7rem var(--pad) clamp(3rem,8vh,5.5rem); color:var(--cream); }
.hero-title { font-size:clamp(3rem,10vw,5.8rem); font-weight:700; letter-spacing:-0.015em; color:var(--cream); margin:0.35rem 0 1rem; }
.hero-title em { font-style:normal; }
.lede { max-width:34em; font-size:clamp(1.05rem,2.4vw,1.2rem); color:var(--cream-soft); margin-bottom:1.4rem; }
.overline { font-size:0.78rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--red); margin:0; }
.overline--light { color:#F2CE9C; }
/* Leesbaarheid van hero-tekst over wisselende foto-helderheid (robuust ongeacht crop). */
.hero-inner .overline, .hero-title, .lede { text-shadow:0 1px 4px rgba(0,0,0,0.55); }

.status {
  display:inline-flex; align-items:center; gap:0.55em;
  font-size:0.95rem; font-weight:500; color:var(--cream);
  background:rgba(28,18,12,0.42);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(248,244,235,0.18); border-radius:999px;
  padding:0.5em 1.05em; margin-bottom:1.6rem;
}
/* Onbekend/fallback (JS nog niet gedraaid of gecacht): neutraal, geen valse live-status. */
.status-dot { width:9px; height:9px; border-radius:50%; background:#B9AE97; flex:none; transition:background-color .3s ease; }
.status[data-state="open"] .status-dot { background:var(--open); box-shadow:0 0 0 3px rgba(78,158,90,0.28); }
.status[data-state="closed"] .status-dot { background:#E6B980; }
.cta-row { display:flex; flex-wrap:wrap; gap:0.8rem; }

/* ---------- Trust strip ---------- */
.trust { padding:clamp(2.2rem,5vw,3.4rem) var(--pad); }
.trust-lockup {
  max-width:820px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 40px -30px rgba(33,23,18,0.4); overflow:hidden;
}
.trust-item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.35rem; padding:1.7rem 1.1rem; }
.trust-item + .trust-item { border-left:1px solid var(--line); }
.trust-stat { font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,4.6vw,2.4rem); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.trust-label { font-family:var(--sans); font-size:0.8rem; font-weight:500; letter-spacing:0.05em; color:var(--ink-soft); text-transform:uppercase; }
@media (max-width:620px){
  .trust-lockup{ grid-template-columns:1fr; }
  .trust-item + .trust-item{ border-left:none; border-top:1px solid var(--line); }
  .trust-item{ padding:1.3rem 1.1rem; }
}

/* ---------- Sections ---------- */
.section-head { max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }
.section-head h2 { margin:0.5rem 0 0.9rem; }
.section-intro { max-width:40em; color:var(--ink-soft); }

/* ---------- Welkom (licht, tekst + foto) ---------- */
.welkom { padding:clamp(3.5rem,8vw,6rem) 0; }
.welkom-grid {
  max-width:var(--wrap); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
@media (max-width:860px){ .welkom-grid{ grid-template-columns:1fr; } }
.welkom-copy h2 { margin:0.5rem 0 1.1rem; max-width:16em; }
.welkom-copy p { color:var(--ink-soft); max-width:38em; }
.welkom-copy p + p { margin-top:0.9rem; }
.welkom-figure { position:relative; margin:0; }
.welkom-figure img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px; box-shadow:0 26px 50px -28px rgba(33,23,18,0.45); }
.welkom-figure figcaption {
  position:absolute; left:1rem; bottom:1rem;
  background:rgba(28,18,12,0.72); color:var(--cream);
  font-size:0.78rem; letter-spacing:0.04em; padding:0.4em 0.8em; border-radius:999px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}

/* ---------- Diensten (3 kaarten) ---------- */
.diensten { background:var(--kraft); padding:clamp(4rem,9vw,6.5rem) 0; }
.diensten .section-head { text-align:center; }
.diensten .section-head .section-intro { margin:0 auto; }
.dienst-grid {
  max-width:var(--wrap); margin:2.6rem auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; align-items:stretch;
}
@media (max-width:860px){ .dienst-grid{ grid-template-columns:1fr; max-width:520px; } }
.dienst {
  display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 20px 44px -32px rgba(33,23,18,0.42);
  transition:transform .3s ease, box-shadow .3s ease;
}
.dienst:hover { transform:translateY(-4px); box-shadow:0 30px 54px -30px rgba(33,23,18,0.5); }
.dienst-media { aspect-ratio:4/3; overflow:hidden; }
.dienst-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.dienst:hover .dienst-media img { transform:scale(1.04); }
.dienst-body { padding:1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; flex:1; }
.dienst-body h3 { font-size:1.5rem; margin:0.15rem 0 0.6rem; }
.dienst-body p { color:var(--ink-soft); font-size:0.98rem; }
.dienst-kicker { font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--red); }
.prijs-note { max-width:var(--wrap); margin:2.2rem auto 0; padding:0 var(--pad); text-align:center; }
.prijs-note p { display:inline-block; font-size:0.9rem; color:var(--ink-soft); font-style:italic; max-width:40em; }

/* ---------- Bestellen band (rood — tweede visuele moment) ---------- */
/* ivoor (#F6F1E7) op rood-band (#B01620): getest op AA */
.bestellen { position:relative; background:var(--red-band); color:var(--ivory); overflow:hidden; isolation:isolate; }
.bestellen::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 140% at 85% 20%, rgba(255,255,255,0.10), transparent 55%);
}
.bestellen-inner { position:relative; z-index:1; max-width:var(--wrap); margin:0 auto; padding:clamp(3.5rem,8vw,5.5rem) var(--pad); text-align:center; }
.overline--band { color:var(--ivory); opacity:0.9; }
.bestellen-title { color:var(--ivory); max-width:16em; margin:0.6rem auto 0; }
.bestellen-lede { max-width:36em; margin:1.1rem auto 0; font-size:clamp(1.125rem,2.3vw,1.25rem); color:var(--ivory); }
.bestellen-cta { display:flex; flex-wrap:wrap; gap:0.8rem; justify-content:center; margin-top:1.9rem; }
.bestellen-phone { margin-top:1.1rem; font-size:0.9rem; color:rgba(248,244,235,0.88); }

/* ---------- Praktisch ---------- */
.praktisch { padding:clamp(4rem,9vw,6.5rem) 0; }
.prak-grid { max-width:var(--wrap); margin:2.2rem auto 0; padding:0 var(--pad); display:grid; grid-template-columns:1.2fr 0.9fr 0.9fr; gap:1.4rem; align-items:start; }
@media (max-width:860px){ .prak-grid{ grid-template-columns:1fr; max-width:520px; } }
.prak-card { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:1.8rem 1.9rem; height:100%; }
.prak-card h3 { font-size:1rem; font-family:var(--sans); font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--red); margin-bottom:1rem; }
.prak-card p { color:var(--ink-soft); }
.prak-card .text-link { display:inline-block; margin-top:0.8rem; }
.hours { margin:0; }
.hours div { display:flex; justify-content:space-between; gap:1rem; padding:0.32rem 0; border-bottom:1px solid var(--line-soft); }
.hours div:last-child { border-bottom:none; }
.hours div.is-today { font-weight:600; color:var(--ink); }
.hours div.is-today dt::after { content:" · vandaag"; color:var(--red); font-weight:600; font-size:0.85em; letter-spacing:0.02em; }
.hours dt { color:var(--ink-soft); margin:0; }
.hours dd { margin:0; font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.hours dd.dicht { color:var(--red); }
/* Zeer smalle toestellen (< ~360px Android): laat het tijdstip onder de dag vallen i.p.v. overlopen. */
@media (max-width:400px){
  .hours div { flex-wrap:wrap; }
  .hours dd { text-align:left; }
}
/* Contact-links: gestapeld met genoeg ruimte zodat de 44px-taptargets niet overlappen. */
.contact-links { display:flex; flex-direction:column; gap:0.6rem; margin-top:0.8rem; align-items:flex-start; }
.contact-links .text-link { margin-top:0; }

/* ---------- Owner-note (stil; klant negeert het, eigenaar heeft een actie) ---------- */
.owner-note {
  max-width:640px; margin:0 auto; padding:1.15rem var(--pad) 1.4rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  text-align:center; font-size:0.82rem; line-height:1.55; color:var(--ink-soft);
}
.owner-note p { margin:0; }
.owner-link { display:inline-block; margin-top:0.45rem; color:var(--red); font-weight:500; text-decoration:none; border-bottom:1px solid rgba(192,20,31,0.35); transition:border-color .2s ease; }
.owner-link:hover { border-color:var(--red); }

/* ---------- Footer ---------- */
.footer { background:var(--ink); color:rgba(248,244,235,0.72); }
.footer-inner { max-width:var(--wrap); margin:0 auto; padding:3.5rem var(--pad) 2.5rem; display:grid; gap:1.4rem; justify-items:start; font-size:0.95rem; }
.footer-name { font-family:var(--serif); font-size:1.35rem; font-weight:500; color:var(--cream); margin-bottom:0.4rem; }
.footer-note { font-size:0.84rem; color:rgba(248,244,235,0.58); max-width:46em; }
.footer a.text-link--light { font-weight:500; }
.watermark { border-top:1px solid rgba(248,244,235,0.12); text-align:center; padding:1.1rem var(--pad); font-size:0.82rem; letter-spacing:0.06em; }
.watermark a { color:rgba(248,244,235,0.55); text-decoration:none; }
.watermark a:hover { color:var(--cream); }

/* ---------- Reveal ---------- */
.js [data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(0.22,0.61,0.36,1); }
[data-reveal].in { opacity:1; transform:none; }
.dienst-grid .dienst:nth-child(2){ transition-delay:0.08s; }
.dienst-grid .dienst:nth-child(3){ transition-delay:0.16s; }
.prak-grid .prak-card:nth-child(2){ transition-delay:0.1s; }
.prak-grid .prak-card:nth-child(3){ transition-delay:0.2s; }
/* Na de reveal wint de snelle hover-transitie terug (reveal-regel overschreef 'm anders). */
.dienst[data-reveal].in { transition:transform .3s ease, box-shadow .3s ease; transition-delay:0s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hero-img{ animation:none; }
  .js [data-reveal], [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ---------- Print (klant print de uren/adres/contact) ---------- */
@media print {
  *{ background:transparent !important; color:#000 !important; box-shadow:none !important; text-shadow:none !important; }
  .topbar, .hero-img, .hero-shade, .bestellen::before, .welkom-figure, .dienst-media, .owner-note { display:none !important; }
  .hero{ min-height:auto; }
  .hero-inner{ padding:1.2rem 0 0.5rem; }
  .hero-title{ font-size:2rem; }
  .status, .cta-row{ display:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .diensten, .bestellen, .footer{ background:#fff !important; }
  a{ text-decoration:none; }
  .hours dd.dicht{ color:#000 !important; }
}