/**
 * s325 -- how-to video embeds on the public /help/ page.
 *
 * Markup comes from [saf_howto_video] (mu-plugin sober-af-howto); the styling
 * lives here because mu-plugins never style public pages. Enqueued from
 * soberafe-child/functions.php on is_page('help') only.
 *
 * A figure carrying BOTH clips has .saf-howto--pair: the phone-view clip shows
 * at <=640px and the desktop clip above it. A figure with ONE clip shows it at
 * every width. No aspect-ratio is forced: the desktop clip is 16:9 and the
 * phone clip is portrait, and each <video> takes its poster's shape.
 */

.saf-howto {
	margin: 0.75rem 0 1.5rem;
	max-width: 760px;
}

.saf-howto__cap {
	font-family: Outfit, sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	color: #024163;
	margin-bottom: 0.4rem;
}

.saf-howto__video {
	display: block;
	width: 100%;
	height: auto;
	background: #000;
	border: 1px solid #d9dee3;
	border-radius: 0.5rem;
}

.saf-howto__video--mobile {
	max-width: 360px;
	max-height: 80vh;
	margin: 0 auto;
}

.saf-howto--pair .saf-howto__video--mobile {
	display: none;
}

@media (max-width: 640px) {
	.saf-howto--pair .saf-howto__video--desktop {
		display: none;
	}
	.saf-howto--pair .saf-howto__video--mobile {
		display: block;
	}
}

.saf-howto__fallback {
	color: #fff;
	padding: 1rem;
}

.saf-howto__fallback a {
	color: #fff;
}

.saf-howto__transcript {
	margin-top: 0.6rem;
	font-size: 0.95rem;
}

.saf-howto__transcript summary {
	cursor: pointer;
	color: #be2727;
	font-weight: 600;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.saf-howto__transcript p {
	margin: 0 0 0.5em;
}

/* s396: screenshot figures ([saf_howto_shot], mu-plugin sober-af-howto) and the
   audience-grouped table of contents on /help/. A section with no clip still
   carries its written steps plus one to three of these figures. */

.saf-howto-shot {
	margin: 0.75rem 0 1.25rem;
	max-width: 760px;
}

.saf-howto-shot__img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #d9dee3;
	border-radius: 0.5rem;
	background: #f6f1e7;
}

.saf-howto-shot__cap {
	font-size: 0.9rem;
	color: #4a5560;
	margin-top: 0.4rem;
}

.saf-help-toc {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem 2rem;
	margin: 1rem 0 2rem;
}

.saf-help-toc h2 {
	font-family: Outfit, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #024163;
	margin: 0 0 0.4rem;
}

.saf-help-toc ul {
	margin: 0;
	padding-left: 1.1rem;
}

.saf-help-toc li {
	margin: 0 0 0.3rem;
}

@media (max-width: 760px) {
	.saf-help-toc {
		grid-template-columns: 1fr;
	}
}