/**
 * v0-home-2025 styles.css
 * Styles for the new v0 design (2025 version)
 */

/* Base Styles */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  line-height: 1.5;
}

/* Handwritten Text Style */
.handwritten {
  font-family: 'Comic Sans MS', cursive, sans-serif;
  transform: rotate(-2deg);
}

/* AI Chat Section Styles */
#chat-form #chat-input {
  /* Styles for prominence are largely handled by Tailwind in the HTML */
  /* Ensure focus styles are clear */
}

#chat-form #chat-input:focus {
  outline: none; /* Tailwind handles focus:ring and focus:border */
}

#chat-form button:hover svg {
  /* color: #6d28d9; Tailwind handles hover:text-purple-700 */
}

/* Suggested Chat Prompts Styles */
.chat-suggestion {
  /* Base styles handled by Tailwind in HTML */
  /* Add any specific non-Tailwind styles here if needed */
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.chat-suggestion:hover {
  /* Hover styles handled by Tailwind in HTML */
}


/* Chat History Styles */
#chat-history {
  max-height: 300px;
  overflow-y: auto;
  scroll-behavior: smooth;
  border-radius: 0.5rem;
  padding: 0.5rem 0;
}

#chat-history::-webkit-scrollbar {
  width: 6px;
}

#chat-history::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

#chat-history::-webkit-scrollbar-thumb {
  background: #c7d2fe;
  border-radius: 10px;
}

#chat-history::-webkit-scrollbar-thumb:hover {
  background: #a5b4fc;
}

.loading-message {
  position: relative;
}

.loading-message::after {
  content: "...";
  position: absolute;
  animation: ellipsis 1.5s infinite;
}

@keyframes ellipsis {
  0% { content: "."; }
  33% { content: ".."; }
  66% { content: "..."; }
}

/* Course List Styles */
#course-list a {
  transition: all 0.2s ease;
}

#course-list a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Search Input Styles */
#search-input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}

/* Search and Filter Container Styles */
.flex.gap-2.justify-between.mb-6,
.flex.gap-2.mt-6.justify-between {
  display: flex;
  align-items: center;
}

.relative.flex-1 {
  flex-grow: 1;
}

/* Search Preview Styles */
#search-preview {
  max-height: 400px;
  overflow-y: auto;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

#search-preview::-webkit-scrollbar {
  width: 6px;
}

#search-preview::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

#search-preview::-webkit-scrollbar-thumb {
  background: #c7d2fe;
  border-radius: 10px;
}

#search-preview::-webkit-scrollbar-thumb:hover {
  background: #a5b4fc;
}

#search-preview a {
  transition: background-color 0.2s ease;
}

#search-preview a:hover {
  background-color: #eff6ff;
}

/* Filter Button Styles */
#filter-button:hover {
  background-color: #f5f3ff;
  border-color: #8b5cf6;
}

/* Filter Modal Styles */
#filter-modal {
  transition: opacity 0.2s ease;
}

#filter-modal.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Course Details Page Styles */
#course-content {
  transition: opacity 0.3s ease;
}

#loading-state {
  transition: opacity 0.3s ease;
}

#error-state {
  transition: opacity 0.3s ease;
}

#lead-form input:focus, 
#lead-form textarea:focus {
  outline: none;
  border-color: #3b82f6;
}

#related-courses a {
  transition: all 0.2s ease;
}

#related-courses a:hover {
  transform: translateY(-2px);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

/* Footer Link Styles */
footer a {
  transition: color 0.2s ease;
}

footer a:hover {
  color: #8b5cf6;
}

/* Responsive Adjustments */
@media (max-width: 640px) { /* Adjusted breakpoint from 480px to sm (640px) for better consistency with Tailwind */
  main > .max-w-2xl { /* Target the direct child div for homepage content */
    padding-left: 0.5rem; /* Smaller padding on small screens */
    padding-right: 0.5rem;
  }

  h1, h2 { /* Titles in the AI chat section */
    font-size: 1.75rem; /* Slightly larger than 1.5rem for better impact */
  }
  
  .handwritten { /* If still used, adjust its size */
    font-size: 0.7rem;
  }
  
  #chat-history {
    max-height: 200px;
  }

  /* Ensure chat input and course search input are full width on small screens */
  #chat-form #chat-input,
  #course-search-form #search-input {
    width: 100%;
  }

  /* Stack course search and filter button vertically on small screens */
  .flex.flex-col.sm\:flex-row.gap-3.max-w-lg.mx-auto {
     /* Tailwind handles this, but ensure it works as expected */
  }
}

/* Animation for Chat Input Focus - Retained from original, good for UX */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); /* purple-500 with alpha */
  }
  70% {
    box-shadow: 0 0 0 8px rgba(139, 92, 246, 0); /* Increased spread */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
  }
}

/* Apply pulse animation to the new chat input if desired, but Tailwind focus rings are often preferred */
/* #chat-form #chat-input:focus {
  animation: pulse 1.5s infinite;
} */


/* Loading Spinner Animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Contact Form Submit Button */
.contact-submit-button {
  background-color: #3b82f6; /* Tailwind blue-500 */
  color: white;
  padding: 0.5rem 1rem; /* py-2 px-4 */
  border-radius: 0.375rem; /* rounded-md */
  font-weight: 500; /* font-medium */
  font-size: 0.875rem; /* text-sm */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; /* Added for vertical alignment if text is multi-line or has icons */
  border: 1px solid transparent;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-submit-button:hover {
  background-color: #2563eb; /* Tailwind blue-600 */
}

.contact-submit-button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* Adjusted ring to be more visible */
}