/* Purly — purly.properties
   Colour tokens copied verbatim from the app's lib/core/theme/app_colors.dart
   so the site and the product read as one thing.

   Deliberately: no web fonts, no images, no JavaScript, no external requests
   of any kind. Most traffic is Android on Ugandan mobile data, so the whole
   page is one stylesheet and one small inline SVG. */

:root {
  --primary: #173838;            /* AppColors.primary   — the sign-in deep green */
  --primary-container: #2f4f4f;  /* AppColors.primaryContainer */
  --on-primary: #ffffff;
  --primary-fixed: #c6e9e9;      /* AppColors.primaryFixed */
  --secondary: #944925;          /* AppColors.secondary */

  --surface: #f9f9f9;            /* AppColors.surface */
  --surface-lowest: #ffffff;
  --surface-container: #eeeeee;
  --on-surface: #1a1c1c;
  --on-surface-variant: #414848;
  --outline-variant: #c1c8c7;

  /* Montserrat is the app's typeface, but loading it would mean an external
     request. System stack instead — same weights and feel, zero bytes. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--on-surface);
  background: var(--surface);
}

.wrap {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ── Header / wordmark ─────────────────────────────────────────────── */

.site-header {
  padding: 1.5rem 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--primary);
}

.wordmark svg {
  width: 2rem;
  height: 2rem;
  flex: none;
  fill: currentColor;
}

.wordmark span {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── Hero ──────────────────────────────────────────────────────────── */

.hero {
  padding: 2rem 0 2.5rem;
}

.hero h1 {
  margin: 0 0 1rem;
  font-size: 1.875rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.hero p {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  color: var(--on-surface-variant);
}

.hero p:last-child {
  margin-bottom: 0;
}

/* ── Status note ───────────────────────────────────────────────────── */

.note {
  margin: 0 0 2rem;
  padding: 1rem 1.125rem;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-left: 4px solid var(--secondary);
  border-radius: 8px;
}

.note p {
  margin: 0;
  font-size: 1rem;
  color: var(--on-surface-variant);
}

/* ── Contact ───────────────────────────────────────────────────────── */

.contact {
  margin: 0 0 2.5rem;
}

.contact h2 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary);
}

.contact p {
  margin: 0;
}

a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover,
a:focus {
  color: var(--secondary);
}

a:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Footer ────────────────────────────────────────────────────────── */

.site-footer {
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--outline-variant);
  font-size: 0.9375rem;
  color: var(--on-surface-variant);
}

.site-footer nav {
  margin: 0 0 0.75rem;
}

.site-footer nav a {
  margin-right: 1.25rem;
  display: inline-block;
}

.site-footer p {
  margin: 0;
}

/* ── Legal pages ───────────────────────────────────────────────────── */

.legal {
  padding: 1rem 0 2.5rem;
}

.legal h1 {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.legal h2 {
  margin: 2rem 0 0.5rem;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--primary);
}

.legal p {
  margin: 0 0 1rem;
  color: var(--on-surface-variant);
}

.placeholder-banner {
  margin: 1.25rem 0 2rem;
  padding: 1rem 1.125rem;
  background: var(--surface-lowest);
  border: 1px solid var(--secondary);
  border-left: 4px solid var(--secondary);
  border-radius: 8px;
}

.placeholder-banner p {
  margin: 0;
  color: var(--on-surface);
}

.placeholder-banner strong {
  color: var(--secondary);
}

/* Marks each unwritten section. Deliberately visible rather than subtle —
   nobody should be able to mistake this scaffold for a real policy. */
.stub {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface-container);
  border-radius: 6px;
  font-size: 0.9375rem;
  color: var(--on-surface-variant);
}

.stub em {
  font-style: normal;
  font-weight: 700;
  color: var(--secondary);
}

.back {
  display: inline-block;
  margin-top: 2rem;
  font-size: 0.9375rem;
}

/* ── Small screens ─────────────────────────────────────────────────── */
/* Base styles already target ~360px; this only trims the largest type. */

@media (max-width: 26rem) {
  body {
    font-size: 16px;
  }

  .wrap {
    padding: 0 1rem;
  }

  .hero h1 {
    font-size: 1.625rem;
  }

  .legal h1 {
    font-size: 1.5rem;
  }

  .site-footer nav a {
    margin-right: 1rem;
  }
}