/* ================================================
   NAVBAR.CSS
   ------------------------------------------------
   Styles for the sticky top navigation bar.
   Includes: logo, nav links, dropdowns, buttons.

   TO EDIT:
   - Change nav height: update height in `nav`
   - Change nav background: update background in `nav`
   - Dropdown width: update min-width in `.dropdown`
================================================ */


/* ── MAIN NAV BAR ─────────────────────────────── */
nav {
  position: sticky;       /* sticks to top when scrolling */
  top: 0;
  z-index: 1000;          /* always on top of other content */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px); /* frosted glass effect */
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 68px;           /* ← change nav height here */
}


/* ── LOGO ─────────────────────────────────────── */
/* "Be" in dark navy, "Badge" in teal gradient  */
.logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.logo .logo-be    { color: var(--navy); }
.logo .logo-badge {
  background: var(--grad-teal-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── NAV LINKS LIST ───────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

/* Each nav link item (wraps link + dropdown) */
.nav-links li {
  position: relative; /* needed for dropdown positioning */
}

/* Nav link anchor tag */
.nav-links a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--navy2);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}

/* Hover state: light bg + teal text */
.nav-links a:hover,
.nav-links li:hover > a {
  background: #f1f5f9;
  color: var(--teal);
}

/* Chevron arrow inside nav links (rotates on hover) */
.nav-links a .chevron {
  transition: transform 0.2s;
}
.nav-links li:hover > a .chevron {
  transform: rotate(180deg);
}


/* ── DROPDOWN MENU ────────────────────────────── */
.dropdown {
  display: none;               /* hidden by default */
  position: absolute;
  top: calc(100% + 8px);       /* sits just below the nav link */
  left: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  min-width: 340px;            /* ← change dropdown width here */
  z-index: 2000;
}

/* Align Resources dropdown to the right side */
.dropdown--right {
  left: auto;
  right: 0;
  min-width: 380px;
}

/* Show dropdown on hover */
.nav-links li:hover .dropdown {
  display: block;
}

/* Small label above dropdown items e.g. "PRODUCT" */
.dropdown-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gray);
  padding: 4px 8px 12px;
  text-transform: uppercase;
}

/* Each item in the dropdown */
.dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--navy);
  transition: background var(--transition);
  cursor: pointer;
}
.dropdown-item:hover {
  background: #f8fafc;
}

/* Colored icon box inside each dropdown item */
.drop-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}
/* Color variants for the icon box */
.drop-icon--teal   { background: linear-gradient(135deg, #0db88e22, #0db88e44); }
.drop-icon--blue   { background: linear-gradient(135deg, #3b82f622, #3b82f644); }
.drop-icon--purple { background: linear-gradient(135deg, #7c3aed22, #7c3aed44); }
.drop-icon--orange { background: linear-gradient(135deg, #f9731622, #f9731644); }
.drop-icon--green  { background: linear-gradient(135deg, #22c55e22, #22c55e44); }
.drop-icon--pink   { background: linear-gradient(135deg, #e879a822, #e879a844); }

/* Text inside dropdown item */
.drop-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
}
.drop-text span {
  font-size: 12.5px;
  color: var(--gray);
  line-height: 1.4;
}

/* "View all →" link at bottom of dropdown */
.dropdown-footer {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 12px;
}
.dropdown-footer a {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
}
.dropdown-footer a:hover {
  text-decoration: underline;
}


/* ── NAV ACTION BUTTONS ───────────────────────── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* "Login" text button */
.btn-nav-login {
  font-family: var(--font-main);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.btn-nav-login:hover {
  background: #f1f5f9;
}

/* "Request Demo" gradient button */
.btn-nav-demo {
  font-family: var(--font-main);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--white);
  background: var(--grad-primary);
  border: none;
  cursor: pointer;
  padding: 10px 22px;
  border-radius: 10px;
  transition: opacity var(--transition), transform var(--transition);
}
.btn-nav-demo:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}