/* Book pages, new layout (fragments/book/page.php, includes/book-layout.php). 2026 redesign on the
   rebuilt pages' look: Work Sans 900 headings, Roboto body, Lora italic lede, #EAF6FF hero wash,
   coral buy button with dark text. Everything is scoped to .bk2 so the old layout is untouched. */

.bk2 { font-family: Roboto, sans-serif; color: #282828; }
.bk2 *, .bk2 *::before, .bk2 *::after { box-sizing: border-box; }
.bk2 a { color: #1f6fb2; }
.bk2 a:hover, .bk2 a:focus-visible { color: #154f80; }
.bk2-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.bk2-wrap--narrow { max-width: 860px; }
.bk2-center { text-align: center; }
.bk2-h2 { margin: 0 0 16px; font-family: 'Work Sans', sans-serif; font-weight: 900; font-size: 24px; line-height: 1.2; color: #282828; }
.bk2-muted { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: #585858; }
.bk2-small { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: #585858; }
.bk2-stars { color: #c2410c; letter-spacing: 1px; }
.bk2-section { padding-top: 40px; }
/* WordPress Additional CSS (wp-custom-css) forces p { margin: 20px 0 !important; line-height: 1.7 !important }
   site-wide, so paragraph spacing inside the layout has to be pinned with !important too. */
.bk2 p { margin: 0 !important; line-height: 1.5 !important; }
.bk2 p.bk2-muted { margin: 0 0 12px !important; }
.bk2 p.bk2-small { margin: 12px 0 0 !important; }
.bk2 .bk2-faq__a p { margin: 0 0 8px !important; line-height: 1.6 !important; font-size: 15px; }
.bk2 .bk2-review__text p { font-size: 15px; } /* theme p size leaked into FAQ answers and video captions */
.bk2 p.bk2-sub { line-height: 1.55 !important; }
.bk2 .bk2-h2 { margin: 0 0 16px !important; }
/* Header menu links (#price, #inside, #reviews, #faqs) land below the fixed desktop header. */
.bk2 [id] { scroll-margin-top: calc(var(--bk2-hdr, 0px) + 16px); }

/* Hero. The site header is fixed (90px) on desktop only; the page script measures it when it is fixed. */
.bk2 { padding-top: var(--bk2-hdr, 0px); }
@media (min-width: 1025px) { .bk2 { padding-top: var(--bk2-hdr, 90px); } }
.bk2-hero { background: linear-gradient(180deg, #EAF6FF 0%, #ffffff 100%); padding: 20px 0 8px; }
.bk2-hero__grid { display: flex; flex-wrap: wrap; gap: 20px 56px; align-items: flex-start; }
.bk2-hero__media { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.bk2-hero__info { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.bk2-hero__cover { display: block; width: 100%; max-width: 460px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; }
.bk2-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 460px; }
.bk2-thumbs--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.bk2-thumbs a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid #dbe4ec; }
.bk2-thumbs img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.bk2-chip { align-self: flex-start; padding: 3px 12px; border-radius: 999px; background: #fff; border: 1px solid #cfe3f5; font-size: 13px; font-weight: 700; color: #1f6fb2; }
.bk2 .bk2-title { margin: 0; font-family: 'Work Sans', sans-serif; font-weight: 900; font-size: 26px; line-height: 1.15; color: #282828; }
.bk2-sub { margin: 0; font-family: Lora, serif; font-style: italic; font-size: 17px; line-height: 1.55; color: #585858; }
.bk2-meta { margin: 0; font-size: 14px; line-height: 1.5; color: #585858; }

/* Phones: the cover sits beside the edition chip and title (as in the approved mockup), so the options
   and Buy stay near the top. The info column's children join the hero grid (display: contents). */
@media (max-width: 767px) {
	.bk2-hero__grid { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px 14px; align-items: center; }
	.bk2-hero__info { display: contents; }
	.bk2-hero__media { grid-column: 1; grid-row: 1 / span 2; }
	.bk2-hero__cover { width: 104px; border-radius: 12px; }
	.bk2-hero__media .bk2-thumbs { display: none; }
	.bk2-hero__info > .bk2-chip { grid-column: 2; grid-row: 1; align-self: end; justify-self: start; }
	.bk2-hero__info > .bk2-title { grid-column: 2; grid-row: 2; align-self: start; font-size: 21px; }
	.bk2-hero__info > :not(.bk2-chip):not(.bk2-title) { grid-column: 1 / -1; }
}

/* Options as cards (EDD's own form and radios; output from bots_book_layout_option_output). EDD's
   edd.min.css sets every span in price options to inline (.edd_download_purchase_form .edd_price_options span),
   so these selectors carry span. to outrank it. */
.bk2 .bk2-buybox .edd_download_purchase_form { margin: 4px 0 0; display: flex; flex-direction: column; gap: 12px; }
.bk2 .edd_price_options { margin: 0; }
.bk2 .edd_price_options ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bk2 .edd_price_options ul li { margin: 0; }
.bk2 .edd_price_options ul li label { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid #c9d3dc; border-radius: 12px; background: #fff; cursor: pointer; font-size: 0; line-height: 0; letter-spacing: 0; color: #282828; }
.bk2 .edd_price_options ul li.is-selected label, .bk2 .edd_price_options ul li label:has(input:checked) { border: 2px solid #1f6fb2; background: #F4FAFF; padding: 13px; }
.bk2 .edd_price_options input[type="radio"] { flex: none; margin: 2px 0 0; width: 20px; height: 20px; accent-color: #1f6fb2; -webkit-appearance: radio; appearance: auto; border: 0; }
.bk2 .edd_price_options input[type="radio"]::before { display: none; }
.bk2 .edd_price_options input[type="radio"]:focus-visible { outline: 2px solid #1f6fb2; outline-offset: 2px; }
.bk2 .edd_price_options span.bk2-opt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-family: Roboto, sans-serif; font-size: 15px; line-height: 1.4; }
.bk2 .edd_price_options span.bk2-opt__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.bk2 .edd_price_options span.bk2-opt__top .edd_price_option_name { font-family: Roboto, sans-serif; font-weight: 700; font-size: 16px; line-height: 1.35; color: #282828; margin: 0; }
.bk2 .edd_price_options span.bk2-opt__top .edd_price_option_price { font-family: Roboto, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.35; color: #1f6fb2; margin: 0; white-space: nowrap; }
.bk2 .edd_price_options span.bk2-opt__desc { display: block; font-size: 14px; line-height: 1.45; color: #585858; }
.bk2 .edd_price_options span.bk2-opt__badge { display: inline-block; align-self: flex-start; margin-top: 2px; padding: 3px 10px; border-radius: 999px; font-size: 12px; line-height: 1.3; font-weight: 700; white-space: nowrap; }
.bk2 .edd-option-tag, .bk2 .radio-wrapper, .bk2 .content-wrapper { display: none; }

/* Buttons */
.bk2 .bk2-buybox .edd-submit.button, .bk2-btn--buy { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 10px; background: #FE8B7B; box-shadow: none; color: #1F2937; font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.2; text-decoration: none; text-shadow: none; cursor: pointer; }
.bk2 .bk2-buybox .edd-submit.button:hover, .bk2-btn--buy:hover { background: #f97a68; color: #1F2937; border: 0; }
.bk2 .bk2-buybox .edd-submit.button:focus-visible, .bk2-btn:focus-visible { outline: 3px solid #1f6fb2; outline-offset: 2px; }
.bk2 .bk2-buybox .edd_go_to_checkout { background: #1f6fb2; color: #fff; }
.bk2 .bk2-buybox .edd-no-js { display: none !important; } /* the store's no-script fallback button */
.bk2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: 16px; text-decoration: none; }
.bk2-btn--ghost { border: 2px solid #1f6fb2; color: #1f6fb2; background: #fff; }
.bk2-hero__info > .bk2-btn--ghost { width: 100%; }

.bk2-trust { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.4; color: #585858; }
.bk2-trust li { display: flex; gap: 8px; align-items: center; }
.bk2-trust svg { flex: none; }
/* Audience slot: drivers-ed stays a box, the course offer is a quiet line (Astra: keep it secondary). */
.bk2 .bk-course { margin: 4px 0 0; }
.bk2 .bk-course:not(.bk-course--drivers-ed) { border: 0; background: none; padding: 0; }
.bk2 .bk-course:not(.bk-course--drivers-ed) .bk-course__text { display: inline; color: #585858; }
.bk2 .bk-course:not(.bk-course--drivers-ed) .bk-course__link { margin-left: 4px; }
/* The hero's See sample pages button sits right above the drivers-ed note: no second link there. */
.bk2 .bk-course--drivers-ed .bk-course__link { display: none; } /* the text and link sit inline */

/* What you get */
.bk2-get { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 14px; }
.bk2-get li { display: flex; gap: 12px; align-items: flex-start; }
.bk2-get img { width: 36px; height: 36px; flex: none; object-fit: contain; }
.bk2-get p { margin: 0; font-size: 15px; line-height: 1.5; }

/* What's inside */
.bk2-inside { margin-top: 40px; padding: 28px 0; background: #F7FAFC; }
.bk2-inside__grid { display: flex; flex-wrap: wrap; gap: 24px 40px; }
.bk2-inside__grid > div { flex: 1 1 420px; min-width: 0; }
.bk2-inside__grid > .bk2-inside__proof { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; }
.bk2-inside__proof .bk2-btn, .bk2-inside__proof .bk2-video, .bk2-inside__proof .bk2-video .wistia_embed { display: flex; width: 100%; }
.bk2-list { margin: 0 0 8px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.4; }
.bk2-more { margin: 0 0 12px; }
.bk2-more summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: #1f6fb2; cursor: pointer; }
.bk2-more[open] summary { margin-bottom: 8px; }

/* Reviews */
.bk2-reviews { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 14px; }
.bk2-nowrap { white-space: nowrap; }
.bk2-review { margin: 0; padding: 16px; border: 1px solid #E8E8E8; border-radius: 12px; }
.bk2-review blockquote { margin: 0; font-size: 15px; line-height: 1.55; }
.bk2-review figcaption { margin-top: 8px; font-size: 14px; color: #585858; }
.bk2-review__title { margin: 0 0 4px; font-weight: 700; }
.bk2-review .bk2-stars { margin: 0 0 6px; }
.bk2-review--video { padding: 0; overflow: hidden; }
.bk2-review__thumb { position: relative; display: block; }
.bk2-review__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bk2-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: #FE8B7B; }
.bk2-play::after { content: ''; position: absolute; left: 22px; top: 17px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #1F2937; }
.bk2-review--video .bk2-review__text { padding: 12px 16px; font-size: 15px; }

/* FAQ (native details/summary: keyboard and screen readers work without script) */
.bk2-faq details { border-top: 1px solid #E8E8E8; }
.bk2-faq details:last-child { border-bottom: 1px solid #E8E8E8; }
.bk2-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 12px 0; font-weight: 700; font-size: 16px; cursor: pointer; }
.bk2-faq summary::-webkit-details-marker { display: none; }
.bk2-faq summary::after { content: '+'; flex: none; font-size: 22px; color: #1f6fb2; }
.bk2-faq details[open] summary::after { content: '\2212'; }
.bk2-faq__a { padding: 0 0 14px; font-size: 15px; line-height: 1.6; color: #3F3F3F; }
.bk2-faq__a p { margin: 0 0 8px; }

/* Publisher line (replaces the old layout's trust strip, which sat off-centre on wide screens) */
.bk2 p.bk2-publisher { margin: 0 auto !important; padding: 20px; max-width: 860px; font-size: 14px; color: #585858; text-align: center; }

/* Final buy section */
.bk2-final { margin-top: 48px; padding: 32px 0; background: #EAF6FF; }
.bk2-final .bk2-btn--buy { max-width: 380px; margin: 8px auto 0; }
.bk2-choice { margin: 0; font-size: 15px; color: #3F3F3F; }

/* Sticky buy bar: phones and tablets, after the hero's buy box scrolls away */
.bk2-sticky { display: none; }
@media (max-width: 1024px) {
	.bk2-sticky:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; gap: 10px; align-items: center; padding: 8px 12px; background: #fff; border-top: 1px solid #cfe3f5; box-shadow: 0 -4px 12px rgba(0, 0, 0, .06); }
	.bk2-sticky__what { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.3; color: #3F3F3F; }
	.bk2-sticky .bk2-btn--buy { flex: 0 0 auto; width: auto; min-height: 48px; font-size: 16px; padding: 10px 16px; }
}

@media (min-width: 768px) {
	.bk2-hero { padding: 48px 0 32px; }
	.bk2 .bk2-title { font-size: 40px; }
	.bk2-sub { font-size: 19px; }
	.bk2-h2 { font-size: 32px; }
	.bk2-section { padding-top: 56px; }
	.bk2-get { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.bk2-get li { padding: 20px; border: 1px solid #E8E8E8; border-radius: 14px; }
	.bk2-reviews { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
	.bk2-inside { margin-top: 56px; padding: 40px 0; }
	.bk2-hero__info > .bk2-btn--ghost { width: auto; align-self: flex-start; }
}
@media (min-width: 1100px) {
	.bk2-get { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bk2-get li { flex-direction: column; }
}
