/* Schoolwegwijzer knipvormen (brand v5, 2026-10-13): gedeelde onderdelen voor de publieke pagina's.
   Geladen na sw-brand.css op alle publieke pagina's, NIET op app.html (die heeft eigen .card/.btn/.chip).
   Alleen stijl: geen ids/classes waar JavaScript aan hangt worden hier veranderd.
   Kleuren: alleen het bestaande palet. Vormkleuren (oker, terracotta, groen, salie, zand) zijn voor vormen,
   stickers en vak-chips; tekst op een vormkleur is altijd --sw-ink. Geen schaduwen, geen verlopen. */

:root{--shadow:none;--sw-shadow:none}

/* ---------- knipvormen: losse SVG's in /assets/decor/ als masker, kleur via `color` ---------- */
.vorm{display:inline-block;flex:0 0 auto;width:32px;height:32px;background:currentColor;
  -webkit-mask:var(--vorm) center/contain no-repeat;mask:var(--vorm) center/contain no-repeat}
.vorm-vijfhoek{--vorm:url(/assets/decor/vorm-vijfhoek.svg)}
.vorm-halve-cirkel{--vorm:url(/assets/decor/vorm-halve-cirkel.svg)}
.vorm-driehoek{--vorm:url(/assets/decor/vorm-driehoek.svg)}
.vorm-cirkel{--vorm:url(/assets/decor/vorm-cirkel.svg)}
.vorm-kwartcirkel{--vorm:url(/assets/decor/vorm-kwartcirkel.svg)}
.vorm-ruit{--vorm:url(/assets/decor/vorm-ruit.svg)}
.vorm-bloem{--vorm:url(/assets/decor/vorm-bloem.svg)}
.kl-oker{color:var(--sw-ochre)}.kl-terra{color:var(--sw-terracotta)}.kl-groen{color:var(--sw-green)}
.kl-salie{color:var(--sw-sage)}.kl-zand{color:var(--sw-sand)}
.bg-oker{background:var(--sw-ochre)}.bg-terra{background:var(--sw-terracotta)}.bg-salie{background:var(--sw-sage)}.bg-zand{background:var(--sw-sand)}

/* Vaste vorm + kleur per toets (herkenningsteken op de homepage én op de pagina van die toets) */
.vt-doorstroom{--vorm:url(/assets/decor/vorm-vijfhoek.svg);color:var(--sw-ochre)}
.vt-iep{--vorm:url(/assets/decor/vorm-halve-cirkel.svg);color:var(--sw-terracotta)}
.vt-b8{--vorm:url(/assets/decor/vorm-driehoek.svg);color:var(--sw-green)}
.vt-nio{--vorm:url(/assets/decor/vorm-cirkel.svg);color:var(--sw-sage)}
.vt-drempel{--vorm:url(/assets/decor/vorm-bloem.svg);color:var(--sw-sand)}
.vt-g7{--vorm:url(/assets/decor/vorm-kwartcirkel.svg);color:var(--sw-ochre)}
.vt-g6{--vorm:url(/assets/decor/vorm-ruit.svg);color:var(--sw-green)}

/* ---------- knoppen en links ---------- */
.btn{box-shadow:none}
.btn:hover{transform:none}
.btn-primary{background:var(--sw-ink);color:#fff;border-color:var(--sw-ink);box-shadow:none}
.btn-primary:hover{background:var(--sw-green);border-color:var(--sw-green)}
.btn-secondary{background:transparent;color:var(--sw-ink);border:2px solid var(--sw-ink);box-shadow:none}
.btn-secondary:hover{background:#fff}
.btn .arrow{display:none}
/* tekstlinks in lopende tekst: onderstreept */
/* lage specificiteit (:where): links met een eigen opmaak op de pagina (.card a, .groot-links a ...) houden die */
main :where(p,li) a:where(:not(.btn,.rij,.card,.card-link)),.lead a{color:var(--sw-link);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
main :where(p,li) a:where(:not(.btn,.rij,.card,.card-link)):hover{color:var(--sw-ink)}
.tekstlink{color:var(--sw-link);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.tekstlink:hover{color:var(--sw-ink)}

/* ---------- geen hoofdletter-labels ---------- */
.kicker,.eyebrow,.tag,.article .tag,.article-tag,.site-footer h2,.tldr h3,.myth strong,.truth strong,.opdracht,.stelling-kop{text-transform:none!important;letter-spacing:0!important}
.kicker{font-size:15px;font-weight:700;color:var(--sw-ink-2)}
html body .gpdf .gpdf-k{text-transform:none;letter-spacing:0;font-size:15px;color:var(--sw-ink-2)}
.page-header .kicker{margin-bottom:10px}

/* ---------- panelen en kaarten: dunne rand, geen schaduw ---------- */
.paneel{background:#fff;border:1px solid var(--sw-lijn);border-radius:var(--sw-radius-paneel);overflow:hidden}
.paneel-kop{margin:0;padding:20px 20px 14px;font:800 1.35rem/1.2 var(--sw-font-kop);letter-spacing:-.01em;color:var(--sw-ink)}
.card,.tldr,.faq-item,.kort,.example,.tile,.p-card,.article,.toets,.subject{box-shadow:none!important}
.card{border:1px solid var(--sw-lijn);border-radius:var(--sw-radius-paneel)}
.card-link:hover{box-shadow:none;transform:none;border-color:var(--sw-ink)}
.badge{background:#fff;border:1px solid var(--sw-lijn);border-radius:999px;color:var(--sw-ink);box-shadow:none;font-weight:700}

/* ---------- toets-rij: een hele rij is één link ---------- */
.rij{display:flex;align-items:center;gap:16px;min-height:68px;padding:14px 20px;border-top:1px solid var(--sw-lijn);color:var(--sw-ink);text-decoration:none;background:#fff;transition:background .15s}
.rij:hover{background:var(--sw-hover)}
.rij .vorm{transition:transform .2s}
.rij-tekst{min-width:0}
.rij h3,.rij .rij-naam{display:block;margin:0;font:700 1.2rem/1.2 var(--sw-font-kop);letter-spacing:-.005em}
.rij small{display:block;margin-top:2px;font-size:.9375rem;line-height:1.45;color:var(--sw-ink-2)}
.rij .chev{flex:0 0 auto;margin-inline-start:auto;width:9px;height:9px;border-right:2px solid var(--sw-ink-2);border-bottom:2px solid var(--sw-ink-2);transform:rotate(-45deg)}
[dir="rtl"] .rij .chev,[dir="rtl"] .groot-links .chev{transform:rotate(135deg)}
@media(prefers-reduced-motion:no-preference){.rij:hover .vorm{transform:rotate(12deg)}}

/* ---------- vak-chip: gevuld met een vormkleur, inkt-rand, inkt-tekst ---------- */
.vak-chip{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:999px;border:2px solid var(--sw-ink);color:var(--sw-ink);font:700 1rem/1.2 var(--sw-font);text-decoration:none;white-space:nowrap;transition:transform .2s}
@media(prefers-reduced-motion:no-preference){.vak-chip:hover{transform:rotate(-2deg)}}
.taal-chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:999px;border:2px solid var(--sw-ink);color:var(--sw-ink);font:700 1rem/1.2 var(--sw-font);text-decoration:none;white-space:nowrap;background:transparent}
.taal-chip:hover{background:var(--sw-hover)}

/* ---------- vorm naast de kop op de pagina van een toets (gezet door tools/brand/apply_brand.py) ---------- */
/* koppen van subpagina's links uitgelijnd (niet alles centreren); de vorm van de toets staat ernaast */
.page-header{text-align:start}
.page-header h1,.page-header .lead,.page-header p{margin-inline:0}
.page-header .badges,.page-header .meta-line,.page-header .actions,.page-header .startknoppen,.page-header .filters{justify-content:flex-start}
.page-header .container{position:relative}
.toets-vorm{display:block;width:52px;height:52px;margin:0 0 16px;transform:rotate(-6deg)}
img.toets-vorm{background:none;-webkit-mask:none;mask:none;height:auto;transform:none}
@media(min-width:900px){
  .page-header .container:has(> .toets-vorm){padding-inline-end:clamp(190px,19vw,250px)}
  .page-header .toets-vorm{position:absolute;inset-inline-end:0;top:50%;width:clamp(140px,14vw,190px);height:clamp(140px,14vw,190px);margin:0;transform:translateY(-50%) rotate(-6deg)}
  .page-header img.toets-vorm{height:auto;width:clamp(110px,11vw,150px);transform:translateY(-50%)}
}

/* ---------- footer: vijf knipvormen die half boven de rand uitsteken ---------- */
.footer,.site-footer{position:relative;margin-top:72px}
.footer:before,.site-footer:before{content:"";position:absolute;left:0;right:0;top:-48px;height:96px;pointer-events:none;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,3 97,37 79,95 21,95 3,37' fill='%23E6B552' transform='rotate(-8 50 50)'/%3E%3C/svg%3E") 6% 16px/64px 64px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath d='M0 50 A50 50 0 0 1 100 50 Z' fill='%23DF896C'/%3E%3C/svg%3E") 24% 0/96px 48px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23A7BDAC'/%3E%3C/svg%3E") 55% 24px/48px 48px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23D4CBAE'%3E%3Ccircle cx='50' cy='50' r='32'/%3E%3Ccircle cx='80' cy='50' r='20'/%3E%3Ccircle cx='71.2' cy='71.2' r='20'/%3E%3Ccircle cx='50' cy='80' r='20'/%3E%3Ccircle cx='28.8' cy='71.2' r='20'/%3E%3Ccircle cx='20' cy='50' r='20'/%3E%3Ccircle cx='28.8' cy='28.8' r='20'/%3E%3Ccircle cx='50' cy='20' r='20'/%3E%3Ccircle cx='71.2' cy='28.8' r='20'/%3E%3C/g%3E%3C/svg%3E") 78% 12px/72px 72px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 97,94 3,94' fill='%23F4E8D6' transform='rotate(-10 50 50)'/%3E%3C/svg%3E") 95% 20px/56px 56px no-repeat}
@media(max-width:720px){
  .footer,.site-footer{margin-top:56px}
  .footer:before,.site-footer:before{top:-34px;height:68px;background-size:44px 44px,68px 34px,34px 34px,50px 50px,40px 40px;background-position:4% 12px,26% 0,56% 17px,80% 9px,97% 14px}
}
.site-footer h2{font-family:var(--sw-font-kop);font-weight:700;font-size:1rem;color:var(--sw-cream)}

/* ---------- chatknop (sw-chat.js zet zijn <style> later in de pagina: daarom de extra specificiteit) ---------- */
html body .swc-launch{background:#fff;color:var(--sw-ink);border:2px solid var(--sw-ink);box-shadow:none;padding:0 20px;gap:0;font:700 15px/1 var(--sw-font)}
html body .swc-launch:hover{background:var(--sw-hover)}
html body .swc-launch svg{display:none}
/* de zwevende knop blijft ook op de telefoon (Timo, 14 okt); "Stel een vraag" staat daarnaast in het menu */
html body .swc-links span{text-transform:none;letter-spacing:0;font-size:13px;color:var(--sw-ink-2)}

/* ---------- oefenwidget op de toetspagina's (doorstroomtoets, IEP, NIO, Drempelonderzoek) ---------- */
/* Atkinson heeft alleen normaal en vet: antwoordopties normaal, zodat dikgedrukte woorden in een optie opvallen */
.optie{font-weight:400}
.optie b,.optie strong{font-weight:700}
@media(max-width:820px){
  /* één kolom die nooit breder wordt dan het scherm (een brede figuur duwde de vraagtekst eruit) */
  .vraag-grid{grid-template-columns:minmax(0,1fr)}
  .vraag-fig svg{max-width:100%;height:auto}
}
@media(max-width:640px){
  /* invulveld + eenheid ("vierkantjes", "miljoen") passen naast elkaar: het veld krimpt mee */
  .invoer .veld{max-width:100%;min-width:0}
  .invoer .veld input{width:auto;flex:1 1 140px;min-width:0}
  /* de oefening over de volle schermbreedte: meer ruimte voor tekst en figuren */
  #oefenen>.container{width:100%}
  #oefenen .trainer{border-radius:0}
  #oefenen .stage{padding:18px 16px}
}

/* ---------- compacte kop op de telefoon bij de oefenpagina's: snel bij de oefening ---------- */
@media(max-width:640px){
  body:has(#oefenen) .page-header,.page-header:has(.startknoppen){padding:18px 0 16px}
  body:has(#oefenen) .page-header :is(.kicker,.lead,.badges,.meta-line),.page-header:has(.startknoppen) :is(.kicker,.lead){display:none}
  body:has(#oefenen) .page-header h1,.page-header:has(.startknoppen) h1{font-size:1.6rem;line-height:1.15;margin:0;padding-inline-end:56px}
  body:has(#oefenen) .page-header .toets-vorm,.page-header:has(.startknoppen) .toets-vorm{position:absolute;inset-inline-end:0;top:0;width:44px;height:44px;margin:0}
  .page-header:has(.startknoppen) .startknoppen{margin-top:14px}
}
/* startknoppen op de groep 6/7/8-pagina's hebben een inline style="justify-content:center" */
.page-header .startknoppen{justify-content:flex-start!important}

/* ---------- startknoppen op de groep 6/7/8-pagina's: vier gelijke knoppen met een pijltje ----------
   De eerste was gevuld (btn-primary) en leek daardoor "geselecteerd", de rest leek niet aanklikbaar (Timo, 14 okt). */
.startknoppen .btn{background:#fff;color:var(--sw-ink);border:2px solid var(--sw-ink);gap:10px;padding-inline:18px 16px;min-height:48px}
.startknoppen .btn:after{content:"";flex:0 0 auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
[dir="rtl"] .startknoppen .btn:after{transform:rotate(135deg)}
.startknoppen .btn:hover,.startknoppen .btn:active{background:var(--sw-ink);color:#fff;border-color:var(--sw-ink)}