/* Custom transitions to smooth out page navigation */

/* Add smooth scrolling to the page */
html {
  scroll-behavior: smooth;
}

/* Apply transitions only to specific elements to prevent layout shifts */
/* Removed global transition that was causing navigation jerking */

/* Ensure header has consistent height and smooth transitions */
header {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Logo transition to prevent flickering during dark mode switches */
.logo-transition {
  transition: opacity 0.15s ease-in-out;
}

/* Prevent layout shift during logo transitions */
header a[href="/"] {
  display: flex;
  align-items: center;
  position: relative;
}

/* Ensure logo images are positioned consistently without affecting layout */
header a[href="/"] img {
  height: 3.5rem; /* h-14 equivalent */
  width: auto;
}

/* Smooth transitions for images to prevent layout shifts */
img {
  transition: opacity 0.3s ease;
}

/* Smooth hover effects for interactive elements */
a, button {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

/* Navigation specific transitions to prevent jerking and FOUC */
nav a, .nav-link {
  transition: color 0.2s ease;
  /* Ensure initial state is defined to prevent FOUC */
  color: inherit;
}

/* Ensure navigation items are properly aligned */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: flex;
  align-items: center;
}

/* Prevent content jump when scrollbar appears/disappears */
html {
  overflow-y: scroll;
}