/* =============================================================================
   Twiin LAS Register — basisstijl
   Licht/donker via prefers-color-scheme + handmatige toggle (data-theme).
   ========================================================================== */
:root {
  /* Twiin huisstijl: slate wordmerk, magenta + oranje accenten */
  --navy: #243140;          /* slate-ink, kop-kleur (twiin-wordmerk) */
  --navy-soft: #36485a;
  --accent: #e6396a;        /* twiin-magenta (primair accent / CTA) */
  --accent-2: #f7901e;      /* twiin-oranje (secundair accent) */
  --accent-soft: #eeb2eb;   /* zachte tint voor banner/markeringen */
  --bg: #ffffff;
  --bg-alt: #f6f4f7;
  --surface: #ffffff;
  --border: #e6e2e9;
  --text: #283340;
  --muted: #6a6675;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(36,49,64,.06), 0 4px 16px rgba(36,49,64,.07);
  --maxw: 1140px;
  --font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* badge-kleuren */
  --c-groen-bg:#e3f6ec; --c-groen-fg:#0f7a43;
  --c-blauw-bg:#e6effd; --c-blauw-fg:#1857c4;
  --c-paars-bg:#efe7fb; --c-paars-fg:#6936c9;
  --c-cyaan-bg:#e0f4f7; --c-cyaan-fg:#0d7a8c;
  --c-oranje-bg:#fdeede; --c-oranje-fg:#b35c00;
  --c-geel-bg:#fcf3d6; --c-geel-fg:#8a6a00;
  --c-rood-bg:#fde7e7; --c-rood-fg:#bb2222;
  --c-grijs-bg:#eceef3; --c-grijs-fg:#444c5e;
}
[data-theme="dark"] {
  --bg:#0b1020; --bg-alt:#11182c; --surface:#141b30; --border:#243049;
  --text:#e8ecf6; --muted:#9aa5bd; --navy:#e8ecf6; --accent-soft:#5a2f57;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  --c-groen-bg:#10331f; --c-groen-fg:#5fd699;
  --c-blauw-bg:#13284f; --c-blauw-fg:#7fb0ff;
  --c-paars-bg:#271847; --c-paars-fg:#b594f5;
  --c-cyaan-bg:#0e3138; --c-cyaan-fg:#5fd0e0;
  --c-oranje-bg:#3a2710; --c-oranje-fg:#f3a854;
  --c-geel-bg:#332b0e; --c-geel-fg:#e3c75a;
  --c-rood-bg:#3a1414; --c-rood-fg:#f08585;
  --c-grijs-bg:#1f2940; --c-grijs-fg:#aab4cc;
}

* { box-sizing: border-box; }
/* Zorg dat het hidden-attribuut altijd verbergt, ook op .card-grid (display:grid) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin:0; font-family:var(--font); color:var(--text); background:var(--bg);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:1.25rem; }
.muted { color:var(--muted); }
.skip-link { position:absolute; left:-999px; }
.skip-link:focus { left:1rem; top:1rem; background:var(--surface); padding:.5rem .75rem; border-radius:var(--radius-sm); z-index:100; }

/* ---- Header ---- */
.site-header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--border); }
.site-header__inner { display:flex; align-items:center; gap:1.5rem; min-height:62px; }
.brand { display:flex; align-items:center; gap:.7rem; color:var(--text); }
.brand:hover { text-decoration:none; }
.header-logo { height:38px; width:auto; display:block; }
.brand__divider { width:1px; height:26px; background:var(--border); }
.brand__text { font-size:.95rem; font-weight:500; color:var(--muted); letter-spacing:.01em; }
.site-nav { display:flex; gap:1.25rem; margin-left:auto; }
.site-nav a { color:var(--text); font-weight:500; font-size:.95rem; }
.theme-toggle { background:none; border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm); width:38px; height:34px; cursor:pointer; font-size:1rem; flex:none; }
.theme-toggle:hover { background:var(--bg-alt); }
/* Smalle schermen: nav onder het logo, geen overloop */
@media (max-width:820px){
  .site-header__inner { flex-wrap:wrap; min-height:0; padding-block:.55rem; gap:.5rem 1rem; }
  .theme-toggle { order:2; margin-left:auto; }
  .site-nav { order:3; width:100%; margin-left:0; gap:.4rem 1rem; flex-wrap:wrap; font-size:.9rem; }
}

/* ---- Footer ---- */
.site-footer { margin-top:4rem; border-top:1px solid var(--border); background:var(--bg-alt); }
.site-footer__inner { display:grid; grid-template-columns:1fr 1fr; gap:2rem; padding-block:2rem; }
.site-footer p { color:var(--muted); font-size:.85rem; margin:.3rem 0; }
.site-footer__logo { height:40px; width:auto; margin-bottom:.6rem; }
.site-footer__license { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.site-footer__license img { display:block; border:0; }
@media (max-width:680px){ .site-footer__inner{ grid-template-columns:1fr; } }

/* ---- Banner (Twiin-stijl, met merkbeeld) ---- */
.banner {
  background:
    url("../images/twiin-banner.jpeg") center/cover no-repeat;
  padding-block:4rem 3.4rem;
}
.banner__kicker { text-transform:uppercase; letter-spacing:.14em; font-size:.82rem; font-weight:700; color:rgba(255,255,255,.92); margin:0 0 .5rem; }
.banner__title { font-size:2.7rem; line-height:1.08; margin:0; color:#fff; font-weight:700; text-shadow:0 1px 12px rgba(0,0,0,.28); }
.banner__search { display:flex; gap:.6rem; margin-top:1.8rem; max-width:580px; }
.banner__search input { flex:1; }
.banner .btn--cta { background:#fff; color:var(--accent); box-shadow:0 3px 14px rgba(0,0,0,.22); }
.banner .btn--cta:hover { background:#fff; filter:brightness(.97); }
@media (max-width:560px){ .banner__title{ font-size:2rem; } .banner__search{ flex-direction:column; } }

/* ---- Forms / buttons ---- */
input[type=search], select, .search input { width:100%; padding:.62rem .8rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); font-size:.95rem; font-family:inherit; }
input[type=search]:focus, select:focus { outline:2px solid var(--accent); outline-offset:1px; }
.btn { display:inline-flex; align-items:center; gap:.4rem; background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm); padding:.62rem 1.1rem; font-size:.95rem; font-weight:600; cursor:pointer; }
.btn:hover { filter:brightness(1.08); text-decoration:none; }
.btn--small { padding:.4rem .7rem; font-size:.82rem; }
/* Prominente call-to-action (zoals de Twiin 'infoButton') */
.btn--cta { border-radius:999px; padding:.72rem 1.6rem; font-size:1rem; font-weight:700; box-shadow:0 2px 10px rgba(230,57,106,.38); transition:transform .12s ease, filter .12s ease; }
.btn--cta:hover { filter:brightness(1.06); transform:translateY(-1px); }

/* ---- Sections ---- */
.section { padding-block:2.5rem 1rem; }
.section__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.section__head h2 { margin:0; font-size:1.4rem; }
.link-more { font-size:.9rem; font-weight:600; white-space:nowrap; }
.page-head { padding-block:2rem 1rem; }
.page-head h1 { margin:.2rem 0; }

/* ---- Cards ---- */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:1rem; }
.card { display:flex; flex-direction:column; justify-content:space-between; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .12s ease; }
.card:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(16,24,40,.12); }
.card__link { color:var(--text); display:block; }
.card__link:hover { text-decoration:none; }
.card__head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
.card__uid { font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.card__title { margin:.1rem 0 .4rem; font-size:1.02rem; line-height:1.3; }
.card__summary { color:var(--muted); font-size:.86rem; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card__foot { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.8rem; }

/* ---- Categorieën ---- */
.category { margin-bottom:1.8rem; }
.category__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.7rem; }
.category__head h3 { margin:0; font-size:1.05rem; display:flex; align-items:center; gap:.5rem; }

/* ---- Badges ---- */
.badge { display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.74rem; font-weight:600; line-height:1.5; white-space:nowrap; background:var(--c-grijs-bg); color:var(--c-grijs-fg); }
.badge--groen{background:var(--c-groen-bg);color:var(--c-groen-fg);}
.badge--blauw{background:var(--c-blauw-bg);color:var(--c-blauw-fg);}
.badge--paars{background:var(--c-paars-bg);color:var(--c-paars-fg);}
.badge--cyaan{background:var(--c-cyaan-bg);color:var(--c-cyaan-fg);}
.badge--oranje{background:var(--c-oranje-bg);color:var(--c-oranje-fg);}
.badge--geel{background:var(--c-geel-bg);color:var(--c-geel-fg);}
.badge--rood{background:var(--c-rood-bg);color:var(--c-rood-fg);}
.badge--grijs{background:var(--c-grijs-bg);color:var(--c-grijs-fg);}
.badges { display:flex; flex-wrap:wrap; gap:.35rem; }

/* ---- Switch (uitgelicht toggle) ---- */
.switch { display:inline-flex; border:1px solid var(--border); border-radius:999px; padding:3px; background:var(--bg-alt); }
.switch__btn { border:none; background:none; color:var(--muted); padding:.35rem .9rem; border-radius:999px; cursor:pointer; font-size:.85rem; font-weight:600; }
.switch__btn.is-active { background:var(--surface); color:var(--text); box-shadow:var(--shadow); }

/* ---- Register layout ---- */
.register { display:grid; grid-template-columns:240px 1fr; gap:1.5rem; align-items:start; padding-top:1rem; }
@media (max-width:820px){ .register{ grid-template-columns:1fr; } }
.register__filters { position:sticky; top:78px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; }
.register__filters h3 { margin:.2rem 0 .6rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.facet { margin-bottom:1.1rem; }
.facet__option { display:flex; align-items:center; gap:.45rem; font-size:.85rem; padding:.12rem 0; cursor:pointer; }
.facet__option input { accent-color:var(--accent); }
.facet__count { margin-left:auto; color:var(--muted); font-size:.78rem; }
.filter-reset { font-size:.82rem; }
.search { display:flex; gap:.75rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap; }
.search input[type=search]{ flex:1; min-width:220px; }
.search__sort { font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:.4rem; white-space:nowrap; }
.search__sort select { width:auto; }
.register__stats { color:var(--muted); font-size:.85rem; margin:.2rem 0 1rem; }

/* ---- Kaart (detailpagina) ---- */
.kaart { max-width:var(--maxw); margin-inline:auto; padding:1.5rem 1.25rem 0; }
.breadcrumb { font-size:.82rem; color:var(--muted); margin-bottom:1rem; }
.kaart__header { border-bottom:1px solid var(--border); padding-bottom:1.2rem; margin-bottom:1.5rem; }
.kaart__badges { display:flex; gap:.4rem; margin-bottom:.6rem; }
.kaart__uid { font-family:var(--mono); color:var(--muted); font-size:.85rem; margin:0; }
.kaart__title { margin:.2rem 0 .5rem; font-size:1.9rem; line-height:1.2; color:var(--navy); }
.kaart__lead { font-size:1.05rem; color:var(--text); max-width:70ch; margin:0; }
.kaart section { margin-bottom:1.8rem; }
.kaart h2 { font-size:1.15rem; border-bottom:1px solid var(--border); padding-bottom:.35rem; margin-bottom:.8rem; }
.tag-prefix { font-family:var(--mono); font-size:.7rem; color:var(--muted); }

.attr-grid { display:grid; grid-template-columns:200px 1fr; gap:.1rem 1rem; margin:0; }
.attr-grid dt { font-weight:600; padding:.45rem 0; border-top:1px solid var(--border); }
.attr-grid dd { margin:0; padding:.45rem 0; border-top:1px solid var(--border); }
.attr-grid dt:first-of-type, .attr-grid dd:first-of-type { border-top:none; }
@media (max-width:600px){ .attr-grid{ grid-template-columns:1fr; } .attr-grid dd{ border-top:none; padding-top:0; } }

.permalink-box { background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; }
.permalink-box h2 { border:none; margin:0 0 .3rem; font-size:1rem; }
.permalink-box__hint { font-size:.82rem; color:var(--muted); margin:0 0 .7rem; }
.permalink-box__row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.permalink-box__url { font-family:var(--mono); font-size:.82rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.5rem .7rem; flex:1; word-break:break-all; }
.permalink-box__formats { font-size:.82rem; margin:.7rem 0 0; color:var(--muted); }

.ref-list { margin:0; padding-left:1.2rem; }
.ref-list li { margin:.3rem 0; }
.log-table, .prose table { width:100%; border-collapse:collapse; font-size:.9rem; }
.log-table th, .log-table td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--border); vertical-align:top; }
.log-table th { background:var(--bg-alt); }

.prose { padding-block:2rem; max-width:75ch; }
.prose h2 { margin-top:1.8rem; }
code { font-family:var(--mono); }

.site-main { min-height:60vh; }