/* ── Guide Pages — Shared Layout ── */

/* ── Hero ── */
.guide-hero {
  background-color: var(--slate);
  background-image: var(--grad-noise), var(--grad-hero-glow);
  padding: 120px 0 var(--sp-8);
  position: relative;
  overflow: hidden;
}
.guide-hero-inner {
  max-width: var(--container-prose-md);
}
.guide-hero .section-label {
  color: var(--orange);
}
.guide-hero h1 {
  color: var(--white);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  /* Was 20px (off-grid) bottom margin; --sp-5 (24px) matches homepage hero
     rhythm 24/48/48 instead of cramped 16/20. The 4px add is intentional:
     it lets the hero subtitle breathe without crowding the H1. */
  margin: var(--sp-4) 0 var(--sp-5);
}
.guide-hero-intro {
  /* Guide hero subtitle on slate — was --stone (~2:1 fail on dark bg). */
  color: var(--on-dark);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  max-width: var(--container-prose-sm);
}

/* ── Meta ── */
.guide-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}
/* Was display:flex with gap:var(--sp-1half) (6px). Items containing
   "<strong>By Holdback</strong> · Independent Automotive Advisory"
   were split into 2 flex items with 6px gap between the bold label
   and the trailing text, breaking the natural sentence flow.
   The PARENT .guide-meta is the row layout (flex with gap between
   items); the items themselves should be inline-flowing text. */
.guide-meta-item {
  font-size: var(--fs-sm);
  /* .guide-hero is always data-bg="slate" — was --ink-2 (#58544F) at 2.4:1 on
     slate (FAIL AA). --on-dark-default is alpha-white at 6:1+ on slate. */
  color: var(--on-dark-default);
}
.guide-meta-item strong {
  /* Was --stone (var(--ink-2)) on slate = 2.1:1 FAIL. --on-dark = white@92% gives
     7:1+ on slate. Strong stays prominent against the muted body. */
  color: var(--on-dark);
}
.guide-verified {
  color: var(--success);
  font-weight: 600;
}

/* ── Body & Layout ── */
.guide-body {
  background: var(--white);
  padding: var(--section-pad);
}
/* Line-length discipline — 65ch optimal reading width. */
.guide-body > p,
.guide-body > ul,
.guide-body > ol,
.guide-body-inner > p,
.guide-body-inner > ul,
.guide-body-inner > ol {
  max-width: 65ch;
}
.guide-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 960px) {
  /* minmax(0, 1fr): see the matching note in blog.css. Without it, embedded
     tables (.holdback-table min-width:600px) push the layout viewport past
     mobile widths and the fixed navbar reports the inflated width. */
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .guide-sidebar { order: -1; }
  .guide-content { min-width: 0; }
}

/* ── Content Typography ── */
/* H2 base — italic-serif § editorial-divider rendered ABOVE each H2
   via ::before. Was a 2px orange bar; the divider treatment is the
   richer brand device (peach § glyph + hairlines on each side) and
   matches the .editorial-divider component used elsewhere on the site.
   Brand-devices audit (2026-05-06) found the divider device deployed
   on only 1 of 26 pages; this architectural upgrade ships it across
   every Tier 1 pillar guide H2 with zero HTML edits. */
.guide-content h2 {
  font-size: var(--fs-xl);
  color: var(--slate);
  margin: var(--sp-7) 0 var(--sp-4);
  /* Audit round-2 2026-05-07: anchor jumps from TOC/in-page links
     landed h2 partly behind the 64-72px fixed nav. 88px clears nav
     plus a 16-24px breathing band. Mirrors .article-body h2 pattern
     (blog.css:179). */
  scroll-margin-top: 88px;
}
.guide-content h2:not(:first-of-type)::before {
  content: '\00a7';   /* § section sign — editorial signature */
  display: block;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--accent-active);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1;
  padding: var(--sp-3) 0;
  margin-bottom: var(--sp-5);
  /* Two horizontal hairlines, one each side of the centered glyph.
     calc(50% - 28px) leaves a 56px gap in the middle for the glyph. */
  background-image:
    linear-gradient(to right, var(--border), var(--border)),
    linear-gradient(to right, var(--border), var(--border));
  background-position: left center, right center;
  background-size: calc(50% - 28px) 1px, calc(50% - 28px) 1px;
  background-repeat: no-repeat;
}
.guide-content h2:first-child {
  margin-top: 0;
}
.guide-content h3 {
  font-size: var(--fs-md);
  color: var(--slate);
  margin: 28px 0 10px;
  scroll-margin-top: 88px;
}
.guide-content p {
  color: var(--body-text);
  font-size: var(--fs-base);
  line-height: 1.8;
  margin-bottom: var(--sp-4);
}
.guide-content ul,
.guide-content ol {
  margin: 0 0 20px 0;
  padding-left: var(--sp-5);
}
.guide-content ul li,
.guide-content ol li {
  color: var(--body-text);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-2);
}
.guide-content strong {
  color: var(--slate);
  font-weight: 600;
}

/* ── Callout Box ── */
.callout-box {
  background: var(--slate);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--card-pad-lg);
  margin: var(--sp-6) 0;
}
.callout-box h3 {
  color: var(--white);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-3);
}
.callout-box p {
  /* Callout body on slate — was --stone (~2:1 fail). */
  color: var(--on-dark);
  font-size: var(--fs-sm);
  margin: 0;
  line-height: 1.65;
}

/* ── Table of Contents ── */
.toc {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.toc-title {
  margin-bottom: 14px;
}
.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.toc ul li {
  margin-bottom: var(--sp-1half);
}
.toc ul li a {
  font-size: var(--fs-sm);
  color: var(--slate);
  text-decoration: none;
  line-height: 1.45;
  display: flex;
  align-items: center;
  /* Audit round-2 2026-05-07: prior padding 3px 0 made the desktop
     hit area ~24-28px tall (WCAG 2.5.5 fail). Mobile-only 44px override
     existed at line 279 but desktop kept failing. min-height across
     all viewports brings every TOC link to compliance. */
  min-height: 44px;
  padding: var(--sp-1) var(--sp-2);
  margin-left: calc(var(--sp-2) * -1);  /* visual edge stays aligned */
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}
.toc ul li a:hover {
  color: var(--orange-text);
  border-color: var(--orange-text);
}

/* ── Sidebar CTA ── */
.guide-sidebar-cta {
  background: var(--slate);
  border-radius: var(--radius-lg);
  padding: var(--card-pad-lg);
  margin-top: var(--sp-5);
  text-align: center;
}
.guide-sidebar-cta h3 {
  color: var(--white);
  font-size: var(--fs-base);
  margin-bottom: 10px;
}
.guide-sidebar-cta p {
  /* Sidebar CTA body on slate — was --stone (~2:1 fail). */
  color: var(--on-dark-default);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
  line-height: 1.6;
}

/* ── Nav Highlights ── */
/* ── Sidebar Utilities ── */
.sidebar-cta-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}
.sidebar-cta-subtext {
  margin-top: 14px;
  font-size: var(--fs-sm);
  margin-bottom: 0;
  color: var(--ink-2);
}

/* ── More Guides ── */
.more-guides-box {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-top: var(--sp-5);
}
.more-guides-label {
  margin-bottom: 10px;
}
.more-guides-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.more-guides-list li {
  margin-bottom: var(--sp-2);
}
.more-guides-list li:last-child {
  margin-bottom: 0;
}
.more-guides-link {
  font-size: var(--fs-sm);
  color: var(--slate);
  text-decoration: none;
  font-weight: 500;
}

/* ── Touch Targets — 44px minimum on mobile (WCAG 2.5.5) ── */
@media (max-width: 768px) {
  /* Was 10px padding only; produced ~34px tap height (FAIL).
     12px + min-height 44 = explicit WCAG 2.2 AA Target Size compliance. */
  .toc ul li a {
    padding: 12px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .toc ul li {
    margin-bottom: 0;
  }

  .more-guides-link {
    display: block;
    padding: 10px 0;
  }

  .more-guides-list li {
    margin-bottom: 0;
  }
}