/* ==================================================================
   HENNIE TERBLANCHE — style.css
   Een enkele CSS-lêer vir die hele werf. Ontwerp-tokens en
   komponent-style kom van die goedgekeurde mockup.
   ================================================================== */

:root{
  --navy:#2F4156;
  --teal:#567C8D;
  --sky:#C8D9E6;
  --beige:#F5EFEB;
  --white:#FBFAF8;
  --ink:#1F2D3A;
  --line: rgba(47,65,86,0.14);
  --radius: 22px;
  /* Boekomslag "Jou Brein: Vriend of Vyand" — net op /boek en die tuisblad-banier */
  --boek-vloot:#1c2a3d;
  --koper:#a8743f;
  --koper-lig:#c9925a;    /* klein koper teks op vlootblou (kontras) */
  --koper-donker:#8a5a2b; /* klein koper teks op room (kontras) */
  --room:#f4ece2;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1160px; margin:0 auto; padding:0 32px;}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; color:var(--navy);}

/* sigbare fokus-toestand — toeganklikheid */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2.5px solid var(--teal);
  outline-offset:3px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--navy); color:var(--white); padding:12px 20px; border-radius:0 0 10px 0;
}
.skip-link:focus{left:0;}

.eyebrow{
  font-size:12.5px; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--teal); font-weight:600; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1.5px; background:var(--teal); display:inline-block;}

/* ===== HEADER ===== */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,248,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; max-width:1160px; margin:0 auto;
}
.logo-mark{display:flex; align-items:center;}
.logo-word{font-family:'Fraunces', serif; font-weight:600; font-size:17px; color:var(--navy); line-height:1.15;}
.logo-word span{display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:10.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--teal);}
nav.links{display:flex; align-items:center; gap:30px; font-size:14.5px; font-weight:500; color:var(--navy);}
nav.links a{opacity:0.8; transition:opacity .2s;}
nav.links a:hover, nav.links a[aria-current="page"]{opacity:1;}
nav.links a[aria-current="page"]{border-bottom:2px solid var(--teal); padding-bottom:2px;}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--navy); color:var(--white);
  padding:12px 22px; border-radius:100px;
  font-size:14px; font-weight:600;
  border:none; cursor:pointer; font-family:inherit;
  transition:background .2s, transform .2s;
  white-space:nowrap;
}
.btn:hover{background:var(--teal); transform:translateY(-1px);}
.btn.ghost{background:transparent; color:var(--navy); border:1.5px solid var(--navy);}
.btn.ghost:hover{background:var(--navy); color:var(--white);}
.btn.on-navy{background:var(--white); color:var(--navy);}
.btn.on-navy:hover{background:var(--sky);}
.btn:disabled{opacity:0.6; cursor:not-allowed; transform:none;}

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; transition:transform .2s, opacity .2s;}

/* ===== HERO ===== */
.hero{
  padding:64px 0 72px;
  background:
    radial-gradient(1000px 500px at 85% -10%, var(--sky) 0%, transparent 60%),
    var(--white);
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:64px; align-items:center;
}
.hero h1{font-size:clamp(30px, 4.6vw, 50px); line-height:1.1; margin:14px 0 18px;}
.hero h1 em{font-style:italic; font-weight:500; color:var(--teal);}
.hero h1 .tagline{
  display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:15px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--teal); margin-top:12px;
}
.hero p.lead{font-size:17px; max-width:480px; color:#4A5A68; margin-bottom:28px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}

/* ===== WERKSWINKEL — volledige vertoning (tuisblad fokuspunt) ===== */
.ww-subtitle{color:var(--teal); font-size:15px; margin-top:8px;}
.ww-card{
  background:var(--navy); border-radius:var(--radius); color:var(--white);
  padding:48px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px;
}
.ww-col-left{display:flex; flex-direction:column; justify-content:space-between;}
.ww-tagline{
  font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:23px; color:var(--white);
  line-height:1.4; margin-bottom:26px; max-width:440px;
}
.ww-benefits-label{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--sky); margin-bottom:14px;}
.ww-benefits{list-style:none; margin-bottom:24px;}
.ww-benefits li{position:relative; padding-left:28px; margin-bottom:12px; font-size:14.5px; color:var(--white); line-height:1.5;}
.ww-benefits li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--sky); font-weight:700;}

.ww-box{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); border-radius:14px;
  padding:18px 22px; font-size:13.5px; color:var(--sky); line-height:1.6; margin-bottom:14px;
}
.ww-box:last-child{margin-bottom:0;}
.ww-box-label{font-size:10.5px; text-transform:uppercase; letter-spacing:0.09em; color:var(--white); font-weight:700; margin-bottom:8px;}
.ww-box strong{color:var(--white);}

.ww-meta-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px;}
.ww-meta{background:rgba(255,255,255,0.07); border-radius:12px; padding:14px 16px;}
.ww-meta-label{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--sky); font-weight:700; margin-bottom:5px;}
.ww-meta-value{font-size:13px; color:var(--white); font-weight:500; line-height:1.4;}

.ww-included{list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px;}
.ww-included li{
  background:rgba(255,255,255,0.08); border-radius:100px; padding:8px 16px;
  font-size:12.5px; color:var(--sky); font-weight:600;
}

.ww-price-box{background:var(--white); border-radius:16px; padding:28px; color:var(--ink); text-align:center;}
.ww-price-compare{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:6px;}
.ww-price-option{background:var(--beige); border-radius:12px; padding:18px 14px;}
.ww-price-option--early{background:var(--sky);}
.ww-price-option-label{font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:#5A6B78; font-weight:700; margin-bottom:10px;}
.ww-price-amount{font-family:'Fraunces',serif; font-size:32px; color:var(--navy); font-weight:600; line-height:1;}
.ww-price-option-note{font-size:11px; color:var(--teal); font-weight:600; margin-top:8px;}
.ww-early-tag{
  display:inline-block; background:var(--teal); color:var(--white); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em; padding:4px 12px; border-radius:100px; margin-bottom:10px;
}
.ww-early-passed{font-size:13.5px; color:#5A6B78; padding-top:18px; border-top:1.5px dashed var(--line); margin-top:6px;}
.countdown{display:flex; gap:14px; justify-content:center; margin:18px 0 8px;}
.countdown .unit{text-align:center; min-width:48px;}
.countdown .num{font-family:'Fraunces',serif; font-size:26px; font-weight:600; line-height:1; color:var(--navy);}
.countdown .label{font-size:9.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--teal); margin-top:4px;}
.countdown-caption{font-size:11.5px; color:var(--teal);}

.ww-belegging{font-family:'Fraunces',serif; font-style:italic; font-size:15px; color:var(--sky); margin:26px 0 20px; text-align:center; line-height:1.5;}
.ww-cta{width:100%; justify-content:center; white-space:normal; text-align:center;}

.reel-cta{
  margin-top:44px; background:var(--beige); border:1.5px solid var(--sky); border-radius:var(--radius);
  padding:36px 40px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.reel-cta-eyebrow{font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--teal); font-weight:700; margin-bottom:8px;}
.reel-cta-vraag{font-family:'Fraunces',serif; font-size:19px; color:var(--navy); font-weight:600; max-width:440px; line-height:1.4;}

/* signature element: daily message dial */
.daily-badge{
  position:relative; width:100%; max-width:340px; margin-left:auto;
  aspect-ratio:1; border-radius:50%;
  background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 30px 60px -20px rgba(47,65,86,0.45);
}
.daily-badge::before{
  content:"";
  position:absolute; inset:-14px;
  border-radius:50%;
  border:1.5px dashed var(--sky);
  opacity:0.7;
  animation: spin 40s linear infinite;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .daily-badge::before{animation:none;}
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.daily-inner{
  width:82%; aspect-ratio:1; border-radius:50%;
  background:var(--beige);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px;
}
.daily-inner .tag{font-size:10.5px; text-transform:uppercase; letter-spacing:0.14em; color:var(--teal); font-weight:700; margin-bottom:10px;}
.play-circle{
  width:52px; height:52px; border-radius:50%;
  background:var(--navy); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; font-size:18px;
  border:none; cursor:pointer;
}
.play-circle:hover{background:var(--teal);}
.daily-inner .quote{font-family:'Fraunces', serif; font-style:italic; font-size:14.5px; color:var(--navy); line-height:1.4;}
.daily-inner .date{margin-top:12px; font-size:11px; color:var(--teal); font-weight:600;}

/* ===== SECTIONS shared ===== */
section{padding:80px 0;}
section.alt{background:var(--beige);}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head h2{font-size:clamp(26px,3.2vw,36px); margin-top:12px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head.center .eyebrow{justify-content:center;}
.section-head .missie{
  font-family:'Fraunces',serif; font-style:italic; font-size:18px; color:var(--navy);
  border-left:3px solid var(--teal); padding-left:20px; margin-top:20px; line-height:1.55; max-width:640px;
}

/* ===== OOR HENNIE ===== */
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center;}
.photo-frame{
  aspect-ratio:4/5; border-radius:var(--radius);
  background:linear-gradient(160deg, var(--sky), var(--teal));
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
  text-align:center; padding:20px;
  overflow:hidden;
}
.photo-frame img{width:100%; height:100%; object-fit:cover;}
.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.pill{
  padding:8px 16px; border-radius:100px; background:var(--sky);
  color:var(--navy); font-size:13px; font-weight:600;
}
blockquote.kernquote{
  font-family:'Fraunces',serif; font-style:italic; font-size:20px; color:var(--navy);
  border-left:3px solid var(--teal); padding-left:22px; margin:28px 0; line-height:1.5;
}
.storie p{margin-bottom:18px; color:#3D4C58; max-width:640px;}

/* ===== DIENSTE ===== */
.services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.service-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; transition:transform .25s, box-shadow .25s;
  display:flex; flex-direction:column;
}
.service-card:hover{transform:translateY(-6px); box-shadow:0 24px 40px -24px rgba(47,65,86,0.3);}
.service-card .num{font-family:'Fraunces',serif; font-size:26px; color:var(--sky); font-weight:600; margin-bottom:18px;}
.service-card h3{font-size:19px; margin-bottom:12px;}
.service-card p{font-size:14.5px; color:#5A6B78; flex-grow:1;}
.service-card .btn{margin-top:22px; align-self:flex-start;}

/* ===== WERKSWINKELS ===== */
.workshop-card{
  display:grid; grid-template-columns:150px 1fr auto; gap:32px; align-items:center;
  background:var(--navy); color:var(--white); border-radius:var(--radius);
  padding:38px 42px;
}
.date-badge{
  background:var(--white); color:var(--navy); border-radius:16px;
  padding:18px; text-align:center;
}
.date-badge .day{font-family:'Fraunces',serif; font-size:34px; font-weight:600; line-height:1;}
.date-badge .month{font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--teal); margin-top:6px; font-weight:700;}
.workshop-card h3{color:var(--white); font-size:22px; margin-bottom:8px;}
.workshop-card p{color:var(--sky); font-size:14.5px;}
.workshop-card ul{color:var(--sky); font-size:14px; margin-top:12px; padding-left:18px;}
.workshop-card ul li{margin-bottom:4px;}
.freq-note{margin-top:18px; font-size:13.5px; color:var(--teal); font-weight:600;}

.reel-blok{
  margin-top:56px; background:var(--beige); border-radius:var(--radius);
  padding:44px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;
}
.reel-blok h3{font-size:22px; margin-bottom:10px;}
.reel-blok p{color:#4A5A68; font-size:14.5px; max-width:420px;}

/* ===== GETUIENISSE ===== */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.testi-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; display:flex; flex-direction:column; height:100%;
}
.testi-card .quote{font-family:'Fraunces',serif; font-style:italic; font-size:16px; color:var(--navy); margin-bottom:16px; flex-grow:1;}
.testi-card .who{font-size:13px; font-weight:700; color:var(--teal);}
.sadag-note{
  margin-top:32px; font-size:13px; color:var(--teal); text-align:center;
  max-width:520px; margin-left:auto; margin-right:auto; line-height:1.6;
}

/* ===== VRAE ===== */
.faq-toggle{
  display:inline-flex; background:var(--sky); border-radius:100px; padding:4px; margin-bottom:36px;
}
.faq-toggle button{
  border:none; background:transparent; padding:9px 20px; border-radius:100px;
  font-size:13.5px; font-weight:700; color:var(--navy); cursor:pointer; font-family:inherit;
}
.faq-toggle button[aria-selected="true"]{background:var(--navy); color:var(--white);}
.faq-item{border-bottom:1px solid var(--line); padding:20px 0;}
.faq-item h3{font-size:16px; font-weight:600; color:var(--navy); font-family:'Inter',sans-serif;}
.faq-item p{font-size:14.5px; color:#5A6B78; margin-top:8px; max-width:640px;}

/* ===== VIDEO-ROOSTER (Boodskappe) ===== */
.video-toolbar{display:flex; gap:16px; align-items:center; margin-bottom:36px; flex-wrap:wrap;}
.video-toolbar input[type="search"]{
  flex:1; min-width:220px; padding:12px 18px; border-radius:100px;
  border:1.5px solid var(--line); font-family:inherit; font-size:14.5px; background:var(--white);
}
.video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.video-card{cursor:pointer; background:none; border:none; text-align:left; padding:0; font-family:inherit;}
.video-card .thumb{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/9; background:var(--sky);}
.video-card .thumb img{width:100%; height:100%; object-fit:cover;}
.video-card .thumb .play-circle{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.video-card h3{font-size:15px; margin-top:12px; color:var(--navy);}
.video-card .date{font-size:12.5px; color:var(--teal); margin-top:4px; font-weight:600;}
.load-more-wrap{text-align:center; margin-top:40px;}

.modal-overlay{
  position:fixed; inset:0; background:rgba(31,45,58,0.8); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.modal-overlay[hidden]{display:none;}
.modal-box{width:100%; max-width:820px; background:var(--ink); border-radius:16px; overflow:hidden; position:relative;}
.modal-close{
  position:absolute; top:-44px; right:0; background:none; border:none; color:var(--white);
  font-size:28px; cursor:pointer; line-height:1;
}

/* ===== VORMS ===== */
.form-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:40px; max-width:640px;
}
.form-row{margin-bottom:20px;}
.form-row label{display:block; font-size:13.5px; font-weight:600; color:var(--navy); margin-bottom:8px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:13px 16px; border-radius:12px; border:1.5px solid var(--line);
  font-family:inherit; font-size:14.5px; background:var(--white); color:var(--ink);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{border-color:var(--teal);}
.form-row textarea{resize:vertical; min-height:110px;}
.form-two{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-msg{padding:14px 18px; border-radius:12px; font-size:14px; margin-bottom:20px; display:none;}
.form-msg.ok{display:block; background:#DCEEE3; color:#1F6A46;}
.form-msg.err{display:block; background:#F6DCDC; color:#8A2323;}

/* ===== BOOKING STRIP ===== */
.book-strip{
  background:var(--teal); color:var(--white); border-radius:var(--radius);
  padding:48px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.book-strip h2{color:var(--white); font-size:26px;}
.book-strip p{color:var(--sky); margin-top:8px; font-size:14.5px;}

/* ===== KONTAK-BLADSY ===== */
.contact-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:start;}
.contact-info h3{font-size:15px; color:var(--navy); margin:22px 0 8px;}
.contact-info h3:first-child{margin-top:0;}
.contact-info p, .contact-info a{font-size:14.5px; color:#4A5A68;}
.social-row{display:flex; gap:12px; margin-top:8px; flex-wrap:wrap;}
.social-row a{
  padding:8px 14px; border-radius:100px; background:var(--sky); color:var(--navy);
  font-size:13px; font-weight:600;
}

/* ===== BOEKWINKEL ===== */
/* Omslae kry 'n klein radius (dis boeke, nie kaarte nie) en 'n sagte skaduwee. */
.boek-omslag{
  aspect-ratio:2/3; border-radius:6px; overflow:hidden; background:var(--sky);
  box-shadow:0 18px 34px -18px rgba(47,65,86,0.45);
  transition:transform .25s, box-shadow .25s;
}
.boek-omslag img{width:100%; height:100%; object-fit:cover;}
/* Plekhouer tot daar 'n regte omslag is — die werf se sirkel-motief */
.boek-omslag-plekhouer{
  position:relative; width:100%; height:100%; background:var(--navy);
  display:flex; align-items:center; justify-content:center; padding:18%;
  text-align:center;
}
.boek-omslag-plekhouer::before{
  content:""; position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  border:1.5px dashed var(--sky); opacity:0.55;
}
.boek-omslag-plekhouer span{
  position:relative; font-family:'Fraunces',serif; font-style:italic; font-weight:500;
  color:var(--white); font-size:clamp(14px, 2vw, 20px); line-height:1.3;
}

.boek-grid{list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:48px 32px;}
.boek-kaart{display:flex; flex-direction:column; height:100%;}
.boek-kaart:hover .boek-omslag{transform:translateY(-6px); box-shadow:0 28px 44px -20px rgba(47,65,86,0.5);}
.boek-titel{font-size:20px; margin-top:20px; line-height:1.3;}
.boek-kort{font-size:14.5px; color:#5A6B78; margin-top:6px; flex-grow:1;}
.boek-meta{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:13px; font-weight:600; color:#4A5A68;
}
.boek-prys{font-family:'Fraunces',serif; font-size:18px; color:var(--navy);}
.boek-leeg{
  background:var(--beige); border-radius:var(--radius); padding:56px 32px;
  text-align:center; max-width:640px; margin:0 auto;
}
.boek-leeg h2{font-size:26px; margin-bottom:10px;}
.boek-leeg p{color:#4A5A68;}
.boek-leeg a:not(.btn){text-decoration:underline; color:var(--navy);}

/* Boek-besonderhede */
.boek-detail{padding:40px 0 88px;}
.boek-terug{font-size:14px; font-weight:600; margin-bottom:32px;}
.boek-terug a{color:#4A5A68;}
.boek-terug a:hover{color:var(--navy);}
.boek-detail-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:72px; align-items:start;}
.boek-omslag--groot{position:sticky; top:104px;}
.boek-inligting h1{font-size:clamp(30px, 4vw, 44px); line-height:1.12; margin:14px 0 10px;}
.boek-subtitel{font-family:'Fraunces',serif; font-style:italic; font-size:19px; color:#4A6B7A; margin-bottom:26px;}
.boek-beskrywing{margin-top:22px;}
.boek-beskrywing p{color:#3D4C58; margin-bottom:16px; max-width:620px;}
.boek-feite{font-size:13px; color:#5A6B78; margin-top:6px;}

.boek-koop{margin-top:36px; padding-top:32px; border-top:1px solid var(--line); max-width:560px;}
.boek-koop fieldset{border:none;}
.boek-koop legend{font-size:13.5px; font-weight:600; color:var(--navy); margin-bottom:12px;}
.formaat-keuses{display:grid; gap:12px; margin-bottom:22px;}
.formaat-keuse{
  display:grid; grid-template-columns:auto 1fr auto; gap:4px 14px; align-items:center;
  border:1.5px solid var(--line); border-radius:14px; padding:16px 18px;
  cursor:pointer; background:var(--white); transition:border-color .2s, background .2s;
}
.formaat-keuse:hover{border-color:var(--teal);}
.formaat-keuse:has(input:checked){border-color:var(--teal); background:var(--beige);}
.formaat-keuse input{accent-color:var(--navy); width:18px; height:18px; margin:0;}
.formaat-naam{font-weight:600; color:var(--navy); font-size:15px;}
.formaat-prys{font-family:'Fraunces',serif; font-weight:600; font-size:20px; color:var(--navy);}
.formaat-nota{grid-column:2 / 4; font-size:13px; color:#5A6B78; line-height:1.45;}
.formaat-keuse.is-uitverkoop{cursor:not-allowed; opacity:0.6;}
.formaat-keuse.is-uitverkoop:hover{border-color:var(--line);}
.formaat-keuse.is-uitverkoop .formaat-prys{font-family:'Inter',sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:0.08em;}
.boek-uitverkoop{font-size:14.5px; color:#4A5A68;}
.boek-uitverkoop a{text-decoration:underline; color:var(--navy);}

/* Mandjie-ikoon in die header (sigbaar sodra daar iets in is) */
.nav-aksies{display:flex; align-items:center; gap:6px; margin-left:22px;}
.nav-mandjie{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; color:var(--navy);
  border:1.5px solid var(--line); transition:border-color .2s, background .2s;
}
.nav-mandjie[hidden]{display:none;}
.nav-mandjie:hover, .nav-mandjie[aria-current="page"]{border-color:var(--teal); background:var(--beige);}
.nav-mandjie-getal{
  position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px;
  border-radius:100px; background:var(--navy); color:var(--white);
  font-size:11px; font-weight:700; line-height:20px; text-align:center;
}
.nav-mandjie-getal[hidden]{display:none;}

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

/* Mandjie-bladsy */
.mandjie-afdeling{padding-top:24px;}
.mandjie-grid{display:grid; grid-template-columns:1fr 340px; gap:56px; align-items:start;}
.mandjie-grid[hidden]{display:none;}
.mandjie-kop{font-family:'Fraunces',serif; font-size:20px; font-weight:600; color:var(--navy); margin-bottom:16px;}
.mandjie-blok{border:none; margin-top:44px;}
.mandjie-blok[hidden]{display:none;}
.mandjie-blok legend{padding:0;}

.mandjie-items{list-style:none; border-top:1px solid var(--line);}
.mandjie-item{
  display:grid; grid-template-columns:64px 1fr auto; gap:18px; align-items:start;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.mandjie-omslag{border-radius:4px; box-shadow:0 8px 16px -10px rgba(47,65,86,0.5);}
.mandjie-omslag .boek-omslag-plekhouer{padding:0;}
.mandjie-omslag .boek-omslag-plekhouer::before{width:70%;}
.mandjie-item-titel{font-family:'Fraunces',serif; font-weight:600; font-size:17px; color:var(--navy); line-height:1.3;}
.mandjie-item-titel:hover{text-decoration:underline;}
.mandjie-item-formaat{font-size:13.5px; color:#5A6B78; margin-top:2px;}
.mandjie-item-beheer{display:flex; align-items:center; gap:18px; margin-top:12px; flex-wrap:wrap;}
.mandjie-hoeveel{
  display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:100px;
}
.mandjie-hoeveel span{min-width:28px; text-align:center; font-weight:600; font-size:14px;}
.mandjie-knop{
  width:34px; height:34px; border:none; background:none; border-radius:50%;
  font-size:17px; color:var(--navy); cursor:pointer; font-family:inherit;
}
.mandjie-knop:hover:not(:disabled){background:var(--beige);}
.mandjie-knop:disabled{opacity:0.35; cursor:not-allowed;}
.mandjie-verwyder{
  background:none; border:none; padding:4px 0; cursor:pointer; font-family:inherit;
  font-size:13px; color:#5A6B78; text-decoration:underline; text-underline-offset:3px;
}
.mandjie-verwyder:hover{color:#8A2323;}
.mandjie-item-totaal{font-family:'Fraunces',serif; font-weight:600; font-size:17px; color:var(--navy); white-space:nowrap;}

.veld-opsioneel{font-weight:400; color:#5A6B78;}
.veld-opsioneel[hidden]{display:none;}
.veld-hulp{font-size:12.5px; color:#5A6B78; margin-top:6px;}
.form-row [aria-invalid]{border-color:#B24A4A;}
#adresBlok[hidden]{display:none;}

.mandjie-opsomming{
  position:sticky; top:104px; background:var(--beige); border-radius:var(--radius); padding:30px 28px;
}
.mandjie-totale div{display:flex; justify-content:space-between; gap:12px; padding:9px 0; font-size:14.5px;}
.mandjie-totale div[hidden]{display:none;}
.mandjie-totale dt{color:#4A5A68;}
.mandjie-totale dd{font-weight:600; color:var(--navy);}
.mandjie-totaal{border-top:1px solid var(--line); margin-top:8px; padding-top:16px !important;}
.mandjie-totaal dt{color:var(--navy); font-weight:600;}
.mandjie-totaal dd{font-family:'Fraunces',serif; font-size:24px;}
.mandjie-betaal{width:100%; justify-content:center; margin-top:22px; padding:15px 22px; font-size:15px;}
.mandjie-veilig{font-size:12.5px; color:#5A6B78; margin-top:14px; text-align:center; line-height:1.5;}
.form-msg a{text-decoration:underline; font-weight:600; color:inherit;}

/* Bedankt-bladsy */
.bedankt-wrap{max-width:720px; margin-left:auto; margin-right:auto;}
.hero .lead a{text-decoration:underline;}
.bedankt-blok{margin-top:40px;}
.bedankt-blok:first-child{margin-top:0;}
.bedankt-blok p{color:#3D4C58; margin-bottom:10px;}
.bedankt-aflaai{list-style:none; display:flex; flex-direction:column; gap:12px; align-items:flex-start; margin-bottom:14px;}
.bedankt-aflaai .btn{white-space:normal; text-align:left;}
.aflaai-vorm{margin:8px 0 14px;}
/* "Jou naam gaan saam"-herinnering: sigbaar, maar rustig */
.naam-herinnering{
  background:var(--beige); border-left:3px solid var(--teal); border-radius:0 12px 12px 0;
  padding:12px 16px; margin:14px 0; font-size:14px; color:var(--navy); max-width:560px;
}
.hero .naam-herinnering{background:rgba(255,255,255,0.7);}
.bedankt-adres{background:var(--beige); border-radius:14px; padding:16px 20px; font-size:14.5px;}
.bedankt-totale{background:var(--beige); border-radius:var(--radius); padding:20px 26px;}
.bedankt-totale dt{max-width:75%;}
.bedankt-wag{
  display:flex; align-items:center; gap:18px; background:var(--beige);
  border-radius:var(--radius); padding:24px 28px; margin-bottom:40px;
}
.bedankt-wag p{color:var(--navy); font-weight:500;}
.bedankt-sirkel{
  flex:none; width:34px; height:34px; border-radius:50%;
  border:2.5px solid var(--sky); border-top-color:var(--navy);
  animation:spin 1s linear infinite;
}
.bedankt-wag.is-klaar .bedankt-sirkel{animation:none; border-color:var(--sky);}
@media (prefers-reduced-motion: reduce){ .bedankt-sirkel{animation-duration:3s;} }

/* ===== ADMIN (Hennie se bestellingsbladsy) ===== */
.admin{padding:44px 0 88px;}
.admin-kop{font-size:clamp(28px,3.4vw,38px); margin:10px 0 24px;}
.admin-kop--klein{font-size:24px; margin-top:56px;}
.admin-oortjies{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px;}
.admin-oortjies a{
  padding:9px 16px; border-radius:100px; background:var(--beige); color:var(--navy);
  font-size:13.5px; font-weight:600;
}
.admin-oortjies a span{opacity:0.65; margin-left:4px;}
.admin-oortjies a[aria-current="page"]{background:var(--navy); color:var(--white);}
.admin-leeg{color:#4A5A68; padding:24px 0;}
.admin-lys{display:flex; flex-direction:column; gap:12px;}
.admin-bestelling{border:1px solid var(--line); border-radius:16px; background:var(--white);}
.admin-bestelling[open]{border-color:var(--sky);}
.admin-bestelling summary{
  display:grid; grid-template-columns:130px 1fr 130px 90px auto; gap:14px; align-items:center;
  padding:16px 20px; cursor:pointer; list-style:none; font-size:14px;
}
.admin-bestelling summary::-webkit-details-marker{display:none;}
.admin-nr{font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums;}
.admin-naam{font-weight:600; color:var(--navy);}
.admin-datum{color:#5A6B78; font-size:13px;}
.admin-bedrag{font-weight:600; text-align:right;}
.admin-status{padding:4px 12px; border-radius:100px; font-size:12px; font-weight:700; white-space:nowrap; justify-self:end;}
.admin-status--groen{background:#DCEEE3; color:#1F6A46;}
.admin-status--oranje{background:#F8E6CF; color:#7A4A12;}
.admin-status--blou{background:var(--sky); color:var(--navy);}
.admin-status--rooi{background:#F6DCDC; color:#8A2323;}
.admin-status--grys{background:#ECEAE6; color:#4A5A68;}
.admin-detail{display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:4px 20px 8px; border-top:1px solid var(--line);}
.admin-kolom h3{font-family:'Inter',sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:#4A5A68; margin:16px 0 6px;}
.admin-kolom p, .admin-kolom li{font-size:14px; color:var(--ink); margin-bottom:6px;}
.admin-kolom ul{list-style:none;}
.admin-kolom a{text-decoration:underline;}
.admin-adres{background:var(--beige); border-radius:12px; padding:12px 16px;}
.admin-klein{font-size:12.5px; color:#5A6B78;}
.admin-aksie{padding:16px 20px; border-top:1px solid var(--line);}
.admin-aksie--sag{background:transparent;}
.admin-aksie label{display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:8px;}
.admin-ry{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.admin-ry input{
  flex:1; min-width:180px; padding:11px 14px; border-radius:12px; border:1.5px solid var(--line);
  font-family:inherit; font-size:14px; background:var(--white);
}
.admin-kode{
  background:var(--navy); color:var(--white); border-radius:12px; padding:16px 18px; margin:14px 0;
  font-size:13px; white-space:pre-wrap; word-break:break-all; user-select:all;
}
.toets-lys{list-style:none; border-top:1px solid var(--line);}
.toets{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); font-size:14.5px;}
.toets p{font-size:13.5px; color:#4A5A68; margin-top:4px;}
.toets code, .admin code{font-size:12.5px; background:var(--beige); padding:1px 6px; border-radius:6px; word-break:break-all;}
.toets-ikoon{flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;}
.toets--ok .toets-ikoon{background:#DCEEE3; color:#1F6A46;}
.toets--waarsku .toets-ikoon{background:#F8E6CF; color:#7A4A12;}
.toets--fout .toets-ikoon{background:#F6DCDC; color:#8A2323;}
.admin-voorraad{display:flex; flex-direction:column; gap:12px; max-width:640px;}
.admin-voorraad .admin-ry label{flex:1 1 220px; font-weight:600; color:var(--navy); font-size:14px; margin:0;}
.admin-voorraad .admin-ry input{flex:0 0 110px; min-width:0;}
@media(max-width:760px){
  .admin-bestelling summary{grid-template-columns:1fr auto; gap:4px 12px;}
  .admin-datum{grid-column:1;}
  .admin-bedrag{text-align:right;}
  .admin-status{grid-column:1 / -1; justify-self:start; margin-top:4px;}
  .admin-detail{grid-template-columns:1fr; gap:0;}
}

/* ===== BOEKBLAD /boek ("Jou Brein: Vriend of Vyand") ===== */
/* Kleure kom van die boekomslag. Koper teks op vlootblou is --koper-lig
   en op room --koper-donker, anders is die kontras te swak vir klein teks. */
.boek-etiket{
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--koper-lig);
}
.boek-etiket--room{color:var(--koper-donker);}
.boek-knoppie{
  background:var(--koper); color:#fff; font-size:16.5px; font-weight:700;
  padding:17px 30px; min-height:56px; justify-content:center; white-space:normal; text-align:center;
  box-shadow:0 14px 28px -14px rgba(0,0,0,0.45);
}
.boek-knoppie:hover{background:var(--koper-donker);}
.boek-knoppie--vol{width:100%;}

/* Advertensie bo-aan: foon = etiket, kop, voorblad, teks; rekenaar = voorblad links */
.boek-held{
  background:
    radial-gradient(700px 420px at 15% 30%, rgba(201,146,90,0.16) 0%, transparent 65%),
    var(--boek-vloot);
  color:var(--room); padding:40px 0 64px; overflow:hidden;
}
.boek-held-rooster{
  display:grid; grid-template-columns:1fr; text-align:center;
  grid-template-areas:"etiket" "kop" "omslag" "teks";
}
.boek-held-rooster > *{min-width:0;}
.boek-held-etiket{grid-area:etiket;}
.boek-held-kop{
  grid-area:kop; color:var(--room); font-size:clamp(30px, 7.4vw, 54px); line-height:1.1; margin:14px 0 28px;
}
.boek-held-kop span{display:block; color:var(--koper-lig); font-style:italic; font-weight:500; margin-top:6px;}
.boek-held-omslag{grid-area:omslag; justify-self:center; width:min(62vw, 260px); margin-bottom:32px;}
.boek-held-omslag img{
  width:100%; height:auto; border-radius:4px; transform:rotate(-3deg);
  box-shadow:0 30px 50px -18px rgba(0,0,0,0.65), 0 0 0 1px rgba(244,236,226,0.08);
}
.boek-held-teks{grid-area:teks;}
.boek-held-teks > p:first-child{font-size:17px; line-height:1.65; color:rgba(244,236,226,0.9); max-width:520px; margin:0 auto 28px;}
.boek-held-prys{font-family:'Fraunces',serif; font-size:30px; font-weight:600; color:var(--room); margin-bottom:18px;}
.boek-held-klein{font-size:13.5px; color:rgba(244,236,226,0.72); margin-top:16px;}

/* Bestel-plekhouer (fase "beskikbaar") */
.boek-bestel{padding:56px 0 0;}
.boek-bestel-blok{
  max-width:640px; margin:0 auto; text-align:center; background:var(--white);
  border:2px dashed var(--koper); border-radius:var(--radius); padding:36px 28px;
}
.boek-bestel-blok h2{font-size:26px; color:var(--boek-vloot);}
.boek-bestel-blok p{margin-top:10px; color:#4A5A68;}

/* Die vorm */
.boek-lys-afdeling{padding:56px 0;}
#lys, #bestel, #privaatheid, .boek-lys-sukses{scroll-margin-top:90px;} /* nie agter die vaste kopstuk nie */
.boek-lys-blok{
  max-width:640px; margin:0 auto; background:var(--room); border-radius:var(--radius);
  border-top:5px solid var(--koper); padding:36px 32px;
  box-shadow:0 30px 60px -30px rgba(28,42,61,0.35);
}
.boek-lys-blok h2{font-size:clamp(26px,5vw,34px); color:var(--boek-vloot);}
.boek-lys-inleiding{color:#4A5A68; margin:10px 0 26px;}
.boek-lys-blok .form-row input[type="text"],
.boek-lys-blok .form-row input[type="tel"],
.boek-lys-blok .form-row input[type="email"]{font-size:16px; padding:14px 16px;} /* 16px: iOS zoom nie in nie */
.boek-lys-blok .form-row input:focus{border-color:var(--koper);}
.boek-keuses{border:none;}
.boek-keuses legend{font-size:13.5px; font-weight:600; color:var(--navy); margin-bottom:10px; padding:0;}
.boek-radio-ry{display:flex; gap:10px; flex-wrap:wrap;}
.boek-keuse{
  display:flex !important; align-items:flex-start; gap:12px; cursor:pointer;
  font-size:14.5px !important; font-weight:500 !important; color:var(--ink) !important; line-height:1.45;
  padding:10px 0; margin:0 !important;
}
.boek-radio-ry .boek-keuse{
  background:var(--white); border:1.5px solid var(--line); border-radius:100px; padding:10px 18px;
}
.boek-radio-ry .boek-keuse:has(input:checked){border-color:var(--koper); background:#fff;}
.boek-keuse input{width:20px !important; height:20px; flex:none; margin-top:1px; accent-color:var(--koper);}
.boek-toestemming a{text-decoration:underline; color:var(--navy);}
.veld-fout{font-size:13px; color:#8A2323; margin-top:6px; font-weight:500;}
.boek-lys-sukses{text-align:center; padding:12px 0;}
.boek-lys-sukses:focus{outline:none;}
.boek-lys-sukses p{color:#3D4C58; margin:12px auto 26px; max-width:460px; font-size:16px;}
.boek-whatsapp{background:#1a7f4b; color:#fff; font-size:16px; padding:16px 26px; white-space:normal;}
.boek-whatsapp:hover{background:#13633a;}

/* Wat jy kry */
.boek-dele{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.boek-deel{background:var(--room); border-radius:var(--radius); padding:32px 28px;}
.boek-deel h3{font-size:22px; color:var(--boek-vloot); margin:10px 0 12px;}
.boek-deel p:last-child{color:#4A5A68; font-size:15px;}
.boek-aanhaling{
  font-family:'Fraunces',serif; font-weight:500; font-size:clamp(24px,4vw,36px); line-height:1.3;
  color:var(--boek-vloot); text-align:center; max-width:780px; margin:64px auto 0;
}
.boek-aanhaling em{color:var(--koper-donker);}

/* Vir wie */
.boek-kaartjies{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.boek-kaartjies li{background:var(--white); border:1px solid var(--line); border-radius:18px; padding:24px 22px;}
.boek-kaartjies svg{
  width:36px; height:36px; fill:none; stroke:var(--koper); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; margin-bottom:14px;
}
.boek-kaartjies p{font-size:14.5px; color:var(--ink); line-height:1.5;}

/* Kersgeskenk */
.boek-kers-afdeling{padding-bottom:0;}
.boek-kers{
  background:var(--room); border:2px solid var(--koper); border-radius:var(--radius);
  padding:40px 44px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.boek-kers h2{font-size:clamp(24px,3.4vw,32px); color:var(--boek-vloot);}
.boek-kers p{color:#4A5A68; margin-top:8px; max-width:520px;}

/* Besighede + Breinvriend */
.boek-twee{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start;}
.boek-twee > *{min-width:0;}
.boek-twee--een{grid-template-columns:1fr; max-width:calc(640px + 64px);} /* net Besighede, sonder Breinvriend */
.boek-blok{border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px;}
.boek-blok h2{font-size:24px; margin:10px 0 12px;}
.boek-blok p{color:#4A5A68; font-size:15px; margin-bottom:22px;}
.boek-breinvriend{background:var(--boek-vloot); border-color:var(--boek-vloot);}
.boek-breinvriend h2{color:var(--room); margin:0;}
.boek-breinvriend p{color:rgba(244,236,226,0.85);}
.boek-breinvriend-kop{display:flex; align-items:center; gap:16px; margin-bottom:14px;}
.boek-breinvriend-kop img{width:56px; height:56px; flex:none; border-radius:14px;}
.boek-breinvriend-knoppie{background:var(--koper); color:#fff;}
.boek-breinvriend-knoppie:hover{background:var(--koper-donker);}
.boek-qr{display:none;} /* jy kan nie jou eie foon se skerm skandeer nie */
.boek-qr img{width:150px; height:150px; background:#fff; border-radius:12px; padding:8px;}
.boek-qr p{font-size:13px; margin:10px 0 0;}
@media (min-width:861px) and (hover:hover) and (pointer:fine){
  .boek-qr{display:block;}
  .boek-breinvriend-knoppie{display:none;}
}

.boek-skrywer h2{font-size:clamp(26px,3.2vw,34px); margin:12px 0 16px;}
.boek-skrywer p{color:#3D4C58; margin-bottom:24px; max-width:560px;}
.boek-skrywer .photo-frame{max-width:420px;}

/* Gereelde vrae */
.boek-vrae-lys{max-width:760px; border-top:1px solid var(--line);}
.boek-vrae-lys details{border-bottom:1px solid var(--line);}
.boek-vrae-lys summary{
  cursor:pointer; list-style:none; padding:20px 36px 20px 0; position:relative;
  font-weight:600; color:var(--navy); font-size:16px;
}
.boek-vrae-lys summary::-webkit-details-marker{display:none;}
.boek-vrae-lys summary::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-size:24px; font-weight:400; color:var(--koper);
}
.boek-vrae-lys details[open] summary::after{content:"–";}
.boek-vrae-lys details p{color:#4A5A68; font-size:15px; padding-bottom:20px; max-width:640px;}
.boek-vrae-lys details a{text-decoration:underline; color:var(--navy);}
.boek-vraag-engels{display:flex; gap:18px; align-items:flex-start; padding-bottom:20px;}
.boek-vraag-engels img{width:84px; height:auto; flex:none; border-radius:3px; box-shadow:0 10px 20px -10px rgba(28,42,61,0.5);}
.boek-vraag-engels p{padding-bottom:0 !important;}

/* Privaatheid */
.boek-privaatheid{padding:8px 0 64px;}
.boek-privaatheid h2{font-family:'Inter',sans-serif; font-size:14px; text-transform:uppercase; letter-spacing:0.1em; color:#4A5A68;}
.boek-privaatheid p{font-size:13.5px; color:#5A6B78; margin-top:10px; max-width:760px;}
.boek-privaatheid a{text-decoration:underline;}

/* Tuisblad: vandag se gedagte uit die boek (in die plek van "Vandag se Boodskap") */
.dag-gedagte{
  background:var(--boek-vloot); color:var(--room); border-radius:var(--radius);
  padding:28px; display:grid; grid-template-columns:78px 1fr; gap:18px 20px; align-items:center;
  box-shadow:0 30px 60px -24px rgba(28,42,61,0.55);
}
.dag-gedagte > *{min-width:0;}
.dag-gedagte-teks{grid-column:1 / -1;} /* die gedagte kry die volle breedte onder die voorblad */
.dag-gedagte-opskrif .boek-etiket{line-height:1.5;}
.dag-gedagte-omslag img{
  width:100%; height:auto; border-radius:3px; transform:rotate(-3deg);
  box-shadow:0 14px 24px -10px rgba(0,0,0,0.6);
}
.dag-gedagte-kop{font-family:'Fraunces',serif; font-weight:600; font-size:18px; color:var(--room); margin-top:6px; line-height:1.3;}
.dag-gedagte blockquote{margin:0;}
.dag-gedagte blockquote p, .dag-gedagte blockquote li{
  font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:17px; line-height:1.5; color:var(--room);
}
.dag-gedagte blockquote ol{padding-left:22px; margin-top:8px;}
.dag-gedagte blockquote li{margin-bottom:4px;}
.dag-gedagte-bron{font-size:13px; color:rgba(244,236,226,0.72); margin-top:14px;}
.dag-gedagte-aksies{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:18px;}
.dag-gedagte-aksies .boek-knoppie{font-size:15px; padding:12px 22px; min-height:0;}
.dag-gedagte-deel{font-size:14px; font-weight:600; color:var(--koper-lig); text-decoration:underline; text-underline-offset:3px;}
.dag-gedagte-deel:hover{color:var(--room);}
@media(max-width:860px){
  .dag-gedagte{margin-top:36px;}
}
@media(max-width:480px){
  .dag-gedagte{grid-template-columns:64px 1fr; gap:16px; padding:24px 20px;}
  .dag-gedagte blockquote p, .dag-gedagte blockquote li{font-size:16px;}
}

/* Tuisblad-banier */
.boek-banier{
  display:block; background:var(--boek-vloot); color:var(--koper-lig); text-align:center;
  padding:11px 20px; font-size:14px; line-height:1.45;
}
.boek-banier strong{color:var(--room); white-space:nowrap;}
.boek-banier:hover strong{text-decoration:underline;}

@media(min-width:861px){
  .boek-held{padding:72px 0 88px;}
  .boek-held-rooster{
    grid-template-columns:0.8fr 1.2fr; column-gap:72px; text-align:left;
    grid-template-rows:1fr auto auto auto 1fr;
    grid-template-areas:"omslag ." "omslag etiket" "omslag kop" "omslag teks" "omslag .";
  }
  .boek-held-omslag{width:100%; max-width:380px; margin:0; align-self:center;}
  .boek-held-teks > p:first-child{margin-left:0;}
}
@media(max-width:860px){
  .boek-dele, .boek-twee{grid-template-columns:1fr;}
  .boek-dele > *{min-width:0;}
  .boek-kaartjies{grid-template-columns:repeat(2,1fr); gap:12px;}
  .boek-kaartjies li{padding:18px 16px;}
  .boek-kaartjies svg{width:30px; height:30px; margin-bottom:10px;}
  .boek-kaartjies p{font-size:13.5px;}
  .boek-kers{padding:32px 26px;}
  .boek-skrywer .photo-frame{max-width:300px;}
}
@media(max-width:480px){
  .boek-lys-afdeling{padding:40px 0;}
  .boek-lys-blok{padding:28px 20px;}
  .boek-knoppie{width:100%;}
  .boek-kers .btn{width:100%;}
  .boek-blok .btn{width:100%; justify-content:center;}
}

/* ===== /boek/lys — privaat lys vir Hennie en Stella ===== */
.lys-kop{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px;}
.lys-syfers{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:28px;}
.lys-syfer{background:var(--room); border-radius:16px; padding:16px 18px;}
.lys-syfer b{display:block; font-family:'Fraunces',serif; font-size:30px; color:var(--boek-vloot); line-height:1.1;}
.lys-syfer span{font-size:12.5px; color:#4A5A68; font-weight:600;}
.lys-bronne{border-collapse:collapse; font-size:14px; margin-bottom:32px; min-width:220px;}
.lys-bronne th, .lys-bronne td{text-align:left; padding:6px 14px 6px 0; border-bottom:1px solid var(--line);}
.lys-bronne td:last-child, .lys-bronne th:last-child{text-align:right;}
.lys-filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px;}
.lys-filters input[type="search"], .lys-filters select{
  padding:11px 14px; border-radius:12px; border:1.5px solid var(--line); font-family:inherit; font-size:14px; background:var(--white);
}
.lys-filters input[type="search"]{flex:1 1 220px;}
.lys-tabel-hou{overflow-x:auto;}
.lys-tabel{width:100%; border-collapse:collapse; font-size:14px;}
.lys-tabel th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:#4A5A68; padding:10px 10px 10px 0; border-bottom:2px solid var(--line);}
.lys-tabel td{padding:12px 10px 12px 0; border-bottom:1px solid var(--line); vertical-align:top;}
.lys-tabel td.lys-naam{font-weight:600; color:var(--navy);}
.lys-verwyder{
  background:none; border:none; cursor:pointer; font-family:inherit; font-size:13px;
  color:#8A2323; text-decoration:underline; text-underline-offset:3px; padding:4px 0;
}
.lys-teller{font-size:13.5px; color:#4A5A68; margin-bottom:10px;}
.lys-aanmeld{max-width:420px;}
@media(max-width:860px){
  .lys-syfers{grid-template-columns:repeat(3,1fr);}
  /* Tabel word kaartjies op 'n foon */
  .lys-tabel thead{display:none;}
  .lys-tabel, .lys-tabel tbody, .lys-tabel tr, .lys-tabel td{display:block; width:100%;}
  .lys-tabel tr{border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px;}
  .lys-tabel td{border:none; padding:3px 0;}
  .lys-tabel td[data-etiket]::before{content:attr(data-etiket) ": "; color:#5A6B78; font-size:12.5px;}
}
@media(max-width:480px){
  .lys-syfers{grid-template-columns:repeat(2,1fr);}
}

/* ===== FOOTER ===== */
footer{background:var(--navy); color:var(--sky); padding:56px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.12);}
footer h4{color:var(--white); font-size:13px; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:16px; font-family:'Inter',sans-serif; font-weight:700;}
footer ul{list-style:none;}
footer ul li{margin-bottom:10px; font-size:14px;}
footer ul li a:hover{color:var(--white);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:22px; font-size:12.5px; flex-wrap:wrap; gap:10px;}

/* ===== RESPONSIEF ===== */
@media(max-width:860px){
  nav.links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--white); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 32px 20px;
  }
  nav.links.open{display:flex;}
  nav.links a{padding:12px 0; width:100%;}
  .nav-toggle{display:block;}

  .hero-grid{grid-template-columns:1fr;}
  .daily-badge{margin:32px auto 0;}

  .ww-card{grid-template-columns:1fr;}
  .ww-meta-row{grid-template-columns:1fr;}

  .about-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
  .workshop-card{grid-template-columns:1fr; text-align:center;}
  .date-badge{justify-self:center; width:120px;}
  .reel-blok{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .video-grid{grid-template-columns:1fr;}
  .form-two{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .book-strip{flex-direction:column; align-items:flex-start;}

  .boek-grid{grid-template-columns:repeat(3,1fr); gap:36px 20px;}
  .boek-detail-grid{grid-template-columns:1fr; gap:36px;}
  .boek-omslag--groot{position:static; width:100%; max-width:300px; margin:0 auto;}
  .boek-grid > *, .boek-detail-grid > *, .mandjie-grid > *{min-width:0;}
  .nav-aksies{margin-left:auto; gap:4px;}
  .mandjie-grid{grid-template-columns:1fr; gap:40px;}
  .mandjie-opsomming{position:static;}

  /* Grid-items kry outomaties min-width:auto, wat hulle weier om
     kleiner as hul inhoud se natuurlike breedte te krimp — dit laat
     1-kolom-roosters op mobiel oor die skerm se rand oorloop. */
  .hero-grid > *, .ww-card > *, .ww-meta-row > *, .about-grid > *, .services-grid > *,
  .workshop-card > *, .reel-blok > *, .testi-grid > *, .video-grid > *, .form-two > *,
  .contact-grid > *, .footer-grid > *{
    min-width:0;
  }

  /* Hero-knoppies ("Bespreek..." / "Kontak Hennie") voel te opdringerig
     op 'n klein skerm — verberg op mobiel, elke afdeling het in elk
     geval sy eie duidelike knoppie verderop. */
  .hero-ctas{display:none;}

  /* Tuisblad-volgorde op mobiel: Hennie se foto/storie eerste, dan
     eers die werkswinkel — voel meer persoonlik op 'n klein skerm.
     Rekenaar-volgorde bly heeltemal onveranderd. */
  body.is-tuisblad main{display:flex; flex-direction:column;}
  body.is-tuisblad .hero{order:1;}
  body.is-tuisblad #oor{order:2;}
  body.is-tuisblad #werkswinkel-aftelling{order:3;}
  body.is-tuisblad #dienste{order:4;}
  body.is-tuisblad #getuienisse{order:5;}
  body.is-tuisblad #tuisblad-kontak{order:6;}
}

@media(max-width:600px){
  .boek-grid{grid-template-columns:repeat(2,1fr);}
  .boek-omslag--groot{max-width:200px;}
  .boek-detail{padding-top:28px;}
  .boek-terug{margin-bottom:24px;}
}

/* Klein selfone: twee kolomme bly, maar sonder die kort beskrywing — rustiger. */
@media(max-width:520px){
  .boek-kort{display:none;}
  .boek-titel{font-size:16.5px; margin-top:14px;}
  .boek-meta{font-size:12px;}
  .boek-prys{font-size:16px;}
  .formaat-keuse{padding:14px;}
}

@media(min-width:861px) and (max-width:1100px){
  .video-grid{grid-template-columns:repeat(2,1fr);}
  .boek-grid{grid-template-columns:repeat(3,1fr);}
  /* Sewe nav-items (sedert "Boeke") — stywer spasiëring sodat niks oorbreek nie */
  nav.links{gap:16px; font-size:13.5px; margin-left:20px;}
  nav.links a, .logo-word{white-space:nowrap;}
  .nav{padding-left:24px; padding-right:24px;}
  .nav-aksies{margin-left:14px;}
  .mandjie-grid{grid-template-columns:1fr 300px; gap:36px;}
}

/* ===== "Die boek is uit!" — /boek/lys/stuur, boodskappe, uitteken ===== */
.lys-boek-uit{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--boek-vloot); color:var(--room); border-radius:18px; padding:20px 24px; margin-bottom:28px;
}
.lys-boek-uit strong{font-family:'Fraunces',serif; font-size:22px; color:#fff;}
.lys-boek-uit p{margin:4px 0 0; font-size:14.5px; color:var(--room);}
.lys-boek-uit .btn{background:var(--koper); min-height:48px;}
.lys-boek-uit .btn:hover{background:var(--koper-donker);}
.lys-uitgeteken td{color:#7C8791;}
.lys-uitgeteken .lys-naam{color:#7C8791;}
.lys-uitgeteken-merk{display:inline-block; font-size:11.5px; font-weight:700; background:#E4E7EA; color:#4A5A68; border-radius:100px; padding:2px 10px; margin-left:6px; vertical-align:middle;}
.lys-boodskappe{margin-top:40px; border:1.5px solid var(--line); border-radius:16px; padding:6px 20px 22px;}
.lys-boodskappe summary{cursor:pointer; font-weight:700; color:var(--navy); padding:14px 0; font-size:17px;}
.lys-boodskappe-hulp{font-size:13.5px; color:#4A5A68; margin-bottom:18px;}
.lys-boodskappe textarea{width:100%; font-family:inherit; font-size:15px; line-height:1.5;}
.lys-boodskappe .form-msg ul{margin:8px 0 0 18px;}

.btn[hidden], .stuur-vordering[hidden]{display:none;} /* .btn is inline-flex en oorheers anders die hidden-kenmerk */
.stuur-terug{text-decoration:underline; text-underline-offset:3px; font-weight:600; color:var(--navy);}
.stuur-syfers{margin-top:8px;}
.stuur-slotte ul{margin:8px 0 0 18px;}
.stuur-afdeling{margin-top:40px; padding-top:28px; border-top:2px solid var(--line);}
.stuur-afdeling h2{font-size:clamp(24px,4vw,30px); color:var(--boek-vloot); margin-bottom:18px;}
.stuur-teller{font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:#5A6B78; margin-left:10px;}
.stuur-voorskou-kies{display:flex; gap:10px 14px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
.stuur-voorskou-kies select{padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); font-family:inherit; font-size:15px; background:var(--white); min-height:48px; max-width:100%;}
.stuur-onderwerp{font-weight:600; color:var(--navy); margin-bottom:12px;}
.stuur-onderwerp span{color:#5A6B78; font-weight:400;}
.stuur-iframe{width:100%; height:760px; border:1.5px solid var(--line); border-radius:14px; background:#f4ece2; display:block;}
.stuur-teksweergawe{margin:12px 0 4px; font-size:14px;}
.stuur-teksweergawe summary{cursor:pointer; color:#4A5A68;}
.stuur-teksweergawe pre{white-space:pre-wrap; word-wrap:break-word; font-family:inherit; font-size:14px; background:var(--room); border-radius:12px; padding:16px; margin-top:10px;}
.stuur-knoppies{display:flex; gap:14px; flex-wrap:wrap; margin:22px 0 10px;}
.stuur-groot{min-height:52px; font-size:16px; white-space:normal; text-align:center; justify-content:center;}
.stuur-almal{background:var(--koper);}
.stuur-almal:hover:not(:disabled){background:var(--koper-donker);}
.stuur-hulp{font-size:14px; color:#4A5A68; margin:6px 0;}
.stuur-vordering{margin-top:18px; background:var(--room); border-radius:16px; padding:18px 20px;}
.stuur-vordering progress{width:100%; height:18px; accent-color:var(--koper);}
.stuur-vordering p{margin:10px 0 0; font-weight:600; color:var(--navy);}
.stuur-mislukte{margin-top:24px; background:#F6DCDC; border-radius:16px; padding:18px 20px; color:#8A2323;}
.stuur-mislukte h3{font-size:17px; margin-bottom:8px; color:#8A2323;}
.stuur-mislukte ul{margin:0 0 14px 18px; font-size:14px;}
.stuur-fout{display:block; font-size:12.5px; opacity:0.85;}

.wa-lys{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px;}
.wa-ry{display:flex; justify-content:space-between; align-items:center; gap:14px 20px; flex-wrap:wrap; border:1.5px solid var(--line); border-radius:16px; padding:16px 18px; background:var(--white);}
.wa-ry.is-gestuur, .wa-ry.is-uitgeteken{background:#EEF0F2; border-color:#DADFE3;}
.wa-ry.is-gestuur .wa-naam, .wa-ry.is-uitgeteken .wa-naam{color:#6A7681;}
.wa-inligting{display:flex; flex-direction:column; gap:3px; min-width:0;}
.wa-naam{font-size:18px; color:var(--navy);}
.wa-nommer{font-size:15px; font-weight:600; color:#3D4C58; font-variant-numeric:tabular-nums;}
.wa-merkers{font-size:13px; color:#5A6B78;}
.wa-aksie{display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
.wa-knoppie{background:#1F8F4E; color:#fff; min-height:52px; min-width:200px; font-size:17px; justify-content:center; text-align:center;}
.wa-knoppie:hover{background:#17703d;}
.wa-ry.is-gestuur .wa-knoppie{background:#8A9A94; min-height:44px; font-size:15px;}
.wa-knoppie[aria-disabled="true"]{background:#9AA5AC; cursor:not-allowed;}
.wa-gestuur-merk{font-weight:700; color:#1F6A46; margin:0;}
.wa-slegte-nommer{background:#F6DCDC; color:#8A2323; font-weight:700; border-radius:10px; padding:10px 14px; margin:0;}
.wa-klein{display:flex; gap:16px;}
.wa-skakel{background:none; border:none; font-family:inherit; font-size:13.5px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; color:#4A5A68; padding:6px 0; min-height:32px;}
.wa-skakel--rooi{color:#8A2323;}
.wa-skakel[hidden], .wa-gestuur-merk[hidden]{display:none;}
.stuur-wa-vordering{font-size:18px; color:var(--navy);}

.uitteken-blok{text-align:center; max-width:560px; margin:0 auto;}
@media(max-width:600px){
  .stuur-iframe{height:620px;}
  .stuur-knoppies .btn, .wa-knoppie{width:100%;}
  .wa-ry{flex-direction:column; align-items:stretch;}
  .wa-aksie{align-items:stretch;}
  .wa-klein{justify-content:space-between;}
}

/* Foto van die Afrikaanse en Engelse uitgawe bo die taalkeuse */
.boek-taal-prent{display:block; width:100%; max-width:320px; height:auto; margin:4px auto 18px; border-radius:14px;}