/* ===============================
   KLEURVARIABELEN & KEYFRAMES
   =============================== */
:root{
  --h-header: 64px;
  --h-nav: 52px;

  --menu-height: 60px;
  --bar-bg: #64748b;             /* één bronwaarde */
  --bar-bg-light: #e0e7ef;
  --menu-bg: #002446;
  --menu-text: #f3f6fa;          /* één bronwaarde */

  --menu-bg-mobile: #fff;
  --menu-text-mobile: #21243d;

  --book-width: min(50vw, 420px);
  --book-ratio: 1.5;
  --book-height: calc(var(--book-width) * var(--book-ratio));
  --book-depth: calc(var(--book-width) * 0.15);

  --accent: #af4261;
  --accent2: #1c92d2;

  --bg-gradient-1: #f9fafb;
  --bg-gradient-2: #b6e0fe;
  --bg-gradient-3: #93c5fd;
  --bg-gradient-4: #d1fae5;

  --text-dark: #21243d;
  --text-body: #3a4256;
  --white: #fff;
  --black: #000;
}

/* ===============================
   ANIMATIES
   =============================== */
@keyframes gradientBG {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes fadeUp {
  from { opacity:0; transform: translateY(25px);}
  to   { opacity:1; transform: translateY(0);}
}

/* ===============================
   BASISSTIJLEN EN BODY
   =============================== */

html {
  height: 100%;
  margin: 0;
  padding: 0;
  scroll-padding-top: calc(var(--menu-height) + 8px);
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 55%, var(--bg-gradient-3) 80%, var(--bg-gradient-4) 100%);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: var(--text-body);
  min-height: 100%;
  scroll-snap-type: y mandatory;
  overflow-x: hidden;
  overflow-y: scroll;
  letter-spacing: 0.01em;
}

section{
  scroll-margin-top: calc(var(--menu-height) + 8px);
}

.book-slider { margin-top: 1rem; text-align: center; }
.book-slider input[type="range"] { width: 60%; max-width: 320px; }

/* alleen zichtbaar bij focus, wel bruikbaar voor hulpsoftware */
.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link{
  position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus{
  position: static; width: auto; height: auto; padding: .5rem .75rem; border-radius: .5rem;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

/* minder beweging respecteren */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ===============================
   HEADER EN TITELBALK
   =============================== */
.top-header{
  position:fixed; top:0; left:0; right:0; z-index:1101;
  height:var(--menu-height); display:flex; align-items:center; justify-content:center; gap:.7rem;
  padding:0 1rem; background:rgba(224,231,239,.9); backdrop-filter:blur(6px);
}

.top-header img {
  height: 48px;
  vertical-align: middle;
  margin-right: 0.7rem;
  border-radius: 20%;
}
.top-header h1 {
  display: inline-block;
  font-size: 2.3rem;
  margin: 0;
  font-weight: 700;
  color: var(--text-dark);
  vertical-align: middle;
  letter-spacing: 0.01em;
}



/* hamburger icoon */
.menu-icon span,
.menu-icon::before,
.menu-icon::after{
  content:"";
  display:block;
  height:3px;
  width:100%;
  background:#002446;
  border-radius:2px;
  transition: transform .25s, opacity .25s; /* top verwijderd */
}
/* animatie naar kruisje wanneer open */
.menu-toggle:checked + .menu-icon span{ opacity:0; }
.menu-toggle:checked + .menu-icon::before{ transform:translateY(10px) rotate(45deg); }
.menu-toggle:checked + .menu-icon::after{ transform:translateY(-10px) rotate(-45deg); }


/* ===============================
   NAVIGATIE MENUBALK
   =============================== */
.main-nav {
  position: fixed;
  top: var(--menu-height);
  left: 0;
  right: 0;
  z-index: 1100;                          /* onder de header met 1101 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  padding: 0.5rem 2rem;
  background: var(--bar-bg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  border-radius: 0 0 2rem 2rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  transition: background .28s cubic-bezier(.77,0,.175,1),
              box-shadow .28s cubic-bezier(.77,0,.175,1);
}

.main-nav a {
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--menu-text);
  text-decoration: none;
  padding: .5rem 1rem;
  border-radius: 1em;
  position: relative;
  outline: none;
  transition: color .18s, background .18s, box-shadow .17s, transform .15s;
}
.main-nav a:hover, .main-nav a:focus {
  color: var(--accent);
  background: rgba(243,246,250,0.13);
  box-shadow: 0 2px 12px rgba(175,66,97,0.13);
}
.main-nav a:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

/* ===============================
   3D BOEK EN COVER STIJLEN
   =============================== */
.book-3d {
  width: var(--book-width);
  height: var(--book-height);
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);
  margin: 0 auto;
  transform-origin: 50% 50%;
  transform: rotateY(28deg) rotateX(10deg);
}
.book-face {
  position: absolute;
  top: 50%; left: 50%;
  transform-style: preserve-3d;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(44,44,44,0.10);
}
.front {
  width: var(--book-width);
  height: var(--book-height);
  background-image: url('images/cover.jpg');
  background-color: var(--white);
  transform: translate(-50%, -50%) translateZ(calc(var(--book-depth) / 2));
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.cover-tekst {
  position: absolute;
  top: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}

.cover-titel {
white-space: nowrap;


  color: var(--white);
  line-height: 1.16;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0px  2px 0 #000,
     2px  0px 0 #000,
    -2px  0px 0 #000,
     0px -2px 0 #000;
  margin-bottom: 0.65rem;
  letter-spacing: 0.04em;
  padding: 0.12em 0.25em;
  border-radius: 0.25em;
  display: inline-block;
}
.cover-subtitel {
  font-size: 1.0rem;
  font-weight: 500;
  color: var(--white);
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  opacity: 0.92;
  letter-spacing: 0.025em;
  margin-top: 0.05em;
  padding: 0.09em 0.19em;
  border-radius: 0.16em;
  display: inline-block;
}
.cover-auteur {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  text-align: center;
  font-size: 1.04rem;
  color: var(--white);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  padding: 0.18em 0.7em;
  border-radius: 0.2em;
  opacity: 0.98;
  pointer-events: none;
}

.back {
  width: var(--book-width);
  height: var(--book-height);
  background-image: url('images/back.png');
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--book-depth) / 2));
  z-index: 2;
}

/* het achtervlak staat fysiek achter, en mag zichtbaar zijn */
.book-face.back {
  transform: translate(-50%, -50%) rotateY(180deg)
             translateZ(calc(var(--book-depth) / 2 + 0.6px));
  position: absolute;
  overflow: hidden;
}

/* binnenlaag draait terug zodat tekst normaal leesbaar is */
.back-inner {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  transform-style: flat;
  display: flex;
  justify-content: center;
  align-items: center;
}


.back-overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 16px;
  bottom: 16px;                          
  padding: 1.2rem 1.3rem;
  border-radius: 16px;
  background: rgba(100,100,100,0.5);
  color: #fff;
  box-sizing: border-box;

  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);

}

/* typografie in overlay */
.back-title {
  margin: 0 0 .5rem 0;
  font: 700 0.80rem 'Inter', Arial, sans-serif;
  color: #fff;
  text-align: left;
}

.back-blurb,
.back-meta-text {
  margin: 0 0 .6rem 0;
  font-size: .60rem;
  line-height: 1.55;
  color: #f5f7fa;
}

.book-face.right {
  width: var(--book-depth);
  height: var(--book-height);
  background: repeating-linear-gradient(
    to right,           /* verticale lijnen */
    #faf7ef 0px,
    #faf7ef 2px,
    #f1ede4 3px,
    #faf7ef 5px
  );
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--book-width) / 2));
  z-index: 1;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.12);
}











.right {
  width: var(--book-depth);
  height: var(--book-height);
  background: #bbb;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--book-width) / 2));
  z-index: 1;
}
.left {
  width: var(--book-depth);
  height: var(--book-height);
  background-image: url('images/spinal.jpg?text=Rug');
  background-size: cover;
  background-color: #ccc;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--book-width) / 2));
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: absolute;
}
.spine-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.13em;
  text-align: center;
  width: 100%;
  text-shadow:
    -1.5px -1.5px 0 #000,
     1.5px -1.5px 0 #000,
    -1.5px  1.5px 0 #000,
     1.5px  1.5px 0 #000;
  background: rgba(0,0,0,0.15);
  padding: 0.18em 0.16em;
  border-radius: 0.14em;
  box-sizing: border-box;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.top {
  width: var(--book-width);
  height: var(--book-depth);
  background: #eee;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--book-height) / 2));
  z-index: 1;
}
.bottom {
  width: var(--book-width);
  height: var(--book-depth);
  background: #eaeaea;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--book-height) / 2));
  z-index: 1;
}
.pages {
  position: absolute;                /* toegevoegd */
  left: 50%;
  top: 50%;
  width: calc(var(--book-width) - 10px);
  height: calc(var(--book-height) - 12px);
  background: repeating-linear-gradient(
    90deg,
    #faf7ef 0px, #f5f3ed 2px, #faf7ef 4px, #faf7ef 24px
  );
  border-radius: 2.5px;
  box-shadow: 0 0 10px rgba(130,130,120,0.12) inset;
  transform: translate(-50%, -50%)
             translateZ(calc(var(--book-depth) / 2 - 4px));
  z-index: 2;
}

/* ===============================
   SECTIES & CONTENT
   =============================== */
section {
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background: transparent;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(.77,0,.175,1);
}
section.visible { opacity: 1; }
.backdrop {
      max-width:900px; margin:0 auto; background:rgba(255,255,255,0.9);
      border-radius:1rem; padding:2rem;
}
h1, h2 {
  font-family: 'Inter', sans-serif;

  text-align: center;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 2rem;
  margin-top: 0;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
h2 { font-size: 1.65rem; }
p {
  line-height: 1.6;
  font-size: 1.00rem;
  margin-bottom: 1.4rem;
  color: var(--text-body);
  font-weight: 400;
}
.cta-btn {
  display: inline-block;
  padding: 0.75em 2em;
  font-size: 1.14em;
  font-weight: 600;
  background: linear-gradient(90deg, var(--accent) 65%, var(--accent2) 100%);
  color: var(--white);
  border-radius: 1.8em;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(44,44,44,0.12);
  transition: transform 0.15s, box-shadow 0.15s;
  border: none;
  cursor: pointer;
  margin-top: 1.5em;
  letter-spacing: 0.01em;
  text-shadow:
    0 1px 8px rgba(44,44,44,0.14),
    0 1px 1px rgba(0,0,0,0.15);
}
.cta-btn:hover, .cta-btn:focus {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 32px rgba(175,66,97,0.17);
  background: linear-gradient(90deg, var(--accent2) 0%, var(--accent) 100%);
  outline: none;
}

/* ===============================
   INDIVIDUELE SECTIEKLEUREN
   =============================== */
#intro     { background: #f2fcfe; }
#fragment  { background: #fffbe9; }
#Bookorder { background: #e6f1fa; }


/* Individual sections with correct offset */
section#intro,
section#resultaten,
section#foto,
section#agenda,
section#sponsoring,
section#contact {
  scroll-margin-top: calc(var(--menu-height) - 10px); /* fine-tune small gap */ /* offset only nav height */
}


/* ===============================
   SCROLLBAR STIJL
   =============================== */
::-webkit-scrollbar       { width: 12px; background: #eee; }
::-webkit-scrollbar-thumb { background: #d8dde5; border-radius: 6px; }

/* ===============================
   RESPONSIVE MENU & HEADER (MOBIEL)
   =============================== */
@media (max-width: 700px) {
  .cover-titel { font-size: 0.65rem; padding: 0.05em 0.12em; }
  .cover-subtitel { font-size: 0.85rem; padding: 0.04em 0.07em; }
  .cover-auteur { font-size: 0.64rem; padding: 0.03em 0.09em; }
  .spine-text { font-size: 0.50rem; padding: 0.1em 0.07em; }
  .backdrop { padding: 1rem 0.2rem; max-width: 98vw; }
  section {
    padding: 2rem 1rem;
  }

  h1, h2 {
    font-size: 1.5rem;
  }

  .top-header {
    padding: 0.6rem 0.5rem 0.4rem;
    gap: 0.6rem;
  }
  .top-header img {
    height: 40px;
    margin-right: 0.3rem;
  }
  .top-header h1 {
    font-size: 1.15rem;
  }
 
  .main-nav{ display:none; flex-direction:column; align-items:flex-start; padding:1rem; }
  .menu-toggle:checked ~ .main-nav{ display:flex; }

  .main-nav.open { display: flex; }
  .main-nav a {
    color: var(--menu-text-mobile);
    padding: 0.75em 1em;
    font-size: 1.07rem;
    border-radius: 1.2em;
  }

  .menu-icon {
      width: 30px;
      height: 22px;       /* ← vaste hoogte voor het icoon zelf */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
      padding: 0.3rem 0;  /* optioneel: iets ruimte boven/onder */
  }

  


  
  .main-nav.open { display: flex; }

  /* voorkom dat ankers onder de balk verdwijnen bij scrollen */
  html { scroll-padding-top: calc(var(--header-h) + 8px); }



  .back-overlay { width: 92%; padding: .9rem 1rem; border-radius: 14px; }
  .back-title { font-size: 0.70em; }
  .back-blurb, .back-meta-text { font-size: .95rem; }


  
  /* skip link zichtbaar maken bij focus */
  .skip-link {
    position: absolute; left: -999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
  }
  .skip-link:focus {
    position: static; width: auto; height: auto;
    padding: .5rem .75rem; border-radius: .5rem;
    background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.15);
  }
    



  #boekweergave {
    display: flex;
    align-items: flex-start;  /* zet aan de bovenkant van de sectie */
    justify-content: center;
    padding-top: 4rem;        /* pas dit aan voor afstand tot bovenkant */
  }



  .book-slider {
    margin-top: 1.5rem;
    text-align: center;
  }

  .book-slider input[type="range"] {
    width: 60%;
    max-width: 340px;
  }



  /* optie: maak de slider vast onder het boek bij scrollen */
  .book-slider.sticky {
    position: sticky;
    bottom: 1rem; /* blijft laag in beeld plakken */
    z-index: 5;
  }



  /* checkbox verborgen maar toegankelijk via label */
  .menu-toggle {
    position: absolute;
    opacity: 0;        /* volledig transparant */
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
  }

  /* bewaar 3D context */
  .book-3d { transform-style: preserve-3d; }

  /* voorkom doorschemeren op alle vlakken behalve de achterkant */
  .book-face:not(.back) {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }


  .book-3d { transform-style: preserve-3d; }

  .book-face { 
    backface-visibility: hidden; 
  }

}



.book-wrapper { perspective: 1600px; }
.book-3d { transform-style: preserve-3d; }
.book-face:not(.back) { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.book-face.back { backface-visibility: visible; -webkit-backface-visibility: visible; }



/* respecteer minder beweging */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  body { background-size: auto; }

  /* offset zodat ankers niet onder de balk vallen */
section{ scroll-margin-top: calc(var(--menu-height) + 40px); }

    /* respecteer minder beweging */
    @media (prefers-reduced-motion: reduce){
      *{ animation:none !important; transition:none !important; }
    }
}