/* Katja x domogo: knop om tussen licht en donker te wisselen, op alle Katja-pagina's (zie views/katja/thema-script).
   Basis in :where() (specificiteit 0), zodat de maten van het menublok op de landingspagina (.duo > *) blijven gelden. */
:where(.thema-knop){display: inline-grid;place-items: center;flex: none;width: 44px;height: 44px;margin: 0;padding: 0;border: 0;border-radius: 50%;background: rgba(0,0,0,.06);color: #000;cursor: pointer;transition: background-color .2s}
.thema-knop[hidden]{display: none}
:where(.thema-knop):hover{background: rgba(0,0,0,.1)}
.thema-knop:focus-visible{outline: 3px solid #57E27F;outline-offset: 3px}
.thema-knop svg{width: 20px;height: 20px;fill: none;stroke: currentColor;stroke-width: 1.8;stroke-linecap: round;stroke-linejoin: round}
.thema-knop .thema-knop__zon,[data-thema="donker"] .thema-knop .thema-knop__maan{display: none}
[data-thema="donker"] .thema-knop .thema-knop__zon{display: block}
:where([data-thema="donker"] .thema-knop){background: rgba(255,255,255,.1);color: #fff}
:where([data-thema="donker"] .thema-knop):hover{background: rgba(255,255,255,.16)}

/* landingspagina: derde knop in het menublok, naast de app- en menuknop (maten komen van .duo > *) */
.duo > .thema-knop{height: auto;border-radius: 0;background: #EDEDED;color: #000}
.duo > .thema-knop:hover{background: #E2E2E2}
.duo > .thema-knop svg{width: 18px;height: 18px}
[data-thema="donker"] .duo > .thema-knop{background: rgb(58,64,60);color: #fff}
[data-thema="donker"] .duo > .thema-knop:hover{background: rgb(72,79,75)}

/* bedankpagina A/B en afspraak: rechts in de bovenbalk, na "Terug naar Katja's verhaal" */
.katja-bedankt .balk,.katja-afspraak .balk{justify-content: flex-start !important}
.katja-bedankt .balk > a.terug,.katja-afspraak .balk > a.terug{margin-left: auto}

/* bedankpagina C/D: rechtsboven in de donkere kop */
.katja-bedankt .hero{position: relative}
.katja-bedankt .hero > .thema-knop{position: absolute;top: 85px;right: var(--rand-in, 20px);background: rgba(255,255,255,.12);color: #fff}
@media (max-width: 820px){.katja-bedankt .hero > .thema-knop{top: 63px}}
.katja-bedankt .hero > .thema-knop:hover{background: rgba(255,255,255,.2)}