/* =========================================================
 *
 *  Learning to Love the Gospel — GOV.UK style
 *
 *  Built on the conventions of the GOV.UK Design System, which is
 *  open source and widely reused: the GDS type scale, Arial, blue
 *  underlined links, the yellow focus state, square corners and
 *  generous spacing.
 *
 *  It deliberately does NOT use the GOV.UK brand: no crown, no
 *  wordmark, no claim of any government association. The design
 *  patterns are reusable; the branding is not.
 *
 *  GDS Transport is licensed for gov.uk only, so this uses Overpass,
 *  which is under the SIL Open Font License. See fonts/OFL.txt.
 *
 * ========================================================= */

/* ---------- typeface ----------
 *
 * Overpass, self-hosted. It is under the SIL Open Font License, so it
 * may be used here, and it descends from Highway Gothic, which gives it
 * the same road-signage ancestry and legibility-first drawing that
 * Transport has. See fonts/OFL.txt.
 *
 * Self-hosted rather than linked from a font CDN, so no reader is
 * announced to a third party just for loading the page.
 *
 * One variable file per subset covers every weight used.
 */

@font-face {
	font-family: "Overpass";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/overpass-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Overpass";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/overpass-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

:root {
	color-scheme: light;

	--black:        #0b0c0c;
	--white:        #ffffff;
	--blue:         #1d70b8;
	--dark-blue:    #003078;
	--light-blue:   #5694ca;
	--purple:       #4c2c92;   /* visited links */
	--green:        #00703c;
	--red:          #d4351c;
	--yellow:       #ffdd00;   /* focus */
	--grey-1:       #505a5f;   /* secondary text */
	--grey-2:       #b1b4b6;   /* borders */
	--grey-3:       #f3f2f1;   /* shaded panels */

	/* GDS Transport is licensed for gov.uk, service.gov.uk and
	   blog.gov.uk only, so it cannot be used here. Overpass stands in;
	   Arial behind it is what the Design System itself tells other
	   domains to fall back to. */
	--sans: "Overpass", arial, "Helvetica Neue", helvetica,
	        "Liberation Sans", sans-serif;

	/* the GDS type scale, at its desktop sizes */
	--size-16: 1rem;
	--size-19: 1.1875rem;
	--size-24: 1.5rem;
	--size-27: 1.6875rem;
	--size-36: 2.25rem;
	--size-48: 3rem;

	/* The content width matches the Editorial style, so switching
	   between the two does not move the text. GDS gutters sit inside
	   the container, so the max-width carries them on top. */
	/* The same expression the Editorial style uses for its shell, so the
	   two containers stay identical at every width rather than only at
	   the widest. GDS gutters sit inside the container, so the
	   max-width below carries them on top. */
	--width: calc(44rem + clamp(2rem, 4vw, 3.5rem) + 17rem);
	--gutter: 15px;
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	background: var(--white);
}

body {
	margin: 0;
	background: var(--white);
	color: var(--black);
	font-family: var(--sans);
	font-size: var(--size-19);
	line-height: 1.31578947;
	-webkit-font-smoothing: antialiased;

	/* Hold the footer at the foot of the window on a short page, rather
	   than letting it float halfway up with blank space beneath it. On a
	   long page it simply follows the content as usual. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;   /* discounts the browser chrome on phones */
}

main {
	flex: 1 0 auto;
	/* A flex item with auto side margins sizes to its content instead
	   of stretching, which would centre any page that puts .wrap on
	   <main> itself, such as the not-found pages. */
	width: 100%;
	min-width: 0;
}

.site-footer {
	flex-shrink: 0;
}

h1, h2, h3 {
	font-weight: 700;
	margin: 0;
	color: var(--black);
}

p { margin: 0; }

img { max-width: 100%; height: auto; display: block; }

/* ---------- links, the GDS way ---------- */

a {
	color: var(--blue);
	text-decoration: underline;
	text-decoration-thickness: max(1px, .0625rem);
	text-underline-offset: .1578em;
}

a:visited { color: var(--purple); }

a:hover {
	color: var(--dark-blue);
	text-decoration-thickness: max(3px, .1875rem, .12em);
}

a:active { color: var(--black); }

/* The focus state is the most recognisable part of the system: a
   yellow block with a solid black underline, never a faint outline. */
a:focus,
button:focus,
select:focus,
[tabindex]:focus {
	outline: 3px solid transparent;
	color: var(--black);
	background-color: var(--yellow);
	box-shadow: 0 -2px var(--yellow), 0 4px var(--black);
	text-decoration: none;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ---------- layout ---------- */

.wrap {
	max-width: calc(var(--width) + (var(--gutter) * 2));
	margin: 0 auto;
	padding: 0 var(--gutter);
}

@media (min-width: 40.0625em) {
	.wrap {
		max-width: calc(var(--width) + 60px);
		padding: 0 30px;
	}
}

.skip {
	display: block;
	position: absolute;
	left: -9999px;
	padding: 10px 15px;
	background: var(--white);
	color: var(--black);
	font-size: var(--size-19);
	text-decoration: underline;
}

.skip:focus {
	position: static;
	left: auto;
	background: var(--yellow);
	box-shadow: 0 -2px var(--yellow), 0 4px var(--black);
	outline: 3px solid transparent;
}

/* ---------- header: black bar, white text ---------- */

.site-header {
	position: static;
	background: var(--black);
	border-bottom: 10px solid var(--blue);
	padding: 10px 0;
	backdrop-filter: none;
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	min-height: 0;
}

.wordmark {
	display: flex;
	flex-wrap: wrap;
	gap: 0 .35em;
	margin-right: auto;
	font-size: var(--size-24);
	font-weight: 700;
	color: var(--white);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.wordmark:visited { color: var(--white); }
.wordmark:hover { color: var(--white); border-bottom-color: var(--white); }
.wordmark:focus { color: var(--black); }

.wordmark__lead { font-weight: 700; }
.wordmark__rest { font-weight: 400; color: inherit; }

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	font-size: var(--size-16);
	color: var(--white);
	text-decoration: underline;
}

.site-nav a:visited { color: var(--white); }
.site-nav a:hover { color: var(--white); text-decoration-thickness: 3px; }
.site-nav a:focus { color: var(--black); }

/* This design system has no dark mode, so the toggle would do
   nothing. Hiding it is clearer than leaving a dead control. */
.theme-toggle { display: none; }

/* ---------- style picker ---------- */

.style-picker {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--size-16);
	color: var(--white);
}

.style-picker select {
	font-family: var(--sans);
	font-size: var(--size-16);
	padding: 4px;
	border: 2px solid var(--black);
	background: var(--white);
	color: var(--black);
	border-radius: 0;
}

/* ---------- reading progress ---------- */

.reading-progress {
	position: static;
	height: 0;
}

.reading-progress span { display: none; }

/* ---------- page and chapter openings ---------- */

.page-head,
.chapter-head {
	padding-top: 30px;
	padding-bottom: 20px;
}

.page-head h1,
.chapter-title {
	font-size: var(--size-36);
	line-height: 1.09375;
	margin-bottom: 20px;
}

@media (min-width: 40.0625em) {
	.page-head h1,
	.chapter-title {
		font-size: var(--size-48);
		line-height: 1.04166667;
	}
}

/* No measure cap: the lede should use the width it has and wrap only
   when the words actually run out of room, rather than breaking early
   and leaving a column of white space beside it. */
.lede {
	font-size: var(--size-19);
	line-height: 1.31578947;
	margin-bottom: 20px;
	color: var(--black);
}

.page-head__count,
.chapter-byline {
	font-size: var(--size-16);
	color: var(--grey-1);
	margin-bottom: 10px;
}

.page-head__pdf { font-size: var(--size-19); margin-bottom: 10px; }

.chapter-label {
	font-size: var(--size-16);
	font-weight: 700;
	color: var(--grey-1);
	text-transform: none;
	letter-spacing: 0;
	margin-bottom: 5px;
}

/* the inset text pattern: a thick grey rule on the left */
.summary {
	max-width: 38em;
	margin: 20px 0;
	padding: 15px;
	border-left: 10px solid var(--grey-2);
	font-size: var(--size-19);
	font-style: normal;
	color: var(--black);
}

/* ---------- breadcrumb ---------- */

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	font-size: var(--size-16);
}

.breadcrumb li {
	position: relative;
	margin-right: 10px;
	padding-left: 14px;
}

.breadcrumb li:first-child { padding-left: 0; }

/* the chevron separator */
.breadcrumb li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -3px;
	border: solid var(--grey-1);
	border-width: 1px 1px 0 0;
	transform: rotate(45deg);
}

.breadcrumb a { color: var(--black); text-decoration: underline; }
.breadcrumb a:visited { color: var(--black); }
.breadcrumb a:hover { color: var(--dark-blue); }
.breadcrumb a:focus { color: var(--black); }

/* ---------- the reading column ---------- */

.chapter-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	padding-bottom: 50px;
}

@media (min-width: 48.0625em) {
	.chapter-body {
		/* The text column is capped by its measure and the rail takes
		   what is left, rather than both being a ratio of the container.
		   A 2fr/1fr split makes the reading column shrink and grow with
		   the window, which is what the measure exists to prevent. */
		grid-template-columns: minmax(0, 38em) minmax(14rem, 1fr);
		gap: 30px;
		align-items: start;
	}
}

.prose {
	max-width: 38em;
	grid-row: 1;
}

.prose p {
	font-size: var(--size-19);
	line-height: 1.31578947;
	margin-bottom: 20px;
}

/* no drop cap in this system */
.prose > p:first-of-type::first-letter {
	float: none;
	font-size: inherit;
	line-height: inherit;
	padding: 0;
	color: inherit;
	font-weight: inherit;
}

.prose h2 {
	font-size: var(--size-24);
	line-height: 1.11111111;
	margin: 30px 0 15px;
	scroll-margin-top: 20px;
}

@media (min-width: 40.0625em) {
	.prose h2 { font-size: var(--size-27); line-height: 1.11111111; }
}

.prose h2:target { background: var(--yellow); }

.anchor { display: none; }

.prose p > strong:first-child { font-weight: 700; }

.prose blockquote {
	margin: 20px 0;
	padding: 15px;
	border-left: 10px solid var(--grey-2);
	color: var(--black);
}

.prose blockquote p {
	font-size: var(--size-19);
	margin-bottom: 0;
}

.prose em { font-style: italic; }

/* ---------- contents, as a related-items sidebar ---------- */

.toc {
	grid-row: 2;
	border-top: 2px solid var(--blue);
	padding-top: 15px;
}

@media (min-width: 48.0625em) {
	.toc {
		grid-row: 1;
		grid-column: 2;
		position: static;
		max-height: none;
		overflow: visible;
		border-top: 2px solid var(--blue);
		border-left: 0;
		padding-left: 0;
	}
}

.toc__heading {
	font-size: var(--size-19);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--black);
	margin-bottom: 15px;
}

.toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}

.toc li { margin-bottom: 10px; }

.toc a {
	display: inline;
	font-size: var(--size-16);
	line-height: 1.25;
	color: var(--blue);
	text-decoration: underline;
	border: 0;
	padding: 0;
	margin: 0;
}

.toc a:visited { color: var(--purple); }
.toc a:hover { color: var(--dark-blue); }

.toc a[aria-current="true"] {
	color: var(--black);
	font-weight: 700;
}

/* ---------- the shelf and chapter lists ---------- */

/* ---------- the shelf, as notification banners ----------
 *
 * The Design System's notification banner gives each book a strong
 * edge: a 5px blue border with the title in a solid blue bar above a
 * white body. That is the visual treatment only. The real component
 * carries role="region" and aria-labelledby so assistive technology
 * announces it as an important notice, which would be wrong for seven
 * books on a shelf, so the markup stays an ordinary list of links.
 */

.shelf {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	display: block;
}

.shelf__item {
	margin-bottom: 30px;
	border: 0;
}

.shelf__item:first-child { border-top: 0; }

.shelf__item a {
	display: block;
	padding: 0;
	background: var(--white);
	border: 5px solid var(--blue);
	border-radius: 0;
	text-decoration: none;
	color: var(--black);
}

.shelf__item a:hover { background: var(--white); }

.shelf__item a:focus {
	background: var(--white);
	box-shadow: none;
	outline: 3px solid var(--yellow);
	outline-offset: 0;
}

/* the banner header: the title, reversed out of blue */
.shelf__item h2 {
	margin: 0;
	/* the padding grows with the type so the bar keeps its proportions */
	padding: 8px 15px 12px;
	background: var(--blue);
	color: var(--white);
	font-size: calc(var(--size-19) * 2);
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.shelf__item a:hover h2 { color: var(--white); text-decoration: underline; }
.shelf__item a:focus h2 { color: var(--white); }

/* the banner body */
/* The notification banner sets its heading in bold, which is right for
   a one-line alert but heavy for a sentence of description. */
.shelf__subtitle {
	margin: 0;
	padding: 15px 15px 0;
	font-size: var(--size-19);
	font-weight: 400;
	line-height: 1.31578947;
	color: var(--black);
}

.shelf__meta {
	margin: 0;
	padding: 10px 15px 15px;
	font-size: var(--size-16);
	color: var(--grey-1);
}

.shelf__meta .dot { margin: 0 .4em; }
.page-head__count .dot { margin: 0 .4em; }

/* a book with no subtitle still needs the body to breathe */
.shelf__item h2 + .shelf__meta { padding-top: 15px; }

/* A list of chapters is navigation, not prose, so it takes the full
   container. The reading measure below stays on .prose, where line
   length actually affects reading. */
.chapter-list {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: block;
}

.chapter-list li {
	border-bottom: 1px solid var(--grey-2);
}

.chapter-list li:first-child {
	border-top: 1px solid var(--grey-2);
}

.chapter-list a {
	display: flex;
	gap: 20px;
	align-items: baseline;
	padding: 12px 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--blue);
	text-decoration: underline;
}

.chapter-list a:hover { background: var(--grey-3); color: var(--dark-blue); }
.chapter-list a:focus { background: var(--yellow); color: var(--black); box-shadow: none; }

.chapter-list .name { font-weight: 400; }

.chapter-list .mins {
	margin-left: auto;
	flex-shrink: 0;
	font-size: var(--size-16);
	color: var(--grey-1);
	text-decoration: none;
}

.chapter-list a:focus .mins { color: var(--black); }

/* ---------- notes and footers ---------- */

.note {
	font-size: var(--size-16);
	color: var(--grey-1);
	margin-bottom: 20px;
}

.note code {
	font-family: ui-monospace, "Courier New", monospace;
	background: var(--grey-3);
	padding: 2px 4px;
	border-radius: 0;
	font-size: .9em;
}

.chapter-foot {
	padding: 20px 0;
	border-top: 1px solid var(--grey-2);
	font-size: var(--size-16);
	color: var(--grey-1);
}

.site-footer {
	margin-top: 30px;
	padding: 25px 0;
	border-top: 10px solid var(--blue);
	background: var(--grey-3);
}

.site-footer__inner {
	display: block;
	max-width: none;
}

/* The reading measure applies to the text of a chapter, not to a
   single line of footer copy: capped at 38em it broke over two lines
   with a wide empty column beside it. */
.site-footer__note,
.site-footer__meta {
	font-size: var(--size-16);
	color: var(--black);
	margin-bottom: 15px;
}

.site-footer__meta { margin-bottom: 0; color: var(--grey-1); }

/* ---------- print ---------- */

@media print {
	.site-header,
	.site-footer,
	.toc,
	.breadcrumb,
	.style-picker,
	.skip { display: none !important; }

	body { font-size: 12pt; color: #000; }
	.wrap { max-width: none; padding: 0; }
	.chapter-body { display: block; }
	.prose { max-width: none; }
	a { color: #000; }
}

/* The footer is a single band across the page, so its two lines are
   centred in it rather than hanging off the left edge. */
.site-footer__inner { text-align: center; }