/* The two legal pages (privacy.html, terms.html). Same palette, fonts and
   theme switch as index.html, cut down to what a page of prose needs. Like
   everything under landing/, every path is relative: this directory is its
   own domain root on skafa.ai. */
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/geist/Geist.woff2') format('woff2');
}

:root {
  --primary-300: oklch(79.44% 0.14 184.72deg);
  --primary-600: oklch(60.02% 0.1 184.69deg);
  --primary-700: oklch(48.16% 0.08 184.81deg);

  --bg: #ffffff;
  --bg-alt: oklch(97.5% 0.004 184deg);
  --card: #ffffff;
  --fg: oklch(20% 0 0);
  --fg-muted: oklch(46% 0.01 184deg);
  --border: oklch(91% 0.006 184deg);
  --border-strong: oklch(85% 0.01 184deg);
  --accent-fg: var(--primary-700);
  --glass: oklch(100% 0 0 / 72%);
  --note-bg: oklch(97% 0.025 184deg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(17% 0.02 184deg);
    --bg-alt: oklch(20% 0.022 184deg);
    --card: oklch(22.5% 0.025 184deg);
    --fg: oklch(97% 0.005 184deg);
    --fg-muted: oklch(76% 0.018 184deg);
    --border: oklch(31% 0.03 184deg);
    --border-strong: oklch(38% 0.035 184deg);
    --accent-fg: var(--primary-300);
    --glass: oklch(19% 0.02 184deg / 74%);
    --note-bg: oklch(22% 0.03 184deg);
  }
}

:root[data-theme="dark"] {
  --bg: oklch(17% 0.02 184deg);
  --bg-alt: oklch(20% 0.022 184deg);
  --card: oklch(22.5% 0.025 184deg);
  --fg: oklch(97% 0.005 184deg);
  --fg-muted: oklch(76% 0.018 184deg);
  --border: oklch(31% 0.03 184deg);
  --border-strong: oklch(38% 0.035 184deg);
  --accent-fg: var(--primary-300);
  --glass: oklch(19% 0.02 184deg / 74%);
  --note-bg: oklch(22% 0.03 184deg);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Geist, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-fg); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* --- header ------------------------------------------------------- */
header {
  position: sticky; top: 0; z-index: 10;
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
nav.wrap { display: flex; align-items: center; gap: 12px; height: 64px; }
.wordmark {
  display: inline-block; font-size: 20px; font-weight: 700;
  letter-spacing: .16em; line-height: 1; color: var(--fg);
  padding-left: .16em; text-decoration: none;
}
.nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.back { font-size: 14px; color: var(--fg-muted); text-decoration: none; }
.back:hover { color: var(--fg); }
.lang-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; background: var(--card); }
.lang-toggle button {
  border: 0; background: transparent; color: var(--fg-muted); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 620; padding: 6px 9px; line-height: 1;
}
.lang-toggle button.active { background: var(--primary-600); color: #fff; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--card); color: var(--fg-muted);
}
.theme-toggle svg { width: 17px; height: 17px; }
.icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: none; }
  :root:not([data-theme="light"]) .icon-moon { display: block; }
}
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }

/* --- prose -------------------------------------------------------- */
main.prose { max-width: 760px; margin: 0 auto; padding: 48px 16px 72px; }
.prose h1 { font-size: clamp(28px, 5vw, 38px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 8px; }
.prose .updated { color: var(--fg-muted); font-size: 14px; margin: 0 0 32px; }
.prose h2 { font-size: 20px; line-height: 1.3; margin: 40px 0 10px; letter-spacing: -.01em; }
.prose h3 { font-size: 16.5px; margin: 24px 0 6px; }
.prose p, .prose li { color: var(--fg); }
.prose ul { padding-left: 22px; }
.prose li { margin: 4px 0; }
.prose .lead { font-size: 17.5px; color: var(--fg-muted); }
.prose .note {
  background: var(--note-bg); border-left: 3px solid var(--primary-600);
  border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 20px 0;
}
.prose .note p { margin: 0; }
.table-scroll { overflow-x: auto; margin: 12px 0 20px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--border); }
.prose th { color: var(--fg-muted); font-weight: 620; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.prose .ph { background: oklch(93% 0.09 85deg); color: oklch(30% 0.06 70deg); padding: 0 4px; border-radius: 4px; }

/* Hidden rather than shown, so a span in the header stays a span and an
   article stays a block. Without script the Croatian text is the one that
   shows: the company and the law behind both documents are Croatian. */
.js [data-doc-lang]:not(.shown) { display: none; }
html:not(.js) [data-doc-lang="en"] { display: none; }

/* --- footer ------------------------------------------------------- */
footer { border-top: 1px solid var(--border); background: var(--bg-alt); }
footer .wrap {
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  padding-top: 22px; padding-bottom: 22px; font-size: 13.5px; color: var(--fg-muted);
}
footer a { color: var(--fg-muted); }
footer a:hover { color: var(--accent-fg); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

@media (max-width: 520px) {
  .back { display: none; }
}