/* ===================================================================
   BuzzBij.nl — bijen.css
   - Header/spiegelstrook identiek aan voedselbos.css (je huidige basis)
   - Hover-flip is NIET aanwezig; flip gebeurt op klik
   - Haptiek: kortere easing + .is-tap micro-animatie
   =================================================================== */

/* Variabelen (sitebreed) */
:root{
  --bb-safe-top-header: 64px;
  --bb-header-offset: 10px;
}

/* Skeleton */
body.bb-public{ min-height:100svh; display:flex; flex-direction:column; }
#bb-site-footer,#site-footer,footer#bb-site-footer{ margin-top:auto; }

/* Achtergrondlagen (laag) */
body.bb-public:not(.bb-front-lock) .bb-bos-honing-backdrop{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 360px at 50% 0%, rgb(0 0 0 / .16), transparent 70%),
    linear-gradient(to bottom,#dce9e2 0%,#cfe3d6 28%,#f3ede3 68%,#edd5a3 100%);
  background-repeat:no-repeat; background-size:cover; background-position:center top;
}
body.bb-public:not(.bb-front-lock) .bb-bijen-dimmer{
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(0 0 0 / .14) 0%,
    rgb(0 0 0 / .10) 40%,
    rgb(0 0 0 / .06) 100%);
  background-repeat:no-repeat; background-size:cover; background-position:center top;
}

/* Header fixed + spiegelstrook (zoals voedselbos.css) */
body.bb-public .site-header,
body.bb-public .bb-site-header,
body.bb-public [data-bb="site-header"],
body.bb-front-lock .site-header,
body.bb-front-lock .bb-site-header,
body.bb-front-lock [data-bb="site-header"]{
  position: fixed; left: 0; right: 0; z-index: 1000;
  top: var(--bb-header-offset, 0px);
}
body.bb-public:not(.bb-front-lock)::before{
  content:""; position: fixed; top:0; left:0; right:0;
  height: calc(var(--bb-header-offset,0px) + var(--bb-safe-top-header, 64px));
  z-index: 900; pointer-events:none;
  background:
    radial-gradient(1100px 360px at 50% 0%, rgb(0 0 0 / .16), transparent 70%),
    linear-gradient(to bottom,#dce9e2 0%,#cfe3d6 28%,#f3ede3 68%,#edd5a3 100%);
  background-repeat:no-repeat; background-size:100% 100vh; background-position:center top;
}
body.bb-public:not(.bb-front-lock)::after{
  content:""; position: fixed; top:0; left:0; right:0;
  height: calc(var(--bb-header-offset,0px) + var(--bb-safe-top-header, 64px));
  z-index: 901; pointer-events:none;
  background: linear-gradient(to bottom,
    rgb(0 0 0 / .14) 0%,
    rgb(0 0 0 / .10) 40%,
    rgb(0 0 0 / .06) 100%);
  background-repeat:no-repeat; background-size:100% 100vh; background-position:center top;
}
body.bb-front-lock::before, body.bb-front-lock::after{ content:none !important; }
.bb-header-veil, .bb-header-spacer{ display:none !important; }

/* Glascontainer */
main.bb-bijen{
  position:relative; z-index:2;
  width:1120px; max-width:calc(100% - 2 * clamp(16px,4vw,24px));
  margin: calc(var(--bb-header-offset,0px) + var(--bb-safe-top-header, 64px)) auto 56px;
  padding:0 clamp(16px,4vw,24px) 120px;
  box-sizing:border-box; color:#1a1a1a;
  border-radius:22px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.14) 0%, rgba(255,255,255,.10) 55%, rgba(247,246,243,.78) 100%);
  -webkit-backdrop-filter: blur(8px) saturate(1.02);
  backdrop-filter: blur(8px) saturate(1.02);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.06);
  background-clip: padding-box;
}
main.bb-bijen::before{
  content:""; position:absolute; left:10px; right:10px; top:8px; height:1px; border-radius:999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
main.bb-bijen h1{ margin:0 0 10px; font-size:clamp(26px,3vw,44px); font-weight:800; color:#1a1a1a; }
body.bb-public main.bb-bijen :where(h1,h2,h3,h4,h5,h6){
  scroll-margin-top: calc(var(--bb-header-offset,0px) + var(--bb-safe-top-header, 64px));
}

/* Visueel verborgen, voor live-regio */
.sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

/* Knoppen */
.bb-btn-1, .bb-btn-2, .bb-btn-3, .bb-btn-4, .bb-btn-5{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  border-radius:999px; padding:11px 18px;
  font-size:16px; font-weight:800; letter-spacing:.02em;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.bb-btn-2{
  color:#2f2202;
  background: linear-gradient(180deg, #f3cd6b, #e2b552);
  border:1px solid #d29f3a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(210,159,58,.25);
}
.bb-btn-2:hover{ transform:translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 28px rgba(210,159,58,.30); }
.bb-btn-2:focus-visible{ outline:2px solid rgba(210,159,58,.45); outline-offset:2px; }

/* ===================== QUIZ FLIPCARD ===================== */
.bb-bijen .flip-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px; padding:0;
}
@media (max-width:900px){ .bb-bijen .flip-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .bb-bijen .flip-grid{ grid-template-columns:1fr; } }

.bb-bijen .flip{
  position:relative; display:block; width:100%; aspect-ratio:4/3;
  margin:0; border:0; box-shadow:none; border-radius:12px;
  cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; perspective:1000px;
  transform-style: preserve-3d;
}
.bb-bijen .flip:focus-visible{
  box-shadow:0 0 0 3px rgba(255,255,255,.8), 0 0 0 6px rgba(0,0,0,.35);
}

.bb-bijen .flip > .front,
.bb-bijen .flip > .back{
  position:absolute; inset:0; display:block; width:100%; height:100%;
  border-radius:12px; overflow:hidden; border:0; box-shadow:none;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .5s cubic-bezier(.175,.885,.32,1.275), opacity .5s;
  box-sizing:border-box;
}

/* Front gebruikt <img> voor betere LCP */
.bb-bijen .flip .flip-img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center;
}

.bb-bijen .flip > .front{ transform:rotateY(0deg); background:#111; }
bb-bijen .flip > .back{ transform:rotateY(-180deg); opacity:0; } /* guard voor typefout */
.bb-bijen .flip > .back{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:18px; color:#fff; font-weight:700; line-height:1.35; font-size:1.02rem;
  transform:rotateY(-180deg); opacity:0;
}
.bb-bijen .flip.is-correct > .back{ background:#187246; } /* groen */
.bb-bijen .flip.is-wrong   > .back{ background:#a12222; } /* rood */

/* Klik/toets flip (JS zet inline transforms; deze blijven voor back-up) */
.bb-bijen .flip.is-flipped > .front{ transform:rotateY(180deg); }
.bb-bijen .flip.is-flipped > .back { transform:rotateY(0deg); opacity:1; }

/* Verticale variant */
.bb-bijen .flip.flip-vertical > .back{ transform:rotateX(-180deg); }
bb-bijen .flip.flip-vertical.is-flipped > .back { transform:rotateX(0deg); opacity:1; } /* guard */
.bb-bijen .flip.flip-vertical.is-flipped > .front{ transform:rotateX(180deg); }
.bb-bijen .flip.flip-vertical.is-flipped > .back { transform:rotateX(0deg); opacity:1; }

.bb-bijen .flip > .back > p{ max-width:90%; margin:0 auto; }

/* ===================== HAPTIEK / TAP FEEL ===================== */
@media (prefers-reduced-motion: no-preference) {
  .bb-bijen .flip { transition: transform .06s cubic-bezier(.3,.7,.2,1); transform-origin:center; }
  .bb-bijen .flip.is-pressed { transform: scale(0.985); }

  .bb-bijen .flip.is-tap { animation: bb-tap .14s cubic-bezier(.3,.7,.2,1); }
  @keyframes bb-tap {
    0%   { transform: scale(0.985); }
    100% { transform: scale(1.000); }
  }

  .bb-bijen .flip.is-flipped > .back { animation: bb-pop .18s cubic-bezier(.2,.9,.25,1.2); }
  @keyframes bb-pop {
    0%   { transform: translateZ(0) scale(0.985); opacity:.9; }
    100% { transform: translateZ(0) scale(1.0);   opacity:1;  }
  }
}

/* ===================== REDUCED-MOTION (toegankelijkheid) ===================== */
@media (prefers-reduced-motion: reduce) {
  .bb-bijen .flip,
  .bb-bijen .flip > .front,
  .bb-bijen .flip > .back{
    transition: none !important;
    animation: none !important;
  }
}

/* ========= [BEGIN] Waarom bijen cruciaal zijn (append-only) ========= */
.bb-bijen .bb-bijen-why{
  margin: clamp(16px, 3.5vh, 28px) 0 24px 0;
}
.bb-bijen .bb-bijen-why__glass{
  position: relative;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 26px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(8px) saturate(1.02);
  backdrop-filter: blur(8px) saturate(1.02);
  padding: clamp(16px, 3.2vh, 28px);
  overflow: hidden;
}
.bb-bijen .bb-bijen-why__glass::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; border-radius:inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:cover;
  z-index: 0; opacity: .018;
}
.bb-bijen .bb-bijen-why__glass > *{ position: relative; z-index: 1; }

.bb-bijen .bb-bijen-why__h2{
  margin: 0 0 .6em 0;
  font-size: clamp(1.12rem, 1.9vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: .2px;
  color: inherit;
  text-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.bb-bijen .bb-bijen-why__p{
  margin: 0 0 .9em 0;
  font-size: clamp(.98rem, 1.6vw, 1.05rem);
  line-height: 1.6;
}
.bb-bijen .bb-bijen-why__p sup{ font-size:.72em; vertical-align: super; opacity:.65; }
.bb-bijen .bb-bijen-why__p sup a{ color: inherit; text-decoration: none; border:0; }
.bb-bijen .bb-bijen-why__p sup a:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
.bb-bijen .bb-bijen-why__notes{
  margin: .75em 0 0 0;
  padding-left: 1.2em;
  list-style: decimal;
  font-size: .85em;
  line-height: 1.45;
  opacity: .7;
}
.bb-bijen .bb-bijen-why__notes li{ margin: .2em 0; }
/* ========= [END] Waarom bijen cruciaal zijn ========= */

/* ========= [BEGIN] Top-anchors rechtsonder in glaskader ========= */
.bb-bijen .bb-bijen-why__glass { padding-bottom: calc(clamp(16px, 3.2vh, 28px) + 44px); }
.bb-bijen .bb-bijen-why__glass .vb-to-top{
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
/* ========= [END] Top-anchors ========= */

/* ===================== LIGHTBOX (gedeeld) ===================== */
.bb-no-scroll{ overflow: hidden !important; }

.bb-lightbox{
  position: fixed; inset: 0; z-index: 4000;
  display: none;
}
.bb-lightbox.is-open{ display: block; }

/* Backdrop fade */
.bb-lightbox__backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(2px) saturate(1.05);
  backdrop-filter: blur(2px) saturate(1.05);
  opacity: 0;
  transition: opacity .18s ease-out;
}
.bb-lightbox.is-open .bb-lightbox__backdrop{ opacity: 1; }

/* Centering box */
.bb-lightbox__center{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 2vw, 24px);
}

/* Zoom-in curve */
bb-lightbox__img{ max-width: min(96vw, 1280px); } /* guard */
.bb-lightbox__img{
  max-width: min(96vw, 1280px);
  max-height: 90vh;
  width: auto; height: auto;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.08) inset;
  cursor: zoom-out;
  transform-origin: center center;
}

@media (prefers-reduced-motion: no-preference){
  @keyframes bb-lightbox-zoom-in {
    0%   { transform: scale(0.965); opacity: .88; }
    100% { transform: scale(1.000); opacity: 1;   }
  }
  /* Speelse, maar subtiele curve: snel startje, zachte landing */
  .bb-lightbox.is-open .bb-lightbox__img{
    animation: bb-lightbox-zoom-in .22s cubic-bezier(.22,.75,.25,1) both;
  }
}

/* Einde lightbox */