/*
 * Styles for the standalone public pages (about.html, privacy.html,
 * terms.html). These pages are served as plain static HTML so they are
 * readable with no JavaScript at all, which means they cannot use the app's
 * Tailwind build — hence this small hand-written stylesheet. Colors mirror
 * the `valorant` palette in tailwind.config.js.
 */

:root {
  color-scheme: dark;
  --dark: #0f1923;
  --panel: #1a2632;
  --accent: #ece8e1;
  --muted: #768079;
  --red: #ff4655;
}

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

html, body { margin: 0; }

body {
  background: var(--dark);
  color: var(--accent);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.65;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

/* Header: logo + wordmark, linking home. */
.site-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-head img { width: 2.25rem; height: 2.25rem; object-fit: contain; flex: none; }
.site-head a {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.site-head a:hover { color: #fff; }

h1 { font-size: 1.75rem; line-height: 1.25; margin: 2rem 0 0.25rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.5rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 0.35rem; }

.updated { color: var(--muted); font-size: 0.85rem; margin: 0 0 1.5rem; }

p { margin: 0 0 1rem; }
ul { padding-left: 1.25rem; margin: 0 0 1rem; }
li { margin-bottom: 0.4rem; }

a { color: var(--red); }
a:hover { color: #ff6b78; }

strong { color: #fff; }

code {
  background: var(--panel);
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
}

/* Callout used for the "this is a private tool" style notes. */
.note {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--red);
  border-radius: 0.375rem;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.5rem;
}
.note p:last-child { margin-bottom: 0; }

.cta {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  background: var(--red);
  color: #fff;
  border-radius: 0.375rem;
  font-weight: 600;
  text-decoration: none;
}
.cta:hover { background: #e03e4c; color: #fff; }

/* Footer nav shared across the public pages. */
.site-foot {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 0.8rem;
}
.site-foot nav { margin-bottom: 0.75rem; }
.site-foot nav a { color: var(--accent); margin-right: 1rem; text-decoration: none; }
.site-foot nav a:hover { color: #fff; }
.site-foot a { color: var(--muted); }