/* ============================================================================
   HU Design System — Canvas content stylesheet
   Loaded account-wide via Canvas brand `css_overrides`
   (https://canvas.edugpt.nl/edugpt-widget/brand/hu.css).

   Ported from the HU Design System (tokens/*.css, ui_kits/canvas/canvas.css,
   components/**). Everything that could touch a real element is scoped under
   `.hu-content` — the wrapper around every generated page body — so Canvas's
   own chrome (global nav, RCE, gradebook, settings) is never restyled.
   The design tokens live on `.hu-content` itself, so they cannot leak globally.

   Why a stylesheet and not inline styles: Canvas's body sanitizer strips
   box-shadow / transform / transition / <style> / @import from page bodies
   (verified on canvas.edugpt.nl 2026-06-15) but keeps class attributes. So all
   visual richness (shadows, hovers, webfonts, tokens) rides here, keyed off the
   classes the generated HTML emits.

   Accessibility: the bright HU blue #00A1E1 (--brand-primary) is decorative
   only (fails text contrast). Text / links / buttons use the AA action tokens
   --action-primary #00658E (white text 6.4:1) and --action-accent #C81E1A (8:1).
   ============================================================================ */

/* ---- Self-hosted webfonts (substitutes for Avenir/HU Display) ------------- */
/* Absolute, same-origin URLs so they resolve regardless of how Canvas hosts
   the css_overrides file. Latin subset (covers Dutch é ë ï ö ü ç). */
@font-face {
  font-family: "Mulish";
  src: url("https://canvas.edugpt.nl/edugpt-widget/brand/fonts/Mulish-400.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("https://canvas.edugpt.nl/edugpt-widget/brand/fonts/Mulish-500.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("https://canvas.edugpt.nl/edugpt-widget/brand/fonts/Mulish-600.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("https://canvas.edugpt.nl/edugpt-widget/brand/fonts/Mulish-700.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("https://canvas.edugpt.nl/edugpt-widget/brand/fonts/Mulish-800.woff2")
    format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("https://canvas.edugpt.nl/edugpt-widget/brand/fonts/Archivo-700.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("https://canvas.edugpt.nl/edugpt-widget/brand/fonts/Archivo-800.woff2")
    format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens (scoped to the content subtree — no global leakage) ----------- */
.hu-content {
  /* palette */
  --hu-blue-50: #e6f6fd;
  --hu-blue-100: #cceefb;
  --hu-blue-200: #99dcf6;
  --hu-blue-500: #00a1e1;
  --hu-blue-600: #0083b8;
  --hu-blue-700: #00658e;
  --hu-blue-800: #004865;
  --hu-blue-900: #002a3b;
  --hu-red-50: #fdeae9;
  --hu-red-200: #f5a6a2;
  --hu-red-500: #e6302b;
  --hu-red-600: #c81e1a;
  --hu-red-700: #a11512;
  --hu-red-800: #7a0f0d;
  --hu-white: #ffffff;
  --hu-gray-50: #f5f7f8;
  --hu-gray-100: #eceff1;
  --hu-gray-200: #dde3e7;
  --hu-gray-300: #c5ced4;
  --hu-gray-400: #9aa7af;
  --hu-gray-500: #6b7b85;
  --hu-gray-600: #4d5c65;
  --hu-gray-700: #36444c;
  --hu-gray-800: #243137;
  --hu-gray-900: #111a1f;
  /* semantic status */
  --hu-success-bg: #e4f4ec;
  --hu-success: #1e8e54;
  --hu-warning-bg: #fdf1dd;
  --hu-warning: #b5740e;
  --hu-danger-bg: var(--hu-red-50);
  --hu-danger: var(--hu-red-600);
  --hu-info-bg: var(--hu-blue-50);
  --hu-info: var(--hu-blue-700);
  /* brand vs action (AA): brand = decorative only, action = text/CTA safe */
  --brand-primary: var(--hu-blue-500);
  --brand-accent: var(--hu-red-500);
  --brand-ink: var(--hu-blue-900);
  --action-primary: var(--hu-blue-700);
  --action-primary-hover: var(--hu-blue-800);
  --action-accent: var(--hu-red-600);
  --action-accent-hover: var(--hu-red-700);
  /* text / surface / border */
  --text-strong: var(--hu-gray-900);
  --text-body: var(--hu-gray-800);
  --text-muted: var(--hu-gray-600);
  --text-inverse: var(--hu-white);
  --text-link: var(--hu-blue-700);
  --text-link-hover: var(--hu-blue-800);
  --surface-card: var(--hu-white);
  --surface-sunken: var(--hu-gray-100);
  --border-subtle: var(--hu-gray-200);
  --border-default: var(--hu-gray-300);
  /* type */
  --font-display: "Archivo", "Avenir", system-ui, sans-serif;
  --font-body: "Mulish", "Avenir", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  /* shadow / motion (allowed here — only stripped from inline body styles) */
  --shadow-sm:
    0 1px 3px rgba(17, 26, 31, 0.08), 0 1px 2px rgba(17, 26, 31, 0.05);
  --shadow-md:
    0 4px 12px rgba(17, 26, 31, 0.08), 0 2px 4px rgba(17, 26, 31, 0.05);
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
  --ease-emphasis: cubic-bezier(0.2, 0, 0, 1);

  /* base container + body typography */
  max-width: 920px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

/* ---- Scoped element resets (override Canvas .user_content within wrapper) -- */
.hu-content h1,
.hu-content h2,
.hu-content h3,
.hu-content h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.hu-content h1 {
  font-size: 30px;
  margin: 0 0 12px;
}
.hu-content h2 {
  font-size: 23px;
  margin: 28px 0 10px;
}
.hu-content h3 {
  font-size: 19px;
  margin: 22px 0 8px;
  font-weight: 700;
}
.hu-content h4 {
  font-size: 17px;
  margin: 18px 0 6px;
  font-weight: 700;
}
.hu-content p {
  margin: 0 0 14px;
}
.hu-content a {
  color: var(--text-link);
  font-weight: 600;
  text-decoration: underline;
  transition: color 120ms var(--ease-standard);
}
.hu-content a:hover {
  color: var(--text-link-hover);
}
.hu-content strong,
.hu-content b {
  font-weight: 700;
  color: var(--text-strong);
}
.hu-content ul,
.hu-content ol {
  padding-left: 22px;
  margin: 0 0 14px;
}
.hu-content li {
  margin-bottom: 6px;
}
.hu-content hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: 24px 0;
}
.hu-content code,
.hu-content kbd,
.hu-content samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.hu-content section {
  margin: 24px 0;
}
.hu-content img {
  max-width: 100%;
  height: auto;
}

/* ---- Hero / page banner (navy) -------------------------------------------- */
.hu-content .cv-hero {
  position: relative;
  overflow: hidden;
  background: var(--hu-blue-900);
  color: #fff;
  margin: 0 0 28px;
  border-radius: var(--radius-md);
}
.hu-content .cv-hero__body {
  position: relative;
  padding: 36px 40px;
}
.hu-content .cv-hero__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hu-blue-200);
  margin-bottom: 8px;
}
.hu-content .cv-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  line-height: 1.06;
  color: #fff;
}
.hu-content .cv-hero__sub {
  color: var(--hu-blue-100);
  font-size: 16px;
  margin: 0;
}
.hu-content .cv-hero__meta {
  display: flex;
  gap: 18px;
  font-size: 14px;
  color: var(--hu-blue-100);
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ---- Prose block ---------------------------------------------------------- */
.hu-content .cv-prose {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
}
.hu-content .cv-prose h2 {
  font-size: 22px;
  margin: 28px 0 10px;
}
.hu-content .cv-prose h3 {
  font-size: 18px;
  margin: 22px 0 8px;
}

/* ---- Panel / two-column / sidebar meta ("Te doen") ------------------------ */
.hu-content .cv-panel {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}
.hu-content .cv-two-col {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}
.hu-content .cv-sidebar-meta {
  display: flex;
  flex-direction: column;
}
.hu-content .cv-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
}
.hu-content .cv-meta-row:last-child {
  border-bottom: 0;
}
.hu-content .cv-meta-row b {
  color: var(--text-strong);
}

/* ---- Module list ---------------------------------------------------------- */
.hu-content .cv-module {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  overflow: hidden;
}
.hu-content .cv-module__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--hu-gray-50);
  border-bottom: 1px solid var(--border-subtle);
}
.hu-content .cv-module__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--text-strong);
  margin: 0;
  flex: 1;
}
.hu-content .cv-module__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px 13px 26px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-link);
}
.hu-content .cv-module__item:last-child {
  border-bottom: 0;
}
.hu-content .cv-module__item-title {
  flex: 1;
  font-size: 14px;
}
.hu-content .cv-module__item-meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* ---- Table (grades / data) ------------------------------------------------ */
.hu-content .cv-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 8px 0 16px;
}
.hu-content .cv-table th {
  text-align: left;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 18px;
  background: var(--hu-gray-50);
  border-bottom: 1px solid var(--border-subtle);
}
.hu-content .cv-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
}
.hu-content .cv-table tr:last-child td {
  border-bottom: 0;
}
.hu-content .cv-table tr:hover td {
  background: var(--hu-gray-50);
}
.hu-content .cv-grade-num {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text-strong);
}

/* ---- Card (kopband-vlak: solid header band + body) ------------------------ */
.hu-content .hu-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 200ms var(--ease-standard),
    transform 200ms var(--ease-standard);
}
.hu-content .hu-card--interactive {
  cursor: pointer;
}
.hu-content .hu-card--interactive:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.hu-content .hu-card--flat {
  box-shadow: none;
}
.hu-content .hu-card__header {
  background: var(--action-primary);
  color: #fff;
  padding: 14px 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.25;
}
.hu-content .hu-card--accent-red .hu-card__header {
  background: var(--action-accent);
}
.hu-content .hu-card--accent-ink .hu-card__header {
  background: var(--hu-blue-900);
}
.hu-content .hu-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.hu-content .hu-card__body > :last-child {
  margin-bottom: 0;
}
.hu-content .hu-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--text-strong);
  line-height: 1.25;
  margin: 0;
}
.hu-content .hu-card__footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---- Alert / callout (pictogram tile + body) ------------------------------ */
.hu-content .hu-alert {
  display: flex;
  align-items: stretch;
  font-family: var(--font-body);
  background: var(--surface-card);
  color: var(--text-body);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 16px 0;
}
.hu-content .hu-alert__tile {
  flex-shrink: 0;
  width: 46px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15px;
  color: #fff;
  font-weight: 800;
  background: var(--hu-gray-500);
}
.hu-content .hu-alert__body {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  padding: 13px 16px;
}
.hu-content .hu-alert__body > :last-child {
  margin-bottom: 0;
}
.hu-content .hu-alert__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 2px;
  line-height: 1.3;
}
.hu-content .hu-alert--info {
  background: var(--hu-info-bg);
  border-color: var(--hu-blue-200);
}
.hu-content .hu-alert--info .hu-alert__tile {
  background: var(--action-primary);
}
.hu-content .hu-alert--success {
  background: var(--hu-success-bg);
  border-color: #a8dbbf;
}
.hu-content .hu-alert--success .hu-alert__tile {
  background: var(--hu-success);
}
.hu-content .hu-alert--warning {
  background: var(--hu-warning-bg);
  border-color: #ebc988;
}
.hu-content .hu-alert--warning .hu-alert__tile {
  background: var(--hu-warning);
}
.hu-content .hu-alert--danger {
  background: var(--hu-red-50);
  border-color: var(--hu-red-200);
}
.hu-content .hu-alert--danger .hu-alert__tile {
  background: var(--action-accent);
}

/* ---- Badge / pill --------------------------------------------------------- */
.hu-content .hu-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: var(--hu-gray-100);
  color: var(--text-strong);
}
.hu-content .hu-badge--blue {
  background: var(--hu-blue-50);
  color: var(--hu-blue-700);
}
.hu-content .hu-badge--red {
  background: var(--hu-red-50);
  color: var(--hu-red-700);
}
.hu-content .hu-badge--green {
  background: var(--hu-success-bg);
  color: var(--hu-success);
}
.hu-content .hu-badge--amber {
  background: var(--hu-warning-bg);
  color: var(--hu-warning);
}
.hu-content .hu-badge--solid-blue {
  background: var(--action-primary);
  color: #fff;
}
.hu-content .hu-badge--solid-red {
  background: var(--action-accent);
  color: #fff;
}
.hu-content .hu-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

/* ---- Button / pill action ------------------------------------------------- */
.hu-content .hu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  padding: 0 20px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background: var(--action-primary);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms var(--ease-standard);
}
.hu-content a.hu-btn {
  text-decoration: none;
  color: #fff;
}
.hu-content .hu-btn:hover {
  background: var(--action-primary-hover);
}
.hu-content .hu-btn--accent {
  background: var(--action-accent);
}
.hu-content a.hu-btn--accent {
  color: #fff;
}
.hu-content .hu-btn--accent:hover {
  background: var(--action-accent-hover);
}
.hu-content .hu-btn--secondary {
  background: transparent;
  color: var(--action-primary);
  border-color: var(--action-primary);
}
.hu-content a.hu-btn--secondary {
  color: var(--action-primary);
}
.hu-content .hu-btn--secondary:hover {
  background: var(--hu-blue-50);
}
.hu-content .hu-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

/* ---- Numbered step / action list (written component) ---------------------- */
.hu-content .hu-steplist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}
.hu-content .hu-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.hu-content .hu-step__num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--action-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hu-content .hu-step__body {
  flex: 1;
  min-width: 0;
}
.hu-content .hu-step__body > :last-child {
  margin-bottom: 0;
}
.hu-content .hu-step__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 4px;
}

/* ---- Progress bar --------------------------------------------------------- */
.hu-content .hu-progress {
  width: 100%;
  margin: 8px 0;
}
.hu-content .hu-progress__head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.hu-content .hu-progress__track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--hu-gray-200);
  overflow: hidden;
}
.hu-content .hu-progress__bar {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--action-primary);
}
.hu-content .hu-progress__bar--accent {
  background: var(--action-accent);
}
.hu-content .hu-progress__bar--success {
  background: var(--hu-success);
}

/* ---- Figure / video ------------------------------------------------------- */
.hu-content figure {
  margin: 18px 0;
}
.hu-content figure img {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.hu-content figcaption {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
}
.hu-content .hu-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin: 18px 0;
  background: var(--hu-gray-900);
}
.hu-content .hu-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Details / accordion -------------------------------------------------- */
.hu-content details {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 12px 0;
  background: var(--surface-card);
}
.hu-content details > summary {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-strong);
  cursor: pointer;
}
.hu-content details[open] > summary {
  margin-bottom: 8px;
}

/* ---- Dyslexie-vriendelijk blok ------------------------------------------- */
.hu-content .hu-dyslexie {
  font-family: "OpenDyslexic", var(--font-body);
  background: #fdf6e3;
  border: 1px solid #e8dcc0;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  line-height: 1.9;
  margin: 16px 0;
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
  .hu-content .cv-two-col {
    grid-template-columns: 1fr;
  }
  .hu-content .cv-hero__body {
    padding: 28px 24px;
  }
  .hu-content .cv-hero__title {
    font-size: 27px;
  }
}

/* ---- Section heading icon (auto-applied by the builder) ------------------- */
.hu-content .hu-secicon {
  height: 1.05em;
  width: auto;
  min-width: 17px;
  vertical-align: -0.14em;
  margin-right: 8px;
  display: inline-block;
}

/* ---- Generic <table> = cv-table look (plain model tables get HU styling).
   Scoped :not(.cv-table) so it never bleeds into the explicit cv-table rules. -- */
.hu-content table:not(.cv-table) {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 8px 0 16px;
  font-size: 14px;
}
.hu-content table:not(.cv-table) th {
  text-align: left;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 18px;
  background: var(--hu-gray-50);
  border-bottom: 1px solid var(--border-subtle);
}
.hu-content table:not(.cv-table) td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.hu-content table:not(.cv-table) tr:last-child td {
  border-bottom: 0;
}
.hu-content table:not(.cv-table) tr:hover td {
  background: var(--hu-gray-50);
}