@font-face {
	font-family: "PP Right Grotesk VF";
	src: url("fonts/PPRightGrotesk-Variable.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Festival theme overrides using runtime CSS variabelen from Festival settings. */
:root {
	/* font variation settings for PP Right Grotesk */
	--pprg-wdth: 0;
	--pprg-wght: 0;
	--pprg-ital: 0;
	--pprg-font-varation-settings: "wdth" var(--pprg-wdth), "wght" var(var(--pprg-wght)), "ital" var(var(--pprg-ital));
	/* Festival variabelen (waarden komen uit PHP/ACF settings). */
	--festival-primary: #09015f;
	--festival-secondary: #ff3d00;
	--festival-button-bg: var(--festival-primary);
	--festival-button-text: #000;
	--festival-body-text: #09015f;
	--festival-std-text: var(--festival-body-text);

	/* Afgeleide tinten (gebruikt moderne color-mix). */
	--festival-primary-05: color-mix(in srgb, var(--festival-primary) 5%, transparent);
	--festival-primary-40: color-mix(in srgb, var(--festival-primary) 40%, transparent);
	--festival-secondary-05: color-mix(in srgb, var(--festival-secondary) 5%, transparent);
	--festival-secondary-40: color-mix(in srgb, var(--festival-secondary) 40%, transparent);

	/* Koppel festival variabelen aan bestaande theme variabelen. */
	--color-primary: var(--festival-primary);
	--color-secondary: var(--festival-secondary);
	--color-secundary: var(--festival-secondary);
	--color-background: var(--festival-background, #fff);
	--color-dark: var(--festival-background, #02001d);
	--color-black: var(--festival-background, #000);
	--color-purple-400: var(--festival-primary);
	--color-purple-800: var(--festival-background, #02001d);
	--color-orange-400: var(--festival-secondary);
	--color-button: var(--festival-button-bg);
	--color-button-text: var(--festival-button-text);
	--color-text: var(--festival-body-text);
	--color-purple-400--5: var(--festival-primary-05);
	--color-purple-400--40: var(--festival-primary-40);
	--color-orange-400--5: var(--festival-secondary-05);
	--color-orange-400--40: var(--festival-secondary-40);
	--gradient-light-red: linear-gradient(90deg, var(--color-background) 0%, var(--color-secundary) 46.5%, var(--color-background) 100%);

	/* Interne helpers voor deze stylesheet. */
	--festival-btn-bg: var(--festival-button-bg);
	--festival-btn-text: var(--festival-button-text);
}

/* Component styles. */
body {
	color: var(--festival-body-text, var(--color-text));
	--color-text: var(--festival-body-text, var(--color-text));
	font-variation-settings: "wdth" var(--festival-body-font-wdth, 100), "wght" var(--festival-body-font-wght, 400), "ital" var(--festival-body-font-ital, 0);
}

/* Headings: primary color, except blocks that use secondary. */
h1,
h2,
h3,
h4,
h5,
h6,
.heading-xl,
.heading-l,
.heading-md,
.heading-s,
.heading-alt,
.heading-time {
	color: var(--color-primary) !important;
	font-family: var(--festival-heading-font, var(--font-family-heading, inherit));
	font-style: var(--festival-heading-font-style, normal) !important;
	text-transform: var(--festival-heading-transform, none);
	font-variation-settings: var(--festival-heading-font-variation-settings, "wdth" var(--festival-heading-font-wdth, 100), "wght" var(--festival-heading-font-wght, 800), "ital" var(--festival-heading-font-ital, 0)) !important;
}

.promo--blue-orange :is(h1, h2, h3, h4, h5, h6, .heading-xl, .heading-l, .heading-md, .heading-s, .heading-alt, .heading-time),
.promo-full-width :is(h1, h2, h3, h4, h5, h6, .heading-xl, .heading-l, .heading-md, .heading-s, .heading-alt, .heading-time),
.promo__content :is(h1, h2, h3, h4, h5, h6, .heading-xl, .heading-l, .heading-md, .heading-s, .heading-alt, .heading-time) {
	color: var(--color-secundary) !important;
}

/* Tile background uses secondary. */
.tile-event {
	background: var(--color-secundary);
	border-bottom-color: var(--festival-body-text, #fff);
	color: var(--festival-body-text, #fff);
}

.tile-event :where(*):not(.btn):not(.btn *) {
	color: var(--festival-body-text, #fff) !important;
}

/* Button styles. */
.btn,
.btn * {
	background-color: transparent;
	color: var(--festival-btn-text);
}

.btn {
	background-color: var(--festival-btn-bg) !important;
	color: var(--festival-btn-text) !important;
	border: none !important;
}

.btn:not(:disabled):hover,
.btn:not(:disabled):focus-visible {
	background-color: var(--color-secundary) !important;
	color: var(--festival-std-text) !important;
	/* border: none !important; */
}

.btn:not(:disabled):hover *,
.btn:not(:disabled):focus-visible * {
	color: var(--festival-std-text) !important;
}

.btn--secondary,
.btn--tertiary {
	background-color: var(--color-secundary) !important;
	color: var(--festival-std-text) !important;
}

.btn--secondary *,
.btn--tertiary * {
	color: var(--festival-std-text) !important;
}

.btn--secondary:not(:disabled):hover,
.btn--secondary:not(:disabled):focus-visible,
.btn--tertiary:not(:disabled):hover,
.btn--tertiary:not(:disabled):focus-visible {
	background-color: var(--festival-btn-bg) !important;
	color: var(--festival-btn-text) !important;
}

.btn--secondary:not(:disabled):hover *,
.btn--secondary:not(:disabled):focus-visible *,
.btn--tertiary:not(:disabled):hover *,
.btn--tertiary:not(:disabled):focus-visible * {
	color: var(--festival-btn-text) !important;
}

:is(.lane, .lane--slider-dark, .cta) :is(.btn--secondary, .btn--tertiary) {
	background-color: var(--color-secundary) !important;
	color: var(--color-primary) !important;
}

:is(.lane, .lane--slider-dark, .cta) :is(.btn--secondary, .btn--tertiary) * {
	color: var(--color-primary) !important;
}

:is(.lane, .lane--slider-dark, .cta)
	:is(.btn--secondary, .btn--tertiary):not(:disabled):is(:hover, :focus-visible) {
	background-color: var(--festival-btn-bg) !important;
	color: var(--festival-btn-text) !important;
}

:is(.lane, .lane--slider-dark, .cta)
	:is(.btn--secondary, .btn--tertiary):not(:disabled):is(:hover, :focus-visible) * {
	color: var(--festival-btn-text) !important;
}

a.btn,
a.btn--secondary,
a.btn--tertiary {
	background-color: var(--color-primary) !important;
	color: var(--color-secundary) !important;
	border: 1px solid var(--color-secundary) !important;
	text-decoration: none !important;
}

a.btn *,
a.btn--secondary *,
a.btn--tertiary * {
	color: var(--color-secundary) !important;
}

a.btn:hover,
a.btn:focus-visible,
a.btn--secondary:hover,
a.btn--secondary:focus-visible,
a.btn--tertiary:hover,
a.btn--tertiary:focus-visible {
	background-color: var(--color-secundary) !important;
	color: var(--color-primary) !important;
	border: 1px solid var(--color-primary) !important;
}

a.btn:hover *,
a.btn:focus-visible *,
a.btn--secondary:hover *,
a.btn--secondary:focus-visible *,
a.btn--tertiary:hover *,
a.btn--tertiary:focus-visible * {
	color: var(--color-primary) !important;
}

/* Hero + slider-dark buttons. */
.hero--detail-grid .hero--detail__suffix {
	color: var(--color-primary) !important;
}

.hero .btn,
.lane--slider-dark .btn {
	background-color: var(--color-secundary) !important;
	color: var(--festival-std-text) !important;
	border: none !important;
}

.hero .btn *,
.lane--slider-dark .btn * {
	color: var(--festival-std-text) !important;
}

.hero .btn:not(:disabled):hover,
.hero .btn:not(:disabled):focus-visible,
.lane--slider-dark .btn:not(:disabled):hover,
.lane--slider-dark .btn:not(:disabled):focus-visible {
	background-color: var(--festival-btn-bg) !important;
	color: var(--festival-btn-text) !important;
	border: none !important;
}

.hero .btn:not(:disabled):hover *,
.lane--slider-dark .btn:not(:disabled):hover * {
	color: var(--festival-btn-text) !important;
}

.hero .btn--tickets,
.lane--slider-dark .btn--tickets {
	background-color: var(--festival-btn-bg) !important;
	color: var(--festival-btn-text) !important;
	border: none !important;
}

.hero .btn--tickets *,
.lane--slider-dark .btn--tickets * {
	color: var(--festival-btn-text) !important;
}

/* Generated button styles (previously inline). */
:is(.promo, .promo--blue-orange, .promo-full-width) :is(.btn, .btn--secondary, .btn--tertiary) {
	background-color: var(--festival-btn-bg) !important;
	color: var(--festival-btn-text) !important;
	border: 1px solid var(--color-primary) !important;
}

:is(.promo, .promo--blue-orange, .promo-full-width) :is(.btn, .btn--secondary, .btn--tertiary) * {
	color: var(--festival-btn-text) !important;
}

:is(.promo, .promo--blue-orange, .promo-full-width)
	:is(.btn, .btn--secondary, .btn--tertiary):not(:disabled):is(:hover, :focus-visible) {
	background-color: var(--color-secundary) !important;
	color: var(--festival-std-text) !important;
	border: 1px solid var(--color-primary) !important;
}

:is(.promo, .promo--blue-orange, .promo-full-width)
	:is(.btn, .btn--secondary, .btn--tertiary):not(:disabled):is(:hover, :focus-visible) * {
	color: var(--festival-std-text) !important;
}

:is(.tiles, .strip-tiles, .strip-cta, .cta-s, .lane--slider, .lane--events, .featured-events)
	:is(.btn, .btn--secondary, .btn--tertiary) {
	background-color: var(--festival-btn-bg) !important;
	color: var(--festival-btn-text) !important;
	border: none !important;
}

:is(.tiles, .strip-tiles, .strip-cta, .cta-s, .lane--slider, .lane--events, .featured-events)
	:is(.btn, .btn--secondary, .btn--tertiary) * {
	color: var(--festival-btn-text) !important;
}

:is(.tiles, .strip-tiles, .strip-cta, .cta-s, .lane--slider, .lane--events, .featured-events)
	:is(.btn, .btn--secondary, .btn--tertiary):not(:disabled):is(:hover, :focus-visible) {
	background-color: var(--color-secundary) !important;
	color: var(--festival-std-text) !important;
	border: none !important;
}

:is(.tiles, .strip-tiles, .strip-cta, .cta-s, .lane--slider, .lane--events, .featured-events)
	:is(.btn, .btn--secondary, .btn--tertiary):not(:disabled):is(:hover, :focus-visible) * {
	color: var(--festival-std-text) !important;
}

/* Background color variables for blocks. */
:is(.hero, .lane--slider-dark, .promo--blue-orange) {
	--color-secondary: var(--color-secundary);
	--color-orange-400: var(--color-secundary);
}

.promo--blue-orange {
	background-color: var(--color-primary) !important;
}

.agenda__header {
	background: none !important;
	background-color: var(--color-secundary) !important;
}

.tab-nav.tab-nav--react-filter {
    visibility: hidden;
}

.promo--blue-orange .promo__content,
.promo--blue-orange .promo__content * {
	color: var(--color-secundary);
}

.promo,
.promo--green-blue {
	background-color: var(--color-primary) !important;
	color: var(--color-secundary) !important;
}

.promo *,
.promo--green-blue * {
	color: var(--color-secundary) !important;
}

.promo .promo__title,
.promo--blue-orange .promo__title,
.promo--green-blue .promo__title {
	color: var(--color-secundary) !important;
}

/* All links with .btn: same look everywhere (primary bg, secondary border/text). */
:is(.promo, .promo--blue-orange, .promo-full-width, .tiles, .strip-tiles, .strip-cta, .cta-s, .lane--slider, .lane--events, .featured-events, .hero, .lane--slider-dark, .cta, .lane)
	a:is(.btn, .btn--secondary, .btn--tertiary) {
	background-color: var(--color-primary) !important;
	color: var(--color-secundary) !important;
	border: 1px solid var(--color-secundary) !important;
	text-decoration: none !important;
}

:is(.promo, .promo--blue-orange, .promo-full-width, .tiles, .strip-tiles, .strip-cta, .cta-s, .lane--slider, .lane--events, .featured-events, .hero, .lane--slider-dark, .cta, .lane)
	a:is(.btn, .btn--secondary, .btn--tertiary) * {
	color: var(--color-secundary) !important;
}

:is(.promo, .promo--blue-orange, .promo-full-width)
	a:is(.btn, .btn--secondary, .btn--tertiary):is(:hover, :focus-visible) {
	background-color: var(--color-secundary) !important;
	color: var(--color-primary) !important;
	border: 1px solid var(--color-secundary) !important;
}

:is(.promo, .promo--blue-orange, .promo-full-width)
	a:is(.btn, .btn--secondary, .btn--tertiary):is(:hover, :focus-visible) * {
	color: var(--color-primary) !important;

}

.music-card__image {
    height: 21em;
}

/* Footer: MgE blue (same as partners section), remove partners ::before decoration. */
.footer {
	background-color: var(--color-purple-700) !important;
	/* margin-block-start: var(--size-32); */
}

@media (min-width: 75em) {
    .footer__socials>:first-child {
        grid-row: 3;
        grid-column: 1 / span 3;
        justify-self: flex-start;
        margin-block-start: 0;
    }
}

.footer__partners {
	margin: var(--size-32);
}

.footer__partners::before {
	content: none;
	display: none;
}

.featured-events {
	border-top-color: var(--festival-body-text);
}

.hero--detail .event-info-list a {
	color: var(--festival-body-text) !important;
}

.nav-actions {
	display: none;
}

footer .icon-link {
	align-items: flex-end;
}

.logo {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: .25rem;

	@media (width > 75em) {
		flex-direction: row;
		gap: 1.5rem;
  		align-items: center;
		margin-inline-end: 5.5rem;
	}
}

.nav .logo::after {
	content: '';
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: calc(100% + 1.5rem);
	translate: 0 -50%;
	block-size: 3px;
	inline-size: 2.5rem;
	background-color: #fff;

	@media (width < 75em) {
		content: none;
	}
}

.logo__arrow {
	inline-size: 1.25rem;

	@media (width < 75em) {
		display: none;
	}
}

.logo__text {
	margin: 0;
	font-size: 1.09rem;

	@media (width > 75em) {
		display: none;
	}
}

.festival-logo-link {
	margin-inline-end: auto;
}

.festival-logo {
	max-height: 2.25rem; /* ~36px, matches main logo height */
	width: auto;
	height: auto;
	object-fit: contain;

	@media (width < 75em) {
		display: none;
	}
}

.hero-festival {
	display: grid;
	place-content: end center;
	place-items: center;
	text-align: center;
	block-size: 57rem;
	padding: 3rem;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-image: fill 1 linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 69.88%, var(--color-secondary) 100%);
	gap: 2.5rem;

	@media (width > 56.25em) {
		padding: 5rem;
		block-size: 50rem;
	}
}

.hero-festival > * {
	inline-size: min(63.5rem, 100%);
}

.nav-list-desktop {
	justify-content: end;
	align-items: center;
}

.nav-lang {
	margin-inline-start: var(--size-40);

	@media (width < 75em) {
		display: none;
	}
}

/* TMSQR Timetable block */
.lane--tmsqr_schedule {
	justify-items: center;
}

.lane--tmsqr_schedule .tmsqr-timetable-iframe {
	width: 100%;
	min-height: 600px;
	height: 600px;
	border: none;
	display: block;
	border-radius: 4px;
}

@media (min-width: 48em) {
	.lane--tmsqr_schedule .tmsqr-timetable-iframe {
		min-height: 700px;
		height: 700px;
	}
}

.lane--tmsqr_schedule .tmsqr-timetable-container,
.lane--tmsqr_schedule .tmsqr-configure-wrap {
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lane--tmsqr_schedule .tmsqr-loading,
.lane--tmsqr_schedule .tmsqr-error,
.lane--tmsqr_schedule .tmsqr-configure {
	margin: 0;
	opacity: 0.8;
}

.lane--tmsqr_schedule .tmsqr-error {
	color: var(--color-secondary, #ff3d00);
}

.lane--tmsqr_schedule #tmsqr-timetable-table {
	width: 100%;
	min-height: 400px;
}

.newsletter-sign-up {
	display: none;
}