/*
 * Website CMS content styles — the HTML vocabulary documented in
 * src/shared/cms.ts, rendered inside a .card-western / .card-parchment.
 *
 * Plain CSS (not processed by Tailwind) so the admin dashboard's editor can
 * load this same file cross-origin from <www>/cms-content.css. Every selector
 * is scoped under .cms-content so it can't leak into the host page.
 *
 * Parchment rules match both the site's .card-parchment wrapper and a neutral
 * .cms-parchment alias (the admin editor has its own .card-parchment class).
 * .cms-closing on the wrapper marks a closing card. Text styles only — card
 * backgrounds and borders belong to the host page.
 */

/* ─── Base (dark leather card) ───────────────────────────── */

.cms-content {
  color: #e8d4a8;
  line-height: 1.625;
  overflow-wrap: break-word;
}

.cms-content > * {
  margin: 0;
}

.cms-content > * + * {
  margin-top: 1rem;
}

.cms-content p.muted {
  color: #a89060;
}

.cms-content p.muted strong {
  color: #e8d4a8;
}

.cms-content p.callout {
  color: #c9942a;
  font-weight: 600;
}

.cms-content .center {
  text-align: center;
}

.cms-content h3 {
  font-family: 'Rye', serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #c9942a;
}

/* A subheading sits closer to the text it introduces */
.cms-content > h3 + * {
  margin-top: 0.75rem;
}

.cms-content strong {
  font-weight: 700;
  color: inherit;
}

.cms-content em {
  font-style: italic;
}

.cms-content u {
  text-decoration: underline;
}

.cms-content mark {
  background: none;
  color: #c9942a;
  font-weight: 700;
}

.cms-content a {
  color: #c9942a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cms-content a:hover {
  color: #e8b84b;
}

.cms-content hr {
  border: 0;
  border-top: 1px solid #3d3028;
  height: 0;
  margin: 1rem 0 0;
}

.cms-content hr + * {
  margin-top: 1.25rem;
}

/* ─── Star lists ─────────────────────────────────────────── */

.cms-content ul {
  list-style: none;
  padding: 0;
}

.cms-content li {
  position: relative;
  padding-left: 1.75rem;
  color: #e8d4a8;
}

.cms-content li + li {
  margin-top: 0.75rem;
}

.cms-content li::before {
  content: '★';
  position: absolute;
  left: 0;
  top: 0.125rem;
  color: #c9942a;
}

.cms-content li > p {
  margin: 0;
}

.cms-content li > p + p {
  margin-top: 0.5rem;
}

/* ─── Parchment card ─────────────────────────────────────── */

.card-parchment .cms-content,
.card-parchment .cms-content li,
.cms-parchment .cms-content,
.cms-parchment .cms-content li {
  color: #2a1e0f;
}

.card-parchment .cms-content p.muted,
.cms-parchment .cms-content p.muted {
  color: #5a3a10;
}

.card-parchment .cms-content p.muted strong,
.cms-parchment .cms-content p.muted strong {
  color: #2a1e0f;
}

.card-parchment .cms-content mark,
.card-parchment .cms-content p.callout,
.card-parchment .cms-content h3,
.card-parchment .cms-content a,
.card-parchment .cms-content li::before,
.cms-parchment .cms-content mark,
.cms-parchment .cms-content p.callout,
.cms-parchment .cms-content h3,
.cms-parchment .cms-content a,
.cms-parchment .cms-content li::before {
  color: #8b4513;
}

.card-parchment .cms-content hr,
.cms-parchment .cms-content hr {
  border-top-color: #c0a060;
}

/* ─── Closing card (centred parchment, heading inside) ───── */

.cms-closing .cms-content {
  text-align: center;
}

.cms-closing .cms-content > * + * {
  margin-top: 0.75rem;
}

.cms-closing .cms-content p.callout {
  font-family: 'Rye', serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #8b4513;
}