/*
  Crossway Theme v0.1.0
  Gebaseerd op de Python/HTML-CSS cursuslayout.
*/

:root{
  --bg:#FDFDFD;--bg-donker:#E4E4E2;--bg-lichter:#C7C7C7;--text:#000000;
  --groen:#1C00CF;--geel:#836C28;--donkerblauw:#286C83;--lichtblauw:#FF252E;
  --rood:#C41A16;--oranje:#AA0D91;--paars:#4E1A7F;--grijs:#007400;
  --surface:var(--bg);--surface-2:var(--bg-donker);--surface-3:var(--bg-lichter);
  --fg:var(--text);--border:color-mix(in oklab,var(--surface-3) 55%,#0000);
  --hover:color-mix(in oklab,var(--surface-2) 82%,#0000);
  --card:color-mix(in oklab,var(--surface) 88%,var(--surface-2) 12%);
  --link:var(--donkerblauw);--header-bg:var(--card);--header-border:var(--border);
  --muted:color-mix(in oklab,var(--fg) 55%,var(--surface-3) 45%);
  --code-bg:color-mix(in oklab,var(--surface-2) 85%,#0000);
  --terminal-accent:#0e9300;
  --tok-comment:color-mix(in oklab,var(--grijs) 80%,var(--fg) 20%);
  --tok-punct:color-mix(in oklab,var(--fg) 75%,transparent);
  --tok-kw:color-mix(in oklab,var(--paars) 90%,var(--fg) 10%);
  --tok-func:color-mix(in oklab,var(--donkerblauw) 95%,var(--fg) 5%);
  --tok-class:color-mix(in oklab,var(--donkerblauw) 85%,var(--fg) 15%);
  --tok-string:color-mix(in oklab,var(--geel) 90%,var(--fg) 10%);
  --tok-num:color-mix(in oklab,var(--oranje) 90%,var(--fg) 10%);
  --tok-bool:var(--tok-num);
  --tok-attr:color-mix(in oklab,var(--groen) 90%,var(--fg) 10%);
  --tok-builtin:color-mix(in oklab,var(--lichtblauw) 90%,var(--fg) 10%);
  --tok-regex:color-mix(in oklab,var(--paars) 80%,var(--fg) 20%);
  --tok-del:color-mix(in oklab,var(--rood) 95%,var(--fg) 5%);
  color-scheme:light dark;
}

html[data-theme="dark"]{
  --bg:#262628;--bg-donker:#1b1b1d;--bg-lichter:#585858;--text:#dddddd;
  --groen:#afe4af;--geel:#fcfdc6;--donkerblauw:#4c8cfc;--lichtblauw:#72cefd;
  --rood:#ef7587;--oranje:#e9be6f;--paars:#b44cd8;--grijs:#929da3;
  --surface:var(--bg);--surface-2:var(--bg-donker);--surface-3:var(--bg-lichter);--fg:var(--text);
  --terminal-accent:#2afa15;
}

*{box-sizing:border-box}
html{font-size:16px;overflow-y:scroll}
body{
  margin:0;background:var(--surface);color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.container{max-width:1080px;margin:2rem auto;padding:0 1rem}
h1,h2,h3{margin:0 0 .6rem;line-height:1.2;letter-spacing:0}
h1{text-align:center}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.site-header{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;
  padding:.5rem 1rem;background:var(--header-bg);
}
.site-title{
  position:absolute;left:50%;transform:translateX(-50%);max-width:calc(100% - 12rem);
  justify-self:center;margin:0;font-weight:600;text-decoration:none;color:var(--fg);
  font-size:clamp(1.9rem,1.1rem + 2vw,2.6rem);line-height:1.2;text-align:center;
}
.header-actions{display:flex;align-items:center;gap:.4rem;grid-column:3;position:relative;z-index:1}
.hamburger,.theme-toggle{
  width:40px;height:40px;border:0;background:transparent;color:var(--fg);cursor:pointer;
}
.hamburger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;grid-column:1;position:relative;z-index:1}
.hamburger .bar{width:22px;height:2px;background:var(--fg);border-radius:1px;display:block}
.theme-toggle{display:inline-grid;place-items:center}
.theme-icon{width:22px;height:22px;display:inline-block}
html:not([data-theme="dark"]) .theme-icon::before{content:"☀️";font-size:18px;line-height:1}
html[data-theme="dark"] .theme-icon::before{content:"🌙";font-size:18px;line-height:1}

.language-switcher{display:flex;align-items:center;gap:.35rem}
.language-link{
  display:inline-flex;align-items:center;gap:.25rem;min-height:32px;
  border:1px solid var(--border);border-radius:8px;padding:.2rem .45rem;color:var(--fg);
}
.language-link:hover{background:var(--hover);text-decoration:none}

.side-menu{
  position:fixed;inset:0 auto 0 0;width:min(280px,80vw);background:var(--surface);
  border-right:1px solid var(--border);transform:translateX(-100%);
  transition:transform .25s ease;z-index:1100;
}
.side-menu__inner{height:100%;overflow:auto;padding:1rem 1rem 2rem}
.menu-list{list-style:none;padding:0;margin:.5rem 0 0 0}
.menu-list li{margin:.25rem 0}
.menu-list a{display:block;padding:.5rem .25rem;border-radius:.5rem;color:var(--fg);text-decoration:none}
.menu-list a:hover,.menu-list a:focus{background:var(--hover)}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:1050;display:none}
body.menu-open .side-menu{transform:translateX(0)}
body.menu-open .backdrop{display:block}

.md p a,.md li a{
  color:color-mix(in oklab,var(--fg) 20%,blue 80%);
  border-bottom:1px solid transparent;
}
html[data-theme="dark"] .md p a,
html[data-theme="dark"] .md li a{
  color:color-mix(in oklab,var(--fg) 80%,blue 20%);
}
.md p a:hover,.md li a:hover{border-bottom-color:currentColor;text-decoration:none}
.md pre{
  background:var(--code-bg);padding:.75rem;overflow:auto;border-radius:10px;border:1px solid var(--border);
}
.md code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}

.codebox .prompt,
.md pre .prompt{color:var(--terminal-accent);font-weight:600}
.token.comment,.token.prolog,.token.doctype,.token.cdata{color:var(--tok-comment);font-style:italic}
.token.punctuation{color:var(--tok-punct)}
.token.keyword{color:var(--tok-kw);font-weight:700}
.token.function{color:var(--tok-func)}
.token.class-name,.token.constant,.token.symbol{color:var(--tok-class)}
.token.string,.token.attr-value{color:var(--tok-string)}
.token.attr-name,.token.property,.token.selector,.token.inserted{color:var(--tok-attr)}
.token.number,.token.boolean{color:var(--tok-num)}
.token.builtin,.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:var(--tok-builtin)}
.token.regex,.token.important,.token.variable{color:var(--tok-regex)}
.token.deleted{color:var(--tok-del)}
code[class*="language-"],
pre[class*="language-"]{
  text-shadow:none!important;
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
}
html[data-theme="dark"] code[class*="language-"],
html[data-theme="dark"] pre[class*="language-"]{
  -webkit-font-smoothing:subpixel-antialiased;
}
html[data-theme="dark"] pre[class*="language-"]{
  background:var(--bg-donker)!important;
  border-color:color-mix(in oklab,var(--border) 85%,transparent);
}
html[data-theme="dark"] pre[class*="language-"],
html[data-theme="dark"] code[class*="language-"]{
  color:color-mix(in oklab,var(--fg) 96%,#fff 4%);
}
.token.operator{background:transparent!important}

.md details.accordion{
  background:transparent;border:1px solid var(--bg-lichter);
  border-radius:16px;overflow:hidden;margin:.8rem 0;
}
.md details.accordion>summary{
  list-style:none;cursor:pointer;margin:0;display:grid;grid-template-columns:1.25rem 1fr;
  align-items:center;gap:.5rem;color:var(--fg);font-weight:600;
  background:var(--bg-lichter);padding:.6rem .25rem;border:0;border-radius:12px;
}
.md details.accordion>summary::-webkit-details-marker{display:none}
.md details.accordion>summary::before{
  content:"▸";display:inline-block;transform:rotate(0deg);transition:transform .18s ease,color .2s ease;
  color:color-mix(in oklab,var(--fg) 70%,transparent);
}
.md details.accordion[open]>summary::before{transform:rotate(90deg);color:var(--donkerblauw)}
.md details.accordion>*:not(summary){padding:10px 12px 12px 1.25rem}
.md details.accordion ul,
.md details.accordion ol{
  padding-inline-start:2.4rem;
  margin-inline-start:.75rem;
}

.content-spacer {
  display: block;
}

.content-spacer--sm {
  height: .75rem;
}

.content-spacer--md {
  height: 1.25rem;
}

.content-spacer--lg {
  height: 2rem;
}

.md table{width:100%;border-collapse:collapse;margin:1.5rem 0;border-radius:12px;overflow:hidden}
.md table th,.md table td{padding:.5rem .75rem;text-align:left;border-bottom:1px solid var(--border)}
.md table thead th,.md table tr:first-child th{background:var(--bg-lichter);font-weight:900;text-align:center}
.md table tbody tr:nth-child(odd){background:color-mix(in oklab,var(--surface-3) 40%,transparent)}

.document-figure{margin:1.5rem auto;max-width:860px}
.document-figure a{display:block}
.document-figure img{
  display:block;width:100%;height:auto;border:1px solid var(--border);
  border-radius:8px;background:#fff;box-shadow:0 12px 30px color-mix(in oklab,#000 18%,transparent);
}
.document-figure figcaption{margin-top:.5rem;color:var(--muted);font-size:.95rem;text-align:center}

.midden2{display:flex;justify-content:center;align-self:center}
.midden2 p{text-align:center}
.home-learn-grid{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}
.site-footer{padding:2rem 1rem 6rem;color:var(--muted);text-align:center}

@media (max-width:640px){
  .container{margin:1.25rem auto}
  .site-title{font-size:1.55rem}
  .language-link span:last-child{display:none}
}
.contact-form {
  display: grid;
  gap: .45rem;
  width: min(100%, 34rem);
  margin: 1.25rem auto 0;
  padding: 1.25rem;
  border: 1px solid #d5dde5;
  border-radius: 12px;
  background: #f8fafc;
  box-shadow: 0 8px 24px rgb(0 69 128 / 8%);
}

.contact-form label {
  margin-top: .35rem;
  color: #004580;
  font-size: .94rem;
  font-weight: 650;
}

.contact-form input,
.contact-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: .58rem .7rem;
  border: 1px solid currentColor;
  border-radius: .35rem;
  color: inherit;
  background: transparent;
  font: inherit;
}

.contact-form button {
  justify-self: end;
  margin-top: .55rem;
  padding: .62rem 1.35rem;
  border: 0;
  border-radius: .35rem;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-notice {
  max-width: 42rem;
  padding: .8rem 1rem;
  border-radius: .35rem;
}

.form-notice.success { border: 1px solid #299447; }
.form-notice.error { border: 1px solid #c43d3d; }

/* Training Minds-huisstijl uit de voormalige WordPress-site. */
:root,
html[data-theme="dark"],
html[data-theme="light"] {
  --bg: #ffffff;
  --bg-donker: #f3f3f3;
  --bg-lichter: #e8eef3;
  --text: #1b1b1b;
  --donkerblauw: #004580;
  --surface: #ffffff;
  --surface-2: #f3f3f3;
  --surface-3: #e8eef3;
  --fg: #1b1b1b;
  --link: #004580;
  --header-bg: #ffffff;
  --header-border: #dcd7ca;
  --border: #dcd7ca;
  --hover: #f3f3f3;
  --card: #ffffff;
  --muted: #5f6670;
  color-scheme: light;
}

.site-header {
  min-height: 6.25rem;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  grid-template-rows: auto auto;
  padding: .65rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid #dcd7ca;
}

.header-logo-link {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: block;
  line-height: 0;
}

.header-logo {
  display: block;
  width: clamp(145px, 18vw, 220px);
  height: auto;
}

.site-title {
  grid-column: 2;
  grid-row: 1 / 3;
  position: static;
  left: auto;
  transform: none;
  max-width: none;
  color: #004580;
}

.hamburger {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  align-self: start;
}

.site-title,
.side-menu h3,
.menu-list a,
.md h1,
.md h2,
.md h3 {
  color: #004580;
}

.hamburger,
.hamburger .bar {
  color: #004580;
}

.hamburger .bar {
  background: #004580;
}

.side-menu {
  background: #ffffff;
  border-right-color: #004580;
}

.md p a,
.md li a {
  color: #004580;
}

.contact-form input,
.contact-form textarea {
  border: 1px solid #004580;
  border-radius: 10px;
  background: #ffffff;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 3px solid rgb(0 69 128 / 20%);
  outline-offset: 2px;
}

.contact-form button {
  border-radius: 10px;
  background: #004580;
  color: #ffffff;
}

.contact-form button:hover,
.contact-form button:focus {
  background: #003663;
}

.site-footer {
  border-top: 1px solid #dcd7ca;
  background: #ffffff;
}

.container {
  width: min(100% - 2rem, 800px);
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 0;
}

.md > h1,
.md > h2,
.md > h3,
.md > p {
  max-width: 800px;
}

.md > h2:not(:first-child) {
  margin-top: 2rem;
}

.form-notice {
  width: min(100%, 34rem);
  margin: 1rem auto;
}

@media (max-width: 700px) {
  .site-header {
    min-height: 5rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .header-logo-link { grid-column: 1; grid-row: 1; }
  .header-logo { width: 145px; }
  .site-title { display: none; }
  .hamburger { grid-column: 1; grid-row: 2; justify-self: start; }

  .contact-form {
    padding: 1rem;
  }
}