/*
 * My True Why — de basis voor de test en de voordeur (sinds 0.7.0).
 *
 * Deze pagina's staan naast de kaartreis en gebruiken haar stijlblad (reis.css) niet. Dezelfde familie:
 * nacht, goud, Fraunces en Source Serif 4 (SIL Open Font License 1.1, zie assets/fonts/), zelf gehost.
 * Alles hangt aan body.mtw-pagina; de kaartreis (body.sr-reis) wordt hier niet geraakt.
 */

@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-opsz-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-opsz-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

body.mtw-pagina {
	--mtw-bg: #0E0908; --mtw-inkt: #F8EFDF; --mtw-gedempt: #CDBDA8; --mtw-goud: #D9B25A; --mtw-accent: #E9CC84;
	--mtw-rand: #A08A74; --mtw-lijn: #3A2A24; --mtw-vlak: #1D1513; --mtw-papier: #F5E8CF; --mtw-papierinkt: #2A1814;
	--mtw-goudglans: linear-gradient(135deg, #F8E9B2 0%, #E3BE63 24%, #C39231 50%, #ECCD7C 74%, #BC8A2E 100%);
	--mtw-nadruk: linear-gradient(100deg, #F8E9B2 0%, #E3BE63 45%, #F3DC9E 70%, #D9B25A 100%);
	--mtw-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--mtw-brood: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--mtw-kap: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;

	margin: 0;
	min-height: 100vh;
	background: transparent;
	color: var(--mtw-inkt);
	color-scheme: dark;
	font-family: var(--mtw-brood);
	font-size: 18px;
	line-height: 1.55;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* De achtergrond hangt aan <html>, zodat de vaste lagen achter de pagina (licht, vonken) zichtbaar blijven. */
html:has(body.mtw-pagina) { background: #0E0908; -webkit-text-size-adjust: 100%; }
.mtw-pagina *, .mtw-pagina *::before, .mtw-pagina *::after { box-sizing: border-box; }

/* Bricks en het thema: geen eigen vlakken over het toneel, geen kolombreedte om het onderdeel. */
.mtw-pagina #brx-header, .mtw-pagina #brx-footer { background: transparent; position: relative; z-index: 3; }
.mtw-pagina #brx-content { background: transparent; display: block; }
.mtw-pagina .brxe-section:has(.mtw-test, .mtw-voordeur) { padding: 0; }
.mtw-pagina .brxe-container:has(.mtw-test, .mtw-voordeur) { width: 100%; max-width: none; padding: 0; }
.mtw-pagina .brxe-shortcode:has(.mtw-test, .mtw-voordeur) { width: 100%; }
.mtw-pagina svg { min-width: 0; min-height: 0; }

/* ---------- De kop en de voet van de site (Bricks: sr-sitekop, sr-sitevoet) ---------- */

.mtw-pagina .sr-sitekop { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 76rem; margin: 0 auto; padding: 4px 20px; }
.mtw-pagina .sr-sitekop__merk { white-space: nowrap; font-family: var(--mtw-display); font-size: 1.25rem; font-style: italic; font-weight: 400; letter-spacing: 0.01em; color: var(--mtw-inkt) !important; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.mtw-pagina .sr-sitekop__merk svg { width: 18px; height: 18px; color: var(--mtw-goud); }
.mtw-pagina .sr-sitekop nav { display: flex; gap: 0; margin-right: -8px; }
.mtw-pagina .sr-sitekop nav a { white-space: nowrap; font-family: var(--mtw-kap); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--mtw-gedempt); display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
@media (min-width: 44rem) { .mtw-pagina .sr-sitekop nav a { font-size: 0.75rem; letter-spacing: 0.18em; padding: 0 14px; } }
.mtw-pagina .sr-sitekop nav a:hover { color: var(--mtw-inkt); }
.mtw-pagina .sr-sitevoet { position: relative; z-index: 2; text-align: center; padding: 24px 20px 40px; font-family: var(--mtw-kap); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mtw-gedempt); }

/* ---------- Gedeelde bouwstenen ---------- */

.mtw-test p, .mtw-voordeur p { margin: 0; }
.mtw-test :is(h1, h2, h3), .mtw-voordeur :is(h1, h2, h3) { margin: 0; font-family: var(--mtw-display); font-weight: 340; color: var(--mtw-inkt); text-wrap: balance; text-transform: none; letter-spacing: normal; }
.mtw-test button, .mtw-voordeur button { font: inherit; color: inherit; cursor: pointer; }
.mtw-test input, .mtw-voordeur input { font: inherit; color: inherit; }

.mtw-pagina .mtw-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.mtw-pagina .mtw-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mtw-kap); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mtw-accent); }
.mtw-pagina .mtw-kicker::before { content: ""; flex: none; width: 7px; height: 7px; transform: rotate(45deg); background: var(--mtw-goudglans); }

.mtw-pagina .mtw-kop--xl { font-size: clamp(34px, 6.4vw, 58px); line-height: 1.08; letter-spacing: -0.018em; font-variation-settings: "opsz" 144; }
.mtw-pagina .mtw-kop--l { font-size: clamp(24px, 4.2vw, 34px); line-height: 1.2; font-variation-settings: "opsz" 60; }
.mtw-pagina .mtw-kop em, .mtw-pagina em.mtw-goud { font-style: italic; color: var(--mtw-accent); background: var(--mtw-nadruk); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.mtw-pagina .mtw-stil { color: var(--mtw-gedempt); font-size: 16px; line-height: 1.5; text-wrap: pretty; }

.mtw-pagina .mtw-knop { appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; min-height: 54px; padding: 0 30px; font-family: var(--mtw-kap); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: #1F120B; background: var(--mtw-goudglans); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(90, 55, 10, 0.45), 0 10px 34px rgba(217, 150, 60, 0.28); transition: transform 0.15s ease, filter 0.15s ease; }
.mtw-pagina .mtw-knop::after { content: ""; position: absolute; inset: 4px; border-radius: 999px; border: 1px solid rgba(60, 35, 5, 0.28); pointer-events: none; }
.mtw-pagina .mtw-knop:hover { filter: brightness(1.07); }
.mtw-pagina .mtw-knop:active { transform: translateY(1px); }
.mtw-pagina .mtw-knop[disabled] { filter: grayscale(0.8) brightness(0.55); cursor: not-allowed; }
.mtw-pagina .mtw-knop--rand { background: none; color: var(--mtw-inkt); box-shadow: inset 0 0 0 1.5px var(--mtw-rand); }
.mtw-pagina .mtw-knop--rand::after { display: none; }
.mtw-pagina .mtw-knop--rand:hover { box-shadow: inset 0 0 0 1.5px var(--mtw-accent); filter: none; }
.mtw-pagina .mtw-tekstknop { appearance: none; display: inline-flex; align-items: center; background: none; border: 0; min-height: 44px; padding: 0 8px; font-family: var(--mtw-brood); font-size: 16px; color: var(--mtw-gedempt); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(205, 189, 168, 0.5); }
.mtw-pagina .mtw-tekstknop:hover { color: var(--mtw-inkt); }

.mtw-pagina :is(.mtw-test, .mtw-voordeur) :focus-visible { outline: 2px solid var(--mtw-accent); outline-offset: 3px; }
.mtw-pagina .mtw-knop:focus-visible { outline: 2px solid var(--mtw-inkt); outline-offset: 4px; }

.mtw-pagina .sr-pijl { flex: none; width: 18px; height: 10px; }

@media (prefers-reduced-motion: reduce) {
	.mtw-pagina :is(.mtw-test, .mtw-voordeur) *, .mtw-pagina :is(.mtw-test, .mtw-voordeur) *::before, .mtw-pagina :is(.mtw-test, .mtw-voordeur) *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
	html:has(body.mtw-pagina), body.mtw-pagina { background: #fff !important; color: #1d1915 !important; }
	.mtw-pagina #brx-header, .mtw-pagina #brx-footer, .mtw-pagina .sr-sitekop, .mtw-pagina .sr-sitevoet,
	.mtw-pagina .wp-site-blocks > header, .mtw-pagina .wp-site-blocks > footer { display: none !important; }
}

/* Het sterretje vóór de merknaam in de Bricks-kop (daar staat geen SVG in het element). */
.mtw-pagina .sr-sitekop__merk::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--mtw-goud); clip-path: path("M9 0Q9 9 18 9Q9 9 9 18Q9 9 0 9Q9 9 9 0Z"); }
/* Zonder Bricks-opbouw toont het thema de paginatitel boven de inhoud; die hoort hier niet. */
.mtw-pagina #brx-content.wordpress > h1 { display: none; }