/* Blog insights: table styling for markdown-rendered post bodies.
 *
 * bluka.webflow.css ships no rules for table/th/td, because Webflow's editor
 * does not produce tables. Markdown posts do, so tables rendered at browser
 * defaults: no borders, no padding, no header treatment.
 *
 * Scoped to .text-rich-text so it only affects post bodies. Kept in a separate
 * file so a future Webflow re-export cannot overwrite it.
 */

.text-rich-text table {
  width: 100%;
  margin: var(--fixed--2rem, 2rem) 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--_colors---grey--100, #ddd);
  border-radius: var(--border-radius--xsmall, .5rem);
  overflow: hidden;
  font-family: var(--_typography---font-family--primary, "Inter VF", Arial, sans-serif);
  font-size: var(--fixed--1rem, 1rem);
  line-height: 1.5;
}

.text-rich-text thead th {
  background: var(--_colors---grey--50, #f1efed);
  color: var(--_colors---grey--500, #4d4d4d);
  text-align: left;
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .7rem .875rem;
  border-bottom: 1px solid var(--_colors---grey--100, #ddd);
  white-space: nowrap;
}

.text-rich-text tbody td {
  padding: .7rem .875rem;
  vertical-align: top;
  border-bottom: 1px solid #e6e4e0;
  color: var(--_colors---primary--black, #000);
}

.text-rich-text tbody tr:last-child td { border-bottom: 0; }

/* First column acts as the row label. */
.text-rich-text tbody td:first-child { font-weight: 500; }

.text-rich-text table a { color: var(--_colors---primary--accent, #f3350c); }

/* Narrow screens: scroll the table rather than crushing the columns. */
@media screen and (max-width: 767px) {
  .text-rich-text table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .text-rich-text thead th,
  .text-rich-text tbody td { white-space: nowrap; }
}
