/**
 * Impactiqa — nav.css
 * Home-page fixed nav bar + nav overlay dropdown.
 * Loaded via head.php $base_css_files on every page.
 * Only visible on home (subpages use panel-chrome.php instead).
 */

/* ── Fixed nav bar ───────────────────────────────────────────────────────────── */
body > .site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 32px; mix-blend-mode: difference;
}
.nav-left { display: flex; align-items: center; }
.nav-logo {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: .05em; background: #fff; color: #000; padding: 4px 12px;
  cursor: pointer;
}
.nav-menu {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 18px;
  letter-spacing: .05em; color: #fff; padding: 4px 12px;
  border: 1px solid rgba(255,255,255,.3); cursor: pointer; background: transparent;
}
.nav-cta {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 16px;
  letter-spacing: .08em; border: none; cursor: pointer; text-decoration: none;
  overflow: hidden; display: inline-block; vertical-align: middle; height: 36px;
}
.nav-cta-faces {
  display: flex; flex-direction: column;
  transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
.nav-cta:hover .nav-cta-faces { transform: translateY(-50%); }
.nav-cta-top,
.nav-cta-bottom {
  display: flex; align-items: center;
  height: 36px; padding: 0 20px; white-space: nowrap;
  font-family: inherit; font-size: inherit; font-weight: inherit;
  letter-spacing: inherit; color: #000;
}
.nav-cta-top    { background: #fff; }
.nav-cta-bottom { background: #39FF14; }

/* Nav left fade when overlay opens */
.site-nav .nav-left { transition: opacity 0.15s; }
#nav-overlay.open ~ .site-nav .nav-left { opacity: 0; pointer-events: none; }

/* ── Nav overlay (slide-in dropdown) ─────────────────────────────────────────── */
#nav-overlay {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transition: clip-path 0.55s cubic-bezier(0.76, 0, 0.24, 1), opacity 0s 0.55s;
}
#nav-overlay.open {
  pointer-events: auto;
  clip-path: inset(0 0% 0 0);
  opacity: 1;
  transition: clip-path 0.55s cubic-bezier(0.76, 0, 0.24, 1), opacity 0s;
}
.nav-ov-inner {
  display: flex; flex-direction: row; align-items: stretch;
  background: #1c1c1e;
}
.nav-ov-logo {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: .05em; background: #fff; color: #000; padding: 12px 18px;
  text-decoration: none; display: flex; align-items: center; flex-shrink: 0;
  cursor: pointer; order: 1;
}
.nav-ov-links {
  flex: 1; display: flex; flex-direction: row; align-items: center;
  padding: 0 8px; gap: 0; order: 2;
}
.nav-ov-item {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 16px;
  letter-spacing: .05em; color: #fff; text-decoration: none;
  padding: 12px 18px; cursor: pointer; white-space: nowrap;
  transition: color 0.2s;
}
.nav-ov-item:hover { color: rgba(255,255,255,.5); }
.nav-ov-close {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 18px;
  color: #fff; background: #3a3a3c; border: none;
  padding: 12px 22px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; order: 3; cursor: pointer;
}
.nav-ov-close:hover { background: #4a4a4e; }

/* ── Nav overlay: mobile ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  #nav-overlay { right: auto; }
  .nav-ov-inner { flex-wrap: wrap; }
  .nav-ov-logo { order: 1; flex: 1; }
  .nav-ov-close { order: 2; }
  .nav-ov-links {
    order: 3; flex: 0 0 100%;
    flex-direction: column; align-items: flex-start;
    padding: 4px 0;
  }
  .nav-ov-item { padding: 14px 20px; width: 100%; }
}