/**
 * Styles for content the platform publishes, and for nothing else.
 *
 * Everything is scoped under .vatine-content, the wrapper the pipeline puts
 * around article HTML. A site's own typography, colors and layout are never
 * touched: themes set their globals and some set body text small on mobile,
 * which is theirs to decide everywhere except inside our articles.
 */

/* Tables scroll sideways instead of spilling out of a narrow screen. The
   wrapper div also carries an inline overflow style from the pipeline, so
   scrolling works even on sites where this stylesheet is not installed. */
.vatine-content .vatine-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.2em 0;
}

.vatine-content table {
  width: 100%;
  border-collapse: collapse;
}

/* A floor under the column width: three columns of squeezed 60px cells are
   less readable than a table you swipe. */
.vatine-content .vatine-table table {
  min-width: 480px;
}

.vatine-content th,
.vatine-content td {
  padding: 10px 14px;
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.vatine-content th {
  font-weight: 600;
}

@media (max-width: 768px) {
  /* A readability floor for phones. max() keeps a larger theme size as is and
     only lifts text a global setting shrank below 16px, which is the point
     where Hebrew body text stops being comfortably readable. */
  .vatine-content,
  .vatine-content p,
  .vatine-content li,
  .vatine-content th,
  .vatine-content td {
    font-size: max(1em, 16px);
    line-height: 1.75;
  }

  .vatine-content th,
  .vatine-content td {
    padding: 8px 10px;
  }
}