/* Navigation Fix CSS - Proper Tailwind Integration */

/* Fix navigation header conflicts */
.nav-header {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  backdrop-filter: blur(8px) !important;
}

/* Force navigation to be visible on desktop */
@media (min-width: 1024px) {
  .nav-header #nav-content {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
  }
}

/* Override conflicting background colors */
.nav-header.bg-gray-200 {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}

.nav-header nav.bg-gray-200 {
  background: transparent !important;
}

/* Enhanced navigation links - only for custom nav-link classes */
.nav-link.custom-nav {
  color: #4a5568 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.375rem !important;
  transition: all 0.2s ease-in-out !important;
  position: relative !important;
  display: inline-block !important;
  margin: 0 0.25rem !important;
}

.nav-link.custom-nav:hover {
  color: #DE3F00 !important;
  background-color: rgba(222, 63, 0, 0.05) !important;
  transform: translateY(-1px) !important;
}

/* Ensure Tailwind navigation classes work properly */
.text-red-700, .text-red-500 {
  display: inline-block !important;
}

/* Specifically ensure navigation text colors are visible */
.nav-header .text-red-700 {
  color: #b91c1c !important;
}

.nav-header .text-red-500 {
  color: #ef4444 !important;
}

/* Fix text-sm lg:flex-grow visibility */
.text-sm.lg\:flex-grow {
  display: block !important;
}

@media (min-width: 1024px) {
  .text-sm.lg\:flex-grow {
    display: flex !important;
    flex-grow: 1 !important;
  }
}

/* Fix for responsive navigation visibility */
@media (min-width: 1024px) {
  .lg\:inline-block {
    display: inline-block !important;
  }
  
  .lg\:mt-0 {
    margin-top: 0 !important;
  }
  
  /* Ensure navigation content is visible on desktop */
  #nav-content.hidden.lg\:block {
    display: flex !important;
  }
  
  /* Fix Tailwind lg:flex class */
  .lg\:flex {
    display: flex !important;
  }
  
  /* Fix lg:items-center */
  .lg\:items-center {
    align-items: center !important;
  }
  
  /* Fix lg:w-auto */
  .lg\:w-auto {
    width: auto !important;
  }
}

/* Mobile responsive fixes */
@media (max-width: 1023px) {
  .block {
    display: block !important;
  }
  
  .mt-4 {
    margin-top: 1rem !important;
  }
}

/* Mobile menu improvements */
#nav-toggle {
  background: linear-gradient(135deg, #DE3F00, #CE422B) !important;
  border: none !important;
  color: white !important;
  transition: all 0.2s ease-in-out !important;
}

#nav-toggle:hover {
  background: linear-gradient(135deg, #CE422B, #B8391F) !important;
  transform: scale(1.05) !important;
}

/* Mobile navigation content */
#nav-content.hidden {
  display: none;
}

@media (max-width: 1023px) {
  #nav-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    z-index: 40;
  }
  
  #nav-content:not(.hidden) {
    display: block !important;
  }
  
  .nav-link {
    display: block !important;
    margin: 0.25rem 0 !important;
    padding: 0.75rem 1rem !important;
  }
}

/* Logo improvements */
.nav-header img.img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
  transition: transform 0.2s ease-in-out;
}

.nav-header a:hover img.img {
  transform: scale(1.05);
}

/* Brand text styling */
.nav-header .font-semibold {
  background: linear-gradient(135deg, #DE3F00, #CE422B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700 !important;
}

/* Post job button improvements */
.post-job {
  background: linear-gradient(135deg, #DE3F00, #CE422B) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 2px 4px rgba(222, 63, 0, 0.2) !important;
}

.post-job:hover {
  background: linear-gradient(135deg, #CE422B, #B8391F) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(222, 63, 0, 0.3) !important;
  color: white !important;
}

/* Job card improvements */
.job-list-item a {
  transition: all 0.2s ease-in-out !important;
  border: 1px solid #d1d5db !important;
}

.job-list-item a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
  border-color: #DE3F00 !important;
}

.job-list-item .pinned {
  border-color: #3b82f6 !important;
  background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 100%) !important;
}

.job-list-item .pinned:hover {
  border-color: #2563eb !important;
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15) !important;
}

/* Tag improvements */
.job-list-item .bg-green-400 {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-color: #059669 !important;
  color: white !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3) !important;
}

.bg-orange-400 {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border-color: #d97706 !important;
  color: white !important;
  font-weight: 600 !important;
}

/* Search form improvements */
.search-container input {
  border: 2px solid #e5e7eb !important;
  transition: all 0.2s ease-in-out !important;
}

.search-container input:focus {
  border-color: #DE3F00 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(222, 63, 0, 0.1) !important;
}

/* Button improvements */
button[type="submit"] {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border-color: #d97706 !important;
  transition: all 0.2s ease-in-out !important;
}

button[type="submit"]:hover {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  transform: translateY(-1px) !important;
}

/* Footer improvements */
footer.bg-gray-200 {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* Typography improvements */
h1, h2, h3 {
  color: #1f2937 !important;
}

/* Animation improvements */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.job-list-item {
  animation: fadeInUp 0.3s ease-out;
}

.job-list-item:nth-child(2) { animation-delay: 0.1s; }
.job-list-item:nth-child(3) { animation-delay: 0.2s; }
.job-list-item:nth-child(4) { animation-delay: 0.3s; }
.job-list-item:nth-child(5) { animation-delay: 0.4s; }

/* Fix overlapping z-index issues */
.nav-header {
  z-index: 1000 !important;
}

#crab-moving {
  z-index: 10 !important;
}

/* Responsive fixes */
@media (max-width: 768px) {
  .nav-header {
    padding: 0.5rem !important;
  }
  
  .nav-header .lg\:w-1\/2 {
    width: 100% !important;
  }
  
  .post-job {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
  }
}

/* Print styles */
@media print {
  .nav-header {
    position: static !important;
    box-shadow: none !important;
    background: white !important;
  }
  
  .nav-link::after {
    display: none !important;
  }
}