/**
 * Authentication Links Module
 *
 * Contains all authentication-related styles including:
 * - Sign In link styles
 * - Get Started button styles
 * - Auth container layout
 * - Hover effects and animations
 * - Button shine effects
 */

/* ==========================================================================
   Authentication Links
   ========================================================================== */

.navbar__auth {
  display: flex;
  align-items: center;
  gap: 1rem; /* 16px spacing between Sign In and Get Started buttons */
  flex-shrink: 1; /* Allow shrinking before being hidden */
  min-width: 0; /* Allow flex shrinking */
  margin-left: 0; /* No left margin - spacing handled by actions margin-right */
}

.navbar__auth-link,
.navbar__auth-button {
  flex-shrink: 0; /* Prevent auth buttons from shrinking */
  white-space: nowrap; /* Prevent text wrapping */
}

.navbar__auth-link {
  display: flex;
  align-items: center;
  gap: var(--navbar-spacing-sm);
  padding: 0.375rem 0.875rem; /* Reduced from var(--navbar-spacing-sm) var(--navbar-spacing-md) for compact navbar */
  text-decoration: none;
  color: var(--navbar-text-secondary);
  font-size: 0.8125rem; /* Reduced from 0.875rem for more compact navbar */
  font-weight: var(--navbar-font-weight-medium);
  border-radius: var(--navbar-border-radius);
  transition: all var(--navbar-transition-base);
}

.navbar__auth-link:hover {
  color: var(--navbar-text-primary);
  background: var(--navbar-hover);
}

.navbar__auth-button {
  display: flex;
  align-items: center;
  gap: var(--navbar-spacing-sm);
  padding: 8px 16px; /* Reduced from 10px 20px for more compact navbar */
  /* Gradient background - Dark blue to navy for visibility */
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 50%, #1e3a8a 100%);
  color: white;
  text-decoration: none;
  font-size: 0.8125rem; /* Reduced from 0.875rem for more compact navbar */
  font-weight: var(--navbar-font-weight-semibold);
  border-radius: 8px;
  transition: all var(--navbar-transition-base);
  position: relative;
  overflow: hidden;
  border: none;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.navbar__auth-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left var(--navbar-transition-slow);
}

.navbar__auth-button:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 50%, #172554 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5);
}

.navbar__auth-button:hover::before {
  left: 100%;
}

.navbar__auth-button:active {
  transform: translateY(0);
}