/*
 * Project data tables.
 *
 * On the original WordPress site these tables were flat PNG screenshots pasted
 * into the page, so they blurred when scaled and could not reflow on narrow
 * screens. They are real HTML tables here. The palette deliberately matches the
 * original images so the pages still look like themselves.
 */

.lens-table-wrap {
  margin: 1.8em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  text-align: left;
}

.lens-table {
  width: 100%;
  min-width: 520px;
  border-collapse: separate;
  border-spacing: 3px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a4038;
}

.lens-table caption {
  caption-side: top;
  background: #f7c884;
  color: #3b332c;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 16px 18px;
  margin-bottom: 3px;
  border-radius: 4px 4px 0 0;
  text-align: center;
}

.lens-table th {
  background: #f7c884;
  color: #3b332c;
  font-weight: 700;
  text-align: left;
  padding: 14px 18px;
  border-radius: 4px;
  vertical-align: middle;
}

.lens-table td {
  background: #fdf1e4;
  padding: 14px 18px;
  border-radius: 4px;
  vertical-align: top;
}

/* Narrow serial-number column in the beneficiary tables */
.lens-table--data th:first-child,
.lens-table--data td:first-child {
  width: 68px;
  text-align: center;
  font-weight: 600;
}

/* Right-most count column reads better aligned with its heading */
.lens-table--data th:last-child,
.lens-table--data td:last-child {
  width: 22%;
}

/* Interventions / Status tables: first column is a label */
.lens-table--labelled td:first-child {
  background: #fbe3c6;
  font-weight: 600;
  width: 26%;
  color: #3b332c;
}

.lens-table--labelled td:last-child > p {
  margin: 0 0 0.6em;
}

.lens-table--labelled td:last-child > p:last-child {
  margin-bottom: 0;
}

/* Menu tables: day column is the label */
.lens-table--menu td:first-child {
  background: #fbe3c6;
  font-weight: 600;
  width: 24%;
  color: #3b332c;
}

@media (max-width: 800px) {
  .lens-table {
    font-size: 0.9rem;
  }
  .lens-table caption {
    font-size: 1.1rem;
    padding: 13px 14px;
  }
  .lens-table th,
  .lens-table td {
    padding: 11px 13px;
  }
  .lens-table--labelled td:first-child,
  .lens-table--menu td:first-child {
    width: 30%;
  }
}