/**
 * F1GMAT APU Theme · table.css
 * Editorial table styling — aged paper headers, hairline rows.
 *
 * BOOTSTRAP 5.3 INTEGRATION
 *   Tables tagged with the .table class (added by Bootstrap-aware paste
 *   plugins, or manually by editors) inherit Bootstrap 5.3's CSS custom
 *   property cascade for table styling.
 *
 *   IMPORTANT: Bootstrap 5.3 changed how table backgrounds are painted.
 *   Instead of applying `background-color` directly to cells, it uses
 *   `box-shadow: inset 0 0 0 9999px var(...)` on every cell to allow
 *   table variants (hover, striped, active) to compose. This shadow
 *   reads from these variables in fallback order:
 *
 *     --bs-table-bg-state  →  --bs-table-bg-type  →  --bs-table-accent-bg
 *
 *   The cell ALSO sets `background-color: var(--bs-table-bg)` separately,
 *   so we override that too. Setting --bs-table-bg alone is NOT enough —
 *   the box-shadow paints over it.
 *
 *   To make the .table class render with editorial paper aesthetics, we
 *   override the FULL set of variables, including the *-state, *-type,
 *   and *-accent-bg fallbacks. All are set to `transparent` so the
 *   parent .node__content / page background shows through.
 *
 *   Override values mirror the variables defined in style.css :root —
 *   if the palette changes there, tables follow automatically.
 */

/* Bootstrap 5.3 table custom property overrides — keeps editorial paper
   aesthetic when authors apply the .table or .table-responsive class.
   Setting all background-related variables to transparent prevents
   Bootstrap's box-shadow trick from painting white over our tables. */
.table,
table.table,
.table-responsive table,
.table > :not(caption) > * > * {
  --bs-table-bg: transparent;
  --bs-table-bg-type: transparent;
  --bs-table-bg-state: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-color: var(--fg-ink-soft);
  --bs-table-color-type: var(--fg-ink-soft);
  --bs-table-color-state: var(--fg-ink-soft);
  --bs-table-border-color: var(--fg-hairline);
  --bs-table-border-width: 0.5px;
  --bs-table-striped-bg: rgba(237, 229, 209, 0.2);
  --bs-table-striped-color: var(--fg-ink-soft);
  --bs-table-hover-bg: rgba(237, 229, 209, 0.35);
  --bs-table-hover-color: var(--fg-ink);
  /* Drop Bootstrap's default vertical padding shrink so editorial
     spacing holds across .table and plain table elements. */
  --bs-table-cell-padding-x: 14px;
  --bs-table-cell-padding-y: 12px;
}

/* Header cells get aged paper specifically — overrides the transparent
   default above. Higher specificity than the variable cascade because
   we're setting actual background-color, not the variable. */
.table > thead > tr > th,
table.table > thead > tr > th,
.table-responsive table > thead > tr > th {
  --bs-table-bg: var(--fg-paper-aged);
  --bs-table-bg-type: var(--fg-paper-aged);
  --bs-table-bg-state: var(--fg-paper-aged);
  --bs-table-accent-bg: var(--fg-paper-aged);
  background-color: var(--fg-paper-aged);
}

table {
  background: transparent;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
  font-family: Georgia, serif;
  font-size: 16px;
  margin: 16px 0 24px;
  width: 100%;
}

table table {
  font-size: 1em;
}

thead > tr {
  border-bottom: 2px solid var(--fg-ink);
}

table th,
table tr th,
table thead tr th,
.views-table th,
.views-table thead th {
  background: var(--fg-paper-aged);
  color: var(--fg-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 0;
  border-bottom: 2px solid var(--fg-ink);
  padding: 12px 14px;
  text-align: left;
}

table th a,
table th a:hover,
table th a:focus {
  color: var(--fg-ink);
  text-decoration: underline;
  text-decoration-color: var(--fg-gold-dark);
}

table tbody tr,
tr.odd,
tr.even {
  background: transparent;
  border-bottom: 0.5px solid var(--fg-hairline);
}

table td {
  background: transparent;
  color: var(--fg-ink-soft);
  border: 0;
  border-bottom: 0.5px solid var(--fg-hairline);
  padding: 12px 14px;
  font-family: Georgia, serif;
  font-size: 16px;
  vertical-align: top;
  text-align: left;
}

table tbody tr th {
  background: transparent;
  vertical-align: top;
  font-weight: 500;
}

.table-striped tbody tr:nth-of-type(odd),
table.sticky-header tbody tr:nth-of-type(odd) {
  background: rgba(237, 229, 209, 0.2);
}

[dir="rtl"] tr td,
[dir="rtl"] tr th {
  text-align: right;
}

/* Scrollable table wrapper */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 16px 0;
}

/* Mobile table behavior — horizontal scroll if wider than viewport */
@media (max-width: 767px) {
  table {
    font-size: 14px;
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  table th,
  table td {
    padding: 8px 10px;
    font-size: 14px;
  }

  /* Allow wrapping inside cells on very narrow screens */
  table.wrap-cells td,
  table.wrap-cells th {
    white-space: normal;
  }
}