/* ==========================================================================
   Nutriq AI — legal pages stylesheet
   Shared by terms-of-use.html, policies.html, copyright.html
   No build step, no CDN, no JavaScript. Just drop the folder on a host.
   ========================================================================== */

/* --- Brand tokens (from the locked NutriQ AI design system) --------------- */
:root {
  --forest-deep:   #0F3D2E;
  --primary-green: #1E8A5B;
  --bright-green:  #25B06E;
  --mint:          #E8F0EA;
  --paper:         #FBFBF8;
  --ink:           #0C1A13;
  --amber:         #E0A24E;
  --coral:         #D86A4F;

  --muted:  #5A6B62;
  --border: #DDE5E0;

  --max-width: 760px;
  --radius: 12px;

  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* --- Header -------------------------------------------------------------- */
.site-header {
  background: var(--forest-deep);
  color: #fff;
  padding: 22px 24px;
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* Locale-aware logo mark: "N" for English pages, "ن" for Arabic pages. */
.brand__mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--bright-green);
  color: var(--forest-deep);
  font-weight: 800;
  font-size: 18px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.site-nav a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.site-nav a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.site-nav a[aria-current="page"] {
  background: var(--bright-green);
  color: var(--forest-deep);
}

/* --- Layout -------------------------------------------------------------- */
main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* --- Typography ---------------------------------------------------------- */
h1 {
  font-size: clamp(28px, 5vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--forest-deep);
}

h2 {
  font-size: clamp(20px, 3.5vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 44px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--forest-deep);
  /* Offset for in-page anchor links so headings don't hide under the header. */
  scroll-margin-top: 20px;
}

h3 {
  font-size: 19px;
  margin: 32px 0 10px;
  color: var(--forest-deep);
  scroll-margin-top: 20px;
}

p, li { margin: 0 0 14px; }
ul, ol { padding-left: 22px; margin: 0 0 18px; }
li { margin-bottom: 8px; }
strong { font-weight: 700; }

a { color: var(--primary-green); }
a:hover { color: var(--bright-green); }

/* The "Last updated / Effective date" line under each h1. */
.doc-meta {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 8px;
}

/* --- Table of contents (policies.html) ----------------------------------- */
.toc {
  background: var(--mint);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 28px 0 8px;
}

.toc h2 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  color: var(--primary-green);
}

.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: 6px; }

/* --- Tables -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 0 0 22px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  min-width: 520px;
}

th, td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

thead th {
  background: var(--mint);
  color: var(--forest-deep);
  font-weight: 700;
  border-bottom: 2px solid var(--border);
}

tbody tr:last-child td { border-bottom: 0; }

/* --- Callouts ------------------------------------------------------------ */

/* Legally significant blocks (e.g. "not medical advice", "non-refundable"). */
.notice {
  background: var(--mint);
  border-left: 4px solid var(--primary-green);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin: 0 0 22px;
}

.notice p:last-child { margin-bottom: 0; }

/* All-caps warranty/liability text — kept legible, not shouty. */
.legalese {
  font-size: 15px;
  letter-spacing: 0.01em;
  color: #3A4A42;
}

/* --- Unfilled placeholders ----------------------------------------------- */
/* Every [bracketed] value from the source documents is wrapped in this class
   so nothing ships half-finished. Search the folder for "todo" before going
   live — if this highlight appears on the page, that value is still missing. */
.todo {
  background: #FBEBD6;
  border-bottom: 2px solid var(--amber);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--mint);
  padding: 32px 24px;
  font-size: 14.5px;
  color: var(--muted);
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
}

.site-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }

/* --- Small screens ------------------------------------------------------- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  main { padding: 32px 20px 64px; }
  .site-header__inner { flex-direction: column; align-items: flex-start; }
}

/* --- Print (compliance filings, app-store submissions, PDF export) -------- */
@media print {
  .site-header, .site-footer, .toc { display: none; }
  body { font-size: 11pt; background: #fff; }
  main { max-width: none; padding: 0; }
  h2 { page-break-after: avoid; }
  .todo { background: none; border-bottom: 1px solid #000; }
}

/* --- Dark mode ----------------------------------------------------------- *

   TODO (Haider): decide whether these pages follow the reader's OS dark-mode
   setting, or stay light-only.

   Left empty, the pages render light for everyone — which is safe and already
   works. Fill the block below to opt into dark mode.

   The trade-off:
   - Following the OS setting matches the app (which ships all four
     Arabic/English x light/dark variants), so a user tapping "Terms" from a
     dark-themed app doesn't get flash-banged by a white page.
   - Staying light-only means the page a store reviewer opens, a lawyer prints,
     or you screenshot for an INPDP filing looks identical every time. Legal
     documents are usually treated as fixed artifacts, not themed UI.

   To opt in, redefine the tokens here — do NOT restyle individual elements,
   since every rule above already reads from these variables:

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  ?;   ... suggestion: use --forest-deep as the page background
    --ink:    ?;   ... body text must hit 4.5:1 contrast against --paper
    --mint:   ?;   ... card/callout fill, one step lighter than --paper
    --border: ?;
    --muted:  ?;
  }
}
*/