/* ============================================================
   MOTIVATION.SE — Wagtail Rich Text Styles
   Applies to: .rich-text  (Wagtail's default content wrapper)

   In base.html:
   <link rel="stylesheet" href="{% static 'css/richtext.css' %}">
   ============================================================ */

/* ── Base ─────────────────────────────────────────────────── */
.rich-text {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-light, #243B47);
}

/* ── Headings ─────────────────────────────────────────────── */
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5 {
  font-family: 'Archivo', sans-serif;
  color: var(--ink, #0A1A1F);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.rich-text h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 2.5rem 0 0.75rem;
}

.rich-text h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2rem 0 0.6rem;
}

.rich-text h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.75rem 0 0.5rem;
}

.rich-text h5 {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 1.5rem 0 0.4rem;
  color: var(--muted, #6B818A);
}

/* ── Paragraphs ───────────────────────────────────────────── */
.rich-text p { margin-bottom: 1.25em; }

.rich-text p:last-child { margin-bottom: 0; }

/* ── Lead paragraph ───────────────────────────────────────── */
.rich-text p.lead {
  /* client feedback v6: renare ingress — ingen bakgrund, ingen kursiv,
     större text, avgränsad med en tunn underkant istället för vänsterkant */
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink, #0A1A1F);
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1.5px solid var(--border, #DDD8CC);
}

/* ── Links ────────────────────────────────────────────────── */
.rich-text a {
  color: var(--accent-dark, #157E90);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.2s;
}

.rich-text a:hover {
  color: var(--accent, #1FA3B8);
}

/* ── Bold & italic ────────────────────────────────────────── */
.rich-text strong {
  font-weight: 700;
  color: var(--ink, #0A1A1F);
}

.rich-text em {
  font-style: italic;
}

/* ── Unordered list ───────────────────────────────────────── */
.rich-text ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25em;
}

.rich-text ul li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.5em;
  line-height: 1.6;
}

.rich-text ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #1FA3B8);
  flex-shrink: 0;
}

/* ── Ordered list ─────────────────────────────────────────── */
.rich-text ol {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25em;
  counter-reset: ol-counter;
}

.rich-text ol li {
  position: relative;
  padding-left: 1.75em;
  margin-bottom: 0.5em;
  line-height: 1.6;
  counter-increment: ol-counter;
}

.rich-text ol li::before {
  content: counter(ol-counter) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-dark, #157E90);
  line-height: 1.8;
}

/* Nested lists */
.rich-text ul ul,
.rich-text ol ol,
.rich-text ul ol,
.rich-text ol ul {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

/* ── Blockquote ───────────────────────────────────────────── */
.rich-text blockquote {
  border-left: 3px solid var(--accent, #1FA3B8);
  padding: 16px 20px;
  margin: 2em 0;
  background: var(--tag-bg, #E3F3F6);
  border-radius: 0 8px 8px 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink, #0A1A1F);
  font-style: italic;
  line-height: 1.65;
}

.rich-text blockquote p {
  margin-bottom: 0;
}

.rich-text blockquote cite {
  display: block;
  margin-top: 0.75em;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 500;
  color: var(--muted, #6B818A);
}

/* ── Horizontal rule ──────────────────────────────────────── */
.rich-text hr {
  border: none;
  border-top: 1.5px solid var(--border, #DDD8CC);
  margin: 2.5em 0;
}

/* ── Inline code ──────────────────────────────────────────── */
.rich-text code {
  font-size: 0.875em;
  background: var(--bg, #F5F1E8);
  border: 1px solid var(--border, #DDD8CC);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
  color: var(--ink, #0A1A1F);
}

/* ── Code block ───────────────────────────────────────────── */
.rich-text pre {
  background: var(--sidebar-dark, #0E2A33);
  color: #e2f2f5;
  padding: 20px 24px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 1.75em 0;
  font-size: 0.875em;
  line-height: 1.65;
}

.rich-text pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: 1em;
}

/* ── Table ────────────────────────────────────────────────── */
.rich-text table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75em 0;
  font-size: 0.9rem;
  background: var(--white, #FFFFFF);
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--border, #DDD8CC);
}

.rich-text th,
.rich-text td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border, #DDD8CC);
  text-align: left;
  vertical-align: top;
}

.rich-text th {
  background: var(--bg, #F5F1E8);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6B818A);
}

.rich-text tr:last-child td { border-bottom: none; }

.rich-text tr:hover td {
  background: #F8F4EC;
}

/* ── Images ───────────────────────────────────────────────── */
.rich-text img {
  border-radius: 8px;
  height: auto;
}

/* Wagtail image alignment classes */
.richtext-image.left {
  float: left;
  margin: 0.5em 1.75em 1em 0;
  max-width: 45%;
  border-radius: 8px;
}

.richtext-image.right {
  float: right;
  margin: 0.5em 0 1em 1.75em;
  max-width: 45%;
  border-radius: 8px;
}

.richtext-image.fullwidth {
  display: block;
  width: 100%;
  margin: 1.75em 0;
}

/* Image caption (Wagtail generates figcaption) */
.rich-text figure {
  margin: 1.75em 0;
}

.rich-text figcaption {
  font-size: 0.78rem;
  color: var(--muted, #6B818A);
  font-style: italic;
  margin-top: 6px;
  padding-left: 4px;
}

/* Clear floats */
.rich-text::after {
  content: '';
  display: table;
  clear: both;
}

/* ── Embedded media (Wagtail embed blocks) ────────────────── */
.rich-text .responsive-object {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 1.75em 0;
  border-radius: 10px;
  background: var(--sidebar-dark, #0E2A33);
}

.rich-text .responsive-object iframe,
.rich-text .responsive-object embed,
.rich-text .responsive-object object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ── Stats / key-points list ──────────────────────────────── */
.rich-text .key-points {
  list-style: none;
  padding: 0;
  background: var(--white, #FFFFFF);
  border: 1.5px solid var(--border, #DDD8CC);
  border-radius: 10px;
  margin: 1.75em 0;
  overflow: hidden;
}

.rich-text .key-points li {
  padding: 13px 20px;
  border-bottom: 1px solid var(--border, #DDD8CC);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-light, #243B47);
  line-height: 1.5;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.rich-text .key-points li:last-child { border-bottom: none; }

.rich-text .key-points li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #1FA3B8);
  flex-shrink: 0;
  margin-top: 7px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .richtext-image.left,
  .richtext-image.right {
    float: none;
    max-width: 100%;
    margin: 1em 0;
    display: block;
    width: 100%;
  }

  .rich-text h2 { font-size: 1.35rem; }
  .rich-text h3 { font-size: 1.1rem; }
}