/* ============================================================
 * css/content/index.php — Content page styles for paycaltech.com
 * ============================================================ */

/* ── Page wrapper ────────────────────────────────────────── */
.doc-article {
  max-width: 860px;
  margin: var(--mar-lg) auto;
  padding: 0 var(--pad-md);
}

/* Space between multiple articles on the same page (policies) */
.doc-article + .doc-article {
  margin-top: calc(var(--mar-lg) * 2);
  padding-top: var(--pad-lg);
  border-top: 2px solid var(--color-border-soft);
}

/* ── Article header ──────────────────────────────────────── */
.doc-article-header {
  margin-bottom: var(--mar-lg);
  padding-bottom: var(--pad-md);
  border-bottom: 1px solid var(--color-border-soft);
}

.doc-article-header h1,
.doc-article-header h2 {
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--heading-accent-color, var(--color-primary));
  margin: 0 0 var(--mar-sm);
  line-height: 1.2;
}

/* Subtitle / deck paragraph */
.deck {
  font-size: var(--font-md);
  color: var(--color-text-muted);
  margin: 0 0 var(--mar-xs);
  line-height: 1.5;
}

/* Meta line ("Last updated: ...") */
.doc-article-meta {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  margin: var(--mar-xs) 0 0;
}
.doc-article-meta time { font-style: italic; }

/* ── Article body ────────────────────────────────────────── */
.doc-article-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Content sections ────────────────────────────────────── */
.doc-section {
  margin-top: var(--mar-lg);
  padding-top: var(--pad-md);
  border-top: 1px solid var(--color-border-soft);
}

/* First child: no top border/padding so it sits flush under article header */
.doc-article-body > .doc-section:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.doc-section h2 {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 var(--mar-sm);
}

.doc-section h3 {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--color-text);
  margin: var(--mar-md) 0 var(--mar-xs);
}

.doc-section p {
  margin: 0 0 var(--mar-sm);
  color: var(--color-text);
  line-height: 1.7;
}

.doc-section a {
  color: var(--color-primary);
  text-decoration: underline;
}
.doc-section a:hover { opacity: 0.8; }

/* Highlighted overview section (e.g. policies TOC) */
.doc-section.highlight {
  background: var(--color-primary-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-article);
  padding: var(--pad-md) var(--pad-lg);
  border-top: 1px solid var(--color-border-soft);
  margin-top: 0;
}
.doc-section.highlight p {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--mar-xs);
}

/* ── Fact list ───────────────────────────────────────────── */
.doc-fact-list {
  list-style: none;
  padding: 0;
  margin: var(--mar-xs) 0 var(--mar-sm);
}

.doc-fact-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.4rem;
  color: var(--color-text);
  line-height: 1.6;
}

.doc-fact-list li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0.15em;
  color: var(--color-primary);
  font-size: 0.65em;
}

/* ── Data table ──────────────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--mar-md) 0;
  font-size: var(--font-sm);
}

.table th,
.table td {
  text-align: left;
  padding: var(--pad-sm) var(--pad-md);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text);
  vertical-align: top;
}

.table thead th {
  background: var(--color-surface-strong);
  font-weight: 700;
  color: var(--color-text);
}

.table tbody tr:nth-child(even) td {
  background: var(--color-surface);
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--mar-md);
}

.status-card {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-article);
  padding: var(--pad-md);
  background: var(--color-surface);
}

.status-card h3 {
  margin-top: 0;
}

.status-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--font-xs);
}

.status-pill--verified {
  color: #116329;
  background: #dafbe1;
}

.status-pill--investigating {
  color: #9a6700;
  background: #fff8c5;
}

.status-facts {
  margin: var(--mar-sm) 0 0;
}

.status-facts div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.9fr) 1.1fr;
  gap: var(--pad-sm);
  border-top: 1px solid var(--color-border-soft);
  padding: 0.55rem 0;
}

.status-facts dt {
  color: var(--color-text-muted);
  font-weight: 700;
}

.status-facts dd {
  margin: 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .doc-article {
    padding: 0 var(--pad-sm);
  }

  .doc-article-header h1,
  .doc-article-header h2 {
    font-size: var(--font-lg);
  }

  .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .doc-section.highlight {
    padding: var(--pad-sm) var(--pad-md);
  }
}