/* ==========================================================
   Warm western palette for the QA Cowboy guide detail pages.

   Loaded AFTER /promo/promo.css and /guides/guides.css, and only on
   /qacowboy/guides/* pages, so the shared storefront (/promo/, /guides/,
   /qa-guides/) keeps its navy/cyan scheme untouched. These pages are
   token-based, so remapping the brand tokens recolors almost everything;
   the handful of hardcoded navy chrome backgrounds are overridden below.

   Note: the guide preview images are the guides' own navy/cyan artwork and
   cannot be recolored from CSS.
   ========================================================== */
:root {
  --bg-0: #140d07;
  --bg-1: #1c130a;
  --bg-2: #26190d;
  --panel-edge: rgba(217, 168, 99, .18);
  --cyan: #dc9a3c;
  --cyan-2: #ecb15a;
  --cyan-deep: #b57d2e;
  --ink: #f4e9d8;
  --ink-mute: #cdbb9c;
  --ink-dim: #93805f;
  --line: rgba(244, 233, 216, .14);
  --bracket: #6b5227;
}

/* hardcoded navy chrome that does not read from the tokens */
.guides-topbar { background: rgba(20, 13, 7, .82); }
.promo-sticky-bar { background: rgba(20, 13, 7, .94); }
.carousel-btn { background: rgba(20, 13, 7, .55); }
.carousel-btn:hover { background: rgba(20, 13, 7, .8); border-color: rgba(220, 154, 60, .5); }
.carousel-dots { background: rgba(20, 13, 7, .55); }

/* Bundle page: the three-book bundle cover stands in for the preview carousel. */
.bundle-hero { display: flex; justify-content: center; margin: 0 0 clamp(28px, 5vw, 48px); }
.bundle-hero img {
  display: block; width: 100%; max-width: 600px; height: auto; border-radius: 10px;
  border: 1px solid var(--panel-edge); box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
/* Guide pages: the guide's cover alone stands in for the preview carousel.
   Portrait 2:3, so capped narrower than the bundle images. */
.guide-cover-hero { display: flex; justify-content: center; margin: 0 0 clamp(28px, 5vw, 48px); }
.guide-cover-hero img {
  display: block; width: 100%; max-width: 380px; height: auto; border-radius: 8px;
  border: 1px solid var(--panel-edge); box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
/* wide variant: a row of guide covers (Complete bundle). Sits outside .wrap
   so it runs wider than the text column: up to 1100px, 16px from the
   screen edges, centred by normal flow. */
.bundle-hero.bundle-hero-wide { box-sizing: border-box; max-width: 1132px; padding: 0 16px; margin: 0 auto clamp(28px, 5vw, 48px); }
.bundle-hero-wide .bh-frame { position: relative; width: 100%; }
.bundle-hero-wide img { max-width: none; }
/* click zones over each cover; positions match bundle-complete-cover.jpg
   (1640x510: covers 300x450 at x = 30, 350, 670, 990, 1310, y = 30) */
.bh-hit {
  position: absolute; top: 5.882%; height: 88.235%; width: 18.293%;
  border-radius: 4px; outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color .15s ease, background-color .15s ease;
}
.bh-hit:nth-of-type(1) { left: 1.829%; }
.bh-hit:nth-of-type(2) { left: 21.341%; }
.bh-hit:nth-of-type(3) { left: 40.854%; }
.bh-hit:nth-of-type(4) { left: 60.366%; }
.bh-hit:nth-of-type(5) { left: 79.878%; }
.bh-hit:hover, .bh-hit:focus-visible { outline-color: var(--cyan); background-color: rgba(255, 255, 255, .06); }