/* ============================================================
   NEURALEX — huisstijllaag voor het rechtspraakportaal
   ============================================================
   Geladen ná style.css. Deze laag hertekent het portaal in de
   huisstijl van neuralex.nl zonder de bestaande componenten aan
   te raken: hij zet de designtokens om en corrigeert daarna
   alleen de plekken waar kleuren hardgecodeerd staan.

   Terugdraaien = deze ene <link> uit index.html halen.

   Palet en richting komen uit neuralex-bg.jpg: diep navy,
   electric cyan, rood-oranje kern.
   Toegevoegd 06-08-2026.
   ============================================================ */

/* ── Merkfonts, lokaal gehost ───────────────────────────────
   Bewust géén Google Fonts: dat is een verbinding met een
   Amerikaanse server bij élk paginabezoek, en op een site die
   privacy belooft kun je dat niet maken. */
@font-face {
  font-family: 'Sora Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('/static/fonts/sora-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/static/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('/static/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens omzetten ────────────────────────────────────────
   Het portaal is gebouwd op een macOS-donkerpalet. Door de
   variabelen te herdefiniëren neemt de hele app de Neuralex-
   kleuren over, ook componenten die hier niet genoemd staan. */
:root {
  --bg:            #04070F;
  --bg-elevated:   #070D1A;
  --bg-elevated-2: #0A1326;
  --bg-elevated-3: #0C172E;
  --bg-grouped:    #070D1A;

  --label:   #F4F9FF;
  --label-2: #D9E8FB;
  --label-3: #93AECB;
  --label-4: #647E9E;

  --separator:        rgba(120,170,225,0.12);
  --separator-opaque: rgba(120,170,225,0.24);

  --blue:       #22C9FF;
  --blue-hover: #5FE0FF;
  --blue-dim:   rgba(34,201,255,.14);
  --teal:       #5FE0FF;
  --indigo:     #2E8BFF;
  --purple:     #2E8BFF;
  --orange:     #FF7C54;
  --orange-dim: rgba(255,124,84,.15);
  --red:        #FF5A3C;
  --red-dim:    rgba(255,90,60,.15);
  --green:      #34D399;
  --green-dim:  rgba(52,211,153,.15);

  --accent:      var(--blue);
  --accent-hover: var(--blue-hover);
  --accent-dim:  var(--blue-dim);

  --fill:   rgba(120,170,225,.20);
  --fill-2: rgba(120,170,225,.16);
  --fill-3: rgba(120,170,225,.12);
  --fill-4: rgba(120,170,225,.08);

  --shadow-blue: 0 10px 30px -10px rgba(34,201,255,.55);

  --radius-xs: 11px;
  --radius-sm: 11px;
  --radius:    18px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --header-h: 60px;
  --nav-h:    46px;

  --nx-cyan-grad: linear-gradient(115deg, #5FE0FF 0%, #22C9FF 40%, #2E8BFF 100%);
  --nx-panel:     linear-gradient(155deg, rgba(30,46,78,0.62), rgba(8,14,26,0.72) 65%);
  --nx-display:   'Sora Variable', 'Sora', system-ui, sans-serif;
  --nx-body:      'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
  --nx-mono:      'JetBrains Mono Variable', ui-monospace, monospace;
}

/* ── Ambient achtergrond ────────────────────────────────────
   Dezelfde opbouw als neuralex.nl: glow, de merkfoto en een
   fijn circuitraster dat naar de randen wegvalt. */
body {
  font-family: var(--nx-body);
  background-color: #04070F;
  background-image: none;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 600px at 82% -8%, rgba(34,201,255,0.18), transparent 60%),
    radial-gradient(680px 520px at 55% 112%, rgba(255,90,60,0.08), transparent 60%),
    radial-gradient(130% 95% at 80% 4%, rgba(4,7,15,0.50), rgba(4,7,15,0.93) 66%),
    url('/static/img/neuralex-bg.jpg') 72% top / cover no-repeat fixed,
    #04070F;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,170,225,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,225,0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 35%, transparent 78%);
  opacity: 0.35;
}

/* op mobiel is background-attachment: fixed duur en schokkerig */
@media (max-width: 820px) {
  body::before { background-attachment: scroll; }
}

/* ── Typografie ─────────────────────────────────────────────── */
h1, h2, h3, h4,
.hero-content h2,
.result-title,
.stat-value,
.card h3 {
  font-family: var(--nx-display);
  letter-spacing: -0.02em;
}
.badge, .tag, .eyebrow, .hero-eyebrow, .sort-label { font-family: var(--nx-mono); }
::selection { background: rgba(34,201,255,0.30); color: #F4F9FF; }

/* ── Header ─────────────────────────────────────────────────── */
#site-header {
  background: rgba(4, 7, 15, 0.72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(120,170,225,0.12);
}
.header-brand h1 {
  font-family: var(--nx-display);
  font-weight: 800;
  letter-spacing: 0.10em;
  font-size: .95rem;
  text-transform: uppercase;
}
.header-brand span { color: var(--blue); }
.header-brand .logo {
  filter: drop-shadow(0 0 10px rgba(34,201,255,0.35));
  transition: transform .4s cubic-bezier(0.22,0.72,0.18,1);
}
.header-brand:hover .logo { transform: rotate(8deg) scale(1.04); }

/* De SSL-badge is een geruststelling zonder inhoud — hij zei
   niets wat de bezoeker niet al in de adresbalk ziet staan. */
.ssl-badge { display: none !important; }

/* ── Navigatie ──────────────────────────────────────────────── */
.site-nav { border-top: 1px solid rgba(120,170,225,0.08); }
.nav-tab {
  font-family: var(--nx-display);
  font-weight: 500;
  font-size: .88rem;
  border-radius: 8px 8px 0 0;
}
.nav-tab:hover { color: var(--label); background: rgba(255,255,255,0.04); }
.nav-tab.active { color: #F4F9FF; border-bottom-color: transparent; position: relative; }
.nav-tab.active::after {
  content: "";
  position: absolute;
  left: .9rem; right: .9rem; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--nx-cyan-grad);
}

/* ── Knoppen: pill-vorm, zoals op neuralex.nl ───────────────── */
.btn {
  border-radius: 999px;
  font-family: var(--nx-display);
  font-weight: 600;
  transition: transform .25s cubic-bezier(0.22,0.72,0.18,1),
              box-shadow .25s cubic-bezier(0.22,0.72,0.18,1),
              background .25s, border-color .25s;
}
.btn-primary {
  background: var(--nx-cyan-grad);
  color: #04111E;
  box-shadow: 0 10px 30px -10px rgba(34,201,255,0.55);
}
.btn-primary:hover:not(:disabled) {
  background: var(--nx-cyan-grad);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -10px rgba(34,201,255,0.70);
}
.btn-secondary {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(120,170,225,0.24);
  backdrop-filter: blur(6px);
}
.btn-secondary:hover:not(:disabled) {
  border-color: rgba(34,201,255,0.6);
  background: rgba(34,201,255,0.06);
  transform: translateY(-2px);
}
.btn-lg { padding: 1.05rem 2rem; font-size: 1.02rem; }

/* ── Panelen en kaarten ─────────────────────────────────────── */
.card,
.stat-card,
.result-card,
.status-alert,
.related-item,
.recent-item {
  background: var(--nx-panel);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 14px 44px -26px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06);
}
.card:hover,
.result-card:hover {
  transform: translateY(-5px);
  border-color: rgba(34,201,255,0.32);
  background: var(--nx-panel);
  box-shadow: 0 26px 70px -34px rgba(0,0,0,0.9);
}
.stat-value { font-family: var(--nx-display); font-weight: 800; letter-spacing: -.03em; }

/* ── Badges en chips ────────────────────────────────────────── */
.badge-ecli {
  background: rgba(34,201,255,.10);
  color: var(--blue);
  border-color: rgba(34,201,255,.26);
}
.badge-ecli:hover { background: rgba(34,201,255,.20); border-color: rgba(34,201,255,.45); }
.badge-gezag { background: rgba(34,201,255,.10); color: var(--blue); border-color: rgba(34,201,255,.26); }
.badge-rechtsgebied { background: rgba(46,139,255,.12); color: #7FB4FF; border-color: rgba(46,139,255,.24); }
.badge-instantie { background: rgba(95,224,255,.10); color: var(--teal); border-color: rgba(95,224,255,.22); }
.badge-conclusie { background: rgba(255,255,255,.04); color: var(--label-3); border-color: rgba(255,255,255,.10); }
.result-snippet mark { background: rgba(34,201,255,.22); color: var(--blue-hover); }

/* Statuskleuren blijven bewust apart van het merkpalet: rood en
   groen betekenen hier iets juridisch, geen merkaccent. */
.badge-status.status-vernietigd,
.status-alert.status-vernietigd { border-color: rgba(255,90,60,.34); }
.badge-status.status-bekrachtigd,
.status-alert.status-bekrachtigd { border-color: rgba(52,211,153,.34); }

/* ── Sorteerbalk ────────────────────────────────────────────── */
.sort-btn { font-family: var(--nx-display); border-color: rgba(120,170,225,0.18); }
.sort-btn:hover { border-color: rgba(34,201,255,.45); }
.sort-btn.active {
  background: rgba(34,201,255,.14);
  color: var(--blue);
  border-color: rgba(34,201,255,.42);
}

/* ── Invoervelden ───────────────────────────────────────────── */
.input, .select, textarea {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(120,170,225,0.24);
  border-radius: var(--radius-sm);
}
.input:focus, .select:focus, textarea:focus {
  outline: none;
  border-color: rgba(34,201,255,0.6);
  box-shadow: 0 0 0 3px rgba(34,201,255,0.12);
}

/* ── Hero ───────────────────────────────────────────────────────
   De oude hero legde een gerechtsgebouw-illustratie over de hele
   breedte. Die vecht met de merkachtergrond en zegt bovendien iets
   wat niet klopt: wij zijn geen gerecht. Nu een rustig glaspaneel
   waar de merkfoto doorheen zichtbaar blijft. */
.hero {
  min-height: 0;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--nx-panel);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 26px 70px -34px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero-bg-img { display: none; }
.hero-gradient {
  background: radial-gradient(900px 420px at 88% -20%, rgba(34,201,255,0.16), transparent 62%);
}
.hero-content { padding: clamp(2rem, 5vw, 3.4rem) clamp(1.4rem, 4vw, 2.8rem); }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--nx-mono);
  font-size: .74rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--blue);
  background: none;
  border: 0;
  padding: 0;
}
.hero-eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, #22C9FF, transparent);
}
.hero-content h2 {
  font-family: var(--nx-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #F4F9FF;
}
.hero-content h2 em {
  font-style: normal;
  background: var(--nx-cyan-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-content > p {
  color: var(--label-3);
  max-width: 62ch;
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.7;
}
.hero-search .input { background: rgba(255,255,255,0.05); }

/* ── Footer ─────────────────────────────────────────────────── */
footer {
  display: block;
  margin-top: clamp(3rem, 8vw, 6rem);
  padding: clamp(2.6rem, 6vw, 4rem) 1.5rem 2rem;
  border-top: 1px solid rgba(120,170,225,0.12);
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(34,201,255,0.06), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.012), transparent);
}
.footer-inner { max-width: 1180px; margin-inline: auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: clamp(1.4rem, 4vw, 2.8rem);
  margin-bottom: 2.2rem;
}
.footer-brand-row { display: flex; align-items: center; gap: .62rem; }
.footer-brand-row img { width: 32px; height: 32px; filter: drop-shadow(0 0 10px rgba(34,201,255,.35)); }
.footer-brand-row strong {
  font-family: var(--nx-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .14em;
  color: #F4F9FF;
}
.footer-tagline {
  font-family: var(--nx-display);
  color: var(--blue);
  font-weight: 600;
  margin-top: .9rem;
  font-size: .95rem;
}
.footer-blurb { margin-top: .6rem; font-size: .88rem; line-height: 1.65; max-width: 42ch; color: var(--label-3); }
.footer-col h4 {
  font-family: var(--nx-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--label-4);
  margin-bottom: .85rem;
}
.footer-col a {
  display: block;
  font-size: .88rem;
  color: var(--label-3);
  padding: .22rem 0;
  transition: color .2s;
}
.footer-col a:hover { color: var(--blue); text-decoration: none; }
.footer-rule { height: 1px; border: 0; background: linear-gradient(90deg, transparent, rgba(120,170,225,0.24), transparent); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .8rem 2rem;
  justify-content: space-between; align-items: flex-start;
  padding-top: 1.4rem;
}
.footer-legal { font-size: .8rem; color: var(--label-4); max-width: 70ch; line-height: 1.6; }
.footer-made { font-family: var(--nx-mono); font-size: .76rem; color: var(--label-4); letter-spacing: .02em; }
.footer-made a { color: var(--label-3); border-bottom: 1px solid rgba(120,170,225,.24); }
.footer-made a:hover { color: var(--blue); text-decoration: none; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ── Documentpagina's (/waarom, /verantwoording, …) ──────────── */
.doc-wrap { max-width: 780px; margin-inline: auto; }
.doc-hero { padding: clamp(1.5rem, 4vw, 3rem) 0 1.4rem; }
.doc-hero h1 {
  font-family: var(--nx-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: 1.1;
  color: #F4F9FF;
  margin-top: .5rem;
}
.doc-meta {
  margin-top: 1.1rem;
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  font-family: var(--nx-mono);
  font-size: .76rem;
  color: var(--label-4);
}
.doc-meta a { color: var(--label-3); border-bottom: 1px solid rgba(120,170,225,.24); }
.doc-body { font-size: 1.02rem; line-height: 1.75; color: var(--label-2); }
.doc-body h2 {
  font-family: var(--nx-display);
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  color: #F4F9FF;
  margin: 2.6rem 0 .9rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(120,170,225,0.12);
}
.doc-body h3 { font-family: var(--nx-display); font-size: 1.12rem; color: #F4F9FF; margin: 1.8rem 0 .6rem; }
.doc-body p { margin: .9rem 0; color: var(--label-2); }
.doc-body ul, .doc-body ol { margin: .9rem 0 .9rem 1.3rem; }
.doc-body li { margin: .45rem 0; color: var(--label-2); }
.doc-body strong { color: #F4F9FF; font-weight: 600; }
.doc-body a { color: var(--blue); border-bottom: 1px solid rgba(34,201,255,.3); }
.doc-body a:hover { text-decoration: none; color: var(--blue-hover); }
.doc-body blockquote {
  margin: 1.4rem 0;
  padding: .9rem 1.2rem;
  border-left: 2px solid rgba(34,201,255,.5);
  background: rgba(34,201,255,.05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--label-2);
}
.doc-body table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .92rem; }
.doc-body th, .doc-body td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid rgba(120,170,225,0.12); }
.doc-body th { font-family: var(--nx-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--label-4); }
.doc-body code {
  font-family: var(--nx-mono); font-size: .88em;
  background: rgba(255,255,255,.05); padding: .12em .4em; border-radius: 5px; color: var(--teal);
}
.doc-body hr { border: 0; height: 1px; background: rgba(120,170,225,0.14); margin: 2rem 0; }
.doc-foot {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(120,170,225,0.12);
  display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center;
  font-size: .85rem; color: var(--label-4);
}
.doc-foot a { color: var(--blue); }

/* Kaartjes die naar de documenten verwijzen (homepage) */
.doc-links { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .doc-links { grid-template-columns: 1fr; } }


/* ── Leesregel over de merkfoto ─────────────────────────────────────────
   Lange lopende tekst boven een foto leest slecht, hoe mooi de foto ook is.
   Een zachte scrim achter de tekstkolom zet de leesbaarheid voorop zonder
   de achtergrond helemaal weg te poetsen. */
.doc-wrap {
  position: relative;
  padding: clamp(1.2rem, 3vw, 2.6rem) clamp(1.2rem, 3vw, 2.4rem) 2rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.07);
  background: linear-gradient(180deg, rgba(6,11,22,0.86), rgba(4,7,15,0.92));
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 26px 70px -34px rgba(0,0,0,0.9);
  max-width: 840px;
}
.doc-body p, .doc-body li { color: #CFE0F3; }
.doc-hero h1 { max-width: 22ch; }


/* Dezelfde leesregel voor blog, statistieken, juridisch en bekende zaken. */
.content-page {
  position: relative;
  max-width: 840px;
  margin-inline: auto;
  padding: clamp(1.2rem, 3vw, 2.6rem) clamp(1.2rem, 3vw, 2.4rem) 2rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.07);
  background: linear-gradient(180deg, rgba(6,11,22,0.86), rgba(4,7,15,0.92));
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 26px 70px -34px rgba(0,0,0,0.9);
}
.content-page h1 { font-family: var(--nx-display); font-weight: 800; letter-spacing: -0.025em; }
.content-page h2 {
  font-family: var(--nx-display);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(120,170,225,0.12);
  margin-top: 2.2rem;
}
.content-page p, .content-page li { color: #CFE0F3; }