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

@layer base {
  html {
    @apply scroll-smooth;
  }

  body {
    @apply font-sans text-gray-700 antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-bold text-gray-900;
  }
}

div.field_with_errors > label {
  @apply text-red-900;
}

div.field_with_errors > :is(input, textarea, select) {
  @apply border-red-300 text-red-900 placeholder-red-300;
}

.input-primary:focus,.input-primary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(97 181 148/var(--tw-border-opacity,1));
  --tw-ring-color: transparent;
}

@layer utilities {
  .rounded-lg {
    border-radius: 2rem;
  }
}

@layer components {
  .cta-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .primary-body {
    padding-top: 4rem;
  }

  .cta-gradient {
    background: linear-gradient(calc(var(--gradient-angle) * 1deg), var(--gradient-from), var(--gradient-to));
  }

  .get-started {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105 hover:cursor-pointer
  }

  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 font-medium transition duration-200 ease-in-out;
    border-radius: 2rem;
  }

  .btn-primary {
    @apply shadow bg-primary-600 hover:bg-primary-600 focus:outline-none text-white font-bold py-2 px-4 rounded hover:cursor-pointer;
  }

  .btn-round {
    @apply inline-flex items-center justify-center px-6 py-3 w-48 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105 hover:cursor-pointer
  }

  .btn-round-white {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-bold transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600 text-base bg-white ml-2 hover:cursor-pointer
  }

  .input-primary {
    @apply inline-flex items-center justify-center px-3 py-2 rounded-md transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 focus:border-primary-300 w-72;
  }

  select.input-primary {
    line-height: 1.5rem;
    height: 44px;
  }

  .checkbox-primary {
    @apply w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-primary-500 focus:ring-2;
  }

  .label-primary {
    @apply block text-gray-600 md:text-right mb-1 md:mb-0 pr-4;
  }

  .btn-secondary {
    @apply btn bg-secondary-600 text-white hover:bg-secondary-700 hover:scale-105;
  }

  .btn-outline {
    @apply btn border-2 border-primary-600 text-primary-600 hover:scale-105;
  }

  .btn-login-oauth {
    @apply px-4 py-2 border flex gap-2 border-slate-200 rounded-lg text-slate-700 hover:border-primary-400 hover:text-primary-900 hover:shadow transition duration-150 mr-1 ml-1
  }

  .container {
    @apply mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl;
  }

  .section {
    @apply py-16 md:py-24;
  }

  .card {
    @apply bg-white p-6 transition duration-200 hover:shadow-md;
    border-radius: 2rem;
  }

  .nav-link {
    @apply text-gray-600 hover:text-primary-600 font-bold transition duration-200;
  }

  .feature-grid {
    @apply grid gap-8 md:grid-cols-2 lg:grid-cols-3;
  }

  /* Blog and Syntax Highlighting Styles */
  .highlight {
    @apply text-sm font-mono text-gray-200;
  }

  .highlight table {
    @apply w-full border-separate border-spacing-0;
  }

  .highlight table td {
    @apply p-0;
  }

  .highlight table td:first-child {
    @apply pr-4 text-right select-none text-gray-500 border-r border-gray-700;
  }

  .highlight table td:last-child {
    @apply pl-4 w-full;
  }

  .highlight .k, .highlight .kd {
    @apply text-purple-400 font-semibold;
  }

  .highlight .nf, .highlight .nx {
    @apply text-blue-400;
  }

  .highlight .s, .highlight .s1, .highlight .s2 {
    @apply text-green-400;
  }

  .highlight .mi, .highlight .mf {
    @apply text-orange-400;
  }

  .highlight .c, .highlight .c1, .highlight .cm {
    @apply text-gray-500 italic;
  }

  .highlight .o {
    @apply text-yellow-400;
  }

  .highlight .p {
    @apply text-gray-400;
  }

  .prose {
    @apply max-w-none;
  }

  .prose h1, .prose h2, .prose h3, .prose h4 {
    @apply font-heading font-bold text-gray-900;
  }

  .prose h1 {
    @apply text-4xl mb-8;
  }

  .prose h2 {
    @apply text-3xl mt-12 mb-6;
  }

  .prose h3 {
    @apply text-2xl mt-8 mb-4;
  }

  .prose p {
    @apply text-gray-700 leading-relaxed mb-6;
  }

  .prose a {
    @apply text-primary-600 hover:text-primary-700 no-underline;
  }

  .prose ul, .prose ol {
    @apply my-6 ml-6;
  }

  .prose li {
    @apply mb-2;
  }

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

  .prose img {
    @apply rounded-lg shadow-lg my-8;
  }

  .prose code:not(pre code) {
    @apply bg-gray-100 text-gray-900 px-1.5 py-0.5 rounded text-sm font-mono;
  }

  .table-of-contents {
    @apply bg-gray-50 p-6 rounded-lg my-8;
  }

  .table-of-contents nav {
    @apply space-y-2;
  }

  .table-of-contents a {
    @apply text-gray-700 hover:text-primary-600 no-underline;
  }

  .table-of-contents ul {
    @apply list-none ml-4 space-y-2;
  }

  .pro-badge {
    @apply inline-flex items-center rounded-full px-3 py-1.5 text-xs font-medium bg-primary-100 text-white mx-1 uppercase;
  }

  .testimonials-container{padding:20px 0;position:relative}.testimonials-container.static{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;overflow:visible}.testimonials-track{display:flex;gap:2rem}.testimonials-track.animate{animation:30s testimonials-scroll infinite linear}.testimonial-card{flex:none;width:300px;background:#fff;padding:2rem;border-radius:.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,6%)}.testimonials-container.static .testimonial-card{width:100%}@keyframes testimonials-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-100%/4))}}.testimonials-container:hover .testimonials-track.animate{animation-play-state:paused}@media(max-width:768px){.testimonials-track.animate{animation:15s testimonials-scroll infinite linear}}
}