/* SQL course typography and themes. This is the starting point for all pages.
   Vendor rules are layered so our CSS controls appearance without !important. */
@import url("bootstrap.min.css") layer(vendor);
@import url("../editor/static/codemirror.min.css") layer(vendor);
@import url("course-layout.css?v=20261104-3");
@import url("course-ui.css?v=20261104-3");
@import url("course-pages.css?v=20261104-3");

@font-face {
  font-family: "Jura";
  src: url("Jura-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "SourceCodePro";
  src: url("SourceCodePro-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-body: "Jura", sans-serif;
  --font-code: "SourceCodePro", monospace;
  --text-size: 18px;
  --text-line: 26px;
  --heading-size: 28px;
  --heading-line: 34px;
  --small-size: 14px;
  --small-line: 21px;
  --bg: #262628;
  --surface: #1b1b1d;
  --surface-muted: #222;
  --border: #585858;
  --text: #ddd;
  --keyword: #afe4af;
  --table: #fcfdc6;
  --column: #4c8cfc;
  --function: #72cefd;
  --string: #ef7587;
  --number: #e9be6f;
  --alias: #b44cd8;
  --comment: #929da3;
  --terminal: #2afa15;
  --join-fill: #4c8cfc;
  /* Canvas and SVG text uses diagram coordinates, independent of page text. */
  --diagram-font-20: 400 20px "Jura";
  --diagram-font-60: 400 60px "Jura";
  --diagram-font-12-5: 400 12.5px "Jura";
  --diagram-font-15-7: 400 15.7px "Jura";
  --diagram-font-bold-15-7: 700 15.7px "Jura";
}
html[data-theme="light"] {
  --bg: #fdfdfd;
  --surface: #e4e4e2;
  --surface-muted: #ddd;
  --border: #c7c7c7;
  --text: #000;
  --keyword: #1c00cf;
  --table: #836c28;
  --column: #286c83;
  --function: #ff252e;
  --string: #c41a16;
  --number: #aa0d91;
  --alias: #4e1a7f;
  --comment: #007400;
  --terminal: #0e9300;
}

html { font-size: 16px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-size);
  font-weight: 400;
  line-height: var(--text-line);
  letter-spacing: normal;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2 {
  font-family: var(--font-body);
  font-size: var(--heading-size);
  font-weight: 400;
  line-height: var(--heading-line);
}
h3, h4, h5, h6, .panel-title {
  font-family: var(--font-body);
  font-size: var(--text-size);
  font-weight: 700;
  line-height: var(--text-line);
}
p, ul, ol, table, .panel-body { font-size: inherit; line-height: inherit; }
strong, b, th { font-weight: 700; }
.panel-title { font-weight: 400; }
small, .text-small, .tip, .tip-txt, .course-credits {
  font-size: var(--small-size);
  font-weight: 400;
  line-height: var(--small-line);
}
a { color: inherit; }
pre, code, kbd, samp, .CodeMirror, #chat_uitleg pre, #chat_uitleg code {
  font-family: var(--font-code);
  font-size: var(--text-size);
  line-height: var(--text-line);
}
pre { overflow-x: auto; white-space: pre; }
text { font-family: var(--font-body); }
.svg-inline--fa { display: inline-block; height: 1em; width: 1em; overflow: visible; vertical-align: -.125em; }
/* Diagram labels retain the sizes of their viewBox, rather than page sizes. */
.st3-10, .st4-20, .st4-30, .st3-40 { font-weight: 700; }
.st4-10, .st5-20, .st5-30, .st4-40 { font-size: 60px; }
.st2-h15 { font-family: var(--font-code); }
.st3-h15 { font-size: 12px; }

.intro, .text-center { text-align: center; }
.text-left { text-align: left; }
.course-credits { margin-top: 28px; text-align: center; }
.course-credits a { font-size: var(--text-size); line-height: var(--text-line); }
.course-ui .side-menu { font-family: var(--font-body); line-height: var(--text-line); }
.course-ui .side-menu .menu-list li,
.course-ui .side-menu .menu-list a,
.course-ui .side-menu .menu-group > summary { font-size: var(--text-size); line-height: var(--text-line); font-weight: 700; }
.course-ui .side-menu h3 { font-size: var(--heading-size); line-height: var(--heading-line); }
.course-ui .site-header > .site-title,
.course-ui .site-header > .course-subtitle { font-size: var(--heading-size); font-weight: 400; line-height: var(--heading-line); }
.course-ui .language-link { font-family: var(--font-body); font-size: var(--small-size); font-weight: 700; line-height: var(--small-line); }
.course-ui .menu-close { font-family: var(--font-body); font-size: var(--heading-size); line-height: var(--heading-line); }

/* Reusable replacements for the former per-element style attributes. */
[hidden], .hidden-content { display: none; }
.menu-spacer { list-style: none; }
.cell-padding { padding: 10px; }
.cell-divider { border-bottom: 1px solid var(--border); }
.table-half { width: 50%; margin-inline: auto; }
.table-wide { width: 80%; margin-inline: auto; }
.width-half { width: 50%; }
.join-caption { margin: 20px clamp(12px, 6vw, 100px); }
.copy-source { position: absolute; left: -9999px; }
.inline-form { display: inline; }
.borderless { border: none; }
.indented-note { text-align: left; margin-left: 10%; }
.code-warning { border: 1px dashed #f44; }
.code-success { border: 1px solid #0f0; }
.example-box { width: 80%; margin-inline: auto; padding: 15px; border: 1px solid var(--border); }
.example-narrow { width: min(300px, 100%); margin-inline: auto; }
.example-error { border: 6px double #f00; }
.example-highlight { color: #f80; text-decoration: none; }
.chat-button { margin-left: 10px; }
.chat-loader { margin: 10px; }
.formatted-query { padding: 10px; border: none; font-family: var(--font-code); }

/* Fixed diagram/tool layouts can grow with the new readable text size. */
.panel-body { padding: 15px; overflow-x: auto; }
.panel-default > .panel-heading { color: var(--text); }
table.tabel2 { width: 100%; margin-inline: 0; }
table.tabel2 th { font-weight: 700; }
.btn-row { flex-wrap: wrap; }
body.page-playground .CodeMirror { font-family: var(--font-code); font-size: var(--text-size); line-height: var(--text-line); }
body.page-chatgpt #chat_uitleg { padding: 24px; font-family: var(--font-body); font-size: var(--text-size); line-height: var(--text-line); }
body.page-chatgpt #vraag { width: min(700px, 100%); min-height: 104px; overflow: auto; resize: vertical; field-sizing: content; }
@media (max-width: 600px) {
  .container { padding-inline: 12px; }
  .panel-body { padding: 12px; }
  .table-half, .table-wide, .example-box { width: 100%; }
  div.midden { flex-wrap: wrap; }
  .tabel2-2, .tabel2-2 tbody { display: block; }
  .tabel2-2 tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabel2-2 td { min-width: 0; overflow-wrap: anywhere; }
}