/* Site navigation — the only stylesheet for the navbar and mobile menu.
   Loaded by _includes/navbar.html. Selectors are prefixed with .navbar /
   .nav-mobile so they win over any leftover per-page nav rules. */

.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(11, 11, 18, 0.94);
  border-bottom: 1px solid var(--rp-ink-line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-family: var(--rp-sans);
}
.navbar.scrolled { background: rgba(11, 11, 18, 0.99); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); }
.navbar::before { content: none; }

.navbar .navbar-container {
  display: flex; align-items: center; gap: 24px;
  max-width: 1240px; margin: 0 auto; padding: 8px 24px; position: relative;
}
.navbar .navbar-logo { display: flex; flex-direction: row; align-items: center; gap: 10px; text-decoration: none; }
.navbar .navbar-logo .logo { width: 120px; height: 44px; object-fit: contain; display: block; }
.navbar .navbar-logo span {
  font-size: 10px; line-height: 1.3; max-width: 110px; white-space: normal;
  color: var(--rp-muted-d); border-left: 1px solid var(--rp-ink-line); padding-left: 10px;
}

.navbar .navbar-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.navbar .navbar-link,
.navbar .nav-dd-btn {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--rp-sans); font-size: 14.5px; font-weight: 500; white-space: nowrap;
  color: rgba(242, 241, 247, 0.8); background: none; border: 0; cursor: pointer;
  padding: 8px 12px; border-radius: 8px; text-decoration: none; transition: color .15s, background .15s;
}
.navbar .navbar-link:hover,
.navbar .nav-has-dropdown:hover .nav-dd-btn,
.navbar .nav-has-dropdown:focus-within .nav-dd-btn { color: var(--rp-text-d); background: rgba(255, 255, 255, 0.06); }
.navbar .navbar-link.active,
.navbar .nav-dd-btn.active { color: var(--rp-violet-2); }
.navbar .nav-chevron { font-size: 9px; color: var(--rp-faint-d); transition: transform .2s; }
.navbar .nav-has-dropdown:hover .nav-chevron { transform: rotate(180deg); }
.navbar .navbar-link:focus-visible,
.navbar .nav-dd-btn:focus-visible,
.navbar .nav-mega-item:focus-visible { outline: 2px solid var(--rp-amber); outline-offset: 2px; }

.navbar .navbar-cta { display: flex; align-items: center; margin-left: 8px; }
.navbar .navbar-cta .btn {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--rp-sans);
  font-size: 13.5px; font-weight: 700; padding: 8px 16px; border-radius: 8px;
  background: var(--rp-violet); color: #fff; text-decoration: none; box-shadow: none; transition: background .15s;
}
.navbar .navbar-cta .btn:hover { background: var(--rp-violet-hover); transform: none; box-shadow: none; opacity: 1; }

/* Dropdowns */
.navbar .nav-has-dropdown { position: relative; }
.navbar .nav-mega {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 200;
  transform: translateX(-50%) translateY(-6px);
  display: flex; gap: 0; min-width: 300px; padding: 14px;
  background: var(--rp-white); border: 1px solid var(--rp-paper-line); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(11, 11, 18, 0.28);
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s;
}
.navbar .nav-mega::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.navbar .nav-has-dropdown:hover .nav-mega,
.navbar .nav-has-dropdown:focus-within .nav-mega { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.navbar .nav-mega.wide { min-width: 540px; }
.navbar .nav-mega-col { flex: 1; padding: 2px 6px; display: flex; flex-direction: column; gap: 2px; }
.navbar .nav-mega-col + .nav-mega-col { border-left: 1px solid var(--rp-paper-line); padding-left: 14px; }
.navbar .nav-mega-lbl {
  font-family: var(--rp-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rp-muted-l); padding: 2px 8px 8px;
}
.navbar .nav-mega-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 9px;
  text-decoration: none; color: inherit; transition: background .15s;
}
.navbar .nav-mega-item:hover { background: var(--rp-violet-soft); }
.navbar .nav-mega-ico {
  width: 30px; height: 30px; min-width: 30px; border-radius: 7px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; font-size: 0.74rem;
  background: var(--rp-violet-soft); color: var(--rp-violet);
}
.navbar .nav-mega-num {
  width: 30px; min-width: 30px; padding-top: 3px; text-align: center;
  font-family: var(--rp-mono); font-size: 0.7rem; font-weight: 600; color: var(--rp-violet);
}
.navbar .nav-mega-t {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.84rem; font-weight: 700; color: var(--rp-text-l); line-height: 1.3;
}
.navbar .nav-mega-d { font-size: 0.72rem; color: var(--rp-muted-l); line-height: 1.4; margin-top: 1px; }
.navbar .nav-mega-sub { font-family: var(--rp-mono); font-size: 0.64rem; font-weight: 500; color: var(--rp-muted-l); }
.navbar .nav-pill {
  font-family: var(--rp-mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; background: var(--rp-amber-soft); color: var(--rp-amber-ink);
}
.navbar .nav-pill.core { background: var(--rp-violet-soft); color: var(--rp-violet); }
/* The core item (Agency Brain) sits above the numbered features */
.navbar .nav-mega-item.core { background: var(--rp-ink); margin-bottom: 6px; }
.navbar .nav-mega-item.core:hover { background: var(--rp-ink-3); }
.navbar .nav-mega-item.core .nav-mega-t { color: var(--rp-text-d); }
.navbar .nav-mega-item.core .nav-mega-d { color: var(--rp-muted-d); }
.navbar .nav-mega-item.core .nav-mega-ico { background: rgba(124, 58, 237, 0.25); color: var(--rp-violet-2); }
.navbar .nav-mega-item.core .nav-pill.core { background: rgba(124, 58, 237, 0.3); color: #E4DBFF; }

.nav-spacer { height: 60px; }

/* Hamburger + mobile menu */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px; border-radius: 8px; margin-left: auto;
}
.nav-hamburger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: rgba(242, 241, 247, 0.85); transition: transform .25s, opacity .25s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none; position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 998;
  overflow-y: auto; padding: 8px 0 40px; background: var(--rp-white);
  border-top: 1px solid var(--rp-paper-line); font-family: var(--rp-sans);
}
.nav-mobile.open { display: block; }
.nav-mobile .nav-mobile-link {
  display: flex; align-items: center; padding: 15px 24px; font-size: 15px; font-weight: 700;
  color: var(--rp-text-l); text-decoration: none; border-bottom: 1px solid var(--rp-paper-line);
}
.nav-mobile .nav-mobile-section {
  padding: 18px 24px 6px; font-family: var(--rp-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--rp-muted-l);
}
.nav-mobile .nav-mobile-sub {
  display: flex; align-items: center; gap: 10px; padding: 10px 24px; font-size: 14px; font-weight: 500;
  color: var(--rp-text-l); text-decoration: none;
}
.nav-mobile .nav-mobile-link:hover,
.nav-mobile .nav-mobile-sub:hover { color: var(--rp-violet); background: var(--rp-violet-soft); }
.nav-mobile .nav-mobile-sub-ico {
  width: 28px; height: 28px; min-width: 28px; border-radius: 7px; font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--rp-violet-soft); color: var(--rp-violet);
}
.nav-mobile .nav-mobile-sub .nav-pill {
  font-family: var(--rp-mono); font-size: 0.56rem; font-weight: 600; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; background: var(--rp-amber-soft); color: var(--rp-amber-ink);
}
.nav-mobile .nav-mobile-divider { height: 1px; background: var(--rp-paper-line); margin: 8px 0; }
.nav-mobile .nav-mobile-cta { padding: 20px 24px 0; }
.nav-mobile .nav-mobile-cta a {
  display: block; text-align: center; padding: 14px 24px; border-radius: 10px;
  background: var(--rp-violet); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;
}

@media (max-width: 1080px) {
  .navbar .navbar-logo span { display: none; }
}
@media (max-width: 900px) {
  .nav-hamburger { display: flex !important; }
  .navbar .navbar-links, .navbar .navbar-cta { display: none !important; }
}
.nav-mobile .nav-mobile-sub-ico { font-family: var(--rp-mono); font-weight: 600; }
.nav-mobile .nav-mobile-sub-ico i { font-family: "Font Awesome 6 Free"; }