/* ==========================================================================
 * Fullscreen modal-laag voor de onboarding-wizard.
 *
 * _MODAL_20261028
 *
 * WAT DIT IS
 * ----------
 * De demo van Phrona opent als een volledig scherm met een warme achtergrond,
 * een witte topbar met merk links, de titel in het midden en een sluitknop
 * rechts, en daaronder een bijna-wit kader met de inhoud. Geoffrey wil dat de
 * wizard er EXACT zo uitziet.
 *
 * Ik heb de demo-CSS niet gekopieerd maar dezelfde waarden gebruikt, om twee
 * redenen:
 *
 *  1. De demo-CSS is 54 kB en gaat over demo-schermen (lessen, stappen, een
 *     nagebootste app). Ongeveer de helft daarvan gaat over dingen die de
 *     wizard niet heeft. Meekopiëren betekent dode regels die later iemand
 *     verwarren.
 *  2. De demo leest zijn kleuren uit themavariabelen (--ink, --green, --line).
 *     Door dezelfde variabelen met dezelfde terugvalwaarden te gebruiken,
 *     verandert de wizard automatisch mee als het thema verandert. Een kopie
 *     met vaste hexwaarden zou na een themawijziging uit de toon vallen.
 *
 * De structuur is wel identiek: laag -> topbar -> frame-inner -> body.
 * Daardoor gedraagt hij zich hetzelfde (scrollen, hoogte, inspringen).
 * ========================================================================== */

/* ---------------------------------------------------------------- de laag
 *
 * position:fixed + inset:0 + 100dvh: het hele scherm, ook op een telefoon
 * waar de adresbalk in- en uitschuift. 100svh als terugval voor browsers die
 * dvh niet kennen: dan is het de kleinste hoogte en valt er niets buiten beeld.
 */
#pho.pho--modal {
	--pho-ink: var(--ink, #202825);
	--pho-body: var(--body, #323A36);
	--pho-muted: var(--muted, #68716C);
	--pho-line: var(--line, #DADDD7);
	--pho-line-soft: var(--line-soft, #E4E7E1);
	--pho-bg: var(--bg, #FAFAF8);
	--pho-surface: var(--surface, #F2F3EF);
	--pho-card: var(--card, #EEF1EC);
	--pho-white: var(--white, #FFFFFF);
	--pho-green: var(--green, #536D62);
	--pho-green-hover: #47605A;
	--pho-green-soft: var(--green-soft, #6D8E7E);
	--pho-terra: var(--terra, #A86F5C);
	--pho-radius: var(--r-md, 16px);
	--pho-radius-sm: var(--r-sm, 10px);
	--pho-shadow-sm: var(--shadow-sm, 0 1px 2px rgba(32, 40, 37, .04), 0 6px 16px -8px rgba(32, 40, 37, .08));
	--pho-shadow-md: var(--shadow-md, 0 2px 4px rgba(32, 40, 37, .03), 0 18px 40px -22px rgba(32, 40, 37, .18));
	--pho-ease: var(--ease, cubic-bezier(.22, .61, .36, 1));
	--pho-display: var(--font-display, "Fraunces", Georgia, serif);
	--pho-sans: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);

	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	height: 100svh;
	height: 100dvh;
	width: 100%;
	max-width: none;
	min-width: 0;
	/* Expliciet, anders houdt een themaregel de laag gecentreerd op 1080px
	   in plaats van het scherm te vullen. */
	margin: 0 !important;
	padding: 0;
	/* Dezelfde warme papierwassing als de hero. Op de LAAG, niet op het kader:
	   het kader blijft bijna-wit, anders wordt de wizard onleesbaar boven een
	   drukke achtergrond. */
	background-color: var(--pho-bg, #FAFAF8);
	background-image: url("img/demo-backdrop.jpg");
	background-size: cover;
	background-position: 50% 50%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	text-align: left;
	font-family: var(--pho-sans);
	color: var(--pho-body);
}

/* --------------------------------------------------------------- de topbar
 *
 * Drie kolommen: merk links, titel in het midden, sluiten rechts. grid met
 * 1fr auto 1fr houdt de titel echt in het midden, ook als het merk en de knop
 * verschillende breedtes hebben. Met flex zou de titel opschuiven.
 */
#pho.pho--modal .pho__topbar {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	padding: .55rem clamp(14px, 2.4vw, 28px);
	background: var(--pho-white, #fff);
	border-bottom: 1px solid var(--pho-line-soft, #E4E7E1);
}

#pho.pho--modal .pho__merk {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	min-width: 0;
	color: var(--pho-ink, #202825);
	font-family: var(--pho-sans);
	font-size: .95rem;
	font-weight: 500;
	text-decoration: none;
}


/* Het beeldmerk in de topbar: hetzelfde merkteken als de siteheader, geen
 * nabootsing. Vaste maat zodat de topbar niet verspringt tijdens het laden. */
#pho.pho--modal .pho__merk-beeld {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	flex: 0 0 auto;
}

#pho.pho--modal .pho__merk-beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#pho.pho--modal .pho__merk:hover {
	color: var(--pho-green, #536D62);
}

#pho.pho--modal .pho__titel {
	margin: 0;
	font-family: var(--pho-display);
	font-size: clamp(.95rem, 2.2vw, 1.1rem);
	font-weight: 600;
	color: var(--pho-ink, #202825);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#pho.pho--modal .pho__sluit {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--pho-line-soft, #E4E7E1);
	border-radius: var(--pho-radius-sm, 10px);
	background: var(--pho-white, #fff);
	color: var(--pho-muted, #68716C);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .16s var(--pho-ease), color .16s var(--pho-ease);
}

#pho.pho--modal .pho__sluit:hover {
	background: var(--pho-surface, #F2F3EF);
	color: var(--pho-ink, #202825);
}

/* --------------------------------------------------------------- het kader
 *
 * Bijna opaak wit: de wassing mag je zien, de achtergrondfoto mag niet door de
 * tekst heen komen. 94% houdt net genoeg warmte over zonder de leesbaarheid te
 * raken.
 */
#pho.pho--modal .pho__frame-inner {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	/* Op een telefoon vult het paneel anders de hele breedte en verdwijnt de
	   wassing. Een paar pixels marge houdt hem zichtbaar zonder krap te worden. */
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(1.04) blur(1.5px);
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* ---------------------------------------------------------------- de body
 *
 * flex:1 + min-height:0 is essentieel: zonder min-height duwt de inhoud het
 * kader op en scrollt de pagina in plaats van het vlak.
 */
#pho.pho--modal .pho__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	padding: clamp(18px, 3vw, 34px) clamp(18px, 3.2vw, 38px) clamp(24px, 4vw, 44px);
	scrollbar-width: thin;
	scrollbar-color: var(--pho-line) transparent;
}

#pho.pho--modal .pho__body::-webkit-scrollbar { width: 6px; }
#pho.pho--modal .pho__body::-webkit-scrollbar-thumb {
	background: var(--pho-line-soft);
	border-radius: 999px;
}
#pho.pho--modal .pho__body:hover::-webkit-scrollbar-thumb {
	background: var(--pho-line);
}
#pho.pho--modal .pho__body::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------- het scroll-lock
 *
 * Zonder dit scrolt de pagina achter de laag mee op een telefoon. Alleen
 * zetten als de laag open is; de klasse wordt door de JS beheerd.
 */
body.pho-modal-open {
	overflow: hidden;
}

/* --------------------------------------------- geen laag: gewone weergave
 *
 * Als de JS niet draait (of de laag wordt bewust niet geopend) moet de wizard
 * gewoon leesbaar in de pagina staan. Daarom staan alle modal-regels onder
 * `#pho.pho--modal`; zonder die klasse blijft het een normaal blok.
 */

/* --------------------------------------------------------------- telefoon
 *
 * Op een smal scherm is de topbar het enige dat ruimte mag kosten. De titel
 * wordt korter en het merk laat zijn tekst vallen: het beeldmerk blijft.
 */
@media (max-width: 560px) {
	#pho.pho--modal .pho__topbar {
		grid-template-columns: auto 1fr auto;
		gap: .5rem;
	}

	#pho.pho--modal .pho__merk-tekst {
		display: none;
	}

	#pho.pho--modal .pho__titel {
		font-size: .95rem;
		text-align: left;
	}
}