/*
 * "Comparison" style for the core Table block, matching the Feature Comparison
 * table on the pricing page. Registered in functions.php, so it loads in both
 * the editor and the front end.
 *
 * Selectors lead with `figure` to outrank core's `.wp-block-table.aligncenter`,
 * which otherwise switches the figure to `display: table`. A table box can't
 * shrink below its content or clip overflow, so it spilled past the content
 * column and lost its right border.
 */
figure.wp-block-table.is-style-comparison {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 2rem 0;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  overflow-x: auto;
}

figure.wp-block-table.is-style-comparison table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.45;
}

figure.wp-block-table.is-style-comparison thead {
  border-bottom: 0;
}

figure.wp-block-table.is-style-comparison th,
figure.wp-block-table.is-style-comparison td {
  border: 0;
  border-top: 1px solid #ebebeb;
  padding: 14px 6px;
  /* !important: the editor wraps aligned tables in `.wp-block[data-align]`,
     whose break-word rule outranks any selector we could reasonably write. */
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none;
  vertical-align: middle;
  text-align: center;
  color: #333;
  font-weight: 400;
  background: #fff;
}

figure.wp-block-table.is-style-comparison th:first-child,
figure.wp-block-table.is-style-comparison td:first-child {
  text-align: left;
  padding-left: 16px;
}

figure.wp-block-table.is-style-comparison thead th {
  background: #f2f2f2;
  border-top: 0;
  border-bottom: 1px solid #ebebeb;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

figure.wp-block-table.is-style-comparison thead th:first-child {
  color: #4e4ed8;
}

figure.wp-block-table.is-style-comparison tbody td:first-child {
  font-weight: 600;
}

figure.wp-block-table.is-style-comparison tbody tr:hover td {
  background: #fafafa;
}

figure.wp-block-table.is-style-comparison figcaption {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid #ebebeb;
  font-size: 12.5px;
}

/* Eight columns can't fit a phone; scroll sideways instead of stacking words. */
@media (max-width: 760px) {
  figure.wp-block-table.is-style-comparison table {
    min-width: 760px;
  }
}