/* ============================================================================
   STUDIO-CHROME — één header, één footer, één kolom voor alle Studio-pagina's.

   HANDGESCHREVEN BRON. Dit bestand heeft géén generator: bewerk het hier.
   (Niet te verwarren met bb-canon.css ernaast — dát is gegenereerd uit
   01-brand/design-system/ door 07-scripts/studio/bouw-bb-canon.mjs.)

   Laden ná bb-canon.css en vóór de pagina-eigen <style>:
     <link rel="stylesheet" href="slop-check-assets/bb-canon.css">
     <link rel="stylesheet" href="slop-check-assets/studio-chrome.css">

   WAAROM DIT BESTAAT (audit 11-09-2026). De acht Studio-pagina's hadden vijf
   headers, vijf footers, drie labels voor dezelfde terugknop en vier
   kolombreedtes. Alleen de index droeg het Studio-lockup; de zeven andere het
   Branders-logo, in een andere kleur. Voor een bezoeker die van de index naar
   een gratis tool klikte, voelde dat als een andere website. Britt koos op
   11-09 "alles gelijk" en "overal Studio".

   De kolom is 1000 − 2×28 = 944, de maat die index, de vier toolkits en
   slop-check al hadden. De contentkalender staat bewust nog op zijn eigen
   bredere maat: die heeft zeven dagkolommen naast elkaar en moet eerst op
   pixels bekeken worden.
   ========================================================================== */

/* ── de kolom ─────────────────────────────────────────────────────────────── */
.sh-kolom{max-width:1000px;margin:0 auto;padding:0 28px;position:relative;z-index:1}

/* GELOCKTE AFWIJKING (Britt 11-09): "breed laten, is een tool".
   De contentkalender houdt zijn eigen kolom van 1400 met 40px binnenmarge. Reden: zeven
   dagkolommen naast elkaar; op 944 wordt elke dag ~118px in plaats van ~176, en daar moet
   een taakkaart in met een titel van twee regels plus een platformlabel. Header en footer
   lopen met die kolom mee, zodat de pagina intern klopt.
   Dit is dus GEEN drift en geen restant — niet "gelijktrekken" in een volgende ronde. */
.sh-kolom--breed{max-width:1400px;padding:0 40px}
@media (max-width:640px){ .sh-kolom--breed{padding:0 18px} }

/* ── header ───────────────────────────────────────────────────────────────── */
.sh-bar{position:relative;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:26px 0 22px;margin-bottom:34px;
  border-bottom:var(--border-hair) solid var(--bb-inkt)}

/* Het lockup is opgebouwd uit het merkteken plus gezette tekst, niet uit een
   logobestand: "studio" bestaat niet als vector en het kobalt merkteken staat
   wél los klaar. Zo blijft het scherp op elke schermdichtheid. */
.sh-lock{display:flex;align-items:center;gap:13px;text-decoration:none}
.sh-mark{height:46px;width:auto;display:block}
.sh-wm{display:flex;flex-direction:column;line-height:1}
.sh-wmtop{display:flex;flex-direction:column;width:max-content}
.sh-w1{font-family:var(--font-accent);font-size:26px;color:var(--bb-inkt);
  letter-spacing:.02em;line-height:.86}
.sh-w2{font-family:var(--font-body);font-weight:600;font-size:13.5px;
  color:var(--bb-inkt);letter-spacing:.2em;line-height:1;margin-top:3px;
  text-align:center;text-indent:.2em}
.sh-sub{font-size:11px;color:var(--bb-roet);letter-spacing:.02em;margin-top:6px}
.sh-lock:hover .sh-w1,.sh-lock:hover .sh-w2{color:var(--bb-blauw)}

/* Terugknop: inktrand op crème, het secundaire knop-recept van de site. */
.sh-back{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-body);font-weight:700;font-size:12.5px;
  color:var(--bb-inkt);text-decoration:none;border:var(--border-hair) solid var(--bb-inkt);
  border-radius:var(--radius-pill);padding:8px 15px;white-space:nowrap;
  transition-property:background-color,color;transition-duration:200ms;
  transition-timing-function:var(--ease-out)}
.sh-back:hover{background:var(--bb-inkt);color:var(--bb-room)}

/* ── footer ───────────────────────────────────────────────────────────────── */
.sh-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:56px;padding:22px 0 0;
  border-top:var(--border-hair) solid var(--bb-roet);
  font-size:13px;color:var(--bb-roet)}
.sh-foot b{color:var(--bb-inkt)}
.sh-foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
  color:var(--bb-roet);text-decoration:underline;text-underline-offset:2px}
.sh-foot a:hover{color:var(--bb-blauw)}

/* ── focus ────────────────────────────────────────────────────────────────── */
.sh-bar a:focus-visible,.sh-foot a:focus-visible{outline:3px solid var(--bb-blauw);
  outline-offset:3px}

/* ── mobiel ───────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .sh-kolom{padding:0 18px}
  .sh-bar{flex-wrap:wrap;gap:14px;padding:18px 0 16px;margin-bottom:22px}
  .sh-mark{height:38px}
  .sh-w1{font-size:22px}
  .sh-w2{font-size:12px}
  .sh-foot{margin-top:40px}
}

@media (prefers-reduced-motion:reduce){
  .sh-back{transition:none}
}

/* ============================================================================
   VRAGEN-ACCORDEON (11-09) — Britt: "de vragen sectie moet ingeklapt, is nu heel
   groot en lang. Dus compacter met in/uitklap."
   Gemeten vóór: het vragenblok was 1070px hoog op de prompt-pack. Ingeklapt is dat
   de som van de koppen. De eerste vraag staat open, zodat de sectie niet als leeg
   leest en meteen laat zien dat er antwoorden onder zitten.
   <details> doet het openklappen zelf: geen JavaScript, werkt met toetsenbord en
   met zoeken-op-pagina in moderne browsers.
   ========================================================================== */
.sh-vraag{border-bottom:1px solid rgba(26,25,22,.16)}
.sh-vraag:last-of-type{border-bottom:0}

.sh-vraag > summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  min-height:44px;padding:13px 0;cursor:pointer;
  font-family:var(--font-display);font-weight:400;font-size:18px;line-height:1.25;
  color:var(--bb-inkt);list-style:none;text-wrap:pretty}
.sh-vraag > summary::-webkit-details-marker{display:none}
.sh-vraag > summary:hover{color:var(--bb-blauw)}
.sh-vraag > summary:focus-visible{outline:3px solid var(--bb-blauw);outline-offset:3px}

/* Het teken rechts: plus dicht, minus open. Vaste breedte zodat de koppen niet
   verspringen zodra je er een opent. */
.sh-vraag > summary::after{
  content:"+";flex:0 0 auto;width:1.1em;text-align:center;
  font-family:var(--font-body);font-weight:600;font-size:20px;line-height:1;
  color:var(--bb-blauw);transition:transform 160ms var(--ease-out)}
.sh-vraag[open] > summary::after{content:"–"}

.sh-vraag > :not(summary){margin:0 0 14px;font-size:16px;line-height:1.55;
  color:var(--bb-roet);text-wrap:pretty;max-width:62ch}
.sh-vraag > :not(summary):first-of-type{margin-top:-2px}

@media (prefers-reduced-motion:reduce){ .sh-vraag > summary::after{transition:none} }

/* ============================================================================
   COMPACT LOCKUP — voor de zeven BETAALDE pagina's (11-09, na Britts testaankoop).
   Die hebben een eigen sticky balk van 60px; daar past het volledige lockup met
   de onderregel niet in. Alleen de MATEN wijken af, de vorm is dezelfde — zo blijft
   het één merkteken in plaats van een tweede variant.
   Waarom ze niet gewoon .sh-bar krijgen: hun balk is sticky en full-width en dat is
   bestaand gedrag dat werkt. Poort 2 — alleen vervangen wat fout was (het
   Branders-logo en de twee verkoop-knoppen), niet de hele balk herbouwen.
   ========================================================================== */
.sh-lock--compact .sh-mark{height:32px}
.sh-lock--compact .sh-w1{font-size:19px}
.sh-lock--compact .sh-w2{font-size:10px;letter-spacing:.18em;margin-top:2px}