/**
 * Base-tier table element styling, converted to literal CSS from Sass
 * source:
 * src/stories/global/data-table-mixin.scss (`@mixin data-table-mixin`)
 *
 * REAL SELECTOR SCOPE: the mixin's ~75 lines target `table`/`tr`/`td`/
 * `th`/`caption`, but the mixin is designed to be `@include`d inside a
 * wrapping selector rather than applied bare to `table` sitewide. Its only
 * consumer, src/stories/components/table/table.scss, does:
 *
 *   .rich-text,
 *   .block-content {
 *     @include data-table-mixin;
 *   }
 *
 * so every rule below is correctly scoped under `.rich-text` /
 * `.block-content table ...`, not a bare `table` selector. This matches
 * the compiled production output at dist/css/table.css exactly (diffed
 * during this conversion).
 *
 * Design tokens are consumed via var(--site-*) custom properties defined
 * in css/base/variables.css (Task 1's output). Bootstrap's own runtime
 * custom properties (--bs-primary, --bs-grey-60) are referenced directly,
 * unchanged from the Sass source, since they are already valid CSS as-is.
 *
 * MEDIA QUERY BREAKPOINTS: Sass's media-breakpoint-up(sm) / (lg) mixins
 * resolve to $grid-breakpoints map lookups (--site-grid-breakpoints-sm:
 * 576px, --site-grid-breakpoints-lg: 992px in variables.css). CSS custom
 * properties cannot be used inside an @media condition, so the resolved
 * literal px values are used here directly; each is commented with its
 * source token name for traceability.
 */

.rich-text table,
.block-content table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  table-layout: auto;
  border: 0;
}

.rich-text table + table,
.block-content table + table {
  margin-block-start: calc(var(--site-spacer) * 4);
}

/* --site-grid-breakpoints-sm: 576px */
@media (min-width: 576px) {

  .rich-text table,
  .block-content table {
    display: table;
  }
}

/* --site-grid-breakpoints-lg: 992px */
@media (min-width: 992px) {

  .rich-text table,
  .block-content table {
    table-layout: fixed;
  }
}

.rich-text table tr td,
.rich-text table tr th,
.block-content table tr td,
.block-content table tr th {
  word-wrap: break-word;
}

.rich-text table tr td strong,
.rich-text table tr th strong,
.block-content table tr td strong,
.block-content table tr th strong {
  font-weight: var(--site-font-weight-semibold);
}

.rich-text table tr th,
.block-content table tr th {
  background-color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  color: var(--site-white);
  font-size: 0.875rem;
  letter-spacing: calc(var(--site-spacer) * 0.2);
  padding: calc(var(--site-spacer) * 1.25) var(--site-spacer);
  text-transform: uppercase;
}

.rich-text table tr th a,
.block-content table tr th a {
  color: var(--site-white);
}

.rich-text table tr td,
.block-content table tr td {
  border: 1px solid var(--bs-grey-60);
  font-size: 1rem;
  line-height: var(--site-line-height-base);
  padding: calc(var(--site-spacer) * 0.5) var(--site-spacer);
}

.rich-text table tr td span.table-group-title,
.block-content table tr td span.table-group-title {
  color: var(--bs-primary);
  font-size: 1.25rem;
  font-weight: var(--site-font-weight-bold);
  line-height: var(--site-line-height-base);
}

.rich-text table a,
.block-content table a {
  text-decoration: none;
}

.rich-text table caption,
.block-content table caption {
  font-size: 0.875rem;
}