/* ==========================================================================
   Syriana Connect — legal pages (terms, acceptable use, privacy, contract).
   Loaded after style.css, which already carries the fonts, the brand tokens
   and the header/footer rules. This file only adds the long-form document
   layout, so nothing here can disturb the marketing page.
   ========================================================================== */

.doc {
  max-width: 78ch;              /* long Arabic prose reads badly full-width */
  margin-inline: auto;
  padding-block: 40px 64px;
}

.doc-head { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 8px; }
.doc-head h1 { font-size: clamp(1.5rem, 5vw, 2.1rem); margin: 0 0 .35em; }
.doc-meta { color: var(--ink-soft); font-size: .9375rem; margin: 0; }
.doc-meta span + span::before { content: '·'; margin-inline: .5em; }

/* Table of contents */
.doc-toc {
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-block: 28px;
}
.doc-toc h2 { font-size: 1rem; margin: 0 0 .6em; color: var(--connect-900); }
.doc-toc ol { margin: 0; padding-inline-start: 1.3em; columns: 2; column-gap: 32px; }
.doc-toc li { margin-bottom: .35em; break-inside: avoid; }
@media (max-width: 560px) { .doc-toc ol { columns: 1; } }

.doc section { scroll-margin-top: 84px; margin-block: 34px; }
.doc h2 {
  font-size: 1.2rem;
  margin: 0 0 .6em;
  padding-bottom: .35em;
  border-bottom: 2px solid var(--connect-100);
  color: var(--connect-900);
}
.doc h3 { font-size: 1.02rem; margin: 1.4em 0 .4em; color: var(--connect-700); }
.doc p, .doc li { line-height: 1.85; }
.doc ul, .doc ol { padding-inline-start: 1.4em; }
.doc li { margin-bottom: .5em; }
.doc strong { color: var(--connect-900); }

/* A callout for the clauses a customer must not miss. */
.doc-note {
  border-inline-start: 4px solid var(--connect-500);
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-block: 20px;
}
.doc-note p:last-child { margin-bottom: 0; }
.doc-note--warn { border-inline-start-color: #C2410C; background: #FFF7ED; }

.doc-table { width: 100%; border-collapse: collapse; margin-block: 18px; font-size: .9375rem; }
.doc-table th, .doc-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: start; }
.doc-table th { background: var(--bg-alt); color: var(--connect-900); font-weight: 600; }
.doc-table-wrap { overflow-x: auto; }

.doc-updated { color: var(--ink-soft); font-size: .9375rem; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); }

/* ---- Printable contract ------------------------------------------------- */
.fill {
  display: inline-block;
  min-width: 12ch;
  border-bottom: 1px dotted var(--ink-soft);
  padding-inline: .4em;
}
.fill--wide { min-width: 28ch; }
.fill--full { display: block; min-width: 0; width: 100%; margin-top: .3em; }

.sign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 36px; }
@media (max-width: 560px) { .sign-grid { grid-template-columns: 1fr; } }
.sign-box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; }
.sign-box h3 { margin-top: 0; }
.sign-line { margin-top: 42px; border-top: 1px solid var(--ink-soft); padding-top: 6px; font-size: .875rem; color: var(--ink-soft); }

.print-btn { margin-block: 8px 24px; }

@media print {
  .site-header, .site-footer, .print-btn, .skip-link, .doc-toc { display: none !important; }
  .doc { max-width: none; padding: 0; }
  .doc section { break-inside: avoid; margin-block: 18px; }
  .doc h2 { border-bottom-color: #999; }
  .doc-note { border: 1px solid #999; border-inline-start-width: 3px; background: none; }
  body { font-size: 11pt; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* Footer document links, added alongside the copyright line in index.html. */
.footer-legal-links ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-legal-links a { color: inherit; }