/* ============================================================
   legal-pages.css — the document pages (about · contact · terms ·
   privacy · content-policy) and the base the purchase pages build on.

   SCOPE DISCIPLINE: every rule below is nested under `.ph-legal`,
   which only these pages put on <body>. platform-home.css is shared
   with the home page and the catalogue; a bare-tag rule added there
   once restyled every component nested inside it. So this file never
   writes a bare selector, and never touches a `.ph-*` class outside
   `.ph-legal`.

   COLOUR: tokens only (docs/BRAND_DESIGN_PLAN.md §3-الف) — both themes
   come from the two token blocks of platform-home.css; nothing here
   names a colour (print is paper, not a theme: the one exception).
   TYPE: the site's scale (--ph-fs-1 … 5), two weights, no
   letter-spacing on Persian (§3-ت).

   RTL: logical properties only (padding-inline-*, border-inline-*,
   inset-inline-*). These pages are dir="rtl"; a physical `left` here
   is a bug that only shows up in one direction.
   ============================================================ */

/* ---------- reading measure: narrow the COLUMN, not the text ----------
   A document gets a document-width column, and then every box inside
   it is already the right width. */
.ph-legal .ph-shell {
  max-width: 50rem;
}

.ph-legal main {
  padding-inline: 0;
}

/* header, page and footer share one edge */
.ph-legal .ph-foot { max-width: 50rem; }

/* one way to move around: the header's two links and the footer's full list. The in-page strip
   (home / this page / five siblings) repeated the footer above every title — hidden; every one
   of its links is in the footer */
.ph-legal main > .ph-crumbs { display: none; }

/* Latin inside Persian prose (an e-mail, a domain, «PDF») in a sans face — the Persian face's own
   Latin is a serif that reads as broken next to it. Letters, digits and @ only: spaces and
   punctuation stay Persian so the line spacing does not move */
@font-face {
  font-family: "Ph Latin";
  src: local("Segoe UI"), local("Roboto"), local("Helvetica Neue"), local("Arial");
  unicode-range: U+0030-0039, U+0040-005A, U+0061-007A;
}
body.ph-legal { font-family: "Ph Latin", var(--ph-font); }

/* ---------- type: reading matter, not a landing page ---------- */
.ph-legal .ph-doc-card {
  padding: 22px 24px;
  line-height: 1.9;
}

.ph-legal .ph-doc-card p,
.ph-legal .ph-doc-list li,
.ph-legal .ph-legal-list > li {
  font-size: var(--ph-fs-3);
  line-height: 1.9;
}

.ph-legal .ph-note {
  border-inline-start-color: var(--ph-light-line); /* a remark, not an action: gold, not leaf */
  padding: 18px 20px;
  font-size: var(--ph-fs-3);
  line-height: 1.9;
}

.ph-legal .ph-lead {
  max-width: 36rem;
  font-size: var(--ph-fs-3);
  line-height: 1.9;
}

.ph-legal .ph-section-desc {
  font-size: var(--ph-fs-3);
  line-height: 1.85;
}

/* A sentence-length document title: one step under the landing headline. */
.ph-legal .ph-title {
  max-width: 24ch;
  margin-block-end: 16px;
  font-size: var(--ph-fs-5);
  line-height: 1.4;
}

.ph-legal .ph-hero-compact { padding-block: clamp(20px, 4vh, 40px) 8px; }
/* the grain tile is a box: on a page whose light is the soft page glow its edge read as a seam */
.ph-legal .ph-hero::before { display: none; }

/* ---------- section rhythm ----------
   A numbered heading gets a hairline that starts at the text and fades
   toward the edge: quiet, and it makes a long policy scannable. */
.ph-legal main .ph-section {
  padding-block-start: 0;
  margin-block-start: clamp(36px, 6vw, 56px);
  scroll-margin-block-start: 24px;
}

.ph-legal .ph-section-head {
  position: relative;
  gap: 6px;
  max-width: none;
  padding-block-end: 12px;
  margin-block-end: 18px;
}

.ph-legal .ph-section-head::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: linear-gradient(to left, var(--ph-line-2), transparent 80%);
}

.ph-legal .ph-section-title {
  font-size: var(--ph-fs-4);
  line-height: 1.5;
}

/* ---------- lists ---------- */
.ph-legal .ph-legal-list > li { padding-inline-start: 2px; }
.ph-legal .ph-doc-list > li::marker { color: var(--ph-light); }
.ph-legal .ph-legal-list strong,
.ph-legal .ph-doc-list strong { font-weight: 700; color: var(--ph-text); }

/* ---------- links in prose: the action green, underlined on an offset baseline ---------- */
.ph-legal main a:not(.ph-btn) {
  color: var(--ph-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--ph-act-line);
  transition: text-decoration-color var(--ph-t-quick) var(--ph-ease);
}

.ph-legal main a:not(.ph-btn):hover { text-decoration-color: currentColor; }
.ph-legal main a code { color: inherit; } /* a linked path is a link: green, never a gold link */
.ph-legal .ph-doc-list code { font-family: ui-monospace, Consolas, monospace; font-size: 0.86em; direction: ltr; unicode-bidi: isolate; }

/* the breadcrumb is navigation, not prose: quiet grey, no underline until hover */
.ph-legal main .ph-crumbs a { color: var(--ph-text-2); text-decoration: none; }
.ph-legal main .ph-crumbs a:hover { color: var(--ph-text); }

/* ---------- the document meta band: what this is, and when it was last revised ---------- */
.ph-legal .ph-docmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-block-start: 4px;
  padding: 12px 16px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-1);
  background: var(--ph-surface);
  font-size: var(--ph-fs-1);
  color: var(--ph-text-2);
}

.ph-legal .ph-docmeta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.ph-legal .ph-docmeta-item b {
  color: var(--ph-text);
  font-weight: 700;
}

.ph-legal .ph-docmeta-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ph-light);
  flex: 0 0 auto;
  align-self: center;
}

/* ---------- on-this-page index ----------
   Built by legal-toc.js from the h2s. Progressive: with no JS the
   container stays empty and collapsed. */
.ph-legal .ph-toc {
  margin-block: 22px 0;
  padding: 14px 16px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-2);
  background: var(--ph-bg-2);
}

.ph-legal .ph-toc:empty { display: none; }

.ph-legal .ph-toc-title {
  margin: 0 0 8px;
  font-size: var(--ph-fs-1);
  font-weight: 700;
  color: var(--ph-text-3);
}

.ph-legal .ph-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2 220px; /* read down each column, not in a zigzag */
  column-gap: 18px;
}

.ph-legal .ph-toc-list li { break-inside: avoid; }

.ph-legal main .ph-toc-list a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--ph-r-1);
  font-size: var(--ph-fs-2);
  color: var(--ph-text-2);
  text-decoration: none;
  line-height: 1.6;
  transition: background-color var(--ph-t-quick) var(--ph-ease), color var(--ph-t-quick) var(--ph-ease);
}

.ph-legal main .ph-toc-list a:hover,
.ph-legal main .ph-toc-list a[aria-current="true"] {
  background: var(--ph-act-soft);
  color: var(--ph-text);
}

/* ---------- contact grid: one column is fine on a phone ---------- */
@media (max-width: 720px) {
  .ph-legal .ph-contact-grid { grid-template-columns: 1fr; }
}

/* ---------- print: paper, not a theme ---------- */
@media print {
  .ph-legal,
  .ph-legal body {
    background: #fff !important;
    color: #111 !important;
  }
  .ph-legal .ph-top .ph-nav,
  .ph-legal .ph-toc,
  .ph-legal .ph-theme {
    display: none !important;
  }
  .ph-legal .ph-shell {
    max-width: none;
    padding: 0;
  }
  .ph-legal .ph-title,
  .ph-legal .ph-section-title,
  .ph-legal .ph-docmeta-item b,
  .ph-legal .ph-doc-card p,
  .ph-legal .ph-legal-list,
  .ph-legal .ph-doc-list,
  .ph-legal .ph-note,
  .ph-legal .ph-lead {
    color: #111 !important;
    max-width: none;
  }
  .ph-legal .ph-doc-card,
  .ph-legal .ph-note,
  .ph-legal .ph-docmeta,
  .ph-legal .ph-contact-item {
    background: #fff !important;
    border: 1px solid #bbb !important;
    break-inside: avoid;
  }
  .ph-legal main a:not(.ph-btn) {
    color: #111 !important;
    text-decoration-color: #888 !important;
  }
  .ph-legal main .ph-section { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-legal main a:not(.ph-btn),
  .ph-legal .ph-toc-list a { transition: none; }
}