/**
 * Autobeurzen-kalender — templates/page-autobeurzen.php
 *
 * Alleen op dat sjabloon ingeladen (zie includes/assets.php). Gebruikt de
 * themavariabelen uit :root in style.css van carblogger2026, dus de donkere
 * modus komt gratis mee. Onder een ander thema vallen de var()-waarden terug op
 * hun fallback en blijft de tabel leesbaar, alleen niet meer in de huisstijl.
 */

/* ── Volle breedte ────────────────────────────────────────────────────────────
 * Dit sjabloon heeft geen zijbalk. De klasse hoort bij de themamarkup
 * (.content-area), maar de plugin levert hem zelf mee in plaats van erop te
 * rekenen dat het thema hem heeft — anders staat de tabel na een themawissel
 * ineens in een kolom van 1fr naast een lege zijbalkkolom.
 *
 * minmax(0, 1fr) in plaats van 1fr: een kolom van 1fr heeft min-width auto en
 * kan dus door brede inhoud (deze tabel, of een door AdSense ingevoegde
 * advertentie) opgerekt worden tot buiten het raster. De laadpalen-plugin heeft
 * een eigen, oudere kopie van deze klasse met `1fr`; die pagina heeft geen brede
 * tabel, dus daar valt het niet op. */
.content-area--breed {
	grid-template-columns: minmax(0, 1fr);
}

/* ── Kop ───────────────────────────────────────────────────────────────────── */
/* Dezelfde binnenmarge als .page-single .post-body (1.75rem 2rem in style.css).
 * Deze sectie staat náást .post-body in de article, niet erin, en plakte daardoor
 * met bijschrift en legenda tegen de rand van de witte kaart. */
.cb-beurzen {
	padding: .5rem 2rem 1.75rem;
}

.cb-beurzen__asof {
	font-size: .8rem;
	color: var(--color-text-muted);
}

/* HIDDEN MOET HIER HARD WINNEN. Het filterscript verbergt rijen met het
 * hidden-attribuut, en de browser regelt dat normaal zelf via [hidden]{display:none}
 * in zijn eigen stylesheet. Maar onder 720px zetten we hieronder `tr { display:
 * block }` — een auteursregel, en die wint altijd van de browserstijl. Zonder deze
 * regel blijven weggefilterde beurzen op de telefoon dus gewoon staan. */
.cb-beurzen [hidden],
.cb-filter[hidden] {
	display: none !important;
}

/* ── Filterbalk ────────────────────────────────────────────────────────────── */
.cb-filter {
	margin: .75rem 0 1rem;
}

.cb-filter__velden {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.cb-filter__veld {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin: 0;
	min-width: 0;
	flex: 1 1 10rem;
}

.cb-filter__veld label {
	font-family: var(--font-heading);
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--color-text-muted);
}

.cb-filter__veld select {
	width: 100%;
	padding: .45rem .5rem;
	font-family: var(--font-body);
	font-size: .88rem;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.cb-filter__veld select:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
}

/* Het vinkje "Toon ook afgeronde autobeurzen". Staat los onder de keuzelijsten en niet
 * als zesde .cb-filter__veld: het is geen keuzelijst, en in die flexrij zou het als
 * los blokje met een uppercase-label meelopen. Het label omvat de checkbox, dus er
 * is geen for/id-koppeling nodig en de tekst is meteen klikbaar. */
.cb-filter__schakelaar {
	margin: .7rem 0 0;
	font-size: .85rem;
}

.cb-filter__schakelaar label {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	cursor: pointer;
	color: var(--color-text-muted);
}

.cb-filter__schakelaar input {
	accent-color: var(--color-primary);
	margin: 0;
	/* Vaste maat: een checkbox schaalt in sommige browsers met de font-size mee, en
	   die is hier .85rem. */
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
}

.cb-filter__uitslag {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: .7rem 0 0;
	font-size: .82rem;
	color: var(--color-text-muted);
}

.cb-filter__wissen {
	font-family: var(--font-body);
	font-size: .82rem;
	color: var(--color-primary);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
}

.cb-filter__wissen:hover { color: var(--color-primary-dark); }

.cb-beurzen__leeg {
	margin: 0 0 1rem;
	padding: 1rem;
	font-size: .9rem;
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
}

/* ── Tabel ─────────────────────────────────────────────────────────────────── */
.cb-beurzen__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

/* border-collapse: SEPARATE, niet collapse. Twee redenen, en de tweede is een
 * echte bug: een `position: sticky` cel in een collapse-tabel neemt zijn randen
 * niet mee — die blijven op de oorspronkelijke plek staan, wat bovenaan de tabel
 * een lege omrande strook oplevert en de eerste jaarkop eronder verstopt. Met
 * separate + border-spacing 0 ziet het er identiek uit en klopt de sticky kop. */
.cb-beurzen table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: .92rem;
	background: var(--color-bg);
}

/* style.css geeft élke th/td in het thema een rand rondom (regel ~204). Hier niet:
 * deze tabel scheidt met alleen een lijn ónder de rij. */
.cb-beurzen th,
.cb-beurzen td {
	border: 0;
}

.cb-beurzen thead th {
	font-family: var(--font-heading);
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	text-align: left;
	white-space: nowrap;
	padding: .75rem .9rem;
	background: var(--color-bg-alt);
	color: var(--color-text);
	/* inset-schaduw in plaats van border-bottom: die telt niet mee in de
	 * rijhoogte en blijft met border-spacing 0 een strakke lijn. */
	box-shadow: inset 0 -1px 0 var(--color-border);
}

/* HIER STOND EEN MEESCROLLENDE KOPRIJ (position: sticky; top: var(--header-height))
 * EN DIE KON NOOIT WERKEN. Sticky rekent tegen de dichtstbijzijnde scrollbare
 * voorouder, en dat is niet het venster maar .cb-beurzen__scroll — die heeft
 * overflow-x: auto voor de horizontale uitwijk op smalle schermen. Die div scrolt
 * verticaal nooit, dus de koprij bleef niet ergens aan plakken: ze werd simpelweg
 * 53px omlaag getekend, liet een lege omrande strook achter op haar eigen plek en
 * dekte de eerste jaarkop ("2026") af. Meescrollen vraagt dus eerst om die
 * overflow weg, en die weegt zwaarder — het is maar een tabel van 22 rijen. */

.cb-beurzen tbody td {
	padding: .75rem .9rem;
	vertical-align: middle;
	border-bottom: 1px solid var(--color-border);
}

.cb-beurzen tbody tr:last-child td { border-bottom: 0; }
.cb-beurzen tbody tr:hover { background: rgba(25, 130, 209, .06); }

.cb-beurzen caption {
	caption-side: bottom;
	text-align: left;
	padding-top: .6rem;
	font-size: .8rem;
	color: var(--color-text-muted);
}

/* Jaar-tussenkop. Een <th colspan> in de tbody, geen losse tabel: zo blijft het
 * één scrollbare tabel en houden de kolommen dezelfde breedte per jaar. */
.cb-beurzen .cb-year th {
	font-family: var(--font-heading);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .55rem .9rem;
	background: var(--color-primary);
	color: #fff;
}

/* ── Advertentie op de jaargrens ──────────────────────────────────────────────
 * Zie templates/tabel.php: een <tr> met colspan, want iets anders dan een rij
 * schuift de browser vóór de tabel. De opmaak van .cb-ad zelf komt uit het thema
 * (style.css); hier alleen de cel eromheen.
 *
 * max-width op de <ins> is geen overbodige voorzichtigheid: een tabel met
 * table-layout auto groeit mee met zijn inhoud, dus een advertentie die breder
 * uitpakt dan de kolom zou de hele tabel oprekken. Zelfde reden als de regel
 * voor .posts-grid in het thema. */
.cb-beurzen tr.cb-ad-rij td {
	padding: 0 .9rem;
	border-bottom: 0;
}

.cb-beurzen tr.cb-ad-rij:hover { background: none; }

.cb-beurzen tr.cb-ad-rij .cb-ad {
	margin: 1rem 0;
	max-width: 100%;
	overflow: hidden;
}

.cb-beurzen tr.cb-ad-rij ins.adsbygoogle {
	display: block;
	max-width: 100%;
}

/* ── Logo-wordmark ─────────────────────────────────────────────────────────── */
.cb-beurzen td.cb-td-logo {
	width: 64px;
	padding-right: 0;
}

.cb-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 40px;
	flex: 0 0 64px;
	border-radius: var(--radius);
	background: var(--cb-brand, #333);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: .66rem;
	line-height: 1.05;
	letter-spacing: .02em;
	text-align: center;
	text-transform: uppercase;
	padding: .2rem;
	overflow: hidden;
}

/* Staat klaar voor een echt logobestand; zie de uitleg in het sjabloon. */
.cb-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ── Cellen ────────────────────────────────────────────────────────────────── */
.cb-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.25;
	display: block;
	text-decoration: none;
	color: var(--color-text);
}

.cb-name:hover { color: var(--color-primary); }

.cb-sub {
	display: block;
	font-size: .78rem;
	color: var(--color-text-muted);
	margin-top: .15rem;
}

.cb-date  { font-weight: 600; white-space: nowrap; }

/* ── Al geweest ───────────────────────────────────────────────────────────────
 * Gedempt, niet weggestopt: de rij blijft volledig leesbaar en klikbaar. Geen
 * doorhaling en geen opacity op de hele rij — dat haalt het contrast van de
 * tekst onder de toegankelijkheidsnorm en maakt ook de logo's vaal. Alleen de
 * kleuren van de tekstcellen gaan een stap terug. */
.cb-beurzen tr.cb-geweest td:not( .cb-td-logo ) {
	color: var(--color-text-muted);
}

.cb-beurzen tr.cb-geweest .cb-name {
	color: var(--color-text-muted);
	font-weight: 600;
}

.cb-beurzen tr.cb-geweest .cb-name:hover { color: var(--color-primary); }

/* De logo's van afgelopen edities iets terug, zodat het oog bij wat nog komt
   blijft hangen. Niet verder dan .75: daaronder worden de donkere wordmarks
   modderig tegen de witte rij. */
.cb-beurzen tr.cb-geweest .cb-logo { opacity: .75; }

.cb-geweest-label {
	display: inline-block;
	margin-left: .4rem;
	padding: .15rem .35rem;
	border-radius: 3px;
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
	font-size: .68rem;
	font-weight: 700;
	text-transform: lowercase;
	letter-spacing: .02em;
	vertical-align: middle;
}
.cb-place { white-space: nowrap; }
/* De vlag is een emoji en schaalt dus met font-size. line-height: 1 erbij, anders
   rekt die grotere regelhoogte de hele rij op; vertical-align houdt hem op de
   tekstregel in plaats van hem op te tillen. */
.cb-flag {
	margin-right: .4rem;
	font-size: 1.25rem;
	line-height: 1;
	vertical-align: -.15em;
}

/* ── Labels ────────────────────────────────────────────────────────────────── */
.cb-tag {
	display: inline-block;
	font-size: .68rem;
	font-weight: 700;
	line-height: 1;
	padding: .3rem .45rem;
	border-radius: 999px;
	white-space: nowrap;
	background: var(--color-bg-alt);
	color: var(--color-text);
}

.cb-tag--nieuw    { background: var(--color-primary); color: #fff; }
.cb-tag--klassiek { background: #8a6d3b; color: #fff; }
.cb-tag--tuning   { background: #5b2c83; color: #fff; }
.cb-tag--tech     { background: #0f766e; color: #fff; }
.cb-tag--festival { background: #1f6f3f; color: #fff; }

.cb-est {
	font-size: .68rem;
	font-weight: 700;
	color: #8a5a00;
	background: var(--color-accent);
	padding: .15rem .35rem;
	border-radius: 3px;
	margin-left: .35rem;
	white-space: nowrap;
}

.cb-beurzen__legend {
	margin-top: .9rem;
	font-size: .8rem;
	color: var(--color-text-muted);
	line-height: 1.6;
}

.cb-beurzen__legend strong { color: var(--color-text); }

/* Alleen zichtbaar voor schermlezers. */
.cb-beurzen .cb-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* ── Mobiel: tabel wordt kaartjes ──────────────────────────────────────────────
 * Onder 720px past een tabel van vijf kolommen niet zonder horizontaal scrollen.
 * De <thead> gaat naar schermlezers-only en elke <tr> wordt een kaartje met het
 * logo absoluut linksboven. */
@media (max-width: 719px) {
	/* Zelfde smalle binnenmarge als de rest van de pagina daar krijgt (style.css
	   zet .page-single .post-body op 1rem links/rechts onder deze breedte). */
	.cb-beurzen {
		padding: .5rem 1rem 1rem;
	}

	/* Twee filters naast elkaar; vijf onder elkaar is een hele schermlengte. */
	.cb-filter__veld {
		flex: 1 1 calc( 50% - .75rem );
	}

	.cb-beurzen__scroll {
		border: 0;
		box-shadow: none;
		overflow: visible;
	}

	.cb-beurzen thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
	}

	.cb-beurzen table,
	.cb-beurzen tbody,
	.cb-beurzen tr,
	.cb-beurzen td {
		display: block;
		width: auto;
	}

	/* De caption moet hier óók display: block worden. Blijft ze table-caption,
	 * dan bouwt de browser er een anonieme tabel omheen (de echte tabel is nu
	 * immers een block) en krimpt de tekst tot een kolom van een paar woorden
	 * breed. Ze staat op mobiel boven de kaartjes in plaats van eronder — als
	 * losse regel leest dat prima. */
	.cb-beurzen caption {
		display: block;
		width: 100%;
		padding: 0 0 .75rem;
	}

	.cb-beurzen .cb-year th {
		display: block;
		border-radius: var(--radius);
		margin: 1.25rem 0 .6rem;
	}

	/* De advertentierij is geen beurskaartje: geen rand, geen inspringing voor
	   een logo dat er niet is. */
	.cb-beurzen tbody tr:not( .cb-year ):not( .cb-ad-rij ) {
		position: relative;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		padding: .85rem .9rem .85rem 5.4rem;
		margin-bottom: .6rem;
		background: var(--color-bg);
		box-shadow: var(--shadow-sm);
	}

	.cb-beurzen tbody tr:hover { background: var(--color-bg); }

	.cb-beurzen tbody td {
		border: 0;
		padding: 0;
	}

	.cb-beurzen td.cb-td-logo {
		position: absolute;
		left: .9rem;
		top: .9rem;
		width: 64px;
	}

	.cb-beurzen td.cb-td-date { margin-top: .3rem; }

	.cb-beurzen td.cb-td-place,
	.cb-beurzen td.cb-td-type {
		font-size: .82rem;
		color: var(--color-text-muted);
		margin-top: .2rem;
	}

	.cb-beurzen td.cb-td-type { margin-top: .5rem; }
}