/* Custom styles beyond Tailwind CSS */

/* Color palette */
:root {
  --color-primary: #73FA6C; /* Green primary color */
  --color-text: #1C1C1C; /* Dark text color */
  --color-text-secondary: #555555; /* Secondary text color */
  --color-placeholder: #999999; /* Placeholder text color */
  --color-white: #FFFFFF; /* White color */
}

/* Rich text content styling for articles */
.prose h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.prose h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--color-text); /* Updated from blue-600 */
}

.prose h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}

.prose p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.prose ul, .prose ol {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose a {
  color: var(--color-text); /* Updated from blue-600 */
  text-decoration: underline;
}

.prose a:hover {
  color: var(--color-primary); /* Updated from blue-800 */
}

/* Animation for loading content */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* Accessibility improvements */
:focus {
  outline: 2px solid var(--color-primary); /* Updated from blue-500 */
  outline-offset: 2px;
}

/* Button styles */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-primary:hover {
  background-color: #5cca56; /* Darker shade of primary color */
}

.btn-secondary {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background-color: transparent;
  padding: calc(0.5rem - 2px) calc(1rem - 2px); /* Account for border */
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-text);
}

/* Input styles */
input, textarea, select {
  border-color: var(--color-primary);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px rgba(115, 250, 108, 0.3);
}

::placeholder {
  color: var(--color-placeholder);
}

/* Card styles */
.card-highlight {
  background-color: var(--color-primary);
  color: var(--color-text);
}

.card-highlight svg {
  color: var(--color-white);
}

/* Enhanced card styles for better contrast */
.bg-white {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Background color for the page */
body.bg-gray-100 {
  background-color: #f5f7fa !important;
}

/* Hover effects for cards */
#categoriesList li:hover {
  background-color: rgba(115, 250, 108, 0.1);
  border-left: 3px solid var(--color-primary);
  padding-left: 8px;
  transition: all 0.2s ease;
}

#allCategories .category-card:hover,
#popularArticles .article-card:hover,
#categoryArticles .article-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}


/* Better mobile experience */
@media (max-width: 640px) {
  h1 {
    font-size: 1.5rem !important;
  }
  
  h2 {
    font-size: 1.25rem !important;
  }
}