:root {
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", "Fira Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --fs-base: 16px;
    --lh-base: 1.5;
    --fs-h1: 2rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.25rem;
    --fs-h4: 1rem;
    --bp-sm: 30em;
    --bp-lg: 48em;
    --bp-xl: 58em;
    --sidebar-width: 20rem;
    --content-gutter: 0rem;
    --space-0: 0;
    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 2.5rem;
    --radius-1: 3px;
    --radius-2: 4px;
    --underline-thickness: .12em;
    --underline-offset: 2px;
    --color-bg: #fff;
    --color-text: #515151;
    --color-strong: #303030;
    --color-muted: #838383;
    --color-hr-top: #eee;
    --color-hr-bottom: #fff;
    --color-link: #227bb9;
    --color-code-bg: #f9f9f9;
    --color-highlight: #f8f8f8;
    --sidebar-fg: rgba(255, 255, 255, .5);
    --sidebar-bg: #202020;
    --theme-red: #ac4142;
    --theme-orange: #d28445;
    --theme-yellow: #f4bf75;
    --theme-green: #90a959;
    --theme-cyan: #75b5aa;
    --theme-blue: #6a9fb5;
    --theme-magenta: #aa759f;
    --theme-brown: #8f5536;
    --container-max: 42rem;
    --scrollbar-w: 16px;
    --scrollbar-radius: 10px;
    --scrollbar-gap: 0;
    --scrollbar-offset: 2px;
    --lang-bg: #333;
    --lang-fg: #fff;
    --lang-btn-bg: #444;
    --lang-btn-hover: #666;
    --lang-radius: 3px;
    --lang-fs: 12px;
    --lang-btn-fs: 10px;
    --lang-pad-y: 4px;
    --lang-pad-x: 8px;
    --nav-weight: 700;
    --nav-fs: clamp(1.15rem, 0.5vw + 0.95rem, 1.25rem);
    --nav-fs-lg: clamp(1.15rem, 0.5vw + 0.95rem, 1.35rem);
    --nav-gap: .2rem;
    --nav-pad-y: .25rem;

    --player-h: 0px;

    /* pattern vars */
    --pattern-url: url("/images/background.png");
    --pattern-size: 450px;
    --pattern-opacity: 0.08;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--font-sans);
    line-height: var(--lh-base);
    font-size: clamp(16px, calc(16px + 0.004 * (100vi - 320px)), 20px);
}

body {
    color: var(--color-text);
    background: transparent;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    --accent: var(--theme-blue);
    position: relative; /* for the fixed pattern layer */
}

.transition-fade {
  transition: opacity 200ms ease;
}

html.is-animating .transition-fade {
  opacity: 0;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: var(--space-1);
    font-weight: 700;
    line-height: 1.25;
    color: #313131;
    text-rendering: optimizeLegibility;
}

h1 {
    font-size: var(--fs-h1);
}

h2 {
    margin-top: var(--space-2);
    font-size: var(--fs-h2);
}

h3 {
    margin-top: var(--space-3);
    font-size: var(--fs-h3);
}

h4,
h5,
h6 {
    margin-top: var(--space-2);
    font-size: var(--fs-h4);
}

p {
    margin: 0 0 var(--space-2);
}

strong {
    color: var(--color-strong);
}

ul,
ol,
dl {
    margin-top: 0;
    margin-bottom: var(--space-2);
}

dt {
    font-weight: 700;
}

dd {
    margin-bottom: var(--space-1);
}

hr {
    position: relative;
    margin: var(--space-3) 0;
    border: 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #fff;
}

abbr {
    font-size: 85%;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
}

abbr[title] {
    cursor: help;
    border-bottom: 1px dotted #e5e5e5;
}

/* Base code block styling (syntax colours in site-highlight.css) */
code,
pre {
    font-family: var(--font-mono);
}

code {
    padding: .25em .5em;
    font-size: 85%;
    color: #b3555e;
    background: var(--color-code-bg);
    border-radius: var(--radius-1);
}

pre {
    display: block;
    margin: 0 0 var(--space-2);
    padding: var(--space-2);
    font-size: .8rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--color-code-bg);
}

pre code {
    padding: 0;
    font-size: 100%;
    color: inherit;
    background: transparent;
}

blockquote {
    padding: var(--space-1) var(--space-2);
    margin: .8rem 0;
    color: var(--color-muted);
    border-left: .25rem solid #e5e5e5;
}

@media (min-width:30em) {
    blockquote {
        padding-right: 5rem;
        padding-left: 1.25rem;
    }
}

img {
    display: block;
    margin: 0 0 var(--space-2);
    border-radius: 5px;
    max-width: 100%;
}

table {
    margin-bottom: var(--space-2);
    width: 100%;
    border: 1px solid #e5e5e5;
    border-collapse: collapse;
}

td,
th {
    padding: .25rem .5rem;
    border: 1px solid #e5e5e5;
}

tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
    background: var(--color-code-bg);
}

ul.no-bullets {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

ul.no-bullets li {
  padding-left: 0;
}

.muted {
  color: var(--color-muted);
}

.small {
  font-size: 0.75em;
}

.lead {
    font-size: 1.15rem;
    font-weight: 300;
}

.message {
    margin-bottom: var(--space-2);
    padding: var(--space-2);
    color: #717171;
    background: var(--color-code-bg);
}

.container {
    max-width: var(--container-max);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    margin-left: auto;
    margin-right: auto;
}

.masthead {
    padding: var(--space-2) 0;
    margin-bottom: 3rem;
}

.masthead-title {
    margin: 0;
    color: #505050;
}

.masthead-title a {
    color: #505050;
}

.masthead-title small {
    font-size: 75%;
    font-weight: 400;
    color: #c0c0c0;
    letter-spacing: 0;
}

.page,
.post {
    margin-bottom: 4em;
}

.page-title,
.post-title,
.post-title a {
    color: #303030;
}

.page-title,
.post-title {
    margin-top: 0;
}

.post-date {
    display: block;
    margin-top: -.5rem;
    margin-bottom: var(--space-2);
    color: #757575;
}

.related {
    padding: var(--space-3) 0;
    border-top: 1px solid #eee;
}

.related-posts {
    padding-left: 0;
    list-style: none;
}

.related-posts h3 {
    margin-top: 0;
}

.related-posts li small {
    font-size: 75%;
    color: #999;
}

.related-posts li a:hover {
    color: var(--color-link);
    text-decoration: none;
}

.related-posts li a:hover small {
    color: inherit;
}

.pagination {
    overflow: hidden;
    margin-left: calc(-1*var(--space-2));
    margin-right: calc(-1*var(--space-2));
    font-family: inherit;
    color: #ccc;
    text-align: center;
}

.pagination-item {
    display: block;
    padding: var(--space-2);
    border: 1px solid #eee;
}

.pagination-item:first-child {
    margin-bottom: -1px;
}

a.pagination-item:hover {
    background: #f5f5f5;
}

@media (min-width:30em) {
    .pagination {
        margin: 3rem 0;
    }

    .pagination-item {
        float: left;
        width: 50%;
    }

    .pagination-item:first-child {
        margin-bottom: 0;
        border-top-left-radius: var(--radius-2);
        border-bottom-left-radius: var(--radius-2);
    }

    .pagination-item:last-child {
        margin-left: -1px;
        border-top-right-radius: var(--radius-2);
        border-bottom-right-radius: var(--radius-2);
    }
}

/* -------------------------------------------------------
   Blog / taxonomy list styling (Radiobende)
   Goal: readable content on patterned background
-------------------------------------------------------- */

.pagehead {
  margin-bottom: var(--space-3);
}

.pagehead h1 {
  margin: 0 0 var(--space-1);
}

/* Cards container */
.posts {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Card surface */
.postcard {
  padding: var(--space-2);
  border-radius: 12px;

  /* subtle surface on top of pattern */
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px) saturate(1.2);

  /* theme-aware border */
  border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(0, 0, 0, 0));

  /* soft depth */
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
}

/* tighter title spacing inside cards */
.postcard h2 {
  margin: 0 0 0.35rem 0;
}

/* title link: accent-tinted */
.postcard h2 a {
  color: color-mix(in srgb, var(--accent) 85%, #222);
  text-decoration: none;
}
.postcard h2 a:hover,
.postcard h2 a:focus {
  text-decoration: underline;
}

/* Meta line: replaces "muted small" in templates */
.postmeta {
  font-size: 0.82em;
  line-height: 1.35;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
}

/* little accent highlight for author */
.postmeta b {
  color: color-mix(in srgb, var(--accent) 55%, var(--color-strong));
  font-weight: 700;
}

/* Description snippet should not add extra bottom whitespace */
.postcard p {
  margin: 0;
}

/* Hover affordance */
.postcard:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, rgba(0, 0, 0, 0));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
}

/* Reduce glass effect if browser doesn't support it */
@supports not (backdrop-filter: blur(1px)) {
  .postcard {
    background: rgba(255, 255, 255, 0.92);
  }
}

/* Terms (tags/categories) as chips */
.terms-chips{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: var(--space-2);
}

.termchip{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .65rem;
  border-radius: 999px;
  text-decoration: none;

  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(6px) saturate(1.2);

  border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,0));
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

.termchip:hover,
.termchip:focus{
  text-decoration: none;
  border-color: color-mix(in srgb, var(--accent) 28%, rgba(0,0,0,0));
  box-shadow: 0 12px 26px rgba(0,0,0,0.09);
}

.termchip-name{
  color: color-mix(in srgb, var(--accent) 85%, #222);
  font-weight: 700;
}

.termchip-count{
  font-size: 0.78em;
  color: var(--color-muted);
  background: rgba(0,0,0,0.04);
  padding: .15rem .45rem;
  border-radius: 999px;
}

/* -----------------------------
   Consent banner (popup)
------------------------------ */

.rb-consent{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  max-width: 360px;
}

.rb-consent__inner{
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 18px 46px rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
  position: relative;
}

.rb-consent__close{
  position: absolute;
  right: 10px;
  top: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 32px;
  cursor: pointer;
  opacity: 0.7;
}
.rb-consent__close:hover{ opacity: 1; }

.rb-consent__title{
  font-weight: 800;
  margin-right: 28px;
  margin-bottom: 6px;
}

.rb-consent__text{
  font-size: 0.95rem;
  line-height: 1.35;
  opacity: 0.92;
}

.rb-consent__actions{
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.rb-btn{
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.18);
  cursor: pointer;
  font-weight: 700;
}

.rb-btn--primary{
  background: #8fb52e;
  color: #fff;
}

.rb-btn--ghost{
  background: transparent;
  color: rgba(0,0,0,0.85);
}

/* -----------------------------
   Consent toggle (base switch)
   - Base is "dark-surface" (sidebar / dark UI)
   - Uses CSS variables so we can override per context cleanly
------------------------------ */

:root{
  /* Dark-surface defaults */
  --rb-toggle-track-bg: rgba(255,255,255,0.22);
  --rb-toggle-track-bd: rgba(255,255,255,0.35);
  --rb-toggle-knob-bg: rgba(255,255,255,0.92);
  --rb-toggle-label: rgba(255,255,255,0.72);

  --rb-toggle-track-bg-checked: rgba(255,255,255,0.34);
  --rb-toggle-track-bd-checked: rgba(255,255,255,0.55);
  --rb-toggle-knob-bg-checked: rgba(255,255,255,0.92);
}

.rb-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.rb-toggle input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rb-toggle__ui{
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--rb-toggle-track-bg);
  border: 1px solid var(--rb-toggle-track-bd);
  position: relative;
  flex: 0 0 auto;
}

.rb-toggle__ui::after{
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rb-toggle-knob-bg);
  transition: transform 160ms ease, background-color 160ms ease;
}

.rb-toggle input:checked + .rb-toggle__ui{
  background: var(--rb-toggle-track-bg-checked);
  border-color: var(--rb-toggle-track-bd-checked);
}

.rb-toggle input:checked + .rb-toggle__ui::after{
  transform: translateX(18px);
  background: var(--rb-toggle-knob-bg-checked);
}

.rb-toggle__label{
  font-size: 0.72rem;
  line-height: 1.15;
  color: var(--rb-toggle-label);
  font-weight: 500;
}

/* -----------------------------
   Consent toggle (privacy page wrapper)
   - Light background, but keep THEME accent via --accent
------------------------------ */

.rb-consent-toggle{
  margin: 0.75rem 0 1.25rem;
  display: flex;
  justify-content: flex-start; /* zet op center als je wil */
}

/* Light-surface + theme accent overrides */
.rb-consent-toggle{
  --rb-toggle-track-bg: color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,0.06));
  --rb-toggle-track-bd: color-mix(in srgb, var(--accent) 35%, rgba(0,0,0,0.12));
  --rb-toggle-knob-bg: color-mix(in srgb, var(--accent) 75%, rgba(0,0,0,0.22));
  --rb-toggle-label: color-mix(in srgb, var(--accent) 55%, rgba(0,0,0,0.72));

  --rb-toggle-track-bg-checked: color-mix(in srgb, var(--accent) 28%, rgba(0,0,0,0.04));
  --rb-toggle-track-bd-checked: color-mix(in srgb, var(--accent) 55%, rgba(0,0,0,0.12));
  --rb-toggle-knob-bg-checked: color-mix(in srgb, var(--accent) 88%, rgba(0,0,0,0.18));
}