/*
 * story-content.css — styles the rich elements the Panco admin editor now emits into a post body
 * (data tables, captioned images, highlight, YouTube embeds, text alignment). Loaded alongside the
 * verbatim member-news-story.css on the blog + member-news detail pages. Scoped to `.story-body` so it
 * only touches post content; data-table rules are further scoped to `.content-table` so legacy
 * WordPress image-layout tables (which carry no class) keep their original borderless look.
 *
 * Uses the site design tokens from main.css (--navy / --line / --muted / --shadow) so tables read as
 * part of the article, not a bolt-on. The header row is navy (echoing the article headings and the
 * .story-more block) to stay clearly distinct from the data rows.
 */

/* Data tables ------------------------------------------------------------ */
.story-body table.content-table {
  width: 100%;
  border-collapse: separate; /* separate + spacing:0 lets the rounded corners clip cleanly */
  border-spacing: 0;
  margin: clamp(24px, 3.5vw, 36px) 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  color: #4d5b6d; /* same body text colour as .story-body p */
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  box-shadow: 0 6px 20px rgba(18, 56, 95, 0.06);
}

.story-body table.content-table th,
.story-body table.content-table td {
  padding: 12px 18px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere; /* long tokens wrap instead of forcing overflow (resizing is off) */
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

/* TipTap wraps every cell's text in <p>; neutralise the article's <p> rules (big margin, large
   font, muted colour) inside cells so text sits tight and inherits the cell/header colour. */
.story-body table.content-table :is(th, td) p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.story-body table.content-table :is(th, td) p + p {
  margin-top: 0.5em;
}

/* The table's own border draws the outer right/bottom edges — drop the duplicate on edge cells. */
.story-body table.content-table tr > :last-child {
  border-right: 0;
}
.story-body table.content-table tr:last-child > * {
  border-bottom: 0;
}

/* Header cells (TipTap renders them as <th> in the first row) — navy, matching the site. */
.story-body table.content-table th {
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: 0.9em;
  letter-spacing: 0.01em;
  border-right-color: rgba(255, 255, 255, 0.18); /* visible column dividers on the navy fill */
}

/* Zebra: a whisper of the page's blue tint — clearly lighter than the navy header. */
.story-body table.content-table tbody tr:nth-child(even) td {
  background: #f4f9ff;
}

@media (max-width: 640px) {
  .story-body table.content-table th,
  .story-body table.content-table td {
    padding: 9px 12px;
  }
}

/* Captioned images ------------------------------------------------------- */
.story-body figure {
  margin: clamp(20px, 3vw, 32px) 0;
}

.story-body figure img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.story-body figcaption {
  margin-top: 10px;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

/* Inline marks the site reset may flatten -------------------------------- */
.story-body mark {
  background: #fef08a;
  color: inherit;
  padding: 0 0.15em;
  border-radius: 0.2em;
}

.story-body u {
  text-decoration: underline;
}

.story-body s {
  text-decoration: line-through;
}

/* Horizontal rule -------------------------------------------------------- */
.story-body hr {
  margin: clamp(30px, 4vw, 46px) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Bullet + number list spacing ------------------------------------------- */
/*
 * The admin editor emits `<li><p>text</p></li>`, so every bullet carried the `.story-body p` bottom
 * margin (22px). That COLLAPSES with the verbatim `.story-body li` margin (10px) rather than adding
 * to it, so items sat 22px apart (measured) instead of the 10px the source design intended for a
 * list — far enough to read as separate paragraphs. The reference for this was the become-member
 * benefits box (`.member-benefits ul, .member-process ul` in main.css: `display: grid; gap: 14px`),
 * but the final value here is **12px, set deliberately** — article body copy is larger and looser
 * (`font-size: clamp(1.04rem, 1.35vw, 1.24rem)`, `line-height: 1.75`) than that box's small bold
 * text, so it needs slightly tighter item spacing to read as one list. Measured: ul/ol 22 -> 12.
 * Don't "correct" this back to 14px to match the box — the difference is intentional.
 *
 * Uses `li + li` rather than `margin-bottom` so the LAST item adds no trailing space — exactly how
 * a grid gap behaves. The list's own `margin: 0 0 22px` still separates it from the next block.
 *
 * Fixed HERE and not in `member-news-story.css`, which is byte-verbatim from the source design.
 * This file is loaded after it on both blog and member-news detail pages, so these win on order as
 * well as specificity. Applies to plain text items too (legacy WordPress content has no inner `<p>`),
 * which simply go from 10px to the same 12px. taskList items are excluded — they set their own flex
 * layout and already sit at 10px.
 */
.story-body ul:not([data-type='taskList']) > li > p,
.story-body ol > li > p {
  margin: 0;
}

.story-body ul:not([data-type='taskList']) > li,
.story-body ol > li {
  margin-bottom: 0;
}

.story-body ul:not([data-type='taskList']) > li + li,
.story-body ol > li + li {
  margin-top: 12px;
}

/* A single item can still hold more than one paragraph — keep those readable. */
.story-body ul:not([data-type='taskList']) > li > p + p,
.story-body ol > li > p + p {
  margin-top: 12px;
}

/* A nested list belongs to its parent item, so it gets the item gap, not a block margin. */
.story-body li > ul,
.story-body li > ol {
  margin-top: 12px;
  margin-bottom: 0;
}

/* Task lists (checklists) — rendered read-only on the published article -- */
.story-body ul[data-type='taskList'] {
  list-style: none;
  margin: 0 0 22px;
  padding-left: 0.25rem;
}

.story-body ul[data-type='taskList'] li {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 10px;
}

.story-body ul[data-type='taskList'] li > label {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.story-body ul[data-type='taskList'] li > label input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--panco-blue);
  pointer-events: none; /* published content is read-only */
}

.story-body ul[data-type='taskList'] li > div {
  flex: 1 1 auto;
}

.story-body ul[data-type='taskList'] li > div > p {
  margin: 0;
}

/* Code — inline + block -------------------------------------------------- */
.story-body :not(pre) > code {
  padding: 0.14em 0.4em;
  background: rgba(18, 56, 95, 0.07);
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--navy);
}

.story-body pre {
  margin: clamp(20px, 3vw, 28px) 0;
  padding: 16px 18px;
  background: #0f2740;
  color: #e6edf3;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.9em;
  line-height: 1.6;
}

.story-body pre code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

/* YouTube embeds — responsive 16:9 --------------------------------------- */
.story-body div[data-youtube-video] {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin: clamp(24px, 3.5vw, 36px) 0;
}

.story-body div[data-youtube-video] iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}