/* 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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/instrument-sans/InstrumentSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/instrument-sans/InstrumentSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --bg: oklch(97.8% 0.004 184deg);
  --bg-alt: #FFFFFF;
  --card: #FFFFFF;
  --fg: #10201F;
  --fg-muted: #4A5E5B;
  --border: #CFE4E1;
  --border-strong: #B2CFCB;
  --accent: #0B7A75;
  --on-accent: #FFFFFF;
  --logo-acc: #0B7A75;
  --glass: rgb(255 255 255 / 88%);
  --note-bg: #CCECE8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C1A19;
    --bg-alt: #142826;
    --card: #142826;
    --fg: #E6F0EE;
    --fg-muted: #97ACA8;
    --border: #203835;
    --border-strong: #2D4B47;
    --accent: #3CC4B4;
    --on-accent: #0C1A19;
    --logo-acc: #3CC4B4;
    --glass: rgb(20 40 38 / 88%);
    --note-bg: #1B3B37;
  }
}

:root[data-theme="dark"] {
  --bg: #0C1A19;
  --bg-alt: #142826;
  --card: #142826;
  --fg: #E6F0EE;
  --fg-muted: #97ACA8;
  --border: #203835;
  --border-strong: #2D4B47;
  --accent: #3CC4B4;
  --on-accent: #0C1A19;
  --logo-acc: #3CC4B4;
  --glass: rgb(20 40 38 / 88%);
  --note-bg: #1B3B37;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
.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-flex; color: var(--fg); line-height: 0; text-decoration: none; }
.wordmark .logo { height: 24px; width: auto; }
.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: 4px; 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: 600; padding: 6px 9px; line-height: 1;
}
.lang-toggle button.active { background: var(--accent); color: var(--on-accent); }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 4px; 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(--accent);
  border-radius: 0 4px 4px 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: 600; 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); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

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