/* ============================================
   FLOATING NAVBAR - Pill-shaped Glassmorphic Design
   Converted from React component
   ============================================ */

/* Reset for floating navbar - Override all old styles */
.site-header.floating-nav {
  position: fixed !important;
  top: 24px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 150 !important; /* Floating nav level */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 24px !important;
  display: flex !important;
  justify-content: center !important;
  pointer-events: none;
  border: none !important;
  box-shadow: none !important;
  transition: top 0.2s cubic-bezier(0.4, 0, 0.2, 1), padding 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Scrolled state - compact positioning */
.site-header.floating-nav.scrolled {
  top: 16px !important;
  padding: 0 16px !important;
}

/* Main navbar container - Default: Premium full width with gradient border */
.site-header.floating-nav .container,
.site-header.floating-nav #site-header-container {
  pointer-events: auto;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 60px !important;
  padding: 0 6px 0 6px !important;
  border-radius: var(--radius-pill) !important;
  border: 2px solid transparent !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(252, 252, 253, 0.9) 100%) padding-box,
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.03)) border-box !important;
  background-clip: padding-box, border-box !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.06),
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-width: auto !important;
  width: 100% !important;
  max-width: 820px !important;
  transform: none !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  margin: 0 auto !important;
}

/* Scrolled state - Compact width with gradient border */
.site-header.floating-nav.scrolled .container,
.site-header.floating-nav.scrolled #site-header-container {
  width: auto !important;
  max-width: none !important;
  height: 56px !important;
  padding: 0 6px 0 6px !important;
  border: 2px solid transparent !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(252, 252, 253, 0.92) 100%) padding-box,
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.04)) border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1),
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04) !important;
}

/* Remove the after pseudo-element depth shadow */
.site-header.floating-nav .container::after,
.site-header.floating-nav #site-header-container::after {
  display: none !important;
}

/* Dark mode navbar - Blueish undertone with gradient border */
:root[data-theme="dark"] .site-header.floating-nav .container,
:root[data-theme="dark"] .site-header.floating-nav #site-header-container {
  border: 2px solid transparent !important;
  background:
    linear-gradient(180deg, rgba(15, 22, 41, 0.92) 0%, rgba(12, 18, 35, 0.88) 100%) padding-box,
    linear-gradient(180deg, rgba(140, 182, 255, 0.28), rgba(140, 182, 255, 0.08)) border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 20px 60px rgba(0, 0, 0, 0.35),
    inset 0 2px 0 rgba(140, 182, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(140, 182, 255, 0.12),
    0 0 50px -15px rgba(140, 182, 255, 0.1) !important;
}

:root[data-theme="dark"] .site-header.floating-nav.scrolled .container,
:root[data-theme="dark"] .site-header.floating-nav.scrolled #site-header-container {
  background:
    linear-gradient(180deg, rgba(12, 18, 35, 0.95) 0%, rgba(10, 15, 30, 0.92) 100%) padding-box,
    linear-gradient(180deg, rgba(140, 182, 255, 0.32), rgba(140, 182, 255, 0.1)) border-box !important;
  background-clip: padding-box, border-box !important;
}

/* Scrolled state - Simplify nested elements (remove pill backgrounds) */
.site-header.floating-nav.scrolled .brand,
.site-header.floating-nav.scrolled .nav-menu,
.site-header.floating-nav.scrolled .nav-actions {
  background: transparent !important;
  box-shadow: none !important;
}

/* ============================================
   LEFT: Avatar + Name (Premium pill style)
   ============================================ */
.site-header.floating-nav .brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 16px 6px 6px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  border-radius: var(--radius-pill) !important;
  transition: all 0.2s ease !important;
}

@media (hover: hover) {
  .site-header.floating-nav .brand:hover {
    background: rgba(0, 0, 0, 0.04) !important;
  }
}

:root[data-theme="dark"] .site-header.floating-nav .brand {
  background: transparent !important;
}

@media (hover: hover) {
  :root[data-theme="dark"] .site-header.floating-nav .brand:hover {
    background: rgba(255, 255, 255, 0.06) !important;
  }
}

.site-header.floating-nav .brand-mark {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  font-family: var(--font-mono, ui-monospace, monospace) !important;
  letter-spacing: -0.02em !important;
  background: #1A1A1A !important;
  color: #ffffff !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

:root[data-theme="dark"] .site-header.floating-nav .brand-mark {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.site-header.floating-nav .brand-name {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #1a1a1a !important;
  white-space: nowrap !important;
}

:root[data-theme="dark"] .site-header.floating-nav .brand-name {
  color: #f3f4f6 !important;
}

/* ============================================
   CENTER: Navigation Links (Premium pill style)
   ============================================ */
.site-header.floating-nav .site-nav {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  justify-content: center !important;
  position: relative !important;
}

.site-header.floating-nav .nav-menu {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  padding: 6px !important;
  gap: 2px !important;
  list-style: none !important;
  margin: 0 !important;
  border-radius: var(--radius-pill) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .site-header.floating-nav .nav-menu {
  background: transparent !important;
  box-shadow: none !important;
}

.site-header.floating-nav .nav-menu li {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-header.floating-nav .nav-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* Nav link base style */
.site-header.floating-nav .nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 8px 14px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #52525b !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border: none !important;
  background: transparent !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.site-header.floating-nav .nav-item.is-open > .nav-link,
.site-header.floating-nav .nav-link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #1a1a1a !important;
  transform: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

@media (hover: hover) {
  .site-header.floating-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #1a1a1a !important;
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  }
}

:root[data-theme="dark"] .site-header.floating-nav .nav-link {
  color: #a1a1aa !important;
}

:root[data-theme="dark"] .site-header.floating-nav .nav-item.is-open > .nav-link,
:root[data-theme="dark"] .site-header.floating-nav .nav-link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

@media (hover: hover) {
  :root[data-theme="dark"] .site-header.floating-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  }
}

/* Chevron */
.site-header.floating-nav .nav-chevron {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.5 !important;
  margin-left: 2px !important;
  transition: transform 0.2s ease !important;
}

.site-header.floating-nav .nav-item.is-open .nav-chevron {
  transform: rotate(180deg) !important;
}

@media (hover: hover) {
  .site-header.floating-nav .nav-item.has-dropdown:hover .nav-chevron {
    transform: rotate(180deg) !important;
  }
}

/* ============================================
   DROPDOWN - Animated & Glassmorphic
   ============================================ */
.site-header.floating-nav .nav-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-8px) scale(0.96) !important;
  transform-origin: top center !important;
  width: 340px !important;
  min-width: 340px !important;
  padding: 8px !important;
  border-radius: 18px !important;
  border: 2px solid transparent !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 252, 253, 0.95) 100%) padding-box,
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.03)) border-box !important;
  background-clip: padding-box, border-box !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  box-shadow:
    0 20px 50px -12px rgba(0, 0, 0, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  filter: blur(4px) !important;
  transition:
    opacity 0.2s ease-out,
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.2s ease-out,
    visibility 0s linear 0.2s !important;
  z-index: 20 !important; /* Dropdown level */
}

/* Bridge area to prevent flickering */
.site-header.floating-nav .nav-dropdown::before {
  content: '' !important;
  position: absolute !important;
  top: -12px !important;
  left: 0 !important;
  right: 0 !important;
  height: 16px !important;
  background: transparent !important;
}

/* Show dropdown when is-open class is applied */
.site-header.floating-nav .nav-item.is-open .nav-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
  filter: blur(0px) !important;
  transition:
    opacity 0.25s ease-out,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.25s ease-out,
    visibility 0s linear 0s !important;
}

/* Show dropdown on hover (desktop only) */
@media (hover: hover) {
  .site-header.floating-nav .nav-item.has-dropdown:hover .nav-dropdown,
  .site-header.floating-nav .nav-dropdown:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
    filter: blur(0px) !important;
    transition:
      opacity 0.25s ease-out,
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      filter 0.25s ease-out,
      visibility 0s linear 0s !important;
  }
}

/* Dark mode dropdown - Blueish undertone with gradient border */
:root[data-theme="dark"] .site-header.floating-nav .nav-dropdown {
  border: 2px solid transparent !important;
  background:
    linear-gradient(180deg, rgba(18, 25, 45, 0.98) 0%, rgba(15, 21, 40, 0.95) 100%) padding-box,
    linear-gradient(180deg, rgba(140, 182, 255, 0.28), rgba(140, 182, 255, 0.08)) border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow:
    0 24px 50px -12px rgba(0, 0, 0, 0.7),
    inset 0 2px 0 rgba(140, 182, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(140, 182, 255, 0.1),
    0 0 40px -15px rgba(140, 182, 255, 0.08) !important;
}

/* Dropdown content */
.site-header.floating-nav .nav-dropdown-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* Dropdown item */
.site-header.floating-nav .nav-dropdown-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 12px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: #1a1a1a !important;
  transition: background 0.15s ease !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

@media (hover: hover) {
  .site-header.floating-nav .nav-dropdown-item:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

:root[data-theme="dark"] .site-header.floating-nav .nav-dropdown-item {
  color: #f3f4f6 !important;
}

@media (hover: hover) {
  :root[data-theme="dark"] .site-header.floating-nav .nav-dropdown-item:hover {
    background: rgba(140, 182, 255, 0.08) !important;
  }
}

/* Dropdown icon */
.site-header.floating-nav .nav-dropdown-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--icon-color, #6366f1) 12%, #f8f9fa) !important;
  color: var(--icon-color, #6366f1) !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

:root[data-theme="dark"] .site-header.floating-nav .nav-dropdown-icon {
  background: rgba(30, 40, 65, 0.8) !important;
  color: rgba(180, 200, 255, 0.9) !important;
}

.site-header.floating-nav .nav-dropdown-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2 !important;
}

/* Dropdown text */
.site-header.floating-nav .nav-dropdown-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.site-header.floating-nav .nav-dropdown-title {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #111827 !important;
  text-decoration: none !important;
}

:root[data-theme="dark"] .site-header.floating-nav .nav-dropdown-title {
  color: #f3f4f6 !important;
}

.site-header.floating-nav .nav-dropdown-desc {
  font-size: 0.6875rem !important;
  line-height: 1.5 !important;
  color: #6b7280 !important;
}

:root[data-theme="dark"] .site-header.floating-nav .nav-dropdown-desc {
  color: #6b7280 !important;
}

/* ============================================
   RIGHT: Resume Button + Theme Toggle (Premium pill style)
   ============================================ */
.site-header.floating-nav .nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  border-radius: var(--radius-pill) !important;
}

:root[data-theme="dark"] .site-header.floating-nav .nav-actions {
  background: transparent !important;
}

/* Hide old resume from nav-menu */
.site-header.floating-nav .nav-resume {
  display: none !important;
}

/* Resume button */
.site-header.floating-nav .nav-resume-btn {
  height: 36px !important;
  padding: 0 18px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  background: #1A1A1A !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

@media (hover: hover) {
  .site-header.floating-nav .nav-resume-btn:hover {
    background: #000000 !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  }
}

.site-header.floating-nav .nav-resume-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

:root[data-theme="dark"] .site-header.floating-nav .nav-resume-btn {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

@media (hover: hover) {
  :root[data-theme="dark"] .site-header.floating-nav .nav-resume-btn:hover {
    background: #f0f0f0 !important;
    color: #000000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  }
}

/* Theme toggle */
.site-header.floating-nav .theme-toggle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  color: #9ca3af !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

@media (hover: hover) {
  .site-header.floating-nav .theme-toggle:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #000000 !important;
  }
}

:root[data-theme="dark"] .site-header.floating-nav .theme-toggle {
  color: #9ca3af !important;
}

@media (hover: hover) {
  :root[data-theme="dark"] .site-header.floating-nav .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
  }
}

.site-header.floating-nav .theme-toggle svg {
  width: 18px !important;
  height: 18px !important;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .site-header.floating-nav {
    top: 16px !important;
    padding: 0 16px !important;
  }

  .site-header.floating-nav.scrolled {
    top: 12px !important;
  }

  .site-header.floating-nav .container,
  .site-header.floating-nav #site-header-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    justify-content: space-between !important;
  }

  .site-header.floating-nav.scrolled .container,
  .site-header.floating-nav.scrolled #site-header-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
  }

  .site-header.floating-nav .brand {
    padding: 4px 10px 4px 4px !important;
    background: transparent !important;
  }

  .site-header.floating-nav .brand-name {
    display: none !important;
  }

  .site-header.floating-nav .nav-menu {
    display: none !important;
    border: none !important;
    background: transparent !important;
  }

  /* Ensure site-nav is positioned for absolute children */
  .site-header.floating-nav .site-nav {
    position: static !important;
  }

  .site-header.floating-nav .nav-actions {
    padding: 4px !important;
    background: transparent !important;
  }

  /* Ensure touch targets are 44x44px minimum on mobile */
  .site-header.floating-nav .theme-toggle {
    width: 44px !important;
    height: 44px !important;
  }

  .site-header.floating-nav .nav-resume-btn {
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 20px !important;
  }

  .site-header.floating-nav .brand-mark {
    width: 44px !important;
    height: 44px !important;
    font-size: 0.8rem !important;
  }

  /* Mobile menu toggle - 44px minimum for touch targets */
  .site-header.floating-nav .nav-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    padding: 0 !important;
  }

  @media (hover: hover) {
    .site-header.floating-nav .nav-toggle:hover {
      background: rgba(0, 0, 0, 0.05) !important;
    }

    :root[data-theme="dark"] .site-header.floating-nav .nav-toggle:hover {
      background: rgba(255, 255, 255, 0.1) !important;
    }
  }

  .site-header.floating-nav .nav-toggle-bar {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #374151 !important;
    border-radius: 1px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
  }

  .site-header.floating-nav .nav-toggle-bar::before,
  .site-header.floating-nav .nav-toggle-bar::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: inherit !important;
    border-radius: 1px !important;
    transition: all 0.2s ease !important;
  }

  .site-header.floating-nav .nav-toggle-bar::before {
    top: -6px !important;
  }

  .site-header.floating-nav .nav-toggle-bar::after {
    top: 6px !important;
  }

  :root[data-theme="dark"] .site-header.floating-nav .nav-toggle-bar {
    background: #d1d5db !important;
  }

  /* Open state */
  .site-header.floating-nav .nav-toggle[aria-expanded="true"] .nav-toggle-bar {
    background: transparent !important;
  }

  .site-header.floating-nav .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before {
    top: 0 !important;
    transform: rotate(45deg) !important;
    background: #374151 !important;
  }

  .site-header.floating-nav .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after {
    top: 0 !important;
    transform: rotate(-45deg) !important;
    background: #374151 !important;
  }

  :root[data-theme="dark"] .site-header.floating-nav .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before,
  :root[data-theme="dark"] .site-header.floating-nav .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after {
    background: #d1d5db !important;
  }

  /* Mobile menu dropdown */
  .site-header.floating-nav .nav-menu.open,
  .site-header.floating-nav .nav-menu.is-open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 76px !important;
    left: 16px !important;
    right: 16px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-radius: 20px !important;
    padding: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15) !important;
    gap: 4px !important;
    z-index: 9999 !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
  }

  :root[data-theme="dark"] .site-header.floating-nav .nav-menu.open,
  :root[data-theme="dark"] .site-header.floating-nav .nav-menu.is-open {
    background: linear-gradient(
      to bottom,
      rgba(18, 25, 45, 0.98) 0%,
      rgba(15, 21, 40, 0.98) 100%
    ) !important;
    border-color: rgba(140, 182, 255, 0.12) !important;
  }

  .site-header.floating-nav .nav-menu.open .nav-item,
  .site-header.floating-nav .nav-menu.is-open .nav-item {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
  }

  .site-header.floating-nav .nav-menu.open .nav-link,
  .site-header.floating-nav .nav-menu.is-open .nav-link {
    width: 100% !important;
    padding: 14px 16px !important;
    min-height: 48px !important;
    justify-content: space-between !important;
  }

  .site-header.floating-nav .nav-menu.open .nav-dropdown,
  .site-header.floating-nav .nav-menu.is-open .nav-dropdown {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    min-width: 100% !important;
    border-radius: 12px !important;
    margin-top: 4px !important;
    box-shadow: none !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    opacity: 1 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .site-header.floating-nav .nav-menu.open .nav-item.is-open .nav-dropdown,
  .site-header.floating-nav .nav-menu.is-open .nav-item.is-open .nav-dropdown {
    visibility: visible !important;
    pointer-events: auto !important;
    max-height: 500px !important;
    padding: 8px !important;
  }

  :root[data-theme="dark"] .site-header.floating-nav .nav-menu.open .nav-dropdown,
  :root[data-theme="dark"] .site-header.floating-nav .nav-menu.is-open .nav-dropdown {
    border-color: rgba(255, 255, 255, 0.1) !important;
  }
}

/* Desktop: Hide mobile toggle */
@media (min-width: 901px) {
  .site-header.floating-nav .nav-toggle {
    display: none !important;
  }
}

/* ============================================
   ANIMATION ENTRANCE
   ============================================ */
.site-header.floating-nav .container,
.site-header.floating-nav #site-header-container {
  animation: navbarSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes navbarSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-header.floating-nav .container,
  .site-header.floating-nav #site-header-container {
    animation: none !important;
  }

  .site-header.floating-nav .nav-dropdown {
    transition: opacity 0.1s ease, visibility 0.1s ease !important;
  }

  .site-header.floating-nav .nav-chevron {
    transition: none !important;
  }
}

/* ============================================
   CRITICAL OVERRIDES - Ensure dropdown always works on hover (desktop only)
   ============================================ */
@media (min-width: 901px) and (hover: hover) {
  /* Force dropdown visibility on hover - highest specificity */
  .site-header.floating-nav .nav-item.has-dropdown:hover > .nav-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
  }
}

@media (min-width: 901px) {
  .site-header.floating-nav .nav-item.has-dropdown:focus-within > .nav-dropdown,
  .site-header.floating-nav .nav-item.has-dropdown.is-open > .nav-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
  }

  /* Ensure nav-item doesn't block hover */
  .site-header.floating-nav .nav-item.has-dropdown {
    position: relative !important;
  }

  /* Ensure dropdown is positioned correctly */
  .site-header.floating-nav .nav-dropdown {
    position: absolute !important;
    pointer-events: none !important;
  }

  .site-header.floating-nav .nav-dropdown-content {
    pointer-events: auto !important;
  }
}