/* Van Haren LMS — gedeelde huisstijl voor studentenschil en /iAdmin.
   Kleuren uit www.vanharen.net (_variables.scss); opzet loginpagina naar
   vanharen.anewspring.com/do?action=login (spec: look & feel). */

@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 300;
  src: url('fonts/poppins-v20-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400;
  src: url('fonts/poppins-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600;
  src: url('fonts/poppins-v20-latin-600.woff2') format('woff2');
}

:root {
  --vh-blauw: #0078bf;
  --vh-blauw-donker: #0b5f91;
  --vh-oranje: #ff9e18;
  --vh-tekst: #373737;
  --vh-rand: #e6e6e6;
  --ans-accent: #bacf61;
  --ans-accent-donker: #a8bd4f;
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--vh-tekst);
}

a { color: var(--vh-blauw); }

/* Witte logobalk bovenaan (aNS-voorbeeld), gecentreerd logo. */
.logobalk { background: #fff; height: 70px; display: flex; align-items: center;
            justify-content: center; border-bottom: 1px solid var(--vh-rand); }
.logobalk img { height: 46px; }

/* Kop + gecentreerd smal formulier op login/forgot/reset. */
.auth-pagina { max-width: 360px; margin: 2.2rem auto 0; padding: 0 1rem; }
.auth-pagina h1 { font-size: 1.6rem; font-weight: 300; text-align: center; }
.auth-pagina form.auth { box-shadow: none; border: 0; background: none; padding: 0;
                         max-width: none; }
.auth-pagina .melding { margin-bottom: 1rem; }
.auth-pagina form.auth label { display: block; }
.auth-pagina form.auth input[type=text], .auth-pagina form.auth input[type=email], .auth-pagina form.auth input[type=password] {
  border: 1px solid var(--vh-rand); border-radius: 0.5rem; padding: .6rem .7rem;
  font: inherit; width: 100%; box-sizing: border-box;
}
.auth-pagina form.auth button { background: var(--vh-blauw); border-radius: 0.5rem; width: 100%;
                   padding: .65rem; font: inherit; font-weight: 600; box-sizing: border-box; }
.auth-pagina form.auth button:hover { background: var(--vh-blauw-donker); }

/* Ingelogde schil: logo in de header. */
header img.headerlogo { height: 34px; display: block; }

/* Editor-media (cursus-editor fase 2): schaalt de .les-body-voorbeeldweergave in
   iAdmin (dat portaal.css niet laadt); de studentkant dekt portaal.css al af. */
.les-body img { max-width: 100%; height: auto; }
.les-body video, .les-body iframe { display: block; max-width: 100%; margin: .8rem 0; }

/* Akkoordpaneel onder een site-document (gebruikersovereenkomst). Staat in lms.css
   omdat zowel het cursist- als het coachportaal dit laadt (coach laadt portaal.css niet). */
.doc-akkoord { margin-top: 1.5rem; padding: 1.1rem 1.2rem; background: #f7f9fc;
               border: 1px solid var(--vh-rand); border-left: 4px solid var(--vh-blauw);
               border-radius: .5rem; }
.doc-akkoord p { margin: 0 0 .8rem; color: #555; }
.doc-akkoord label { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer;
                     margin-bottom: 1rem; line-height: 1.4; }
.doc-akkoord label input[type=checkbox] { margin-top: .15rem; width: 1.05rem; height: 1.05rem;
                     accent-color: var(--vh-blauw); flex: 0 0 auto; cursor: pointer; }
.doc-akkoord button { background: var(--vh-blauw); color: #fff; border: none; border-radius: 6px;
                     padding: .6rem 1.2rem; font: inherit; font-weight: 600; cursor: pointer; }
.doc-akkoord button:hover { background: var(--vh-blauw-donker); }
.doc-akkoord button:focus-visible { outline: 3px solid rgba(0,120,191,.35); outline-offset: 2px; }
.les-body iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* Classes uit StijlOpschoner (spec 2026-08-27-bibliotheek-css): reproduceren de
   aNS-inline-waarden 1-op-1. De opschoner zet de kleur uit de content inline
   als --bron; elke kleurdragende class maakt daar zelf --kleur van. Die omweg
   is nodig omdat een inline declaratie altijd wint van een selector: met een
   inline --kleur zou bibliotheek-CSS als .kader { --kleur: #0078bf } nooit
   aankomen, met --bron wél.
   Bewust géén .les-body { --kleur: … }: elke class zet --kleur zelf, dus een
   geërfde waarde zou toch overschreven worden — en zonder die erfenis valt een
   verdwaalde var(--kleur) terug op niets in plaats van stil op groen.
   tests/stijl_css_sync_test.php bewaakt dat deze waarden gelijk lopen met
   StijlOpschoner::STANDAARD. */
.les-body .kader { --kleur: var(--bron, #3eb977); display: block; border-left: 10px solid var(--kleur); padding: 8px 12px; margin: 8px 0; }
/* kop-in-kader erft --kleur van het omliggende .kader: die kop heeft zelf geen --bron. */
.les-body .kop-in-kader { margin: 0; color: var(--kleur); }
.les-body .kop-accent { --kleur: var(--bron, #3eb977); margin: 0; color: var(--kleur); }
.les-body .kop-kleur { --kleur: var(--bron, #3eb977); color: var(--kleur); }
.les-body .kop-rij { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.les-body .bol { --kleur: var(--bron, #3eb977); display: inline-block; width: 16px; height: 16px; background: var(--kleur); border-radius: 50%; flex: 0 0 auto; }
.les-body .img-75 { max-width: 75%; height: auto; }
.les-body .img-70 { max-width: 70%; height: auto; }
.les-body .img-75-breed { width: 75%; height: auto; }
.les-body .img-70-breed { width: 70%; height: auto; }
.les-body .cel { padding: 8px; vertical-align: top; text-align: left; }
.les-body .cel-smal { width: 5%; }
/* Ná .cel/.cel-smal: anders wint .cel's text-align:left van .centreer op
   een <td class="cel centreer">, ondanks de latere bronvolgorde in de HTML. */
.les-body .centreer { text-align: center; }
.les-body .tabelkop { --kleur: var(--bron, #3eb977); width: 100%; border: 0; margin-top: 8px; background-color: var(--kleur); color: #fff; }
.les-body .cel-kleur { --kleur: var(--bron, #3eb977); background-color: var(--kleur); color: #fff; }
.les-body .bijschrift { font-size: .9em; font-style: italic; text-align: center; margin-top: .25em; color: #6b7280; }
.les-body .voetnoot { --kleur: var(--bron, #3eb977); display: inline-block; border-top: 1px solid var(--kleur); font-size: .85em; padding-top: .25em; margin-top: .5em; color: #6b7280; }
.les-body .inspring { padding-left: 20px; margin-left: 10px; margin-top: 4px; }
.les-body .marge-onder { margin-bottom: 12px; }
.les-body .video-kader { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; }
.les-body .video-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; aspect-ratio: auto; }
/* Na het opschonen matcht de oude regel op div[style*="padding-bottom:56.25%"]
   (portaal.css) niet meer; een iframe zonder eigen inline-positionering zou dan
   uit de video-kader vallen. Vandaar dezelfde positionering op de class. */
.les-body .video-kader iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; aspect-ratio: auto; }