/* Collegenotities: rustige, Apple-achtige stijl bovenop MkDocs Material.
   Principes: helderheid (duidelijke typografische hiërarchie), terughoudendheid
   (de inhoud staat centraal, weinig kaders) en diepte (doorschijnende balk). */

:root {
  --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
    "Helvetica Neue", Arial, sans-serif;
  --apple-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
    "Helvetica Neue", Arial, sans-serif;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #0071e3;
  --md-primary-fg-color--light: #2997ff;
  --md-primary-fg-color--dark: #0058b0;
  --md-accent-fg-color: #0071e3;
  --md-default-bg-color: #fbfbfd;
  --md-default-fg-color: #1d1d1f;
  --md-default-fg-color--light: #6e6e73;
  --md-default-fg-color--lighter: #86868b;
  --md-default-fg-color--lightest: rgba(0, 0, 0, 0.08);
  --md-typeset-color: #1d1d1f;
  --md-typeset-a-color: #0066cc;

  --apple-surface: #ffffff;
  --apple-separator: rgba(0, 0, 0, 0.08);
  --apple-fill: rgba(118, 118, 128, 0.12);
  --apple-bar: rgba(251, 251, 253, 0.78);
  --apple-blue: #0071e3;
  --apple-blue-tint: rgba(0, 113, 227, 0.085);
  --apple-orange: #c25e00;
  --apple-orange-tint: rgba(255, 149, 0, 0.11);
  --apple-orange-icon: #ff9500;
  --apple-indigo: #4b49c6;
  --apple-indigo-tint: rgba(88, 86, 214, 0.11);
  --apple-amber: #8a5d00;
  --apple-amber-tint: rgba(255, 204, 0, 0.2);
  /* Kleine grijze tekst (tijdstempels, boeklabels) op een gekleurde
     achtergrond: iets donkerder dan --light, zodat het contrast >= 4.5:1 blijft. */
  --apple-meta: #636368;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #0a84ff;
  --md-primary-fg-color--light: #409cff;
  --md-primary-fg-color--dark: #0071e3;
  --md-accent-fg-color: #0a84ff;
  --md-default-bg-color: #000000;
  --md-default-fg-color: #f5f5f7;
  --md-default-fg-color--light: #a1a1a6;
  --md-default-fg-color--lighter: #8e8e93;
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.1);
  --md-typeset-color: #f5f5f7;
  --md-typeset-a-color: #2997ff;
  --md-code-bg-color: #1c1c1e;

  --apple-surface: #1c1c1e;
  --apple-separator: rgba(255, 255, 255, 0.1);
  --apple-fill: rgba(118, 118, 128, 0.24);
  --apple-bar: rgba(22, 22, 23, 0.72);
  --apple-blue: #0a84ff;
  --apple-blue-tint: rgba(10, 132, 255, 0.16);
  --apple-orange: #ffb340;
  --apple-orange-tint: rgba(255, 159, 10, 0.16);
  --apple-orange-icon: #ff9f0a;
  --apple-indigo: #a5a3ff;
  --apple-indigo-tint: rgba(94, 92, 230, 0.24);
  --apple-amber: #ffd60a;
  --apple-amber-tint: rgba(255, 214, 10, 0.14);
}

/* ---------- Typografie ---------- */

body,
input,
.md-typeset {
  font-family: var(--apple-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.md-typeset {
  font-size: 0.85rem;          /* 17px, de standaard tekstgrootte van Apple */
  line-height: 1.6;
  letter-spacing: -0.011em;
}

.md-content {
  max-width: 44rem;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: var(--apple-display);
  color: var(--md-default-fg-color);
}

.md-typeset h1 {
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0.4em 0 0.5em;
}

.md-typeset h2 {
  font-size: 1.4em;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 2.6em 0 0.8em;
  padding-top: 1.4em;
  border-top: 1px solid var(--apple-separator);
}

.md-typeset h3 {
  font-size: 1.12em;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 2em 0 0.6em;
}

/* Datum direct onder de titel, in rustig grijs */
.md-typeset h1 + p:not(:has(em)):not(.intro) {
  margin-top: -0.4em;
  color: var(--md-default-fg-color--light);
  font-weight: 500;
}
/* Disclaimer onder de titel (of onder de datum) */
.md-typeset h1 + p em,
.md-typeset h1 + p + p em {
  font-style: normal;
  color: var(--md-default-fg-color--light);
  font-size: 0.88em;
}

.md-typeset ul li,
.md-typeset ol li {
  margin-bottom: 0.45em;
}

.md-typeset a {
  text-decoration: none;
}
.md-typeset a:hover {
  text-decoration: underline;
}

/* ---------- Doorschijnende balk ---------- */

.md-header {
  background-color: var(--apple-bar);
  color: var(--md-default-fg-color);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--apple-separator);
  box-shadow: none;
}
.md-header--shadow {
  box-shadow: none;
}
.md-header__title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-search__form {
  border-radius: 10px;
  background-color: var(--apple-fill);
}
.md-search__input {
  color: var(--md-default-fg-color);
}
.md-search__input::placeholder,
.md-search__icon {
  color: var(--md-default-fg-color--light);
}

/* ---------- Zijbalk als gegroepeerde lijst ---------- */

.md-nav {
  font-size: 0.75rem;
}
.md-nav__title,
.md-nav__item--section > .md-nav__link {
  color: var(--md-default-fg-color--light);
  font-weight: 600;
}
.md-nav__link {
  border-radius: 8px;
  padding: 0.25em 0.5em;
  margin-top: 0.15em;
}
/* Rustige zijbalk: geen kleur of achtergrond bij selectie, alleen een
   iets zwaardere letter. De zijbalk mag niet concurreren met de inhoud. */
.md-nav--primary .md-nav__link {
  color: var(--md-default-fg-color--light);
}
.md-nav--primary .md-nav__item--nested > .md-nav__link {
  color: var(--md-default-fg-color--light);
}
.md-nav--primary .md-nav__item--section > .md-nav__link {
  color: var(--md-default-fg-color--light);
  font-size: 0.65rem;
  font-weight: 600;
}
.md-nav__item .md-nav__link--active,
.md-nav--primary .md-nav__item--active > .md-nav__link {
  color: var(--md-default-fg-color);
  background: none;
}
/* Geselecteerd college: een zachte grijze achtergrond, verder dezelfde
   kleur als de rest, zodat de zijbalk niet oplicht naast de tekst. */
.md-nav--primary .md-nav__item .md-nav__link--active {
  color: var(--md-default-fg-color--light);
  font-weight: 500;
  background-color: color-mix(in srgb, var(--apple-fill) 65%, transparent);
}
.md-nav--primary .md-nav__item--active > .md-nav__link {
  color: var(--md-default-fg-color--light);
}
.md-nav__link[href]:hover,
.md-nav__link[href]:focus,
.md-nav__link[for]:hover,
.md-nav__link[for]:focus,
.md-nav--primary .md-nav__item--active > .md-nav__link:hover,
.md-nav--primary .md-nav__item--active > .md-nav__link:focus {
  color: var(--md-default-fg-color);
}
.md-nav__icon:hover {
  background-color: transparent;
}
.md-nav__icon {
  color: var(--md-default-fg-color--lighter);
}

/* ---------- Kaders (mededelingen, tentamenstof, antwoorden) ---------- */

.md-typeset .admonition,
.md-typeset details {
  font-size: inherit;
  border: none;
  border-radius: 14px;
  box-shadow: none;
  padding: 0.9em 1.2em;
  margin: 1.2em 0;
  background-color: var(--apple-surface);
}

.md-typeset .admonition.info {
  background-color: var(--apple-blue-tint);
}
.md-typeset .admonition.warning {
  background-color: var(--apple-orange-tint);
}
.md-typeset details.note {
  background-color: var(--apple-surface);
  border: 1px solid var(--apple-separator);
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: transparent !important;
  border: none;
  margin: 0;
  padding: 0.1em 0 0.1em 1.7em;
  font-weight: 600;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before {
  left: 0;
  top: 0.35em;
}
.md-typeset .info > .admonition-title::before {
  background-color: var(--apple-blue);
}
.md-typeset .warning > .admonition-title::before {
  background-color: var(--apple-orange);
}
.md-typeset .note > summary::before,
.md-typeset summary::after {
  background-color: var(--md-default-fg-color--light);
}
.md-typeset summary::after {
  right: 0;
  top: 0.35em;
}
/* Gelijke ruimte boven en onder, ook als het antwoordenblok dicht is.
   (Material haalt standaard de onderste opvulling weg bij een gesloten blok.) */
html .md-typeset .admonition > :last-child,
html .md-typeset details > :last-child {
  margin-bottom: 0;
}
.md-typeset details:not([open]) {
  padding-bottom: 0.9em;
}
.md-typeset details[open] > summary {
  margin-bottom: 0.6em;
}

/* ---------- Labels en tijdstempels (zie labels.js) ---------- */

.md-typeset .label {
  display: inline-block;
  font-size: 0.74em;
  font-weight: 500;
  line-height: 1.5;
  padding: 0 0.6em;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: 0.08em;
}
.md-typeset .label--board {
  color: var(--apple-indigo);
  background-color: var(--apple-indigo-tint);
}
.md-typeset .label--unclear {
  color: var(--apple-amber);
  background-color: var(--apple-amber-tint);
}
.md-typeset .label--book {
  color: var(--apple-meta, var(--md-default-fg-color--light));
  background-color: var(--apple-fill);
}

.md-typeset em.ts {
  font-style: normal;
  font-weight: 400;
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
  color: var(--apple-meta, var(--md-default-fg-color--light));
  margin-left: 0.4em;
}

/* ---------- Wiskunde ---------- */

.md-typeset .arithmatex mjx-container[display="true"] {
  margin: 0.8em 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Material geeft losse formules op smalle schermen 'width: min-content' en
   elke svg 'max-width: 100%'. Bij de SVG-uitvoer van MathJax krimpt de formule
   daardoor tot 1 pixel en verdwijnt hij op telefoons. Volle breedte, en brede
   formules (matrices) scrollen in plaats van te krimpen. */
.md-typeset div.arithmatex > mjx-container {
  width: auto;
}
.md-typeset div.arithmatex mjx-container > svg {
  max-width: none;
}

/* De onzichtbare MathML-kopie voor schermlezers is even breed als de formule.
   Bij een lange formule in de lopende tekst maakte die de pagina op telefoons
   breder dan het scherm. */
.md-typeset mjx-container > mjx-assistive-mml {
  max-width: 100%;
}

/* ---------- Voettekst: vorige / volgende college ---------- */

.md-footer {
  background-color: transparent;
  color: var(--md-default-fg-color);
  border-top: 1px solid var(--apple-separator);
}
.md-footer__inner {
  max-width: 61rem;
}
.md-footer__link {
  opacity: 1;
}
.md-footer__link:hover,
.md-footer__link:focus {
  opacity: 0.7;
}
.md-footer__title {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.md-footer__direction {
  opacity: 1;
  color: var(--md-default-fg-color--light);
  font-size: 0.6rem;
}
.md-footer__button {
  color: var(--md-default-fg-color--lighter);
}
.md-footer-meta {
  display: none;
}

/* ---------- Kaders: kleur en icoon, zonder dubbele titel ----------
   De sectiekop erboven zegt al wat het is; het gekleurde icoon links
   geeft het kader zijn eigen karakter terug. */

:root {
  --cn-icon-info: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 4.6a1.35 1.35 0 1 1 0 2.7 1.35 1.35 0 0 1 0-2.7Zm1.4 11.2h-2.8v-1.6h.7v-4.1h-.7v-1.6h2.1v5.7h.7Z"/></svg>');
  --cn-icon-star: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.3c.4 0 .7.2.9.6l2.4 4.9 5.4.8c.9.1 1.2 1.2.6 1.8l-3.9 3.8.9 5.4c.2.9-.8 1.5-1.5 1.1L12 18.1l-4.8 2.6c-.8.4-1.7-.2-1.5-1.1l.9-5.4-3.9-3.8c-.6-.6-.3-1.7.6-1.8l5.4-.8 2.4-4.9c.2-.4.5-.6.9-.6Z"/></svg>');
}

.md-typeset .admonition.info > .admonition-title,
.md-typeset .admonition.warning > .admonition-title {
  display: none;
}
.md-typeset .admonition.info > .admonition-title + *,
.md-typeset .admonition.warning > .admonition-title + * {
  margin-top: 0;
}
.md-typeset .admonition.info,
.md-typeset .admonition.warning {
  position: relative;
  padding-left: 3.3em;
}
.md-typeset .admonition.info::before,
.md-typeset .admonition.warning::before {
  content: "";
  position: absolute;
  left: 1.15em;
  top: 1.02em;
  width: 1.35em;
  height: 1.35em;
  -webkit-mask: var(--cn-icon-info) center / contain no-repeat;
  mask: var(--cn-icon-info) center / contain no-repeat;
  background-color: var(--apple-blue);
}
.md-typeset .admonition.warning::before {
  -webkit-mask-image: var(--cn-icon-star);
  mask-image: var(--cn-icon-star);
  background-color: var(--apple-orange-icon);
}
/* Geen opsommingstekens naast het icoon: de regels staan los genoeg. */
[dir] .md-typeset .admonition.info ul,
[dir] .md-typeset .admonition.warning ul {
  list-style: none;
  margin-left: 0;
}
[dir] .md-typeset .admonition.info ul > li,
[dir] .md-typeset .admonition.warning ul > li {
  margin-left: 0;
}
[dir] .md-typeset .admonition.info ul > li + li,
[dir] .md-typeset .admonition.warning ul > li + li {
  margin-top: 0.55em;
}

/* ---------- Zijbalk: geen herhaling van de sitenaam ---------- */

@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title {
    display: none;
  }
}

/* ---------- Startpagina: nieuwste colleges ---------- */

.md-typeset .recent ul {
  list-style: none;
  margin: 0.4em 0 1.6em;
  padding: 0;
}
[dir] .md-typeset .recent li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2em 1em;
  margin: 0;
  padding: 0.6em 0;
  border-bottom: 1px solid var(--apple-separator);
}
.md-typeset .recent li a {
  color: var(--md-default-fg-color);
  font-weight: 500;
}
.md-typeset .recent__meta {
  color: var(--md-default-fg-color--light);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Logo ---------- */

.md-header__button.md-logo .cn-logo,
.md-nav__button.md-logo .cn-logo {
  display: block;
  height: 1.4rem;
  width: 1.4rem;
}
.md-header__button.md-logo .cn-logo {
  color: var(--md-default-fg-color--lighter);
}
.md-nav mjx-container {
  position: relative;
  top: 0.13em;
}