/*
 * Shared styling for the public حيويتي pages (/, /privacy, /terms).
 *
 * These are static, dependency-free pages: no framework, no external font, no
 * CDN. They are the pages Google's OAuth reviewers load, so they must render
 * correctly on a cold cache, on a phone, and with no JavaScript at all.
 *
 * Arabic-first: `dir="rtl"` on the document, and every rule below is written so
 * the layout follows the text direction rather than fighting it — logical
 * properties (`margin-inline`, `border-inline-start`) instead of left/right.
 */

:root {
  --bg: #0b0f14;
  --surface: #131920;
  --surface-2: #1a222c;
  --border: #232c38;
  --text: #eef3f8;
  --text-2: #a7b4c4;
  --text-3: #74839a;
  --accent: #43c4a0;
  --accent-soft: rgba(67, 196, 160, 0.12);
  --radius: 16px;
  --max: 760px;
}

* { box-sizing: border-box; }

html {
  /* Prevents iOS Safari inflating text in landscape. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* System Arabic stack: no webfont to download, correct shaping everywhere. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Arabic", "Segoe UI",
    "Noto Sans Arabic", "Helvetica Neue", Arial, sans-serif;
  /* Arabic needs more leading than Latin: ascenders, descenders and diacritics
     occupy far more of the em box. */
  line-height: 1.85;
  font-size: 17px;
}

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding: 28px 20px 72px;
}

/* ------------------------------------------------------------------ header */

header.site {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #101720 0%, var(--bg) 100%);
}

.brandrow {
  max-width: var(--max);
  margin-inline: auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid rgba(67, 196, 160, 0.3);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.brandname {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0;
}

nav.site {
  margin-inline-start: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

nav.site a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  /* 44px is the comfortable touch minimum; padding plus line-height reaches it. */
  display: inline-block;
}

nav.site a:hover,
nav.site a:focus-visible { color: var(--text); border-color: var(--border); }

/* -------------------------------------------------------------------- type */

h1 {
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.35;
  margin: 28px 0 12px;
  font-weight: 800;
}

h2 {
  font-size: clamp(19px, 4vw, 23px);
  line-height: 1.5;
  margin: 40px 0 10px;
  font-weight: 700;
}

h3 { font-size: 17px; margin: 24px 0 6px; font-weight: 700; }

p { margin: 0 0 14px; color: var(--text-2); }
.lead { font-size: clamp(17px, 3.6vw, 20px); color: var(--text); }
strong { color: var(--text); font-weight: 700; }

ul { margin: 0 0 16px; padding-inline-start: 22px; color: var(--text-2); }
li { margin-bottom: 8px; }

a { color: var(--accent); }

/* ------------------------------------------------------------------ blocks */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin: 14px 0;
}

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

/* Two-up only once there is genuinely room; one column on a phone. */
@media (min-width: 620px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.note {
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 20px 0;
}

.note p { color: var(--text); margin: 0; }

.warn {
  border-inline-start: 3px solid #e0a64e;
  background: rgba(224, 166, 78, 0.1);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 20px 0;
}

.warn p { color: var(--text); margin: 0; }

.meta { color: var(--text-3); font-size: 14px; }

/* Latin/number runs inside Arabic text: keep them LTR so they read correctly. */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

footer.site {
  border-top: 1px solid var(--border);
  margin-top: 48px;
  padding: 24px 20px 40px;
}

footer.site .inner {
  max-width: var(--max);
  margin-inline: auto;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

footer.site a { color: var(--text-2); text-decoration: none; font-size: 14px; }
footer.site a:hover { color: var(--text); }
footer.site .spacer { margin-inline-start: auto; }

/* Respect a reduced-motion preference even though motion here is minimal. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}