/* anashaddadfit.com — text pages (the Coaching Agreement, the onboarding guide).
   Loaded after site.css, which supplies the fonts, colour tokens, header and
   site footer. Calculator pages never load this file. No motion, no scripts.
   Skeleton to copy: specs/content-page.md */

.page {
  --wrap: 41rem; /* about 65 characters of body text per line */
}

.doc {
  padding: 30px 0 72px;
  color: var(--ink-3);
  font-size: 17px;
  line-height: 1.6;
}
.doc p,
.doc ul,
.doc ol {
  margin: 0;
}
.doc p + p,
.doc p + ul,
.doc ul + p,
.doc ul + ul,
.doc h3 + ul,
.doc h3 + p {
  margin-top: 16px;
}

/* Title block */
.doc h1 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: clamp(2.1rem, 10vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.doc .kicker {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 19px;
  font-weight: 600;
}
.doc .lede {
  margin: 22px 0 0;
  color: var(--ink);
  font-size: 18px;
}

/* Section headings */
.doc h2 {
  margin: 0 0 16px;
  color: var(--ink);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.doc h3 {
  margin: 32px 0 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
}
.doc section {
  scroll-margin-top: 20px;
}
.doc .sec {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

/* Lists: the dash is the marker, drawn here, never part of the text */
.dash {
  padding: 0;
  list-style: none;
}
.dash li {
  position: relative;
  padding-inline-start: 26px;
}
.dash li + li {
  margin-top: 12px;
}
.dash li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.8em;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--mut);
}

/* Highlighted summary box ("The short version") */
.box {
  margin: 34px 0 0;
  padding: 24px 22px;
  border: 1px solid var(--line-2);
  border-inline-start: 3px solid var(--acc);
  border-radius: 6px var(--r-lg) var(--r-lg) 6px;
  background: var(--card);
  color: var(--ink);
}
[dir="rtl"] .box {
  border-radius: var(--r-lg) 6px 6px var(--r-lg);
}
.box h2 {
  margin-bottom: 8px;
}
.box .dash li {
  padding-top: 11px;
  padding-bottom: 11px;
}
.box .dash li + li {
  margin-top: 0;
  border-top: 1px solid var(--line);
}
.box .dash li::before {
  top: calc(11px + 0.8em);
  background: var(--ink-2);
}
.box > p:last-child {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 16px;
}

/* "Jump to" navigation: not part of the page text */
.toc {
  margin: 30px 0 0;
  font-size: 15px;
  line-height: 1.35;
}
.toc .toc-h {
  margin: 0 0 6px;
  color: var(--mut);
  font-size: 14px;
}
.toc ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.toc li {
  border-bottom: 1px solid var(--line);
}
.toc a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
  color: var(--ink-2);
  text-decoration: none;
}
.toc a:hover {
  color: var(--ink);
}

/* Links inside the text */
.doc a:not(.toc a) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(245, 241, 234, 0.4);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.doc a:not(.toc a):hover {
  text-decoration-color: var(--ink);
}

/* Version line: the last line of the agreement */
.doc .version {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
}

@media (max-width: 339px) {
  .toc ul {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 700px) {
  .doc {
    padding-top: 44px;
    font-size: 18px;
  }
  .doc .lede {
    font-size: 19px;
  }
  .doc h2 {
    font-size: 26px;
  }
  .doc h3 {
    font-size: 19px;
  }
  .box {
    padding: 28px 30px;
  }
}

/* Source line under the agreement: printed copies only, never on screen */
.print-source {
  display: none;
}

/* Print / save as PDF: white paper, black text, nothing decorative */
@media print {
  .print-source {
    display: block;
    margin: 18pt 0 0;
    color: #000;
    font-size: 10pt;
  }
  @page {
    margin: 18mm 16mm;
  }
  :root {
    color-scheme: light;
  }
  html,
  body {
    background: #fff !important;
    color: #000;
    font-size: 11pt;
  }
  .glow,
  body::after,
  .top,
  .toc,
  .site-foot {
    display: none !important;
  }
  .wrap {
    width: auto;
  }
  .doc,
  .doc * {
    color: #000 !important;
    background: none !important;
    box-shadow: none !important;
  }
  .doc {
    padding: 0;
    font-size: 11pt;
    line-height: 1.5;
  }
  .doc h1 {
    font-size: 22pt;
  }
  .doc .kicker,
  .doc .lede {
    font-size: 12pt;
  }
  .doc h2 {
    font-size: 14pt;
    break-after: avoid;
  }
  .doc h3 {
    font-size: 12pt;
    break-after: avoid;
  }
  .doc li,
  .doc p {
    break-inside: avoid;
  }
  .doc .sec {
    margin-top: 20pt;
    padding-top: 14pt;
    border-top: 0.5pt solid #000;
  }
  .box {
    border: 1pt solid #000;
    border-radius: 0;
    padding: 12pt 14pt;
    break-inside: avoid;
  }
  .box .dash li {
    padding-top: 4pt;
    padding-bottom: 4pt;
  }
  .box .dash li + li {
    border-top: 0;
  }
  .dash li::before {
    background: #000 !important;
  }
  .box .dash li::before {
    top: calc(4pt + 0.8em);
  }
  .doc a:not(.toc a) {
    text-decoration: none;
  }
  .doc .version {
    border-top: 0.5pt solid #000;
  }
}