/* Mobile CardNav specific styles */

.hamburger-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 6px;
  width: 30px;
  height: 24px;
}

.hamburger-menu:hover .hamburger-line {
  opacity: 0.75;
}

.hamburger-line {
  width: 30px;
  height: 2px;
  background-color: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease, margin 0.3s ease;
  transform-origin: 50% 50%;
}

.hamburger-menu.open .hamburger-line:first-child {
  transform: translateY(4px) rotate(45deg);
}

.hamburger-menu.open .hamburger-line:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

/* 
  The dropdown content container. 
  It will overlay the screen below the navbar.
*/
.card-nav-content {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: 70px; /* Below the logo/hamburger */
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  visibility: hidden;
  pointer-events: none;
  z-index: 55;
  will-change: height, opacity;
}

#navbar.nav-open .card-nav-content {
  visibility: visible;
  pointer-events: auto;
}

.nav-card {
  border-radius: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  gap: 12px;
  user-select: none;
  min-height: 80px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.nav-card-label {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.5px;
  font-family: 'Sora', sans-serif;
}

.nav-card-links {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-card-link {
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
}

.nav-card-link:hover {
  opacity: 0.75;
}

.nav-card-link-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-card-link:hover .nav-card-link-icon {
  transform: translate(3px, -3px);
}