/* ============================================================
   ActTrader — Shared navigation: Products mega-menu, Platforms /
   downloads menu, and language switcher. Injected by nav.js and
   styled here so it works on every page (incl. the homepage, which
   does not load base.css). RTL-aware for Arabic.
   ============================================================ */
:root { --nav-pop-bg: #181410; }

/* ---------- brand logo mark (image replaces the "A" square) ---------- */
.logo-mark, .nav-logo .mark { background: none !important; padding: 0 !important; overflow: hidden; }
.logo-mark img, .nav-logo .mark img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.logo-tagline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-dim, #998677); padding-left: 12px; border-left: 1px solid var(--line, rgba(201, 123, 74,0.10));
  line-height: 1.2; white-space: nowrap;
}
@media (max-width: 720px) { .logo-tagline { display: none; } }

.nav-links { align-items: center; }
.nav-item { position: relative; list-style: none; }
.nav-link, .nav-dd-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-dim, #998677); text-decoration: none;
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  padding: 6px 0; transition: color 0.2s;
}
.nav-link:hover, .nav-dd-trigger:hover, .nav-item.is-open .nav-dd-trigger,
.nav-link.active { color: var(--fg, #f0e8db); }
.nav-dd-trigger .caret {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.25s; margin-top: -3px; opacity: 0.7;
}
.nav-item.is-open .nav-dd-trigger .caret { transform: rotate(-135deg); margin-top: 1px; }

/* ---------- dropdown panels ---------- */
.nav-dd-panel {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 200;
  background: var(--nav-pop-bg); border: 1px solid var(--line-strong, rgba(201, 123, 74,0.24));
  border-radius: 16px; padding: 12px;
  box-shadow: 0 30px 70px -25px rgba(0,0,0,0.85);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.nav-item.is-open > .nav-dd-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dd-panel::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }

/* products mega panel */
.nav-products { width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.nav-pitem { display: flex; gap: 12px; padding: 11px 12px; border-radius: 11px; text-decoration: none; transition: background 0.18s; }
.nav-pitem:hover { background: rgba(201, 123, 74,0.08); }
.nav-pitem .ic {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: var(--brand-soft, rgba(201, 123, 74,0.12)); color: var(--brand, #C97B4A);
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong, rgba(201, 123, 74,0.24));
}
.nav-pitem .ic svg { width: 17px; height: 17px; }
.nav-pitem .nm { font-size: 13px; font-weight: 600; color: var(--fg, #f0e8db); display: flex; align-items: center; gap: 7px; }
.nav-pitem .nm .st { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 5px; border-radius: 4px; background: var(--gain-soft, rgba(110,199,136,0.12)); color: var(--gain, #6ec788); }
.nav-pitem .nm .st.soon { background: rgba(201, 123, 74,0.12); color: var(--brand, #C97B4A); }
.nav-pitem .ds { font-size: 11px; color: var(--fg-dim, #998677); margin-top: 2px; line-height: 1.4; }

/* platforms / downloads panel */
.nav-plats { width: 280px; display: flex; flex-direction: column; gap: 2px; }
.nav-plat-h { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-dimmer, #6b5d4f); padding: 8px 12px 6px; }
.nav-pitem .ic.dl { background: rgba(201, 123, 74,0.08); color: var(--fg, #f0e8db); }

/* ---------- language switcher ---------- */
.nav-lang { position: relative; }
.nav-lang-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: none; border: 1px solid var(--line-strong, rgba(201, 123, 74,0.24)); border-radius: 999px;
  color: var(--fg-dim, #998677); font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em; padding: 7px 12px; transition: all 0.2s;
}
.nav-lang-btn:hover { color: var(--fg, #f0e8db); border-color: var(--brand, #C97B4A); }
.nav-lang-btn svg { width: 13px; height: 13px; opacity: 0.8; }
.nav-lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 200; min-width: 150px;
  background: var(--nav-pop-bg); border: 1px solid var(--line-strong, rgba(201, 123, 74,0.24));
  border-radius: 12px; padding: 6px; box-shadow: 0 24px 60px -22px rgba(0,0,0,0.85);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.2s;
}
.nav-lang.is-open .nav-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-lang-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; color: var(--fg-dim, #998677); font-family: inherit; font-size: 13px; padding: 9px 11px; border-radius: 8px; transition: background 0.18s, color 0.18s; }
.nav-lang-opt:hover { background: rgba(201, 123, 74,0.08); color: var(--fg, #f0e8db); }
.nav-lang-opt .native { font-size: 11px; color: var(--fg-dimmer, #6b5d4f); }
.nav-lang-opt.on { color: var(--brand, #C97B4A); }
.nav-lang-opt.on .native { color: var(--brand, #C97B4A); }

/* ---------- desktop hover open ---------- */
@media (min-width: 981px) {
  .nav-item:hover { } /* hover handled via JS for reliability */
}

/* ---------- mobile: dropdowns become accordions ---------- */
@media (max-width: 980px) {
  .nav-dd-panel { position: static; opacity: 1; visibility: hidden; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-item.is-open > .nav-dd-panel { visibility: visible; max-height: 1200px; padding: 6px 0 10px; }
  .nav-products, .nav-plats { width: 100%; display: flex; flex-direction: column; }
  .nav-pitem { padding: 10px 8px; }
  .nav-dd-trigger { width: 100%; justify-content: space-between; padding: 8px 0; font-size: 14px; }
  .nav-link { font-size: 14px; padding: 8px 0; display: block; }
  .nav-lang { margin-top: 8px; }
  .nav-lang-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 6px 0; display: none; }
  .nav-lang.is-open .nav-lang-menu { display: block; }
}

/* ---------- RTL (Arabic) ---------- */
[dir="rtl"] .nav-dd-panel { left: auto; right: 0; }
[dir="rtl"] .nav-lang-menu { right: auto; left: 0; }
[dir="rtl"] .nav-pitem { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .nav-lang-opt { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .nav-links { flex-direction: row-reverse; }
@media (max-width: 980px) { [dir="rtl"] .nav-links { flex-direction: column; } }