/* The shared chrome's own baseline: everything the header and the footer would
 * otherwise inherit from whichever page they land on.
 *
 * siteChrome.js gives every page the same markup, but the markup only names the
 * values it changes. Anything it does not name (the body font, its size, its
 * line height, its colour) was inherited from the host page, and the five pages
 * that render the chrome do not agree on those:
 *
 *   /                          line-height 1.5, colour gray-900
 *   /legal, /about-us          line-height 1.65 (a reading measure for a long
 *                              document), which made the header 2px taller and
 *                              the Custom Build pill 2px taller than elsewhere
 *   /templates/ultigame/       colour gray-800
 *   /tools/ultigame-upgrade/   colour black, and no font smoothing
 *
 * So the chrome pins them here instead of taking whatever the page happens to
 * say. Every page loads this file: SiteChrome.jsx imports it for the two React
 * entries, and generate-partials.mjs copies it to
 * /site-chrome/site-chrome-base.css for the three static pages to link.
 *
 * Plain CSS with no Tailwind directives, so it can be served as-is to a page
 * with no build step, and so the copy in public/ needs no compilation.
 *
 * Everything is wrapped in :where() so it carries zero specificity: it beats
 * the browser's defaults and the host page's body rules, and loses to every
 * utility class in the markup, including the ones that set a border width, a
 * text size or an underline back on.
 *
 * The --op-* values come from /brand/brand.css, which all five pages link. The
 * literals after them are what renders if that file ever fails to load.
 */

:where(#site-header, #site-footer) {
  /* Read by siteChromeBehavior.js to tell whether this file reached the page at
     all. Nothing is styled with it. A new static page has to remember to link
     this stylesheet, and a page that loads Tailwind of its own would look almost
     right without it while quietly inheriting the wrong colour and line height
     again, which is the drift this file exists to end. So the chrome checks for
     this property and loads itself if it is missing. */
  --op-chrome-base: loaded;
  font-family: var(--op-font-sans, ui-sans-serif, system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: start;
  text-indent: 0;
  text-transform: none;
  color: var(--op-gray-900, #111827);
  font-feature-settings: normal;
  font-variation-settings: normal;
  /* Four of the five pages set this on their own body and the fifth did not,
     which on macOS is enough to make the same wordmark look heavier there. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* What the chrome needs out of Tailwind's preflight. The three pages that
 * compile or load Tailwind already get all of this globally; declaring it here
 * as well is what lets /legal and /about-us skip preflight entirely, which they
 * have to: a global reset would land on the host page's own content, and on
 * /legal that means resetting the margins of a 700-line document to fix a
 * header.
 */
:where(#site-header, #site-footer),
:where(#site-header, #site-footer) :where(*, ::before, ::after) {
  box-sizing: border-box;
  /* Utilities set border-width and border-color but never border-style, which
     is why Tailwind's own reset does this. Without it every `border-b` in the
     menu is invisible. */
  border: 0 solid var(--op-gray-200, #e5e7eb);
}

:where(#site-header, #site-footer) :where(a) {
  color: inherit;
  text-decoration: none;
}

:where(#site-header, #site-footer) :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

/* Inline images and icons sit on the text baseline, which leaves a stray gap
   under the wordmark and the social row. */
:where(#site-header, #site-footer) :where(img, svg) {
  display: block;
  max-width: 100%;
}

:where(#site-header, #site-footer) :where(h1, h2, h3, p, ul, li) {
  margin: 0;
  padding: 0;
}