/* Jouw Verhalenkaart: beperkte, toegankelijke AI-transparantielaag */
.jvk-ai-chip{
  --jvk-ai-border:rgba(166,133,69,.45);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-height:36px;padding:5px 12px;border-radius:999px;border:1px solid var(--jvk-ai-border);
  background:rgba(247,239,216,.88);color:#294e3c!important;text-decoration:none;
  font-size:12px;line-height:1.25;font-weight:760;white-space:nowrap;letter-spacing:.01em;
  box-shadow:none;transition:background-color .18s ease,border-color .18s ease;
}
.jvk-ai-chip::before{content:"✦";font-size:13px;color:#987232;margin-right:6px}
.jvk-ai-chip:hover,.jvk-ai-chip:focus-visible{background:#f3e1a8;border-color:#b38b49}
.jvk-ai-chip[aria-current="page"]{background:#e7d39b}
.jvk-ai-mobile-link{display:block;min-height:44px;align-content:center;text-decoration:none}
.jvk-ai-footer-link{text-decoration:underline;text-decoration-color:rgba(158,128,66,.5);text-underline-offset:3px}
.jvk-ai-voice-label,.jvk-ai-origin-label{
  display:inline-flex;align-items:center;gap:5px;vertical-align:middle;
  margin:4px 6px 4px 2px;padding:4px 9px;border-radius:100px;
  background:#ecf3e9;border:1px solid #bfd1bb;color:#254a39;
  font-size:12px;line-height:1.35;font-weight:650;white-space:normal;
}
.jvk-ai-voice-label::before{content:"◉";color:#537b54;font-size:10px}
.jvk-ai-page-note{
  box-sizing:border-box;max-width:980px;margin:14px auto 22px;padding:12px 16px;
  color:#28523d;background:#f1f5e9;border:1px solid #c9d9c3;border-radius:13px;
  font-size:14px;line-height:1.6;
}
.jvk-ai-page-note p{margin:0}.jvk-ai-note-link{color:#1a563b!important;text-decoration:underline;text-underline-offset:3px;font-weight:750}
.jvk-ai-chip:focus-visible,.jvk-ai-mobile-link:focus-visible,.jvk-ai-note-link:focus-visible,.ai-info-main a:focus-visible{
  outline:3px solid #d6a43f;outline-offset:3px;
}
/* Niet verschuilen achter sticky navigatie of zwevende kaartcontrols. */
.site-header .nav-actions>.jvk-ai-chip,.jvk-shell-header .jvk-shell-actions>.jvk-ai-chip{order:-1}
.jvk-shell-nav>.jvk-ai-chip{margin-left:8px}
/* Binnensjabloon: onder 760px verbergt de bestaande website haar actieblok.
   Een extra klein AI-label hoort dan naast de hamburger zonder grids te verstoren. */
.jvk-shell-header .jvk-ai-shell-mobile{display:none}
@media(max-width:760px){
  .jvk-shell-header__inner{position:relative}
  .jvk-shell-header .jvk-ai-shell-mobile{
    display:inline-flex;position:absolute;right:71px;top:50%;transform:translateY(-50%);
    z-index:2;min-height:34px;min-width:36px;padding:5px 10px;font-size:0;
  }
  .jvk-shell-header .jvk-ai-shell-mobile::before{display:none}
  .jvk-shell-header .jvk-ai-shell-mobile::after{content:"AI";font-size:12px;font-weight:850}
}
@media(max-width:700px){
  .site-header .nav-actions>.jvk-ai-chip,.jvk-shell-header .jvk-shell-actions>.jvk-ai-chip{font-size:11px;padding:5px 8px;min-height:32px}
  .jvk-ai-page-note{margin:12px 14px 18px;padding:12px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.jvk-ai-chip{transition:none}}

/* Zelfstandige uitlegpagina — houdt de normale groen/gouden huisstijl aan. */
body.jvk-ai-info-page{background:#f8faf7;color:#203d30;overflow-x:clip}
.jvk-ai-info-page [hidden]{display:none!important}
.jvk-ai-info-page .ai-skip-link{position:absolute;left:10px;top:-100px;z-index:99999;padding:12px 18px;background:#fff;color:#173a2b;border-radius:8px}
.jvk-ai-info-page .ai-skip-link:focus{top:9px}
.jvk-ai-info-page .nav-actions{display:flex;align-items:center;gap:11px}
.jvk-ai-info-page .nav-actions .jvk-ai-chip{font-size:12px}
.jvk-ai-info-page .ai-info-main{min-width:0;overflow:clip}
.jvk-ai-info-page .ai-info-inner{width:min(950px,calc(100% - 38px));margin:0 auto}
.jvk-ai-info-page .ai-info-hero{
  background:radial-gradient(circle at 84% 17%,rgba(204,170,95,.21),transparent 38%),linear-gradient(130deg,#082a22 0%,#164b37 68%,#1a5740 100%);
  color:#fff;padding:66px 0 68px;
}
.jvk-ai-info-page .ai-info-kicker{color:#ecd595;font-size:13px;font-weight:820;text-transform:uppercase;letter-spacing:.09em;margin:0 0 10px}
.jvk-ai-info-page h1{font-size:clamp(32px,5vw,54px);line-height:1.11;max-width:680px;letter-spacing:-.025em;margin:0 0 20px;color:#fff}
.jvk-ai-info-page .ai-info-lead{font-size:clamp(17px,2.4vw,20px);line-height:1.72;max-width:740px;color:#f5f9f5;margin:0 0 25px}
.jvk-ai-info-page .ai-info-hero-link{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:#183629;background:#f2d99f;border:1px solid #e6c585;border-radius:12px;padding:11px 17px;text-decoration:none;min-height:44px}
.jvk-ai-info-page .ai-info-hero-link:hover{background:#f9e4b5}
.jvk-ai-info-page .ai-info-content{padding:38px 0 75px}
.jvk-ai-info-page .ai-info-content>section{margin:0 0 32px}
.jvk-ai-info-page .ai-info-intro{background:#fffdf7;padding:26px 28px;border-radius:18px;border:1px solid #e9e0c9}
.jvk-ai-info-page .ai-info-content h2{font-size:clamp(22px,3vw,29px);line-height:1.22;color:#164934;letter-spacing:-.015em;margin:0 0 16px}
.jvk-ai-info-page .ai-info-content h3{font-size:19px;line-height:1.28;color:#194733;margin:10px 0}
.jvk-ai-info-page .ai-info-content p{font-size:16px;line-height:1.8;margin:0 0 13px;color:#334a3d}
.jvk-ai-info-page .ai-info-content a:not(.ai-info-primary-button,.ai-info-secondary-button,.ai-info-hero-link){color:#145b3c;text-decoration:underline;text-underline-offset:3px}
.jvk-ai-info-page .ai-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-top:12px}
.jvk-ai-info-page .ai-info-card{background:#fff;padding:22px 24px;border:1px solid #dfebdd;border-radius:18px;min-width:0;box-shadow:0 5px 17px rgba(20,59,38,.035)}
.jvk-ai-info-page .ai-info-card p{font-size:15px;margin:0}
.jvk-ai-info-page .ai-info-card-icon{display:grid;place-items:center;width:37px;height:37px;background:#f6eddb;border-radius:10px;color:#96723b;font-size:23px}
.jvk-ai-info-page .ai-info-section{padding:22px 4px 6px;border-bottom:1px solid #e0eadf}
.jvk-ai-info-page .ai-info-example-list{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 20px}
.jvk-ai-info-page .ai-info-example-list .jvk-ai-origin-label,.jvk-ai-info-page .ai-info-example-list .jvk-ai-voice-label{font-size:13px;min-height:32px}
.jvk-ai-info-page .ai-info-resources ul{padding-left:24px;margin:8px 0 0}
.jvk-ai-info-page .ai-info-resources li{padding:5px 0;font-size:15px;line-height:1.7;overflow-wrap:anywhere}
.jvk-ai-info-page .ai-info-bottom-nav{display:flex;align-items:center;flex-wrap:wrap;gap:11px;padding:14px 0 8px}
.jvk-ai-info-page .ai-info-primary-button,.jvk-ai-info-page .ai-info-secondary-button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:11px 16px;border-radius:11px;font-size:15px;font-weight:750;text-decoration:none}
.jvk-ai-info-page .ai-info-primary-button{color:#fff;background:#174932}
.jvk-ai-info-page .ai-info-secondary-button{color:#174932;background:#e7efe7;border:1px solid #bed3c0}
.jvk-ai-info-page footer .footer-inner{gap:10px}
@media(max-width:720px){
  .jvk-ai-info-page .ai-info-grid{grid-template-columns:1fr}
  .jvk-ai-info-page .ai-info-hero{padding:48px 0 50px}
  .jvk-ai-info-page .ai-info-content{padding-top:23px;padding-bottom:50px}
  .jvk-ai-info-page .ai-info-inner{width:min(100% - 28px,950px)}
  .jvk-ai-info-page .ai-info-intro{padding:19px 17px}
  .jvk-ai-info-page .ai-info-card{padding:20px 17px}
}
@media(max-width:430px){
  .jvk-ai-info-page .nav-actions{gap:5px}
  .jvk-ai-info-page .nav-login{display:none}
  .jvk-ai-info-page .ai-info-lead{font-size:16px;line-height:1.65}
  .jvk-ai-info-page .ai-info-hero{padding:40px 0 44px}
}
/* Op kleine telefoons staat alleen het woord AI bovenin; in het menu blijft de volledige uitleg. */
@media(max-width:450px){
  .site-header .nav-shell{gap:6px}
  .site-header .nav-actions{gap:5px}
  .site-header .nav-actions>.jvk-ai-chip,
  .jvk-shell-header .jvk-shell-actions>.jvk-ai-chip,
  .jvk-ai-info-page .nav-actions>.jvk-ai-chip{
    font-size:0!important;min-width:32px;min-height:32px;padding:3px 7px;
  }
  .site-header .jvk-ai-chip::before,.jvk-shell-header .jvk-ai-chip::before{display:none}
  .site-header .jvk-ai-chip::after,.jvk-shell-header .jvk-ai-chip::after{content:"AI";font-size:12px;font-weight:850;line-height:1.5}
  .site-header .brand strong{font-size:.88rem;line-height:1.15}
  .site-header .brand img{max-width:32px;max-height:36px}
}