/* ==========================================================================
   The Bible: Cause & Effect  —  /bible-cause-and-effect/
   Companion stylesheet for page-bible-cause-and-effect.php.

   The page markup carries the deck's original inline styles (generated by
   designs/bible-cause-and-effect/build-template.py). Those are deliberately
   left inline: they cannot be reached by the parent Ignition theme's
   cascade, which keeps the port visually faithful.

   This file only does what inline styles cannot:
     - load the two display faces
     - stack the two-column chapters on small screens
     - make <picture> fill its half
     - quiz + progress-bar states
     - clear the sticky site header
   Everything here is scoped to .gcc-ce or body.gcc-ce-page.
   ========================================================================== */

/* Cormorant Garamond + Work Sans are enqueued as 'gcc-ce-fonts' in
   functions.php, not @import-ed here — an @import would serialise the font
   request behind this stylesheet and delay first paint. */

/* --------------------------------------------------------------------------
   1. Full-bleed. The theme's main wrapper constrains width and adds padding;
      this page is edge-to-edge, so neutralise it for this page only.
   -------------------------------------------------------------------------- */
body.gcc-ce-page .gcc-site-main {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

body.gcc-ce-page {
	background: #070e16;
}

/* --------------------------------------------------------------------------
   1b. Headings.

   The deck never sets a colour on its h1/h2 — they inherit near-white from
   the .gcc-ce wrapper. But the theme styles headings navy sitewide, and a
   type selector beats inheritance, so every heading rendered navy-on-dark:
   the h1 plus all nine chapter titles, at a 1.16:1 contrast ratio. They
   were effectively invisible. Forcing `inherit` hands them back to the
   wrapper's colour rather than hardcoding a value, so the full-bleed
   sections that set their own colour still win.
   -------------------------------------------------------------------------- */
.gcc-ce h1,
.gcc-ce h2,
.gcc-ce h3,
.gcc-ce h4 {
	color: inherit !important;
}

/* --------------------------------------------------------------------------
   2. Images. Each <picture> fills its parent half / backdrop.
   -------------------------------------------------------------------------- */
.gcc-ce .gcc-ce-pic {
	display: block;
	width: 100%;
	height: 100%;
}

.gcc-ce .gcc-ce-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Keep faces and focal points off the very edge when cropped hard. */
	object-position: center;
}

/* --------------------------------------------------------------------------
   2b. Chapter 9 backdrop.

   The deck laid a near-opaque scrim over the closing photo (0.80 at the top
   rising to 0.94), which buried the church gathering behind it — the one
   image on the page showing GCC's actual people, so worth seeing. Lightened
   to a three-stop gradient: light enough at the top to read the room, still
   dark enough behind the centred copy to hold white text at roughly 6:1.
   -------------------------------------------------------------------------- */
.gcc-ce #ch9 div[style*="linear-gradient"] {
	background: linear-gradient(
		180deg,
		rgba(1, 4, 8, 0.30) 0%,
		rgba(1, 4, 8, 0.60) 45%,
		rgba(1, 4, 8, 0.76) 100%
	) !important;
}

/* --------------------------------------------------------------------------
   3. Chapter dot nav — must clear the sticky site header (z-index 100).
      On phones it moves to the bottom of the viewport: easier to reach,
      and it stops competing with the site header for vertical space.
   -------------------------------------------------------------------------- */
.gcc-ce .gcc-ce-dots {
	top: 88px !important;
	z-index: 40 !important;
}

.gcc-ce .gcc-ce-dots a {
	min-width: 22px;
	min-height: 22px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.gcc-ce .gcc-ce-dots a:focus-visible {
	outline: 2px solid #e8aa4e;
	outline-offset: 2px;
}

/* Anchor jumps must not land under the sticky header. */
.gcc-ce .gcc-ce-section {
	scroll-margin-top: 76px;
}

/* --------------------------------------------------------------------------
   4. Scroll progress bar. Width is driven by JS via a custom property so the
      main thread only ever writes one value.
   -------------------------------------------------------------------------- */
.gcc-ce .gcc-ce-progress {
	width: var(--gcc-ce-progress, 0%) !important;
	will-change: width;
}

/* --------------------------------------------------------------------------
   5. Quiz. Buttons inherit the deck's inline padding/typography; state
      colours live here. Mirrors the original optStyle() logic:
      green = the right answer, red = the wrong one you picked.
   -------------------------------------------------------------------------- */
.gcc-ce .gcc-ce-opt {
	display: block;
	width: 100%;
	text-align: left;
	font: inherit;
	font-size: 14px;
	background: transparent;
	color: #d3d6da;
	border: 1px solid rgba(97, 103, 110, 0.6);
	border-radius: 0;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.gcc-ce .gcc-ce-opt:hover:not(.is-correct):not(.is-wrong) {
	border-color: rgba(232, 170, 78, 0.7);
	color: #f0f1f2;
}

.gcc-ce .gcc-ce-opt:focus-visible {
	outline: 2px solid #e8aa4e;
	outline-offset: 2px;
}

.gcc-ce .gcc-ce-opt.is-correct {
	border-color: #4fae72;
	color: #f0f1f2;
	background: rgba(79, 174, 114, 0.16);
}

.gcc-ce .gcc-ce-opt.is-wrong {
	border-color: #d4614f;
	color: #f0f1f2;
	background: rgba(212, 97, 79, 0.16);
}

.gcc-ce .gcc-ce-quiz-feedback {
	margin-top: 12px;
}

/* --------------------------------------------------------------------------
   6. Responsive. The deck was authored at 1440×900 with hardcoded
      two-column grids and viewport-unit type; both need taming below that.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.gcc-ce h1 {
		font-size: clamp(40px, 7vw, 76px) !important;
	}

	.gcc-ce h2 {
		font-size: clamp(30px, 5vw, 54px) !important;
	}
}

@media (max-width: 900px) {
	/* Stack every chapter: image first, then the copy. */
	.gcc-ce .gcc-ce-section {
		display: flex !important;
		flex-direction: column !important;
		min-height: 0 !important;
	}

	.gcc-ce .gcc-ce-media {
		order: 1 !important;
		flex: none !important;
		min-height: 0 !important;
		height: 46vh !important;
		max-height: 380px;
	}

	.gcc-ce .gcc-ce-copy {
		order: 2 !important;
		flex: none !important;
		padding: 40px 24px 52px !important;
	}

	/* Hero and the full-bleed sections keep their backdrop treatment but
	   need breathing room now the type is bigger relative to the viewport. */
	.gcc-ce #hero,
	.gcc-ce #reflection,
	.gcc-ce #ch9 {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		min-height: 88vh !important;
		padding-top: 96px !important;
		padding-bottom: 56px !important;
	}

	.gcc-ce #hero > div:last-child {
		max-width: none !important;
		padding: 0 24px !important;
	}

	/* The floating Psalm card overlaps the CTA on narrow screens — let it
	   fall back into normal flow underneath. */
	.gcc-ce #hero > div[style*="position:absolute"][style*="bottom:48px"] {
		position: static !important;
		max-width: none !important;
		margin: 32px 24px 0 !important;
	}

	/* Chapter dots to the bottom, out of the header's way. */
	.gcc-ce .gcc-ce-dots {
		top: auto !important;
		bottom: 14px !important;
	}

	.gcc-ce .gcc-ce-section {
		scroll-margin-top: 64px;
	}
}

@media (max-width: 520px) {
	/* The pill holds ten targets. At the desktop gap of 14px, plus the
	   min-width touch targets above, it grows wider than a phone viewport
	   and gets clipped. Tighten the gap and padding rather than the touch
	   targets, which stay at 24px. */
	.gcc-ce .gcc-ce-dots > div {
		gap: 4px !important;
		padding: 6px 10px !important;
	}

	.gcc-ce .gcc-ce-dots a {
		min-width: 24px;
		font-size: 12px !important;
	}

	.gcc-ce .gcc-ce-copy {
		padding: 32px 20px 44px !important;
	}
}

/* --------------------------------------------------------------------------
   7. Motion and print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.gcc-ce .gcc-ce-progress {
		transition: none !important;
	}

	.gcc-ce .gcc-ce-opt {
		transition: none;
	}
}

@media print {
	.gcc-ce .gcc-ce-dots,
	.gcc-ce .gcc-ce-progress {
		display: none !important;
	}
}