/* ===========================================================
   JANO Field — Legal / Support page styles
   Shared across /privacy, /terms, /support, /404.
   Matches forest palette from index.html for brand cohesion.
   =========================================================== */

:root {
  --bg: #0B3D2E;
  --bg-alt: #0D4B36;
  --bg-deep: #071F18;
  --fg: #E8DCC8;
  --fg-muted: #A8C4A0;
  --accent: #6B9B37;
  --accent-alt: #8B6914;
  --heading: #D4B896;
  --border: #2C5F3F;
  --highlight: #C4A265;
  --link: #C4A265;
  --link-hover: #D4B896;
  --code-bg: #071F18;
  --table-stripe: rgba(255, 255, 255, 0.03);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at top, var(--bg-alt) 0%, var(--bg) 60%, var(--bg-deep) 100%);
  background-attachment: fixed;
}

/* ----- top bar ----- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(7, 31, 24, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.topbar a.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--heading);
  text-decoration: none;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
}
.topbar a.brand:hover { color: var(--highlight); }
.topbar .brand-mark {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: inline-block;
  overflow: hidden;
}
.topbar nav { margin-left: auto; }
.topbar nav a {
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 14px;
  margin-left: 18px;
  transition: color 0.15s;
}
.topbar nav a:hover, .topbar nav a[aria-current="page"] {
  color: var(--highlight);
}

/* ----- skip link ----- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--accent);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  z-index: 100;
}
.skip-link:focus { left: 8px; }

/* ----- main ----- */
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--heading);
  line-height: 1.25;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
  font-weight: 700;
}
h1 {
  font-size: clamp(34px, 5vw, 48px);
  margin-top: 0.2em;
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(24px, 3vw, 30px);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3em;
  margin-top: 2em;
}
h3 { font-size: 21px; color: var(--highlight); }
h4 { font-size: 17px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; font-family: 'Source Sans 3', sans-serif; font-weight: 600; }

p { margin: 0 0 1.1em; }
strong { color: var(--heading); font-weight: 600; }

a {
  color: var(--link);
  text-decoration-color: rgba(196, 162, 101, 0.4);
  text-underline-offset: 3px;
}
a:hover, a:focus-visible { color: var(--link-hover); text-decoration-color: var(--link-hover); }

ul, ol { padding-left: 1.5em; margin: 0 0 1.2em; }
li { margin-bottom: 0.4em; }
li::marker { color: var(--accent); }

blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.5em 0;
  padding: 0.5em 1.2em;
  background: rgba(11, 61, 46, 0.5);
  color: var(--fg-muted);
  font-style: italic;
  border-radius: 0 6px 6px 0;
}

code {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 0.92em;
  background: var(--code-bg);
  color: var(--highlight);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  border: 1px solid var(--border);
}
pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1em 1.2em;
  overflow-x: auto;
  font-size: 14px;
}
pre code { background: transparent; border: 0; padding: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95em;
}
th, td {
  text-align: left;
  padding: 0.7em 1em;
  border-bottom: 1px solid var(--border);
}
th {
  color: var(--heading);
  font-weight: 600;
  background: var(--bg-alt);
  border-bottom: 2px solid var(--accent);
}
tr:nth-child(even) td { background: var(--table-stripe); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.5em 0;
}

/* ----- meta block (effective date etc.) ----- */
.meta {
  display: inline-block;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4em 0.9em;
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0 0.5em 1em 0;
}
.meta strong { color: var(--heading); }

/* ----- TOC ----- */
.toc {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1em 1.5em;
  margin: 2em 0;
}
.toc h4 { margin: 0 0 0.6em; }
.toc ul { padding-left: 1.2em; margin: 0; }
.toc li { margin-bottom: 0.3em; font-size: 15px; }

/* ----- footer ----- */
footer {
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
  margin-top: 80px;
}
.footer-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 36px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--fg-muted);
}
.footer-inner a { margin: 0 10px; }

/* ----- focus rings ----- */
:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ----- print ----- */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .topbar, footer, .skip-link { display: none; }
  main { max-width: none; padding: 0; }
  a { color: #000; text-decoration: underline; }
  h1, h2, h3, h4 { color: #000; }
  pre, code, blockquote { background: #f5f5f5; color: #000; border-color: #ccc; }
}

/* ----- small screens ----- */
@media (max-width: 600px) {
  main { padding: 32px 18px 60px; }
  .topbar nav a { margin-left: 12px; font-size: 13px; }
  table { font-size: 0.88em; }
  th, td { padding: 0.5em 0.6em; }
}