/* ============================================================
   PRODIUS COMPONENTS — the shared dark site chrome.

   tokens.css gives you variables; this file gives you the parts
   built out of them. Every v4 dark page and the generated
   download page load BOTH:

     <link rel="stylesheet" href="/css/tokens.css">
     <link rel="stylesheet" href="/css/components.css">

   Why this file exists: /download/ is generated from
   templates/download.html.template, so no one ever opens it while
   restyling the site. When every page carried its own copy of the
   nav/footer/button CSS, the template was the one copy that never
   drifted along — it still looked like the 2025 waitlist modal
   while the rest of the site had moved on. Shared chrome in one
   file is what makes that drift impossible rather than merely
   unlikely.

   SCOPE — only rules that were byte-identical across the pages
   that adopted this file (/developers/, /pricing/, /vs/*,
   /support/ and the download template). Anything a single page
   varies stays in that page's own <style>, which comes after this
   link in <head> and therefore wins:
     - body background gradients (each page tunes its own)
     - .wrap max-width (the /vs/ subpages use 920px)
     - html { scroll-behavior } (not on every page)

   Note /connect/, /zakelijk/*, /persoonlijk/ and /en/ are NOT on
   this file yet: they name the same components differently
   (nav.site, .btn-primary), so folding them in is a rename, not a
   dedupe. Do that as its own change, not as a drive-by.
   ============================================================ */

/* ---- reset + base ---- */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font); color:var(--dark-ink); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
.wrap { max-width:1080px; margin:0 auto; padding:0 28px; }

/* ---- buttons ----
   Green DOES: --green-400 on dark surfaces, --r-md corners. The
   outline variant is the secondary action; never two greens in one
   row of CTAs. font-family is explicit so <button> elements match
   the <a class="btn"> ones (a <button> would otherwise inherit the
   UA font, not body's). */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font); font-size:15px; font-weight:600; padding:13px 26px; border-radius:var(--r-md); border:none; cursor:pointer; transition:all .15s; }
.btn-green { background:var(--green-400); color:#08220F; }
.btn-green:hover { filter:brightness(1.07); }
.btn-outline { background:transparent; color:#fff; border:1.5px solid var(--dark-border); }
.btn-outline:hover { border-color:var(--dark-ink-mute); }

/* ---- nav ---- */
nav { position:sticky; top:0; z-index:50; background:rgba(29,25,25,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--dark-border); }
.nav-inner { max-width:1080px; margin:0 auto; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; }
.brand img { height:32px; width:auto; display:block; }
.nav-links { display:flex; align-items:center; gap:24px; }
.nav-links a { font-size:14px; font-weight:500; color:var(--dark-ink-soft); }
.nav-links a:hover { color:#fff; }
.nav-links a.btn-green, .nav-links a.btn-green:hover { color:#08220F; }
.nav-links .btn { padding:9px 18px; font-size:14px; }
@media (max-width:720px) { .nav-links a:not(.btn) { display:none; } }

/* ---- code well ----
   A command the visitor is meant to copy. user-select:all makes a
   single click select the whole line, so "copy" works even when
   the Copy button's clipboard API is unavailable (http:, older
   browsers, permission denied). */
.codebox { background:var(--dark-well); border:1px solid var(--dark-well-border); border-radius:var(--r-md); padding:15px 18px;
  font-family:ui-monospace, 'Cascadia Code', Consolas, monospace; font-size:14px; color:#EFEAE8;
  display:flex; justify-content:space-between; align-items:center; gap:14px; overflow-x:auto; }
.codebox code { user-select:all; }
.codebox .cm { color:var(--dark-ink-mute); }
.codebox .g { color:var(--green-400); }

/* ---- footer ---- */
footer { border-top:1px solid var(--dark-border); padding:42px 0; }
.foot-inner { display:flex; justify-content:space-between; align-items:flex-start; gap:28px; flex-wrap:wrap; }
.foot-links { display:flex; gap:24px; flex-wrap:wrap; }
.foot-links a { font-size:13.5px; color:var(--dark-ink-mute); }
.foot-links a:hover { color:#fff; }
.foot-note { font-size:12.5px; color:var(--dark-ink-mute); margin-top:12px; }
.foot-legal { margin-top:30px; padding-top:18px; border-top:1px solid var(--dark-border); font-size:12px; color:var(--dark-ink-mute); }
