/*
Theme Name: Books by LB Williams — Child
Theme URI: https://booksbylbwilliams.com/
Template: lbw-books
Author: HashOne Global
Author URI: https://hashoneglobal.com/
Description: Child theme for Books by LB Williams. This is where all custom CSS and any template overrides belong, so the parent theme can be updated without losing the work. header.php and footer.php are already copied in here and are the ones the site actually uses.
Version: 1.8.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lbw-books-child
*/

/* ==========================================================================
   HOW THIS FILE WORKS
   --------------------------------------------------------------------------
   Three stylesheets load, in this order:

     1. lbw-books/assets/css/style.css        the design system
     2. lbw-books/assets/css/woocommerce.css  shop, cart, checkout, thank-you
     3. THIS FILE                             loaded last, so it always wins

   Put every custom CSS change here. Because it loads last, a plain selector
   is enough — you almost never need !important. The design tokens from the
   parent are all available, so prefer them over raw hex values:

     --navy  --navy-deep  --navy-soft
     --gold  --gold-hi    --gold-deep  --gold-ink
     --red   --red-deep
     --sky   --sky-deep   --sky-wash
     --sun-wash
     --ink   --muted      --line       --paper
     --r-lg  --r-md       --r-sm       --shadow     --hdr

   To change a brand colour everywhere at once, redefine the token rather than
   hunting down each rule — see the :root block below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand tokens
   Uncomment and edit to re-tint the whole site from one place.
   -------------------------------------------------------------------------- */

:root {
	/* --navy: #18245C; */
	/* --gold: #E2AE45; */
	/* --red:  #C7352A; */
}

/* --------------------------------------------------------------------------
   2. Site-specific adjustments
   -------------------------------------------------------------------------- */

/* Keep the sticky header clear of the WordPress admin bar when signed in —
   but only while that bar is actually fixed to the viewport.
   WordPress core (wp-includes/css/admin-bar.css):
     default            #wpadminbar { height: 32px; position: fixed }
     max-width: 782px   #wpadminbar { height: 46px }   (still fixed)
     max-width: 600px   #wpadminbar { position: absolute }
   Below 600px the bar scrolls away with the page, so offsetting the sticky
   header there just leaves a gap at the top with the content showing
   through it. */
body.admin-bar .hdr {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .hdr {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .hdr {
		top: 0;
	}
}

/* The admin bar also offsets in-page jump targets, so scroll a little short
   of them rather than tucking the heading underneath the sticky header. */
:where(h2, h3, [id]) {
	scroll-margin-top: calc(var(--hdr) + 1.5rem);
}

/* --------------------------------------------------------------------------
   3. Inherited "hide this" rules — read before reporting a missing section
   --------------------------------------------------------------------------
   The handed-over design system (lbw-books/assets/css/style.css, in the block
   commented "NEW CSS ADDITION") carries late client revisions that hide things
   outright. If a section looks like it has gone missing, check there first —
   the content is in the page source and in the admin, just hidden:

     p.sig            { display: none }   the handwritten signature, hidden
                                          everywhere EXCEPT inside
                                          section.about-wilbert
     .amazon-box      { display: none }   the second workbook route in the
                                          static markup

   Also, `.medal-explore.edited` hides the medallion ring label and the old
   cover-comparison preview.

   To bring one back, override it here, e.g.

     p.sig { display: block; }

   Two of those hides are gone, because both are editable content now and a
   CSS hide on top of that only makes the field look broken:

     .amazon-box   the second workbook route is a repeater row
                   (Pages → Home → Free workbook). Delete the row to hide it.
     div#bonus     the "Free companion workbook with purchase" banner on the
                   Children's Books page. Clear its heading to hide it
                   (Pages → Children's Books → Workbook banner heading);
                   fill the heading in again to bring it back.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4. Your custom CSS
   Add new rules below this line.
   -------------------------------------------------------------------------- */

/* --- A heading that is a link keeps the heading's colour -----------------
   Book titles on the cards are marked up as <h3><a>…</a></h3>. The design
   system sets the heading colour on the h3, but the anchor inside it was
   picking up the site-wide link rule (a { color: var(--sky-deep) }) and the
   browser's default underline, so every card title rendered mid-blue and
   underlined while every other heading was navy.

   This affects the whole site, not just the shop: the same cards appear on
   Shop, the category archive, related books on a product page, the cart and
   checkout cross-sell, search results and the 404 suggestions — 39 titles
   across ten pages.

   At rest the title now reads as a heading. Hovering or tabbing to it draws
   the gold underline the rest of the site uses for links, so it is still
   obviously clickable. */

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
	text-decoration: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
h1 a:focus-visible,
h2 a:focus-visible,
h3 a:focus-visible,
h4 a:focus-visible,
h5 a:focus-visible,
h6 a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* --- "About the Mr. Wilbert Knows Best Series" reads as a letter ----------
   That block is written in the first person, so it is set in one typeface
   throughout — the body face — rather than mixing the display serif in.
   Two things deliberately stay as they were:

     the section heading above it   still Young Serif, like every other
                                    section title on the site
     the signature                  still the handwriting face, because it is
                                    a signature rather than type

   The tick bullets are untouched. */

section.about-wilbert .author-note {
	font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--navy);
}

/* The letter closes "With love and purpose," with the signature under it, so
   the two sit together rather than reading as separate paragraphs. */
section.about-wilbert .sig-off {
	margin: 1.6rem 0 0;
}

section.about-wilbert p.sig {
	margin-top: 0;
}

/* ==========================================================================
   Client revisions — round 2
   ========================================================================== */

/* --- Home: "Mr. Wilbert Knows Best" — bigger covers, less dead space ------
   The four covers sat in a 4-column grid inside the narrower column, so each
   was only ~120px and the panel had empty bands above and below them. On
   desktop they now fan out and overlap slightly, which lets each cover grow
   to roughly 190–210px in the same width and fill the panel's height.
   Below 980px the panel stacks: four across on tablets, a 2 × 2 grid on
   phones so the covers stay large. */

.series-a .covers {
	gap: clamp(.6rem, 2vw, 1rem);
}

@media (max-width: 599px) {
	.series-a .covers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 420px;
		margin-inline: auto;
		width: 100%;
		gap: 1rem;
	}
}

@media (min-width: 980px) {
	.series-a {
		grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
		gap: clamp(2rem, 3vw, 3rem);
		padding-block: clamp(1.75rem, 2.6vw, 2.5rem);
	}

	.series-a .covers {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0;
		padding: .75rem 0;
	}

	.series-a .covers li {
		position: relative;
		flex: 0 0 27.5%;
		margin-left: -3.3%;
		border-width: 5px;
		box-shadow: 0 22px 36px -16px rgba(15, 24, 64, .55);
	}

	.series-a .covers li:first-child {
		margin-left: 0;
	}

	.series-a .covers li:nth-child(1) { --r: -5deg; z-index: 1; }
	.series-a .covers li:nth-child(2) { --r: -2deg; z-index: 2; transform: rotate(var(--r)) translateY(-10px); }
	.series-a .covers li:nth-child(3) { --r: 2deg;  z-index: 3; transform: rotate(var(--r)) translateY(-10px); }
	.series-a .covers li:nth-child(4) { --r: 5deg;  z-index: 4; }

	.series-a .covers li:hover {
		z-index: 5;
		transform: translateY(-16px) rotate(0) scale(1.04);
	}
}

/* --- Children's Books: one Young Builders section -------------------------
   The "A Trip Earned" feature and the "A Growing Series. A Shared Purpose."
   medallion panel repeated the same book, cover and buy button, so they are
   merged (page-templates/template-childrens-books.php): the book on top, and
   the series intro + medallions as a frosted strip along the bottom of the
   same gradient panel. */

.feature--merged {
	row-gap: clamp(2rem, 3.5vw, 3rem);
}

.feature--merged .yb-series {
	grid-column: 1 / -1;
	display: grid;
	gap: 1.5rem 3rem;
	align-items: center;
	padding: clamp(1.4rem, 3vw, 2.25rem);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .72);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: 0 20px 40px -30px rgba(120, 80, 10, .45);
}

@media (min-width: 980px) {
	.feature--merged .yb-series {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	}
}

.yb-series .eyebrow {
	color: var(--navy);
}

.yb-series__h {
	font-size: clamp(1.5rem, 2.3vw, 2.05rem);
	color: var(--navy-deep);
	margin-bottom: .75rem;
}

.yb-series__copy p {
	color: #3A4366;
	font-size: 1rem;
}

.yb-series__copy p:last-child {
	margin-bottom: 0;
}

.yb-series__medals {
	margin: 0;
}

.yb-series .medal-row .m {
	max-width: 140px;
}

/* The ring label inside each medallion was hidden in the old panel; keep it
   hidden here too (the label is printed underneath). */
.yb-series .medal__disc .to-hide {
	display: none;
}

/* --- 3D book covers: no dark block / cut-off cover on scroll ---------------
   The design system builds each book in real 3D (transform-style:
   preserve-3d): the cover, a page edge turned 90° and a navy back face
   pushed behind it. Chrome has a rendering bug with that setup: after the
   page scrolls, it clips the cover plane short, so the lower part of the
   cover disappears and the navy back face shows as a dark slab under it.
   Reproduced in Chromium; it happened before the Young Builders merge too,
   on every 3D book.

   The book is now drawn flat inside its tilted plane: the whole book still
   turns in perspective (rotateY, plus the hero's pointer tilt), and the page
   edge and back cover are offset in 2D behind the cover so the thickness
   still reads. Visually it matches the 3D version; the clipping cannot
   happen because there is only one plane. */

.b3d__tilt {
	transform-style: flat;
}

.b3d__tilt > img,
.b3d__tilt > .type-art {
	position: relative;
	z-index: 2;
	transform: none;
}

.b3d__tilt > img {
	background: #EFE6D2;
}

/* Page edge, peeking out on the right. */
.b3d__tilt::before {
	z-index: 1;
	top: 5px;
	bottom: 5px;
	right: auto;
	left: calc(100% - 3px);
	width: calc(var(--d) * .55);
	transform: none;
	border-radius: 0 4px 4px 0;
	box-shadow: inset 3px 0 4px -2px rgba(0, 0, 0, .25);
}

/* Back cover, just behind and to the right. */
.b3d__tilt::after {
	z-index: 0;
	transform: translate(calc(var(--d) * .5), 4px);
}

.b3d__shine {
	z-index: 3;
	transform: none;
}

/* --- Forms: mark required fields -------------------------------------------
   Name, email (and the other required answers) were already required by the
   form and by the server, but nothing on the label said so. A red asterisk
   now marks every required field on every form: contact, free PDF, workbook
   request. */

.field:has(> .input[required]) > label::after,
.field:has(> select[required]) > label::after {
	content: " *";
	color: var(--red);
	font-weight: 700;
}

/* --- Self-Help: "The Lie That Loved You" — revamped panel -----------------
   The old layout put the cover in a column of its own beside a tall stack of
   copy-then-form, so the cover floated in empty space and the copy column
   left gaps under the text. The panel is now cover | copy | form on wide
   screens, cover + copy over a full-width form on tablets, and one tidy
   column on phones. Markup: page-templates/template-self-help.php. */

.lie--v2 {
	gap: clamp(1.75rem, 3vw, 2.5rem);
	padding: clamp(1.5rem, 4vw, 3rem);
}

.lie--v2 .lie__cover img {
	width: min(240px, 62vw);
}

.lie--v2 h2 {
	font-size: clamp(2rem, 3vw, 2.75rem);
}

.lie--v2 .lie__sub {
	margin-bottom: 1rem;
}

.lie--v2 .lie__text {
	margin-bottom: 1.1rem;
}

.lie--v2 .lie__quote {
	margin-bottom: 0;
}

.lie--v2 .form-card {
	padding: clamp(1.25rem, 2.4vw, 1.9rem);
}

.lie--v2 .form-card .field {
	margin-bottom: .85rem;
}

.lie--v2 .optin {
	margin-bottom: .9rem;
}

@media (min-width: 760px) {
	.lie--v2 {
		grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
		align-items: center;
	}

	.lie--v2 .lie__cover img {
		width: 100%;
		max-width: 300px;
	}

	.lie--v2 .lie__form {
		grid-column: 1 / -1;
	}

	/* Tablet: heading + intro beside the fields, so the card stays short. */
	.lie--v2 .form-card {
		display: grid;
		grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
		grid-template-rows: auto 1fr;
		gap: .25rem 2rem;
		align-items: start;
	}

	.lie--v2 .form-card > h3,
	.lie--v2 .form-card > p {
		grid-column: 1;
	}

	.lie--v2 .form-card > form {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

@media (min-width: 1100px) {
	.lie--v2 {
		grid-template-columns: minmax(0, .78fr) minmax(0, 1.12fr) minmax(0, 1fr);
		gap: clamp(2rem, 3vw, 3rem);
	}

	.lie--v2 .lie__cover img {
		max-width: 340px;
	}

	.lie--v2 .lie__form {
		grid-column: auto;
	}

	.lie--v2 .form-card {
		display: block;
	}

	.lie--v2 .lie__fields {
		grid-template-columns: 1fr;
	}
}

/* --- About: sub-headers in Title Case, name on one line -------------------
   The eyebrows above each About heading were set in spaced capitals by the
   design system. The client asked for Title Case ("Family Legacy"), so on
   this page they keep their gold colour and weight but drop the all-caps;
   the words themselves are title-cased in functions.php.
   The name in the hero stays on one line at every width (it already did on
   desktop), scaling down on small screens instead of breaking "Williams"
   onto a line of its own. */

.view[data-view="about"] .eyebrow {
	text-transform: none;
	letter-spacing: .04em;
	font-size: .98rem;
}

.ahero h1 {
	white-space: nowrap;
	font-size: clamp(1.6rem, 7.2vw, 3.6rem);
}

@media (min-width: 900px) {
	.ahero h1 {
		font-size: clamp(2.1rem, 3.3vw, 3.6rem);
	}
}

@media (max-width: 899px) {
	.ahero__text {
		width: 100%;
	}
}

/* --- Checkout: young builders attending (workshop seats) -------------------
   Shown only when the cart holds workshop seats — inc/workshop-checkout.php. */

.lbw-yb-fields {
	margin-top: 1.75rem;
	padding: clamp(1.1rem, 2.5vw, 1.6rem);
	border-radius: var(--r-md);
	background: var(--sun-wash);
	border: 1.5px solid #F0D9A4;
}

.lbw-yb-fields h3 {
	color: var(--navy);
	margin-bottom: .25rem;
}

.lbw-yb-fields__note {
	color: var(--muted);
	margin-bottom: .75rem;
}

.lbw-yb-fields__row {
	display: grid;
	gap: 0 1rem;
}

@media (min-width: 600px) {
	.lbw-yb-fields__row {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

.lbw-yb-fields__row .form-row {
	width: auto;
	float: none;
}

.lbw-yb-thanks {
	margin-top: 1.5rem;
}

.lbw-yb-thanks h3 {
	font-size: 1.25rem;
	color: var(--navy);
	margin-bottom: .4rem;
}

/* Thank-you page: "Your seat is reserved" card for workshop orders. */
.thankyou-workshop {
	position: relative;
	overflow: hidden;
	padding: clamp(1.4rem, 3vw, 2rem);
	border-radius: var(--r-md);
	background: radial-gradient(circle at 90% 10%, rgba(246, 210, 122, .28), rgba(246, 210, 122, 0) 45%), linear-gradient(150deg, var(--navy-deep), var(--navy-soft));
	color: #E8EBF6;
}

.thankyou-workshop + .thankyou-workbooks {
	margin-top: 1.25rem;
}

.thankyou-workshop__ico {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: var(--gold-hi);
	margin-bottom: .9rem;
}

.thankyou-workshop__ico svg {
	width: 26px;
	height: 26px;
}

.thankyou-workshop__eyebrow {
	margin: 0;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold-hi);
}

.thankyou-workshop h2 {
	font-size: 1.6rem;
	color: #fff;
	margin: .2rem 0 1rem;
}

.thankyou-workshop__facts {
	display: grid;
	gap: .45rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: .9rem 1rem;
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
}

.thankyou-workshop__facts li {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: .75rem;
	font-size: .98rem;
}

.thankyou-workshop__facts b {
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold-hi);
	padding-top: .2rem;
}

.thankyou-workshop__label {
	margin: 0 0 .4rem;
	font-weight: 700;
	color: #fff;
}

.thankyou-workshop .wb-titles {
	margin-bottom: 1rem;
}

.thankyou-workshop__note {
	color: #D2D8EC;
	font-size: .95rem;
}

/* Thank-you page on small phones: the one-column grid grew to the order
   table's width (~356px on a 320px screen) and the page scrolled sideways.
   Pin it to the screen width; the table then wraps inside. */
.thankyou-grid {
	grid-template-columns: minmax(0, 1fr);
}

.thankyou-grid > * {
	min-width: 0;
}

@media (min-width: 900px) {
	.thankyou-grid {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}
}

@media (max-width: 380px) {
	.order-table th,
	.order-table td {
		padding-left: .6rem;
		padding-right: .6rem;
	}

	.thankyou-workshop__facts li {
		grid-template-columns: 3.6rem 1fr;
		gap: .5rem;
	}
}

/* --- Home: space above the "For grown-ups / Self-Help" panel --------------
   The panel's section is printed with an inline padding-top:0, meant to sit
   under a white section. On Home it follows "Meet LaTasha", which has the
   cream background, so the purple card butted straight against the cream
   edge. After any coloured section it now gets the normal section spacing
   (the same clamp as .sec in the design system). */
.bg-sun + section[aria-labelledby="grow-h"],
.bg-sky + section[aria-labelledby="grow-h"],
.bg-mist + section[aria-labelledby="grow-h"] {
	padding-top: clamp(3.25rem, 5.2vw, 5.5rem) !important;
}