/* Gedeeld ontwerpsysteem voor de artikelpagina's (sterrenbeelden, geboortehoroscoop,
   Human Design, cadeaukaart-achtige teksten). Eén bestand, zodat een aanpassing aan
   de huisstijl niet in veertien pagina's hoeft te worden nagelopen. */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --cream: #f7f2ea;
  --navy: #2d2440;
  --navy-2: #241c34;
  --gold: #b8985f;
  --gold-2: #c4984a;
  --gold-light: #d4b978;
  --text: #4a4a4a;
  --text-light: #7a7a7a;
  --white: #ffffff;
  --line: #e8e2d8;
}

html { scroll-behavior:smooth; }
body { font-family:'Raleway', sans-serif; background:var(--cream); color:var(--text);
  line-height:1.75; overflow-x:hidden; font-size:16px; }

/* Navigatie */
nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:16px 40px;
  display:flex; justify-content:space-between; align-items:center;
  transition:background .3s, box-shadow .3s; }
nav.scrolled { background:rgba(53,42,57,.95); box-shadow:0 2px 20px rgba(0,0,0,.2); backdrop-filter:blur(10px); }
.nav-logo { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.3rem;
  color:var(--gold-2); text-decoration:none; display:flex; align-items:center; gap:10px; }
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a { color:rgba(255,255,255,.85); text-decoration:none; font-size:.82rem;
  letter-spacing:.3px; font-weight:500; transition:color .2s; }
.nav-links a:hover { color:var(--gold-2); }
.nav-cta { background:var(--gold-2); color:var(--navy); padding:10px 24px; border-radius:40px;
  text-decoration:none; font-weight:600; font-size:.85rem; white-space:nowrap; }
.nav-cta:hover { background:var(--gold-light); }
.nav-toggle { display:none; background:none; border:0; font-size:22px; line-height:1;
  color:rgba(255,255,255,.85); cursor:pointer; padding:6px 8px; }

/* Kop van het artikel, donker met sterrenhemel */
.artikel-hero { background:linear-gradient(170deg,#1a1420 0%, var(--navy) 45%, #2a2040 100%);
  padding:150px 24px 70px; text-align:center; position:relative; overflow:hidden; }
.artikel-hero::before { content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.7), transparent),
              radial-gradient(1px 1px at 65% 22%, rgba(255,255,255,.5), transparent),
              radial-gradient(1.5px 1.5px at 78% 62%, rgba(255,255,255,.6), transparent),
              radial-gradient(1px 1px at 33% 74%, rgba(255,255,255,.45), transparent);
  opacity:.8; }
.artikel-hero > * { position:relative; z-index:2; }
.artikel-hero .kruimels { font-size:.78rem; color:rgba(255,255,255,.45); margin-bottom:22px; }
.artikel-hero .kruimels a { color:var(--gold-2); text-decoration:none; }
.artikel-hero .kruimels a:hover { text-decoration:underline; }
.artikel-hero .sign-symbol { font-size:2.8rem; color:var(--gold-2); margin-bottom:12px; line-height:1; }
.artikel-hero h1 { font-family:'Cormorant Garamond',serif; font-size:2.7rem; font-weight:400;
  color:var(--white); line-height:1.22; max-width:760px; margin:0 auto 14px; }
.artikel-hero .subtitle { font-size:.98rem; color:rgba(255,255,255,.6); letter-spacing:.4px; }

/* Artikeltekst */
.article { max-width:720px; margin:0 auto; padding:64px 24px 80px; }
.article h2 { font-family:'Cormorant Garamond',serif; font-size:1.75rem; font-weight:400;
  color:var(--navy); margin:44px 0 12px; line-height:1.3; }
.article h3 { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:500;
  color:var(--navy); margin:32px 0 8px; }
.article p { margin-bottom:18px; }
.article ul, .article ol { margin:0 0 20px 22px; }
.article li { margin-bottom:8px; }
.article a { color:var(--gold); }
.article blockquote { border-left:2px solid var(--gold-2); padding:8px 0 8px 22px; margin:28px 0;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.2rem; color:var(--navy); }
.article table { width:100%; border-collapse:collapse; margin:20px 0 28px; font-size:.92rem; }
.article th, .article td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); }
.article th { color:var(--navy); font-weight:600; }

/* Veelgestelde vragen. Bewust met <details>, dan werkt het ook zonder javascript. */
.vragen { margin:40px 0 8px; }
.vragen details { border-bottom:1px solid var(--line); padding:20px 0; }
.vragen details:first-of-type { border-top:1px solid var(--line); }
.vragen summary { font-weight:600; font-size:1.02rem; color:var(--navy); cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.vragen summary::-webkit-details-marker { display:none; }
.vragen summary::after { content:""; width:9px; height:9px; border-right:2px solid var(--gold-2);
  border-bottom:2px solid var(--gold-2); transform:rotate(45deg); flex-shrink:0; margin-top:6px;
  transition:transform .25s; }
.vragen details[open] summary::after { transform:rotate(-135deg); margin-top:10px; }
.vragen details p { margin:12px 0 0; color:var(--text); }

/* Bestelblok */
.cta-box { background:linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 100%);
  color:var(--white); padding:44px 30px; border-radius:14px; text-align:center; margin:48px 0; }
.cta-box h3 { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:400;
  color:var(--white); margin:0 0 12px; }
.cta-box p { color:rgba(255,255,255,.68); margin-bottom:24px; }
.btn { display:inline-block; padding:15px 32px; border-radius:40px; text-decoration:none;
  font-weight:600; font-size:.88rem; letter-spacing:.3px; transition:all .3s;
  background:var(--gold-2); color:var(--navy); }
.btn:hover { background:var(--gold-light); }
.btn-tweede { background:transparent; color:var(--gold-2); border:1px solid var(--gold-2); margin-left:10px; }
.btn-tweede:hover { background:rgba(196,152,74,.12); color:var(--gold-light); }

/* Verwante links */
.related { border-top:1px solid var(--line); padding-top:34px; margin-top:48px; }
.related h3 { font-family:'Cormorant Garamond',serif; font-weight:400; color:var(--navy);
  margin:0 0 18px; font-size:1.35rem; }
.related-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(148px,1fr)); gap:10px; }
.related-grid a { display:block; padding:11px 14px; background:var(--white); border:1px solid var(--line);
  border-radius:10px; text-decoration:none; color:var(--text); font-size:.88rem; text-align:center;
  transition:all .2s; }
.related-grid a:hover { border-color:var(--gold-2); color:var(--navy); }
.related-grid a.current { background:var(--gold-2); border-color:var(--gold-2); color:var(--navy);
  font-weight:600; pointer-events:none; }
.meer { margin-top:36px; font-size:.92rem; }
.meer a { color:var(--gold); text-decoration:none; }
.meer a:hover { text-decoration:underline; }

/* Voettekst */
footer { background:#0f0d12; padding:44px 24px; text-align:center; }
.footer-logo { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.2rem;
  color:var(--gold-2); margin-bottom:12px; }
.footer-tagline { font-size:.85rem; color:rgba(255,255,255,.45); margin-bottom:20px; }
.footer-links { display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin-bottom:20px; }
.footer-links a, .footer-links button { color:rgba(255,255,255,.55); text-decoration:none;
  font-size:.82rem; background:none; border:0; cursor:pointer; font-family:inherit; padding:0; }
.footer-links a:hover, .footer-links button:hover { color:var(--gold-2); }
.footer-text { font-size:.8rem; color:rgba(255,255,255,.25); }

@media(max-width:900px){
  .nav-toggle { display:block; }
  .nav-links { display:none; }
  .nav-links.open { display:flex !important; flex-direction:column; position:absolute; top:100%;
    left:0; right:0; background:var(--cream); padding:14px 22px; gap:4px;
    box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:200; }
  .nav-links.open a { padding:10px 0; color:var(--navy); }
  .artikel-hero { padding:120px 20px 56px; }
  .artikel-hero h1 { font-size:1.95rem; }
  .article { padding:48px 20px 64px; }
  .related-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:600px){
  nav { padding-left:16px; padding-right:16px; gap:8px; }
  .nav-logo { font-size:.92rem; gap:6px; }
  .nav-logo img { height:20px; width:20px; }
  .nav-cta { font-size:.72rem; padding:9px 14px; }
  .nav-toggle { padding:4px 6px; }
  .cta-box { padding:34px 20px; }
  .btn-tweede { margin:12px 0 0; display:block; }
  .related-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:380px){
  .nav-logo { font-size:.82rem; }
  .nav-cta { font-size:.68rem; padding:8px 11px; }
  /* Twee kolommen komen hier niet onder 330px, want "Geboortehoroscoop" is een lang
     woord dat niet afbreekt. Op een scherm van 320px rekte de layout daardoor op naar
     350px en werd de hele pagina iets uitgezoomd. */
  .related-grid { grid-template-columns:1fr; }
}