/* Complete reset of header positioning to ensure it stays on top */
.main-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999999 !important;
  background-color: var(--nav-bg) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  width: 100% !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: flex !important;
  pointer-events: auto !important;
}

/* Allow transform effects on cards by creating separate stacking contexts */
.project-card,
.highlight-card {
  will-change: transform, box-shadow !important;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.project-card:hover,
.project-card:focus-within,
.highlight-card:hover,
.highlight-card:focus-within {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg), 0 0 15px rgba(220, 38, 38, 0.15) !important;
}

/* Ensure dark mode has proper box-shadow */
body.dark-theme .project-card:hover,
body.dark-theme .project-card:focus-within,
body.dark-theme .highlight-card:hover,
body.dark-theme .highlight-card:focus-within {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(220, 38, 38, 0.3) !important;
}

/* Create an alternative hover effect with border and glow instead of transform */


/* Ensure main container has proper padding to avoid header overlap */
main {
  padding-top: 90px !important;
}

body {
  position: relative !important;
  margin-top: 0 !important;
  /* Fix double margin issue */
  padding-top: 60px !important;
}

.main-nav .container {
  opacity: 1 !important;
  visibility: visible !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Fix navigation alignment */
.nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

.nav-links li {
  margin: 0 !important;
}

.nav-links a {
  display: inline-block !important;
  padding: 0.5rem 0 !important;
}

/* Override any potential stacking issues */
.projects-grid,
.highlight-reel-section,
.project-card,
.highlight-card,
.project-card:hover,
.highlight-card:hover,
.project-card:focus-within,
.highlight-card:focus-within {
  z-index: auto !important;
}

/* Create a utility class to ensure an element appears on top */
.overlays-page {
  position: fixed !important;
  z-index: 999999 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fix for dark mode highlight-reel */
body.dark-theme .highlight-reel-container::-webkit-scrollbar-track {
  background: var(--card-bg) !important;
}

body.dark-theme .highlight-reel-container::-webkit-scrollbar-thumb {
  background: var(--primary) !important;
}