/* -- Hé-Cabaret: aanvullingen op het gecompileerde ontwerp (he-tailwind.css) -- */

/* utilities die niet in de ontwerp-build zitten */
.gap-x-4 { column-gap: 1rem; }
.gap-y-8 { row-gap: 2rem; }
.items-baseline { align-items: baseline; }
.max-w-3xl { max-width: 48rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-16 { margin-top: 4rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-16 { padding-top: 4rem; }
.group:hover .group-hover\:text-primary { color: var(--primary); }
@media (width >= 768px) {
	.md\:pt-20 { padding-top: 5rem; }
}
@media (width >= 1024px) {
	.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.lg\:text-3xl { font-size: 1.875rem; line-height: 1.2; }
}

html { scroll-behavior: smooth; }
body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); }
.buster { display: none; }

/* -- bewerkbare tekst (htmlblokken / pagina-inhoud) -- */
.he-prose > * + *,
.he-prose .htmlblok > * + * { margin-top: 1.25rem; }
.he-prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.he-prose a:hover { color: var(--foreground); }
.he-prose strong, .he-prose b { color: var(--foreground); font-weight: 600; }
.he-prose h2, .he-prose h3 { font-family: Fraunces, ui-serif, Georgia, serif; color: var(--foreground); line-height: 1.15; }
.he-prose h2 { font-size: 2.25rem; }
.he-prose h3 { font-size: 1.5rem; }
.he-prose ul { list-style: none; padding: 0; }
.he-prose ul li { padding: .35rem 0; border-bottom: 1px solid var(--border); }
.he-prose ul li:last-child { border-bottom: 0; }
.he-prose .he-groet { font-family: Fraunces, ui-serif, Georgia, serif; font-size: 1.5rem; color: var(--foreground); }

/* kleine label boven een kop, zoals in het ontwerp */
.he-eyebrow { font-size: .75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: .3em; color: var(--primary); }

/* hero-tekst op home */
.he-hero .he-eyebrow { display: flex; align-items: center; gap: .75rem; }
.he-hero .he-eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--primary); }
.he-hero h1 { margin-top: 1.5rem; font-family: Fraunces, ui-serif, Georgia, serif; font-size: 3.75rem; line-height: .95; letter-spacing: -.025em; }
.he-hero h1 .accent { color: var(--primary); }
.he-hero .he-lead { margin-top: 2rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.75rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); }
@media (width >= 640px) { .he-hero h1 { font-size: 4.5rem; } }
@media (width >= 1024px) { .he-hero h1 { font-size: 9rem; } }

/* intro-titel links naast tekst */
.he-intro-title h2 { margin-top: 1rem; font-family: Fraunces, ui-serif, Georgia, serif; font-size: 2.25rem; line-height: 1.1; }
@media (width >= 1024px) { .he-intro-title h2 { font-size: 3rem; } }

/* uitgelichte voorstelling */
.he-feature h2 { margin-top: .75rem; font-size: 2.25rem; }
@media (width >= 1024px) { .he-feature h2 { font-size: 3rem; } }
.he-feature .he-eyebrow + h2 { margin-top: .75rem; }

/* bestuurslijst */
.he-list ul li { display: flex; justify-content: space-between; gap: 1rem; }
.he-list ul li em { font-style: normal; color: var(--muted-foreground); font-size: .875rem; }

/* ledenlijst in kolommen */
.he-leden ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; }
.he-leden li { break-inside: avoid; padding: .6rem 0; border-bottom: 1px solid var(--border); font-family: Fraunces, ui-serif, Georgia, serif; font-size: 1.125rem; }
@media (width >= 768px) { .he-leden ul { columns: 3; } }
@media (width >= 1024px) { .he-leden ul { columns: 4; } }

/* lijst met jaartallen */
.he-jaren ul { list-style: none; padding: 0; margin: 0; }
.he-jaren li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--border); color: var(--muted-foreground); }
.he-jaren li b, .he-jaren li strong { font-family: Fraunces, ui-serif, Georgia, serif; font-weight: 500; color: var(--primary); }
@media (width >= 768px) { .he-jaren ul { columns: 2; column-gap: 3rem; } .he-jaren li { break-inside: avoid; } }

/* -- beheerbalk / inline editor (zonder bootstrap) -- */
.editor-admin-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem 1rem; background: #120507; border-bottom: 1px solid var(--border); font-size: .8rem; }
.editor-admin-bar > div { display: flex; align-items: center; gap: .75rem; }
.editor-admin-bar .admin-bar-item { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border: 1px solid var(--border); border-radius: 999px; color: var(--foreground); background: transparent; cursor: pointer; }
.editor-admin-bar .admin-bar-item.active { background: var(--primary); color: var(--primary-foreground); }
.editor-admin-bar .editor-icon { width: 14px; height: 14px; filter: invert(1); }
.editor-admin-bar ~ .min-h-screen .he-header { top: 2.6rem; }
body.editing [editor-type] { outline: 1px dashed color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: 6px; min-height: 1.5rem; }

/* fancybox in huisstijl */
.fancybox__container { --fancybox-bg: rgba(20, 6, 8, .94); }

/* paginakoppen (bewerkbaar) */
.he-kop h1 { margin-top: 1rem; font-family: Fraunces, ui-serif, Georgia, serif; font-size: 3rem; line-height: 1.25; }
.he-kop h1 .accent { color: var(--primary); }
@media (width >= 1024px) { .he-kop h1 { font-size: 4.5rem; line-height: 1.1; } }

/* cijferblokken op Hé-Cabaret (bewerkbaar) */
.he-cijfers ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
@media (width >= 640px) { .he-cijfers ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.he-cijfers li { border: 1px solid var(--border); border-radius: .75rem; background: color-mix(in oklab, var(--surface) 40%, transparent); padding: 1.5rem; font-size: .875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.he-cijfers li strong { display: block; margin-bottom: .5rem; font-family: Fraunces, ui-serif, Georgia, serif; font-size: 2.25rem; line-height: 2.5rem; font-weight: 400; color: var(--primary); }