/* ═══════════════════════════════════════════════════════════
   LUNARA — content pages (SEO mode pages, card pages, blog)
   Prose layout over the shared night backdrop. Uses the same
   tokens as style.css; logical properties keep it RTL-safe.
   Loaded ONLY on generated pages (tools/build-site.mjs shell).
   ═══════════════════════════════════════════════════════════ */

.content-main{
  padding-block: calc(var(--header-h) + 48px) 72px;
  color: var(--text-light);
}
.content-main .container-narrow{ margin-inline:auto; }

/* ── page head ── */
.content-head{ text-align:center; margin-block-end: 36px; }
.content-head .kicker{ color: var(--gold-hi); letter-spacing:.12em; }
.content-head h1{
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height:1.15;
  margin-block: 10px 14px;
  color: var(--text-light);
}
.content-head .content-lede{
  max-width: 640px; margin-inline:auto;
  color: var(--text-light-dim);
  font-size:1.08rem; line-height:1.75;
}

/* ── CTA panel (tool-first: the action sits above the article) ── */
.tool-cta{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-soft) 100%);
  border:1px solid rgba(240,217,174,.18);
  border-radius: var(--radius);
  padding: 30px 24px;
  margin-block: 8px 44px;
  text-align:center;
}
.tool-cta p{ color: var(--text-light-dim); max-width: 520px; line-height:1.7; }
.tool-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ── article prose ── */
.prose{ line-height:1.85; font-size:1.05rem; }
.prose h2{
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  color: var(--gold-hi);
  margin-block: 44px 14px;
}
.prose h3{ font-size:1.15rem; color: var(--text-light); margin-block: 28px 10px; }
.prose p{ margin-block-end: 16px; color: var(--text-light); }
.prose p + p{ margin-block-start: 0; }
.prose ul, .prose ol{ padding-inline-start: 22px; margin-block-end: 16px; }
.prose li{ margin-block-end: 8px; }
.prose a{ color: var(--violet-hi); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover{ color: var(--gold-hi); }
.prose strong{ color: var(--gold-hi); font-weight:600; }
.prose blockquote{
  border-inline-start: 3px solid var(--gold);
  padding-inline-start: 18px;
  margin-block: 22px;
  color: var(--text-light-dim);
  font-style: normal;
}
.prose .note{
  background: rgba(240,217,174,.07);
  border:1px solid rgba(240,217,174,.16);
  border-radius: 12px;
  padding: 16px 18px;
  font-size:.98rem;
  color: var(--text-light-dim);
}

/* Birth-card calculator (/birth-card/) */
.bc-form{
  display:flex; flex-wrap:wrap; gap:12px; align-items:end; justify-content:center;
  margin-block: 8px 20px;
}
.bc-form label{ display:block; width:100%; text-align:center; color:var(--gold-hi); font-size:.9rem; letter-spacing:.06em; }
.bc-form input[type="date"]{
  background: rgba(240,217,174,.06);
  border:1px solid rgba(210,161,125,.45);
  border-radius:10px; padding:10px 14px;
  color:inherit; font:inherit; color-scheme:dark;
}
.bc-invalid{ width:100%; text-align:center; color:#e8a1a1; font-size:.9rem; margin:0; }
.bc-result{ margin-block: 6px 26px; text-align:center; }
.bc-card{
  display:inline-block; min-width: 240px; max-width: 320px;
  padding: 26px 34px 18px;
  background: radial-gradient(ellipse 120% 100% at 50% 0%, rgba(44,26,71,.9) 0%, rgba(18,11,28,.95) 100%);
  border: 1px solid rgba(210,161,125,.6);
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(210,161,125,.18);
}
.bc-kicker{ margin:0; color:var(--gold-hi); font-size:.8rem; letter-spacing:.16em; }
.bc-num{ margin: 8px 0 0; color: rgba(240,217,174,.55); font-size:1rem; letter-spacing:.2em; }
.bc-name{ margin: 2px 0 12px; font-size: 1.9rem; color: var(--cream, #faf6ee); }
.bc-link{ display:inline-block; margin-block-end: 14px; }
.bc-brand{ margin: 0; padding-block-start: 10px; border-block-start: 1px solid rgba(210,161,125,.25); color: rgba(240,217,174,.6); font-size:.78rem; letter-spacing:.1em; }
.bc-share{ margin-block-start: 16px; }
.bc-share p{ margin: 0 0 8px; color: var(--gold-hi); font-size:.85rem; letter-spacing:.06em; }
.bc-share .btn{ margin: 4px 6px; }

/* Example reading page (/example-reading/) */
.ex-question-box{
  background: rgba(154,108,224,.10);
  border:1px solid rgba(210,161,125,.35);
  border-radius: 12px;
  padding: 16px 18px;
  margin-block: 6px 20px;
}
.ex-q-label{ display:block; color: var(--gold-hi); font-size:.82rem; letter-spacing:.12em; margin-block-end: 8px; }
.ex-question{ margin: 0; font-size: 1.12rem; font-style: italic; color: var(--cream, #faf6ee); }
.ex-focus{ margin: 8px 0 0; color: var(--text-light-dim); font-size:.88rem; }
.prose .ex-opening{ font-size: 1.08rem; }
.prose .ex-byline{ text-align:center; color: var(--gold-hi); letter-spacing:.08em; margin-block: 22px 6px; }

/* GEO answer box — the "gift-wrapped" first answer AI engines and snippets quote */
.prose .tldr{
  background: rgba(240,217,174,.10);
  border:1px solid rgba(210,161,125,.45);
  border-radius: 12px;
  padding: 16px 18px;
  margin-block: 6px 18px;
}
.prose .tldr .tldr-label{
  display:block;
  color: var(--gold-hi);
  font-size:.82rem;
  letter-spacing:.14em;
  margin-block-end: 6px;
}
.prose .tldr p{ margin:0; font-size:1.02rem; }
.prose .tldr ul{ margin:0; padding-inline-start: 1.2em; }
.prose .tldr li{ margin-block: 4px; }

/* ── FAQ block ── */
.content-faq{ margin-block-start: 48px; }
.content-faq h2{
  font-family: var(--font-display);
  color: var(--gold-hi);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  margin-block-end: 18px;
}
.content-faq details{
  border:1px solid rgba(240,217,174,.16);
  border-radius: 12px;
  padding: 14px 18px;
  margin-block-end: 10px;
  background: rgba(30,17,49,.55);
}
.content-faq summary{ cursor:pointer; font-weight:600; color: var(--text-light); }
.content-faq details p{ margin-block-start: 12px; color: var(--text-light-dim); line-height:1.75; }

/* ── card page specifics ── */
.card-meta{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin-block: 14px 0;
}
.card-meta span{
  border:1px solid rgba(240,217,174,.25);
  color: var(--gold-hi);
  border-radius: 999px;
  padding: 4px 14px;
  font-size:.85rem;
  letter-spacing:.04em;
}

/* ── cards hub grid ── */
.cards-index{ display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap:12px; margin-block: 26px; }
.cards-index .ci-item{
  border:1px solid rgba(240,217,174,.14);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(30,17,49,.5);
  color: var(--text-light);
  line-height:1.5;
}
.cards-index .ci-item small{ display:block; color: var(--text-light-dim); }
.cards-index a.ci-item{ text-decoration:none; transition: border-color .2s var(--ease-out), transform .2s var(--ease-out); }
.cards-index a.ci-item:hover{ border-color: var(--gold); transform: translateY(-2px); }
.cards-index a.ci-item strong{ color: var(--gold-hi); }
.cards-hub-note{ color: var(--text-light-dim); font-size:.95rem; text-align:center; }

/* ── blog index ── */
.post-list{ display:grid; gap:16px; margin-block: 26px; }
.post-list a{
  display:block; text-decoration:none;
  border:1px solid rgba(240,217,174,.16);
  border-radius: var(--radius);
  padding: 22px 24px;
  background: rgba(30,17,49,.5);
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.post-list a:hover{ border-color: var(--gold); transform: translateY(-2px); }
.post-list h2{ font-family: var(--font-display); color: var(--gold-hi); font-size:1.3rem; margin-block-end:8px; }
.post-list p{ color: var(--text-light-dim); line-height:1.7; }

/* ── related links strip ── */
.related-strip{ margin-block-start: 52px; border-block-start:1px solid rgba(240,217,174,.14); padding-block-start: 26px; }
.related-strip h2{ font-size:1.05rem; color: var(--text-light-dim); margin-block-end: 12px; font-weight:500; }
.related-strip ul{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; }
.related-strip a{
  display:inline-block; border:1px solid rgba(240,217,174,.2);
  border-radius:999px; padding:7px 16px;
  color: var(--text-light); text-decoration:none; font-size:.92rem;
}
.related-strip a:hover{ border-color: var(--gold); color: var(--gold-hi); }

@media (max-width: 640px){
  .content-main{ padding-block-start: calc(var(--header-h) + 28px); }
  .tool-cta{ padding: 22px 16px; }
}