/*
 * Structural styling for rich descriptions (Product, Tour, Itinerary).
 *
 * WHY THIS FILE EXISTS
 * Same reason as blog_content.css: Tailwind's preflight resets list markers,
 * heading sizes and link colours away, so a description written in the editor
 * would otherwise render on the storefront as one undifferentiated block of
 * body text — nothing like what the author composed.
 *
 * SCOPE
 * Everything is scoped under .rt-content, which the templates add alongside
 * whatever wrapper class they already had (`.sv1-desc rt-content`). Those
 * existing rules set font-size, colour and line-height on the wrapper itself
 * and are left to keep doing so — every size below is in `em`, so a heading
 * scales off whichever store template it lands in.
 *
 * SPECIFICITY
 * These are descendant selectors (0,1,1), one step above blog_content.css's
 * deliberate single-class rules. That is safe here because no store template
 * styles anything *inside* its description wrapper; they only style the
 * wrapper. If one ever does, its own rule needs to win — keep this file at
 * one class plus one element and do not add !important.
 *
 * INDENTATION
 * The .rt-indent-N scale mirrors Quill's own (3em per level, see
 * quill.snow.css) so the storefront matches what the author saw while typing.
 * creator/utils/rich_text.py renames Quill's ql-indent-N to rt-indent-N on
 * save and is the only class the sanitizer lets through.
 */

:root {
  --rt-heading-ink: inherit;
  --rt-link: #2563eb;
  --rt-gap: 0.9em;
}

/* ───────────────────────────── paragraphs ───────────────────────────── */

.rt-content p {
  margin: 0 0 var(--rt-gap);
}

.rt-content > *:last-child {
  margin-bottom: 0;
}

/* ────────────────────────────── headings ────────────────────────────── */

.rt-content h1,
.rt-content h2,
.rt-content h3,
.rt-content h4,
.rt-content h5,
.rt-content h6 {
  color: var(--rt-heading-ink);
  font-weight: 700;
  line-height: 1.25;
  margin: 1.4em 0 0.5em;
}

.rt-content h1 { font-size: 1.75em; }
.rt-content h2 { font-size: 1.45em; }
.rt-content h3 { font-size: 1.25em; }
.rt-content h4 { font-size: 1.1em; font-weight: 600; }
.rt-content h5 { font-size: 1em; font-weight: 600; }
.rt-content h6 {
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* A description that opens with a heading should not push itself off the top. */
.rt-content h1:first-child,
.rt-content h2:first-child,
.rt-content h3:first-child,
.rt-content h4:first-child,
.rt-content h5:first-child,
.rt-content h6:first-child {
  margin-top: 0;
}

/* ──────────────────────────────── lists ─────────────────────────────── */
/* Quill stores both kinds as <ol data-list>; normalize_quill_html turns them
   back into real <ul>/<ol> before they are ever saved, so plain element
   selectors are all that is needed here. */

.rt-content ul,
.rt-content ol {
  margin: 0 0 var(--rt-gap);
  padding-left: 1.5em;
}

.rt-content ul { list-style: disc outside; }
.rt-content ol { list-style: decimal outside; }

.rt-content li {
  margin: 0.25em 0;
}

/* Nested lists sit tighter and change marker, as browsers do by default. */
.rt-content ul ul,
.rt-content ul ol,
.rt-content ol ul,
.rt-content ol ol {
  margin-bottom: 0;
}

.rt-content ul ul { list-style: circle outside; }
.rt-content ol ol { list-style: lower-alpha outside; }

/* ──────────────────────────── inline formats ────────────────────────── */

.rt-content strong,
.rt-content b {
  font-weight: 700;
}

.rt-content em,
.rt-content i {
  font-style: italic;
}

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

.rt-content a {
  color: var(--rt-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rt-content a:hover {
  text-decoration-thickness: 2px;
}

/* ───────────────────────────── indentation ──────────────────────────── */

.rt-content .rt-indent-1 { padding-left: 3em; }
.rt-content .rt-indent-2 { padding-left: 6em; }
.rt-content .rt-indent-3 { padding-left: 9em; }
.rt-content .rt-indent-4 { padding-left: 12em; }
.rt-content .rt-indent-5 { padding-left: 15em; }
.rt-content .rt-indent-6 { padding-left: 18em; }
.rt-content .rt-indent-7 { padding-left: 21em; }
.rt-content .rt-indent-8 { padding-left: 24em; }