/* ============================================================
   senior-bridge — Setup Guide (screen stylesheet)
   Pairs with setup-guide-print.css (which is WeasyPrint-only).
   Mobile-first. Constrains the pandoc HTML to readable width.
   ============================================================ */

@media screen {
  html, body {
    background: #fdfaf3;
    color: #2a2520;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
  }

  body {
    margin: 0;
    padding: 2.5rem 1.5rem 4rem;
  }

  /* Pandoc renders the doc as: <header id="title-block-header"> + flat body content.
     Constrain both. */
  #title-block-header,
  body > h1,
  body > h2,
  body > h3,
  body > h4,
  body > p,
  body > ul,
  body > ol,
  body > pre,
  body > blockquote,
  body > hr,
  body > table,
  body > div,
  body > section {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Title block */
  #title-block-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e3d9c2;
  }

  #title-block-header .title {
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #2a2520;
  }

  #title-block-header .subtitle {
    font-style: italic;
    color: #5a544c;
    margin: 0;
  }

  /* Headings */
  h1, h2, h3, h4 {
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    color: #2a2520;
    line-height: 1.25;
  }

  h1 { font-size: 1.9rem; margin: 2.5rem auto 1rem; }
  h2 { font-size: 1.5rem; margin: 2.25rem auto 0.85rem; padding-bottom: 0.4rem; border-bottom: 1px solid #e3d9c2; }
  h3 { font-size: 1.2rem; margin: 1.75rem auto 0.6rem; color: #647557; }
  h4 { font-size: 1.05rem; margin: 1.25rem auto 0.5rem; }

  /* Body copy */
  p, ul, ol, blockquote {
    margin: 0.85rem auto;
  }

  ul, ol { padding-left: 1.5rem; }
  li { margin: 0.3rem 0; }

  a {
    color: #c9663d;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  a:hover { color: #a85129; }

  strong { color: #2a2520; }

  /* Inline code */
  code {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: #f5efe0;
    padding: 0.1em 0.35em;
    border-radius: 4px;
  }

  /* Blockquotes — used for tone examples */
  blockquote {
    border-left: 3px solid #7a8e6a;
    background: #f5efe0;
    padding: 0.85rem 1.2rem;
    color: #2a2520;
    border-radius: 0 8px 8px 0;
    font-style: italic;
  }
  blockquote p { margin: 0.4rem 0; }
  blockquote p:first-child { margin-top: 0; }
  blockquote p:last-child { margin-bottom: 0; }

  /* Callout boxes — pandoc uses generated divs for ❌ / ✅ sections.
     Match the "what most people write" / "what works better" pattern. */
  hr {
    border: 0;
    border-top: 1px solid #e3d9c2;
    margin: 2rem auto;
  }

  /* Tables (if any) */
  table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem auto;
  }
  th, td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e3d9c2;
    text-align: left;
  }
  th {
    font-weight: 600;
    background: #f5efe0;
  }

  /* Closing link block */
  .closing-link {
    text-align: center;
    margin: 3rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid #e3d9c2;
  }

  /* Small screens: tighten padding */
  @media (max-width: 640px) {
    body { padding: 1.5rem 1rem 3rem; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem; }
    html, body { font-size: 16px; }
  }

  /* Large screens: nudge max-width up slightly */
  @media (min-width: 1024px) {
    body { padding-top: 4rem; }
  }
}