/* =========================================================
   ACCESSIBILITY.CSS
   The accessibility statement page (accessibility.html).

   Written against the site's own tokens rather than against
   another page's classes. The hero system, the downloads list
   and the product grid all expect markup this page does not
   have -- a photo layer, a wash, a rail -- so borrowing their
   classes would have meant inventing empty elements to satisfy
   them. A statement is a column of text; this is the smallest
   stylesheet that sets one.

   Nothing here is used anywhere else on the site, and no rule
   in this file is defined outside it.
   ========================================================= */

.a11y {
  background-color: var(--color-surface);
  padding-block: 120px 140px;
}

/* The same 1140 container the rest of the site uses, with the
   87px rail zone reserved on the physical right so the column
   lines up with every other page even though this page has no
   rail of its own. */
.a11y__inner {
  padding-inline-start: 87px;
}

/* 620px, not the container's full width: a statement is read
   top to bottom, and at 17px this lands around 70 characters a
   line -- the upper end of the comfortable range. The 1053px
   content zone would have given 120, which is unreadable. */
.a11y__inner > * {
  max-width: 620px;
}

.a11y__eyebrow {
  margin: 0;
  font-family: "Jost", var(--font-english), sans-serif;
  font-weight: var(--font-weight-regular);
  font-size: 8px;
  line-height: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #000000;
}

/* The brand rule, to the same spec the heroes use: 67.6 x 1.5,
   blue 70 / red 30. Red is first in the DOM and this is an RTL
   row, so it lands physically right -- same as everywhere. */
.a11y__rule {
  display: flex;
  width: 67.6px;
  height: 1.5px;
  margin: 12px 0 0;
}
.a11y__rule-segment--red  { flex: 30; background-color: #CC2F3A; }
.a11y__rule-segment--blue { flex: 70; background-color: #005E8E; }

.a11y__title {
  margin: 26px 0 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 64px;
  line-height: 68px;
  color: #000000;
}

.a11y__lede {
  margin: 30px 0 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 17px;
  line-height: 28px;
  color: var(--color-text);
}

.a11y__heading {
  margin: 56px 0 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 24px;
  line-height: 34px;
  color: #000000;
}

.a11y__text {
  margin: 18px 0 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 17px;
  line-height: 28px;
  color: var(--color-text-muted);
}

/* The markers are the site's own blue, drawn with ::before
   rather than list-style so they sit on the text's own
   baseline and keep their distance in RTL. */
.a11y__list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.a11y__list li {
  position: relative;
  padding-inline-start: 18px;
  margin-block-start: 10px;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 17px;
  line-height: 28px;
  color: var(--color-text-muted);
}

.a11y__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 12px;            /* optically centred on the first line */
  width: 5px;
  height: 5px;
  background-color: var(--color-brand-blue, #005E8E);
}

/* A definition-style block: a fixed label column and the value
   beside it, so the four rows read as one table without being
   marked up as data. */
.a11y__contact {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.a11y__contact li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 11px;
  border-block-start: 1px solid var(--color-line);
  font-family: var(--font-hebrew);
  font-size: 17px;
  line-height: 28px;
}

.a11y__contact li:last-child { border-block-end: 1px solid var(--color-line); }

.a11y__contact-label {
  flex: none;
  width: 110px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.a11y__contact-value {
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
}

/* Underlined, not colour-only: a link that is distinguished
   from its surrounding text by colour alone fails WCAG 1.4.1,
   and these sit inside a block of text of the same weight. */
.a11y__link {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 200ms ease;
}

.a11y__link:hover { color: var(--color-brand-blue, #005E8E); }

.a11y__link:focus-visible {
  outline: 1px solid var(--color-brand-blue, #005E8E);
  outline-offset: 4px;
}

.a11y__updated {
  margin: 40px 0 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .a11y__link { transition: none; }
}


/* =========================================================
   THE RHYTHM OF A LEGAL PAGE

   Both legal pages -- the accessibility statement and the privacy
   policy -- are set from the rules above. The privacy policy is a
   denser document: more sections, and sections that carry a list
   rather than a single paragraph. Two things that did not show on
   the first page show on the second, and both are fixed here.

   1. A HEADING HAS TO BELONG TO ITS OWN TEXT. The rule above gives
      every block an 18px top margin, so the gap under a heading was
      the same as the gap between two paragraphs. Everything sat at
      an equal distance and nothing read as grouped. The space below
      a heading is now smaller than the space between paragraphs,
      which is what makes a heading look attached to what follows it
      rather than floating between two blocks.

   2. THE SPACE ABOVE A HEADING CARRIES THE SECTION BREAK, so it is
      widened here: with short sections, 56px was not enough to
      separate them once the heading itself had been pulled down
      onto its text.

   The size change is scoped to .a11y--legal, which only the privacy
   policy carries. At nine headings the 24px of the accessibility
   page read as a ladder of titles rather than as a document; at five
   headings and 21px it reads as prose. The accessibility statement
   is deliberately left exactly as it was.
   ========================================================= */

.a11y__heading {
  margin-block-start: 68px;   /* was 56 -- see 2 above */
}

.a11y__heading + .a11y__text,
.a11y__heading + .a11y__list {
  margin-block-start: 12px;   /* was 18 -- see 1 above */
}

.a11y__text + .a11y__text,
.a11y__text + .a11y__list {
  margin-block-start: 20px;
}

.a11y--legal .a11y__heading {
  font-size: 21px;
  line-height: 30px;
}