/**
 * Candor — shared blog content styles.
 *
 * This ONE file styles the post body in three places:
 *   1. The public blog at candordiamonds.com/blog  (Next.js links this file)
 *   2. The WordPress frontend at cms.candordiamonds.com
 *   3. The WordPress block editor (so authors see the real thing while writing)
 *
 * It is mounted into the container at wp-content/candor/blog-content.css and
 * enqueued by the blog-styles.php mu-plugin. Edit it here, commit, redeploy.
 *
 * SCOPING: every rule is scoped to `.blog-content` (the wrapper the storefront
 * puts around the HTML) or `.wp-block-table` (a class Gutenberg emits itself,
 * so it matches inside the editor too). Never add bare `table { }` rules — this
 * file loads on the whole storefront blog route and would leak.
 *
 * COLORS: these mirror the `brand` palette in apps/storefront/tailwind.config.js.
 * That file is the source of truth — if the palette changes there, change it
 * here too. Kept as raw hex because WordPress has no access to the Tailwind config.
 *   brand-dark #1E1D1D   brand-golden #C9A86A   brand-offwhite #FFF8F1
 */

/* ── Tables ────────────────────────────────────────────────────────────────
   Two shapes of table markup reach us and both must work:

   a) Gutenberg table blocks — <figure class="wp-block-table"><table>…</table></figure>.
      The figure is the scroll container.
   b) Bare <table> with no wrapper and no classes — what the posts on this site
      actually contain (Markdown/classic authoring). Handled further down.  */

.blog-content table,
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: left;
}

/* Column headers. The small-caps treatment is scoped to thead so it never hits
   the row-header <th> cells in tbody (long labels look wrong in wide caps). */
.blog-content thead th,
.wp-block-table thead th {
  background: rgba(201, 168, 106, 0.1); /* brand-golden @ 10% */
  border: 1px solid rgba(201, 168, 106, 0.3);
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #1e1d1d;
}

/* Row headers — the leading <th> of a body row. Reads as a label, not a heading. */
.blog-content tbody th,
.wp-block-table tbody th {
  border: 1px solid rgba(30, 29, 29, 0.1);
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: #1e1d1d;
  vertical-align: top;
}

.blog-content td,
.wp-block-table td {
  border: 1px solid rgba(30, 29, 29, 0.1);
  padding: 0.75rem 1rem;
  vertical-align: top;
}

.blog-content tbody tr:nth-child(even),
.wp-block-table tbody tr:nth-child(even) {
  background: rgba(30, 29, 29, 0.02);
}

/* Images inside cells must not take the full-width treatment the storefront
   gives standalone post images. */
.blog-content .wp-block-table img,
.wp-block-table img {
  margin: 0;
  width: auto;
}

/* (a) Gutenberg blocks: the figure scrolls, so the table may exceed the column. */
.blog-content .wp-block-table,
.wp-block-table {
  margin: 2rem 0;
  width: 100%;
  overflow-x: auto;
}

.blog-content .wp-block-table table,
.wp-block-table table {
  min-width: 32rem;
}

/* (b) Bare tables have no wrapper to scroll, so the table is its own container.
   On desktop it stays a real table and fills the column; only on narrow screens
   does it become a scrolling block. No min-width here — that would push the
   element itself wider than a phone viewport and overflow the page. */
.blog-content > table {
  margin: 2rem 0;
  max-width: 100%;
}

@media (max-width: 640px) {
  .blog-content > table {
    display: block;
    overflow-x: auto;
  }
}

/* ── WordPress block options ───────────────────────────────────────────────
   These classes come from the editor sidebar, so they arrive in the HTML. */

.wp-block-table.is-style-stripes table {
  border: 0;
}

.wp-block-table.is-style-stripes th,
.wp-block-table.is-style-stripes td {
  border: 0;
  border-bottom: 1px solid rgba(30, 29, 29, 0.1);
}

.blog-content th.has-text-align-center,
.blog-content td.has-text-align-center,
.wp-block-table th.has-text-align-center,
.wp-block-table td.has-text-align-center {
  text-align: center;
}

.blog-content th.has-text-align-right,
.blog-content td.has-text-align-right,
.wp-block-table th.has-text-align-right,
.wp-block-table td.has-text-align-right {
  text-align: right;
}

/* The table block's own caption. The storefront already styles <figcaption>
   for images; this keeps captions consistent when they sit under a table. */
.blog-content .wp-block-table figcaption,
.wp-block-table figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  text-align: center;
  color: rgba(30, 29, 29, 0.5);
}