@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Caveat-500.woff2') format('woff2');}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Caveat-700.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Nunito-400.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Nunito-600.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Nunito-700.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/Nunito-800.woff2') format('woff2');}
@font-face{font-family:'Rubik Dirt';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/RubikDirt.woff2') format('woff2');}
:root{
    --teal:#1f7a6b; --teal-d:#155a4f; --teal-dd:#17604f;
    --red:#c85a3a;  --red-d:#8f3a22;
    --ink:#1c2a29;  --cream:#fffdf5; --paper:#f3f0e2; --gold:#ffd36b;
    --body:#2f3b3a; --muted:#3d4a49;
  }

  html,body{ margin:0; padding:0; }
  body{
    font-family:'Nunito', system-ui, sans-serif;
    color:var(--body);
    background:var(--paper);
  }
  a{ color:var(--teal); text-decoration:none; }
  a:hover{ color:var(--teal-d); }

  /* cap all container widths to ~1200px, keep fluid below */
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl{ max-width:1200px; }

  /* readable line-length on desktop; released to full width when stacked */
  .mw{ max-width:var(--mw, 480px); }

  .sketch{ font-family:'Rubik Dirt','Nunito',sans-serif; font-weight:400; color:var(--ink); }
  .hand{ font-family:'Caveat', cursive; }

  /* graph-paper background for open sections */
  .paper-bg{
    background-color:var(--paper);
    background-image:linear-gradient(#d8e0cf 1px, transparent 1px),
                     linear-gradient(90deg, #d8e0cf 1px, transparent 1px);
    background-size:26px 26px;
  }

  /* "De boeken" + "Avonturen van jonge helden" share one antique bridges-map,
     kept very subtle (~10%) by a 90% cream wash laid over it */
  .boeken-bg{
    background-color:var(--paper);
    background-image:linear-gradient(rgba(243,240,226,.9), rgba(243,240,226,.9)), url('../../img/boeken_map.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }

  /* washi-tape accent */
  .tape{ position:absolute; width:96px; height:26px;
    background:rgba(230,215,120,.55); border:1px solid rgba(180,160,80,.4); z-index:2; }

  /* buttons with the little 3D drop */
  .btn-3d{ display:inline-block; border:0; font-weight:800; line-height:1.2; }
  .btn-teal{ background:var(--teal); color:#fff; border-radius:26px; padding:14px 26px; box-shadow:0 4px 0 var(--teal-d); }
  .btn-teal:hover{ background:var(--teal-d); color:#fff; }
  .btn-red{ background:var(--red); color:#fff; border-radius:22px; padding:11px 22px; box-shadow:0 3px 0 var(--red-d); }
  .btn-red:hover{ background:var(--red-d); color:#fff; }
  .btn-gold{ background:var(--gold); color:var(--ink); border-radius:26px; padding:15px 30px; box-shadow:0 4px 0 #c99e30; }
  .btn-gold:hover{ background:#f4c752; color:var(--ink); }

  /* Accordeon (weetjes): wat meer ruimte onder elk antwoord zodat de
     volgende vraag niet te dicht volgt. */
  .wp-block-accordion-panel{ padding-bottom:30px; }

  /* Core knopblok (wp-block-button): standaard witte, leesbare tekst op de
     gekleurde achtergrond. De generieke teal linkkleur/onderlijning van het
     thema mag niet op knoppen slaan. Kies je in de editor toch een eigen
     tekstkleur (has-text-color), dan blijft die leidend. */
  .wp-block-button__link{ text-decoration:none; }
  .wp-block-button__link:not(.has-text-color),
  .wp-block-button__link:not(.has-text-color):hover{ color:#fff; }
  .content-panel .entry-content .wp-block-button__link{ text-decoration:none; }
  .content-panel .entry-content .wp-block-button__link:not(.has-text-color),
  .content-panel .entry-content .wp-block-button__link:not(.has-text-color):hover{ color:#fff; }

  /* ---------- HEADER (double height) ---------- */
  .site-header{ background:var(--cream); border-bottom:3px dashed #bcae7e; min-height:132px; display:flex; align-items:center; }
  .site-header .navbar{ width:100%; }
  .site-header .navbar-brand{ display:flex; flex-direction:column; line-height:1.05; padding:0; }
  .brand-name{ font-size:56px; color:var(--ink); }
  .brand-sub{ font-size:24px; color:var(--red); margin-top:2px; transform:rotate(-2deg); align-self:flex-start; }
  .site-header .nav-link{ font-weight:700; font-size:16px; letter-spacing:.04em; text-transform:uppercase; color:var(--body); }
  .site-header .nav-link:hover{ color:var(--teal); }
  .site-header .btn-red{ text-transform:uppercase; letter-spacing:.04em; }

  /* hoofdnavigatie: mobiel wat verticale ruimte, desktop compact zodat alle
     items (incl. Nieuws) op één lijn passen */
  .vangas-primary-nav{ gap:.5rem; }
  @media (min-width: 992px){
    .site-header .vangas-primary-nav{ column-gap:.8rem; row-gap:0; }
    .site-header .vangas-primary-nav .nav-link{ padding-left:.4rem; padding-right:.4rem; letter-spacing:.03em; }
  }

  /* ---------- HERO ---------- */
  .kicker{ font-size:39px; color:var(--red); transform:rotate(-2deg); display:inline-block; }
  .hero h1{ font-size:56px; line-height:1.02; margin:0; }
  .hero .lead-p{ font-size:18px; line-height:1.55; font-weight:600; color:var(--muted); max-width:460px; }
  .covers{ position:relative; display:flex; justify-content:center; gap:18px; padding-top:10px; }
  .cover-shot{ background:#fff; padding:6px; box-shadow:0 10px 22px rgba(40,60,50,.28); display:block; }

  /* covers appear once: start upright + small, zoom in and tilt to their side, then stop */
  @keyframes coverIn-left{
    from{ opacity:0; transform:rotate(0deg) scale(.6); }
    to{   opacity:1; transform:rotate(-4deg) scale(1); }
  }
  @keyframes coverIn-right{
    from{ opacity:0; transform:rotate(0deg) scale(.6); }
    to{   opacity:1; transform:rotate(5deg) scale(1); }
  }
  .covers > div:nth-child(1){ animation:coverIn-left  .9s cubic-bezier(.2,.7,.25,1) both; }
  .covers > div:nth-child(2){ animation:coverIn-right .9s cubic-bezier(.2,.7,.25,1) .15s both; }
  @media (prefers-reduced-motion: reduce){
    .covers > div:nth-child(1),
    .covers > div:nth-child(2){ animation:none; }
  }

  /* ---------- STRIP ---------- */
  .strip{ background:var(--ink); color:var(--paper); }
  .strip .hand{ font-size:30px; }
  /* the ✦ sits between two words with equal spacing left and right */
  .strip-list li:not(:last-child)::after{ content:"✦"; margin:0 .55em; }

  /* ---------- BOEKEN ---------- */
  .book-card{ position:relative; background:var(--cream); border:2px solid #cdbf8f;
    border-radius:10px; padding:22px; box-shadow:0 6px 0 #d8cfa6; height:100%; }
  .book-card img{ width:135px; height:auto; border-radius:3px; box-shadow:0 6px 14px rgba(40,60,50,.25); }
  .book-badge{ position:absolute; top:-16px; right:16px; font-size:20px; color:#fff;
    padding:2px 14px; border-radius:14px; }
  /* titel + ondertitel als één klikbare link (behoudt de eigen kleuren) */
  .book-card-titlelink{ display:flex; flex-direction:column;
    color:inherit; text-decoration:none; }
  /* ondertitel dichter bij de titel: strakke regelhoogte op de titel +
     kleine correctie voor de loze ruimte boven het Caveat-lettertype */
  .book-card-titlelink h3{ line-height:1.05; }
  .book-card-titlelink p{ margin-top:-4px; }
  .book-card-titlelink:hover h3{ color:var(--teal); }

  /* brede kaart (jeugdboeken-archief): volledige breedte, grotere cover */
  .book-card--breed{ padding:30px 34px; gap:1.75rem; }
  .book-card--breed .boek-cover-breed{ flex:0 0 auto; display:block; }
  .book-card--breed img{ width:220px; }            /* groter dan de homepage (135px) */
  .book-card--breed h3{ font-size:40px; }
  /* meer ademruimte tussen cover en tekst op grotere schermen */
  @media (min-width: 768px){
    .book-card--breed{ column-gap:3.5rem; padding-right:44px; }
  }
  /* nieuwskaart: liggende uitgelichte afbeelding, wat breder dan een boekcover */
  .book-card--breed .nieuws-cover{ flex:0 0 auto; display:block; }
  .book-card--breed .nieuws-cover img{ width:300px; border-radius:6px; }
  @media (max-width: 767.98px){
    .book-card--breed .nieuws-cover img{ width:100%; max-width:340px; }
  }
  @media (max-width: 767.98px){
    .book-card--breed{ padding:24px 22px; }
    .book-card--breed img{ width:200px; }
    .book-card--breed h3{ font-size:32px; }
  }

  /* ---------- IN DE PERS (boek-detail) ---------- */
  .pers{ margin-top:52px; }
  .pers h2{ font-size:34px; margin-bottom:22px; }
  .pers-lijst{ display:grid; gap:22px; }
  @media (min-width: 768px){ .pers-lijst{ grid-template-columns:1fr 1fr; } }
  .pers-quote{
    position:relative; margin:0; background:var(--cream);
    border:2px solid #cdbf8f; border-radius:12px; box-shadow:0 5px 0 #d8cfa6;
    padding:26px 28px 22px;
  }
  .pers-quote::before{
    content:"\201C"; position:absolute; top:6px; left:14px;
    font-family:'Rubik Dirt','Nunito',sans-serif; font-size:64px; line-height:1;
    color:var(--teal); opacity:.22;
  }
  .pers-quote blockquote{
    margin:0; padding-left:26px; font-size:16.5px; line-height:1.6;
    font-weight:600; color:var(--body);
  }
  .pers-bron{
    margin-top:12px; padding-left:26px; font-family:'Caveat', cursive;
    font-size:24px; color:var(--red);
  }
  .pers-bron::before{ content:"— "; }
  .pers-bron a{ color:var(--red); text-decoration:none; border-bottom:2px solid rgba(200,90,58,.35); }
  .pers-bron a:hover{ color:var(--red-d); border-bottom-color:var(--red-d); }

  /* ---------- PERSONAGES ---------- */
  .personages-box{ background:var(--cream); border:2px dashed var(--teal); border-radius:12px; padding:32px 34px; }
  .polaroid{ position:relative; background:#fff; padding:8px 8px 4px; box-shadow:0 8px 16px rgba(40,60,50,.22); }
  .polaroid img{ display:block; }

  /* ---------- VOOR SCHOLEN ---------- */
  .scholen{ background:var(--teal); color:#eef7f3; }
  .scholen h2{ color:#fff; font-size:44px; line-height:1.03; }
  .scholen .tag{ font-size:14px; font-weight:700; background:var(--teal-dd); padding:9px 16px; border-radius:20px; display:inline-block; }
  .scholen .photo{ position:relative; background:#fff; padding:10px 10px 6px; box-shadow:0 12px 28px rgba(0,0,0,.3); transform:rotate(-2deg); }

  /* ---------- OVER KURT ---------- */
  .kurt-photo{ position:relative; background:#fff; padding:10px 10px 6px; box-shadow:0 10px 22px rgba(40,60,50,.2); transform:rotate(-2deg); }

  /* ---------- FOOTER (double height) ---------- */
  .site-footer{ background:var(--ink); color:#a9bdb7; padding:72px 0; }
  .site-footer a{ color:#a9bdb7; font-weight:600; font-size:14px; }
  .site-footer a:hover{ color:var(--gold); }
  /* huidige pagina oplichten in het footermenu */
  .site-footer .current-menu-item > a,
  .site-footer .current_page_item > a{ color:var(--gold); font-weight:700; }

  /* when columns stack (below lg): hero content spans the full width,
     and the photos get a little breathing room left and right */
  @media (max-width: 991.98px){
    .hero .lead-p, .mw{ max-width:none; }       /* titles + text span full width */
    .br-lg{ display:none; }                      /* let headings wrap naturally */
    .hero .btn-teal{ display:block; width:100%; text-align:center; }
    .photo, .kurt-photo{ max-width:80%; margin-left:auto; margin-right:auto; margin-bottom:30px; }

    /* keep the brand + hamburger fixed when the menu opens:
       give the navbar a constant vertical padding instead of centering it
       inside the header, and drop the open menu below without shifting row 1 */
    .site-header{ align-items:flex-start; min-height:0; }
    .site-header .navbar{ padding-top:22px !important; padding-bottom:22px !important; }
    .site-header .navbar > .container{ align-content:flex-start; }
  }

  /* smaller headings on phones */
  @media (max-width: 767.98px){
    .hero h1{ font-size:40px; }
    .kicker{ font-size:30px; }
    .scholen h2{ font-size:34px; }
    .brand-name{ font-size:40px; }
    .brand-sub{ font-size:20px; }

    /* wider side padding inside the viewport */
    .container{
      padding-left:calc(var(--bs-gutter-x) * 1);
      padding-right:calc(var(--bs-gutter-x) * 1);
    }

    /* hero CTA: normal width (not full-width) + breathing room below */
    .hero .btn-teal{ display:inline-block; width:auto; text-align:center; margin-bottom:25px; }
  }

  /* ---------- STANDAARDPAGINA (page.php) ---------- */
  /* de ruitjes-sectie groeit mee zodat de achtergrond het hele scherm vult,
     ook bij weinig tekst, met de groene balk + footer eronder.
     overflow:clip knipt de foto-overloop weg aan de schermrand (geen h-scroll). */
  .page-paper{ flex:1 0 auto; overflow:clip; }

  /* crème contentkaart, zelfde stijl als de boekcards op de homepage */
  .content-panel{
    background:var(--cream);
    border:2px solid #cdbf8f;
    border-radius:14px;
    box-shadow:0 6px 0 #d8cfa6;
    padding:40px 46px;
  }
  .content-panel .page-kicker{ font-size:26px; color:var(--red); transform:rotate(-2deg); display:inline-block; }
  .content-panel .entry-title{ font-size:42px; margin:.1em 0 .6em; }
  .content-panel .entry-content{ font-size:17px; line-height:1.7; font-weight:600; color:var(--muted); }
  .content-panel .entry-content > :first-child{ margin-top:0; }
  .content-panel .entry-content h2{ font-family:'Rubik Dirt','Nunito',sans-serif; font-weight:400; color:var(--ink); font-size:30px; margin:1.5em 0 .4em; }
  .content-panel .entry-content h3{ font-family:'Rubik Dirt','Nunito',sans-serif; font-weight:400; color:var(--ink); font-size:23px; margin:1.3em 0 .4em; }
  .content-panel .entry-content a{ color:var(--teal); text-decoration:underline; }
  .content-panel .entry-content a:hover{ color:var(--teal-d); }
  .content-panel .entry-content img{ border-radius:8px; }
  .content-panel .entry-content blockquote{
    border-left:4px solid var(--teal); margin:1.4em 0; padding:.2em 0 .2em 1.2em; color:var(--body);
  }
  /* tekst + foto naast elkaar; tekst op leesbreedte, foto rechtsboven */
  .content-panel .panel-inner{ display:flex; gap:44px; align-items:flex-start; }
  .content-panel .panel-body{ flex:1 1 auto; min-width:0; max-width:680px; }
  .content-panel .panel-figure{ flex:0 0 300px; margin:4px 0 0 auto; }

  /* ingelijste foto met plakband (uit de uitgelichte afbeelding) */
  .taped-photo{ position:relative; background:#fff; padding:10px 10px 8px;
    box-shadow:0 12px 26px rgba(40,60,50,.26); transform:rotate(2deg); margin:0; z-index:3; }
  .taped-photo img{ display:block; width:100%; height:auto; }
  .taped-photo .tape{ top:-13px; left:50%; margin-left:-48px; }
  .taped-photo figcaption{ font-family:'Caveat', cursive; text-align:center;
    font-size:19px; margin-top:6px; color:var(--body); }

  /* DESKTOP: beige vlak smaller aan de rechterkant, foto steekt over de rand */
  @media (min-width: 992px){
    .content-panel{ margin-right:96px; }               /* smaller beige rechts */
    .content-panel .panel-inner{ gap:36px; }
    .content-panel .panel-figure{ margin-right:-120px; } /* foto poot over de rand */
  }

  /* TABLET & SMARTPHONE: beige op volle breedte, foto bovenaan gecentreerd */
  @media (max-width: 991.98px){
    .content-panel{ margin-right:0; }
    .content-panel .panel-inner{ flex-direction:column-reverse; gap:26px; }
    .content-panel .panel-body{ max-width:none; }
    .content-panel .panel-figure{ flex:0 0 auto; align-self:center; margin:0 auto; max-width:320px; }
  }

  /* SMARTPHONE: foto breekt over de beige rand én de paginarand (zoals de homepage) */
  @media (max-width: 767.98px){
    .content-panel .panel-figure{
      max-width:none;
      width:calc(100vw + 24px);                 /* iets breder dan het scherm */
      margin-left:calc(50% - 50vw - 12px);      /* gecentreerd, 12px over elke rand */
      margin-right:0;
    }
  }

  @media (max-width: 575.98px){
    .content-panel{ padding:26px 22px; }
    .content-panel .entry-title{ font-size:32px; }
  }