/* Africa Autism Alliance — long-form text: policies now, blog posts later.
   Loaded only by pages that need it ({% block page_css %}).
   .prose styles plain HTML (headings, lists, links, tables, images) so content
   pasted from an editor looks right without classes. */

/* ==========================================================================
   Layout — text column beside a sticky aside
   ========================================================================== */

.longform {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.longform__aside {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 900px) {
  .longform {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--space-8);
  }
  .longform__aside {
    position: sticky;
    top: 120px;
  }
}

/* ==========================================================================
   Prose
   ========================================================================== */

.prose {
  max-width: 68ch;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.prose > * + * { margin-top: var(--space-2); }

.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--font-display);
  line-height: 1.3;
  scroll-margin-top: calc(var(--nav-h) + var(--space-3));
}
.prose h2 {
  margin-top: var(--space-6);
  font-size: clamp(1.375rem, 2.2vw, 1.625rem);
  font-weight: 600;
}
.prose h3 {
  margin-top: var(--space-4);
  font-size: 1.25rem;
  font-weight: 600;
}
.prose h4 {
  margin-top: var(--space-3);
  font-size: 1.0625rem;
  font-weight: 600;
}
.prose > :first-child { margin-top: 0; }
.prose h2 + *,
.prose h3 + *,
.prose h4 + * { margin-top: var(--space-1); }

.prose p { max-width: none; }

/* Links in running text stay underlined, so they don't rely on colour alone */
.prose a {
  color: var(--primary-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
  transition: text-decoration-thickness var(--dur) var(--ease-out);
}
.prose a:hover { text-decoration-thickness: 2px; }

.prose strong { font-weight: 600; }

.prose ul,
.prose ol { padding-left: 1.5rem; }
.prose li + li { margin-top: .5rem; }
.prose li::marker { color: var(--primary-ink); }

.prose blockquote {
  margin-inline: 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 3px solid var(--brand-secondary);
  color: var(--ink-soft);
  font-style: italic;
}

.prose hr {
  margin-block: var(--space-6);
  border: 0;
  border-top: 1px solid var(--line);
}

.prose img {
  border-radius: var(--radius-md);
}
.prose figure { margin-inline: 0; }
.prose figcaption {
  margin-top: var(--space-1);
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

/* Tables scroll sideways on small screens instead of squashing */
.prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.5;
}
.prose th,
.prose td {
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.prose th {
  background: var(--primary-tint);
  font-weight: 600;
}

/* ==========================================================================
   Policy switcher (layouts/policy.html)
   ========================================================================== */

.policy-nav {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
}
.policy-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.policy-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .875rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.policy-nav a:hover { background-color: var(--hover-wash); }
.policy-nav a[aria-current="page"] {
  background-color: var(--primary-tint);
  color: var(--primary-ink);
  font-weight: 600;
}