/* =========================================================================
   Simuze content typography
   -------------------------------------------------------------------------
   Long-form reading styles for CMS-rendered pages and blog posts.
   Everything is scoped under `.content-body`. Apply this class to the
   wrapper around CMS HTML output.

   Goals: comfortable reading on a dark background, clear hierarchy,
   breathing room between sections. Invisible when it works.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Container
   ------------------------------------------------------------------------- */

.content-body {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  background: transparent;

  /* Body baseline */
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  word-wrap: break-word;
  overflow-wrap: break-word;
}


/* -------------------------------------------------------------------------
   2. Headings
   Tighter line-height than body, near-white, deliberate vertical spacing.
   ------------------------------------------------------------------------- */

.content-body h1,
.content-body h2,
.content-body h3,
.content-body h4 {
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.25;
  font-weight: 600;
  /* Keep margin-top only — paired with margin-bottom below avoids margin
     collapsing weirdness with adjacent paragraphs. */
}

.content-body h1 {
  font-size: 2.25rem;
  margin-top: 0;
  margin-bottom: 0.6em;
  font-weight: 700;
}

.content-body h2 {
  font-size: 1.6rem;
  margin-top: 2.2em;
  margin-bottom: 0.5em;
}

.content-body h3 {
  font-size: 1.25rem;
  margin-top: 1.8em;
  margin-bottom: 0.45em;
}

.content-body h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}


/* -------------------------------------------------------------------------
   3. Paragraphs
   margin-bottom only — first child after a heading inherits the heading's
   margin-bottom, so no extra top spacing required.
   ------------------------------------------------------------------------- */

.content-body p {
  margin-top: 0;
  margin-bottom: 1.35em;
}


/* -------------------------------------------------------------------------
   4. Links
   Muted accent that reads on dark. Underline only on hover.
   ------------------------------------------------------------------------- */

.content-body a {
  color: #8ab4f8;
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 180, 248, 0.35);
}

.content-body a:hover,
.content-body a:focus {
  text-decoration: underline;
  border-bottom-color: transparent;
}

.content-body a:visited {
  color: #b39ddb;
}


/* -------------------------------------------------------------------------
   5. Inline emphasis
   ------------------------------------------------------------------------- */

.content-body strong,
.content-body b {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

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

.content-body small {
  font-size: 0.875em;
  color: rgba(255, 255, 255, 0.7);
}


/* -------------------------------------------------------------------------
   6. Blockquotes
   ------------------------------------------------------------------------- */

.content-body blockquote {
  margin: 2em 0;
  padding: 0.2em 0 0.2em 1.2em;
  border-left: 3px solid rgba(138, 180, 248, 0.55);
  color: rgba(255, 255, 255, 0.72);
  font-style: italic;
  font-size: 0.98em;
}

.content-body blockquote p:last-child {
  margin-bottom: 0;
}

.content-body blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-size: 0.875em;
  font-style: normal;
  color: rgba(255, 255, 255, 0.55);
}


/* -------------------------------------------------------------------------
   7. Lists
   ------------------------------------------------------------------------- */

.content-body ul,
.content-body ol {
  margin: 0 0 1.35em;
  padding-left: 1.75em;
}

.content-body li {
  margin-bottom: 0.45em;
}

.content-body li:last-child {
  margin-bottom: 0;
}

.content-body ul {
  list-style-type: disc;
}

.content-body ol {
  list-style-type: decimal;
}

/* Muted bullet/number markers */
.content-body ul > li::marker,
.content-body ol > li::marker {
  color: rgba(255, 255, 255, 0.45);
}

/* Nested lists */
.content-body li > ul,
.content-body li > ol {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}


/* -------------------------------------------------------------------------
   8. Images
   ------------------------------------------------------------------------- */

.content-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.75em auto;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.content-body figure {
  margin: 1.75em 0;
}

.content-body figure img {
  margin: 0 auto 0.6em;
}

.content-body figcaption {
  font-size: 0.875em;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  line-height: 1.5;
}


/* -------------------------------------------------------------------------
   9. Video / iframe (responsive 16:9)
   ------------------------------------------------------------------------- */

.content-body iframe,
.content-body video {
  display: block;
  max-width: 100%;
  width: 100%;
  margin: 1.75em auto;
  border-radius: 5px;
  border: 0;
  aspect-ratio: 16 / 9;
}

/* Optional explicit wrapper for embeds rendered without aspect-ratio support */
.content-body .embed-wrapper {
  position: relative;
  margin: 1.75em 0;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 5px;
}

.content-body .embed-wrapper iframe,
.content-body .embed-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
}


/* -------------------------------------------------------------------------
   10. Horizontal rule
   ------------------------------------------------------------------------- */

.content-body hr {
  border: 0;
  height: 1px;
  margin: 2.75em 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );
}


/* -------------------------------------------------------------------------
   11. Code
   ------------------------------------------------------------------------- */

.content-body code,
.content-body kbd,
.content-body samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
}

/* Inline code */
.content-body :not(pre) > code {
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.95);
}

/* Code blocks */
.content-body pre {
  margin: 1.75em 0;
  padding: 1em 1.25em;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
  font-size: 0.875em;
  line-height: 1.55;
}

.content-body pre > code {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.92);
  white-space: pre;
}

/* Keyboard input */
.content-body kbd {
  padding: 0.1em 0.4em;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85em;
}


/* -------------------------------------------------------------------------
   12. Tables
   ------------------------------------------------------------------------- */

.content-body table {
  width: 100%;
  margin: 1.75em 0;
  border-collapse: collapse;
  font-size: 0.95em;
}

.content-body thead th {
  text-align: left;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  padding: 0.7em 0.8em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.content-body tbody td {
  padding: 0.7em 0.8em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
}

.content-body tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

.content-body tbody tr:last-child td {
  border-bottom: 0;
}


/* -------------------------------------------------------------------------
   13. Definition lists
   ------------------------------------------------------------------------- */

.content-body dl {
  margin: 0 0 1.35em;
}

.content-body dt {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 0.8em;
}

.content-body dd {
  margin: 0 0 0.6em 1.2em;
  color: rgba(255, 255, 255, 0.78);
}


/* -------------------------------------------------------------------------
   14. First child / last child resets
   Prevents awkward gaps at the top and bottom of the content container.
   ------------------------------------------------------------------------- */

.content-body > *:first-child {
  margin-top: 0;
}

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


/* -------------------------------------------------------------------------
   15. Responsive (<600px)
   ------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .content-body {
    font-size: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .content-body h1 {
    font-size: 1.85rem;
  }

  .content-body h2 {
    font-size: 1.4rem;
    margin-top: 1.9em;
  }

  .content-body h3 {
    font-size: 1.15rem;
    margin-top: 1.6em;
  }

  .content-body blockquote {
    padding-left: 1em;
    margin: 1.5em 0;
  }

  .content-body img,
  .content-body iframe,
  .content-body video,
  .content-body figure {
    margin-top: 1.4em;
    margin-bottom: 1.4em;
  }

  .content-body hr {
    margin: 2em 0;
  }

  .content-body pre {
    padding: 0.8em 1em;
  }
}