/* findmybuddys.com — one stylesheet, no build step.
 *
 * Tokens mirror the app: the icon green as the primary, gold as the one accent, an off-white ground.
 * Dark theme keeps the same roles. Long legal documents get a 68-character measure and a sticky
 * in-page table of contents on wide screens. Phone first; no cards; no scripts.
 */

:root {
  --green: #2F6A4E;
  --green-ink: #24533D;
  --gold: #E9C46A;
  --ground: #F7F6F1;
  --ground-raised: #FFFFFF;
  --ink: #1E2823;
  --muted: #7C8781;
  --rule: #DDDBD2;
  --link: var(--green);
  --toc-active: var(--green);
  --draft-bg: var(--gold);
  --draft-ink: #1E2823;

  --font-head: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, system-ui, sans-serif;

  --measure: 68ch;
  --gutter: 1rem;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --green: #7FBF9B;
    --green-ink: #9ED2B4;
    --gold: #E9C46A;
    --ground: #15201B;
    --ground-raised: #1C2A23;
    --ink: #EEF1EC;
    --muted: #9AA59E;
    --rule: #2E3C34;
    --link: var(--green);
    --draft-bg: #E9C46A;
    --draft-ink: #1E2823;
  }
}

/* ── Fonts ────────────────────────────────────────────────────────────────────────────────────── */
/* Self-hosted, so the site makes no request to any other host. Both families are variable fonts
 * (one file covers the weight range), Latin subset only. Licence: SIL Open Font License 1.1 — the
 * licence texts sit next to the files in fonts/. */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("/assets/fonts/Nunito-700-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/SourceSans3-400-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Base ─────────────────────────────────────────────────────────────────────────────────────── */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  padding-inline: var(--gutter);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; }

h1, h2, h3 {
  font-family: var(--font-head);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

h1 { font-weight: 800; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); margin: 0 0 0.75rem; }
h2 { font-weight: 800; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); margin: 2.5rem 0 0.75rem; }
h3 { font-weight: 700; font-size: 1.125rem; margin: 1.75rem 0 0.5rem; }

/* A short green rule above every h2 carries the hierarchy without boxes or cards. */
h2::before {
  content: "";
  display: block;
  width: 2rem;
  height: 3px;
  border-radius: 2px;
  background: var(--green);
  margin-bottom: 0.6rem;
}

p, ul, ol { margin: 0 0 1rem; }
ul, ol { padding-left: 1.4rem; }
li { margin-bottom: 0.4rem; }
li > p { margin-top: 0.5rem; }
li > ul, li > ol { margin-top: 0.5rem; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--green-ink); }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

strong { font-weight: 600; }
small { font-size: 0.85em; color: var(--muted); }

/* ── Header and footer ─────────────────────────────────────────────────────────────────────────── */

body > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
}

body > header > a:first-child {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--green);
  text-decoration: none;
}

body > header nav a { font-weight: 600; text-decoration: none; }
body > header nav a:hover { text-decoration: underline; }

body > footer {
  margin-top: 4rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
  color: var(--muted);
}

body > footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: 0.75rem;
}

body > footer nav a { color: var(--ink); text-decoration: none; }
body > footer nav a:hover { text-decoration: underline; }
body > footer p { margin: 0; }

/* ── Documents (legal pages, support) ──────────────────────────────────────────────────────────── */

main.doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding-top: 1.5rem;
}

main.doc article { max-width: var(--measure); }

.lead { font-size: 1.15rem; color: var(--muted); margin-bottom: 1.5rem; }

.translation-note {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 2rem;
}

.attribution {
  margin-top: 3rem;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Draft banner on the terms. To take the banner off the published page, add `display: none;` to this
 * one rule (or delete the <p class="draft-banner"> lines). Nothing else references the class. */
.draft-banner {
  background: var(--draft-bg);
  color: var(--draft-ink);
  font-family: var(--font-head);
  font-weight: 700;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  margin: 0 0 1.5rem;
}

/* Legal paragraphs keep the generator's numbering; the numbers are part of the document. */
article ol > li::marker { font-weight: 600; color: var(--green); }
ol.rights { list-style: decimal; padding-left: 1.4rem; margin-top: 0.75rem; }
ol.rights > li { margin-bottom: 1rem; }
ol[type="a"] { list-style: lower-alpha; }

/* Table of contents. On a phone it is a compact list at the top; on a wide screen it sits in a
 * left column and sticks while the document scrolls. */
nav.toc {
  font-size: 0.92rem;
  line-height: 1.45;
}

nav.toc > p {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

nav.toc ol { list-style: none; padding: 0; margin: 0; }
nav.toc li { margin: 0; }
nav.toc a {
  display: block;
  padding: 0.25rem 0;
  color: var(--ink);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 0.6rem;
}
nav.toc a:hover { color: var(--green); border-left-color: var(--gold); }
nav.toc ol ol { display: none; }

@media (min-width: 64rem) {
  main.doc {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3rem;
  }
  main.doc nav.toc {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding-right: 0.5rem;
  }
  nav.toc ol ol { display: block; padding-left: 0.75rem; }
  nav.toc ol ol a { font-size: 0.85rem; color: var(--muted); }
}

/* ── Home ──────────────────────────────────────────────────────────────────────────────────────── */

main.home { padding-top: 2rem; max-width: 46rem; }

.hero .eyebrow {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.5rem;
}

.hero h1 { font-size: clamp(2.2rem, 1.5rem + 3.5vw, 3.6rem); margin-bottom: 1rem; }
.hero .lead { color: var(--ink); font-size: 1.2rem; max-width: 40rem; }
.age-note { font-weight: 600; color: var(--muted); }

.stores { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 3rem; }
.store-badge {
  display: inline-flex;
  flex-direction: column;
  padding: 0.55rem 1rem;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--muted);
  line-height: 1.2;
}
.store-badge small { font-weight: 600; font-size: 0.75rem; }

main.home section h2 { margin-top: 2rem; }
main.home .how ol { padding-left: 1.4rem; }
main.home .how li, main.home .trust li { margin-bottom: 0.6rem; }
main.home .how strong { color: var(--green); }

/* ── Print ─────────────────────────────────────────────────────────────────────────────────────── */

@media print {
  body { padding: 0; color: #000; background: #fff; }
  body > header nav, body > footer nav, nav.toc, .draft-banner { display: none; }
  a { color: inherit; text-decoration: none; }
  main.doc { display: block; }
}