@import url("https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Yeseva+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cascadia+Mono:ital,wght@0,200..700;1,200..700&display=swap");

/* =========================================================
   Minimal Flex CSS (no grid) + HERO crossfade + testimonials
   - flex layout
   - logo altijd gecentreerd + breder op mobiel
   - rows: 30/70 + alternating, op mobiel onder elkaar
   - knoptekst ALTIJD wit
   ========================================================= */

html { scroll-behavior: smooth; }

/* Root variables */
:root{
  --clr-black:#000000;
  --clr-white:#ffffff;
  --clr-gray:#d1d1d1;
  --clr-teal:#008080;
  --clr-lime:#62ff00;
  --clr-olive:#808000;
  --clr-brown:#aa4400;
  --clr-amber:#aa8800;

  --bg-page:#fffdf8;
  --text-main:#1a100e;
  --border-soft:#e9dfd7;

  --primary:var(--clr-amber);
  --primary-600:#8f7100;
  --primary-300:#d7b64a;

  --secondary:var(--clr-brown);
  --secondary-600:#883802;
  --secondary-300:#c96a2a;

  --info:var(--clr-teal);
  --success:var(--clr-lime);
  --muted:#8b7e70;

  --radius:14px;
  --gap:16px;
  --pad:16px;
  --container:1200px;

  --fz-base:18px;
  --fz-small:0.95rem;
  --fz-h1:clamp(2.2rem,4vw,3.2rem);
  --fz-h2:clamp(1.4rem,2.2vw,2rem);
  --fz-lead:1.2rem;

  --shadow-soft:0 10px 25px rgba(0,0,0,.08);
}

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

html, body{ height:100%; }

body{
  margin:0;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-family:"Afacad Flux",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-optical-sizing:auto;
  font-weight:300;
  font-style:normal;
  background:var(--bg-page);
  color:var(--text-main);
  font-size:var(--fz-base);
}

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

input, button, textarea, select{
  font:inherit;
  color:inherit;
}

a{
  color:var(--secondary-600);
  text-decoration:none;
}
a:hover{ color:var(--secondary); }

:focus-visible{
  outline:2px solid var(--info);
  outline-offset:3px;
}

/* Typography */
h1, h2, h3, h4{
  font-family:"Cascadia Mono",sans-serif;
  font-weight:400;
  line-height:1.1;
  margin:0;
  color:var(--text-main);
  font-size:190%;
}

p{
  margin:0;
  font-size:1.2rem;
  color:var(--text-main);
}

small{ color:var(--muted); }

/* Logo: altijd gecentreerd + schaalbaar */
#hero article > figure{
  margin:0 auto;
  display:flex;
  justify-content:center;
}

#logo{
  width:clamp(140px,13vw,220px);
  margin:0 auto;
}

/* Form */
#boekorder{
  max-width:1200px;
  width:90%;
  margin:auto;
}

.inputfield{
  display:flex;
  flex-direction:column;
  margin-top:6.5px;
  margin-bottom:13px;
}

/* Helpers */
.center,
#hero{
  align-items:center;
  justify-content:center;
}

/* Rows (flex only) */
.row{
  display:flex;
  flex-direction:row;
  gap:var(--gap);
  min-width:0;
}

.stack,
#hero{
  flex-direction:column;
}

.textcenter,
#hero article{
  text-align:center;
}

.grow,
#hero article{
  padding:26px;
}

/* Screen row */
.full,
#hero{
  width:100vw;
  min-height:100vh;
}

#hero{ display:flex; }

/* Columns */
.col{
  flex:1 1 0;
  min-width:0;
}

.cols-2 > .col{
  flex-basis:calc((100% - var(--gap)) / 2);
}

.cols-3 > .col{
  flex-basis:calc((100% - (2 * var(--gap))) / 3);
}

.col--auto{ flex:0 0 auto; }
.col--grow{ flex:1 1 auto; }

/* Surface */
.surface{
  background:var(--clr-white);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}

/* Buttons — tekst ALTIJD wit */
.btn,
a.btn,
button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 16px;
  border-radius:13px;
  border:1px solid transparent;
  background:linear-gradient(var(--secondary),var(--secondary-600));
  color:var(--clr-white) !important;
  font-weight:600;
  letter-spacing:.2px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .08s ease, filter .15s ease, background .15s ease;
}

a.btn > i{
  margin-right: .5rem;
}

.btn:hover,
a.btn:hover,
button.btn:hover{
  background:linear-gradient(#808000,#6d6d00);
  color:var(--clr-white) !important;
}

.btn:active,
a.btn:active,
button.btn:active{
  transform:translateY(1px);
  color:var(--clr-white) !important;
}

.btn:visited,
a.btn:visited{
  color:var(--clr-white) !important;
}

.btn--primary,
a.btn--primary,
button.btn--primary{
  background:linear-gradient(var(--primary),var(--primary-600));
  color:var(--clr-white) !important;
}

/* HERO (als je .hero class ooit gebruikt) */
.hero{
  background:
    radial-gradient(1200px 500px at 50% 0%, rgba(0,128,128,.10), transparent 60%),
    radial-gradient(900px 400px at 15% 10%, rgba(170,136,0,.12), transparent 55%),
    var(--bg-page);
}

/* ================= HERO BACKGROUND CROSSFADE ================= */
#hero{
  position:relative;
  overflow:hidden;
}

/* 2 lagen voor echte crossfade */
#hero .hero-bg-layer{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.5s ease;
  z-index:0;
}

#hero .hero-bg-layer.active{ opacity:1; }

/* witte semi-transparante overlay bovenop de beelden */
#hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.6);
  z-index:1;
  pointer-events:none;
}

/* hero content boven alles */
#hero > article,
#hero > nav{
  position:relative;
  z-index:2;
}

/* ================= HERO TITLE FADE ================= */
#hero-titleline{
  display:inline-block;
  opacity:1;
  transition:opacity .6s ease;
  font-size:1.6rem;
  background-color:rgba(255,255,255,0.5);
  padding:13px;
  border-radius:6.5px;
  margin-top:6.5px;
}

#hero-titleline.fade-out{ opacity:0; }

/* =========================
   ROWS: 30/70 + alternating
   ========================= */
.rows article{
  display:flex;
  align-items:stretch;
  gap:1rem;
}

.rows article > section{
  flex:0 0 70%;
  min-width:0;
  padding:64px;
}

.rows article:nth-child(even){
  flex-direction:row-reverse;
}

#usplist article{
  margin-top:13px;
  margin-bottom:13px;
}

.rows article > figure{
  flex:0 0 30%;
  margin:0;
  align-self:stretch;
  display:flex;
}

.rows article > figure > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* USP */
.usp-overview{ padding-block:64px; }

.usp{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:26px;
  gap:12px;
  border-top:6px solid var(--primary-300);
}

.usp h2{ font-size:var(--fz-h2); }

.usp p{ color:var(--muted); }

.usp .btn{ margin-top:auto; }

/* USP detail */
.usp-detail{ padding-block:64px; }

.usp-detail__image{
  overflow:hidden;
  border:1px solid var(--border-soft);
}

.usp-detail__image img{
  width:100%;
  height:100%;
  min-height:320px;
  object-fit:cover;
}

.usp-detail__text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px;
}

.usp-detail__text p{ color:var(--muted); }

/* alternating helper (indien gebruikt) */
.reverse{ flex-direction:row-reverse; }

/* Description band */
#description{
  padding:39px;
  margin-top:39px;
  margin-bottom:39px;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:var(--primary);
}

#description p{
  min-width:700px;
  max-width:1100px;
  font-size:2.6rem;
}

/* =========================
   Testimonials (clean carousel)
   ========================= */
#testimonials{
  --t-count:3;
  --t-duration:15s;
  --t-radius:18px;

  position:relative;
  margin:52px auto;
  max-width:1100px;

  min-height:220px;
  padding:0;

  background:transparent;
  border:0;
  overflow:hidden;
}

/* remove that “long pill bar” */
#testimonials::after{ content:none !important; }

/* title */
#testimonials::before{
  content:"What users say";
  position:absolute;
  top:0;
  left:0;
  transform:translateY(-18px);
  font-family:"Cascadia Mono",sans-serif;
  font-size:.95rem;
  opacity:.75;
}

/* slides */
#testimonials article{
  position:absolute;
  inset:0;

  padding:22px 22px 34px 22px;
  border-radius:var(--t-radius);

  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.08);

  display:grid;
  gap:12px;
  align-content:center;

  opacity:0;
  transform:translateY(10px);
  pointer-events:none;

  animation:t-slide var(--t-duration) linear infinite;
  will-change:opacity, transform;
}

#testimonials article p{
  margin:0;
  font-size:clamp(1.1rem,1.35vw,1.45rem);
  line-height:1.45;
}

#testimonials article p::before{
  content:"";
  font-size:2.2em;
  line-height:0;
  vertical-align:-0.18em;
  opacity:.22;
  margin-right:.10em;
}

#testimonials article i{
  font-style:normal;
  opacity:.85;
  font-size:1.05rem;
  display:inline-flex;
  gap:10px;
  align-items:center;
}

#testimonials article i::before{
  content:"";
  width:34px;
  height:2px;
  background:rgba(0,0,0,.22);
  border-radius:999px;
}

/* dots */
#testimonials article::after{
  content:"● ● ●";
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  text-align:center;
  letter-spacing:10px;
  font-size:10px;
  opacity:.22;
}

/* animation delays */
#testimonials article:nth-child(1){ animation-delay:calc(var(--t-duration) / var(--t-count) * 0); }
#testimonials article:nth-child(2){ animation-delay:calc(var(--t-duration) / var(--t-count) * 1); }
#testimonials article:nth-child(3){ animation-delay:calc(var(--t-duration) / var(--t-count) * 2); }

@keyframes t-slide{
  0%   { opacity:0; transform:translateY(10px); }
  8%   { opacity:1; transform:translateY(0); }
  30%  { opacity:1; transform:translateY(0); }
  38%  { opacity:0; transform:translateY(-10px); }
  100% { opacity:0; transform:translateY(-10px); }
}

/* pause on hover */
#testimonials:hover article{ animation-play-state:paused; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  #testimonials{
    overflow:visible;
    min-height:auto;
    display:grid;
    gap:16px;
  }
  #testimonials article{
    position:static;
    opacity:1;
    transform:none;
    animation:none;
    pointer-events:auto;
  }
  #testimonials article::after{ content:none; }
}

/* Footer */
footer{
  padding:34px 16px;
  text-align:center;
  margin-top:39px;
  border-top:1px solid var(--border-soft);
  color:var(--muted);
  background:linear-gradient(var(--bg-page), rgba(233,223,215,.35));
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 900px){
  :root{
    --gap:12px;
    --pad:12px;
    --fz-base:17px;
  }

  .row{ flex-direction:column; }
  .row.row--keep{ flex-direction:row; }

  .cols-2 > .col,
  .cols-3 > .col{ flex-basis:100%; }

  .reverse{ flex-direction:column; }

  /* Logo breder op mobiel + blijft gecentreerd */
  #logo{ width:min(280px, 70vw); }

  /* ROWS: onder elkaar (en stop row-reverse op mobiel) */
  .rows article,
  .rows article:nth-child(even){ flex-direction:column; }

  .rows article > section{ padding:24px; }

  .hero__content{ padding-block:56px; }

  .usp-overview,
  .usp-detail{ padding-block:40px; }

  /* description */
  #description{ padding:24px; }
  #description p{
    min-width:auto;
    width:100%;
    font-size:clamp(1.4rem, 5vw, 2.1rem);
  }
}

@media (max-width: 480px){
  :root{
    --gap:10px;
    --pad:10px;
    --fz-base:16px;
  }

  .row--screen{
    width:100%;
    min-height:100dvh;
  }

  .btn{ width:100%; }

  .hero__actions{ width:100%; }

  /* testimonials mobile */
  #testimonials{
    margin:32px 14px;
    min-height:260px;
  }
  #testimonials article{
    padding:18px 16px 32px 16px;
  }
}