/*
 * Structural styling for blog content blocks (templates/storefront/blog_blocks/).
 *
 * WHY THIS FILE EXISTS
 * Each of the 8 blog templates ships its own prose CSS, but every one of them
 * only ever styled p / h2 / h3 / blockquote / img / pre / code. Headings h1 and
 * h4-h6, list markers, the delimiter, tables, figures and checklists were left
 * to browser defaults — which Tailwind's preflight resets away — so those block
 * types rendered as undifferentiated body text and looked nothing like what the
 * author composed in the editor.
 *
 * SPECIFICITY IS LOAD-BEARING
 * Every rule below is a SINGLE class (0,1,0). Each template's own prose rules
 * are descendant selectors like `.bs-entry-body h2` (0,1,1) and therefore WIN.
 * That is deliberate: templates keep their own typography and this file only
 * fills the gaps they never covered. Do not raise the specificity here — doing
 * so would flatten all 8 templates into one look.
 *
 * THEMING
 * Templates override the --bb-* variables on their own content wrapper (see the
 * "blog block theming" block in each blog_templates/*.html). Sizes are in `em`
 * so they scale with whatever font-size the surrounding template sets.
 */

:root {
  --bb-ink: #111827;          /* headings */
  --bb-muted: #6b7280;        /* captions, attribution, delimiter dots */
  --bb-border: #e5e7eb;
  --bb-surface: #f9fafb;      /* table header fill */
  --bb-code-bg: #1f2937;
  --bb-code-text: #f9fafb;
  --bb-link: #2563eb;         /* inline links (marks.href) */
  --bb-gap: 1.5rem;           /* vertical rhythm between blocks */
}

/* Fallback rhythm. Templates that already set `p { margin-bottom: … }` keep
   theirs; this only reaches the block types they never styled. */
.bb-block {
  margin: 0 0 var(--bb-gap);
}

.bb-block:last-child {
  margin-bottom: 0;
}

/* ────────────────────────────── inline link ───────────────────────────── */
/* Applies inside any rich-text block (text/heading/quote/lists/checklist) —
   render_spans puts this class on every `<a>` it emits for marks.href. */

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

.bb-link:hover {
  text-decoration-thickness: 2px;
}

/* ───────────────────────────── headings ───────────────────────────── */
/* h2/h3 are almost always overridden by the template; h1 and h4-h6 are not,
   and without these they render at body size. */

.bb-h1,
.bb-h2,
.bb-h3,
.bb-h4,
.bb-h5,
.bb-h6 {
  color: var(--bb-ink);
  font-weight: 700;
  line-height: 1.25;
}

.bb-h1 { font-size: 2em;    margin: 1.5em 0 0.6em; }
.bb-h2 { font-size: 1.6em;  margin: 1.5em 0 0.6em; }
.bb-h3 { font-size: 1.32em; margin: 1.4em 0 0.5em; }
.bb-h4 { font-size: 1.12em; margin: 1.3em 0 0.5em; font-weight: 600; }

.bb-h5 {
  font-size: 1em;
  margin: 1.2em 0 0.4em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bb-h6 {
  font-size: 0.85em;
  margin: 1.2em 0 0.4em;
  font-weight: 600;
  color: var(--bb-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bb-h1:first-child,
.bb-h2:first-child,
.bb-h3:first-child,
.bb-h4:first-child,
.bb-h5:first-child,
.bb-h6:first-child {
  margin-top: 0;
}

/* ───────────────────────────── lists ───────────────────────────── */
/* Preflight sets `ul, ol { list-style: none; padding: 0 }`, so a bare list
   renders as unmarked lines. */

.bb-list {
  padding-left: 1.75em;
  margin: 0 0 var(--bb-gap);
}

.bb-list--unordered { list-style: disc outside; }
.bb-list--ordered   { list-style: decimal outside; }

.bb-list__item {
  margin-bottom: 0.5em;
}

.bb-list__item::marker {
  color: var(--bb-muted);
}

/* ───────────────────────────── checklist ───────────────────────────── */
/* Two classes (0,2,0) on purpose — this one rule HAS to outrank the templates'
   `.xx-prose ul { padding-left: … }` (0,1,1), or the checkbox column inherits a
   list indent it should not have. */

.bb-checklist.bb-block {
  list-style: none;
  padding-left: 0;
}

.bb-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin-bottom: 0.5em;
}

.bb-checklist__box {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.35em;
  accent-color: var(--bb-ink);
}

.bb-checklist__item.is-checked .bb-checklist__label {
  text-decoration: line-through;
  color: var(--bb-muted);
}

/* ───────────────────────────── image ───────────────────────────── */

.bb-figure {
  margin: var(--bb-gap) 0;
  text-align: center;
}

.bb-figure__img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 70vh;
  margin: 0 auto;
  border-radius: 0.5rem;
}

.bb-figure__caption {
  margin-top: 0.6em;
  font-size: 0.82em;
  font-style: italic;
  color: var(--bb-muted);
}

/* ───────────────────────────── quote ───────────────────────────── */

/* No `.bb-quote` rule on purpose: six templates style `blockquote` themselves,
   and a baseline here would add a left border to writeup's quote, which is
   deliberately a large “ glyph with no rule. The two templates that style no
   blockquote at all (shapebox, test-template) carry their own. */

.bb-quote__text {
  margin: 0;
}

.bb-quote__attribution {
  margin-top: 0.6em;
  font-size: 0.8em;
  font-style: normal;   /* beats the italic inherited from `blockquote` */
  color: var(--bb-muted);
}

/* ───────────────────────────── code ───────────────────────────── */

.bb-code {
  margin: var(--bb-gap) 0;
}

.bb-code__lang {
  margin-bottom: 0.4em;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-muted);
}

.bb-code__pre {
  background: var(--bb-code-bg);
  color: var(--bb-code-text);
  padding: 1rem 1.15rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-size: 0.85em;
  line-height: 1.65;
  white-space: pre;
}

/* ───────────────────────────── delimiter ───────────────────────────── */
/* Mirrors the editor's three dots. Painted as a background because pseudo
   elements are not rendered on void elements like <hr>. */

.bb-delimiter {
  width: 57px;              /* 3 dots at the 19px period below */
  height: 5px;
  margin: 2.25rem auto;
  border: 0;
  background-image: radial-gradient(circle, var(--bb-muted) 2.5px, transparent 2.6px);
  background-size: 19px 5px;
  background-repeat: repeat-x;
  background-position: center;
}

/* ───────────────────────────── table ───────────────────────────── */

.bb-table-wrap {
  margin: var(--bb-gap) 0;
  overflow-x: auto;         /* a wide table scrolls itself, never the page */
}

.bb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.bb-table th,
.bb-table td {
  border: 1px solid var(--bb-border);
  padding: 0.55em 0.8em;
  text-align: left;
  vertical-align: top;
}

.bb-table th {
  background: var(--bb-surface);
  font-weight: 600;
  color: var(--bb-ink);
}