/* Basis - Trac-stam (Roboto, rode links) met FreeBSD Handbook-elementen
   (donkere codeblokken) en een moderne twist. */
:root {
  --rood: #b00;           /* linkkleur zoals de oude Trac-site */
  --rood-donker: #500;
  --grijs-licht: #f2f2f2;
  --grijs-rand: #e4e4e4;
  --code-bg: #272727;      /* pre-achtergrond FreeBSD Handbook */
  --code-fg: #eeeef1;
  --hl-achter: #fbffb6;   /* Trac highlight-kleur */
}
* { box-sizing: border-box; }
html { overflow-y: scroll; }
body {
  font-family: Roboto, 'Segoe UI', system-ui, sans-serif;
  color: #1c1c1c;
  background: #fff;
  max-width: 54rem;
  margin: 0 auto;
  padding: 0 1rem 3rem;
  line-height: 1.65;
  font-size: 1.02rem;
}
main { min-height: 60vh; }

/* Koppen */
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.018em;
                         line-height: 1.25; scroll-margin-top: 1rem; }
article > h1 { font-size: 1.9rem; margin: 0.4rem 0 0.2rem; }
h2 { font-size: 1.4rem; margin-top: 2rem;
     border-bottom: 1px solid #ccb; padding-bottom: 0.15rem; }
h3 { font-size: 1.15rem; margin-top: 1.6rem; }
/* brede elementen niet onder de zwevende ToC door laten lopen:
   ze gaan ernaast staan zolang de ToC hoogte in beslag neemt */
h2, figure.code, figure.output, blockquote, div.tabel { display: flow-root; }
h2, h3, h4 { page-break-after: avoid; }
h1:target, h2:target, h3:target, h4:target {
  background: var(--hl-achter);
  box-shadow: 0 0 0.4em 0.1em rgba(172, 172, 172, 0.25); }
.anker { opacity: 0; text-decoration: none; color: #bbb;
         font-size: 0.75em; margin-left: 0.3em; font-weight: normal; }
.anker:hover { color: var(--rood); opacity: 1; }
h1:hover .anker, h2:hover .anker, h3:hover .anker,
h4:hover .anker, h5:hover .anker, h6:hover .anker { opacity: 1; }

/* Links (Trac-stijl) */
a { color: var(--rood); text-decoration: none;
    border-bottom: 1px dotted #bbb; }
a:hover { color: var(--rood-donker); background: rgba(238, 238, 238, 0.5);
          border-bottom-style: solid; border-radius: 0.1em; }
article > h1 a, .titelbalk a, nav a, .anker { border-bottom: none; }
nav a:hover, .titelbalk a:hover { background: transparent; }

/* Header met logo */
header.site { border-bottom: 3px solid var(--rood);
              padding-bottom: 0.6rem; margin-bottom: 1.6rem; }
.titelbalk { display: flex; align-items: center; gap: 0.8rem;
             margin-top: 0.8rem; }
.titelbalk img { width: 3.2rem; height: 3.2rem; border-radius: 0.4rem; }
.titelbalk h1 { margin: 0; font-size: 1.7rem; }
.titelbalk h1 a { color: #1c1c1c; }
.sub { color: #666; font-size: 0.88rem; }

/* Hoofdnavigatie (Trac-tabs, modern: pills) */
nav.hoofd { display: flex; gap: 0.3rem; margin: 0.9rem 0 0;
            flex-wrap: wrap; }
nav.hoofd a {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--grijs-rand);
  border-radius: 0.45rem;
  background: linear-gradient(to bottom, #fafafa, #f2f2f2);
  color: #666;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.78rem;
}
nav.hoofd a:hover { background: linear-gradient(to bottom, #888, #333);
                    color: #eee; border-color: #333; }
nav.hoofd a.actief { background: #333; color: #fff; border-color: #555; }

/* Code - FreeBSD Handbook: donkere blokken, lichte inline-code */
figure.code { margin: 1.2rem 0; }
figure.code pre {
  background: var(--code-bg); color: var(--code-fg);
  border-radius: 0.45rem; padding: 0.9rem 1rem;
  overflow-x: auto; font-size: 0.85rem; line-height: 1.5;
  margin: 0;
}
/* uitvoer-blok: licht, zoals de literalblocks in het FreeBSD Handbook */
figure.output { margin: 1.2rem 0; }
figure.output pre {
  background: #f4f4f4; color: #444;
  border: 1px solid #e4e4e4; border-radius: 0.45rem; padding: 0.9rem 1rem;
  overflow-x: auto; font-size: 0.85rem; line-height: 1.5;
}
figure.output code { background: transparent; padding: 0; }
pre { background: var(--code-bg); color: var(--code-fg);
      border-radius: 0.45rem; padding: 0.9rem 1rem;
      overflow-x: auto; font-size: 0.85rem; line-height: 1.5; }
code { font-family: Menlo, Consolas, Monaco, 'Liberation Mono', monospace; }
:not(pre) > code {
  background: #f4f4f4; color: #444;
  padding: 0.08em 0.35em; border-radius: 0.25em; font-size: 0.88em;
}
/* syntax-kleuren (highlight.js-achtig palet op donker) */
.hl.c { color: #8b959e; font-style: italic; }
.hl.s { color: #98c379; }
.hl.k { color: #c678dd; font-weight: 500; }
.hl.n { color: #d19a66; }
.hl.v { color: #e06c75; }
.hl.o { color: #a8b3bd; }

/* Tabellen (Trac: dunne #ccb-randen) */
table { border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; }
th, td { border: 1px solid #ccb; padding: 0.3rem 0.65rem;
         text-align: left; }
th { background: var(--grijs-licht); }
tr:nth-child(2n) td { background: #fafafa; }

/* Overige elementen */
img { max-width: 100%; height: auto; border-radius: 0.3rem; }
blockquote { border-left: 4px solid #ccb; margin: 1rem 0; padding: 0.2rem 1rem;
             color: #555; background: #fafafa; border-radius: 0 0.3rem 0.3rem 0; }
hr { border: none; border-top: 1px solid #ccb; margin: 2rem 0; }
.meta { color: #777; font-size: 0.85rem; margin-bottom: 1.5rem; }
ul.outline, ul.titleindex { columns: 2 14rem; padding-left: 1.2rem; }
.berichten li { margin-bottom: 0.4rem; list-style: none; }
.jaar { font-size: 1.3rem; color: var(--rood); margin: 1.5rem 0 0.4rem; }
.macro { background: #fff3cd; padding: 0 0.3em; border-radius: 0.25em; }
.bijlagen { margin-top: 2rem; }
/* bronlink onderaan de pagina (opvolger van Tracs 'Download in other formats') */
.bron {
  margin-top: 2.2rem; border-top: 1px dotted #ccb; padding-top: 0.45rem;
  font-size: 0.8rem; color: #999;
}
.bron a { border-bottom: none; }
/* aandachtblokken: Note/Tip/Warning/Caution/Important/TODO.
   flow-root zorgt dat ze NIET onder de zwevende ToC schuiven maar
   ernaast blijven liggen zolang de ToC plaats in beslag neemt. */
.admonition {
  margin: 1.2rem 0; padding: 0.55rem 1rem 0.7rem;
  border-left: 4px solid #999; background: #f8f8f8;
  border-radius: 0 0.35rem 0.35rem 0; font-size: 0.95rem;
  display: flow-root;
}
.admonition p { margin: 0; }
.adm-titel {
  display: block; font-weight: 700; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}
.admonition.note { border-color: #6f93b8; background: #f6f9fc; }
.admonition.note .adm-titel { color: #48678a; }
.admonition.tip { border-color: #74a68c; background: #f5faf7; }
.admonition.tip .adm-titel { color: #4c7a63; }
.admonition.warning { border-color: #c1955c; background: #fdf9f3; }
.admonition.warning .adm-titel { color: #92643a; }
.admonition.caution { border-color: #bb6a6a; background: #fbf5f5; }
.admonition.caution .adm-titel { color: #8f4a4a; }
.admonition.important { border-color: #9a80c4; background: #f9f7fc; }
.admonition.important .adm-titel { color: #6e549a; }
.admonition.todo { border-color: #9a9a9a; background: #f8f8f8; }
.admonition.todo .adm-titel { color: #777; }
/* inhoudsopgave (toc: true): compact geel zweefdoosje naar Trac-voorbeeld */
nav.toc {
  float: right; clear: right;
  width: 17em; max-width: 45%;
  background: #ffd; border: 1px solid #ddc; border-radius: 0.4em;
  box-shadow: 0.15em 0.3em 0.5em 0 #d4d4d4;
  padding: 0.5em 1em; margin: 0 0 1.5em 1.5em;
  font-size: 85%;
}
nav.toc h4.toctitel {
  font-size: 1.15em; margin: 0 0 0.4em; padding: 0;
}
nav.toc ul { list-style: none; margin: 0; padding: 0; }
nav.toc ul ul { padding-left: 1.2em; }
nav.toc li { margin: 0; padding: 0; }
nav.toc > ul > li > a { font-weight: 500; }
@media (max-width: 40em) {
  nav.toc { float: none; width: auto; max-width: none;
            margin: 0 0 1.2em; }
}
.draft { background: #fff3cd; border: 1px solid #d4b106;
         padding: 0.4rem 0.8rem; margin-bottom: 1rem;
         font-size: 0.85rem; border-radius: 0.3rem; }

/* homepage: kaartenraster met de oude WikiStart-indeling */
.kaarten {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem; margin: 1.6rem 0 2rem; align-items: start;
}
.kaart {
  background: #fafafa; border: 1px solid var(--grijs-rand);
  border-top: 3px solid var(--rood); border-radius: 0 0 0.45rem 0.45rem;
  padding: 0.5rem 1rem 0.8rem; font-size: 0.92rem;
}
.kaart h3 { margin: 0.2rem 0 0.5rem; font-size: 1.05rem; }
.kaart ul { margin: 0; padding-left: 1.15rem; }
.kaart li { margin: 0.12rem 0; }
.kaart p { margin: 0.3rem 0; }
/* lange lijsten in twee kolommen binnen de kaart */
.kaart ul.kaartlijst.lang { columns: 2 8.5rem; }
/* speelse kleurwisseling van de kaartrand */
.kaart:nth-child(5n+2) { border-top-color: #2f6ea0; }
.kaart:nth-child(5n+3) { border-top-color: #2e7d4f; }
.kaart:nth-child(5n+4) { border-top-color: #b45309; }
.kaart:nth-child(5n+5) { border-top-color: #6d28d9; }
/* secties met {breed}: over het hele raster */
.kaart.breed { grid-column: 1 / -1; }

/* Footer met versie-informatie */
footer {
  margin-top: 3rem; border-top: 1px solid var(--grijs-rand);
  padding-top: 0.7rem; color: #888; font-size: 0.8rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}