/* ============================================================
   WAGate.app — shared chrome (header + footer) ONLY.
   Lean extract of the landing "Circuit" system (v2, dark chrome),
   loaded on the sub-pages (/integrations, /legal, /developers) so
   they don't pull the entire landing.css. Keep in sync with the
   matching rules in landing.css.
   ============================================================ */
:root {
  --tw-accent: #12b76a;
  --tw-accent-press: #0e9f5d;
  --tw-lime: #d8f24a;
  --tw-page: #f5f7f5;
  --tw-radius: 18px;
}

.lx {
  --ink: #0d1310;
  --ink-2: #3d4540;
  --ink-3: #5c665f;
  --ink-4: #96a09a;
  --paper: #ffffff;
  --page: var(--tw-page);
  --cream: #eef1ee;
  --line: #e2e7e2;
  --line-2: #d2d9d2;
  --void: #0a0f0c;
  --void-2: #111813;
  --void-line: #24302a;
  --void-ink: #eaf3ec;
  --void-ink-2: #a7b5ab;
  --primary: var(--tw-accent);
  --primary-press: var(--tw-accent-press);
  --primary-tint: color-mix(in srgb, var(--primary) 12%, #ffffff);
  --lime: var(--tw-lime);
  --mono: 'JetBrains Mono', ui-monospace, Menlo, 'Rubik', monospace;
  --sh-soft: 0 1px 2px rgba(10, 20, 14, .05), 0 8px 20px -12px rgba(10, 20, 14, .10);
  font-family: 'Lexend', 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.lx * { box-sizing: border-box; }
.lx .ltr { direction: ltr; unicode-bidi: isolate; }
.lx-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* Chrome wrapper: token context without the full-page background/scroll. */
.lx.lx-chrome-wrap { background: transparent; min-height: 0; overflow: visible; }

/* ---- Buttons used in the chrome (nav Log in, footer Subscribe) ---- */
.lx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; cursor: pointer; font-family: inherit; font-weight: 640;
  font-size: 15px; padding: 12px 20px; border-radius: 13px; line-height: 1;
  transition: transform .14s ease, background .14s, box-shadow .14s, color .14s;
  white-space: nowrap; text-decoration: none;
}
.lx-btn svg { width: 18px; height: 18px; }
.lx-btn:active { transform: translateY(1px) scale(.99); }
.lx-btn.lx-btn--ghost { background: transparent; color: var(--void-ink-2); padding: 12px 14px; }
.lx-btn.lx-btn--ghost:hover { background: rgba(255,255,255,.07); color: var(--void-ink); }
.lx-btn.lx-btn--lime { background: var(--lime); color: #131a03; box-shadow: 0 10px 26px -12px rgba(216, 242, 74, .5); }
.lx-btn.lx-btn--lime:hover { background: #e3fa5f; }
.lx-btn--sm { font-size: 13.5px; padding: 9px 15px; border-radius: 11px; }

/* Language picker in the nav: collapsed trigger shows the flag only. */
.lx-nav-right .lang-dd-btn { padding: 6px; gap: 0; background: transparent; border-color: var(--void-line); }
.lx-nav-right .lang-dd-btn .lang-dd-caret { display: none; }
.lx-nav-right .lang-dd-btn .lang-dd-name {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Nav (dark glass bar, same as the landing) ---- */
.lx-nav {
  position: sticky; top: 0; z-index: 200;
  background: color-mix(in srgb, var(--void) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--void-line);
  color: var(--void-ink);
}
.lx-nav-inner { display: flex; align-items: center; gap: 26px; height: 66px; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.lx-logo { display: flex; align-items: center; gap: 10px; }
.lx-logo-img { display: block; height: 26px; width: auto; filter: brightness(0) invert(1); }
.lx-nav-links { display: flex; align-items: center; gap: 4px; margin-inline-start: 8px; }
.lx-nav-link {
  padding: 9px 13px; border-radius: 10px; font-size: 13.5px; font-weight: 560;
  color: var(--void-ink-2); text-decoration: none; transition: color .13s, background .13s;
}
.lx-nav-link:hover { background: rgba(255,255,255,.06); color: var(--void-ink); }
.lx-nav-right { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }

/* ---- Footer (dark, same as the landing) ---- */
.lx-foot { background: var(--void); color: var(--void-ink-2); border-top: 1px solid var(--void-line); padding: 56px 0 28px; }
.lx-foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid var(--void-line); }
.lx-foot-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.lx-foot-logo-img { display: block; height: 24px; width: auto; filter: brightness(0) invert(1); }
.lx-foot-tag { font-size: 13px; color: var(--void-ink-2); line-height: 1.65; max-width: 280px; }
.lx-foot-badge-row { padding-top: 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lx-foot-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--void-line); font-size: 12px; font-weight: 600; color: var(--void-ink-2); white-space: nowrap; max-width: 100%; }
.lx-foot-badge svg { width: 14px; height: 14px; color: var(--lime); flex: none; }
.lx-foot-badge-name { flex: none; color: var(--void-ink); }
.lx-foot-badge-sep { opacity: .4; flex: none; }
.lx-foot-col-t { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--void-ink); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.lx-foot-links { display: flex; flex-direction: column; gap: 10px; }
.lx-foot-link { font-size: 13.5px; color: var(--void-ink-2); text-decoration: none; transition: color .13s; }
.lx-foot-link:hover { color: var(--lime); }
.lx-news-t { font-size: 15px; font-weight: 650; color: var(--void-ink); }
.lx-news-d { font-size: 13px; color: var(--void-ink-2); margin-top: 8px; line-height: 1.5; }
.lx-news-form { display: flex; gap: 8px; margin-top: 14px; }
.lx-news-input { flex: 1; background: rgba(255,255,255,.07); border: 1px solid var(--void-line); border-radius: 12px; padding: 11px 15px; color: var(--void-ink); font-family: inherit; font-size: 14px; }
.lx-news-input::placeholder { color: var(--void-ink-2); }
.lx-news-input:focus { outline: none; border-color: var(--primary); }
.lx-foot-bottom { display: flex; align-items: center; gap: 16px; padding-top: 24px; flex-wrap: wrap; }
.lx-foot-copy { font-size: 12.5px; }
.lx-foot-status { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--void-ink-2); }
.lx-foot-built { font-size: 12.5px; color: var(--void-ink-2); text-decoration: none; }
.lx-foot-built b { color: var(--void-ink); font-weight: 650; }
.lx-foot-built:hover b { color: var(--lime); }
.lx-foot-status .d { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px rgba(18, 183, 106, .25); }

[dir="rtl"] .lx-rtl-flip { transform: scaleX(-1); }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .lx-nav-links { display: none; }
  .lx-nav-inner { height: 60px; gap: 12px; }
  .lx-foot-top { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lx-wrap { padding: 0 16px; }
  .lx-nav-right { gap: 6px; }
}

/* Circuit v2: sub-pages share the landing's cool neutral page background
   (body.lg-body outspecifies the .lg-body rule in legal.css regardless of order). */
body.lg-body { background: #f5f7f5; }