/**
 * Tangoweek Programma — timetable en artiestprofiel.
 *
 * Volgt het thema van de website (besluit O7, 20 okt 2026): de accentkleur komt uit
 * --primary-color van The Conference Pro (nu #dd9933), het lettertype uit --primary-font
 * (nu Quicksand), zoals in de Schedule-sectie van de homepage.
 * Uit te zetten via Tangoweek → Instellingen.
 *
 * Contrast (WCAG 2.2 AA, N09): #dd9933 op wit is 2,4:1 en wordt daarom alleen gebruikt voor
 * randen en vlakken, nooit voor tekst. Tekst is donker (#222 op wit: 15,9:1).
 */

.tw-programma,
.tw-profiel {
	--tw-accent: var(--primary-color, #dd9933);
	--tw-accent-licht: rgba(var(--primary-color-rgb, 221, 153, 51), 0.15);
	--tw-tekst: #222;
	--tw-tekst-zacht: #555;
	--tw-rand: #e6e6e6;
	--tw-vlak: #fff;
	--tw-slot: 1.6rem;
	--tw-radius: 5px;
	color: var(--tw-tekst);
	font-family: var(--primary-font, inherit);
	text-align: left;
}

.tw-programma *,
.tw-profiel * {
	box-sizing: border-box;
}

/*
 * Koppen in het hoofdlettertype van het thema.
 *
 * The Conference Pro geeft koppen binnen de tekst van een pagina een eigen lettertype en
 * grootte (bijv. "#primary .page .entry-content h3": Roboto Condensed, 31px). Binnen het
 * programma moet het lettertype gelijk zijn aan de rest van het programma en aan de
 * Schedule-sectie van de homepage. De herhaalde klasse en :not(#tw) geven deze regels
 * voorrang op zulke themaregels, zonder !important.
 */
.tw-programma.tw-programma.tw-programma :is(h2, h3, h4, h5, h6):not(#tw),
.tw-profiel.tw-profiel.tw-profiel :is(h2, h3, h4, h5, h6):not(#tw) {
	font-family: var(--primary-font, inherit);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.tw-programma.tw-programma.tw-programma .tw-dag-kop:not(#tw) {
	font-size: 1.5rem;
}

.tw-programma.tw-programma.tw-programma .tw-locatie-kop:not(#tw) {
	font-size: 1.1rem;
	font-weight: 600;
}

.tw-programma.tw-programma.tw-programma .tw-naam:not(#tw) {
	font-size: 1.05rem;
}

.tw-programma.tw-programma.tw-programma .tw-kaart .tw-naam:not(#tw) {
	font-size: 1.2rem;
}

.tw-profiel.tw-profiel.tw-profiel .tw-profiel-kop:not(#tw) {
	font-size: 1.4rem;
}

/*
 * Als widget in een sectie van de homepage. The Conference Pro zet de widgets in de
 * Speakers-sectie naast elkaar (flex); zonder volle breedte hangt de breedte van het programma
 * af van de inhoud en verspringt hij bij het uitklappen van een bio.
 */
.widget_tangoweek_programma {
	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
}

/*
 * Lijsten en knoppen binnen het programma. Het thema geeft lijsten in een widget randen en
 * witruimte (".widget ul li") en elke knop hoofdletters en letterafstand; dat geldt niet voor
 * het programma.
 */
.tw-programma.tw-programma.tw-programma :is(.tw-kaarten, .tw-dagkiezer ul, .tw-uitleg) > li:not(#tw) {
	padding: 0;
	border: 0;
	font-weight: inherit;
}

.tw-programma.tw-programma.tw-programma :is(.tw-kaarten, .tw-dagkiezer ul) > li:not(#tw) {
	margin: 0;
}

.tw-programma.tw-programma.tw-programma button:not(#tw) {
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
}

/* Dag */

.tw-dag + .tw-dag {
	margin-top: 2.5rem;
}

.tw-programma .tw-dag-kop {
	margin: 0 0 1rem;
	padding-bottom: 0.4rem;
	border-bottom: 3px solid var(--tw-accent);
	color: var(--tw-tekst);
	font-size: 1.5rem;
	line-height: 1.3;
}

/* Rooster: locaties als kolommen, rijen van 15 minuten. */

.tw-rooster {
	display: grid;
	grid-template-columns: repeat(var(--tw-kolommen, 1), minmax(0, 1fr));
	grid-template-rows: auto repeat(var(--tw-slots, 1), minmax(var(--tw-slot), auto));
	column-gap: 1.25rem;
	row-gap: 0;
}

.tw-programma .tw-locatie-kop {
	grid-row: 1;
	margin: 0 0 0.75rem;
	padding: 0.5rem 0.75rem;
	border-left: 4px solid var(--tw-accent);
	background: var(--tw-accent-licht);
	color: var(--tw-tekst);
	font-size: 1.1rem;
	line-height: 1.3;
}

.tw-optreden {
	position: relative;
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin: 0 0 0.5rem;
	padding: 0.75rem;
	border: 1px solid var(--tw-rand);
	border-top: 3px solid var(--tw-accent);
	border-radius: var(--tw-radius);
	background: var(--tw-vlak);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	overflow-wrap: anywhere;
}

.tw-optreden .tw-foto {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.tw-optreden-tekst {
	flex: 1 1 auto;
	min-width: 0;
}

.tw-programma .tw-tijd,
.tw-programma .tw-extra,
.tw-programma .tw-bio,
.tw-programma .tw-meta {
	margin: 0 0 0.25rem;
	font-size: 0.9rem;
	line-height: 1.4;
}

.tw-programma .tw-tijd {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.tw-programma .tw-naam {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
	line-height: 1.3;
}

.tw-programma .tw-naam a {
	color: var(--tw-tekst);
	text-decoration: none;
}

.tw-programma .tw-naam a:hover {
	text-decoration: underline;
}

/* Klik op het hele vak opent het profiel (bij één artiest). */
.tw-optreden-klikbaar .tw-naam a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tw-programma .tw-land,
.tw-programma .tw-extra,
.tw-programma .tw-bio {
	color: var(--tw-tekst-zacht);
	font-weight: 400;
}

.tw-programma .tw-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-top: 0.5rem;
}

.tw-toegang {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
}

.tw-toegang-gratis {
	border: 1px solid var(--tw-accent);
	background: var(--tw-accent-licht);
	color: var(--tw-tekst);
}

.tw-toegang-ticket {
	background: var(--tw-tekst);
	color: #fff;
}

.tw-programma .tw-webshop {
	position: relative;
	z-index: 1;
	color: var(--tw-tekst);
	font-weight: 600;
	text-decoration: underline;
}

.tw-programma a:focus-visible {
	outline: 2px solid var(--tw-tekst);
	outline-offset: 2px;
}

.tw-optreden:focus-within {
	box-shadow: 0 0 0 2px var(--tw-tekst);
}

.tw-programma .tw-programmanaam {
	margin: 0 0 0.25rem;
	font-size: 0.9rem;
	font-style: italic;
	line-height: 1.4;
}

.tw-programma .tw-label {
	font-style: normal;
	font-weight: 600;
}

.tw-programma .tw-dansvloer {
	color: var(--tw-tekst-zacht);
	font-size: 0.85rem;
}

/* Uitleg gratis/ticket en dansvloer boven het programma (R23). */
.tw-programma .tw-uitleg {
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--tw-rand);
	border-radius: var(--tw-radius);
	list-style: none;
	font-size: 0.95rem;
}

.tw-programma .tw-uitleg li {
	margin: 0.25rem 0;
}

.tw-programma-volgt {
	font-size: 1.25rem;
	text-align: center;
}

/* Eén locatie op een dag: geen tijdschaal nodig, de optredens staan compact onder elkaar. */
.tw-rooster-enkel {
	display: block;
}

/* Telefoon en smal scherm: locaties onder elkaar (R07, T03). */
@media (max-width: 700px) {

	.tw-rooster {
		display: block;
	}

	.tw-programma .tw-locatie-kop {
		margin-top: 1.25rem;
	}

	.tw-optreden {
		margin-bottom: 0.75rem;
	}

	.tw-optreden .tw-foto {
		width: 48px;
		height: 48px;
	}
}

/* Uitklapbare bio: een klik klapt uit, een tweede klik of een andere bio klapt in. */

.tw-bio-uitklap {
	position: relative;
	z-index: 1;
	margin: 0.25rem 0 0.5rem;
	font-size: 0.9rem;
	line-height: 1.5;
}

.tw-bio-uitklap summary {
	display: block;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	list-style: none;
	color: var(--tw-tekst-zacht);
}

.tw-bio-uitklap summary::-webkit-details-marker {
	display: none;
}

.tw-bio-kort {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.tw-bio-uitklap[open] .tw-bio-kort {
	display: none;
}

.tw-bio-knop {
	display: inline-block;
	margin-top: 0.15rem;
	color: var(--tw-tekst);
	font-weight: 600;
	text-decoration: underline;
}

.tw-bio-knop::after {
	content: " ▾";
	text-decoration: none;
}

.tw-bio-uitklap[open] .tw-bio-knop::after {
	content: " ▴";
}

.tw-bio-minder,
.tw-bio-uitklap[open] .tw-bio-meer {
	display: none;
}

.tw-bio-uitklap[open] .tw-bio-minder {
	display: inline;
}

.tw-bio-uitklap summary:focus-visible {
	outline: 2px solid var(--tw-tekst);
	outline-offset: 2px;
}

.tw-bio-vol {
	color: var(--tw-tekst);
}

.tw-programma .tw-bio-dicht {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tw-tekst);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.tw-programma .tw-bio-dicht::after {
	content: " ▴";
}

.tw-programma .tw-bio-dicht[hidden] {
	display: none;
}

.tw-bio-vol p,
.tw-bio-vol ul,
.tw-bio-vol ol {
	margin: 0 0 0.6rem;
}

/* Weergave "kaarten" (variant B): dagkiezer en fotokaarten. */

.tw-dagkiezer {
	position: sticky;
	top: var(--tw-dagkiezer-top, 0);
	z-index: 5;
	margin: 0 0 1.5rem;
	padding: 0.5rem 0;
	background: var(--tw-vlak);
}

.tw-programma .tw-dagkiezer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tw-programma .tw-dagkiezer a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 6.5rem;
	padding: 0.4rem 1rem;
	border: 2px solid var(--tw-accent);
	border-radius: 999px;
	color: var(--tw-tekst);
	line-height: 1.2;
	text-decoration: none;
}

.tw-programma .tw-dagkiezer a:hover {
	background: var(--tw-accent-licht);
}

.tw-dagkiezer-dag {
	font-size: 0.8rem;
	text-transform: lowercase;
}

.tw-dagkiezer-datum {
	font-size: 1.05rem;
	font-weight: 700;
}

/* Zonder script: ruimte boven de dagkop voor een vaste menubalk en de dagkiezer. */
.tw-weergave-kaarten .tw-dag-kop {
	scroll-margin-top: calc(var(--tw-dagkiezer-top, 0px) + 10rem);
}

.tw-programma .tw-dagkiezer a[aria-current="true"] {
	background: var(--tw-accent);
	color: #000;
}

.tw-programma .tw-kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tw-kaarten > li {
	display: flex;
	margin: 0;
}

.tw-kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--tw-rand);
	border-radius: var(--tw-radius);
	background: var(--tw-vlak);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tw-kaart-beeld {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--tw-accent-licht);
}

/* Elke foto in dezelfde verhouding, ook staande foto's. */
.tw-kaart-beeld .tw-kaart-foto {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.tw-kaart-geen-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--tw-tekst-zacht);
	font-size: 3rem;
	font-weight: 700;
}

.tw-kaart-beeld .tw-toegang {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.tw-kaart-beeld .tw-toegang-gratis {
	background: #fff;
}

.tw-kaart-tekst {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1rem;
}

.tw-programma .tw-kaart .tw-naam {
	font-size: 1.2rem;
}

.tw-programma .tw-plaats::before {
	content: "·";
	margin: 0 0.35rem;
}

.tw-programma .tw-plaats {
	font-weight: 400;
}

.tw-programma .tw-kaart-actie {
	margin: auto 0 0;
	padding-top: 0.75rem;
}

.tw-programma .tw-knop {
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 2px solid var(--tw-tekst);
	border-radius: var(--tw-radius);
	background: var(--tw-tekst);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.tw-programma .tw-knop:hover {
	background: #fff;
	color: var(--tw-tekst);
}

.tw-programma .tw-kaart .tw-dansvloer {
	margin: auto 0 0;
	padding-top: 0.75rem;
}

.tw-als-rooster {
	margin-top: 1rem;
}

.tw-als-rooster summary {
	cursor: pointer;
	font-weight: 600;
}

.tw-als-rooster[open] summary {
	margin-bottom: 1rem;
}

/* Weergave "tabbladen" (variant C): één dag tegelijk. */

.tw-programma .tw-tabbladen {
	position: sticky;
	top: var(--tw-dagkiezer-top, 0);
	z-index: 5;
	background: var(--tw-vlak);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 1.5rem;
	border-bottom: 3px solid var(--tw-accent);
}

.tw-programma .tw-tabbladen[hidden] {
	display: none;
}

.tw-programma .tw-tabblad {
	margin: 0;
	padding: 0.6rem 1.25rem;
	border: 1px solid var(--tw-rand);
	border-bottom: 0;
	border-radius: var(--tw-radius) var(--tw-radius) 0 0;
	background: var(--tw-vlak);
	color: var(--tw-tekst);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.tw-programma .tw-tabblad[aria-selected="true"] {
	border-color: var(--tw-accent);
	background: var(--tw-accent);
	color: #000;
}

.tw-programma .tw-tabblad:focus-visible {
	outline: 2px solid var(--tw-tekst);
	outline-offset: 2px;
}

.tw-tabbladen-actief .tw-dag + .tw-dag {
	margin-top: 0;
}

/* De dagkop staat al op het tabblad; voor screenreaders blijft hij staan. */
.tw-tabbladen-actief .tw-dag-kop {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Artiestprofiel: wanneer en waar (§3.4 punt 7 van de vergelijking). */

.tw-op-programma {
	margin: 0 0 1.5rem;
	padding: 1rem;
	border-left: 4px solid var(--tw-accent);
	background: var(--tw-accent-licht);
}

.tw-profiel .tw-op-programma-kop,
.tw-op-programma .tw-op-programma-kop {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.tw-op-programma ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tw-op-programma li + li {
	margin-top: 0.75rem;
}

.tw-op-programma .tw-wanneer {
	margin: 0 0 0.25rem;
	font-weight: 600;
}

/* Artiestprofiel */

.tw-profiel {
	margin-top: 2rem;
}

.tw-profiel-gegevens {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.25rem 1rem;
	margin: 0 0 1.5rem;
}

.tw-profiel-gegevens dt {
	font-weight: 700;
}

.tw-profiel-gegevens dd {
	margin: 0;
}

.tw-profiel .tw-profiel-kop {
	margin: 2rem 0 0.75rem;
	padding-bottom: 0.3rem;
	border-bottom: 3px solid var(--tw-accent);
	color: var(--tw-tekst);
}

.tw-embed {
	margin: 0 0 1rem;
}

.tw-embed-video iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.tw-embed-audio iframe {
	width: 100%;
}

.tw-links {
	padding-left: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {

	.tw-programma *,
	.tw-profiel * {
		transition: none !important;
	}
}

/* Archief (R13): overzicht van de jaren en de artiesten per jaar */

.tw-programma.tw-programma.tw-programma .tw-archief-kop:not(#tw) {
	font-size: 1.5rem;
}

.tw-archief-jaren {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tw-archief-jaar {
	margin: 0 0 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--tw-rand);
}

.tw-archief .tw-archief-kop {
	margin: 0 0 0.4rem;
	padding-bottom: 0.3rem;
	border-bottom: 3px solid var(--tw-accent);
}

.tw-archief .tw-archief-kop a {
	color: var(--tw-tekst);
	text-decoration: none;
}

.tw-archief-namen,
.tw-archief-meer,
.tw-archief-terug {
	margin: 0 0 0.4rem;
	line-height: 1.5;
}

.tw-lineup-artiest {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	margin: 0 0 2rem;
}

.tw-lineup-foto {
	flex: 0 0 auto;
	width: 160px;
	height: 160px;
	border-radius: var(--tw-radius);
	object-fit: cover;
}

.tw-lineup-tekst {
	flex: 1 1 auto;
	min-width: 0;
}

.tw-lineup .tw-land {
	font-weight: 400;
	color: var(--tw-tekst-zacht);
}

.tw-lineup-bio p {
	margin: 0 0 0.75rem;
	line-height: 1.6;
}

@media (max-width: 700px) {
	.tw-lineup-artiest {
		flex-direction: column;
	}

	.tw-lineup-foto {
		width: 100%;
		height: auto;
		max-height: 320px;
	}
}

/* Profiel: de jaren bij de Tangoweek (R14) */

.tw-profiel-jaren p {
	margin: 1rem 0;
}