:root{
  --bg:#0b0b0c;
  --text:#e9e9ea;
  --muted:#b7b7bb;
  --line:#24242a;
  --accent:#d7d2c6;
  --max: 980px;
  --radius: 18px;
}

*{box-sizing:border-box}

/* ✅ AANGEPAST: stabielere hoogte (min-height i.p.v. height:100%) */
html,body{margin:0;padding:0;min-height:100%;height:auto}

/* Smooth anchor scrolling (disabled for reduced-motion below) */
html{ scroll-behavior:smooth; }

body{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  background: radial-gradient(1200px 800px at 20% 10%, #15151a 0%, var(--bg) 60%);
  color:var(--text);
  line-height:1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

img{max-width:100%;height:auto;border-radius:14px}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:28px 18px 56px;
}

/* =====================
   Top navigation
   ===================== */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}

.brand{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--muted);
}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
}

.nav a{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:13px;
  color:var(--text);
  opacity:.85;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid transparent;
}

.nav a[aria-current="page"]{
  border-color:var(--line);
  background: rgba(255,255,255,.04);
  opacity:1;
}

/* =====================
   Hero
   ===================== */

.hero{padding:42px 0 26px}

h1{
  font-weight:600;
  font-size: clamp(34px, 6vw, 54px);
  line-height:1.05;
  margin:0 0 14px;
}

.lead{
  max-width:70ch;
  font-size:18px;
  color:var(--muted);
  margin:0 0 18px;
}

.kicker{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  color:var(--muted);
}

/* =====================
   Hero image
   ===================== */

.hero-image{
  margin-top:18px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  position:relative;
}

.hero-image img{
  width:100%;
  height: clamp(220px, 30vw, 380px);
  object-fit:cover;
  display:block;
  filter: contrast(0.95) brightness(0.92);
  border-radius:0;
}

.hero-image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.15),
    rgba(0,0,0,.55)
  );
}

/* =====================
   Buttons & CTAs
   ===================== */

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

/* Used on contact page */
.cta-column{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}

.btn{
  display:inline-block;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:14px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

.btn.primary{
  background: rgba(215,210,198,.14);
  border-color: rgba(215,210,198,.35);
}

/* Keep hover styles distinct */
.btn:not(.primary):hover{background: rgba(255,255,255,.06)}
.btn.primary:hover{background: rgba(215,210,198,.18)}

/* =====================
   Layout
   ===================== */

.grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  margin-top:18px;
}

/* Variants: opt-in per page when needed */
.grid.equal{ grid-template-columns: 1fr 1fr; }
.grid.three{ grid-template-columns: repeat(3, 1fr); }

@media (max-width: 860px){
  .grid{grid-template-columns:1fr}
  .grid.equal, .grid.three{ grid-template-columns:1fr; }
}

.card{
  background: rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;

  /* Helps cards “feel” equally tall and keeps CTAs aligned */
  display:flex;
  flex-direction:column;
}

/* ✅ AANGEPAST: CTA-bottom is nu opt-in (voorkomt rare “gaten”) */
.card .cta-row{ margin-top:18px; }             /* normaal gedrag */
.card.cta-bottom .cta-row{ margin-top:auto; }  /* alleen indien gewenst */

.card-wide{
  margin-top:28px;
  margin-bottom:10px;
}

.row-between{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Used on status labels (boeken / verzamelbundels) */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  white-space:nowrap;
}

/* Used on pers page */
.note{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* =====================
   Typography
   ===================== */

h2{font-size:22px; margin:0 0 10px; font-weight:600}
h3{font-size:16px; margin:18px 0 8px; font-weight:600}

.small{color:var(--muted); font-size:14px}

.hr{
  height:1px;
  background:var(--line);
  margin:18px 0;
  opacity:.5;
}

.list{margin:0;padding-left:18px}
.list li{margin:8px 0;color:var(--muted)}

blockquote{
  margin:14px 0;
  padding:12px 14px;
  border-left:2px solid rgba(215,210,198,.35);
  background: rgba(255,255,255,.03);
  border-radius:12px;
  color: rgba(233,233,234,.85);
}

/* Prose blocks (used on /lees.html) */
.prose p{
  color: var(--text);
  font-size:16px;
  line-height:1.75;
  margin: 0 0 12px;
}
.prose p:last-child{margin-bottom:0}

/* =====================
   Footer
   ===================== */

.footer{
  border-top:1px solid var(--line);
  margin-top:32px;
  padding-top:18px;
  color:var(--muted);
  font-size:13px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
}

/* =====================
   MailerLite – DEFINITIEVE FIX
   (✅ AANGEPAST: alles gescoped onder .ml-embedded)
   ===================== */

.ml-embedded,
.ml-embedded *{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Remove MailerLite card */
.ml-embedded .ml-form-embedContainer,
.ml-embedded .ml-form-embedWrapper,
.ml-embedded .ml-form-embedBody,
.ml-embedded .ml-form-embedContent,
.ml-embedded .ml-form-formContent{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove privacy / disclaimer blocks that cause big gap */
.ml-embedded .ml-form-formContent .ml-form-privacy,
.ml-embedded .ml-form-formContent [class*="privacy"],
.ml-embedded .ml-form-formContent [class*="legal"],
.ml-embedded .ml-form-formContent [class*="disclaimer"]{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  height:0 !important;
}

/* Kill paragraph margins inside the form */
.ml-embedded .ml-form-formContent form p{
  margin:0 !important;
  padding:0 !important;
}

/* Input */
.ml-embedded .ml-form-formContent input{
  background:#0f1115 !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  padding:12px 14px !important;
  color:var(--text) !important;
  width:100% !important;
  max-width:520px !important;
  margin:0 0 12px 0 !important;
}

/* Button */
.ml-embedded .ml-form-formContent button{
  background: rgba(255,255,255,.06) !important;
  border:1px solid rgba(215,210,198,.25) !important;
  color:var(--text) !important;
  padding:12px 16px !important;
  border-radius:999px !important;
  cursor:pointer !important;
  margin:0 !important;
}

.ml-embedded .ml-form-formContent button:hover{
  background: rgba(255,255,255,.10) !important;
}

/* Inline layout on desktop */
@media (min-width: 720px){
  .ml-embedded .ml-form-formContent form{
    display:flex !important;
    gap:14px !important;
    align-items:center !important;
    margin-top:14px !important;
  }

  .ml-embedded .ml-form-formContent input{
    flex:1 1 auto !important;
    max-width:420px !important;
    margin:0 !important;
  }

  .ml-embedded .ml-form-formContent button{
    flex:0 0 auto !important;
    min-width:160px !important;
    white-space:nowrap !important;
  }
}

/* =====================
   Cookie bar (sober)
   ===================== */

.cookiebar[hidden]{ display:none; }

.cookiebar{
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
}

.cookiebar-inner{
  max-width: var(--max);
  margin: 0 auto;
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(15,17,21,.92);
  backdrop-filter: blur(10px);
}

.cookiebar-text{
  margin:0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  max-width: 70ch;
}

.cookiebar-actions{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}

@media (max-width: 720px){
  .cookiebar-inner{
    flex-direction: column;
    align-items: stretch;
  }
  .cookiebar-actions{
    justify-content: flex-start;
  }
}

/* =====================
   Accessibility
   (✅ AANGEPAST: duplicate skip-link verwijderd; hier staat de enige versie)
   ===================== */

.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:1rem;
  top:1rem;
  width:auto;
  height:auto;
  padding:.5rem .75rem;
  z-index:9999;
}

/* Focus rings: buttons vs links */
.btn:focus-visible,
button:focus-visible{
  outline:2px solid rgba(215,210,198,.55);
  outline-offset:3px;
  border-radius:999px;
}

a:focus-visible{
  outline:2px solid rgba(215,210,198,.55);
  outline-offset:3px;
  border-radius:6px;
}

input:focus-visible,
textarea:focus-visible{
  outline:2px solid rgba(215,210,198,.55);
  outline-offset:3px;
  border-radius:12px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible){
  outline:none;
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  *{
    transition:none !important;
    animation:none !important;
  }
}