/* ============================================================================
   Arkidor website — shared styles (site.css)
   Single source of truth for design tokens, base reset, top navigation, and
   footer. Page-specific styles remain in each page's inline <style> block,
   which loads AFTER this file so page rules can override where needed.

   Link with a RELATIVE path so it works from disk (file://), a local server,
   staging, and production:
     • root pages (e.g. /index.html, /confluence.html):      href="site.css"
     • pages one level deep (e.g. /user-guide/*.html):        href="../site.css"
     • pages two levels deep (e.g. /legal/confluence/*.html): href="../../site.css"
   ========================================================================== */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --am-application: #4A9EC2;
  --am-motivation: #7B68AE;
  --color-bg: #ffffff;
  --color-surface: #f7f8fa;
  --color-text: #1a202c;
  --color-text-muted: #5a6577;
  --color-border: #e2e8f0;
  --font-brand: 'Blinker', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 100ms;
  /* Height of the sticky top nav (.site-nav): 12px padding top+bottom + 28px logo +
     1px border ≈ 53px. Used for anchor scroll offset so in-page links (e.g. the user
     guides' contextual-help anchors) don't land beneath the fixed nav. */
  --nav-height: 53px;
}

/* ── Base reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Smooth in-page scrolling, and keep anchor targets clear of the sticky top nav.
   `scroll-padding-top` offsets every anchor jump (contextual help, ToC links) by the
   nav height + a little breathing room, so the target heading is fully visible instead
   of hidden behind the fixed bar (WI-115 5.1). Applies to the whole site. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 16px);
}

body {
  font-family: var(--font-brand);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Default link colour + accessible focus ring (consistent site-wide) */
a { color: var(--am-application); }
a:focus-visible {
  outline: 2px solid var(--am-application);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Top navigation (unified across all pages) ──────────────────────────────
   Targets the site's top navigation bar by its explicit `.site-nav` class, so
   in-content <nav> elements (doc-page bars, tables of contents, link lists)
   are never affected. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Logo: image + wordmark (+ optional product subtitle) as one link */
.nav-logo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: color var(--dur-fast) var(--ease);
}
.nav-logo img { width: 28px; height: 28px; align-self: center; }
/* Hover highlights the whole logo unit (wordmark + subtitle) as one target */
.nav-logo:hover { text-decoration: none; color: var(--am-application); }
.nav-sub {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: -2px;
  transition: color var(--dur-fast) var(--ease);
}
.nav-logo:hover .nav-sub { color: var(--am-application); }

/* Right-side links — consistent size, colour-change hover, no underline */
.nav-links { display: flex; gap: 1.5rem; align-items: center; }
.nav-links a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 400;
  transition: color var(--dur-fast) var(--ease);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--color-text); text-decoration: none; }

/* Cross-page link group (the fixed site tail) — separated from context links */
.nav-links .nav-external {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding-left: 1.5rem;
  border-left: 1px solid var(--color-border);
}
.nav-links .nav-external a { font-weight: 600; }
/* When the tail is the only group in the bar (legal, hub and leaf pages have no
   context links to its left), drop the leading divider + padding so it doesn't
   look like a dangling separator. */
.nav-links > .nav-external:first-child { padding-left: 0; border-left: 0; }

/* Current-page cue — bound to aria-current so it is not conveyed by weight alone
   for sighted users while exposing the state to assistive tech (replaces the old
   visual-only <strong> marking). */
.nav-links a[aria-current="page"],
.footer-links a[aria-current="page"] { font-weight: 700; color: var(--color-text); }

/* Primary call-to-action button (e.g. "Get it on Marketplace", "Launch app").
   Background is a darkened shade of --am-application (#4A9EC2). The brand blue
   itself only reaches ~3.0:1 against white text — below the WCAG 2.1 AA 4.5:1
   minimum for normal-weight text (NFR-04). #2D7595 lifts that to ~5.1:1 while
   staying on-brand. `--cta-bg` keeps the value in one place. */
.nav-links .btn-marketplace {
  --cta-bg: #2D7595;
  background: var(--cta-bg);
  color: #fff;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.nav-links .btn-marketplace:hover { background: #245e79; color: #fff; text-decoration: none; }

/* Mobile menu toggle (hamburger).
   Injected by site-nav.js and only ever shown on narrow viewports (see the
   `@media (max-width: 640px)` block). Hidden by default so that on desktop — and
   when JavaScript is unavailable — it never appears and the layout is unchanged. */
.nav-toggle { display: none; }

/* ── Footer (unified) ───────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--color-border);
  padding: 2rem var(--space-6);
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
footer p { margin-bottom: 0.35rem; }
footer a { color: var(--color-text-muted); }
footer a:hover { color: var(--color-text); }
.footer-links { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; }

/* ── Reduced-motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ── Nav responsive ───────────────────────────────────────────────────────
   Goal: zero horizontal overflow at 320–430px on every page type, whether the
   nav carries six links + a CTA (front pages) or just two text links (doc/legal
   pages).

   Two layers, applied as progressive enhancement:

   1. Baseline (no JS): the bar is allowed to WRAP — `.nav-links` (and the logo
      row) flow onto extra lines instead of overflowing. Fully functional; the
      bar simply grows taller. This is the graceful-degradation fallback.

   2. JS-enhanced (`.site-nav.js-nav`, added by site-nav.js): the links collapse
      into a toggle-controlled drawer that is absolutely positioned *below* the
      bar. Because the drawer is out of flow, the bar itself stays a single row
      (~53px) — so the `--nav-height` anchor-offset contract remains accurate. */
@media (max-width: 640px) {
  /* 1 ── Baseline wrap fallback (also the visual result if JS is disabled) */
  .nav-inner { flex-wrap: wrap; row-gap: 0.5rem; }
  .nav-links { gap: 0.5rem 1rem; flex-wrap: wrap; }
  .nav-links .nav-external {
    padding-left: 0;
    border-left: none;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }
  .nav-logo { font-size: 1.0625rem; }

  /* 2 ── JS-enhanced hamburger drawer */
  .site-nav.js-nav .nav-inner { flex-wrap: nowrap; }

  .site-nav.js-nav .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44×44 touch target without increasing the bar height (negative margins
       absorb the extra height back into the 28px logo row). */
    width: 44px;
    height: 44px;
    margin: -8px -8px -8px 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--radius-sm);
    flex: 0 0 auto;
  }
  .site-nav.js-nav .nav-toggle:hover { color: var(--am-application); }
  .site-nav.js-nav .nav-toggle:focus-visible {
    outline: 2px solid var(--am-application);
    outline-offset: 2px;
  }

  /* Hamburger icon drawn with one element + two pseudo-elements */
  .site-nav.js-nav .nav-toggle-bars,
  .site-nav.js-nav .nav-toggle-bars::before,
  .site-nav.js-nav .nav-toggle-bars::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--dur-fast) var(--ease),
                opacity var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
  }
  .site-nav.js-nav .nav-toggle-bars { position: relative; }
  .site-nav.js-nav .nav-toggle-bars::before { position: absolute; top: -6px; }
  .site-nav.js-nav .nav-toggle-bars::after { position: absolute; top: 6px; }
  /* Morph to an X when open */
  .site-nav.js-nav.nav-open .nav-toggle-bars { background: transparent; }
  .site-nav.js-nav.nav-open .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .site-nav.js-nav.nav-open .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

  /* Drawer: anchored to the sticky `.site-nav` (which is its positioned
     ancestor), dropping full-width below the bar. Out of flow, so the bar keeps
     its single-row height. */
  .site-nav.js-nav .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.25rem var(--space-6) 0.75rem;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
    display: none;
  }
  .site-nav.js-nav.nav-open .nav-links { display: flex; }
  .site-nav.js-nav .nav-links a { padding: 0.6rem 0; }

  .site-nav.js-nav .nav-links .nav-external {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 0.25rem 0 0;
    margin-top: 0.25rem;
    border-top: 1px solid var(--color-border);
  }
  .site-nav.js-nav .nav-links .btn-marketplace {
    align-self: flex-start;
    margin-top: 0.5rem;
    padding: 0.5rem 0.9rem;
  }
}

/* ── Doc-page content wrapper ────────────────────────────────────────────────
   The documentation pages (user manual, guide, technical overview) use the
   shared `.site-nav` bar like every other page, and wrap their article body in
   `.doc-content`. Each page sets its own max-width on `.doc-content` inline. */

/* ── Print: hide navigation so generated PDFs / printouts stay clean ──────── */
@media print {
  .site-nav { display: none; }
}