/*
 * Data tables in rich text (Text + Media + CTA, Accordion answers).
 * GMPFHS-186: one site-wide look, the joining accordion table
 * (easier to read), not the contact-us contribution table.
 *
 * Migrated Kentico content also uses tables purely for layout, for example
 * the video pages that sit a Vimeo embed beside its caption. Those hold an
 * iframe, so `:not(:has(iframe))` keeps the data-table look away from them.
 */

.gmpf-contribution-table-title {
  margin-block: var(--space-lg) var(--space-sm);
  font-family: var(--font-family-display);
  font-size: var(--font-size-h4, 1.25rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-default);
}

:is(
    .gmpf-page-main
      :is([data-testid='gmpf-tmc-body'], [data-testid^='gmpf-acc-panel'])
      table,
    .gmpf-page-main table.table,
    .gmpf-contribution-table,
    .retirement-table
  ):not(:has(iframe)) {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  overflow: hidden;
  margin-block-end: var(--space-lg);
  border: 1px solid var(--color-table-border, #d9d9d9);
  font-size: 15px;
  line-height: 1.5;
}

:is(
    .gmpf-page-main
      :is([data-testid='gmpf-tmc-body'], [data-testid^='gmpf-acc-panel'])
      table,
    .gmpf-page-main table.table,
    .gmpf-contribution-table,
    .retirement-table
  ):not(:has(iframe))
  :is(th, td) {
  border: 1px solid var(--color-table-border, #d9d9d9);
  padding: 15px;
  text-align: center;
  vertical-align: middle;
  font-size: 15px;
  line-height: 1.5;
}

/* Six-column tables need the tighter cells to fit a phone. */
@media (max-width: 768px) {
  :is(
      .gmpf-page-main
        :is([data-testid='gmpf-tmc-body'], [data-testid^='gmpf-acc-panel'])
        table,
      .gmpf-page-main table.table,
      .gmpf-contribution-table,
      .retirement-table
    ):not(:has(iframe))
    :is(th, td) {
    padding: 16px 10px;
    font-size: 14px;
  }
}

/*
 * The header band: a real <thead>, or the first row where the migrated
 * markup never had one. `no-header` marks label/value tables whose first
 * row is data, not column headings.
 *
 * The gradient belongs to the row, not the cells. A per-cell background
 * restarts it in every column, which bands the header teal, purple, teal,
 * purple instead of running once from left to right.
 */
:is(
    .gmpf-page-main
      :is([data-testid='gmpf-tmc-body'], [data-testid^='gmpf-acc-panel'])
      table,
    .gmpf-page-main table.table,
    .gmpf-contribution-table,
    .retirement-table
  ):not(:has(iframe))
  thead
  tr,
:is(
    .gmpf-page-main
      :is([data-testid='gmpf-tmc-body'], [data-testid^='gmpf-acc-panel'])
      table,
    .gmpf-page-main table.table,
    .gmpf-contribution-table,
    .retirement-table
  ):not(:has(iframe)):not(.no-header):not(:has(thead))
  > tbody
  > tr:first-child {
  background: var(--gradient-table-header);
}

:is(
    .gmpf-page-main
      :is([data-testid='gmpf-tmc-body'], [data-testid^='gmpf-acc-panel'])
      table,
    .gmpf-page-main table.table,
    .gmpf-contribution-table,
    .retirement-table
  ):not(:has(iframe))
  thead
  :is(th, td),
:is(
    .gmpf-page-main
      :is([data-testid='gmpf-tmc-body'], [data-testid^='gmpf-acc-panel'])
      table,
    .gmpf-page-main table.table,
    .gmpf-contribution-table,
    .retirement-table
  ):not(:has(iframe)):not(.no-header):not(:has(thead))
  > tbody
  > tr:first-child
  > :is(th, td) {
  background: transparent;
  color: #fff;
  font-weight: 700;
  border-color: #fff;
}

:is(.gmpf-contribution-table, .retirement-table):not(:has(iframe)) tbody td {
  background-color: #fff;
  color: var(--color-text-default);
  font-variant-numeric: tabular-nums;
}

.gmpf-page-main
  table.no-header:not(
    :has(> tbody > tr:is(.blue-row, .purple-row, .purple-blue-row))
  )
  > tbody
  > tr:first-child
  > :is(th, td) {
  background: #fff;
  color: var(--color-text-default);
  font-weight: inherit;
}

/*
 * Worked examples (Abby's pension pot, the lump sum comparisons). The
 * migrated markup bands each row with `blue-row`, `purple-row` or
 * `purple-blue-row` and drops the arithmetic operator into a `spacer` row.
 * Nothing in the theme claimed those hooks, so the examples rendered as
 * plain grids with the operator loose in the cell. Band them in our own
 * palette rather than the legacy site's blue and purple blocks.
 */
.gmpf-page-main
  table:has(> tbody > tr:is(.blue-row, .purple-row, .purple-blue-row)) {
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.gmpf-page-main
  table:has(> tbody > tr:is(.blue-row, .purple-row, .purple-blue-row))
  > tbody
  > tr
  > :is(th, td) {
  border: 0;
  padding: var(--space-md) var(--space-lg);
}

.gmpf-page-main
  table:has(> tbody > tr:is(.blue-row, .purple-row, .purple-blue-row))
  > tbody
  > tr:not(.spacer)
  > :is(th, td) {
  background: var(--color-surface-lavender);
  color: var(--color-brand-dark);
}

.gmpf-page-main
  table:has(> tbody > tr:is(.blue-row, .purple-row, .purple-blue-row))
  > tbody
  > tr:is(.purple-row, .purple-blue-row)
  > :is(th, td) {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

.gmpf-page-main
  table:has(> tbody > tr:is(.blue-row, .purple-row, .purple-blue-row))
  > tbody
  > tr:not(.spacer)
  > :is(th, td):first-child {
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}

.gmpf-page-main
  table:has(> tbody > tr:is(.blue-row, .purple-row, .purple-blue-row))
  > tbody
  > tr:not(.spacer)
  > :is(th, td):last-child {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}

/* The spacer row exists only to carry the operator between two bands. */
.gmpf-page-main
  table:has(> tbody > tr:is(.blue-row, .purple-row, .purple-blue-row))
  > tbody
  > tr.spacer
  > :is(th, td) {
  background: transparent;
  padding: var(--space-2xs) var(--space-lg);
}

/*
 * Only the spacer rows draw the operator as a badge. Elsewhere the migrated
 * content already reads the operator inline ("+ £8,767.20"), so a circle on
 * one stray span would stand out against its own siblings.
 */
.gmpf-page-main tr.spacer .table-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-pill);
  background: var(--color-neutral-white);
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

/*
 * Outside the worked examples a stray operator span sits after the figure it
 * acts on. The migrated cell already carries `position: relative` and the
 * span an inline `left`, so honouring that puts the operator back in the gap
 * between the two columns. Never set `display` on the cell itself: that drops
 * it out of the table layout and the browser wraps it in an anonymous cell.
 */
.gmpf-page-main tr:not(.spacer) td .table-action-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Beat inline header styles left on migrated contact-us tables. */
.gmpf-contribution-table thead tr {
  background: var(--gradient-table-header) !important;
}

.gmpf-contribution-table thead th {
  background: transparent !important;
  color: #fff !important;
  border-color: #fff !important;
  padding: 15px !important;
  text-align: center !important;
}