/*
 * Purpose: The Compare page - a shortlist of places read side by side.
 *
 * The table scrolls horizontally inside its own container rather than pushing
 * the page wide, so four columns still work on a phone.
 */

.rh-compare {
  padding-bottom: var(--space-64);
}

.rh-compare__head {
  padding-block: var(--rh-crumbs-gap) var(--space-24);
  max-width: 62ch;
}

.rh-compare__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}

.rh-compare__intro {
  margin-top: var(--space-12);
  font-size: var(--fs-lead);
  color: var(--rh-text-secondary);
}

.rh-compare__scroll {
  overflow-x: auto;
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
}

.rh-compare__table {
  width: 100%;
  border-collapse: collapse;
  /* Below this the columns stop being readable and the container scrolls. */
  min-width: 640px;
}

.rh-compare__table th,
.rh-compare__table td {
  padding: var(--space-12) var(--space-16);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rh-border);
}

.rh-compare__table tr:last-child th,
.rh-compare__table tr:last-child td {
  border-bottom: 0;
}

.rh-compare__corner {
  width: 160px;
  background-color: var(--rh-surface);
}

.rh-compare__col {
  background-color: var(--rh-surface);
  min-width: 180px;
}

.rh-compare__name {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--rh-text-primary);
}

.rh-compare__name:hover {
  color: var(--rh-teal);
}

.rh-compare__remove {
  margin-top: var(--space-4);
  padding: 0;
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
  text-decoration: underline;
  cursor: pointer;
}

.rh-compare__remove:hover {
  color: var(--rh-error-text);
}

.rh-compare__label {
  width: 160px;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--rh-text-secondary);
}

.rh-compare__value {
  font-size: var(--fs-small);
  color: var(--rh-text-primary);
}

/*
 * A field the owner has not filled in says so. An empty cell would read as a
 * definite "no deposit" or "no food", which is a different claim entirely.
 */
.rh-compare__value.is-missing {
  color: var(--rh-text-secondary);
  font-style: italic;
}