/* ==========================================================================
   Journeyman Electrician — distinct page skin
   Loaded only on /journeyman/*.html, layered after the shared template CSS.
   Palette is intentionally unchanged (reuses --ws-dark-blue / --ws-blue /
   --ws-light-blue from styles.css). Everything else — typography, shapes,
   header/nav pattern, card layouts — is custom so these pages don't read
   as the same off-the-shelf BootstrapMade template used elsewhere.
   ========================================================================== */

:root {
  --bk-navy: var(--ws-dark-blue, #102c53);
  --bk-blue: var(--ws-blue, #0d6efd);
  --bk-sky: var(--ws-light-blue, #67b3ff);
  --bk-navy-deep: color-mix(in srgb, var(--bk-navy) 100%, black 22%);
  --bk-navy-tint: color-mix(in srgb, var(--bk-navy) 10%, white);
  --bk-blue-tint: color-mix(in srgb, var(--bk-blue) 10%, white);
  --bk-line: color-mix(in srgb, var(--bk-navy) 14%, white);
  --bk-ink: #16233c;
  --bk-muted: #5b6b85;
  --bk-radius-sm: 10px;
  --bk-radius: 18px;
  --bk-shadow: 0 20px 45px -24px rgba(16, 44, 83, 0.45);
  --bk-heading-font: "Oswald", var(--heading-font, sans-serif);
}

body.book-theme {
  background: #fbfcfe;
  color: var(--bk-ink);
}

body.book-theme h1,
body.book-theme h2,
body.book-theme h3,
body.book-theme h4,
body.book-theme h5 {
  font-family: var(--bk-heading-font);
  letter-spacing: 0.01em;
  color: var(--bk-navy);
}

body.book-theme a { text-decoration: none; }

body.book-theme .bk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--bk-heading-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bk-blue);
  margin-bottom: 0.6rem;
}

body.book-theme .bk-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--bk-blue);
  display: inline-block;
}

/* -------------------------------------------------------------- Header -- */
body.book-theme #header {
  background: #fff;
  box-shadow: 0 1px 0 var(--bk-line);
  padding: 0;
}

.bk-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
}

.bk-header-top .logo img { max-height: 32px; margin: 0; }

.bk-header-cta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.bk-header-cta a {
  font-family: var(--bk-heading-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.bk-header-cta a .bi { margin-right: 0.4rem; }

.bk-header-cta .bk-btn-ghost {
  color: var(--bk-navy);
  border: 1.5px solid var(--bk-line);
}
.bk-header-cta .bk-btn-ghost:hover { border-color: var(--bk-blue); color: var(--bk-blue); }

.bk-header-cta .bk-btn-solid {
  color: #fff;
  background: var(--bk-navy);
}
.bk-header-cta .bk-btn-solid:hover { background: var(--bk-blue); color: #fff; }

.bk-tabbar-wrap {
  border-top: 1px solid var(--bk-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bk-tabbar-wrap::-webkit-scrollbar { display: none; }

.bk-tabbar {
  display: flex;
  gap: 0.4rem;
  padding: 0.55rem 0;
  width: max-content;
  min-width: 100%;
}

.bk-tabbar a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-family: var(--bk-heading-font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bk-navy);
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

.bk-tabbar a .bi { margin-right: 0.4rem; }
.bk-tabbar a:hover { background: var(--bk-blue-tint); }

/* Higher-specificity + explicit icon rule: the shared template still ships
   legacy `.navmenu .active` / `.navmenu .active i` rules for its old dropdown
   menu, which would otherwise fight this pill's background/text/icon colors. */
body.book-theme .bk-tabbar a.active,
body.book-theme .bk-tabbar a.active:focus {
  background: var(--bk-navy);
  color: #fff;
}
body.book-theme .bk-tabbar a.active i,
body.book-theme .bk-tabbar a.active:focus i {
  background: none;
  color: #fff;
  transform: none;
}

/* The shared template also ships a legacy `.navmenu a:focus` rule (styles.css)
   that sets `padding: 0 2px`. That selector is more specific than `.bk-tabbar a`,
   so it silently wins on focus/click and made the pill shrink. Restore the
   pill padding and swap the browser's default focus ring for one that matches
   the pill instead of clipping it. */
body.book-theme .bk-tabbar a:focus {
  padding: 0.5rem 1.05rem;
  outline: none;
}
body.book-theme .bk-tabbar a:focus-visible {
  outline: 2px solid var(--bk-blue);
  outline-offset: 2px;
}

/* Mobile hamburger nav — book sub-pages only (header.bk-header--sub; the
   root homepage nav is untouched). Also serves as a forced override for the
   shared template's dormant `.navmenu ul` mobile-nav rules (styles.css,
   `@media max-width:1199.98px`): those rules target ANY `ul` inside an
   element named `.navmenu`, and since our tabbar reuses that same class,
   they were silently setting `position:absolute; display:none` on our
   `.bk-tabbar` at any width ≤1199px — the tabbar was invisible there even
   before this feature existed. This block always restores the normal flex
   row (regardless of breakpoint) and only actually hides it in favor of the
   hamburger below 990px. */
body.book-theme header.bk-header--sub .bk-tabbar-wrap {
  position: static;
  z-index: auto;
  padding: 0;
}
body.book-theme header.bk-header--sub .bk-tabbar {
  position: static;
  inset: auto;
  display: flex;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.mobile-nav-toggle {
  display: none;
  font-size: 1.5rem;
  color: var(--bk-navy);
  cursor: pointer;
  line-height: 1;
}

.bk-tabbar-home,
.bk-tabbar-book,
.bk-tabbar-divider { display: none; }

/* Small uppercase label separating the homepage mobile menu's regular nav
   links from the book quick-links appended below them. */
.bk-tabbar-divider span {
  display: block;
  margin-top: 0.5rem;
  padding: 0.6rem 1.05rem 0.4rem;
  font-family: var(--bk-heading-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 55%, transparent);
  border-top: 1px solid color-mix(in srgb, #fff 15%, transparent);
}

@media (max-width: 990px) {
  body.book-theme header.bk-header--sub .bk-header-cta { display: none; }
  body.book-theme header.bk-header--sub .mobile-nav-toggle { display: block; }
  body.book-theme header.bk-header--sub .bk-tabbar-wrap { display: none; }
  body.book-theme header.bk-header--sub .bk-tabbar-home,
  body.book-theme header.bk-header--sub .bk-tabbar-book,
  body.book-theme header.bk-header--sub .bk-tabbar-divider { display: block; }
}

body.mobile-nav-active header.bk-header--sub .bk-tabbar-wrap {
  display: block;
  position: fixed;
  inset: 0;
  top: var(--bk-header-height, 112px);
  background: var(--bk-navy);
  overflow-y: auto;
  z-index: 1040;
}
body.mobile-nav-active header.bk-header--sub .bk-tabbar {
  flex-direction: column;
  width: 100%;
  min-width: 0;
  gap: 0.25rem;
  padding: 1rem;
}
body.mobile-nav-active header.bk-header--sub .bk-tabbar li { width: 100%; }
body.mobile-nav-active header.bk-header--sub .bk-tabbar a {
  width: 100%;
  color: #fff;
  font-size: 1rem;
  padding: 0.9rem 1rem;
  /* The dormant template's `.navmenu a` (styles.css) sets
     justify-content:space-between with no matching override here, which
     splits the icon and label to opposite edges of the full-width row. */
  justify-content: flex-start;
}
body.mobile-nav-active header.bk-header--sub .bk-tabbar a:hover {
  background: color-mix(in srgb, #fff 12%, transparent);
}
/* The dormant `.navmenu a i` (styles.css) also badges every icon into a
   30x30 circle at 12px, which shrinks and swallows them against the navy
   background — reset back to a plain inline icon matching the rest of the
   site's icon+label pattern. */
body.mobile-nav-active header.bk-header--sub .bk-tabbar a i {
  width: auto;
  height: auto;
  font-size: 1.1rem;
  margin-left: 0;
  margin-right: 0.6rem;
  background: none;
  border-radius: 0;
  color: inherit;
}
body.mobile-nav-active header.bk-header--sub .bk-tabbar a.active,
body.mobile-nav-active header.bk-header--sub .bk-tabbar a.active:focus {
  background: var(--bk-blue);
  color: #fff;
}
body.mobile-nav-active header.bk-header--sub .bk-tabbar a.active i,
body.mobile-nav-active header.bk-header--sub .bk-tabbar a.active:focus i {
  background: none;
  color: #fff;
}

/* Overrides the dormant template's `.mobile-nav-active .mobile-nav-toggle`
   (styles.css) which repositions/recolors the icon for its own full-screen
   overlay pattern — ours just sits in the header, unmoved. */
body.book-theme.mobile-nav-active header.bk-header--sub .mobile-nav-toggle {
  position: static;
  color: var(--bk-navy);
  font-size: 1.5rem;
  top: auto;
  right: auto;
  z-index: auto;
}

/* -------------------------------------------------------------- Modals -- *
   Covers #bookCodeModal (access-gate), #timeUpModal, #newTestModal — same
   markup is repeated on every gated page across every book, so styling it
   once here reskins all of them at once. #loadingModal keeps its own
   inline dark/spinner styling untouched (inline style wins over this). */
body.book-theme .modal-content {
  border: none;
  border-radius: var(--bk-radius);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(16, 44, 83, 0.5);
}

body.book-theme .modal-header {
  border-bottom: 1px solid var(--bk-line);
  padding: 1.5rem 1.75rem 1.25rem;
  justify-content: center;
}

body.book-theme .modal-title {
  font-family: var(--bk-heading-font);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.05rem;
  color: var(--bk-navy);
  text-align: center;
}

body.book-theme .modal-body { padding: 1.75rem; }
body.book-theme .modal-body p { color: var(--bk-muted); font-size: 0.92rem; }

body.book-theme #codeTextBox {
  border: 1.5px solid var(--bk-line);
  border-radius: var(--bk-radius-sm);
  padding: 0.65rem 0.9rem;
  font-family: var(--bk-heading-font);
  letter-spacing: 0.05em;
  text-align: center;
  width: 100%;
  max-width: 260px;
}
body.book-theme #codeTextBox:focus {
  outline: none;
  border-color: var(--bk-blue);
  box-shadow: 0 0 0 3px var(--bk-blue-tint);
}

body.book-theme .modal-body a.small {
  color: var(--bk-blue);
  font-weight: 600;
  font-size: 0.85rem;
}

body.book-theme .modal-body .error {
  color: #dc3545;
  font-size: 0.85rem;
  display: block;
}

body.book-theme .modal-footer {
  border-top: 1px solid var(--bk-line);
  padding: 1.25rem 1.5rem;
  background: var(--bk-navy-tint);
}

body.book-theme .modal-footer .btn {
  font-family: var(--bk-heading-font);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.8rem;
  border-radius: 999px;
  border: none;
  padding: 0.65rem 1.2rem;
}

body.book-theme .modal-footer .btn-secondary {
  background: #fff;
  color: var(--bk-navy);
  border: 1.5px solid var(--bk-line);
}
body.book-theme .modal-footer .btn-secondary:hover {
  background: #fff;
  border-color: var(--bk-blue);
  color: var(--bk-blue);
}

body.book-theme .modal-footer .btn-primary {
  background: var(--bk-navy);
  color: #fff;
}
body.book-theme .modal-footer .btn-primary:hover { background: var(--bk-blue); }

/* ---------------------------------------------------------------- Hero -- */
.bk-hero {
  position: relative;
  background: linear-gradient(160deg, var(--bk-navy) 0%, var(--bk-navy-deep) 100%);
  color: #fff;
  padding: 3rem 0 6rem;
  overflow: hidden;
}

.bk-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  padding-top: 60%;
  background: radial-gradient(circle, color-mix(in srgb, var(--bk-sky) 30%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.bk-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 64px;
  background: #fbfcfe;
  clip-path: polygon(0 100%, 100% 100%, 100% 45%, 0 100%);
}

.bk-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: center;
}

@media (max-width: 991.98px) {
  .bk-hero-inner { grid-template-columns: 1fr; }
}

body.book-theme .bk-hero h1 {
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.bk-hero p {
  color: color-mix(in srgb, #fff 82%, transparent);
  font-size: 1.05rem;
  max-width: 46ch;
  margin-bottom: 1.6rem;
}

.bk-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.bk-hero-actions a {
  font-family: var(--bk-heading-font);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.88rem;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.bk-hero-actions .bk-btn-primary { background: var(--bk-sky); color: var(--bk-navy-deep); }
.bk-hero-actions .bk-btn-primary:hover { background: #fff; }
.bk-hero-actions .bk-btn-outline { border: 1.5px solid color-mix(in srgb, #fff 45%, transparent); color: #fff; }
.bk-hero-actions .bk-btn-outline:hover { border-color: #fff; background: color-mix(in srgb, #fff 12%, transparent); }

.bk-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.bk-hero-stats .bk-stat strong {
  display: block;
  font-family: var(--bk-heading-font);
  font-size: 1.6rem;
  color: var(--bk-sky);
  line-height: 1;
}

.bk-hero-stats .bk-stat span {
  font-size: 0.78rem;
  color: color-mix(in srgb, #fff 70%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bk-hero-media {
  position: relative;
  display: flex;
  justify-content: center;
}

.bk-hero-media .bk-hero-card {
  position: relative;
  background: #fff;
  border-radius: var(--bk-radius);
  padding: 1.1rem;
  box-shadow: var(--bk-shadow);
  transform: rotate(-3deg);
  max-width: 300px;
}

.bk-hero-media img { display: block; width: 100%; border-radius: calc(var(--bk-radius) - 8px); }

.bk-hero-media .bk-hero-badge {
  position: absolute;
  bottom: -14px;
  right: -14px;
  background: var(--bk-navy);
  color: #fff;
  font-family: var(--bk-heading-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  box-shadow: 0 10px 20px -8px rgba(16, 44, 83, 0.5);
  transform: rotate(4deg);
}

/* ------------------------------------------------------------- Sections -- */
.bk-section { padding: 4rem 0; }

/* styles.css only defines .py-6 (top+bottom); these pages need a
   bottom-only variant to close out a page without doubling the top gap
   a hero/page-head already provided. */
.bk-pb-6 { padding-bottom: 6rem !important; }
.bk-section-head { max-width: 640px; margin-bottom: 2.5rem; }
.bk-section-head.bk-center { margin-left: auto; margin-right: auto; text-align: center; }

/* -------------------------------------------------------- Feature list -- */
.bk-feature-list { border-top: 1px solid var(--bk-line); }

.bk-feature-row {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 1.6rem 1.25rem;
  border-bottom: 1px solid var(--bk-line);
  transition: background 0.2s ease;
}

.bk-feature-row:nth-child(even) { background: color-mix(in srgb, var(--bk-navy) 3%, white); }
.bk-feature-row:hover { background: var(--bk-blue-tint); }

.bk-feature-num {
  flex: 0 0 auto;
  font-family: var(--bk-heading-font);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--bk-sky);
  width: 3rem;
}

.bk-feature-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--bk-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.bk-feature-body { flex: 1 1 auto; min-width: 0; }
.bk-feature-body h3 { font-size: 1.05rem; text-transform: uppercase; margin-bottom: 0.25rem; }
.bk-feature-body p { color: var(--bk-muted); margin: 0; font-size: 0.95rem; }

.bk-feature-go {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--bk-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bk-navy);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bk-feature-row:hover .bk-feature-go {
  background: var(--bk-navy);
  border-color: var(--bk-navy);
  color: #fff;
}

@media (max-width: 575.98px) {
  .bk-feature-row { gap: 1rem; padding: 1.25rem 0.75rem; }
  .bk-feature-num { display: none; }
  .bk-feature-icon { width: 44px; height: 44px; font-size: 1.05rem; }
  .bk-feature-go { display: none; }
}

/* ------------------------------------------------------------ Plan cards */
.bk-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 767.98px) { .bk-plans { grid-template-columns: 1fr; } }

.bk-plan-card {
  border: 1.5px solid var(--bk-line);
  border-radius: var(--bk-radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bk-plan-card:hover { border-color: var(--bk-blue); box-shadow: var(--bk-shadow); }

.bk-plan-head { display: flex; align-items: center; gap: 1rem; }

.bk-plan-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--bk-navy-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bk-plan-thumb img { width: 100%; height: 100%; object-fit: cover; }

.bk-plan-card h3 { font-size: 1.1rem; text-transform: uppercase; margin: 0; }
.bk-plan-card p { color: var(--bk-muted); margin: 0; font-size: 0.92rem; }

.bk-plan-card .bk-btn-block {
  margin-top: auto;
  text-align: center;
  font-family: var(--bk-heading-font);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: var(--bk-navy);
  color: #fff;
}
.bk-plan-card .bk-btn-block:hover { background: var(--bk-blue); }

/* --------------------------------------------------------------- CTA --- */
.bk-cta {
  background: linear-gradient(135deg, var(--bk-navy) 0%, var(--bk-navy-deep) 100%);
  border-radius: var(--bk-radius);
  color: #fff;
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.bk-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--bk-sky) 20%, transparent), transparent 55%);
}

.bk-cta > * { position: relative; z-index: 1; }

body.book-theme .bk-cta h2 {
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 0.6rem;
}

.bk-cta p { color: color-mix(in srgb, #fff 80%, transparent); margin-bottom: 1.5rem; }

.bk-cta .bk-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  color: var(--bk-navy);
  font-family: var(--bk-heading-font);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
}
.bk-cta .bk-btn-primary:hover { background: var(--bk-sky); }

/* ------------------------------------------------------ Promo/HY banner */
body.book-theme .hy-banner-card,
body.book-theme .hy-banner-link .card {
  border-radius: var(--bk-radius);
}

/* This banner keeps the shared white-on-gradient styling from styles.css;
   the generic heading-color rule above would otherwise darken its <h3>. */
body.book-theme .hy-banner-title {
  color: #fff;
}

/* ---------------------------------------------------------------- Footer */
body.book-theme footer {
  background: var(--bk-navy-deep) !important;
}

/* ============================================================ Test page */
.bk-page-head {
  background: linear-gradient(160deg, var(--bk-navy) 0%, var(--bk-navy-deep) 100%);
  color: #fff;
  padding: 2.75rem 0 4.5rem;
  position: relative;
  overflow: hidden;
}
.bk-page-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 48px;
  background: #fbfcfe;
  clip-path: polygon(0 100%, 100% 100%, 100% 55%, 0 100%);
}
body.book-theme .bk-page-head h1 {
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  margin: 0;
}
.bk-page-head p {
  color: color-mix(in srgb, #fff 80%, transparent);
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* The hero's own title/subtitle sit directly behind #fixed-box once a test
   is running (both share the same dark background) — dimmed via JS so they
   can't peek out from behind it while scrolling. Only the text fades; the
   banner itself (background, padding, wave) stays exactly as it is in
   settings mode. #test-container's own dynamic padding-top (below, driven by
   --bk-fixed-box-height) is what keeps the fixed bar from covering the first
   question — that no longer depends on the hero's size at all. */
.bk-page-head > .container {
  transition: opacity 0.25s ease;
}
.bk-page-head.bk-page-head-dim > .container {
  opacity: 0;
}

/* Spacing comes from margin-bottom (not gap) so a collapsing .bk-step-collapse
   can animate its own margin away instead of leaving a leftover gap. */
.bk-stepper { display: flex; flex-direction: column; margin-top: -3rem; position: relative; z-index: 2; }
.bk-stepper > * { margin-bottom: 1.25rem; }
.bk-stepper > *:last-child { margin-bottom: 0; }

/* Collapsible step wrapper (e.g. "Set time limit", shown only when a timer
   is enabled) — animates open/closed instead of snapping via .hidden. */
.bk-step-collapse {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.3s ease, opacity 0.25s ease, margin-bottom 0.3s ease;
}
.bk-step-collapse-inner { min-height: 0; }
.bk-step-collapse.bk-step-collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  margin-bottom: 0;
  pointer-events: none;
}

.bk-step {
  display: flex;
  gap: 1.1rem;
  background: #fff;
  border: 1.5px solid var(--bk-line);
  border-radius: var(--bk-radius);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--bk-shadow);
}

.bk-step-num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bk-navy);
  color: #fff;
  font-family: var(--bk-heading-font);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bk-step-body { flex: 1 1 auto; min-width: 0; }
.bk-step-body p.bk-step-label {
  font-family: var(--bk-heading-font);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bk-navy);
  margin-bottom: 0.75rem;
}

.bk-step .form-check-input:checked { background-color: var(--bk-blue); border-color: var(--bk-blue); }

.bk-timefield {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bk-navy-tint);
  border-radius: var(--bk-radius-sm);
  padding: 0.4rem 0.6rem;
}
.bk-timefield input {
  border: none;
  background: transparent;
  width: 3.2rem;
  text-align: center;
  font-family: var(--bk-heading-font);
  font-size: 1.1rem;
  color: var(--bk-navy);
}
.bk-timefield input:focus { outline: none; }

.bk-select {
  border: 1.5px solid var(--bk-line);
  border-radius: var(--bk-radius-sm);
  padding: 0.55rem 0.8rem;
  font-family: var(--bk-heading-font);
  color: var(--bk-navy);
  background: #fff;
}

.bk-step .bk-btn-block,
.bk-stepper > .bk-btn-block {
  width: 100%;
  border: none;
  font-family: var(--bk-heading-font);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  background: var(--bk-navy);
  color: #fff;
  text-align: center;
  display: block;
}
.bk-step .bk-btn-block:hover,
.bk-stepper > .bk-btn-block:hover { background: var(--bk-blue); }

/* Fixed-box docks right under the header, styled like an extension of the
   dark .bk-page-head hero behind it (same gradient) instead of a separate
   white card — it stays position:fixed so it reads as one continuous band
   whether the hero is in view or the page has scrolled past it. */
body.book-theme .fixed-box-card {
  background: linear-gradient(160deg, var(--bk-navy) 0%, var(--bk-navy-deep) 100%);
  border: none;
  border-radius: 0;
  box-shadow: var(--bk-shadow);
}
body.book-theme .fixed-box-top {
  margin-top: 4px;
}
body.book-theme #test-container .card {
  border: 1.5px solid var(--bk-line);
  border-radius: var(--bk-radius);
}
@media (max-width: 575.98px) {
  /* The quiz wrapper uses Bootstrap's .px-5 (3rem/48px each side) unconditionally
     — fine on desktop, but on a phone that's a quarter of the viewport width
     eaten by side padding before the question card even starts. */
  body.book-theme #test-container .px-5 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Fixed-box action buttons (Get Results / Start New Test / Return to Settings)
   — scoped to .fixed-box-card (the dark banner itself), not just #fixed-box:
   flashcards.html reuses the "#fixed-box" id for its own unrelated (light-
   background) content wrapper, so id-scoping alone still leaked these dark-
   background colors (white text, transparent fill) onto the flashcards
   Shuffle/Restart buttons. .fixed-box-card only exists on the real dark bar. */
body.book-theme .fixed-box-card .fixed-box-btn {
  font-family: var(--bk-heading-font);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.85rem;
  border-radius: 999px;
  border: none;
}
body.book-theme .fixed-box-card .fixed-box-btn.btn-primary { background: var(--bk-sky); color: var(--bk-navy-deep); }
body.book-theme .fixed-box-card .fixed-box-btn.btn-primary:hover { background: #fff; }
body.book-theme .fixed-box-card .fixed-box-btn.btn-secondary {
  background: transparent;
  color: #fff;
  border: 1.5px solid color-mix(in srgb, #fff 45%, transparent);
}
body.book-theme .fixed-box-card .fixed-box-btn.btn-secondary:hover { border-color: #fff; background: color-mix(in srgb, #fff 12%, transparent); }

.fixed-box-btn .btn-label { margin-left: 0.4rem; }

/* "Start New Test" / "Return to Settings" stay on-screen at every width, but
   below 990px (where this row gets tight — the same breakpoint that used to
   hide "Start New Test" outright) they shrink to round icon-only buttons
   instead of disappearing or wrapping. */
@media (max-width: 990px) {
  #start_new_test_btn .btn-label,
  #reset_test_btn .btn-label {
    display: none;
  }
  #start_new_test_btn,
  #reset_test_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 50%;
  }
  #start_new_test_btn i,
  #reset_test_btn i {
    font-size: 1.3rem;
    line-height: 1;
  }

  /* Keeps its pill shape and label (per earlier request) but should still
     line up height-wise with the round icon buttons next to it. */
  #submit_responses {
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

body.book-theme .fixed-box-top .fw-bolder {
  font-family: var(--bk-heading-font);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, #fff 70%, transparent);
}

/* #pbq_progress ("Scenario X of Y") reuses the .pbq-meta class from the
   scenario cards below (which is styled for a light background) — override
   it here so it reads clearly against the dark fixed-box gradient. */
body.book-theme #fixed-box .pbq-meta {
  font-family: var(--bk-heading-font);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: #fff;
}
body.book-theme #countdown,
body.book-theme #results {
  font-family: var(--bk-heading-font);
  color: #fff;
  font-weight: 600;
}

/* #results-wrap sits below the action buttons and only appears once a score
   exists, so it expands/collapses via the same .bk-step-collapse mechanic
   used for the "Set time limit" step (see .bk-stepper rules above). Centering
   is done here with flex (rather than relying on inherited text-align through
   several grid/block ancestors) so it's reliably centered regardless of
   upstream layout, and spacing lives on the inner content, not the collapse
   wrapper itself, so it collapses away to nothing rather than leaving a
   stray gap. A thin top divider separates it from the buttons above. */
#results-wrap .bk-step-collapse-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fixed-box-results {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
  padding: 1.75rem 0;
  border-top: 1px solid color-mix(in srgb, #fff 15%, transparent);
}
body.book-theme .fixed-box-results .fw-bolder {
  font-family: var(--bk-heading-font);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, #fff 70%, transparent);
}
body.book-theme #results {
  color: var(--bk-sky);
  font-size: 1.9rem;
}

/* ------------------------------------------------------- Quiz content -- *
   #quiz is filled in by the shared js/test.js (and reused by pbq-test.js /
   reading-test.js for standard multiple-choice) — same class names across
   every book, so styling them once here reskins every quiz sitewide. */
body.book-theme .question-container {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--bk-line);
}
body.book-theme .question-container:first-child { padding-top: 0; }
body.book-theme .question-container:last-child { border-bottom: none; padding-bottom: 0; }

body.book-theme .question {
  font-family: var(--bk-heading-font);
  font-weight: 600;
  color: var(--bk-navy);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin-bottom: 1.1rem;
}

body.book-theme .answers { gap: 0.6rem; }

body.book-theme .answers .form-check-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1.5px solid var(--bk-line);
  border-radius: var(--bk-radius-sm);
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
body.book-theme .answers .form-check-label:hover {
  border-color: var(--bk-blue);
  background: var(--bk-blue-tint);
}
body.book-theme .answers .form-check-label:has(:checked) {
  border-color: var(--bk-navy);
  background: var(--bk-navy-tint);
}

body.book-theme .answers .form-check-input {
  margin-top: 0.2rem;
  accent-color: var(--bk-navy);
  flex-shrink: 0;
}

body.book-theme .answers .letter {
  font-family: var(--bk-heading-font);
  color: var(--bk-navy);
}

body.book-theme .feedback {
  border-radius: var(--bk-radius-sm);
  border: none;
  margin-top: 1rem;
}

body.book-theme .feedback-valuation {
  font-family: var(--bk-heading-font);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

body.book-theme .hint {
  font-size: 0.9rem;
  color: var(--bk-ink);
  margin-top: 0.5rem;
}

/* ======================================================== Flashcards === */
.bk-fc-wrap { padding-top: 1rem; }

/* flashcards.css hard-codes a 300x300 card sized for short text, and its
   "middle-center" class is inert (align-content needs a flex/grid box, but
   the face is display:block) — real flashcard content is often long-form
   and was overflowing the box. Give the card room, center properly, and
   make overflow scroll internally instead of spilling into the page. */
body.book-theme {
  --card-width: min(92vw, 380px);
  --card-height: min(70vh, 420px);
}

body.book-theme .flip-card {
  margin-left: auto;
  margin-right: auto;
}

body.book-theme .flip-card-face {
  border: 1.5px solid var(--bk-line);
  box-shadow: var(--bk-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 1.5rem;
}

body.book-theme .flip-card-face h3 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
}

body.book-theme .flip-card-front { background: #fff; }
body.book-theme .flip-card-back { background: var(--bk-navy); }

/* The base heading-color rule targets #front/#back directly (they're <h3>
   elements) — that direct match wins over inheriting from the parent's
   color, `!important` on the parent notwithstanding. Target the text
   itself instead. */
body.book-theme #front { color: var(--bk-navy) !important; }
body.book-theme #back { color: #fff !important; }

.bk-fc-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 640px;
  margin: 1.5rem auto 0;
}

.bk-fc-toolbar .btn-fcards {
  border-radius: 999px !important;
  font-family: var(--bk-heading-font);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.82rem;
  padding: 0.6rem 1.2rem !important;
  width: 168px;
}

/* Forces a line break after Turn Card and after Next (paired with the
   .bk-fc-break spacer divs in the toolbar markup), so the toolbar always
   groups as Turn Card / Previous+Next / Shuffle+Restart instead of wrapping
   wherever the row happens to run out of width. */
.bk-fc-toolbar .bk-fc-break {
  flex-basis: 100%;
  height: 0;
}

/* Toolbar buttons — use the site's own navy/sky/white palette instead of
   Bootstrap's default green/blue/gray. */
.bk-fc-toolbar .btn-fcards.btn-success {
  background: var(--bk-navy);
  border-color: var(--bk-navy);
  color: #fff;
}
.bk-fc-toolbar .btn-fcards.btn-success:hover {
  background: color-mix(in srgb, var(--bk-navy) 85%, white);
  border-color: color-mix(in srgb, var(--bk-navy) 85%, white);
  color: #fff;
}
.bk-fc-toolbar .btn-fcards.btn-primary {
  background: var(--bk-sky);
  border-color: var(--bk-sky);
  color: var(--bk-navy);
}
.bk-fc-toolbar .btn-fcards.btn-primary:hover {
  background: color-mix(in srgb, var(--bk-sky) 70%, white);
  border-color: color-mix(in srgb, var(--bk-sky) 70%, white);
  color: var(--bk-navy);
}
.bk-fc-toolbar .btn-fcards.btn-secondary {
  background: #fff;
  border: 1.5px solid var(--bk-navy);
  color: var(--bk-navy);
}
.bk-fc-toolbar .btn-fcards.btn-secondary:hover {
  background: color-mix(in srgb, var(--bk-navy) 8%, white);
  border-color: var(--bk-navy);
  color: var(--bk-navy);
}

#cardSideText {
  font-family: var(--bk-heading-font);
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  color: var(--bk-blue);
}

#cardCounter { color: var(--bk-muted); }

/* ==================================================== Download page ==== */
.bk-file-list { display: flex; flex-direction: column; gap: 0.9rem; }

.bk-file-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1.5px solid var(--bk-line);
  border-radius: var(--bk-radius);
  padding: 1rem 1.25rem;
  background: #fff;
  flex-wrap: wrap;
}

.bk-file-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--bk-navy-tint);
  color: var(--bk-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.bk-file-name {
  flex: 1 1 160px;
  font-family: var(--bk-heading-font);
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--bk-navy);
}

.bk-file-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.bk-file-actions button {
  font-family: var(--bk-heading-font);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.78rem;
  border-radius: 999px;
  padding: 0.5rem 1rem;
}

@media (max-width: 575.98px) {
  .bk-file-card { padding: 0.9rem; }
  .bk-file-name { flex-basis: 100%; }
}

/* Download-in-progress modal (#loadingModal) — was the old template's flat
   black overlay + generic Bootstrap spinner-border; rebuilt to match. */
body.book-theme .bk-loading-content {
  background: linear-gradient(160deg, var(--bk-navy) 0%, var(--bk-navy-deep) 100%);
  border-radius: var(--bk-radius);
  border: none;
  color: #fff;
  text-align: center;
  padding: 1rem;
}

body.book-theme .bk-loading-spinner {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0.5rem auto 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--bk-sky);
}

body.book-theme .bk-loading-spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, #fff 22%, transparent);
  border-top-color: var(--bk-sky);
  animation: bk-spin 0.85s linear infinite;
}

@keyframes bk-spin {
  to { transform: rotate(360deg); }
}

body.book-theme .bk-loading-text {
  font-family: var(--bk-heading-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.92rem;
  margin: 0;
}

/* ================================================= High-Yield 100+ ===== */
.bk-hy-hero {
  background: linear-gradient(160deg, var(--bk-navy) 0%, var(--bk-navy-deep) 100%);
  color: #fff;
  padding: 3rem 0 2.5rem;
  text-align: center;
}
body.book-theme .bk-hy-hero h1 { color: #fff; text-transform: uppercase; font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.bk-hy-hero p { color: color-mix(in srgb, #fff 82%, transparent); font-size: 1.05rem; }

.bk-hy-stats { display: flex; justify-content: center; gap: 2.5rem; margin-top: 1.75rem; flex-wrap: wrap; }
.bk-hy-stats .bk-stat strong { display: block; font-family: var(--bk-heading-font); font-size: 1.7rem; color: var(--bk-sky); }
.bk-hy-stats .bk-stat span { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in srgb, #fff 70%, transparent); }

.bk-panel {
  border: 1.5px solid var(--bk-line);
  border-radius: var(--bk-radius);
  background: #fff;
  padding: 2rem;
}

.bk-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 767.98px) { .bk-feature-grid { grid-template-columns: 1fr; } }

/* Homepage "Why Choosing Us" wants 3 columns on desktop instead of the
   default 2 — used to be a hardcoded inline `style="grid-template-columns:
   repeat(3, 1fr)"` on that one element, which (being inline) always won over
   the responsive rules above and forced 3 cramped columns even on phones. */
.bk-feature-grid--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991.98px) { .bk-feature-grid--3col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { .bk-feature-grid--3col { grid-template-columns: 1fr; } }

.bk-feature-card {
  border: 1.5px solid var(--bk-line);
  border-left: 4px solid var(--bk-blue);
  border-radius: var(--bk-radius-sm);
  padding: 1.4rem;
  background: #fff;
}
.bk-feature-card-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.bk-feature-card .bk-feature-icon { width: 44px; height: 44px; font-size: 1.1rem; }
.bk-feature-card h3 { font-size: 1rem; text-transform: uppercase; margin-bottom: 0; }
.bk-feature-card p { color: var(--bk-muted); font-size: 0.92rem; margin: 0; }

.bk-email-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bk-navy-tint);
  color: var(--bk-navy);
  font-family: var(--bk-heading-font);
  font-weight: 600;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-size: 1.05rem;
}

.bk-faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 767.98px) { .bk-faq-grid { grid-template-columns: 1fr; } }
.bk-faq-grid h5 { font-size: 0.95rem; text-transform: uppercase; color: var(--bk-navy); margin-bottom: 0.35rem; }
.bk-faq-grid p { color: var(--bk-muted); font-size: 0.92rem; margin: 0; }

.bk-benefit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.bk-benefit-list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--bk-ink);
}
.bk-benefit-list li i { color: var(--bk-blue); margin-top: 0.2rem; }

/* ============================================== Download-ready page ==== */
.bk-download-hero {
  background: linear-gradient(160deg, var(--bk-navy) 0%, var(--bk-navy-deep) 100%);
  color: #fff;
  padding: 3.5rem 0;
  text-align: center;
}
body.book-theme .bk-download-hero h1 { color: #fff; text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.bk-download-hero p { color: color-mix(in srgb, #fff 82%, transparent); max-width: 52ch; margin: 0.75rem auto 1.75rem; }

.bk-success-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: color-mix(in srgb, var(--bk-sky) 25%, transparent);
  color: #fff;
  font-family: var(--bk-heading-font);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.bk-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bk-sky);
  color: var(--bk-navy-deep);
  font-family: var(--bk-heading-font);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.95rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
}
.bk-download-btn:hover { background: #fff; color: var(--bk-navy-deep); }

/* ============================================== Video pages (Mindshift, =
   Systema-14 use the same grid — content, not layout, differs) ========== */
.bk-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.75rem;
}

.bk-video-card {
  border: 1.5px solid var(--bk-line);
  border-radius: var(--bk-radius);
  background: #fff;
  padding: 1.25rem;
  box-shadow: var(--bk-shadow);
}

.bk-video-card h4 {
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.bk-video-card .ratio {
  border-radius: calc(var(--bk-radius) - 6px);
  overflow: hidden;
}

/* ============================================================ PBQ / ===
   Reading Test — the shared #quiz-rendered scenario markup (pbq-test.css)
   is left untouched; only the settings/nav chrome around it is skinned. */
body.book-theme .pbq-nav-buttons button {
  font-family: var(--bk-heading-font);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.82rem;
  border-radius: 999px;
  padding: 0.6rem 1.3rem;
}

body.book-theme .pbq-scenario-box { border-radius: var(--bk-radius-sm); }
body.book-theme .pbq-feedback-card { border-radius: var(--bk-radius-sm); }

/* ============================================================ Root ====
   Homepage-only components (index.html) — same design language, bigger
   compositions since this page introduces the whole catalog. ========== */
.bk-home-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(16,44,83,0.55) 0%, rgba(16,44,83,0.88) 70%, var(--bk-navy-deep) 100%), url("../assets/img/home/main.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  padding: 8rem 0 4rem;
}

body.book-theme .bk-home-hero h1 {
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.1;
  max-width: 16ch;
}

.bk-home-hero p {
  color: color-mix(in srgb, #fff 85%, transparent);
  font-size: 1.15rem;
  max-width: 46ch;
  margin-bottom: 1.75rem;
}

.bk-home-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid color-mix(in srgb, #fff 25%, transparent);
}

.bk-home-hero-trust .bk-stat strong { color: #fff; }

/* Mission banner */
.bk-mission {
  background: var(--bk-navy);
  padding: 3.5rem 0;
  text-align: center;
}
body.book-theme .bk-mission h3 {
  color: #fff;
  font-weight: 500;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  max-width: 60ch;
  margin: 0 auto;
  text-transform: none;
  letter-spacing: 0;
}

/* Alternating tools showcase */
.bk-tools-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 3rem 0;
  border-bottom: 1px solid var(--bk-line);
}
.bk-tools-row:last-child { border-bottom: none; }
.bk-tools-row.bk-flip .bk-tools-media { order: 2; }
.bk-tools-row.bk-flip .bk-tools-copy { order: 1; }

.bk-tools-media img {
  border-radius: var(--bk-radius);
  box-shadow: var(--bk-shadow);
  width: 100%;
  display: block;
}

.bk-tools-copy .bk-feature-icon { margin-bottom: 1rem; }
.bk-tools-copy h3 { font-size: 1.4rem; text-transform: uppercase; margin-bottom: 0.75rem; }
.bk-tools-copy p { color: var(--bk-muted); font-size: 1.02rem; }

@media (max-width: 767.98px) {
  .bk-tools-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .bk-tools-row.bk-flip .bk-tools-media,
  .bk-tools-row.bk-flip .bk-tools-copy { order: 0; }
}

/* "How it works" strip above the book grid */
.bk-howto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto 2.5rem;
}

.bk-howto-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bk-navy-tint);
  border-radius: var(--bk-radius-sm);
  padding: 0.9rem 1.1rem;
}

.bk-howto-step p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--bk-ink);
}

@media (max-width: 767.98px) {
  .bk-howto { grid-template-columns: 1fr; }
}

/* Book catalog cards */
.bk-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.75rem;
}

.bk-book-card {
  border: 1.5px solid var(--bk-line);
  border-radius: var(--bk-radius);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.bk-book-card:hover { box-shadow: var(--bk-shadow); transform: translateY(-3px); }

.bk-book-card-img {
  aspect-ratio: 4 / 3;
  background: var(--bk-navy-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bk-book-card-img img { width: 100%; height: 100%; object-fit: cover; }

/* Cover art not uploaded yet for a book — shown instead of a broken-image icon */
.bk-book-card-placeholder {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--bk-navy);
  font-size: 2.5rem;
}

.bk-book-card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.bk-book-card-body h3 { font-size: 1.15rem; text-transform: uppercase; margin: 0; }
.bk-book-card-body p { color: var(--bk-muted); font-size: 0.92rem; margin: 0; }

/* Only the description paragraph absorbs leftover height — this pins the
   CTA/label/icon row to the same position across cards regardless of how
   long each book's description is. */
.bk-book-card-body > p:not(.bk-book-card-icons-label) { flex: 1; }

.bk-book-card-cta {
  align-self: flex-start;
  font-family: var(--bk-heading-font);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  background: var(--bk-navy);
  color: #fff;
}
.bk-book-card-cta:hover { background: var(--bk-sky); }

/* Experimental v2 layout — full-width, centered CTA (comparing against the
   left-aligned pill CTA used by the other book cards for now). */
.bk-book-card-title--center { text-align: center; }

.bk-book-card-cta--block {
  align-self: stretch;
  width: 100%;
  text-align: center;
}
/* The base .bk-book-card-cta:hover rule only touches background — on :hover,
   the global `a:hover` rule (styles.css) has one more selector segment than
   the plain `.bk-book-card-cta` color rule, so it wins the specificity tie
   and repaints the text link-blue, nearly invisible against this button's
   blue hover background. Pin the color explicitly so hover stays legible. */
.bk-book-card-cta--block:hover {
  color: #fff;
}

.bk-book-card-icons-label {
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bk-line);
  font-family: var(--bk-heading-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bk-muted);
}

.bk-book-card-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.bk-book-card-icons a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--bk-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bk-navy);
  font-size: 0.95rem;
}
.bk-book-card-icons a:hover { background: var(--bk-navy); color: #fff; border-color: var(--bk-navy); }

/* Experimental v2 bonus list — one bonus per row instead of an icon grid. */
.bk-bonus-list { display: flex; flex-direction: column; }

.bk-bonus-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--bk-line);
  color: var(--bk-navy);
}

.bk-bonus-item-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--bk-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bk-bonus-item-name { flex: 1; font-size: 0.82rem; font-weight: 600; }

.bk-bonus-item-arrow { color: var(--bk-muted); font-size: 0.85rem; }

.bk-bonus-item:hover .bk-bonus-item-icon { background: var(--bk-navy); color: #fff; border-color: var(--bk-navy); }
.bk-bonus-item:hover .bk-bonus-item-arrow { color: var(--bk-navy); }