/*
  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;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("../../assets/background-petromax.webp") left center/auto 100vh no-repeat;
  opacity:.28;
}
.site-header,
.container,
.site-footer{
  position:relative;
  z-index:1;
}
.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;
}

.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}
.intro-block{margin:1rem auto 1.25rem}
.intro-block>div{max-width:760px;text-align:center}
.center-list{
  display:inline-block;text-align:left;margin:.25rem auto 1rem;
}
.home-learn-grid{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}
.note{
  padding:12px 14px;border:1px solid var(--border);border-radius:10px;
  background:var(--card);margin:1rem 0;
}
.note.warn{
  border-color:#7a5a12;
  background:#fff4c2;
  color:#1f1a0a;
}
.note.warn a{
  color:#143f8f;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
html[data-theme="dark"] .note.warn{
  border-color:color-mix(in oklab,var(--geel) 55%,var(--border) 45%);
  background:var(--card);
  color:var(--fg);
}
html[data-theme="dark"] .note.warn a{color:var(--link)}
.warning{color:var(--rood);font-weight:700}
.media-video{display:block;width:100%;height:auto}
.md figure{margin:1rem 0}
.md figure img{
  display:block;max-width:100%;height:auto;border:1px solid var(--border);
  border-radius:8px;background:var(--surface-2);
}
.md figcaption{margin-top:.4rem;color:var(--muted);font-size:.95rem}
.figure-grid{display:grid;gap:1rem;margin:1rem 0}
.figure-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.figure-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;margin:1rem 0;
}
.product-card{
  margin:0;padding:.65rem;border:1px solid var(--border);
  border-radius:8px;background:var(--card);
}
.product-card img{width:100%;aspect-ratio:1/1;object-fit:contain}
.product-card a{text-decoration:none}
.product-card a:hover{text-decoration:underline}
.product-name{font-weight:700;margin:.5rem 0 .15rem}
.product-price{color:var(--muted);font-size:.95rem}
.parts-catalog{margin-top:1rem}
.site-footer{padding:2rem 1rem 6rem;color:var(--muted);text-align:center}

@media (max-width:640px){
  body::before{opacity:.14}
  .container{margin:1.25rem auto}
  .site-title{font-size:1.55rem}
  .language-link span:last-child{display:none}
  .figure-grid.cols-2,
  .figure-grid.cols-3,
  .product-grid{grid-template-columns:1fr}
}

@media (min-width:641px) and (max-width:900px){
  .figure-grid.cols-3,
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}