/* Gemeenschappelijke cursusbediening, gebaseerd op Python Basics. */
.course-ui {
  --ui-bg: #fdfdfd;
  --ui-fg: #000;
  --ui-surface-2: #e4e4e2;
  --ui-surface-3: #c7c7c7;
  --ui-border: color-mix(in oklab, #c7c7c7 55%, transparent);
  --ui-hover: color-mix(in oklab, #e4e4e2 82%, transparent);
  --ui-muted: color-mix(in oklab, #000 55%, #c7c7c7 45%);
  --ui-accent: #286c83;
}
html[data-theme="dark"] .course-ui {
  --ui-bg: #262628;
  --ui-fg: #ddd;
  --ui-surface-2: #1b1b1d;
  --ui-surface-3: #585858;
  --ui-border: color-mix(in oklab, #585858 55%, transparent);
  --ui-hover: color-mix(in oklab, #1b1b1d 82%, transparent);
  --ui-muted: color-mix(in oklab, #ddd 55%, #585858 45%);
  --ui-accent: #4c8cfc;
}
.course-ui .side-menu {
  box-sizing: border-box;
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--ui-menu-width, max-content);
  max-width: calc(100vw - 32px);
  height: 100dvh;
  background: var(--ui-bg);
  color: var(--ui-fg);
  border: 0;
  border-inline: 1px solid var(--ui-border);
  border-radius: 0;
  transform: translateX(calc(-100% - 1px));
  transition: transform .25s ease;
  z-index: 1100;
  font-family: "Jura", sans-serif;
  font-size: 16.8px; /* font-size-audit-allow: hoofdmenu zoals Python */
  line-height: 24px;
}
.course-ui.menu-open .side-menu { transform: translateX(0); }
.course-ui .side-menu__inner {
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  padding: 16px 16px 32px;
}
.course-ui .side-menu h3 {
  margin: 0 0 9.6px;
  font: 500 24px/1.1 "Jura", sans-serif;
  color: var(--ui-fg);
  text-align: left;
}
.course-ui .menu-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  background: var(--ui-bg);
}
.course-ui .side-menu .menu-heading h3 { margin: 0; }
.course-ui .menu-close {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-fg);
  font: 400 24px/1 system-ui, sans-serif;
  cursor: pointer;
}
.course-ui .menu-close:hover { background: var(--ui-hover); }
.course-ui .side-menu .menu-list,
.course-ui .side-menu #menu {
  position: static;
  box-sizing: border-box;
  width: auto;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  transform: none;
}
.course-ui .side-menu .menu-list li,
.course-ui .side-menu #menu li {
  margin: 4px 0;
  padding: 0;
  list-style: none;
  font-size: 16.8px !important; /* font-size-audit-allow: hoofdmenu zoals Python */
  font-weight: 700;
  line-height: 24px;
}
.course-ui .side-menu .menu-list li.menu-extras-start,
.course-ui .side-menu #menu li.menu-extras-start { margin-top: 24px; }
.course-ui .side-menu .menu-list a {
  display: block;
  padding: 8px 4px;
  border: 0;
  border-radius: 8px;
  color: var(--ui-fg) !important;
  font: 700 16.8px/24px "Jura", sans-serif; /* font-size-audit-allow: hoofdmenu zoals Python */
  text-decoration: none;
  overflow-wrap: anywhere;
}
.course-ui .side-menu .menu-list--flat li,
.course-ui .side-menu #menu.menu-list--flat li { margin-block: 2px; }
.course-ui .side-menu .menu-list--flat a { padding-block: 4px; }
.course-ui .side-menu .menu-list--flat li.menu-extras-start,
.course-ui .side-menu #menu.menu-list--flat li.menu-extras-start { margin-top: 24px; }
.course-ui .side-menu .menu-list a:hover,
.course-ui .side-menu .menu-list a:focus-visible { background: var(--ui-hover); }
.course-ui .side-menu .menu-list a:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.course-ui .side-menu .menu-group {
  margin: 8.8px 0;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
}
.course-ui .side-menu .menu-group > summary {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7.2px;
  align-items: center;
  padding: 8.8px 9.6px;
  list-style: none;
  cursor: pointer;
  background: var(--ui-hover);
  color: var(--ui-fg);
  font: 700 16.8px/24px "Jura", sans-serif; /* font-size-audit-allow: hoofdmenu zoals Python */
}
.course-ui .menu-group > summary::-webkit-details-marker { display: none; }
.course-ui .menu-group > summary::before {
  content: "▸";
  display: inline-block;
  color: var(--ui-muted);
  transition: transform .15s ease;
}
.course-ui .menu-group[open] > summary::before { transform: rotate(90deg); color: var(--ui-accent); }
.course-ui .side-menu .menu-sublist { list-style: none; margin: 5.6px 0 10.4px; padding: 0; }
.course-ui .side-menu .menu-sublist a { padding: 6.72px 9.6px 6.72px 26.4px; }
.course-ui .side-menu .nummer { display: inline; width: auto; padding: 0; border: 0; }
.course-ui .hamburger,
.course-ui .theme-toggle {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 6px;
  border: 0;
  background: transparent;
  color: var(--ui-fg);
  cursor: pointer;
}
.course-ui .hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.course-ui .hamburger .bar {
  position: static;
  display: block;
  width: 22px;
  height: 2px;
  margin: 0;
  background: var(--ui-fg);
  border-radius: 1px;
  text-decoration: none;
}
.course-ui .header-actions { display: flex; align-items: center; gap: 4px; }
.course-ui .header-actions > .theme-toggle { position: static; }
.course-ui .theme-toggle { display: inline-grid; place-items: center; }
.course-ui .theme-icon { display: inline-block; width: 22px; height: 22px; }
.course-ui .site-header .theme-icon::before { content: "☀️"; font-size: 18px; line-height: 1; } /* font-size-audit-allow: Python-themaicoon */
html[data-theme="dark"] .course-ui .theme-icon::before { content: "🌙"; }
.course-ui .language-switcher { display: inline-flex; align-items: center; }
.course-ui .language-link {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 44px;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ui-fg);
  font: 700 14.4px/1.2 system-ui, sans-serif; /* font-size-audit-allow: taalknop */
  text-decoration: none;
}
.course-ui .language-link:hover { background: var(--ui-hover); text-decoration: none; }
.course-ui .language-link:disabled { opacity: 1; cursor: default; }
.course-ui .site-header span { text-decoration: none; }
.course-ui .hamburger:focus-visible,
.course-ui .theme-toggle:focus-visible,
.course-ui .menu-close:focus-visible,
.course-ui .language-link:focus-visible { outline: 2px solid var(--ui-fg); outline-offset: 2px; }

/* De oude SQL-/Adobe-HTML blijft zonder JavaScript bruikbaar. */
/* Compacte bovenkant zoals /html-css/welkom-bij-de-html-css-cursus.
   25.6px bovenruimte, een bedieningsrij en 32px tot de paginatitel.
   Grid laat lange titels op mobiel meegroeien zonder knoppen te overlappen. */
.course-ui.course-home .site-header,
.course-ui.legacy-course-ui .site-header {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 0 8px;
  width: 100%;
  margin: 25.6px 0 0;
  padding: 8px 16px 0;
  background: transparent;
}
.course-ui.course-home .site-header > .site-title,
.course-ui.legacy-course-ui .site-header > .site-title {
  grid-column: 2;
  grid-row: 1;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  font: 500 28px/1.1 "Jura", sans-serif;
  text-align: center;
  overflow-wrap: anywhere;
}
.course-ui.course-home .site-header > .course-subtitle,
.course-ui.legacy-course-ui .site-header > .course-subtitle {
  grid-column: 1 / -1;
  grid-row: 2;
  box-sizing: border-box;
  width: 100%;
  margin: 40px 0 0;
  padding: 0;
  font: 500 28px/1.1 "Jura", sans-serif;
  text-align: center;
}
.course-ui.course-home .site-header > .hamburger,
.course-ui.legacy-course-ui .site-header > .hamburger {
  position: static;
  grid-column: 1;
  grid-row: 1;
}
.course-ui.course-home .site-header > .header-actions,
.course-ui.legacy-course-ui .site-header > .header-actions {
  position: static;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
/* De eerste alinea volgt op dezelfde afstand als in het HTML/CSS-voorbeeld. */
.course-ui.course-home main.container,
.course-ui.legacy-course-ui > .container {
  display: flow-root;
  margin-top: 25.6px;
}
.course-ui.course-home main .md.container { margin-block: 0; }
.course-ui.course-home .md > .midden2:first-child > p:first-child,
.course-ui.course-home main.md > p:first-child,
.course-ui.course-home main .md > p:first-child,
.course-ui.course-home .welcome-intro > p:first-child { margin-top: 0; }
.course-ui.course-home > .welcome-intro { margin-top: 25.6px !important; }
.legacy-course-ui #theme-switcher { display: none; }
.legacy-course-ui .backdrop { position: fixed; inset: 0; z-index: 1050; background: transparent; }
.legacy-course-ui .backdrop[hidden] { display: none; }
@media (max-width: 640px) {
  .course-ui .language-link span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .course-ui .side-menu, .course-ui .menu-group > summary::before { transition: none; }
}