/* Pericopae: shared stylesheet for the generated pages (docs/plans/seo-camada-2-spec-2026-11.md §8).
   <link rel="stylesheet" href="/assets/site.css?v=1"> (absolute path); bump ?v= when this file changes, since
   .htaccess caches text/css for a month. Part 1 = the inline CSS of o-que-e-pericope.html and
   como-ler-novo-testamento-jornadas.html, unchanged. Part 2 = classes for the generated pages; the HTML each
   one expects is in the comment above it. */

/* PART 1: shared with the existing pages */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue-primary: #2563EB;
  --surface: #F0F5FB;
  --background: #F8FAFC;
  --dark-scaffold: #0F172A;
  --text-primary: #1E293B;
  --text-secondary: #334155;
  --text-muted: #64748B;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-primary);
  line-height: 1.7;
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--dark-scaffold);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-inner {
  max-width: 760px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.nav-brand img { height: 40px; width: auto; display: block; }
.nav-cta {
  font-size: 0.9rem; font-weight: 600; color: #fff;
  background: var(--blue-primary); padding: 10px 18px; border-radius: 10px;
  text-decoration: none;
}
.nav-cta:hover { filter: brightness(1.08); }

.article {
  max-width: 760px; margin: 0 auto; padding: 48px 24px 80px;
}
.breadcrumb {
  font-size: 0.85rem; color: var(--text-muted); margin-bottom: 24px;
}
.breadcrumb a { color: var(--blue-primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1.2; color: var(--dark-scaffold); margin-bottom: 16px;
}
.lead {
  font-size: 1.15rem; color: var(--text-secondary); margin-bottom: 32px;
}
h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.45rem; margin: 2.2em 0 0.7em; color: var(--dark-scaffold);
}
h3 { font-size: 1.05rem; margin: 1.5em 0 0.5em; color: var(--text-primary); }
p { margin-bottom: 1em; color: var(--text-secondary); }
ul, ol { margin: 0 0 1.2em 1.25em; color: var(--text-secondary); }
li { margin-bottom: 0.45em; }
a { color: var(--blue-primary); }
.origin-box {
  background: var(--surface); border-left: 4px solid var(--blue-primary);
  padding: 16px 20px; border-radius: 0 12px 12px 0; margin: 1.5em 0;
}
.origin-box strong { color: var(--dark-scaffold); display: block; margin-bottom: 4px; }

.journeys { list-style: none; margin-left: 0; }
.journeys li {
  background: #fff; border: 1px solid #E2E8F0; border-radius: 12px;
  padding: 14px 18px; margin-bottom: 10px;
}
.journeys li strong { color: var(--dark-scaffold); }
.journeys .meta {
  display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px;
}
.journeys.ordered { counter-reset: jornada; }
.journeys.ordered li { padding-left: 52px; position: relative; }
.journeys.ordered li::before {
  counter-increment: jornada; content: counter(jornada);
  position: absolute; left: 16px; top: 16px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue-primary); color: #fff;
  font-size: 0.85rem; font-weight: 600; text-align: center; line-height: 26px;
}
table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.5em;
  font-size: 0.97rem; background: #fff;
}
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #E2E8F0; vertical-align: top; }
th { background: var(--surface); color: var(--dark-scaffold); font-weight: 600; }

.faq details {
  background: #fff; border: 1px solid #E2E8F0; border-radius: 12px;
  padding: 14px 18px; margin-bottom: 10px;
}
.faq summary {
  font-weight: 600; cursor: pointer; color: var(--dark-scaffold);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] summary { margin-bottom: 8px; }
.faq details p { margin-bottom: 0; font-size: 0.98rem; }
.cta-box {
  margin-top: 48px; padding: 32px 28px; border-radius: 16px;
  background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 100%);
  color: #fff; text-align: center;
}
.cta-box h2 { color: #fff; margin-top: 0; font-size: 1.35rem; }
.cta-box p { color: rgba(255,255,255,0.85); }
.cta-box .badge { display: inline-block; margin-top: 12px; }
.cta-box .badge img { height: 56px; }
.related {
  margin-top: 40px; padding-top: 28px; border-top: 1px solid #E2E8F0;
}
.related a {
  display: inline-block; margin: 6px 12px 6px 0; font-weight: 500;
  text-decoration: none;
}
.related a:hover { text-decoration: underline; }
footer {
  border-top: 1px solid #E2E8F0; padding: 28px 24px; text-align: center;
  font-size: 0.9rem; color: var(--text-muted);
}
footer a { color: var(--text-muted); margin: 0 10px; text-decoration: none; }
footer a:hover { color: var(--blue-primary); }
footer p { margin-top: 12px; }  /* inline on the © line of the old pages */

/* PART 2: generated pages */

:root {
  --border: #E2E8F0;
  --blue-text: #1D4ED8;   /* blue for small text on --surface (AA) */
  --warm-bg: #FFF8E7;
  --warm-accent: #D97706;
  --warm-text: #92400E;
}

/* The bare `nav` rule above is the site bar (sticky, dark); any other <nav> inside the article (.pager…) opts out. */
.article nav { position: static; z-index: auto; background: none; border: 0; }

/* shared look of the white cards: .persons li, .vocab entries, .pager links */
.persons li, .vocab > div, .pager a { background: #fff; border: 1px solid var(--border); border-radius: 12px; }

/* .badges: chips under the h1; .ref-badge = the passage reference (also usable alone)
   <div class="badges"><span class="ref-badge">Lucas 15,11-32</span><span>Tom: compaixão</span><span>Dificuldade 2 de 5</span></div> */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.badges > *, .ref-badge { display: inline-block; font-size: 0.85rem; line-height: 1.3; padding: 5px 12px; border-radius: 999px; }
.badges > * { background: #fff; border: 1px solid var(--border); color: var(--text-secondary); }
.ref-badge { font-weight: 600; background: var(--surface); border: 1px solid #C9DAF4; color: var(--blue-text); }

/* .illustration: width/height on the <img> are required (the box is reserved before the file loads). Above the
   fold (LCP): fetchpriority="high"; below it: loading="lazy".
   <figure class="illustration"><picture><source type="image/webp" sizes="(min-width: 760px) 712px, calc(100vw - 48px)"
     srcset="/novo-testamento/img/282-480.webp 480w, /novo-testamento/img/282-960.webp 960w">
   <img src="/novo-testamento/img/282-960.webp" width="960" height="525" alt="Título" decoding="async"></picture>
   <figcaption>Ilustração: Pericopae</figcaption></figure> */
.illustration { margin: 0 0 1.8em; }
.illustration picture { display: block; }
.illustration img {
  display: block; width: 100%; height: auto; aspect-ratio: 1024 / 560; object-fit: cover;
  border-radius: 14px; background: var(--surface);
}
.illustration figcaption { margin-top: 8px; font-size: 0.8rem; color: var(--text-muted); text-align: right; }

/* .app-box: "read it in the app" card; the two links share the row and stack when narrow
   <aside class="app-box"><p><strong>Leia esta passagem no app</strong>Grátis e offline.</p><div class="actions">
   <a class="primary" href="https://pericopae.app/pericope/282">Abrir no app</a>
   <a href="https://play.google.com/store/apps/details?id=…">Baixar na Play</a></div></aside> */
.app-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 16px 20px; margin: 0 0 2em;
  background: var(--surface); border: 1px solid #D5E2F5; border-radius: 14px;
}
.app-box p { flex: 1 1 240px; margin: 0; font-size: 0.95rem; }
.app-box p strong { display: block; color: var(--dark-scaffold); font-size: 1.02rem; }
.app-box .actions { display: flex; flex: 1 1 260px; flex-wrap: wrap; gap: 10px; }
.app-box .actions a {
  flex: 1 1 130px; text-align: center; text-decoration: none; font-weight: 600; font-size: 0.92rem;
  padding: 11px 14px; border-radius: 10px; background: #fff; color: var(--blue-text);
  border: 1px solid var(--blue-primary);
}
.app-box .actions a.primary { background: var(--blue-primary); color: #fff; }
.app-box .actions a:hover { filter: brightness(1.06); }

/* .persons: characters, "name — role" (the dash is part of the text)
   <ul class="persons"><li><strong>Pai</strong> — pai amoroso da família, recebe o filho pródigo</li>…</ul> */
.persons { list-style: none; margin-left: 0; display: grid; gap: 10px; }
.persons li { padding: 10px 16px; margin: 0; }
.persons strong { color: var(--dark-scaffold); }
@media (min-width: 600px) { .persons { grid-template-columns: 1fr 1fr; } }

/* .vocab: Greek vocabulary (2 to 4 terms): term, Greek, transliteration, meaning
   <dl class="vocab"><div><dt>Perdido <span class="greek" lang="grc">ἀπολωλώς</span> <span class="translit">apolōlōs</span></dt>
   <dd>Estar perdido, em perigo de perdição.</dd></div>…</dl> */
.vocab { margin: 0 0 1.2em; }
.vocab > div { padding: 12px 16px; margin-bottom: 10px; }
.vocab dt { font-weight: 600; color: var(--dark-scaffold); }
.vocab dd { margin-top: 4px; font-size: 0.97rem; color: var(--text-secondary); }
.vocab .greek {
  margin-left: 6px; font-size: 1.1em; color: var(--blue-text);
  font-family: 'Palatino Linotype', Palatino, 'Noto Serif', 'Times New Roman', serif;
}
.vocab .translit { margin-left: 4px; font-weight: 400; font-style: italic; color: var(--text-muted); }

/* .pager: previous / next pericope (end of the article, before .cta-box); one link only at the ends of a book.
   An <a> without href = neighbour not published yet (muted, dashed, not clickable).
   <nav class="pager" aria-label="Outras perícopes">
     <a class="prev" href="…"><span>← Anterior</span>A dracma perdida</a>
     <a class="next" href="…"><span>Próxima →</span>O administrador astuto</a></nav> */
.pager { display: grid; gap: 10px; margin-top: 2.2em; }
.pager a { display: block; padding: 12px 16px; text-decoration: none; font-weight: 600; color: var(--dark-scaffold); }
.pager a:hover { border-color: var(--blue-primary); }
.pager a:not([href]) { color: var(--text-muted); border-style: dashed; }
.pager a:not([href]):hover { border-color: var(--border); }
.pager a span { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.pager .next { text-align: right; }
@media (min-width: 520px) {
  .pager { grid-template-columns: 1fr 1fr; }
  .pager .next:only-child { grid-column: 2; }
}

/* .curiosity: the pericope's curiosity note
   <aside class="curiosity"><strong>Curiosidade</strong><p>Na parábola, o pedido da herança…</p></aside> */
.curiosity {
  background: var(--warm-bg); border-left: 4px solid var(--warm-accent);
  padding: 16px 20px; border-radius: 0 12px 12px 0; margin: 1.5em 0;
}
.curiosity strong {
  display: block; margin-bottom: 4px; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warm-text);
}
.curiosity p:last-child { margin-bottom: 0; }

/* .citacao: verse quoted from the NVI (pages listed in citacoes.json); .nvi-notice: its copyright line
   <blockquote class="citacao"><p>Texto do versículo.</p><cite>João 3,16</cite></blockquote>
   <p class="nvi-notice"><small>Texto bíblico: Nova Versão Internacional® …</small></p> */
.citacao { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--blue-primary); }
.citacao p { margin-bottom: 4px; font: italic 1.05rem/1.7 'Merriweather', Georgia, serif; color: var(--text-primary); }
.citacao cite { display: block; font-size: 0.85rem; font-style: normal; color: var(--text-muted); }
.nvi-notice { margin: 2em 0 0; color: var(--text-muted); }