/* The legal pages (privacy, terms, delete-account, support). A plain reading
   layout in the site's colours and fonts, with no 3D scene. Tokens mirror
   :root in styles.css; change both together. */

@font-face {
  font-family: 'General Sans';
  src: url('../assets/fonts/GeneralSans-Latin.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../assets/fonts/NunitoSans-Latin.woff2') format('woff2');
  font-weight: 200 1000;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('../assets/fonts/NotoSansArabic.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+200C-200F;
}

:root {
  --p-clear: #f8f5ff;
  --p-soft: #f0e9ff;
  --p-subtle: #d9c6ff;
  --p-base: #7c02fd;
  --p-strong: #5b01b9;
  --p-dark: #3c007c;
  --p-inverse: #25004b;
  --ink: #1b1030;
  --ink-2: #4a3f66;
  --focus: #3c007c;
  --gutter: max(16px, 4.5vw);
  --font-head: 'General Sans', 'Nunito Sans', system-ui, sans-serif;
  --font-body: 'Nunito Sans', system-ui, sans-serif;
  color-scheme: light;
}

[dir='rtl'],
[lang='ar'] {
  --font-head: 'Noto Sans Arabic', 'General Sans', sans-serif;
  --font-body: 'Noto Sans Arabic', 'Nunito Sans', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--p-clear);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Re-read the font token where the language changes inside the page. */
.doc,
.l10n {
  font-family: var(--font-body);
}

/* One language at a time once legal.js has run; both without JavaScript. */
html.js[lang='en'] .doc[lang='ar'],
html.js[lang='ar'] .doc[lang='en'],
html.js[lang='en'] .l10n[lang='ar'],
html.js[lang='ar'] .l10n[lang='en'] {
  display: none;
}
html:not(.js) .l10n + .l10n::before {
  content: ' / ';
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 50;
  background: var(--p-base);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
}
.skip:focus {
  top: 12px;
}

/* ---------- top bar ---------- */

.legal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) var(--gutter) 8px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--p-base);
  text-decoration: none;
  border-radius: 10px;
  padding: 4px;
}
.brand-bull,
.brand-word {
  display: block;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.brand-bull {
  --m: url('../assets/img/bull.svg');
  width: 41px;
  height: 24px;
}
.brand-word {
  --m: url('../assets/img/wordmark.svg');
  width: 72px;
  height: 22px;
}

.lang-btn {
  display: inline-grid;
  place-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--p-base);
  box-shadow: 0 3px 0 var(--p-subtle);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.lang-btn:lang(ar) {
  font-family: 'Geeza Pro', 'Segoe UI', 'Noto Naskh Arabic', 'Noto Sans Arabic UI', Tahoma, sans-serif;
}
.lang-btn:lang(en) {
  font-family: 'Nunito Sans', sans-serif;
}

/* ---------- the document ---------- */

.legal-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 8px var(--gutter) 48px;
}

.doc {
  background: #fff;
  border: 1px solid var(--p-soft);
  border-radius: 24px;
  box-shadow: 0 4px 0 var(--p-subtle);
  padding: clamp(20px, 5vw, 48px);
  margin-bottom: 24px;
  overflow-wrap: anywhere;
}
.doc[lang='ar'] {
  line-height: 1.8;
}

.doc h1,
.doc h2,
.doc h3 {
  font-family: var(--font-head);
  color: var(--p-inverse);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.doc h1 {
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--p-base);
}
.doc h2 {
  font-size: 21px;
  font-weight: 600;
  margin: 32px 0 8px;
}
.doc h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 6px;
}
.doc p,
.doc ul,
.doc ol {
  margin: 0 0 14px;
}
.doc ul,
.doc ol {
  padding-inline-start: 1.4em;
}
.doc li {
  margin-bottom: 6px;
}
.doc li::marker {
  color: var(--p-base);
}
.doc a {
  color: var(--p-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.doc .updated {
  color: var(--ink-2);
  font-size: 15px;
  margin-bottom: 24px;
}

/* Links to the other pages. The footer no longer lists support and account
   deletion, so this list keeps every page one tap away. */
.related {
  background: #fff;
  border: 1px solid var(--p-soft);
  border-radius: 24px;
  padding: clamp(20px, 5vw, 32px) clamp(20px, 5vw, 48px);
  margin-bottom: 24px;
}
.related h2 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 600;
  color: var(--p-inverse);
  margin: 0 0 12px;
}
.related ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.related a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--p-clear);
  color: var(--p-strong);
  font-weight: 700;
  text-decoration: none;
}
.related a:hover {
  background: var(--p-soft);
}

/* Founder profiles on about.html, once tools/legal-pages.py lists any. */
.doc .team {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  padding: 0;
}
.person img {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}
.person-name {
  font-weight: 700;
  margin: 8px 0 0 !important;
}
.person-role {
  color: var(--ink-2);
  margin: 0 !important;
}
html.js[lang='en'] .person-role [lang='ar'],
html.js[lang='ar'] .person-role [lang='en'] {
  display: none;
}

.back {
  text-align: center;
  margin: 8px 0 0;
}
.back a {
  color: var(--p-base);
  font-weight: 800;
}

/* ---------- footer ---------- */

/* src/footer.css styles the footer, shared with the home page. */

@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
  .brand-word {
    display: none;
  }
  .doc {
    border-radius: 18px;
  }
}