/* ═══════════════════════════════════════════════════════════════
   epa · legal document pages
   ───────────────────────────────────────────────────────────────
   Shared by privacy.html and terms.html — same template, same
   type scale, so the two pages stop drifting from each other by
   copy-paste. Depends on assets/styles.css for fonts, color and
   the shared --fs-* tokens (--fs-caption, --fs-body); link that
   stylesheet first.
═══════════════════════════════════════════════════════════════ */

:root {
  --legal-brand: 26px;  /* the "Pepper" name beside the P mark at the top */
  --legal-h1:    40px;  /* page title — "Privacy Policy" */
  --legal-h2:    24px;  /* numbered section headings */
  --legal-fine:  13px;  /* footer line */
}

* { box-sizing: border-box; margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

main { max-width: 680px; margin: 0 auto; padding: 56px 24px 96px; }

/* The P mark plus the name, the same lockup as the homepage nav: the mark
   as tall as the type and a third of the type size apart. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-family: var(--sans);
  font-size: var(--legal-brand);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}
.brand img {
  display: block;
  height: 1em;
  width: auto;
}

h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--legal-h1);
  margin: 36px 0 6px;
}

.updated {
  color: rgba(33,28,24,.64);
  font-size: var(--fs-caption);
  margin-bottom: 8px;
}

.draft {
  background: rgba(201,162,39,.16);
  color: #6E5716;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: var(--fs-caption);
  margin: 18px 0 30px;
}

/* Who operates epa. One plain line under the date, not a boxed legal
   notice — the statutory detail (head office, capital) lives in the
   footer instead, the way European sites keep an imprint at the bottom. */
.operator {
  color: rgba(33,28,24,.64);
  font-size: var(--fs-caption);
  margin: 0 0 30px;
}

/* Arabic runs inside otherwise-Latin lines: isolate so the bidi
   algorithm doesn't drag neighbouring punctuation into the RTL run. */
.ar { direction: rtl; unicode-bidi: isolate; }

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--legal-h2);
  margin: 34px 0 10px;
}

p, li {
  color: rgba(33,28,24,.82);
  font-size: var(--fs-body);
}

/* Logical property, not padding-left: the Arabic pages are the same
   markup with dir="rtl", so the bullet indent has to follow the
   reading direction rather than sit on the left in both. */
ul { padding-inline-start: 22px; margin: 10px 0; }
a { color: var(--wine); }

/* ─── Arabic ──────────────────────────────────────────────────────
   EPA Sans has no Arabic glyphs, so Arabic text falls through it to the
   platform's own Arabic face: SF Arabic or Geeza Pro on Apple systems,
   Noto or Segoe elsewhere. EPA Sans sits before the Latin-capable
   fallbacks on purpose, so Latin runs inside Arabic text (epa, Apple,
   Google) render in the brand face rather than in Tahoma. */
[lang="ar"] {
  --sans-ar: 'SF Arabic', 'Geeza Pro', 'Noto Sans Arabic', 'EPA Sans',
             'Segoe UI', Tahoma, system-ui, sans-serif;
}

/* `body` sets its own font-family, so a rule on the <html> element alone
   loses to it for everything inside. Name body (and the headings, which
   ask for --serif) explicitly. */
[lang="ar"] body {
  font-family: var(--sans-ar);
  line-height: 1.9;         /* Arabic needs more air than Latin */
}

[lang="ar"] h1,
[lang="ar"] h2 { font-family: var(--sans-ar); }

/* The lockup is Latin and stays in EPA Sans and LTR even on the Arabic
   pages, so it reads as the logo rather than as a word. */
[lang="ar"] .brand {
  font-family: var(--sans);
  direction: ltr;
}

/* Language switch, sitting quietly beside the "last updated" line. */
.langswitch {
  font-size: var(--fs-caption);
  margin: 0 0 4px;
}
.langswitch a { color: rgba(33,28,24,.64); text-decoration: underline; }
.langswitch a:hover { color: var(--wine); }

footer {
  margin-top: 56px;
  font-size: var(--legal-fine);
  /* Carries the statutory company details, so it has to be readable:
     alphas under .62 on --paper fall below 4.5:1. */
  color: rgba(33,28,24,.64);
  line-height: 1.8;
}
footer a { color: inherit; }