/* ==========================================================================
   single-lesson.css — sfwd-lessons single template styling
   Loaded conditionally via inc/setup.php on `is_singular('sfwd-lessons')`
   ALONGSIDE _ld-shell.css (the shared LearnDash surface chrome partial).

   Split established 2026-05-17 when single-sfwd-topic.php arrived. The
   chrome (header, footer, container, lesson-scoped tokens, mobile + reduced-
   motion treatments of the chrome) now lives in _ld-shell.css. This file
   owns ONLY the lesson-specific surface:

     - .lesson-body prose register (font size + line height + headings +
       inline code + figure spacing).
     - The wp101-video plugin glue point (.wp101-video-module placeholder
       button suppression). The plugin styles its own module; this file
       only owns the integration surfaces specific to lesson context.
     - The definition-list pattern (.lesson-body dl) for menu-item glossary
       blocks inside lesson prose.
     - The mobile + reduced-motion treatments of the lesson-body itself.
     - The un-layered escape that defeats the .site-shell layer trap for
       the .single-lesson-wrap surface.

   The lesson-scoped tokens (--color-surface-lesson, --lesson-content-width,
   --lesson-scroll-margin, --sticky-video-width, etc.) are declared in the
   partial. The wp101-video plugin consumes them via var() with fallbacks,
   so its styling stays correct whether or not this file loads.

   Note: when LearnDash focus mode is ON for a lesson, LD's loader bypasses
   single-sfwd-lessons.php entirely — the .lesson-body rules below have no
   effect in that case (LD's own shell wins). The wp101-video module rules
   in the plugin still apply because they target the shortcode output, which
   renders in both contexts.
   ========================================================================== */

@layer page-types {

	/* ----------------------------------------------------------------------
	   Lesson body — prose container
	   Font size is scoped to .lesson-body (NOT applied globally) per the
	   designer's hard refusal of body-level type changes.
	   ---------------------------------------------------------------------- */

	.lesson-body {
		max-width: var(--lesson-content-width);
		margin: 0 auto;
		padding: 0 2rem 6rem;
		font-size: 1.125rem;
		line-height: 1.6;
		color: var(--color-text-strong);
	}

	.lesson-body h2 {
		font-family: var(--ff-display, "Fraunces", Georgia, serif);
		font-size: clamp(1.5rem, 2.6vw, 2rem);
		font-weight: 600;
		line-height: 1.2;
		color: var(--color-text-strong);
		margin: 3.5rem 0 1.5rem;
		scroll-margin-top: var(--lesson-scroll-margin);
	}

	.lesson-body p {
		margin: 0 0 1.2em;
	}

	.lesson-body p code,
	.lesson-body p kbd {
		font-family: var(--ff-mono, "JetBrains Mono", "Courier New", monospace);
		font-size: 0.92em;
		background: var(--color-accent-soft);
		color: var(--color-accent);
		padding: 0.125rem 0.375rem;
		border-radius: 4px;
	}

	.lesson-body p strong {
		color: var(--color-text-strong);
		font-weight: 600;
	}

	.lesson-body figure.wp-block-image {
		margin: 2rem auto;
	}

	/* Mark Complete centre cell — lives in the shared lesson footer markup
	   but is lesson-specific (quizzes have their own submit affordance, topics
	   delegate completion to the parent lesson). The cell selector is shared
	   so the chrome rules in _ld-shell.css size the row; the button styling
	   below is lesson-only and lives here. */

	.lesson-footer__mark-complete {
		flex: 0 1 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.lesson-footer__mark-complete form,
	.lesson-footer__mark-complete .learndash_mark_complete_button {
		margin: 0;
	}

	.lesson-footer__mark-complete button,
	.lesson-footer__mark-complete input[type="submit"] {
		background: var(--color-gold);
		color: var(--color-accent-strong);
		border: 0;
		border-radius: var(--radius-pill, 999px);
		padding: 0.75rem 1.5rem;
		font-family: var(--ff-body, "Sora", system-ui, sans-serif);
		font-size: 1rem;
		font-weight: 600;
		cursor: pointer;
		min-height: 48px;
		line-height: 1;
	}

	.lesson-footer__mark-complete button:hover,
	.lesson-footer__mark-complete input[type="submit"]:hover {
		filter: brightness(1.05);
	}

	.lesson-footer__mark-complete button:focus-visible,
	.lesson-footer__mark-complete input[type="submit"]:focus-visible {
		outline: 2px solid var(--color-teal);
		outline-offset: 4px;
	}

	.lesson-footer__mark-complete .is-complete {
		color: var(--color-muted);
		font-size: 1rem;
		font-style: italic;
	}

	/* Definition-list pattern in lesson body (Posts/Pages/Media/Plugins-style
	   menu-item glossary blocks). CSS is staged ahead of the editorial
	   conversion of paragraph blocks to <dl> markup. */

	.lesson-body dl {
		margin: 1.5rem 0 2rem;
		display: grid;
		grid-template-columns: max-content 1fr;
		column-gap: 1.5rem;
		row-gap: 0.65rem;
		align-items: baseline;
	}

	.lesson-body dt {
		font-weight: 700;
		color: var(--color-text-strong);
		font-size: 1rem;
		white-space: nowrap;
	}

	.lesson-body dd {
		margin: 0;
		color: var(--color-text-strong);
		font-size: 1rem;
		line-height: 1.55;
	}

	/* Hide the wp101-video Mark-as-watched button on placeholder cards.
	   The plugin already emits `is-placeholder` as a BEM modifier on the
	   `.wp101-video-module` wrapper (inc/shortcode.php line ~77), and
	   the placeholder branch renders `.wp101-mark-watched-button` whereas
	   the active branch renders `.wp101-play-button` — so the selector
	   below targets only the placeholder card's mark-as-watched control.
	   Per ID review: NO CONTROL is the right state when there's nothing
	   to watch (opacity + pointer-events:none would still read as
	   dishonest UX). */

	.wp101-video-module.is-placeholder .wp101-mark-watched-button {
		display: none;
	}

	/* ----------------------------------------------------------------------
	   Mobile — lesson-body only. Header / footer mobile padding lives in
	   _ld-shell.css.
	   ---------------------------------------------------------------------- */

	@media (max-width: 700px) {

		.lesson-body {
			padding-inline: 1.25rem;
		}

		/* Mobile stack order: mark-complete first (full-width), then
		   prev/next stacked beneath. `order` puts mark-complete above
		   regardless of source order so the primary affordance reads
		   first on touch. The flex-direction:column on .lesson-footer__wrap
		   is set in _ld-shell.css; this layer adds the mark-complete-only
		   ordering. */

		.lesson-footer__mark-complete {
			order: -1;
			width: 100%;
		}

		.lesson-footer__mark-complete button,
		.lesson-footer__mark-complete input[type="submit"] {
			width: 100%;
		}

		.lesson-body dl {
			grid-template-columns: 1fr;
			row-gap: 0.35rem;
		}

		.lesson-body dt {
			margin-bottom: 0.15rem;
		}
	}
}

/* ============================================================
   Un-layered escape — defeats the .site-shell layer trap.

   .site-shell rules in main.css are NOT inside an @layer, which
   means they beat any layered .single-lesson-wrap padding/margin
   override no matter the cascade order. The site-shell contributes
   block-start padding that produced a ~200px empty zone between the
   site header and the lesson eyebrow on this surface.

   This block lives OUTSIDE @layer page-types so it can defeat those
   un-layered rules and zero out the inherited block-start space.
   See memory entry `reference_thisismyurl_site_shell_layer_trap` for
   the canonical pattern.
   ============================================================ */

.single-lesson-wrap {
	padding-block-start: 0;
	margin-block-start: 0;
}