/* SailZing scenario answer styles.
	Target markup = exactly what core blocks output:
	<div class="wp-block-group sz-scenario">  <p>Description…</p>  <figure class="wp-block-image">…gif…</figure>
		<details class="wp-block-details sz-answer [sz-quiz sz-boats-… sz-correct-…]"><summary>Which boat(s)…?</summary><p>Answer…</p></details>
	</div>
	Without this CSS the Details block still works (browser default ▸ marker). */
:root{--sz-sticky-top:64px;}            /* Astra sticky-header height; set to 0 if the header isn't sticky */
.sz-scenario{margin-bottom:2.5em}
.sz-scenario > figure{margin:0 !important;background:#fff}
.sz-answer{margin:0 !important;border:1px solid #cfd8e3;border-top:0;border-radius:0 0 8px 8px;background:#f7fafd}
.sz-answer > summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.4em .8em;
	padding:.85em 1.1em;font-weight:600;color:var(--ast-global-color-2,#1e293b);min-height:48px;-webkit-tap-highlight-color:transparent}
.sz-answer > summary::-webkit-details-marker{display:none}
.sz-answer > summary::after{content:"Show answer \25BE";margin-left:auto;padding:.3em .95em;border-radius:999px;
	background:var(--ast-global-color-0,#046bd2);color:#fff;font-size:.9em;white-space:nowrap}
.sz-answer[open] > summary::after{content:"Hide answer \25B4"}
.sz-answer > summary:hover::after{background:var(--ast-global-color-1,#045cb4)}
.sz-answer > summary:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.sz-answer > :not(summary){margin-left:1.1rem;margin-right:1.1rem}
.sz-answer > summary + *{border-top:1px dashed #cfd8e3;padding-top:.8em;margin-top:0}
.sz-answer > :last-child{margin-bottom:1em}
/* Keep the animation in view while the answer is open (tablet/phone). CSS-only via :has(). */
@media (max-width:1024px){
	.sz-scenario:has(> .sz-answer[open]) > figure{position:sticky;top:var(--sz-sticky-top);z-index:5;box-shadow:0 6px 10px -6px rgba(0,0,0,.25)}
}

/* ====== QUIZ ENHANCEMENT (only when sz-quiz.js runs; it adds .sz-enhanced) ====== */
.sz-quiz-panel{border:1px solid #cfd8e3;border-top:0;background:#fff;padding:.9em 1.1em 1em}
.sz-quiz-q{margin:0 0 .6em;font-weight:600;color:var(--ast-global-color-2,#1e293b)}
.sz-quiz-hint{font-weight:400;font-size:.85em;color:#64748b}
.sz-choices{display:flex;flex-wrap:wrap;gap:.5em}
.sz-choice{--c:#64748b;font:inherit;font-size:.95em;font-weight:600;display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:.35em 1em .35em .7em;
	border:2px solid #cfd8e3;border-radius:999px;background:#fff;color:var(--ast-global-color-2,#1e293b);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sz-choice .sz-dot{width:1.1em;height:1.1em;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.sz-choice[data-boat="none"] .sz-dot{background:#fff;box-shadow:inset 0 0 0 2px #94a3b8}
.sz-choice:hover{border-color:var(--c)}
.sz-choice[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,#fff)}
.sz-choice[aria-pressed="true"]::after{content:"\2713";font-weight:700}
.sz-choice:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.sz-choice:disabled{cursor:default;opacity:1}
.sz-choice.is-right{border-color:#16a34a;background:#ecfdf3}
.sz-choice.is-wrong{border-color:#dc2626;background:#fef2f2}
.sz-actions{display:flex;flex-wrap:wrap;gap:.6em;align-items:center;margin-top:.8em}
.sz-check,.sz-retry{font:inherit;font-weight:600;min-height:44px;padding:.45em 1.2em;border-radius:6px;border:0;cursor:pointer}
.sz-check{background:var(--ast-global-color-0,#046bd2);color:#fff}
.sz-check:disabled{background:#94a3b8;cursor:not-allowed}
.sz-retry{background:#e2e8f0;color:var(--ast-global-color-2,#1e293b)}
.sz-answer > .sz-result{padding:.6em .9em;border-radius:6px;font-weight:700;border-top:0}
.sz-result.is-correct{background:#dcfce7;color:#14532d}
.sz-result.is-incorrect{background:#fee2e2;color:#7f1d1d}
.sz-result:empty{display:none}
.sz-answer > summary + .sz-result:empty + *{border-top:1px dashed #cfd8e3;padding-top:.8em;margin-top:0}
.sz-answer.sz-quiz-on{border-top:1px solid #cfd8e3}
.sz-answer.sz-quiz-on > summary{font-size:.92em;min-height:44px;padding:.5em 1.1em;color:var(--ast-global-color-0,#046bd2)}
.sz-answer.sz-quiz-on > summary::after{content:"\25BE";background:none;color:inherit;margin-left:0;padding:0}
.sz-answer.sz-quiz-on[open] > summary::after{content:"\25B4"}
.sz-answer.sz-is-answered > summary{display:none}
.sz-answer.sz-is-answered > .sz-result{margin-top:1em}
@media (max-width:1024px){
	.sz-scenario.sz-enhanced.is-answered > figure{position:sticky;top:var(--sz-sticky-top);z-index:5;box-shadow:0 6px 10px -6px rgba(0,0,0,.25)}
}
@media (prefers-reduced-motion:reduce){.sz-scenario *{transition:none!important;scroll-behavior:auto!important}}
.sz-sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0}

/* Keep the pieces attached even inside a Group block with a constrained/flow layout (block gap). */
.sz-scenario > .sz-quiz-panel,
.sz-scenario > .sz-answer {
	margin-block-start: 0 !important;
}

/* Theme button styles (e.g. Astra) must not recolour the quiz buttons on hover/focus. */
.sz-quiz-panel .sz-check:hover,
.sz-quiz-panel .sz-check:focus {
	background: var(--ast-global-color-1, #045cb4);
	color: #fff;
}
.sz-quiz-panel .sz-check:disabled {
	background: #94a3b8;
	color: #fff;
}
.sz-quiz-panel .sz-retry,
.sz-quiz-panel .sz-retry:hover,
.sz-quiz-panel .sz-retry:focus {
	background: #e2e8f0;
	color: var(--ast-global-color-2, #1e293b);
}
.sz-quiz-panel .sz-choice,
.sz-quiz-panel .sz-choice:hover,
.sz-quiz-panel .sz-choice:focus {
	color: var(--ast-global-color-2, #1e293b);
}
.sz-quiz-panel .sz-choice:not([aria-pressed="true"]):not(.is-right):not(.is-wrong) {
	background: #fff;
}