/*
 * Overrides for the theme's compiled stylesheet.
 *
 * style.css is the WordPress theme's own file, copied byte for byte, and it
 * stays that way — every fix to it lives here instead, loaded after it, so the
 * two never have to be diffed against each other to work out what was changed
 * and by whom.
 *
 * ---------------------------------------------------------------------------
 * 1. Horizontal gutters on combined-class containers
 * ---------------------------------------------------------------------------
 *
 * Two rules in style.css set a `padding` SHORTHAND with 0 in the horizontal
 * slot, on elements that already carry a class supplying the 20px side gutter.
 * The shorthand resets both sides to zero:
 *
 *   .snp-container                    { padding: 0 20px; }
 *   .snp-section                      { padding: clamp(40px, 6vw, 72px) 0; }
 *
 *   .snp-narrow                       { padding: 0 20px; }
 *   .page-template-page-legal
 *     .legal-content                  { padding: clamp(36px, 6vw, 64px) 0 64px; }
 *
 * The theme's own templates combine each pair on one element —
 * `<div class="snp-container snp-section">` in archive-ravim.php,
 * taxonomy-ravimikategooria.php and index.php, and the .legal-content wrapper
 * in page-legal.php — so the gutter is lost on every archive, the 404 and all
 * seven legal pages. `.snp-container` and `.snp-section` have equal specificity
 * and the later one wins; the legal selector simply outranks `.snp-narrow`.
 *
 * On a desktop viewport this is invisible: both containers are max-width
 * constrained well inside the window, so there is empty space beside the text
 * either way. It only shows below about 1160px, and it is ugly on a phone —
 * body copy runs flush into both screen edges while the header and footer,
 * which set their gutters on a single class, keep theirs.
 *
 * This is the theme's defect, not the port's: the same markup and the same
 * stylesheet would have rendered the same way under WordPress. It was never
 * seen because the pages it affects had no content and the legal pages were
 * never created at all.
 *
 * Fixed with the longhand properties, which the shorthand cannot clobber.
 */

:root {
  /* The gutter the theme uses everywhere it gets it right — header, footer,
     hero, archive header, .snp-container, .snp-narrow. Named so the value
     lives in one place instead of the eight it is currently repeated in. */
  --snp-gutter: 20px;
}

.snp-container.snp-section {
  padding-left: var(--snp-gutter);
  padding-right: var(--snp-gutter);
}

.page-template-page-legal .legal-content {
  padding-left: var(--snp-gutter);
  padding-right: var(--snp-gutter);
}

/*
 * ---------------------------------------------------------------------------
 * 2. Wide content inside an article must not widen the page
 * ---------------------------------------------------------------------------
 *
 * `.entry-content table { width: 100%; }` collapses gracefully until a cell
 * holds something unbreakable — a long INN, a URL, a dosage string — at which
 * point the table pushes past the viewport and takes the whole page with it,
 * because nothing in the theme establishes a scroll container. The result is a
 * page that scrolls sideways on a phone and a right-hand gutter that looks
 * broken on every OTHER element.
 *
 * Nothing triggers this yet — there are no medications — which is exactly why
 * it is worth setting now rather than discovering it in an article later.
 */
.entry-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* `display: block` on the table drops the default table layout, so the cells
   need to be told to size themselves again. */
.entry-content table > tbody,
.entry-content table > thead {
  display: table;
  width: 100%;
}

/* Long unbroken strings in body copy — URLs in sources, chemical names — wrap
   instead of forcing the column wider than the screen. */
.entry-content,
.legal-content,
.article-sources {
  overflow-wrap: break-word;
}