/* =========================================================
   Eventpagina in Zelda-stijl (template page-zelda)
   Diep bosgroen, goud, ivoor en een klassieke kapitaalletter.
   ========================================================= */

body.mm-zelda {
	--ze-bg: #0c1a12;
	--ze-bg-2: #12261a;
	--ze-ink: #efe6cf;
	--ze-muted: #b5ad97;
	--ze-gold: #c9a45c;
	--ze-gold-2: #e9cf85;
	--ze-line: rgba(201, 164, 92, .35);
	--ze-display: Cinzel, "Trajan Pro", Georgia, serif;
	--ze-serif: var(--wp--preset--font-family--serif);
	background: var(--ze-bg);
	background-image:
		radial-gradient(60% 40% at 50% 0%, rgba(201, 164, 92, .10), transparent 70%),
		radial-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px);
	background-size: auto, 4px 4px;
	color: var(--ze-ink);
	font-family: var(--ze-serif);
}

body.mm-zelda .mm-progress { display: none; }
body.mm-zelda .mm-masthead,
body.mm-zelda .mm-nav { background: var(--wp--preset--color--paper) !important; }
body.mm-zelda .mm-nav { border-bottom-color: var(--ze-gold) !important; }
body.mm-zelda .mm-nav,
body.mm-zelda .mm-masthead,
body.mm-zelda .mm-nav .wp-block-navigation,
body.mm-zelda .mm-nav a,
body.mm-zelda .mm-masthead a,
body.mm-zelda .mm-masthead .mm-tagline { color: var(--mm-ink); }
body.mm-zelda .mm-masthead .mm-tagline { color: var(--mm-steel); }
body.mm-zelda .mm-nav a:hover,
body.mm-zelda .mm-wordmark:hover { color: var(--mm-blaze); }
body.mm-zelda .ze-main { padding: 0; }
body.mm-zelda .wp-block-post-content { font-family: var(--ze-serif); font-size: 1.125rem; line-height: 1.6; color: var(--ze-ink); }

body.mm-zelda .wp-block-post-content h2,
body.mm-zelda .wp-block-post-content h3 {
	text-transform: none;
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

.ze * { box-sizing: border-box; }
.ze h1, .ze h2, .ze h3 { font-family: var(--ze-display); color: var(--ze-ink); margin: 0; letter-spacing: .02em; }
:where(.ze) p { margin: 0; }
.ze a { color: var(--ze-gold-2); text-decoration: none; }
.ze a:hover { text-decoration: underline; }

.ze-wrap { max-width: 61.25rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.ze-wrap--narrow { max-width: 46rem; }
.ze-section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.ze-section--tight { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.ze-section--alt { background: var(--ze-bg-2); border-top: 1px solid var(--ze-line); border-bottom: 1px solid var(--ze-line); }

/* Ornament: lijn, ruit, lijn. */
.ze-eyebrow {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ze-gold);
	margin-bottom: 1.1rem;
}

.ze-eyebrow::before,
.ze-eyebrow::after { content: ""; height: 1px; background: var(--ze-line); flex: 0 0 2.5rem; }
.ze-eyebrow--center { justify-content: center; }

.ze h2 { font-size: clamp(1.75rem, 4.2vw, 2.9rem); font-weight: 600; line-height: 1.12; max-width: 24ch; }
.ze-intro { font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.5; color: var(--ze-muted); max-width: 52ch; margin-top: 1.1rem; }

/* --- Hero ---------------------------------------------------------- */

.ze-hero { text-align: center; padding: clamp(4rem, 9vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden; }

.ze-hero .ze-eyebrow { justify-content: center; margin-bottom: 1.6rem; }

.ze-hero h1 {
	font-size: clamp(2.6rem, 8vw, 5.5rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: .03em;
	background: linear-gradient(180deg, #f3dd9a 0%, #d8b565 55%, #a88235 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
	padding: 0 .1em .1em;
}

.ze-hero__sub { font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.35; max-width: 36ch; margin: 1.1rem auto 0; color: var(--ze-ink); }
.ze-hero__meta { font-family: var(--wp--preset--font-family--sans); font-size: .9rem; color: var(--ze-muted); margin-top: .9rem; letter-spacing: .04em; }

.ze-ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .9rem;
	color: var(--ze-gold);
	margin: clamp(2rem, 5vw, 3rem) auto 0;
	max-width: 30rem;
}

.ze-ornament::before,
.ze-ornament::after { content: ""; height: 1px; flex: 1 1 auto; background: linear-gradient(90deg, transparent, var(--ze-gold)); }
.ze-ornament::after { background: linear-gradient(90deg, var(--ze-gold), transparent); }
.ze-ornament span { width: .55rem; height: .55rem; background: var(--ze-gold); transform: rotate(45deg); }

/* --- Klok ---------------------------------------------------------- */

body.mm-zelda .mm-countdown { margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; }
body.mm-zelda .mm-countdown__grid { display: flex; justify-content: center; gap: clamp(.5rem, 3vw, 2rem); }
body.mm-zelda .mm-countdown__unit { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; position: relative; }

body.mm-zelda .mm-countdown__unit + .mm-countdown__unit::before {
	content: "";
	position: absolute;
	left: calc(-1 * clamp(.5rem, 3vw, 2rem) / 2 - .2rem);
	top: 38%;
	width: .4rem;
	height: .4rem;
	background: var(--ze-gold);
	transform: rotate(45deg);
	opacity: .7;
}

body.mm-zelda .mm-countdown__num {
	font-family: var(--ze-display);
	font-size: clamp(2.75rem, 10vw, 7rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
	min-width: 2ch;
	text-align: center;
	color: var(--ze-gold-2);
}

body.mm-zelda .mm-countdown__label {
	margin-top: .6rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ze-muted);
}

body.mm-zelda .mm-countdown__state { margin-top: 1.25rem; font-family: var(--ze-display); font-size: clamp(1.4rem, 3.5vw, 2.2rem); font-weight: 600; color: var(--ze-gold-2); }
body.mm-zelda .mm-countdown.is-live .mm-countdown__grid,
body.mm-zelda .mm-countdown.is-over .mm-countdown__grid { display: none; }

/* --- Knoppen --------------------------------------------------------- */

.ze-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.75rem; margin-top: clamp(2rem, 4vw, 2.75rem); }

.ze-btn {
	display: inline-block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #0c1a12 !important;
	background: linear-gradient(180deg, var(--ze-gold-2), var(--ze-gold));
	padding: .9rem 1.7rem;
	border: 1px solid var(--ze-gold-2);
	text-decoration: none !important;
	box-shadow: 0 0 0 4px rgba(201, 164, 92, .15);
}

.ze-btn:hover { filter: brightness(1.06); }
.ze-link { font-family: var(--wp--preset--font-family--sans); font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ze-link::after { content: " \203A"; }

/* --- Kaarten --------------------------------------------------------- */

.ze-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.ze-card {
	position: relative;
	background: rgba(12, 26, 18, .6);
	border: 1px solid var(--ze-line);
	padding: clamp(1.4rem, 3vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.ze-card::before {
	content: "";
	position: absolute;
	inset: .35rem;
	border: 1px solid rgba(201, 164, 92, .18);
	pointer-events: none;
}

.ze-card--wide { grid-column: span 2; }
.ze-card__tag { font-family: var(--wp--preset--font-family--sans); font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ze-gold); }
.ze-card__tag--soft { color: var(--ze-muted); }
.ze-card h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.2; }
.ze-card p { color: var(--ze-muted); font-size: 1rem; line-height: 1.55; }
.ze-card__spec { margin-top: auto; padding-top: .75rem; font-family: var(--wp--preset--font-family--sans); font-size: .8125rem; color: var(--ze-muted); border-top: 1px solid var(--ze-line); }

/* --- Tijdlijn (veertig jaar) ------------------------------------------ */

.ze-years { list-style: none; padding: 0; margin: clamp(1.75rem, 4vw, 2.75rem) 0 0; position: relative; }
.ze-years::before { content: ""; position: absolute; left: 4.9rem; top: .4rem; bottom: .4rem; width: 1px; background: var(--ze-line); }
.ze-years li { display: grid; grid-template-columns: 4rem 1fr; gap: 2rem; padding: .7rem 0; position: relative; align-items: baseline; }
.ze-years li::before { content: ""; position: absolute; left: 4.65rem; top: 1.15rem; width: .5rem; height: .5rem; background: var(--ze-gold); transform: rotate(45deg); }
.ze-years .ze-year { font-family: var(--ze-display); font-weight: 600; color: var(--ze-gold-2); font-variant-numeric: tabular-nums; text-align: right; }
.ze-years strong { display: block; font-weight: 600; color: var(--ze-ink); }
.ze-years span { color: var(--ze-muted); font-size: .975rem; }

/* --- Weekagenda -------------------------------------------------------- */

.ze-agenda { list-style: none; padding: 0; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; border-top: 1px solid var(--ze-line); }
.ze-agenda li { display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--ze-line); align-items: baseline; }
.ze-agenda time, .ze-agenda .ze-when { font-family: var(--ze-display); font-weight: 600; color: var(--ze-gold-2); font-variant-numeric: tabular-nums; }
.ze-agenda strong { display: block; font-weight: 600; margin-bottom: .15rem; }
.ze-agenda p { color: var(--ze-muted); font-size: .975rem; }

/* --- FAQ --------------------------------------------------------------- */

.ze-faq { margin-top: clamp(1.25rem, 3vw, 2rem); border-top: 1px solid var(--ze-line); }
.ze-faq details { border-bottom: 1px solid var(--ze-line); }
.ze-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-family: var(--ze-display); font-size: 1.05rem; font-weight: 600; }
.ze-faq summary::-webkit-details-marker { display: none; }
.ze-faq summary::after { content: ""; width: .5rem; height: .5rem; border-right: 1px solid var(--ze-gold); border-bottom: 1px solid var(--ze-gold); transform: rotate(45deg); transition: transform .2s ease; flex: 0 0 auto; }
.ze-faq details[open] summary::after { transform: rotate(-135deg); }
.ze-faq details p { padding: 0 0 1.3rem; color: var(--ze-muted); max-width: 62ch; }

.ze-note { font-family: var(--wp--preset--font-family--sans); font-size: .8125rem; color: var(--ze-muted); line-height: 1.55; border-top: 1px solid var(--ze-line); padding-top: 1.5rem; max-width: 72ch; }
.ze-note p + p { margin-top: .6rem; }

/* --- Responsief -------------------------------------------------------- */

@media (max-width: 899px) { .ze-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 599px) {
	.ze-eyebrow::before, .ze-eyebrow::after { display: none; }
	.ze-grid { grid-template-columns: 1fr; }
	.ze-card--wide { grid-column: auto; }
	.ze-agenda li { grid-template-columns: 1fr; gap: .25rem; }
	.ze-years li { grid-template-columns: 3.2rem 1fr; gap: 1.4rem; }
	.ze-years::before { left: 3.9rem; }
	.ze-years li::before { left: 3.65rem; }
	body.mm-zelda .mm-countdown__unit { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) { .ze-faq summary::after { transition: none; } }