/**
 * Route to AI — kleurthema.
 * Zelfde variabelenpatroon als Cloud-Examen (--forge-*), maar dan --r2ai-*
 * met indigo/violet als basis en cyaan als primaire accentkleur i.p.v. amber.
 */

:root {
	/* Basis (donker thema, zelfde rol als --forge-black / --forge-dark) */
	--r2ai-black: #0e0b1e;         /* diepste achtergrond */
	--r2ai-dark: #161129;          /* sectie-achtergrond */
	--r2ai-card: #1e1836;          /* kaarten / panelen */
	--r2ai-border: #322a52;        /* randen op donkere vlakken */

	/* Tekst */
	--r2ai-muted: #9a91c2;         /* gedempte tekst / subtitels */
	--r2ai-text: #e7e3f7;          /* standaard leestekst */
	--r2ai-white: #ffffff;

	/* Merkkleuren: indigo/violet basis */
	--r2ai-indigo: #4f46e5;        /* primaire merkkleur, vervangt --forge-blue-achtige rol */
	--r2ai-indigo-dark: #3730a3;
	--r2ai-violet: #7c3aed;        /* secundaire merkkleur */
	--r2ai-violet-dark: #5b21b6;

	/* Primair accent: cyaan (vervangt --forge-amber) */
	--r2ai-cyan: #22d3ee;
	--r2ai-cyan-dark: #0891b2;
	--r2ai-cyan-soft: rgba(34, 211, 238, 0.12); /* voor badges/hover-achtergronden */

	/* Statuskleuren (zelfde rol als --forge-green) */
	--r2ai-green: #34d399;         /* geslaagd / correct */
	--r2ai-red: #f87171;           /* fout antwoord */

	/* Gradient, te gebruiken voor hero-achtergronden en primaire knoppen */
	--r2ai-gradient: linear-gradient(135deg, var(--r2ai-indigo) 0%, var(--r2ai-violet) 100%);
}

body {
	background: var(--r2ai-black);
	color: var(--r2ai-text);
}

/* ---------------- Knoppen ---------------- */

.r2ai-btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: 0.5rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	border: 1px solid transparent;
	cursor: pointer;
}
.r2ai-btn:hover { transform: translateY(-1px); }

.r2ai-btn-primary {
	background: var(--r2ai-gradient);
	color: var(--r2ai-white);
	box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}
.r2ai-btn-primary:hover { box-shadow: 0 6px 20px rgba(34, 211, 238, 0.35); }

.r2ai-btn-outline {
	background: transparent;
	color: var(--r2ai-cyan);
	border-color: var(--r2ai-cyan);
}
.r2ai-btn-outline:hover {
	background: var(--r2ai-cyan-soft);
}

/* ---------------- Badge-balk ---------------- */

.r2ai-badge-balk {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	padding: 1rem 0;
}

.r2ai-badge {
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: var(--r2ai-card);
	border: 1px solid var(--r2ai-border);
	color: var(--r2ai-muted);
	font-size: 0.85rem;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.r2ai-badge:hover {
	border-color: var(--r2ai-cyan);
	color: var(--r2ai-cyan);
}
.r2ai-badge-meer {
	color: var(--r2ai-violet);
	border-color: var(--r2ai-violet);
}

/* ---------------- Cursusgrid ---------------- */

.r2ai-cursusgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}

.r2ai-cursus-card {
	display: block;
	background: var(--r2ai-card);
	border: 1px solid var(--r2ai-border);
	border-radius: 0.75rem;
	padding: 1.25rem;
	text-decoration: none;
	color: var(--r2ai-text);
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.r2ai-cursus-card:hover {
	border-color: var(--r2ai-cyan);
	transform: translateY(-2px);
}

.r2ai-cursus-code {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--r2ai-cyan);
	background: var(--r2ai-cyan-soft);
	padding: 0.15rem 0.5rem;
	border-radius: 0.3rem;
	margin-bottom: 0.5rem;
}

.r2ai-cursus-card h3 {
	margin: 0.25rem 0;
	color: var(--r2ai-white);
}

.r2ai-cursus-meta {
	color: var(--r2ai-muted);
	font-size: 0.85rem;
	margin: 0;
}

.r2ai-cursusgrid-footer {
	text-align: center;
	margin: 2rem 0;
}

/* ---------------- Footer cursussenlijst ---------------- */

.r2ai-footer-cursussen {
	list-style: none;
	margin: 0;
	padding: 0;
}
.r2ai-footer-cursussen li { margin-bottom: 0.4rem; }
.r2ai-footer-cursussen a {
	color: var(--r2ai-muted);
	text-decoration: none;
}
.r2ai-footer-cursussen a:hover { color: var(--r2ai-cyan); }
.r2ai-footer-alle-link { color: var(--r2ai-violet) !important; font-weight: 600; }

/* ---------------- Footer "Juridisch"-blokje ---------------- */

.r2ai-footer-juridisch h4 {
	color: var(--r2ai-white);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85rem;
	margin-bottom: 0.75rem;
}
.r2ai-footer-juridisch ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.r2ai-footer-juridisch li { margin-bottom: 0.5rem; }
.r2ai-footer-juridisch a {
	color: var(--r2ai-muted);
	text-decoration: none;
}
.r2ai-footer-juridisch a:hover { color: var(--r2ai-cyan); }

/* ---------------- Quiz ---------------- */

.r2ai-quiz-locked {
	padding: 1.5rem;
	background: var(--r2ai-card);
	border: 1px dashed var(--r2ai-border);
	border-radius: 0.75rem;
	color: var(--r2ai-muted);
}
.r2ai-quiz-locked a { color: var(--r2ai-cyan); }

.r2ai-vraag {
	background: var(--r2ai-card);
	border: 1px solid var(--r2ai-border);
	border-radius: 0.75rem;
	padding: 1.25rem;
	margin-bottom: 1rem;
}

.r2ai-vraag-tekst {
	font-weight: 600;
	color: var(--r2ai-white);
	margin-top: 0;
}

.r2ai-optie {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	margin-bottom: 0.4rem;
	cursor: pointer;
	transition: background 0.15s ease;
}
.r2ai-optie:hover { background: rgba(124, 58, 237, 0.12); }

.r2ai-optie.correct { background: rgba(52, 211, 153, 0.15); color: var(--r2ai-green); }
.r2ai-optie.fout { background: rgba(248, 113, 113, 0.15); color: var(--r2ai-red); }

/* ---------------- Kennisbank / boek-wrapper ---------------- */
/* Let op: content binnen .r2ai-boek-wrapper krijgt eigen scoped CSS per boek
   in post_content zelf — hier alleen basis-typografie als vangnet. */

.r2ai-boek-wrapper {
	color: var(--r2ai-text);
	line-height: 1.7;
}
.r2ai-boek-wrapper h1,
.r2ai-boek-wrapper h2,
.r2ai-boek-wrapper h3 {
	color: var(--r2ai-white);
}
.r2ai-boek-wrapper a { color: var(--r2ai-cyan); }

/* ---------------- Disclaimers op cursuspagina's ---------------- */

.r2ai-examen-disclaimer {
	font-size: 0.85rem;
	color: var(--r2ai-muted);
	font-style: italic;
}

.r2ai-vendor-disclaimer {
	background: var(--r2ai-cyan-soft);
	border-left: 3px solid var(--r2ai-cyan);
	padding: 0.75rem 1rem;
	border-radius: 0.25rem;
	color: var(--r2ai-text);
}

.r2ai-juridische-tabel {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
	font-size: 0.9rem;
}
.r2ai-juridische-tabel th,
.r2ai-juridische-tabel td {
	border: 1px solid var(--r2ai-border);
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
}
.r2ai-juridische-tabel th {
	background: var(--r2ai-card);
	color: var(--r2ai-white);
}