/**
 * Configuratorsectie.
 *
 * De omlijsting rond de configurator, plus het overschrijven van zijn tokens
 * zodat hij het donkere AEQUAR-palet volgt in plaats van zijn eigen lichte
 * standaard. De plugin is daarop gebouwd: alles loopt via custom properties op
 * `.aq`, dus hier is geen enkele regel van de plugin zelf overschreven.
 *
 * @package aequar-core
 */

.aequar-configurator-section {
	--aeq-bg: #07080a;
	--aeq-fg: #f4f5f6;
	--aeq-muted: rgba(244, 245, 246, 0.66);
	--aeq-accent: #ffd400;
	--aeq-gutter: clamp(20px, 5vw, 72px);

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--aeq-bg);
	color: var(--aeq-fg);
	padding: clamp(56px, 9vh, 112px) var(--aeq-gutter);
}

.aequar-configurator-section__stage {
	width: 100%;
	max-width: 1120px;
	margin-inline: auto;
}

.aequar-configurator-section__head {
	margin-bottom: clamp(24px, 4vh, 48px);
}

.aequar-configurator-section__eyebrow {
	margin: 0 0 12px;
	color: var(--aeq-accent);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.aequar-configurator-section__heading {
	margin: 0 0 16px;
	font-size: clamp(1.75rem, 4vw, 3rem);
	line-height: 1.05;
	font-weight: 400;
	text-wrap: balance;
}

.aequar-configurator-section__lede {
	margin: 0;
	max-width: 56ch;
	color: var(--aeq-muted);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.6;
	text-wrap: pretty;
}

/*
 * Tokens van de configurator op het themapalet. Dit is precies de manier die
 * de plugin zelf voorschrijft — geen enkele selector van de plugin wordt
 * overschreven, dus een update van de plugin breekt dit niet.
 */
.aequar-configurator-section .aq {
	--aq-paper: transparent;
	--aq-card: rgba(244, 245, 246, 0.04);
	--aq-stage: #000;
	--aq-ink: var(--aeq-fg);
	--aq-ink-2: var(--aeq-muted);
	--aq-ink-3: rgba(244, 245, 246, 0.44);
	--aq-rule: rgba(244, 245, 246, 0.18);
	--aq-rule-2: rgba(244, 245, 246, 0.32);
	--aq-accent: var(--aeq-accent);

	/* Geen afgeronde hoeken: die staan nergens in dit ontwerp. */
	--aq-radius: 0;

	--aq-font: inherit;
}

/*
 * De configurator brengt een eigen donkere modus mee via prefers-color-scheme.
 * Deze sectie is altijd donker, dus die schakelaar mag hier niet meespelen —
 * anders krijg je licht op licht bij bezoekers met een lichte systeeminstelling.
 */
@media (prefers-color-scheme: light) {
	.aequar-configurator-section .aq {
		--aq-paper: transparent;
		--aq-card: rgba(244, 245, 246, 0.04);
		--aq-ink: var(--aeq-fg);
		--aq-ink-2: var(--aeq-muted);
		--aq-ink-3: rgba(244, 245, 246, 0.44);
		--aq-rule: rgba(244, 245, 246, 0.18);
		--aq-rule-2: rgba(244, 245, 246, 0.32);
	}
}