/* ==========================================================================
   Kookmodus — schermvullende stap-voor-stap weergave (assets/js/cook-mode.js)
   Ontwerp: redesign/02-ontwerp/canvas/Kookmodus.dc.html. Huisregels: geen tekst
   kleiner dan 14px, geen hoofdletters op knoppen, aanraakvlakken minimaal 56px.
   ========================================================================== */

html.cook-open,
body.cook-open { overflow: hidden; }

.cook {
	position: fixed;
	inset: 0;
	z-index: 2147483000; /* boven de header en zwevende advertenties */
	display: flex;
	flex-direction: column;
	height: 100%;
	height: 100dvh;
	background: var(--c-surface);
	color: var(--c-dark);
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 1.5;
}
.cook[hidden] { display: none; }
.cook [hidden] { display: none !important; }

/* ---------- Kop ---------- */
.cook__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-2);
	padding: 12px 6px 10px 18px;
	padding-top: max(12px, env(safe-area-inset-top));
}
.cook__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 4px; }
.cook__kicker,
.cook__kick {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--c-muted);
}
.cook .cook__title {
	margin: 0;
	font-family: var(--f-sans);
	font-size: 17px;
	line-height: 24px;
	font-weight: 600;
	color: var(--c-dark);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.cook__note { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--c-muted); }

.cook__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--c-nav);
	cursor: pointer;
}
.cook__close:hover { background: var(--c-soft); }

/* ---------- Voortgang: één streepje per stap ---------- */
.cook__progress {
	display: grid;
	grid-template-columns: repeat(var(--cook-steps, 1), minmax(0, 1fr));
	gap: 4px;
	padding: 0 18px;
}
.cook__seg { height: 5px; border-radius: 3px; background: var(--c-blue); transition: background-color 0.2s; }
.cook__seg.is-done { background: var(--c-navy); }



/* ---------- Inhoud ---------- */
.cook__main {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
.cook__aside { display: none; }
.cook__screen { padding: 28px 22px 32px; }
.cook__inner { display: flex; flex-direction: column; gap: 22px; }
.cook__step { gap: 18px; }

.cook .cook__h {
	margin: 0;
	font-family: var(--f-sans);
	font-size: 26px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--c-ink);
}
.cook .cook__h:focus { outline: none; }
.cook__lead { margin: -10px 0 0; font-size: 17px; line-height: 1.5; color: var(--c-text); }

.cook__heading {
	align-self: flex-start;
	margin: 0;
	padding: 4px 14px;
	border-radius: var(--r-pill);
	background: var(--c-blue);
	color: var(--c-navy);
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
}
/* "Stap 1 van 7": Inter, gewone letters, geen letterspatiëring (review Quint 4 okt, B3). */
.cook__count {
	margin: 0;
	font-family: var(--f-sans);
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--c-navy);
}
.cook__text {
	margin: 0;
	font-size: 25px;
	line-height: 1.45;
	color: var(--c-ink);
	overflow-wrap: break-word;
}

/* Timer-startknop */

/* Nodig in deze stap */
.cook__needed { display: flex; flex-direction: column; gap: 8px; }
.cook__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cook__chip {
	display: flex;
	align-items: center;
	min-height: 36px;
	padding: 4px 14px;
	border-radius: 18px;
	background: var(--c-soft);
	font-size: 16px;
	line-height: 22px;
	color: var(--c-dark);
}

/* ---------- Ingrediënten afvinken ---------- */
.cook .cook__group {
	margin: 6px 0 -12px;
	font-family: var(--f-sans);
	font-size: 18px;
	line-height: 26px;
	font-weight: 700;
	color: var(--c-navy);
}
.cook__checks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-border-light); }
.cook__checks li { margin: 0; border-bottom: 1px solid var(--c-border-light); }
.cook__check {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 60px;
	padding: 8px 0;
	font-size: 19px;
	line-height: 1.4;
	color: var(--c-ink);
	cursor: pointer;
}
.cook__check input {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	margin: 0;
	border: 2px solid #b8bec7;
	border-radius: 8px;
	background: var(--c-surface) no-repeat center / 20px 20px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.cook__check input:checked {
	border-color: var(--c-navy);
	background-color: var(--c-navy);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.cook__check input:focus-visible { outline: 3px solid var(--c-link); outline-offset: 2px; }
.cook__check.is-checked span { color: var(--c-muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.cook__chip.is-checked { color: var(--c-muted); }

/* ---------- Hervatten en afsluiten ---------- */
.cook__center {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	max-width: 560px;
	margin: 0 auto;
	padding-top: 6vh;
}
.cook__choices { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.cook__done-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--c-blue);
	color: var(--c-navy);
}

/* ---------- Onderste balk (kookmodusbalk) ---------- */
.cook__bar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 18px;
	padding-bottom: max(20px, env(safe-area-inset-bottom));
	background: var(--c-surface);
	box-shadow: var(--shadow-float);
}
.cook__bar:has(.cook__nav[hidden]) { display: none; }

.cook__nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
.cook__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 56px;
	padding: 0 18px;
	border: 1.5px solid transparent;
	border-radius: var(--r-pill);
	font-size: 17px;
	line-height: 22px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}
.cook__btn--prev { border-color: var(--c-border); background: var(--c-surface); color: var(--c-dark); }
.cook__btn--prev:hover { border-color: var(--c-navy); }
.cook__btn--next { background: var(--c-navy); color: #ffffff; }
.cook__btn--next:hover { background: var(--c-navy-hover); }
.cook__btn--next.is-wide { grid-column: 1 / -1; }
.cook__choices .cook__btn { width: 100%; }

.cook button:focus-visible { outline: 3px solid var(--c-link); outline-offset: 2px; }


/* ---------- Overgang tussen stappen ---------- */
@media (prefers-reduced-motion: no-preference) {
	.cook__screen.is-in-next { animation: cook-in-next 0.22s ease-out; }
	.cook__screen.is-in-prev { animation: cook-in-prev 0.22s ease-out; }
}
@keyframes cook-in-next { from { opacity: 0; transform: translateX(24px); } }
@keyframes cook-in-prev { from { opacity: 0; transform: translateX(-24px); } }
@media (prefers-reduced-motion: reduce) {
	.cook__seg { transition: none; }
}

/* ---------- Desktop: ingrediënten | stap ---------- */
@media (min-width: 1024px) {
	.cook__top { padding: 18px 24px 14px 40px; }
	.cook .cook__title { font-size: 20px; line-height: 28px; }
	.cook__progress { padding: 0 40px; }

	.cook__screen { width: 100%; max-width: 784px; margin: 0 auto; padding: 48px 32px; }
	.cook__text { font-size: 26px; }

	.cook[data-view="step"] .cook__main {
		display: grid;
		grid-template-columns: 360px minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr);
	}
	.cook[data-view="step"] .cook__aside {
		display: block;
		overflow-y: auto;
		padding: 40px 28px 40px 40px;
		border-right: 1px solid var(--c-border-light);
		background: var(--c-soft);
	}
	.cook[data-view="step"] .cook__main { overflow: hidden; }
	.cook[data-view="step"] .cook__screen { overflow-y: auto; max-width: none; margin: 0; }
	.cook[data-view="step"] .cook__step { max-width: 720px; margin: 0 auto; }
	.cook__aside-h { margin: 0 0 12px; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--c-ink); }
	.cook__aside .cook__group { margin: 18px 0 6px; font-size: 16px; }
	.cook__aside .cook__check { min-height: 52px; font-size: 16px; }
	.cook__aside .cook__check input { width: 28px; height: 28px; }

	.cook__bar { align-items: center; padding: 14px 40px 20px; }
	.cook__nav,
	/* Balk onder de stapkolom centreren, niet onder het hele scherm. */
	.cook[data-view="step"] .cook__bar { padding-left: 400px; }
}

/* Nooit printen */
@media print {
	.cook { display: none !important; }
	html.cook-open,
	body.cook-open { overflow: visible; }
}