/* Shared styling for the legal pages.
 *
 * Plain static HTML rather than screens inside the Flutter app, for three
 * reasons: the stores and the LSSI require these at stable public URLs that
 * work without installing anything; they must stay readable if the app fails
 * to boot; and a legal text that can only be reached through the app is no
 * use to someone deciding whether to install it.
 *
 * Brand colours match app/lib/core/theme/app_theme.dart. Poppins is loaded
 * from the Flutter asset bundle when these pages are served alongside the
 * app, and falls back to the system stack when they are not.
 */

@font-face {
  font-family: 'Poppins';
  src: url('/assets/assets/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/assets/fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/assets/fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --orange: #e8963c;
  --cream: #fff8e7;
  --ink: #3b2e22;
  --muted: #7a6a5a;
  --line: #e7dcc9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

header.site {
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}

header.site .inner,
main,
footer.site .inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

header.site .inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 66px;
  text-decoration: none;
  color: inherit;
}

header.site img { width: 34px; height: 34px; border-radius: 50%; }
header.site span { font-weight: 700; font-size: 18px; letter-spacing: -0.4px; }

main { padding-top: 32px; padding-bottom: 56px; }

h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.6px; margin: 0 0 6px; }
h2 { font-size: 20px; font-weight: 700; margin: 34px 0 10px; letter-spacing: -0.2px; }
h3 { font-size: 16px; font-weight: 600; margin: 22px 0 6px; }

.updated { color: var(--muted); font-size: 14px; margin: 0 0 28px; }

p, li { color: var(--ink); }
ul { padding-left: 22px; }
li { margin-bottom: 7px; }

a { color: #b8701f; }
a:hover { color: var(--orange); }

/* Anything the operator must fill in before publishing. Deliberately loud:
   a legal page shipped with a placeholder still in it is worse than no page,
   because it reads as genuine and names nobody. */
.todo {
  background: #ffe9c9;
  border-bottom: 2px solid var(--orange);
  padding: 0 4px;
  font-weight: 600;
}

table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 15px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; background: rgba(232, 150, 60, 0.09); }

.note {
  background: rgba(143, 207, 234, 0.16);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 18px 0;
  font-size: 15px;
}

footer.site {
  border-top: 1px solid var(--line);
  padding: 18px 0 40px;
  font-size: 14px;
  color: var(--muted);
}
footer.site .inner { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 600px) {
  body { font-size: 15.5px; }
  h1 { font-size: 25px; }
  main { padding-top: 24px; }
}

/* Which version of a legal text binds, said on the page itself.
 *
 * A machine translation of a privacy policy is a draft, not a policy. The
 * Spanish is authoritative until somebody qualified says otherwise, and a
 * reader of the other two has to be able to see that without being told
 * elsewhere. Quieter than .note, because it is a caveat rather than the
 * warning .note carries. */
.note.authority {
  border-left-color: #9aa3ad;
  background: #f6f7f8;
  font-size: 0.93rem;
}