/* ===============================================================
   HeartFelt Kids Bible, built to Rick's approved Bible page.
   Developer Bible v1.0, sections 13, 14, and 15.
   =============================================================== */

/* ---------------------------------------------------------------
   1. Hero
   --------------------------------------------------------------- */

.bhero { position: relative; }

.bhero__art { line-height: 0; }

/* The slot writes its ratio inline, so an override has to outrank it. */
.bhero__art .art { aspect-ratio: 16 / 9 !important; }
.bhero__art .art__img { image-rendering: auto; }

.bhero__art .art,
.bhero__art img { width: 100%; display: block; }

/*
 * A soft cream veil is laid over the top of the picture, which is what the
 * page had before and what Vince asked for back. It settles the artwork
 * behind the words and keeps the title readable whatever is painted there.
 * The strength is one number, so it is easy to change.
 */
.bhero {
	--bhero-veil: 0.94;
}

.bhero__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	padding: var(--space-16) 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba( 255, 250, 240, var( --bhero-veil ) ) 0%,
		rgba( 255, 250, 240, calc( var( --bhero-veil ) * 0.64 ) ) 46%,
		rgba( 255, 250, 240, 0 ) 82%
	);
}

.bhero__overlay > .container { width: 100%; }

.bhero__copy { text-align: center; }

/*
 * On a phone the note sits below the picture, in normal flow. From the wide
 * layout up it lifts onto the artwork, where Rick's page puts it.
 */
.bhero__aside {
	background: var(--sky-soft);
	padding: var(--space-16) 0 4px;
}

.bhero__aside-inner { display: flex; justify-content: center; }

.bhero__title {
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: clamp(30px, 5.4vw, 58px);
	line-height: 1.1;
	color: var(--navy);
	margin: 0 0 6px;
	text-shadow:
		0 0 14px rgba(255, 255, 255, 0.95),
		0 0 7px rgba(255, 255, 255, 0.95),
		0 0 3px rgba(255, 255, 255, 0.9),
		0 2px 0 rgba(255, 255, 255, 0.9);
}

.bhero__lead {
	font-size: clamp(17px, 2.2vw, 26px);
	font-weight: var(--w-bold);
	color: #2C4867;
	margin: 0;
	text-shadow:
		0 0 12px rgba(255, 255, 255, 0.95),
		0 0 6px rgba(255, 255, 255, 0.95),
		0 0 3px rgba(255, 255, 255, 0.9),
		0 2px 0 rgba(255, 255, 255, 0.9);
}

.bhero__note {
	max-width: 320px;
	padding: 14px 16px;
	background: #FFFDF7;
	border-radius: var(--radius-lg);
	box-shadow: 0 6px 18px rgba(18, 59, 109, 0.18);
}

.bhero__note-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: 20px;
	color: var(--navy);
	margin: 0 0 6px;
}

.bhero__note-body {
	font-size: var(--t-adult-size);
	line-height: 1.5;
	color: var(--body);
	margin: 0;
}

/* ---------------------------------------------------------------
   2. The six places
   --------------------------------------------------------------- */

.btiles {
	position: relative;
	z-index: 2;
	padding-bottom: var(--space-24);
}

.btiles__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.btile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 10px;
	text-align: center;
	text-decoration: none;
	border-radius: var(--radius-lg);
	box-shadow: 0 3px 10px rgba(18, 59, 109, 0.12);
	transition: transform var(--ease), box-shadow var(--ease);
}

.btile:hover  { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(18, 59, 109, 0.18); }
.btile:active { transform: translateY(0); }
.btile:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

.btile--sky      { background: #EFF5FC; }
.btile--gold     { background: #FDF6E6; }
.btile--heart    { background: #FDF0F1; }
.btile--lavender { background: #F4F0FB; }
.btile--forest   { background: #F0F7F1; }

.btile__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
}

.btile__name {
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: 17px;
	line-height: 1.2;
	color: var(--navy);
}

.btile__blurb {
	font-size: 14px;
	line-height: 1.35;
	color: #3F5C79;
	max-width: 20ch;
}

/* ---------------------------------------------------------------
   3. Bible Stories: list, reader, side rail
   --------------------------------------------------------------- */

.bstories { padding-bottom: var(--space-32); }

.bstories__panel {
	background: #FFFDF7;
	border: var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-16);
	box-shadow: 0 4px 14px rgba(18, 59, 109, 0.08);
}

.bstories__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding-bottom: var(--space-16);
}

.bstories__title {
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: var(--t-h2-size);
	line-height: 1.15;
	color: #1B588F;
	margin: 0 0 2px;
}

.bstories__lead {
	font-size: 15px;
	color: var(--body);
	margin: 0;
}

/* Filters */

.bfilters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.bfilters__field { display: block; }
.bfilters__field--search { flex: 1 1 200px; }

.bfilters__select,
.bfilters__input {
	width: 100%;
	min-height: 44px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--navy);
	background: #FFFFFF;
	border: 2px solid var(--line);
	border-radius: var(--pill);
}

.bfilters__select:focus-visible,
.bfilters__input:focus-visible,
.bfilters__go:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

.bfilters__input::placeholder { color: #5E7590; }

.bfilters__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	background: #EAF2FB;
	border: 2px solid var(--line);
	border-radius: var(--pill);
	cursor: pointer;
}

.bfilters__go:hover { background: #DCEAF8; }

/* Layout of the three columns */

.bstories__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-16);
}

/* Story list */

.blist { display: flex; flex-direction: column; gap: 10px; }

.blist__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.blist__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	text-decoration: none;
	color: var(--navy);
	font-weight: var(--w-bold);
	font-size: 15px;
	line-height: 1.25;
	background: #F7F3E9;
	border-radius: var(--radius);
	min-height: 48px;
}

.blist__item:hover { background: #EFE7D6; }
.blist__item:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

.blist__item.is-current {
	background: #1B588F;
	color: #FFFFFF;
}

.blist__thumb {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	overflow: hidden;
	line-height: 0;
}

.blist__name { min-width: 0; }

.blist__empty {
	font-size: 15px;
	color: var(--body);
	margin: 0;
	padding: 10px;
}

.blist__all {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 16px;
	text-align: center;
	text-decoration: none;
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: 17px;
	color: #FFFFFF;
	background: #2069C6;
	border-radius: var(--radius);
}

.blist__all:hover { background: #1B588F; }
.blist__all:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* ---------------------------------------------------------------
   The reader
   --------------------------------------------------------------- */

.reader {
	background: #FFFFFF;
	border: 2px solid var(--line);
	border-radius: var(--radius-lg);
	padding: var(--space-16);
}

.reader__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-bottom: var(--space-16);
}

.reader__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: #EAF2FB;
	border-radius: 12px;
}

.reader__id { flex: 1 1 180px; min-width: 0; }

.reader__title {
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.15;
	color: #1B588F;
	margin: 0;
}

.reader__ref {
	font-size: 15px;
	font-weight: var(--w-bold);
	color: #3F5C79;
	margin: 2px 0 0;
}

.reader__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rbtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 14px;
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: 15px;
	border: 0;
	border-radius: var(--pill);
	cursor: pointer;
}

.rbtn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

.rbtn--read  { background: #1F7A44; color: #FFFFFF; }
.rbtn--read:hover { background: #186236; }
.rbtn--self  { background: #F5C443; color: #5A3A00; }
.rbtn--self:hover { background: #EAB52E; }
.rbtn--print { background: #FBD8DB; color: #8C1F2A; }
.rbtn--print:hover { background: #F5C3C8; }

.rbtn[aria-pressed="true"] { box-shadow: inset 0 0 0 3px rgba(18, 59, 109, 0.45); }

.reader__example {
	margin: 0 0 var(--space-16);
	padding: 10px 12px;
	font-size: 14px;
	color: #5A3A00;
	background: #FDF3D8;
	border-radius: var(--radius);
}

.reader__panels {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-12);
	counter-reset: panel;
}

.panel {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #F7F3E9;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.panel__no {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: 16px;
	color: #FFFFFF;
	background: #2069C6;
	border-radius: 50%;
	box-shadow: 0 2px 5px rgba(18, 59, 109, 0.35);
}

.panel__art { display: block; line-height: 0; }

.panel__body { padding: 12px 14px 46px; }

/* Section 14 asks for large child readable text, one idea per line. */
.panel__line {
	font-size: 17px;
	line-height: 1.55;
	color: #2A3F55;
	margin: 0 0 4px;
}

.panel__line:last-child { margin-bottom: 0; }

.panel__listen {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: #2069C6;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 3px 8px rgba(18, 59, 109, 0.3);
}

.panel__listen:hover { background: #1B588F; }
.panel__listen:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.panel__listen.is-playing { background: #1F7A44; }

/* Read It Myself is the quiet way to read. */
.reader.is-quiet .panel__listen { display: none; }
.reader.is-quiet .panel__body { padding-bottom: 14px; }

/* ---------------------------------------------------------------
   The side rail
   --------------------------------------------------------------- */

.srail { display: flex; flex-direction: column; gap: 10px; }

.scard {
	padding: 12px 14px;
	border-radius: var(--radius-lg);
	text-decoration: none;
}

.scard__head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: 16px;
	color: var(--navy);
	margin: 0 0 8px;
}

.scard__icon { display: flex; align-items: center; }

.scard--talk { background: #F4F0FB; }

.scard__qs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.scard__qs li {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 14px;
	line-height: 1.4;
	color: #3B4A5C;
}

.scard__bullet { flex: 0 0 auto; display: flex; padding-top: 2px; }

.scard--verse { background: #FDF6E6; }

.scard--tiled {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.scard__verse {
	font-size: 15px;
	line-height: 1.5;
	color: #3B4A5C;
	margin: 4px 0 0;
}

/*
 * Rick's page sets each of these on its own white tile, so the picture for
 * the coloring page, the worksheet, the verse, and the song all read as one
 * set. The tile holds an illustration once his artwork arrives; until then
 * it holds the line icon at the same size and in the same place.
 */
.scard__tile {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: #FFFFFF;
	border: 2px solid rgba( 18, 59, 109, 0.10 );
	border-radius: 10px;
	overflow: hidden;
}

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

/* The link cards */

.scard--link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 60px;
	transition: transform var(--ease);
}

.scard--link:hover  { transform: translateY(-3px); }
.scard--link:active { transform: translateY(0); }
.scard--link:focus-visible,
.scard--next:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

.scard--coloring { background: #FDF0F1; }
.scard--activity { background: #F0F7F1; }
.scard--song     { background: #F4F0FB; }

.scard__copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.scard__name {
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: 16px;
	line-height: 1.2;
	color: var(--navy);
}

.scard__note {
	font-size: 13px;
	color: #4A5F77;
}

.scard--next {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 64px;
	background: #123B6D;
	transition: transform var(--ease);
}

.scard--next:hover { transform: translateY(-3px); background: #0E2F58; }

.scard--next .scard__name { color: #FFFFFF; font-size: 19px; }
.scard--next .scard__note { color: #C9DCF2; }

/* ---------------------------------------------------------------
   4. More Stories You'll Love
   --------------------------------------------------------------- */

.bmore { padding-bottom: var(--space-32); }

.bmore__panel {
	background: #FFFDF7;
	border: var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-16);
}

.bmore__title {
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: var(--t-h3-size);
	color: #1B588F;
	margin: 0 0 var(--space-12);
}

.bmore__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.bmore__card {
	display: flex;
	flex-direction: column;
	gap: 7px;
	text-decoration: none;
	transition: transform var(--ease);
}

.bmore__card:hover  { transform: translateY(-4px); }
.bmore__card:active { transform: translateY(0); }
.bmore__card:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

.bmore__art {
	display: block;
	line-height: 0;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 3px 8px rgba(18, 59, 109, 0.14);
}

.bmore__name {
	font-weight: var(--w-bold);
	font-size: 14px;
	line-height: 1.3;
	color: var(--navy);
	text-align: center;
}

.bmore__card--all {
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 96px;
	background: #EAF2FB;
	border-radius: var(--radius);
}

.bmore__all {
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: 16px;
	color: #1B588F;
	text-align: center;
}

/* ---------------------------------------------------------------
   5. Child Reading Promise
   --------------------------------------------------------------- */

.bpromise { padding-bottom: var(--space-section); }

.bpromise__panel {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--space-24);
	text-align: center;
	background: var(--meadow-soft);
	border: var(--border);
	border-radius: var(--radius-lg);
}

.bpromise__title {
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: var(--t-h3-size);
	color: var(--navy);
	margin: 0 0 var(--space-12);
}

.bpromise__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--t-adult-size);
	color: var(--body);
}

/* ---------------------------------------------------------------
   One collection: Old Testament, New Testament, Bible Heroes
   --------------------------------------------------------------- */

.bible-hero--term {
	background: var(--sky-soft);
	padding: var(--space-32) 0;
	text-align: center;
}

.bible-hero__title {
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: var(--t-h1-size);
	line-height: var(--t-h1-lh);
	color: var(--navy);
	margin: 0 0 8px;
}

.bible-hero__lead {
	font-size: var(--t-lead-size);
	color: var(--body);
	margin: 0 auto;
	max-width: 40ch;
}

/* WCAG 2.2 asks for at least 24 by 24; a bare line of text is shorter. */
.bible-back {
	display: inline-block;
	color: #1B588F;
	font-weight: var(--w-bold);
	padding: 3px 0;
	min-height: 24px;
	margin-bottom: var(--space-12);
}

.bible-empty {
	text-align: center;
	font-size: var(--t-lead-size);
	color: var(--body);
	margin: 0;
}

.story-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-24);
}

.story-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	color: var(--navy);
	background: var(--panel);
	border: var(--border);
	border-radius: var(--radius-lg);
	padding: 14px;
	box-shadow: 0 5px 0 #EFE3CD;
	transition: transform var(--ease), box-shadow var(--ease);
}

.story-card:hover  { transform: translateY(-5px); box-shadow: 0 10px 0 rgba(18, 59, 109, 0.13); }
.story-card:active { transform: translateY(0); box-shadow: 0 2px 0 rgba(18, 59, 109, 0.16); }
.story-card:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

.story-card__art { display: block; border-radius: var(--radius); overflow: hidden; }

.story-card__title {
	font-family: var(--font-head);
	font-weight: var(--w-bold);
	font-size: var(--t-h3-size);
	line-height: 1.25;
	color: var(--navy);
}

.story-card__meta { font-size: var(--t-small-size); color: var(--soft); }

.story-card--plain {
	justify-content: center;
	min-height: 120px;
	text-align: center;
}

.bible-pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-16);
	margin-top: var(--space-32);
}

/* WordPress draws these itself, and unstyled they are both too pale and far
   under the 24 by 24 that WCAG 2.2 asks for. */
.bible-pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--pill);
	background: var(--panel);
	border: 2px solid var(--line);
	color: var(--navy);
	font-weight: var(--w-bold);
	text-decoration: none;
}

.bible-pages .page-numbers.current {
	background: #1B588F;
	border-color: #1B588F;
	color: #FFFFFF;
}

.bible-pages .page-numbers:hover { background: var(--sky-soft); color: var(--navy); }
.bible-pages .page-numbers:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.bible-pages .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bible-pages .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }

/* ---------------------------------------------------------------
   Wider screens
   --------------------------------------------------------------- */

@media (min-width: 620px) {
	.btiles__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.reader__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bmore__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bpromise__list { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--space-24); }

	.bstories__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
	.bfilters { flex-wrap: nowrap; }
	.bfilters__field--search { flex: 0 1 230px; }
}

@media (min-width: 1000px) {
	.bhero__art .art { aspect-ratio: 24 / 7 !important; }

	.bhero__overlay { align-items: center; }

	.bhero__aside {
		position: absolute;
		inset: 0;
		background: none;
		padding: 0;
		pointer-events: none;
	}

	.bhero__aside-inner {
		height: 100%;
		align-items: center;
		justify-content: flex-end;
	}

	/* The card is a real card, so clicks and focus must reach it. */
	.bhero__note { pointer-events: auto; }

	/* The row tucks up under the artwork, the way Rick's page draws it. */
	.btiles { margin-top: -18px; }
	.btiles__row { grid-template-columns: repeat(6, minmax(0, 1fr)); }

	.bstories__panel { padding: var(--space-24); }

	.bstories__body {
		grid-template-columns: 210px minmax(0, 1fr) 218px;
		gap: var(--space-16);
		align-items: start;
	}

	.blist__items { grid-template-columns: 1fr; }

	.bmore__row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.story-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------
   Printing a story
   --------------------------------------------------------------- */

@media print {
	.site-header,
	.site-footer,
	.bhero,
	.btiles,
	.bstories__head,
	.blist,
	.srail,
	.bmore,
	.bpromise,
	.reader__controls,
	.panel__listen { display: none !important; }

	.bstories__panel,
	.reader { border: 0; box-shadow: none; padding: 0; }

	.reader__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.panel { break-inside: avoid; background: none; }
}

/* ---------------------------------------------------------------
   Less motion
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.btile,
	.scard--link,
	.scard--next,
	.bmore__card,
	.story-card { transition: none; }

	.btile:hover,
	.btile:active,
	.scard--link:hover,
	.scard--link:active,
	.scard--next:hover,
	.bmore__card:hover,
	.bmore__card:active,
	.story-card:hover,
	.story-card:active { transform: none; }
}