/* ==========================================================================
   Explore the Bible (Batch 11, Sept 2026). The pages also carry body.svc-faith,
   so boxes, headings, buttons and spacing come from faith.css; this file only
   adds what is new: the bookshelf, the book cards, the facts row, the
   previous/next links and the reference style.
   ========================================================================== */

/* ---------- The bookshelf (front page) ---------- */
body.svc-bible #Content .svc-bible-shelf-wrap {
	margin: 1.5rem 0 2.5rem;
}
body.svc-bible #Content .the_content_wrapper p.svc-bible-shelf-info {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem 1rem;
	min-height: 2.2em;
	margin: 0 0 .75rem;
	max-width: none;
}
body.svc-bible #Content .svc-bible-shelf-info__name {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1.1;
	color: var(--f-ink);
}
body.svc-bible #Content .svc-bible-shelf-info__meta {
	font-size: var(--svc-fs-sm, .9375rem);
	color: var(--f-muted);
}
body.svc-bible #Content .svc-bible-shelf-scroll {
	overflow-x: auto;
	padding: 10px 0 4px;
	-webkit-overflow-scrolling: touch;
}
body.svc-bible #Content .svc-bible-shelf {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	width: max-content;
	min-width: 100%;
	padding: 0 6px;
	box-sizing: border-box;
	border-bottom: 6px solid var(--f-bronze-deep);
}
body.svc-bible #Content .svc-bible-shelf__gap {
	flex: 0 0 18px;
}
body.svc-bible #Content .svc-bible-spine {
	flex: 1 0 11px;
	max-width: 15px;
	display: block;
	border-radius: 3px 3px 0 0;
	background: var(--spine, var(--f-bronze));
	opacity: .55;
	cursor: default;
	transition: transform .3s var(--f-ease), opacity .3s ease;
}
body.svc-bible #Content .svc-bible-spine.is-ready {
	opacity: 1;
	cursor: pointer;
	box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35);
}
body.svc-bible #Content .svc-bible-spine:hover,
body.svc-bible #Content .svc-bible-spine:focus-visible,
body.svc-bible #Content .svc-bible-spine.is-current {
	transform: translateY(-6px);
	opacity: 1;
}
body.svc-bible #Content .svc-bible-spine:focus-visible {
	outline: 2px solid var(--f-bronze-deep);
	outline-offset: 2px;
}
body.svc-bible #Content .the_content_wrapper p.svc-bible-shelf-labels {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	max-width: none;
	margin: .5rem 0 0;
	font-family: var(--f-label);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--f-muted);
}
body.svc-bible #Content ul.svc-bible-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.1rem;
	margin: .9rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .8125rem;
	color: var(--f-muted);
}
body.svc-bible #Content ul.svc-bible-legend li {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	padding: 0;
}
body.svc-bible #Content ul.svc-bible-legend li::before {
	display: none;
}
body.svc-bible #Content ul.svc-bible-legend i {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: var(--spine);
}

/* ---------- Book cards (front page) ---------- */
body.svc-bible #Content a.svc-bible-card,
body.svc-bible #Content a.svc-bible-card:hover {
	text-decoration: none !important;   /* the theme underlines every content link, which ran through the whole card */
	color: inherit;
}
body.svc-bible #Content .svc-bible-card__kind {
	font-family: var(--f-label);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--f-bronze-deep);
}
body.svc-bible #Content .svc-bible-card__title {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.15;
	color: var(--f-ink);
}
body.svc-bible #Content .svc-bible-card__lede {
	font-size: var(--svc-fs-sm, .9375rem);
	line-height: 1.55;
	color: var(--f-muted);
	flex: 1 1 auto;
}
body.svc-bible #Content .svc-bible-card__more {
	font-weight: 600;
	font-size: var(--svc-fs-sm, .9375rem);
	color: var(--f-bronze-deep);
	border-top: 1px solid var(--f-stone);
	padding-top: .6rem;
	margin-top: .25rem;
}
body.svc-bible #Content a.svc-bible-card:focus-visible {
	outline: 2px solid var(--f-bronze-deep);
	outline-offset: 3px;
}
body.svc-bible-landing #Content .the_content_wrapper > .svc-faith-answer,
body.svc-bible-landing #Content .the_content_wrapper > .svc-faith-believe {
	margin-top: 2rem;
}

/* ---------- Book pages: the line under the title at lede size (the article column resets paragraphs to 16px) ---------- */
body.svc-bible-book #Content .the_content_wrapper p.svc-np-lede {
	font-size: var(--svc-fs-lede, 1.125rem);
	line-height: 1.6;
	color: var(--f-ink);
	max-width: none;
}

/* ---------- Group tiles (front page, once many guides are published) ---------- */
body.svc-bible #Content .svc-bible-group {
	border-top: 4px solid var(--spine, var(--f-bronze));
}
body.svc-bible #Content .svc-bible-group h2.svc-faith-tile__title {
	margin: 0;
}

/* ---------- Facts row (book pages) ---------- */
body.svc-bible #Content dl.svc-bible-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
	gap: 0;
	margin: 1.5rem 0 .5rem;
	padding: 0;
	border-top: 1px solid var(--f-stone);
	border-bottom: 1px solid var(--f-stone);
	position: relative;
}
body.svc-bible #Content dl.svc-bible-facts::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 64px;
	height: 3px;
	background: var(--spine, var(--f-bronze));
}
body.svc-bible #Content dl.svc-bible-facts > div {
	padding: .9rem 1rem .9rem 0;
}
body.svc-bible #Content dl.svc-bible-facts dt {
	margin: 0 0 .2rem;
	font-family: var(--f-label);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--f-muted);
}
body.svc-bible #Content dl.svc-bible-facts dd {
	margin: 0;
	font-size: var(--svc-fs-sm, .9375rem);
	line-height: 1.45;
	color: var(--f-ink);
}

/* ---------- References (Reftagger turns them into links with an ESV pop-up) ---------- */
body.svc-bible #Content .svc-bible-ref,
body.svc-bible #Content a.rtBibleRef {
	font-weight: 600;
	color: var(--f-bronze-deep);
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* on the dark "How it points to Jesus" box the bronze-deep reference is too dark - use the soft bronze
   (specific enough to beat new-pages.css "#Content .the_content_wrapper a:not(...):not(...):not(...)") */
body.svc-bible.svc-np #Content .the_content_wrapper .svc-faith-believe .svc-bible-ref,
body.svc-bible.svc-np #Content .the_content_wrapper .svc-faith-believe a.rtBibleRef.rtBibleRef {
	color: var(--f-bronze-soft);
}

/* ---------- Previous / next ---------- */
body.svc-bible #Content .svc-bible-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1rem;
	align-items: center;
	margin: 2.5rem 0 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--f-stone);
	font-weight: 600;
}
body.svc-bible #Content .svc-bible-nav > span:last-child {
	text-align: right;
}
body.svc-bible #Content .svc-bible-nav a {
	color: var(--f-bronze-deep);
	text-decoration: none;
}
body.svc-bible #Content .svc-bible-nav a:hover,
body.svc-bible #Content .svc-bible-nav a:focus-visible {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	body.svc-bible #Content .svc-bible-spine {
		transition: none;
	}
}