/*
 * ENSO publieke pagina's: opbouw in banden (dag en nacht), tijdlijn, dresscode en het formulier.
 *
 * Kleur en letter komen uit de design tokens van het theme (--enso-*); de waarden na de komma zijn
 * alleen een vangnet als een ander theme actief is. Elke band zet zijn eigen lokale tokens (--_*),
 * zodat dezelfde onderdelen op wit en op zwart vanzelf goed staan.
 */

.enso-main,
main.enso-page {
	--_serif: var(--enso-font-display, Georgia, "Times New Roman", serif);
	--_text: var(--enso-font-text, Georgia, "Times New Roman", serif);
	--_size: var(--enso-text-size, 1.0625rem);
	--_ease: var(--enso-ease, cubic-bezier(0.16, 1, 0.3, 1));
	display: block;
	font-family: var(--_text);
	font-size: var(--_size);
	line-height: 1.5;
}

.enso-band--day,
main.enso-page {
	--_bg: var(--enso-paper, #faf6f1);
	--_ink: var(--enso-ink, #36332f);
	--_muted: var(--enso-muted, #6f6a64);
	--_line: var(--enso-line, #e4dfd8);
	--_field: #fff;
	--_field-line: #bdb6ad;
	--_error: #8a2f23;
}

.enso-band--night {
	--_bg: var(--enso-night, #2c2a28);
	--_ink: var(--enso-night-text, #faf6f1);
	--_muted: var(--enso-night-muted, #a39d95);
	--_line: #45413c;
	--_field: #33302c;
	--_field-line: #6a655f;
	--_error: #f0b2a6;
}

.enso-band--day,
.enso-band--night {
	background: var(--_bg);
	color: var(--_ink);
}

.enso-page {
	max-width: 600px;
	margin: 0 auto;
	padding: 0 24px;
}

/* --- typografische bouwstenen -------------------------------------------------------------------- */

/* Gespatieerde kapitalen zoals de datum op de kaart: Light, 0,33em. */
.enso-kicker {
	margin: 0 0 8px;
	font-family: var(--_serif);
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: var(--enso-tracking-caps, 0.33em);
	line-height: 1.8;
	text-transform: uppercase;
	color: var(--_muted);
}

.enso-display {
	margin: 0 0 24px;
	font-family: var(--_serif);
	font-weight: 300;
	font-size: clamp(2.1rem, 8.5vw, 2.9rem);
	line-height: 1.08;
}

/* Zoals "love" op de kaart: dezelfde dikte, alleen cursief. */
.enso-display em {
	font-weight: 300;
}

.enso-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 28px;
	border: 1px solid var(--_ink);
	border-radius: 0;
	background: var(--_ink);
	color: var(--_bg);
	font-family: var(--_serif);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.4s var(--_ease), color 0.4s var(--_ease), letter-spacing 0.6s var(--_ease);
}

.enso-button:hover {
	letter-spacing: 0.3em;
}

.enso-button--secondary {
	background: transparent;
	color: var(--_ink);
}

.enso-main :focus-visible {
	outline: 2px solid var(--_ink);
	outline-offset: 3px;
}

/* --- intro (dag) --------------------------------------------------------------------------------- */

.enso-intro {
	padding: 96px 0 56px;
	text-align: center;
}

/* De persoonlijke aanhef, in dezelfde letter als de namen op de envelop. */
.enso-intro__hello {
	margin: 0 0 18px;
	font-family: var(--_serif);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(1.7rem, 7vw, 2.1rem);
	line-height: 1.15;
}

/* De zin van de achterkant van de kaart, in de letter van de kaart. */
.enso-intro__lead {
	max-width: 26em;
	margin: 0 auto 18px;
	font-family: var(--_serif);
	font-weight: 300;
	font-size: 1.3rem;
	line-height: 1.4;
}

.enso-intro__text {
	margin: 0 0 28px;
}

/* "De officiële uitnodiging volgt": op de kaart in ExtraLight Italic. */
.enso-intro__note {
	margin: 0;
	font-family: var(--_serif);
	font-weight: 200;
	font-style: italic;
	font-size: 1.3rem;
	color: var(--_muted);
}

/* --- tijdlijn ------------------------------------------------------------------------------------
 *
 * Eén verticale lijn door alle onderdelen. Elk onderdeel is een band: overdag wit, vanaf 20.00 uur
 * zwart. Waar de dag in de nacht overgaat, is dat een strakke horizon. De tekst heeft de kleur van
 * de band als achtergrond, zodat de lijn er netjes achterlangs loopt.
 */
.enso-timeline__head {
	padding: 8px 24px 0;
	text-align: center;
}

.enso-timeline__head .enso-kicker {
	display: inline-block;
	margin: 0;
	padding: 6px 14px;
	background: var(--_bg);
	position: relative;
	z-index: 1;
}

.enso-timeline__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.enso-tl {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 36px 24px 72px;
	text-align: center;
}

.enso-tl:last-child {
	padding-bottom: 96px;
}

.enso-tl::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--_ink);
	opacity: 0.6;
	transform-origin: top;
}

.enso-tl > * {
	position: relative;
	margin: 0;
	padding: 2px 16px;
	background: var(--_bg);
}

.enso-tl__dot {
	width: 11px;
	height: 11px;
	margin-bottom: 16px;
	padding: 0;
	border: 1px solid var(--_ink);
	border-radius: 50%;
}

.enso-tl__time {
	font-family: var(--_serif);
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: var(--enso-tracking-caps, 0.33em);
	text-transform: uppercase;
	color: var(--_muted);
}

.enso-tl__name {
	font-family: var(--_serif);
	font-weight: 300;
	font-size: clamp(1.9rem, 8vw, 2.4rem);
	line-height: 1.15;
}

.enso-tl__place {
	color: var(--_muted);
}

.enso-tl__for {
	font-style: italic;
}

/* --- nacht: dresscode, RSVP, vragen ------------------------------------------------------------- */

.enso-after {
	padding: 0 0 48px;
}

.enso-dress {
	padding: 96px 24px 80px;
	text-align: center;
}

/* Zoals op de achterkant van de kaart: "Dress code" in ExtraLight Italic, ALL BLACK in Bold. */
.enso-dress__label {
	margin: 0 0 14px;
	font-family: var(--_serif);
	font-weight: 200;
	font-style: italic;
	font-size: 1.5rem;
	color: var(--_muted);
}

.enso-dress__word {
	margin: 0;
	font-family: var(--_serif);
	font-weight: 700;
	font-size: clamp(3rem, 15vw, 5.75rem);
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.enso-rsvp {
	padding: 40px 0 24px;
	scroll-margin-top: 24px;
}

.enso-questions {
	padding: 40px 0 0;
	border-top: 1px solid var(--_line);
	text-align: center;
}

.enso-questions h2 {
	margin: 0 0 12px;
	font-family: var(--_serif);
	font-weight: 300;
	font-size: 1.8rem;
}

/* --- formulier ----------------------------------------------------------------------------------- */

.enso-form-wrap > summary {
	list-style: none;
	margin: 8px 0 24px;
}

.enso-form-wrap > summary::-webkit-details-marker {
	display: none;
}

.enso-form-wrap[open] > summary {
	display: none;
}

.enso-guest {
	margin: 0;
	padding: 22px 0 26px;
	border: 0;
	border-top: 1px solid var(--_line);
	min-width: 0;
}

.enso-guest legend {
	float: left;
	width: 100%;
	margin: 0 0 14px;
	padding: 0;
	font-family: var(--_serif);
	font-weight: 300;
	font-size: 1.6rem;
	line-height: 1.2;
}

.enso-guest legend + * {
	clear: both;
}

.enso-choice {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	clear: both;
}

.enso-choice__option,
.enso-check {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 16px;
	border: 1px solid var(--_field-line);
	cursor: pointer;
	transition: background-color 0.35s var(--_ease), color 0.35s var(--_ease), border-color 0.35s var(--_ease);
	-webkit-tap-highlight-color: transparent;
}

.enso-choice__option input,
.enso-check input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.enso-choice__option:has(input:checked) {
	border-color: var(--_ink);
	background: var(--_ink);
	color: var(--_bg);
}

.enso-choice__option:has(input:focus-visible),
.enso-check:has(input:focus-visible) {
	outline: 2px solid var(--_ink);
	outline-offset: 3px;
}

.enso-check {
	gap: 0;
	min-height: 46px;
	margin: 0 8px 8px 0;
	color: var(--_muted);
}

/* Een klein vinkje, getekend, geen icoonfont. */
.enso-check::before {
	content: "";
	width: 0;
	height: 9px;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	opacity: 0;
	transform: rotate(45deg) translateY(-2px);
	transition: width 0.3s var(--_ease), opacity 0.3s var(--_ease), margin 0.3s var(--_ease);
}

.enso-check:has(input:checked) {
	border-color: var(--_ink);
	color: var(--_ink);
}

.enso-check:has(input:checked)::before {
	width: 5px;
	margin-right: 12px;
	opacity: 1;
}

.enso-when-yes {
	padding-top: 6px;
}

.enso-hint,
.enso-privacy {
	margin: 18px 0 10px;
	color: var(--_muted);
	font-size: max(1rem, 0.85em);
}

.enso-diet {
	margin-top: 8px;
}

.enso-main input[type="text"],
.enso-main input[type="email"],
.enso-main textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 50px;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid var(--_field-line);
	border-radius: 0;
	background: var(--_field);
	color: var(--_ink);
	font: inherit;
}

.enso-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 14px;
}

@media (max-width: 480px) {
	.enso-row {
		grid-template-columns: 1fr;
	}
}

.enso-block {
	display: block;
	margin-top: 14px;
}

.enso-contact {
	padding-top: 22px;
	border-top: 1px solid var(--_line);
}

.enso-form .enso-button[type="submit"] {
	width: 100%;
	min-height: 58px;
	margin-top: 12px;
}

.enso-notice {
	margin: 0 0 24px;
	padding: 14px 16px;
	border: 1px solid var(--_line);
	border-left-width: 3px;
}

.enso-notice--ok {
	border-left-color: var(--_ink);
}

.enso-notice--error,
.enso-field-error {
	border-left-color: var(--_error);
	color: var(--_error);
}

.enso-field-error {
	clear: both;
	margin: 0 0 12px;
}

.enso-summary {
	margin: 0 0 24px;
}

.enso-summary h3 {
	margin: 0 0 8px;
	font-family: var(--_serif);
	font-weight: 300;
	font-size: 1.3rem;
}

.enso-summary ul {
	margin: 0;
	padding-left: 20px;
}

/* New Icon heeft geen vette snit; de namen staan in de kaartletter in plaats van in nep-vet. La Luxes
 * heeft een grotere x-hoogte (0,628 tegen 0,579), dus 0,92em om even groot te lijken. */
.enso-summary strong {
	font-family: var(--_serif);
	font-weight: 400;
	font-size: 0.92em;
}

/* --- eenvoudige pagina's (link openen, geen sessie) en terugval zonder theme-opening ---------- */

main.enso-page {
	padding-bottom: 64px;
	color: var(--_ink);
}

.enso-hero,
.enso-fallback-hero {
	padding: 96px 0 64px;
	text-align: center;
}

.enso-hero__eyebrow {
	font-family: var(--_serif, Georgia, serif);
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: var(--enso-tracking-caps, 0.33em);
	text-transform: uppercase;
	color: var(--_muted);
}

.enso-hero__title {
	font-family: var(--_serif, Georgia, serif);
	font-weight: 300;
	font-size: clamp(2rem, 7vw, 3rem);
	line-height: 1.1;
	margin: 0.25em 0 0.4em;
}

[hidden] {
	display: none !important;
}

/* --- formulier, verfijning ------------------------------------------------------------------------
 *
 * Bij een huishouden staat boven elke naam hoeveelste persoon het is, in de gespatieerde kapitalen
 * van de kaart: in een lang formulier weet je zo waar je bent.
 */
.enso-guest__count {
	display: block;
	margin: 0 0 6px;
	font-family: var(--_serif);
	font-size: 0.8rem;
	font-weight: 300;
	letter-spacing: 0.2em;
	color: var(--_muted);
}

.enso-guest__name {
	display: block;
}

/* Een gekozen vakje is gevuld, niet alleen omlijnd: aan een blik te zien wat aan staat. */
.enso-check:has(input:checked) {
	background: color-mix(in srgb, var(--_ink) 9%, transparent);
}

.enso-events {
	display: flex;
	flex-wrap: wrap;
}

/* Twee stemmen in het formulier. Wat je aantikt of invult staat in de letter van de kaart: die is
 * ruimer en rustiger dan New Icon, en op de korte teksten van een knop leest La Luxes niet te breed.
 * De vragen erboven blijven in New Icon, cursief, als een zachte stem naast de knoppen. */
.enso-form .enso-choice__option,
.enso-form .enso-check,
.enso-form label,
.enso-form input,
.enso-form textarea {
	font-family: var(--_serif);
	font-weight: 400;
	font-size: 1rem;
}

.enso-form .enso-hint,
.enso-form .enso-privacy {
	font-style: italic;
}

/* Dieet: "geen" apart erboven, de wensen in één kolom, elk op één regel. */
.enso-diet__none .enso-check {
	display: flex;
	margin-right: 0;
}

.enso-diet__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
}

.enso-diet__grid .enso-check {
	justify-content: flex-start;
	min-height: 44px;
	margin: 0;
	padding: 8px 14px;
	line-height: 1.2;
}