/*
Theme Name: Apologetics Library
Theme URI: https://apologeticslibrary.com/
Author: Casey Case
Description: A small block theme for a source-led guide to the evidence for the Bible and the resurrection: a museum catalog and a reading room, set like a well-made library book.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: apologetics-library
*/

/* Colors, type sizes, and spacing live in theme.json. This file holds what theme.json can't
   express. The design borrows from library books and museum labels: cloth binding with gilt
   rules, small capitals, old-style figures, epigraphs, a catalog label, a register, and a
   printed chronology. Square corners, printed rules, no shadows, no motion. */

/* ---------- Type ---------- */

body {
	font-variant-numeric: oldstyle-nums proportional-nums;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
	hanging-punctuation: first;
}
h1, h2, h3, table, .byline, .shelf-meta, .wp-block-footnotes, sup.fn {
	font-variant-numeric: lining-nums proportional-nums;
}
table { font-variant-numeric: lining-nums tabular-nums; }

:where(a):focus-visible,
:where(button, input, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
}
.wp-block-post-content a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}
.wp-block-post-content a:hover { text-decoration-thickness: 2px; }

/* ---------- Masthead and footer: cloth binding with a gilt double rule ---------- */

.site-header,
.site-footer {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--page);
}
.site-header { border-bottom: 5px double var(--wp--preset--color--gilt); }
.site-footer { border-top: 5px double var(--wp--preset--color--gilt); }

.site-header .wp-block-site-title {
	font-variant-caps: small-caps;
	letter-spacing: 0.035em;
}
.site-header .wp-block-navigation {
	font-variant-caps: all-small-caps;
	letter-spacing: 0.07em;
}
.site-header a:hover,
.site-footer a:hover {
	color: var(--wp--preset--color--page);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gilt);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}
.site-header a:focus-visible,
.site-footer a:focus-visible { outline-color: var(--wp--preset--color--page); }
.site-footer a { color: var(--wp--preset--color--page); }
.site-footer .footer-links {
	font-variant-caps: all-small-caps;
	letter-spacing: 0.07em;
	font-size: 1.05rem;
}
.site-footer .footer-small { color: var(--wp--preset--color--blue-soft); font-size: 0.8125rem; margin-top: 1.25rem; }

/* ---------- Short answer: larger type with a run-in label ---------- */

.wp-block-group.is-style-short-answer { margin-bottom: 2rem; }
.wp-block-group.is-style-short-answer p {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
}
.wp-block-group.is-style-short-answer p:first-child::before {
	content: "Short answer";
	font-size: 0.72em;
	font-weight: 650;
	font-style: normal;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--blue);
	margin-right: 0.6em;
}
.al-type-evidence .wp-block-group.is-style-short-answer p:first-child::before { content: "In brief"; }
.al-type-home .wp-block-group.is-style-short-answer p:first-child::before,
.al-type-basic .wp-block-group.is-style-short-answer p:first-child::before { content: none; }

/* ---------- Epigraph: a short quotation at the head of a page ---------- */

.wp-block-quote.is-style-epigraph {
	max-width: 27rem;
	margin: 0.25rem 0 2.25rem auto;
	padding: 0;
	border: 0;
	text-align: right;
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.5;
}
.wp-block-quote.is-style-epigraph p { margin: 0; }
.wp-block-quote.is-style-epigraph cite {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--wp--preset--font-family--serif);
	font-style: normal;
	font-size: 1rem;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
}

/* ---------- Quotations from ancient texts ---------- */

.wp-block-quote:not(.is-style-epigraph) {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--gilt-rule);
	border-bottom: 1px solid var(--wp--preset--color--gilt-rule);
	padding: 1rem 1.5rem;
	font-size: 1.075em;
}
.wp-block-quote:not(.is-style-epigraph) cite {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 0.95rem;
	font-style: normal;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
}

/* ---------- Footnote markers ---------- */

sup.fn { line-height: 0; }
sup.fn a {
	font-size: 0.72em;
	text-decoration: none;
	padding: 0 0.1em;
}
sup.fn + sup.fn::before {
	content: ",";
	font-size: 0.72em;
	color: var(--wp--preset--color--muted);
}

/* ---------- Catalog label: blue rule, gilt hairline, small-capital fields ---------- */

.wp-block-table.is-style-catalog {
	margin: 1.5rem 0 2rem;
	border-top: 6px solid var(--wp--preset--color--blue);
	padding-top: 3px;
}
.wp-block-table.is-style-catalog table {
	border-collapse: collapse;
	width: 100%;
	border-top: 1px solid var(--wp--preset--color--gilt-rule);
	border-bottom: 2px solid var(--wp--preset--color--blue);
}
.wp-block-table.is-style-catalog th,
.wp-block-table.is-style-catalog td {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	padding: 0.6rem 0;
	text-align: left;
	vertical-align: top;
}
.wp-block-table.is-style-catalog tr:first-child th,
.wp-block-table.is-style-catalog tr:first-child td { border-top: 0; }
.wp-block-table.is-style-catalog th {
	width: 9.5rem;
	padding-right: 1rem;
	padding-top: 0.6rem;
	font-size: 1rem;
	font-weight: 600;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--muted);
}

/* ---------- Register: the Evidence index, like a museum's accession register ---------- */

.wp-block-table.is-style-register { margin: 1rem 0 2rem; }
.wp-block-table.is-style-register table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.95rem;
	table-layout: auto;
	border-top: 1px solid var(--wp--preset--color--gilt-rule);
}
.wp-block-table.is-style-register thead { border-bottom: 2px solid var(--wp--preset--color--blue); }
.wp-block-table.is-style-register th {
	border: 0;
	padding: 0.6rem 0.75rem 0.5rem 0;
	text-align: left;
	vertical-align: bottom;
	font-size: 1rem;
	font-weight: 600;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--muted);
}
.wp-block-table.is-style-register td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 0.75rem 0.75rem 0.75rem 0;
	vertical-align: top;
	line-height: 1.4;
}
.wp-block-table.is-style-register td:first-child { font-weight: 600; min-width: 9rem; }
.wp-block-table.is-style-register td:nth-child(2) { min-width: 7.5rem; }
.wp-block-table.is-style-register figcaption {
	text-align: left;
	font-size: 0.875rem;
	font-style: italic;
	color: var(--wp--preset--color--muted);
}

/* ---------- Facing pages: two columns divided by a rule, like an open book ---------- */

.wp-block-columns.is-style-facing {
	gap: 0;
	margin-top: 2.75rem;
	margin-bottom: 2.75rem;
	border-top: 1px solid var(--wp--preset--color--gilt-rule);
	border-bottom: 1px solid var(--wp--preset--color--gilt-rule);
}
.wp-block-columns.is-style-facing > .wp-block-column { padding: 1.5rem 0 1.25rem; }
.wp-block-columns.is-style-facing > .wp-block-column > h2:first-child { margin-top: 0; }
@media (min-width: 782px) {
	.wp-block-columns.is-style-facing > .wp-block-column:first-child { padding-right: 2.5rem; }
	.wp-block-columns.is-style-facing > .wp-block-column + .wp-block-column {
		padding-left: 2.5rem;
		border-left: 1px solid var(--wp--preset--color--rule);
	}
}
@media (max-width: 781px) {
	.wp-block-columns.is-style-facing > .wp-block-column + .wp-block-column { border-top: 1px solid var(--wp--preset--color--rule); }
}

/* ---------- Timeline: a printed chronology ---------- */

.wp-block-list.is-style-timeline {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 2.25rem;
	--tl-date: 9rem;
	--tl-line: 10rem;
}
.wp-block-list.is-style-timeline > li {
	position: relative;
	padding: 0.55rem 0 0.55rem calc(var(--tl-line) + 1.5rem);
	margin: 0;
}
.wp-block-list.is-style-timeline > li::after {
	content: "";
	position: absolute;
	left: var(--tl-line);
	top: 0;
	bottom: 0;
	border-left: 2px solid var(--wp--preset--color--blue);
}
.wp-block-list.is-style-timeline > li:first-child::after { top: 1.1rem; }
.wp-block-list.is-style-timeline > li:last-child::after { bottom: calc(100% - 1.1rem); }
.wp-block-list.is-style-timeline > li::before {
	content: "";
	position: absolute;
	left: calc(var(--tl-line) - 4px);
	top: 0.95rem;
	width: 10px;
	height: 10px;
	background: var(--wp--preset--color--page);
	border: 2px solid var(--wp--preset--color--blue);
	box-sizing: border-box;
	z-index: 1;
}
.wp-block-list.is-style-timeline > li > strong:first-child {
	position: absolute;
	left: 0;
	top: 0.55rem;
	width: var(--tl-date);
	text-align: right;
	font-weight: 600;
	font-variant-caps: all-small-caps;
	font-variant-numeric: lining-nums;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--blue);
}
.wp-block-list.is-style-timeline > li.event::before {
	background: var(--wp--preset--color--gilt-rule);
	border-color: var(--wp--preset--color--gilt-rule);
	transform: rotate(45deg);
}
.wp-block-list.is-style-timeline > li.gap {
	padding-top: 0.15rem;
	padding-bottom: 0.15rem;
	font-size: 0.9rem;
	font-style: italic;
	color: var(--wp--preset--color--muted);
}
.wp-block-list.is-style-timeline > li.gap::before { display: none; }
.wp-block-list.is-style-timeline > li.gap::after {
	border-left-style: dashed;
	border-left-color: var(--wp--preset--color--gilt-rule);
}
@media (max-width: 600px) {
	.wp-block-list.is-style-timeline { --tl-line: 0.25rem; }
	.wp-block-list.is-style-timeline > li { padding-left: 1.75rem; }
	.wp-block-list.is-style-timeline > li > strong:first-child {
		position: static;
		display: block;
		width: auto;
		text-align: left;
	}
}

/* ---------- Phones: both tables stack; the register labels each line by its column ---------- */

@media (max-width: 640px) {
	.wp-block-table.is-style-catalog tr { display: block; border-top: 1px solid var(--wp--preset--color--rule); padding: 0.5rem 0; }
	.wp-block-table.is-style-catalog tr:first-child { border-top: 0; }
	.wp-block-table.is-style-catalog th,
	.wp-block-table.is-style-catalog td { display: block; width: auto; border: 0; padding: 0.1rem 0; }

	.wp-block-table.is-style-register thead { position: absolute; left: -9999px; }
	.wp-block-table.is-style-register table,
	.wp-block-table.is-style-register tbody,
	.wp-block-table.is-style-register tr,
	.wp-block-table.is-style-register td { display: block; width: 100%; }
	.wp-block-table.is-style-register tr { border-bottom: 1px solid var(--wp--preset--color--rule); padding: 0.6rem 0; }
	.wp-block-table.is-style-register td { border: 0; padding: 0.1rem 0; }
	.wp-block-table.is-style-register td:nth-child(2)::before { content: "Date: "; }
	.wp-block-table.is-style-register td:nth-child(3)::before { content: "Where it is now: "; }
	.wp-block-table.is-style-register td:nth-child(4)::before { content: "What it shows: "; }
	.wp-block-table.is-style-register td::before {
		font-weight: 600;
		font-variant-caps: all-small-caps;
		letter-spacing: 0.06em;
		color: var(--wp--preset--color--muted);
	}
}

/* ---------- Shelf: an annotated list, like a library guide ---------- */

.wp-block-post-content h3.wp-block-heading:has(+ .shelf-meta) {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 1.1rem;
	margin-top: 1.4rem;
}
.shelf-meta {
	font-size: 0.95rem;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--muted);
	margin-top: 0.15rem !important;
}

/* ---------- Byline, footnotes, images ---------- */

.byline {
	font-size: 1rem;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
}
.wp-block-footnotes { padding-left: 1.4rem; }
.wp-block-footnotes li { margin-bottom: 0.4rem; }
.wp-block-image img { height: auto; }

.site-footer .footer-small + .footer-small { margin-top: 0.4rem; }

/* ---------- Home: a title page ---------- */

.al-type-home .wp-block-post-content h1.wp-block-heading {
	font-size: clamp(2.4rem, 1.4rem + 3.6vw, 3.6rem);
	line-height: 1.06;
	max-width: var(--wp--style--global--wide-size);
	text-wrap: balance;
}
/* A drop cap opens the first paragraph after the short answer. */
.al-type-home .is-style-short-answer + p::first-letter {
	float: left;
	font-size: 3.6em;
	line-height: 0.82;
	font-weight: 600;
	color: var(--wp--preset--color--blue);
	margin: 0.08em 0.1em 0 0;
}

/* Lists inside facing pages read like a table of contents. */
.wp-block-columns.is-style-facing ul {
	list-style: none;
	padding: 0;
	margin-top: 1rem;
}
.wp-block-columns.is-style-facing li {
	padding: 0.4rem 0;
	border-top: 1px solid var(--wp--preset--color--rule);
}
.wp-block-columns.is-style-facing li:last-child { border-bottom: 1px solid var(--wp--preset--color--rule); }

/* ---------- Object photographs: shown whole, never cropped, with the credit as a caption ---------- */

.wp-block-post-content .wp-block-image { margin: 0.5rem 0 1.75rem; }
.wp-block-post-content .wp-block-image img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 34rem;
	margin: 0 auto;
}
.wp-block-post-content .wp-block-image figcaption {
	margin-top: 0.6rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.45;
	text-align: left;
	color: var(--wp--preset--color--muted);
}
.wp-block-post-content .wp-block-image figcaption a { color: var(--wp--preset--color--muted); }