/* Pack Animal — shared styles for every page on the site.
 *
 * Tokens, reset, the header lockup, prose defaults and the footer. Anything
 * used by more than one page belongs here; page-only styling (the landing
 * page's hero, cards and screenshots) stays inline on that page.
 *
 * Kept in step with the app by eye, not by tooling: the colours mirror
 * frontend/src/lib/themes/theme_factory.dart and the radius language is the
 * app's (S 2 / M 4 / L 6).
 */

:root {
  --bg: #efe7db;            /* parchment, under the texture */
  --surface: #ffffff;
  --ink: #26221c;
  --ink-soft: #56503f;
  --line: #ddd2bf;
  /* Per-trip header colours in the app are derived from each trip's photo,
     not a fixed brand set. These four are a coherent pick for the cards. */
  --navy: #00325b;
  --green: #4f6b2f;
  --teal: #2f6b62;
  --amber: #d99a2b;
  /* App uses a very tight radius language (S 2 / M 4 / L 6). Match it. */
  --radius: 5px;
  /* How wide the text column runs. The landing page overrides this to 60rem;
     the documents keep it narrow so long addresses and prose stay readable. */
  --wrap: 46rem;
  /* Prose wants the looser line; the landing page overrides it (see
     index.html), where the text sits in short blocks beside images. */
  --leading: 1.65;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171310;
    --surface: #221c17;
    --ink: #ece4d6;
    --ink-soft: #c3b9a5;
    --line: #3a3229;
    --navy: #7fb0e6;
    --green: #9fc06a;
    --teal: #6fb8ac;
    --amber: #eab456;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg) url("images/texture.png");
  background-size: 480px;
  /* System sans everywhere, like the app. Fredoka is reserved for the
     wordmark only (see .brand-name). */
  font: 16px/var(--leading) -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
  /* the texture PNG is near-white; knock it right back over the dark ground */
  body { background-blend-mode: multiply; background-color: #171310; }
}

h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; margin: 0; }
a { color: var(--navy); }
.soft { color: var(--ink-soft); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
section { padding: 1.9rem 0; }
section + section { border-top: 1px solid var(--line); }

/* ---- Header: the brand lockup, on every page ----
   The landing page wears the same bar at a larger size (see .top--hero in
   index.html); the documents get the compact one. Both use this markup, so
   the lockup can't drift between them. */
.top {
  border-bottom: 4px solid var(--amber);
  background: var(--navy);
}
/* Not raw --navy: in dark mode that token is the *light* blue (#7fb0e6), so
   the bar would read as a light-mode element that got missed. The landing
   page used to do exactly that; sharing this rule fixed it. */
@media (prefers-color-scheme: dark) { .top { background: #0d2033; } }
.top-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem;
  display: flex; align-items: center; gap: 1rem; min-height: 3.5rem;
}
/* The whole lockup is one link, so the wordmark is clickable too, not just
   the mark. inline-flex keeps the hit area tight to the artwork rather than
   stretching across the bar. */
.top .brand {
  display: inline-flex; align-items: center; gap: var(--brand-gap, 1rem);
  text-decoration: none; color: inherit; border-radius: var(--radius);
}
.top .brand:hover { opacity: .88; }
.top .brand:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.top img { width: var(--brand-mark, 3.6rem); height: auto; filter: brightness(0) invert(1); opacity: .97; }
.brand-name {
  font-family: "Fredoka", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600; font-size: var(--brand-size, 1.25rem); color: #fff;
}

/* ---- Document pages: title, lede and prose ----
   Scoped to .doc rather than set globally: the landing page styles its text
   per component (cards, steps, FAQ) and inherits margins it doesn't want. */
/* :where() keeps these at zero specificity, so the single-class overrides
   below (.updated, .lede p) still win as they did when these were bare
   element selectors. */
:where(.doc) p { margin: .7rem 0; }
:where(.doc) ul { margin: .7rem 0; padding-left: 1.15rem; }
:where(.doc) li { margin: .35rem 0; }

.title { padding: 2.4rem 0 .4rem; }
.title h1 { font-size: clamp(1.9rem, 5.5vw, 2.6rem); line-height: 1.1; }
.updated { color: var(--ink-soft); font-size: .9rem; margin: .6rem 0 0; }

.lede {
  background: var(--surface);
  border: 1.5px solid var(--green);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 1.6rem 0 0;
}
.lede p { margin: 0; }
.lede p + p { margin-top: .7rem; }

/* Document headings. Scoped like the prose above: the landing page sizes its
   headings per component (.section-title, .day-body h3, .step h3). */
:where(.doc) h2 { font-size: 1.35rem; margin-bottom: .9rem; }
:where(.doc) h3 { font-size: 1.02rem; margin: 1.3rem 0 .3rem; }

/* ---- Tables (the privacy policy's third-party list) ---- */
.table-scroll { overflow-x: auto; margin: 1rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 34rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; border-bottom-width: 1.5px; }
td:first-child { white-space: nowrap; font-weight: 600; }
td.soft { color: var(--ink-soft); }

/* ---- Footer ---- */
footer {
  border-top: 1px solid var(--line);
  padding: 2rem 0 3rem;
  color: var(--ink-soft); font-size: .9rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center;
}
footer .sep { opacity: .5; }