@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Nothing+You+Could+Do&display=fallback');

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "theme.css";
@import "landing_page";

/* Additional styles from job-board project */
@import "utility-patterns.css";
@import "range-slider.css";
@import "toggle-switch.css";

@layer base {
  input,
  button {
    all: unset;
  }
}

@layer components {
  .nav-link-base {
    @apply px-3 py-2 rounded-md transition duration-300 ease-in-out transform hover:scale-105 active:scale-95;
  }
  
  .nav-link-light {
    @apply text-gray-700 hover:text-blue-500;
  }
  
  .nav-link-dark {
    @apply text-white hover:bg-blue-300 hover:text-gray-800;
  }

  .btn {
    @apply px-3 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-indigo-600 border border-transparent rounded-full active:bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:shadow-outline-indigo;
  }
  
  .btn-sm {
    @apply px-3 py-2 text-sm font-medium text-center leading-5 text-white transition-colors duration-150 bg-rose-600 border border-transparent rounded-full active:bg-rose-600 hover:bg-rose-700 focus:outline-none focus:shadow-outline-rose;
  }

  .market-atlas-cta {
    position: relative;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-image: linear-gradient(120deg, #4a0e8f, #765ee8, #3155e7, #02aab0);
    background-size: 300% 300%;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 9999px;
    box-shadow: 0 9px 22px rgb(49 85 231 / 25%);
    animation: market-atlas-gradient-shift 12s ease infinite;
  }

  .market-atlas-cta::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / 22%) 48%, transparent 64%);
    transform: translateX(-120%);
    animation: market-atlas-cta-shine 5.5s ease-in-out infinite;
  }

  /* You can add more component classes here if needed */
}

@keyframes market-atlas-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes market-atlas-cta-shine {
  0%, 62% { transform: translateX(-120%); }
  82%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .market-atlas-cta {
    animation: none;
    transition: none;
  }

  .market-atlas-cta::before {
    display: none;
    animation: none;
  }
}

/* Additional Tailwind directives from job-board project */
@layer utilities {
  .rtl {
    direction: rtl;
  }
}

/* Alpine.js cloak directive */
[x-cloak=""] {
  display: none;
}



/* Uncomment and adjust as needed
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}
*/