/* ==========================================================================
   Guide layer styles — loaded on /guides/<slug>/ pages via extraHead.
   Re-themed for the paper/pine/amber system. Kept scoped to guide classes
   so it cannot affect any other page type.
   Styles both renderer output (.guide-page, .takeaways, .guide-toc,
   .citations) and authored body_html classes (.guide-answer,
   .guide-takeaways, .guide-body, .guide-answer, .guide-sources).
   ========================================================================== */

.guide,
.guide-page {
  max-width: 820px;
  margin: 0 auto;
}

.guide-hero { margin: 0 0 2rem; }

.guide-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.5rem);
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.guide-hero .lead {
  font-size: 1.12rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.guide-byline {
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-top: 1px solid rgba(29, 42, 34, 0.25);
  border-bottom: 1px solid rgba(29, 42, 34, 0.25);
  padding: 0.6rem 0;
  margin-bottom: 1.25rem;
}

.guide-updated { font-size: 0.85rem; color: var(--ink-soft); }

/* Answer-first block used by authored guide bodies. */

.guide-answer {
  border-left: 4px solid var(--pine);
  background: var(--pine-soft);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}

.guide-answer h2 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pine);
  margin: 0 0 0.4rem;
}

.guide-answer p { margin: 0; font-size: 1.05rem; }

/* Key takeaways — authored (.guide-takeaways) and renderer (.takeaways). */

.guide-takeaways,
.takeaways {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
}

.guide-takeaways h2,
.takeaways h2 { font-size: 1.15rem; margin: 0 0 0.6rem; }

.guide-takeaways ul,
.takeaways ul { margin: 0 0 0 1.1rem; padding-left: 0.4rem; }

.guide-takeaways li,
.takeaways li { margin-bottom: 0.4rem; }

/* Table of contents. */

.guide-toc {
  background: var(--surface);
  border: 2px solid var(--line);
  border-left: 4px solid var(--amber-bright);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
}

.guide-toc h2 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--amber);
  margin: 0 0 0.5rem;
}

.guide-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }

.guide-toc a { font-weight: 500; }

/* Guide body typography — covers authored .guide-body and renderer .guide-content. */

.guide-body h2,
.guide-content h2 {
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 2.25rem 0 0.75rem;
  scroll-margin-top: 5.5rem;
}

.guide-body h3,
.guide-content h3 {
  font-size: 1.1rem;
  font-weight: 650;
  margin: 1.5rem 0 0.5rem;
  scroll-margin-top: 5.5rem;
}

.guide-body p,
.guide-content p { margin: 0 0 1rem; }

.guide-body ul,
.guide-body ol,
.guide-content ul,
.guide-content ol { margin: 0 0 1rem 1.25rem; padding-left: 1rem; }

.guide-body li,
.guide-content li { margin-bottom: 0.4rem; }

.guide-body table,
.guide-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  background: var(--surface);
}

.guide-body th,
.guide-body td,
.guide-content th,
.guide-content td { border: 1px solid var(--line); padding: 0.55rem 0.75rem; text-align: left; }

.guide-body th,
.guide-content th { background: var(--pine-soft); font-weight: 600; }

.guide-body blockquote,
.guide-content blockquote {
  border-left: 4px solid var(--amber-bright);
  background: var(--amber-soft);
  color: var(--ink);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
}

.guide-body img,
.guide-content img { border: 2px solid var(--line); border-radius: var(--radius); }

/* Closing sections. */

.guide-faq,
.guide-related,
.guide-cities,
.guide-more,
.guide-sources,
.citations { margin-top: 2.5rem; }

.guide-faq h2,
.guide-related h2,
.guide-cities h2,
.guide-more h2,
.guide-sources h2,
.citations h2 { font-size: 1.35rem; margin-bottom: 1rem; }

.guide-sources ol,
.citations ul { margin: 0 0 0 1.25rem; font-size: 0.92rem; color: var(--ink-soft); }

.guide-sources li,
.citations li { margin-bottom: 0.5rem; }

.guide-editorial {
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  background: var(--paper-2);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .guide-toc ul { grid-template-columns: 1fr; }
}