/* ==========================================================================
   /word-of-god/ — GCC's position on the authority of Scripture
   Companion stylesheet for page-word-of-god.php.

   The markup keeps the deck's inline styles (generated by
   designs/word-of-god/build-word-of-god.py, re-coloured to the GCC brand and
   set in Montserrat), so the parent Ignition theme's cascade cannot reach
   them.

   This file covers what inline styles cannot — plus the deck's own <head>
   <style> block, which is dropped in the port: its link colours and its two
   mobile grid rules are reimplemented here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Full bleed
   -------------------------------------------------------------------------- */
body.wog-page .gcc-site-main {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

/* The deck set its base font on <body> inside the <head> block that the port
   strips, so anything without an inline font-family fell back to the browser
   default serif. Set it on the wrapper instead — the elements that do carry
   an inline font already say Montserrat, so this simply catches the rest. */
.wog {
	font-family: 'Montserrat', sans-serif;
}

/* --------------------------------------------------------------------------
   2. Headings.

   The deck sets a colour inline on every heading, so inline wins — except in
   the hero, which is white-on-photo. The theme's sitewide navy heading rule
   would otherwise make the h1 invisible against the dark image, which is the
   exact bug that hit /bible-cause-and-effect/.
   -------------------------------------------------------------------------- */
body.wog-page .wog .wog-hero h1 {
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   3. Links.

   Match the theme's own specificity (`body.gcc-redesigned .gcc-site-main a`)
   or these lose and render in the sitewide blue — as happened on /bible/.
   -------------------------------------------------------------------------- */
body.wog-page .gcc-site-main .wog a {
	color: #E31E24;
	text-decoration: none;
}

body.wog-page .gcc-site-main .wog a:hover {
	color: #B31419;
}

body.wog-page .gcc-site-main .wog a:focus-visible {
	outline: 2px solid #E31E24;
	outline-offset: 3px;
}

/* The CTA buttons and further-reading cards carry their own colour. */
body.wog-page .gcc-site-main .wog .wog-footer-grid a,
body.wog-page .gcc-site-main .wog .wog-further-links a {
	color: inherit;
}

body.wog-page .gcc-site-main .wog .wog-footer-grid a {
	color: #fff;
}

body.wog-page .gcc-site-main .wog .wog-footer-grid a:hover {
	background: #B31419 !important;
	color: #fff;
}

body.wog-page .gcc-site-main .wog .wog-further-links a {
	transition: background-color 140ms ease, transform 140ms ease;
}

body.wog-page .gcc-site-main .wog .wog-further-links a:hover {
	background: #f2e2c4 !important;
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   4. Hero image — fills the rounded panel behind the copy.
   -------------------------------------------------------------------------- */
.wog .wog-pic {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.wog .wog-pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   5. Responsive.

   The first two rules replace the deck's own <head> media query, dropped in
   the port. The rest is what the deck never had: it assumes a wide canvas
   with 48px side margins throughout.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.wog .wog-belief-row {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}

	.wog .wog-belief-icon {
		margin-bottom: 12px;
	}

	.wog .wog-footer-grid {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}

	/* Hero: full-bleed on a phone, and the copy needs the whole width. */
	.wog .wog-hero {
		margin: 0 !important;
		border-radius: 0 !important;
		min-height: 0 !important;
	}

	.wog .wog-hero > div:last-child {
		padding: 44px 24px 36px !important;
		max-width: none !important;
	}

	.wog .wog-hero h1 {
		font-size: clamp(32px, 8vw, 52px) !important;
	}

	/* The left-to-right scrim assumes width; on a phone it needs to run
	   top-to-bottom or the text sits on bare photo. */
	.wog .wog-hero > div:nth-of-type(1) {
		background: linear-gradient(180deg, rgba(20,14,8,0.45) 0%, rgba(20,14,8,0.82) 60%) !important;
	}

	.wog .wog-beliefs {
		margin-top: 44px !important;
	}

	.wog .wog-further-links {
		grid-template-columns: 1fr !important;
	}

	.wog .wog-footer-grid {
		margin: 44px 20px 40px !important;
		padding: 28px 24px !important;
	}

	.wog .wog-further {
		margin-top: 44px !important;
	}
}

@media (max-width: 520px) {
	.wog .wog-beliefs {
		padding: 0 20px !important;
	}

	.wog .wog-further {
		padding: 0 20px !important;
	}
}

/* --------------------------------------------------------------------------
   6. Print
   -------------------------------------------------------------------------- */
@media print {
	.wog .wog-footer-grid {
		display: none !important;
	}
}

/* "What this means in practice" — three columns on desktop, stacked below 900. */
@media (max-width: 900px) {
	.wog .wog-practice-grid {
		grid-template-columns: 1fr !important;
		gap: 22px !important;
	}

	.wog .wog-practice {
		margin-top: 40px !important;
		padding: 0 20px !important;
	}

	.wog .wog-practice > div {
		padding: 28px 24px !important;
	}
}

/* The theme styles headings navy sitewide; this one sits on navy. */
body.wog-page .gcc-site-main .wog .wog-practice h3 {
	color: #fff !important;
}
