/* ============================================================================
   Blueprint CMS — Default Gaming Dark Theme
   Copyright (C) 2026 DieOuwe — GPL-3.0-or-later
   www.dieouwe.nl | www.slayeralliance.com
   ============================================================================ */

/* ── CSS Variables ─────────────────────────────────────────────────────── */
:root {
  --bg:        #0a0c14;
  --bg2:       #0f1220;
  --surface:   #111827;
  --surface2:  #1a2035;
  --border:    #1e2940;
  --accent:    #6c3df4;
  --accent2:   #a855f7;
  --gold:      #f59e0b;
  --text:      #e2e8f0;
  --text-dim:  #94a3b8;
  --muted:     #8091a7;   /* ≥4.5:1 op --bg/--surface (was #64748b ≈ 4.1:1) */
  --success:   #10b981;
  --warning:   #f59e0b;
  --error:     #ef4444;
  --on-accent: #ffffff;
  --link:      var(--accent2);
  --error-text:   #fca5a5;
  --success-text: #6ee7b7;
  --warning-text: #fcd34d;
  /* RGB-triplets zodat rgba(var(--x-rgb), .2) per thema meekleurt. */
  --accent-rgb:  108, 61, 244;
  --accent2-rgb: 168, 85, 247;
  --surface-rgb: 17, 24, 39;
  --gold-rgb:    245, 158, 11;
  --success-rgb: 16, 185, 129;
  --error-rgb:   239, 68, 68;
  --fg-rgb:      255, 255, 255;   /* tint voor subtiele overlays: wit op donker, donker op licht */
  --radius:    10px;
  --radius-lg: 16px;
  --shadow:    0 8px 32px rgba(0,0,0,.4);
  --glow:      0 0 24px rgba(var(--accent-rgb),.3);
  --font:      'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-heading: var(--font);
  --font-mono: 'Consolas', 'Courier New', monospace;
  --logo-gradient: linear-gradient(135deg, var(--accent2), var(--accent));
  --body-image:
    radial-gradient(ellipse at 15% 0%, rgba(var(--accent-rgb),.12) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(var(--accent2-rgb),.08) 0%, transparent 50%);
  --body-size: auto;
  --body-repeat: repeat;
  --body-attach: scroll;
  color-scheme: dark;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  background-image: var(--body-image);
  background-size: var(--body-size);
  background-repeat: var(--body-repeat);
  background-attachment: var(--body-attach);
}
h1, h2, h3, .cf-logo, .cf-card-header { font-family: var(--font-heading); }
a { color: var(--link); text-decoration: none; transition: color .2s; }
a:hover { color: var(--text); }
img { max-width: 100%; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.cf-container {
  max-width: var(--cf-max-w, 1600px);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

#cf-layout, .cf-layout {
  max-width: var(--cf-max-w, 1600px);
  margin: 2rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: var(--cf-sidebar-l-w, var(--cf-sidebar-w, 280px)) minmax(0, 1fr) var(--cf-sidebar-r-w, var(--cf-sidebar-w, 280px));
  gap: 1.5rem;
  align-items: start;
}
.cf-layout:not(:has(.cf-sidebar)) {
  grid-template-columns: 1fr;
}
.cf-layout:has(#cf-sidebar-left):not(:has(#cf-sidebar-right)) {
  grid-template-columns: var(--cf-sidebar-l-w, var(--cf-sidebar-w, 280px)) minmax(0, 1fr);
}
.cf-layout:not(:has(#cf-sidebar-left)):has(#cf-sidebar-right) {
  grid-template-columns: minmax(0, 1fr) var(--cf-sidebar-r-w, var(--cf-sidebar-w, 280px));
}

/* ── Boxed-layout, logo-afbeelding, headerbanner (thema-instellingen) ──── */
body.cf-layout-boxed { background-color: var(--bg2, var(--bg)); }
body.cf-layout-boxed #cf-page {
  max-width: var(--cf-max-w, 1600px);
  margin: 0 auto;
  background: var(--bg);
  min-height: 100vh;
  box-shadow: 0 0 0 1px var(--border), var(--shadow);
}
body.cf-layout-boxed #cf-page .cf-container,
body.cf-layout-boxed #cf-page .cf-layout { max-width: 100%; }
/* Full-screen / fluid: de inhoud volgt het scherm (breedte via --cf-max-w) */
body.cf-layout-full .cf-container, body.cf-layout-full .cf-layout,
body.cf-layout-fluid .cf-container, body.cf-layout-fluid .cf-layout { width: 100%; }
body.cf-layout-full .cf-container, body.cf-layout-full .cf-layout { padding-inline: clamp(.75rem, 2vw, 2rem); box-sizing: border-box; }
.cf-logo-img { max-height: 2.4rem; max-width: 220px; width: auto; display: block; }
.cf-banner { display: block; padding-block: 1rem 0; }
.cf-banner img {
  width: 100%;
  height: var(--cf-banner-h, 220px);
  object-fit: cover;
  border-radius: var(--radius-lg, 12px);
  display: block;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
#cf-header {
  background: rgba(var(--surface-rgb),.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  min-height: 64px;
  position: sticky;
  top: 0;
  z-index: 100;
}
#cf-header .cf-container { min-height: 64px; padding-block: .5rem; }

/* ── Logo + MOTD (v1.18.0) ── site_motd wordt als kleine regel onder de
   sitetitel getoond; de link zelf werd een kolom zodat beide op elkaar
   kunnen staan zonder de header-hoogte permanent te vergroten. */
.cf-logo-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
  white-space: nowrap;
  flex-shrink: 0;
}

.cf-logo-row {
  display: flex;
  align-items: center;
  gap: .45rem;
}

/* Logo-icoon (v1.25.3) — staat los van .cf-logo zelf omdat die laatste
   -webkit-text-fill-color: transparent gebruikt voor de gradient-tekst;
   dat op een <img> zetten zou 'm gewoon onzichtbaar maken. */
.cf-logo-icon {
  height: 1.7rem;
  width: 1.7rem;
  display: block;
  flex-shrink: 0;
}

.cf-logo {
  font-size: 1.2rem;
  font-weight: 800;
  background: var(--logo-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.cf-motd {
  font-size: .72rem;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
}

.cf-nav {
  display: flex;
  gap: .25rem;
  flex: 1;
}
.cf-nav-link {
  padding: .4rem .9rem;
  border-radius: 6px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-dim);
  transition: color .2s, background .2s;
}
.cf-nav-link:hover, .cf-nav-link.active {
  color: var(--text);
  background: rgba(var(--fg-rgb),.06);
}

.cf-header-actions { display: flex; gap: .5rem; margin-left: auto; flex-shrink: 0; align-items: center; }

/* ── Publieke taalwisselaar (S13 — Multi-language/i18n) ────────────────────
   layout.twig rendert hier één link per Translator::SUPPORTED-locale (NL/EN/
   DE); .active markeert de huidige (server-side via `l == locale` in Twig).
   Tot nu toe stond deze markup er zonder eigen stijl — viel terug op de
   browser-default voor onbekende classes (leesbaar maar rommelig naast de
   .cf-btn-sm's ernaast). */
.cf-lang-switch {
  display: flex;
  gap: .2rem;
  padding: .2rem;
  border-radius: 6px;
  background: rgba(var(--fg-rgb),.04);
  border: 1px solid var(--border);
  margin-right: .3rem;
}
.cf-lang-switch a {
  padding: .3rem .5rem;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-dim);
  transition: color .2s, background .2s;
}
.cf-lang-switch a:hover {
  color: var(--text);
  background: rgba(var(--fg-rgb),.08);
}
.cf-lang-switch a.active {
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

/* ── Header/Topmenu blok-zones (v1.17.0) ───────────────────────────────────
   #cf-header zelf heeft een vaste hoogte, dus deze twee zones staan er los-
   hoog naast/onder zodat blokken met willekeurige inhoud niet overflowen. */
#cf-header-blocks, #cf-topmenu {
  border-bottom: 1px solid var(--border);
  padding: .6rem 0;
  background: rgba(var(--surface-rgb),.6);
}
#cf-topmenu { display: flex; flex-wrap: wrap; gap: .5rem; }
#cf-header-blocks .cf-block, #cf-topmenu .cf-block { margin-bottom: 0; }

/* ── Knoppen ────────────────────────────────────────────────────────────── */
.cf-btn, .cf-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.2rem;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--on-accent);
  font-weight: 600;
  font-size: .875rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .2s, transform .1s, box-shadow .2s;
  box-shadow: 0 3px 12px rgba(var(--accent-rgb),.35);
}
.cf-btn:hover, .cf-btn-sm:hover {
  opacity: .9;
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(var(--accent-rgb),.45);
  color: var(--on-accent);
}
.cf-btn-ghost {
  display: inline-flex; align-items: center; padding: .55rem 1.2rem;
  border-radius: 6px; font-weight: 600; font-size: .875rem; text-decoration: none; cursor: pointer;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  box-shadow: none;
}
.cf-btn-ghost:hover { background: rgba(var(--fg-rgb),.05); color: var(--text); }
.cf-btn-danger,
.cf-btn-danger:hover {
  background: rgba(var(--error-rgb),.12);
  color: var(--error-text);
  border: 1px solid rgba(var(--error-rgb),.5);
  box-shadow: none;
}
.cf-btn-danger:hover { background: rgba(var(--error-rgb),.22); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.cf-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.cf-card:hover { border-color: rgba(var(--accent-rgb),.4); box-shadow: var(--glow); }
.cf-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.cf-card-body { padding: 1.25rem; }

/* ── Nieuws ─────────────────────────────────────────────────────────────── */
.cf-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}
.cf-news-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.cf-news-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.cf-news-img { width: 100%; height: 180px; object-fit: cover; background: var(--surface2); }
.cf-news-body { padding: 1.2rem; }
.cf-news-cat {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--link); margin-bottom: .5rem;
}
.cf-news-title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin-bottom: .6rem; }
.cf-news-title a:hover { color: var(--link); }
.cf-news-summary { color: var(--text-dim); font-size: .875rem; }
.cf-news-meta {
  display: flex; gap: 1rem; margin-top: .9rem;
  font-size: .78rem; color: var(--muted);
  border-top: 1px solid var(--border); padding-top: .7rem;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.cf-sidebar { display: flex; flex-direction: column; gap: 1rem; }

/* ── Formulieren ────────────────────────────────────────────────────────── */
.cf-form-group { margin-bottom: 1.2rem; }
.cf-label {
  display: block; font-size: .8rem; font-weight: 600; margin-bottom: .4rem;
  color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
}
.cf-input, .cf-select, .cf-textarea {
  width: 100%; padding: .65rem 1rem;
  background: rgba(var(--fg-rgb),.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  font-family: var(--font);
}
.cf-input:focus, .cf-select:focus, .cf-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.2);
}
.cf-textarea { min-height: 120px; resize: vertical; }
/* Uitklaplijst van een <select>: het besturingssysteem tekent die zelf (vaak wit);
   zonder eigen kleuren staat er lichte tekst op een witte achtergrond. */
select, select.cf-select { color-scheme: inherit; }
select option, select optgroup {
  background-color: var(--surface2, var(--bg2));
  color: var(--text);
}
select option:checked { background-color: var(--accent); color: var(--on-accent); }
select option:disabled { color: var(--muted); }

/* ── Badges & Tags ──────────────────────────────────────────────────────── */
.cf-badge {
  display: inline-block; padding: .2rem .6rem;
  font-size: .7rem; font-weight: 700; border-radius: 4px;
}
.cf-badge-purple { background: rgba(var(--accent-rgb),.2); color: var(--link); }
.cf-badge-gold   { background: rgba(var(--gold-rgb),.15); color: var(--gold); }
.cf-badge-green  { background: rgba(var(--success-rgb),.15); color: var(--success); }
.cf-badge-gray   { background: rgba(var(--fg-rgb),.08); color: var(--muted); }
.cf-badge-red    { background: rgba(var(--error-rgb),.15); color: var(--error-text); }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.cf-alert { padding: .9rem 1.1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .875rem; }
.cf-alert-error   { background: rgba(var(--error-rgb),.1); border: 1px solid rgba(var(--error-rgb),.3); color: var(--error-text); }
.cf-alert-success { background: rgba(var(--success-rgb),.1); border: 1px solid rgba(var(--success-rgb),.3); color: var(--success-text); }
.cf-alert-warning { background: rgba(var(--gold-rgb),.1); border: 1px solid rgba(var(--gold-rgb),.3); color: var(--warning-text); }

/* ── Admin data-tabellen (Wave 2 — News/Pages/etc. admin-overzichten) ─────── */
.cf-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.cf-table th {
  text-align: left; padding: .7rem 1rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.cf-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cf-table tbody tr:hover { background: rgba(var(--fg-rgb),.02); }
.cf-table tbody tr:last-child td { border-bottom: none; }
.cf-table-actions { display: flex; gap: .5rem; justify-content: flex-end; white-space: nowrap; }
.cf-table-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); }

/* ── Admin toolbar & paginatie (Wave 2) ────────────────────────────────── */
.cf-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; gap: 1rem; }
.cf-pagination { display: flex; gap: .4rem; margin-top: 1.2rem; }
.cf-pagination a, .cf-pagination span {
  padding: .4rem .75rem; border-radius: 6px; font-size: .8rem;
  border: 1px solid var(--border); color: var(--text-dim);
}
.cf-pagination .active { background: rgba(var(--accent-rgb),.2); color: var(--link); border-color: transparent; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
#cf-footer {
  margin-top: 4rem;
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  text-align: center;
  color: var(--muted);
  font-size: .8rem;
}
#cf-footer-blocks { margin-bottom: 1.5rem; text-align: left; }
#cf-footer-blocks .cf-block { margin-bottom: .75rem; }
.cf-footer-links { margin-top: .4rem; }
.cf-footer-links a { color: var(--muted); }
.cf-footer-links a:hover { color: var(--link); }

/* ── Admin Bar (ingelogd) ────────────────────────────────────────────────── */
.cf-admin-bar {
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.25), rgba(var(--surface-rgb),.95));
  border-bottom: 1px solid var(--accent);
  padding: .3rem 1.5rem;
  font-size: .75rem;
  display: flex; align-items: center; gap: 1rem;
  color: var(--muted);
}
.cf-admin-bar a { color: var(--link); }

/* ── Pagina header ──────────────────────────────────────────────────────── */
.cf-page-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.cf-page-header h1 { font-size: 1.8rem; font-weight: 800; }
.cf-page-header .cf-breadcrumb { color: var(--muted); font-size: .85rem; margin-bottom: .5rem; }

/* ── Header-paneel, hamburger en thema-kiezer (Golf 4) ───────────────────── */
.cf-header-panel { display: flex; align-items: center; gap: 1.5rem; flex: 1; min-width: 0; }
.cf-menu-toggle {
  display: none; width: 44px; height: 44px; margin-left: auto; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); cursor: pointer; align-items: center; justify-content: center;
}
.cf-menu-bars, .cf-menu-bars::before, .cf-menu-bars::after {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s, opacity .2s; content: ''; position: relative;
}
.cf-menu-bars::before { position: absolute; top: -6px; }
.cf-menu-bars::after  { position: absolute; top: 6px; }
.nav-open .cf-menu-bars { background: transparent; }
.nav-open .cf-menu-bars::before { top: 0; transform: rotate(45deg); }
.nav-open .cf-menu-bars::after  { top: 0; transform: rotate(-45deg); }

.cf-theme-switch { position: relative; }
.cf-theme-btn {
  width: 36px; height: 36px; border-radius: var(--radius); cursor: pointer; font-size: 1.05rem; line-height: 1;
  background: rgba(var(--fg-rgb),.05); border: 1px solid var(--border); color: var(--text);
}
.cf-theme-btn:hover { background: rgba(var(--fg-rgb),.1); }
.cf-theme-menu {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 200; width: 240px; padding: .6rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.cf-theme-menu[hidden], .cf-theme-switch[hidden] { display: none; }
.cf-theme-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .5rem; }
.cf-theme-modes button, .cf-theme-item {
  font: inherit; font-size: .85rem; color: var(--text); cursor: pointer; text-align: left;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  padding: .5rem .6rem; min-height: 40px;
}
.cf-theme-modes button { text-align: center; }
.cf-theme-modes button.active, .cf-theme-item[aria-checked="true"] {
  border-color: var(--accent); background: rgba(var(--accent-rgb),.14);
}
.cf-theme-list { display: flex; flex-direction: column; gap: .3rem; max-height: 50vh; overflow-y: auto; }
.cf-theme-item { display: flex; align-items: center; gap: .6rem; }
.cf-theme-item:hover, .cf-theme-modes button:hover { background: rgba(var(--fg-rgb),.06); }
.cf-theme-swatch { display: inline-flex; border-radius: 99px; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; }
.cf-theme-swatch i { display: block; width: 14px; height: 18px; }

#cf-content { min-width: 0; }
#cf-content img { height: auto; }
#cf-content pre { overflow-x: auto; max-width: 100%; }
#cf-content table { display: block; max-width: 100%; overflow-x: auto; }
.cf-news-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cf-layout { grid-template-columns: 1fr !important; }
  /* Sidebar-blokken verdwijnen niet meer op mobiel: ze komen ONDER de inhoud. */
  .cf-sidebar { order: 2; }
  #cf-content { order: 1; }
}
@media (max-width: 768px) {
  .cf-container { padding: 0 1rem; gap: 1rem; }
  .cf-layout { padding: 0 1rem; margin: 1.25rem auto; }
  #cf-header .cf-container { flex-wrap: wrap; }
  .cf-menu-toggle { display: inline-flex; }
  .cf-header-panel {
    display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .75rem;
    padding: .5rem 0 1rem; border-top: 1px solid var(--border);
  }
  .nav-open .cf-header-panel { display: flex; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; }
  .cf-nav { flex-direction: column; gap: .2rem; }
  .cf-nav-link { display: flex; align-items: center; min-height: 44px; padding: .5rem .9rem; font-size: 1rem; }
  .cf-header-actions { margin-left: 0; flex-wrap: wrap; gap: .6rem; }
  .cf-header-actions .cf-btn-sm { min-height: 44px; padding-inline: 1rem; }
  .cf-lang-switch a { display: inline-flex; align-items: center; min-height: 36px; padding-inline: .7rem; }
  /* In het uitklapmenu staat de kiezer inline (een zwevend venster zou onder de sticky header buiten beeld vallen). */
  .cf-theme-switch { width: 100%; }
  .cf-theme-btn { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: .5rem; padding: 0 .9rem; font-size: 1rem; }
  .cf-theme-btn::after { content: attr(aria-label); font-size: .95rem; }
  .cf-theme-menu { position: static; width: auto; margin-top: .5rem; box-shadow: none; }
  .cf-theme-list { max-height: none; }
  .cf-news-grid { grid-template-columns: 1fr; }
  .cf-page-header h1 { font-size: 1.45rem; }
  .cf-btn, .cf-btn-sm { min-height: 44px; }
  .cf-input, .cf-select, .cf-textarea { font-size: 16px; min-height: 44px; }  /* geen iOS-zoom bij focus */
  .cf-toolbar { flex-wrap: wrap; }
  #cf-footer { margin-top: 2.5rem; }
}

/* ── Animaties ──────────────────────────────────────────────────────────── */
@keyframes cf-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cf-animate { animation: cf-fade-in .3s ease forwards; }

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  File: blueprint.css | Role: UI | Version: 1.0.0                    ║
   ║  Created: 2026-06-06 | Status: New                                  ║
   ║  Created by Dieouwe — www.dieouwe.nl                                ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Block Systeem ──────────────────────────────────────────────────────── */
.cf-block { margin-bottom: 1rem; }
.cf-block-title {
  font-size: .875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: .7rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}

/* Text block */
.cf-block-text { font-size: .9rem; line-height: 1.6; color: var(--text-dim); }

/* News list block */
.cf-block-news-list { list-style: none; }
.cf-block-news-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: .4rem 0; border-bottom: 1px solid rgba(var(--fg-rgb),.05);
  font-size: .85rem;
}
.cf-block-news-item a { color: var(--text); transition: color .15s; }
.cf-block-news-item a:hover { color: var(--link); }
.cf-block-news-date { color: var(--muted); font-size: .75rem; flex-shrink: 0; margin-left: .5rem; }
.cf-block-more {
  display: inline-block; margin-top: .7rem;
  font-size: .78rem; color: var(--link);
}

/* Login block */
.cf-block-login {
  display: flex; flex-direction: column; gap: .6rem;
}
.cf-block-login--logged-in {
  flex-direction: row; align-items: center; gap: .8rem;
  padding: .7rem; background: rgba(var(--fg-rgb),.03);
  border-radius: 8px; border: 1px solid var(--border);
}
.cf-block-login-avatar { font-size: 2rem; }
.cf-block-login-links { font-size: .78rem; margin-top: .2rem; }
.cf-block-login-links a { color: var(--link); margin-right: .3rem; }
.cf-block-login-register {
  text-align: center; font-size: .78rem; color: var(--muted);
}
.cf-block-login .cf-input { padding: .5rem .8rem; font-size: .85rem; }

/* Stats block */
.cf-block-stats {
  display: flex; flex-direction: column; gap: .5rem;
}
.cf-block-stat-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .7rem;
  background: rgba(var(--fg-rgb),.03);
  border-radius: 6px; border: 1px solid var(--border);
}
.cf-stat-icon   { font-size: 1.1rem; width: 24px; text-align: center; }
.cf-stat-value  { font-size: 1.3rem; font-weight: 800; }
.cf-stat-label  { font-size: .78rem; color: var(--muted); }

/* Empty block placeholder */
.cf-block-empty { color: var(--muted); font-size: .85rem; padding: .5rem 0; }

/* Ad block */
.cf-block-ad { border-radius: 8px; overflow: hidden; }

/* ── Discord Block ──────────────────────────────────────────────────────── */
.cf-discord-widget iframe { max-width: 100%; }
.cf-discord-online  { font-size: .875rem; }
.cf-discord-header  { display:flex; align-items:center; gap:.8rem; margin-bottom:.8rem; }
.cf-discord-logo    { font-size: 1.5rem; }
.cf-discord-guild   { font-weight: 700; }
.cf-discord-count   { font-size: .78rem; color: var(--muted); display:flex; align-items:center; gap:.3rem; }
.cf-discord-dot     { width:8px; height:8px; border-radius:50%; background:var(--success); display:inline-block; }
.cf-discord-members { display:flex; flex-direction:column; gap:.4rem; }
.cf-discord-member  { display:flex; align-items:center; gap:.6rem; font-size:.82rem; }
.cf-discord-avatar-wrap { position:relative; flex-shrink:0; }
.cf-discord-avatar  { width:28px; height:28px; border-radius:50%; object-fit:cover; background:var(--surface2); }
.cf-discord-status  { position:absolute; bottom:-1px; right:-1px; width:8px; height:8px; border-radius:50%; border:2px solid var(--surface); }
.cf-discord-username { font-weight:500; }

/* ── Twitch Block ───────────────────────────────────────────────────────── */
.cf-twitch-block    { font-size:.875rem; }
.cf-twitch-header   { display:flex; align-items:center; gap:.7rem; }
.cf-twitch-logo     { font-size:1.4rem; }
.cf-twitch-channel  { font-weight:700; color:var(--text); }
.cf-twitch-channel:hover { color:#9147ff; }
.cf-twitch-status   { font-size:.75rem; margin-top:.15rem; }
.cf-twitch-status.live    { color:#ef4444; }
.cf-twitch-status.offline { color:var(--muted); }
.cf-twitch-viewers  { margin-left:.4rem; color:var(--muted); }
.cf-twitch-thumb-wrap { position:relative; margin-bottom:.7rem; }
.cf-twitch-thumb    { width:100%; border-radius:8px; display:block; }
.cf-twitch-live-badge {
  position:absolute; top:.5rem; left:.5rem;
  background:#ef4444; color:#fff; font-size:.7rem;
  font-weight:700; padding:.15rem .5rem; border-radius:4px;
}
.cf-twitch-info  { margin-top:.5rem; }
.cf-twitch-title { font-size:.82rem; color:var(--text-dim); margin:.4rem 0 .2rem; line-height:1.3; }
.cf-twitch-game  { font-size:.75rem; color:var(--muted); }
.cf-twitch-embed-wrap { border-radius:8px; overflow:hidden; }

/* ── YouTube Blocks (Golf 10a) ───────────────────────────────────────────── */
.cf-youtube-block    { font-size:.875rem; }
.cf-youtube-header   { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.cf-youtube-logo     { font-size:1.4rem; }
.cf-youtube-avatar   { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.cf-youtube-title    { font-weight:700; color:var(--text); font-size:.9rem; }
.cf-youtube-counts   { font-size:.75rem; color:var(--muted); margin-top:.15rem; }
.cf-youtube-status   { font-size:.75rem; text-decoration:none; }
.cf-youtube-status.offline { color:var(--muted); }
.cf-youtube-offline  { display:flex; align-items:center; gap:.5rem; }
.cf-youtube-thumb-wrap { position:relative; display:block; margin-bottom:.5rem; }
.cf-youtube-thumb    { width:100%; border-radius:8px; display:block; }
.cf-youtube-live-badge {
  position:absolute; top:.5rem; left:.5rem;
  background:#ef4444; color:#fff; font-size:.7rem;
  font-weight:700; padding:.15rem .5rem; border-radius:4px;
}
.cf-youtube-video-title { font-size:.82rem; color:var(--text-dim); line-height:1.3; }
.cf-youtube-latest   { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:.75rem; }
.cf-youtube-video-card { display:block; text-decoration:none; }
.cf-youtube-video-card img { width:100%; border-radius:8px; display:block; margin-bottom:.35rem; }
.cf-youtube-embed-wrap { border-radius:8px; overflow:hidden; }

/* ── Kick Blocks (S10) ────────────────────────────────────────────────────── */
.cf-kick-block    { font-size:.875rem; }
.cf-kick-header   { display:flex; align-items:center; gap:.7rem; }
.cf-kick-logo     { font-size:1.4rem; }
.cf-kick-channel  { font-weight:700; color:var(--text); }
.cf-kick-channel:hover { color:#53fc18; }
.cf-kick-status   { font-size:.75rem; margin-top:.15rem; }
.cf-kick-status.live    { color:#ef4444; }
.cf-kick-status.offline { color:var(--muted); }
.cf-kick-viewers  { margin-left:.4rem; color:var(--muted); }
.cf-kick-thumb-wrap { position:relative; margin-bottom:.7rem; }
.cf-kick-thumb    { width:100%; border-radius:8px; display:block; }
.cf-kick-live-badge {
  position:absolute; top:.5rem; left:.5rem;
  background:#ef4444; color:#fff; font-size:.7rem;
  font-weight:700; padding:.15rem .5rem; border-radius:4px;
}
.cf-kick-info  { margin-top:.5rem; }
.cf-kick-title { font-size:.82rem; color:var(--text-dim); margin:.4rem 0 .2rem; line-height:1.3; }
.cf-kick-game  { font-size:.75rem; color:var(--muted); }
.cf-kick-embed-wrap { border-radius:8px; overflow:hidden; }

/* ── Guild Management ───────────────────────────────────────────────────── */
.cf-guild-members      { display:flex; flex-direction:column; gap:.35rem; }
.cf-guild-member-row   { display:flex; justify-content:space-between; align-items:center;
                          padding:.4rem .5rem; background:rgba(var(--fg-rgb),.02);
                          border-radius:6px; font-size:.83rem; }
.cf-guild-name         { font-weight:700; }
.cf-guild-member-meta  { display:flex; gap:.5rem; align-items:center; }
.cf-guild-class        { color:var(--muted); font-size:.75rem; }
.cf-guild-rank         { font-size:.72rem; font-weight:700; }
.cf-guild-ilvl         { font-size:.72rem; color:var(--gold); font-weight:700; }
.cf-guild-stats        { display:flex; gap:1rem; margin-bottom:.8rem; }
.cf-guild-stat         { display:flex; flex-direction:column; align-items:center;
                          background:rgba(var(--fg-rgb),.03); border:1px solid var(--border);
                          border-radius:8px; padding:.6rem 1rem; flex:1; }
.cf-guild-stat-val     { font-size:1.5rem; font-weight:800; }
.cf-guild-stat-lbl     { font-size:.72rem; color:var(--muted); }
.cf-guild-team-row     { display:flex; justify-content:space-between; align-items:center;
                          font-size:.82rem; padding:.3rem 0;
                          border-bottom:1px solid rgba(var(--fg-rgb),.04); }
.cf-guild-team-type    { color:var(--muted); font-size:.75rem; }
.cf-guild-recruitment  { font-size:.875rem; }

/* ── WoW Blocks ─────────────────────────────────────────────────────────── */
.cf-wow-header         { display:flex; align-items:center; gap:.8rem; margin-bottom:.8rem; }
.cf-wow-logo           { width:32px; height:32px; }
.cf-wow-guild-name     { font-weight:800; font-size:.95rem;
                          background:linear-gradient(135deg,#c41e3a,#f59e0b);
                          -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.cf-wow-raid-name,.cf-wow-member-count { font-size:.75rem; color:var(--muted); }
.cf-wow-tiers          { display:flex; flex-direction:column; gap:.5rem; }
.cf-wow-tier           { display:flex; align-items:center; gap:.6rem; font-size:.8rem; }
.cf-wow-tier-label     { width:50px; font-weight:700; }
.cf-wow-bar-wrap       { flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.cf-wow-bar            { height:100%; border-radius:3px; transition:width .4s; }
.cf-wow-tier-count     { width:40px; text-align:right; color:var(--muted); font-size:.75rem; }
.cf-wow-member-list    { display:flex; flex-direction:column; gap:.25rem; }
.cf-wow-member-row     { display:flex; justify-content:space-between; align-items:center;
                          font-size:.82rem; padding:.3rem 0;
                          border-bottom:1px solid rgba(var(--fg-rgb),.04); }
.cf-wow-char-meta      { color:var(--muted); font-size:.75rem; }
.cf-wow-char-level     { color:var(--gold); font-size:.75rem; }
.cf-wow-char-header    { margin-bottom:.8rem; }
.cf-wow-char-name-large { font-size:1.1rem; font-weight:800; }
.cf-wow-char-subtitle  { font-size:.78rem; margin-top:.15rem; }
.cf-wow-char-stats     { display:flex; gap:.8rem; margin:.7rem 0; }
.cf-wow-char-stat      { display:flex; flex-direction:column; align-items:center;
                          background:rgba(var(--fg-rgb),.03); border:1px solid var(--border);
                          border-radius:8px; padding:.5rem .9rem; flex:1; }
.cf-wow-stat-val       { font-size:1.3rem; font-weight:800; }
.cf-wow-stat-lbl       { font-size:.7rem; color:var(--muted); }
.cf-wow-rio            { font-size:.82rem; margin-top:.4rem; }

/* ── Minecraft Block ────────────────────────────────────────────────────── */
.cf-minecraft-block    { font-size:.875rem; }
.cf-mc-header          { display:flex; align-items:center; gap:.7rem; }
.cf-mc-host            { font-weight:700; font-family:var(--font-mono); font-size:.85rem; }
.cf-mc-status          { font-size:.75rem; margin-top:.1rem; }
.cf-mc-status.online   { color:var(--success); }
.cf-mc-status.offline  { color:var(--muted); }
.cf-mc-players-count   { margin-left:auto; font-size:.78rem; color:var(--muted); }
.cf-mc-count           { color:var(--success); font-weight:700; }
.cf-mc-motd            { font-size:.78rem; color:var(--text-dim); margin:.5rem 0;
                          font-family:var(--font-mono); }
.cf-mc-players         { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.4rem; }
.cf-mc-player          { font-size:.72rem; padding:.15rem .5rem; background:rgba(var(--fg-rgb),.05);
                          border-radius:4px; border:1px solid var(--border); }

/* ── FiveM Block ────────────────────────────────────────────────────────── */
.cf-fivem-block    { font-size:.875rem; }
.cf-fivem-header   { display:flex; align-items:center; gap:.7rem; margin-bottom:.5rem; }
.cf-fivem-name     { font-weight:700; }
.cf-fivem-status   { font-size:.75rem; }
.cf-fivem-status.online  { color:var(--success); }
.cf-fivem-status.offline { color:var(--muted); }
.cf-fivem-players  { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.4rem; }
.cf-fivem-player   { font-size:.72rem; padding:.15rem .5rem; background:rgba(var(--fg-rgb),.05);
                      border-radius:4px; border:1px solid var(--border); }
.cf-fivem-ping     { color:var(--success); font-size:.65rem; }

/* ── Ollama AI Blocks ───────────────────────────────────────────────────── */
.cf-ollama-chat     { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cf-ollama-header   { display:flex; align-items:center; justify-content:space-between;
                       padding: .7rem 1rem; background: var(--surface2);
                       font-weight: 700; font-size: .875rem;
                       border-bottom: 1px solid var(--border); }
.cf-ollama-status-dot { font-size: .7rem; }
.cf-ollama-messages { overflow-y: auto; padding: .8rem; display: flex;
                       flex-direction: column; gap: .6rem; min-height: 80px; }
.cf-ollama-msg      { display: flex; max-width: 90%; }
.cf-ollama-user     { align-self: flex-end; }
.cf-ollama-user span { background: var(--accent); color: var(--on-accent); padding: .45rem .8rem;
                        border-radius: 14px 14px 4px 14px; font-size: .83rem; }
.cf-ollama-ai       { align-self: flex-start; }
.cf-ollama-ai span  { background: var(--surface2); border: 1px solid var(--border);
                       padding: .45rem .8rem; border-radius: 14px 14px 14px 4px; font-size: .83rem; }
.cf-ollama-typing   { animation: cf-ollama-blink 1s infinite; color: var(--muted); }
@keyframes cf-ollama-blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.cf-ollama-input-row { display:flex; gap:.4rem; padding: .6rem; border-top:1px solid var(--border); }
.cf-ollama-input    { flex:1; padding:.5rem .8rem; font-size:.85rem; }
.cf-ollama-send     { padding:.5rem .8rem; flex-shrink:0; }
.cf-ollama-offline  { padding:1rem; }
.cf-ollama-offline-msg { font-size:.83rem; color:var(--muted); margin-top:.5rem; }

.cf-ollama-assistant { font-size:.875rem; }
.cf-ollama-content  { color:var(--text-dim); line-height:1.6; margin:.6rem 0; font-size:.85rem; }
.cf-ollama-powered  { font-size:.7rem; color:var(--muted); text-align:right; margin-top:.4rem; }

/* ── Marketplace ────────────────────────────────────────────────────────── */
.cf-marketplace-badge { display:inline-flex; align-items:center; gap:.3rem;
  font-size:.7rem; font-weight:700; padding:2px 7px; border-radius:4px; }
.cf-pkg-card { transition: transform .2s, box-shadow .2s; }
.cf-pkg-card:hover { transform: translateY(-2px); }
.cf-install-btn { cursor:pointer; transition:all .2s; }
.cf-install-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ── Media-galerij (S11) ────────────────────────────────────────────────── */
/* Publieke albumindex (/galerij) */
.cf-gallery-albums-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.2rem; margin-top: 1rem;
}
.cf-gallery-album-card {
  display: block; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--surface); text-decoration: none; color: inherit;
  transition: transform .15s, border-color .15s;
}
.cf-gallery-album-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.cf-gallery-album-cover { aspect-ratio: 4 / 3; background: var(--surface2); overflow: hidden; }
.cf-gallery-album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-gallery-album-cover-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: var(--muted);
}
.cf-gallery-album-info { padding: .8rem 1rem; }
.cf-gallery-album-info h3 { margin: 0 0 .25rem; font-size: 1rem; }
.cf-gallery-album-info p { margin: 0 0 .4rem; color: var(--text-dim); font-size: .82rem; }
.cf-gallery-album-count { font-size: .75rem; color: var(--muted); }

/* Publiek album-item-rooster (/galerij/{slug}) */
.cf-gallery-items-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .9rem; margin-top: 1rem;
}
.cf-gallery-item {
  position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--radius);
  overflow: hidden; background: var(--surface2); text-decoration: none;
}
.cf-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.cf-gallery-item:hover img { transform: scale(1.04); }
.cf-gallery-video-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; color: var(--muted); background: var(--surface2);
}
.cf-gallery-item-title {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .4rem .55rem;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  color: #fff; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Lightbox */
.cf-gallery-lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.9);
  display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;
}
.cf-gallery-lightbox[hidden] { display: none; }
.cf-gallery-lightbox-close, .cf-gallery-lightbox-nav {
  position: absolute; background: rgba(255,255,255,.1); border: none; border-radius: 50%;
  color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; z-index: 1;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;   /* tikdoel ≥44px */
}
.cf-gallery-lightbox-close { top: 1rem; right: 1.2rem; }
.cf-gallery-lightbox-nav { top: 50%; transform: translateY(-50%); }
.cf-gallery-lightbox-prev { left: .6rem; }
.cf-gallery-lightbox-next { right: .6rem; }
.cf-gallery-lightbox-close:hover, .cf-gallery-lightbox-nav:hover { background: rgba(255,255,255,.22); }
.cf-gallery-lightbox-error { color: #fff; padding: 2rem 1rem; text-align: center; background: rgba(255,255,255,.08); border-radius: var(--radius); }
body.cf-lightbox-open { overflow: hidden; }
.cf-gallery-lightbox-body {
  max-width: 900px; width: 100%; max-height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; gap: .8rem;
}
.cf-gallery-lightbox-media img,
.cf-gallery-lightbox-media video { width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius); }
.cf-gallery-lightbox-meta { color: #fff; }
.cf-gallery-lightbox-title { margin: 0 0 .3rem; font-size: 1.1rem; }
.cf-gallery-lightbox-description { margin: 0 0 .3rem; color: rgba(255,255,255,.85); font-size: .85rem; }
.cf-gallery-lightbox-sub { font-size: .75rem; color: rgba(255,255,255,.7); }

/* Sidebar-widget (GalleryLatestBlock) */
.cf-block-gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem;
}
.cf-block-gallery-thumb { display: block; aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden; }
.cf-block-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Admin: item-thumbnail-rooster met verwijderknop (admin_album_manage.php) */
.cf-gallery-admin-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem; margin-top: 1rem;
}
.cf-gallery-admin-item { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface2); }
.cf-gallery-admin-item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.cf-gallery-admin-item .cf-gallery-video-placeholder { aspect-ratio: 1 / 1; }
.cf-gallery-admin-item .cf-gallery-item-meta {
  position: static; background: none; color: var(--text-dim);
  padding: .4rem .5rem; font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cf-gallery-admin-item form { padding: 0 .5rem .5rem; }
.cf-gallery-admin-item .cf-btn-sm { width: 100%; text-align: center; }

/* ── Blokken (fase D): ticker, ticket-kaarten, slider, downloads, forum ─── */
.cf-ticker {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), .6);
}
.cf-ticker-track {
  display: inline-flex;
  white-space: nowrap;
  animation: cf-ticker var(--cf-ticker-dur, 30s) linear infinite;
}
.cf-ticker:hover .cf-ticker-track,
.cf-ticker:focus-within .cf-ticker-track { animation-play-state: paused; }
.cf-ticker-item { padding: .55rem 1.5rem; color: var(--text); }
.cf-ticker-item:hover { color: var(--link); }
.cf-ticker-dup { display: inline-flex; }
@keyframes cf-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cf-ticker { overflow-x: auto; }
  .cf-ticker-track { animation: none; }
  .cf-ticker-dup { display: none; }
}

.cf-ticket-list { display: flex; flex-direction: column; gap: .6rem; }
.cf-ticket {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  color: var(--text);
  transition: transform .15s, border-color .15s;
}
.cf-ticket:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--text); }
.cf-ticket-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 3.4rem; padding: .5rem;
  background: rgba(var(--accent-rgb), .15);
  border-right: 2px dashed var(--border);
  text-transform: uppercase;
}
.cf-ticket-stub b { font-size: 1.2rem; line-height: 1; }
.cf-ticket-stub small { font-size: .65rem; color: var(--text-dim); }
.cf-ticket-body { display: flex; flex-direction: column; gap: .15rem; padding: .5rem .75rem; min-width: 0; }
.cf-ticket-body small { color: var(--text-dim); font-size: .75rem; }
.cf-ticket-img { width: 100%; max-height: 110px; object-fit: cover; border-radius: 6px; margin-bottom: .3rem; }

.cf-slider { position: relative; }
.cf-slider-track {
  display: flex; gap: .75rem; padding: .25rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.cf-slider-track::-webkit-scrollbar { display: none; }
.cf-slider-item { flex: 0 0 100%; scroll-snap-align: start; }
.cf-slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(var(--surface-rgb), .92); color: var(--text);
  cursor: pointer; font-size: 1.2rem; line-height: 1;
}
.cf-slider-btn:hover { border-color: var(--accent); }
.cf-slider-prev { left: .25rem; }
.cf-slider-next { right: .25rem; }
.cf-slider-photo .cf-block-gallery-thumb { aspect-ratio: 4 / 3; }
@media (prefers-reduced-motion: reduce) { .cf-slider-track { scroll-behavior: auto; } }

.cf-block-gallery-centered { grid-template-columns: repeat(auto-fit, 120px); justify-content: center; }
.cf-dl-centered { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; text-align: center; }
.cf-dl-card {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  border: 1px solid var(--border); border-radius: 10px; padding: .9rem; background: var(--surface);
}
.cf-dl-card small { color: var(--text-dim); font-size: .75rem; }
.cf-dl-actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-top: .3rem; }
.cf-block-forum-item { align-items: flex-start; }
.cf-block-forum-meta { display: block; color: var(--muted); font-size: .72rem; }

/* Fase E — snel plaatsen op de homepage */
/* Inklapbaar (<details>): dicht = alleen de knop, open = het formulier in een kaart. */
.cf-quickpost{margin:0 0 1.5rem}
.cf-quickpost-toggle{list-style:none;cursor:pointer;user-select:none}
.cf-quickpost-toggle::-webkit-details-marker{display:none}
.cf-quickpost-toggle::marker{content:""}
.cf-quickpost[open] > .cf-quickpost-toggle{margin-bottom:.75rem}
.cf-quickpost-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cf-quickpost-panel{padding:1rem 1.25rem;border:1px solid var(--border,rgba(255,255,255,.12));border-radius:12px;background:var(--surface,rgba(255,255,255,.03))}
.cf-content-blocks{margin:0 0 1.5rem}
.cf-quickpost-form{display:flex;flex-direction:column;gap:.6rem}
.cf-quickpost-row{display:flex;gap:.6rem;flex-wrap:wrap}
.cf-quickpost-form input,.cf-quickpost-form textarea,.cf-quickpost-form select{width:100%;max-width:100%;box-sizing:border-box}
.cf-quickpost-row select{width:auto;flex:1 1 180px}
.cf-quickpost-form button{align-self:flex-start}

/* Fase F — footer-grid (thema-instellingen tab 4) */
.cf-footer-grid{display:grid;grid-template-columns:repeat(var(--cf-footer-cols,3),minmax(0,1fr));gap:1.5rem;margin-bottom:1.5rem;text-align:left}
.cf-footer-title{font-size:.85rem;font-weight:700;color:var(--text);margin:0 0 .5rem}
.cf-footer-linklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.cf-footer-linklist a{color:var(--muted)}
.cf-footer-linklist a:hover{color:var(--text)}
.cf-footer-cell p{margin:0 0 .4rem}
@media (max-width:768px){.cf-footer-grid{grid-template-columns:1fr}}

/* Footer in ScriptSpace-stijl (1.36.1): regenbooglijn, gekleurde kolomkoppen, onderregel */
#cf-footer{position:relative;border-top:0;padding:2.25rem 0 1.5rem;text-align:left;font-size:.92rem}
#cf-footer>.cf-container{display:block}
#cf-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:.6;
  background:linear-gradient(90deg,#ff5d6c,#ff9f43,#ffd43b,#3ddc84,#4dabf7,#b197fc)}
.cf-footer-default{grid-template-columns:1.6fr 1fr 1fr 1fr}
.cf-footer-title{text-transform:uppercase;letter-spacing:.06em}
.cf-footer-grid>.cf-footer-cell:nth-child(4n+2) .cf-footer-title{color:var(--link)}
.cf-footer-grid>.cf-footer-cell:nth-child(4n+3) .cf-footer-title{color:var(--success)}
.cf-footer-grid>.cf-footer-cell:nth-child(4n) .cf-footer-title{color:var(--gold)}
.cf-footer-linklist a:hover{color:var(--link)}
.cf-footer-logo{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.05rem;color:var(--text);text-decoration:none}
.cf-footer-logo img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.cf-footer-brand p{margin-top:.75rem;max-width:34ch;color:var(--muted)}
.cf-footer-brand p a{color:var(--link)}
.cf-footline{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;margin-top:1.75rem;padding-top:1rem;border-top:1px solid var(--border);font-size:.85rem;color:var(--muted)}
.cf-footline a{color:var(--muted)}.cf-footline a:hover{color:var(--link)}
@media (max-width:768px){.cf-footer-default{grid-template-columns:1fr 1fr}.cf-footer-brand{grid-column:1/-1}}

/* Galerij: play-badge op video-miniaturen + ingebouwde videospeler (cf-player.js) */
.cf-gallery-item, .cf-block-gallery-thumb { position: relative; }
.cf-gallery-play-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; padding-left: .15rem;
  pointer-events: none; box-shadow: 0 0 0 2px rgba(255,255,255,.55);
}
.cf-player-holder { width: 100%; }
.cf-player {
  position: relative; width: 100%; background: #000; border-radius: var(--radius, 10px); overflow: hidden;
  outline-offset: 2px; line-height: 0; color: #fff; user-select: none; -webkit-user-select: none;
}
.cf-player video { width: 100%; max-height: 70vh; display: block; background: #000; object-fit: contain; cursor: pointer; }
.cf-player.is-fs { border-radius: 0; }
.cf-player.is-fs video { max-height: 100vh; height: 100vh; }
.cf-pl-big {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 4.5rem; height: 4.5rem;
  border-radius: 50%; border: 0; background: rgba(var(--accent-rgb, 168,85,247), .85); color: var(--on-accent, #fff);
  font-size: 1.8rem; cursor: pointer; padding-left: .25rem; line-height: 1;
}
.cf-pl-big[hidden] { display: none; }
.cf-player.is-loading::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem;
  border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: cf-pl-spin .8s linear infinite;
}
@keyframes cf-pl-spin { to { transform: rotate(360deg); } }
.cf-pl-bar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .5rem; line-height: 1;
  padding: 1.6rem .7rem .55rem; background: linear-gradient(transparent, rgba(0,0,0,.78));
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.cf-player:not(.is-playing) .cf-pl-bar, .cf-player.show-bar .cf-pl-bar { opacity: 1; pointer-events: auto; }
.cf-pl-btn {
  background: none; border: 0; color: #fff; cursor: pointer; font-size: 1.05rem; min-width: 2.75rem; height: 2.75rem;
  border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .3rem;
}
.cf-pl-btn:hover { background: rgba(255,255,255,.18); }
.cf-pl-btn:focus-visible { background: rgba(255,255,255,.18); outline: 2px solid #fff; outline-offset: -2px; }
.cf-pl-speed { font-size: .8rem; font-weight: 700; }
.cf-pl-time { font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .9; }
.cf-pl-seekwrap { position: relative; flex: 1; height: 1.4rem; min-width: 60px; display: flex; align-items: center; }
.cf-pl-buffer { position: absolute; left: 0; height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); pointer-events: none; width: 0; }
.cf-pl-seek, .cf-pl-vol { -webkit-appearance: none; appearance: none; background: transparent; margin: 0; cursor: pointer; }
.cf-pl-seek { position: relative; width: 100%; height: 1.4rem; }
.cf-pl-vol { width: 70px; height: 1.4rem; }
.cf-pl-seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--accent, #a855f7) var(--cf-pl-pos, 0%), rgba(255,255,255,.22) var(--cf-pl-pos, 0%));
}
.cf-pl-seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); }
.cf-pl-seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent, #a855f7); }
.cf-pl-vol::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: rgba(255,255,255,.4); }
.cf-pl-vol::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(255,255,255,.4); }
.cf-pl-seek::-webkit-slider-thumb, .cf-pl-vol::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border-radius: 50%; background: #fff; border: 0;
}
.cf-pl-vol::-webkit-slider-thumb { margin-top: -5px; }
.cf-pl-seek::-moz-range-thumb, .cf-pl-vol::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 0; }
.cf-pl-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; background: rgba(0,0,0,.85); font-size: .9rem; line-height: 1.5; }
.cf-pl-error[hidden] { display: none; }
.cf-pl-error a { color: var(--accent2, #38bdf8); margin-left: .3rem; text-decoration: underline; }
@media (max-width: 600px) { .cf-pl-vol { display: none; } .cf-pl-time { font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { .cf-pl-bar { transition: none; } .cf-player.is-loading::after { animation: none; } }


/* Toegankelijkheid: zichtbare toetsenbordfocus overal + paginering */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent2); outline-offset: 2px;
}
.cf-pagination { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.5rem; }
.cf-pagination a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 640px) {
  .cf-gallery-lightbox-nav { top: auto; bottom: 1rem; transform: none; }
}

.cf-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cf-skip-link { position: absolute; left: .5rem; top: -4rem; z-index: 2000; background: var(--accent); color: var(--on-accent); padding: .6rem 1rem; border-radius: 8px; font-weight: 700; }
.cf-skip-link:focus { top: .5rem; }
.cf-quickpost-form input, .cf-quickpost-form textarea, .cf-quickpost-form select { font-size: 1rem; }   /* ≥16px: geen iOS-inzoom */
@media (max-width: 640px) { .cf-quickpost-form button { align-self: stretch; min-height: 44px; } }

/* Eigen HTML-pagina: knop + volledig-scherm weergave (iframe vult het hele venster) */
.cf-page-html { position: relative; }
.cf-html-fs-btn { display: inline-block; margin: 0 0 .5rem auto; float: right; font-size: .85rem; }
.cf-page-html::after { content: ""; display: block; clear: both; }
.cf-page-html.is-fullview { position: fixed; inset: 0; z-index: 9999; margin: 0; padding: 0; max-width: none; width: auto; background: var(--bg, #0f172a); }
.cf-page-html.is-fullview .cf-html-frame { height: 100% !important; width: 100% !important; border-radius: 0 !important; }
.cf-page-html.is-fullview .cf-html-fs-btn { position: fixed; top: .6rem; right: .6rem; z-index: 10000; margin: 0; float: none; background: rgba(15,23,42,.85); color: #fff; }
html.cf-fullview-lock, html.cf-fullview-lock body { overflow: hidden; }

/* ── Klok-blok ─────────────────────────────────────────────────────────── */
.cf-clock { text-align: center; container-type: inline-size; --clk: 220px; }
.cf-clock-label { font-size: 1rem; font-weight: 600; color: var(--muted, #8091a7); margin-bottom: .35rem; }
/* Cijfers: groot, maar nooit breder dan het blok zelf (18cqw ≈ 8 tekens "12:34:56") */
.cf-clock-time { font-size: min(calc(var(--clk) * .34), 18cqw); line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--accent); text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.cf-clock-date { font-size: min(calc(var(--clk) * .1), 6.5cqw); font-weight: 500; color: var(--text, #e2e8f0); text-transform: capitalize; margin-top: .25rem; }
.cf-clock--both .cf-clock-time { margin-top: .2rem; }
.cf-clock-face { display: block; margin: 0 auto .4rem; max-width: 100%; height: auto; }
.cf-clock-ring { fill: var(--card-bg, rgba(255,255,255,.03)); stroke: var(--accent); stroke-width: 1.6; }
.cf-clock-tick { stroke: var(--text, #e2e8f0); stroke-width: 1.4; }
.cf-clock-tick-min { stroke: var(--muted, #8091a7); stroke-width: .6; }
.cf-clock-num { fill: var(--text, #e2e8f0); font-size: 8px; font-weight: 700; font-family: inherit; }
.cf-clock-hand { stroke: var(--text, #e2e8f0); stroke-linecap: round; stroke-width: 2.4; }
.cf-clock-m { stroke-width: 1.7; }
.cf-clock-s { stroke: var(--accent); stroke-width: .8; }
.cf-clock-pin { fill: var(--accent); }

/* Referral / partner-links */
.cf-ref-heading { font-weight: 700; margin-bottom: .6rem; }
.cf-ref-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.cf-ref-link { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; text-decoration: none; color: var(--text, inherit); }
.cf-ref-name { font-weight: 700; color: var(--accent); }
.cf-ref-badge { font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--accent); color: var(--bg, #0b1220); }
.cf-ref-note { flex-basis: 100%; font-size: .85rem; color: var(--muted, #8091a7); }
.cf-ref--cards .cf-ref-link { padding: .7rem .9rem; border: 1px solid var(--border, #334155); border-radius: 10px; background: var(--card-bg, rgba(255,255,255,.03)); transition: transform .12s, border-color .12s; }
.cf-ref--cards .cf-ref-link:hover { transform: translateY(-2px); border-color: var(--accent); }
.cf-ref--buttons .cf-ref-link { justify-content: center; padding: .65rem 1rem; border-radius: 8px; background: var(--accent); }
.cf-ref--buttons .cf-ref-name { color: var(--bg, #0b1220); }
.cf-ref--buttons .cf-ref-badge { background: var(--bg, #0b1220); color: var(--accent); }
.cf-ref--buttons .cf-ref-note { display: none; }
.cf-ref--list .cf-ref-list { gap: .35rem; }
.cf-ref-disclosure { margin-top: .7rem; font-size: .72rem; color: var(--muted, #8091a7); }

/* AI chatbox */
.cf-aichat { border: 1px solid var(--border, #334155); border-radius: 12px; background: var(--card-bg, rgba(255,255,255,.03)); overflow: hidden; }
.cf-aichat-head { display: flex; justify-content: space-between; align-items: center; padding: .6rem .9rem; font-weight: 700; border-bottom: 1px solid var(--border, #334155); }
.cf-aichat-clear { background: none; border: 0; color: var(--muted, #8091a7); cursor: pointer; font-size: 1.1rem; }
.cf-aichat-clear:hover { color: var(--accent); }
.cf-aichat-msgs { overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.cf-aichat-msg { max-width: 92%; padding: .5rem .75rem; border-radius: 12px; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.cf-aichat-ai { align-self: flex-start; background: rgba(255,255,255,.06); }
.cf-aichat-user { align-self: flex-end; background: var(--accent); color: var(--on-accent, #fff); }
.cf-aichat-typing { opacity: .6; animation: cf-aichat-pulse 1s infinite; }
.cf-aichat-err { color: var(--error, #f87171); }
@keyframes cf-aichat-pulse { 50% { opacity: .25; } }
.cf-aichat-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 .8rem .6rem; }
.cf-aichat-chip { font-size: .78rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--border, #334155); background: none; color: var(--text, inherit); cursor: pointer; }
.cf-aichat-chip:hover { border-color: var(--accent); color: var(--accent); }
.cf-aichat-form { display: flex; gap: .5rem; padding: .6rem .8rem; border-top: 1px solid var(--border, #334155); }
.cf-aichat-input { flex: 1; min-width: 0; }

/* ── Grote en ultrawide schermen ─────────────────────────────────────────
   De breedte komt uit de thema-instellingen (presets t/m 3200 px). Tekstgrootte
   blijft bewust gelijk: een ultrawide 1440p-monitor heeft net zo grote pixels als
   een gewone, dus alleen de ruimte tussen de kolommen groeit mee. */
@media (min-width: 2200px) {
  .cf-layout { gap: 2rem; }
}
.cf-aichat-chips[hidden] { display: none; }