/* Stoke Tiles redesign: the normalisations the theme's style.css was providing.
 *
 * A rebuilt page no longer loads `style.css` - see st-performance.php for why.
 * That sheet was doing three useful things among the many harmful ones, and
 * the redesign had come to rely on them without ever saying so. They are said
 * here instead, scoped to the redesign and no wider.
 *
 * Loaded FIRST, before tokens.css and everything after it. That is the whole
 * safety mechanism: a reset here and a component class elsewhere usually score
 * the same specificity, so the later one wins, and everything is later than
 * this file. Every blanket reset in the redesign belongs in here and nowhere
 * else - put one in a later sheet and it starts overruling components, which
 * is how the primary button came to render espresso on sage.
 */

/* Colour. The theme's stylesheet sets `a { color: #3c3c3c }` and
   `ul, ol { color: #3c3c3c }` at element level, which beats anything a
   component merely inherits. Still needed on pages that load that sheet. */
.st-scope :where(a, ul, ol),
.st-redesign :where(a, ul, ol) { color: inherit; }

/* Links. The old sheet set `a { text-decoration: none }`, so every `.st-`
   component that wanted an underline added one and none of them turned it off.
   Without it the browser underlines every link on the page. */
.st-scope :where(a) { text-decoration: none; }

/* Fields. The old sheet zeroed the user agent's padding on form controls; the
   quantity stepper and the search field are drawn to exact heights and pick up
   1px/2px of it otherwise. */
.st-scope :where(input, textarea, select, button) {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.st-scope :where(input, textarea, select) { padding: 0; }

/* Images. Inline by default, which leaves a few pixels of descender space
   under every one of them inside a link or a figure. */
.st-scope :where(img, svg, video) { display: block; max-width: 100%; }
.st-scope :where(img) { height: auto; }

/* Lists. The old sheet set a margin and a line-height on `ul, ol`; the
   redesign's lists are all laid out by their own classes and want neither. */
.st-scope :where(ul, ol) { margin: 0; padding: 0; }
.st-scope :where(li) { list-style: none; }

/* Prose is the exception: text a client writes in the editor still wants the
   marks of a list. */
.st-prose :where(ul, ol) { margin: 0 0 1.2em; padding-left: 1.4em; }
.st-prose :where(ul) li { list-style: disc; }
.st-prose :where(ol) li { list-style: decimal; }

/* Headings and paragraphs carry the user agent's margins otherwise, which the
   old sheet also removed. Components set their own spacing with gap. */
.st-scope :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; }

/* Tables. Only the specification table uses one, and it draws its own rules. */
.st-scope :where(table) { border-collapse: collapse; width: 100%; }
.st-scope :where(th, td) { padding: 0; text-align: left; font-weight: inherit; }