@import "tailwindcss";

/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Set Inter as the default font for the entire application */
* {
  font-family: 'Inter', sans-serif;
}

/* Custom styles for Design Jobs World */

/* Prose styling for job descriptions - WCAG 2.1 AA compliant */
.prose {
  @apply text-gray-900;
}

.prose h1 {
  @apply text-2xl font-bold text-gray-900 mb-4;
}

.prose h2 {
  @apply text-xl font-bold text-gray-900 mb-3;
}

.prose h3 {
  @apply text-lg font-semibold text-gray-900 mb-2;
}

.prose p {
  @apply text-gray-800 mb-4 leading-relaxed;
}

.prose ul {
  @apply list-disc list-inside mb-4 space-y-1;
}

.prose ol {
  @apply list-decimal list-inside mb-4 space-y-1;
}

.prose li {
  @apply text-gray-800;
}

.prose strong {
  @apply font-semibold text-gray-900;
}

.prose em {
  @apply italic text-gray-800;
}

.prose a {
  @apply text-purple-700 hover:text-purple-800 underline;
}

.prose blockquote {
  @apply border-l-4 border-purple-200 pl-4 italic text-gray-700 mb-4;
}

.prose code {
  @apply bg-gray-100 text-gray-900 px-1 py-0.5 rounded text-sm;
}

.prose pre {
  @apply bg-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
}

.prose pre code {
  @apply bg-transparent p-0;
}

/* Header styles */
.nav-link {
  @apply relative;
}

.nav-link::after {
  content: '';
  @apply absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 transition-all duration-200;
}

.nav-link:hover::after {
  @apply w-full;
}



/* Hero styles */
.legacy-headline {
  @apply font-sans font-bold;
}

.legacy-subheadline {
  @apply font-sans;
}

/* Inter font family */
.font-inter {
  font-family: 'Inter', sans-serif;
}

/* Job card styles - WCAG 2.1 AA compliant */
.job-card {
  @apply bg-white rounded-xl shadow-md p-6 border border-gray-100 border-l-4 border-l-[#BD9BAC] cursor-pointer relative transition-all duration-300 ease-in-out;
}

.job-card:hover {
  @apply shadow-lg border-[#BD9BAC];
}

/* Visited job state - different visual treatment */
.visited-job {
  @apply bg-gray-50 border-l-4 border-l-transparent;
}

.visited-job:hover {
  @apply bg-gray-100;
}

.company-icon {
  @apply w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center text-purple-700 font-bold text-lg;
}

.job-tag {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

/* Filter styles - WCAG 2.1 AA compliant */
.filter-select {
  @apply appearance-none bg-white border border-gray-400 rounded-lg px-3 py-2 pr-8 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent;
}

/* Header CTA styles */
.header-cta {
  @apply transform hover:scale-105 transition-transform duration-200;
}