/* site.css — chrome shared across all top-level pages
 * (nav with logo + lang-switch, footer, common @media adjustments).
 *
 * Each page may still override or extend these rules via its own
 * inline <style>. Page-specific styles (hero, docs-shell, auth-page,
 * policy-page, demo-shell, etc.) stay inline in each HTML file.
 *
 * Default colour variables are defined here so site.css is usable
 * standalone. Pages with richer palettes (index.html, fr.html) may
 * redefine extras in their own :root.
 */

:root {
  /* Tells the browser the page is dark-themed. Without this, Chrome on
   * some platforms ignores theme-color when the OS is in light mode and
   * paints the address bar / status bar default white. */
  color-scheme: dark;

  --bg: #050d1a;
  --cyan: #38a7e6;
  --brand-blue: #38a7e6;
  --muted: #8b9cbc;
  --border: rgba(56,167,230,0.15);
  --border2: rgba(240,244,255,0.07);
  --font-sans: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 5vw;
  background: rgba(5,13,26,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  /* Pin the body font AND smoothing on <nav> itself for the React demo
   * pages (demo.html / live-demo.html + FR), whose <body> intentionally
   * leaves typography to the SPA. Without the font-family the nav links
   * fall back to the browser default; without the smoothing the nav text
   * renders with the OS default (heavier on macOS) instead of the
   * antialiased weight every content page's <body> sets — so the same
   * Plus Jakarta Sans looks like a different font. No-op on pages whose
   * <body> already declares these. */
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.nav-brand { display: flex; align-items: center; gap: 3.1rem; text-decoration: none; }
.nav-brand .brand-icon { height: 64px; width: 64px; object-fit: cover; border-radius: 10px; display: block; }
.nav-brand-name-top {
  font-family: "Orbitron", var(--font-sans);
  font-size: 2rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--brand-blue); white-space: nowrap;
  line-height: 1;
}
.nav-actions { display: flex; align-items: center; gap: 0.85rem; }

/* ── LANG SWITCH ── */
.lang-switch {
  display: inline-flex;
  border: 1px solid rgba(56,167,230,0.25);
  background: transparent;
  position: relative; overflow: hidden;
}
.lang-switch::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(56,167,230,0.4) 50%, transparent 100%);
  opacity: 0.5;
}
.lang-switch a {
  text-decoration: none; color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.1em; padding: 0.4rem 0.6rem;
  transition: color 0.3s, background 0.3s;
}
/* Active language: visually hidden but kept in the accessibility tree
   so screen readers can still announce "current page". The pair pattern:
   position:absolute removes it from flex flow (the other-language pill
   keeps its sole-visible-item layout), the 1×1 clip hides it visually. */
.lang-switch a.active {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.lang-switch a:not(.active):hover { color: var(--cyan); background: rgba(56,167,230,0.08); }

/* ── FOOTER ── */
footer {
  background: var(--bg);
  border-top: 1px solid var(--border2);
  padding: 2.5rem 6vw;
  position: relative; z-index: 1;
  /* Pin the body font on <footer> itself so pages whose <body> doesn't
   * declare one (demo.html / live-demo.html — React-rendered pages that
   * intentionally leave body typography to the SPA) still render the
   * footer in Plus Jakarta Sans instead of the browser default serif. */
  font-family: var(--font-sans);
}
.footer-inner {
  display: flex; justify-content: flex-start; align-items: center;
  flex-wrap: wrap; gap: 1rem 1.25rem;
}
/* Brand + menu cluster on the left; the © copy line is pushed to the
 * right of row 1; the Patent Pending line is forced onto its own row.
 *
 * Why not justify-content: space-between? With 4 children + flex-wrap,
 * space-between spreads them across the row width — on pages where only
 * brand + menu fit on row 1, the gap between brand and menu balloons to
 * hundreds of pixels. flex-start + margin-left: auto gives the same
 * visual layout when everything fits, and degrades gracefully otherwise.
 *
 * The selector .footer-links + .footer-copy targets the FIRST .footer-copy
 * by adjacency (it's the one that sits right after .footer-links in the
 * canonical footer markup). Don't use :first-of-type — .footer-brand is
 * also a <div>, so .footer-copy:first-of-type never matches anything. */
.footer-links + .footer-copy { margin-left: auto; }
.footer-inner > .footer-copy + .footer-copy { flex-basis: 100%; margin-left: 0; }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.footer-brand img { height: 38px; width: 38px; object-fit: cover; border-radius: 6px; }
.footer-brand-name {
  font-family: "Orbitron", var(--font-sans);
  font-size: 1rem; font-weight: 700;
  color: var(--cyan); letter-spacing: 0.1em; text-transform: uppercase;
}
.footer-copy { font-size: 0.78rem; color: rgba(122,138,170,0.4); }
.footer-privacy-link { color: var(--cyan); text-decoration: none; }
.footer-privacy-link:hover { text-decoration: underline; }

/* Footer link list (Product / Demo / Docs / Blog / About / Contact / LinkedIn).
 * Was duplicated as inline <style> in every home page; lives here so every
 * page that ships the standard footer markup gets the same horizontal,
 * wrap-on-narrow layout without redeclaring it. */
.footer-links { display: flex; gap: 1.1rem; list-style: none; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; }
.footer-links li { display: flex; align-items: center; }
.footer-links a {
  text-decoration: none; color: var(--muted); font-size: 0.85rem;
  transition: color 0.25s;
  display: inline-flex; align-items: center; line-height: 1;
}
.footer-links svg { display: block; }
.footer-links a:hover { color: var(--cyan); }

/* ── RESPONSIVE NAV / FOOTER ── */
@media (max-width: 900px) {
  .nav-brand { gap: 0.8rem; }
  .nav-brand-name-top { font-size: 1.02rem; letter-spacing: 0.06em; }
  .nav-brand .brand-icon { height: 44px; width: 44px; }
}
@media (max-width: 640px) {
  .nav-brand-name-top { font-size: 0.92rem; }
  .nav-brand .brand-icon { height: 40px; width: 40px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  /* Reset the desktop right-push so the © copy line stays left-aligned
   * in the column-stacked mobile footer. */
  .footer-links + .footer-copy { margin-left: 0; }
  .footer-links { gap: 0.85rem; }
}

/* ── SCREEN-READER-ONLY UTILITY ──
 * Keeps text in the accessibility tree (so screen readers, search
 * crawlers, and AI agents see it) while hiding it visually. Used for
 * the homepage <h1> when the visible hero is a typewriter-animated
 * div that can't easily be an h1 itself. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── WIDE-DESKTOP CONTENT CAP ──
 * On screens wider than 1400px the section content is capped at 1400px
 * (set per-page). Without this rule the nav and footer keep their flat
 * 5vw/6vw padding and `justify-content: space-between` pushes the brand
 * and the lang-switch to the literal viewport edges, leaving a wide
 * empty middle. The `+ 4rem` term aligns nav/footer edges with the 4rem
 * inset on section content. The `body >` prefix beats per-page inline
 * `nav { padding: ... }` / `footer { padding: ... }` overrides without
 * relying on !important. */
@media (min-width: 1401px) {
  body > nav    { padding-inline: max(5vw, calc((100vw - 1400px) / 2 + 4rem)); }
  body > footer { padding-inline: max(6vw, calc((100vw - 1400px) / 2 + 4rem)); }
}

/* ── REDUCED MOTION ──
 * Respect the OS-level setting users enable for vestibular disorders
 * (and general preference). Collapses every animation/transition to a
 * near-zero duration so the visual end-state still renders without the
 * drift/scan/blink motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
