/*
 * Shared fixes for the legal pages (TEE-1414, LIVE-01). The pages are Google
 * Docs exports, linked from each page's <head> after its own <style> so these
 * rules win ties. A fresh export drops the link; the test
 * `packages/app/src/config/__tests__/legalPages.a11y.test.ts` fails when it does.
 */

/* Terms has no visible title in its text, so its <h1> is for screen readers. */
.legal-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Reflow (SC 1.4.10). The export fixes the body at 468pt wide with 72pt padding
 * on every side: 816px plus the 8px default body margin each way, so anything
 * narrower than 832px (a phone, or a desktop at 400% zoom) scrolled sideways.
 * Desktop is left exactly as exported; only narrower screens change.
 */
@media (max-width: 832px) {
  body.doc-content {
    margin: 0 auto;
    padding: 32px 24px;
    /* Breaks only a string too long for the line, such as a URL. */
    overflow-wrap: break-word;
  }

  /*
   * The few tables set fixed point widths per cell; let them share the width.
   * Inside a narrow cell, words hyphenate where English allows (the pages set
   * lang="en"), and break anywhere only as a last resort, so the page never
   * scrolls sideways. One of them is also a layout table holding a whole
   * section, so it can't be given a scroll region of its own.
   */
  .doc-content table {
    width: 100%;
  }

  .doc-content td,
  .doc-content th {
    width: auto;
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  /* The export indents list items 36pt; in a cell a third of the width is too much. */
  .doc-content td li {
    margin-left: 18pt;
  }
}

@media (max-width: 480px) {
  body.doc-content {
    padding: 24px 16px;
  }
}