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

body {
  font-family: "Hanken Grotesk", sans-serif;
}

::-moz-selection {
  color: theme("colors.azure.900");
  background: theme("colors.azure.100");
}

::selection {
  color: theme("colors.azure.950");
  background: theme("colors.lime.50");
}

.typewriter-cursor::after {
  content: "|";
  animation: cursor 1.1s infinite step-end;
}

@layer components {
  [data-controller="ribbon"] {
    mask-image: linear-gradient(
      to right,
      transparent,
      black 20%,
      black 80%,
      transparent
    );
  }
}

@keyframes cursor {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.content {
  & a {
    @apply text-primary-600 font-medium cursor-pointer;
  }

  a:hover {
    @apply text-primary-700 duration-300 transition-colors;
  }

  p {
    @apply text-lg leading-relaxed text-slate-700;
  }

  p > img {
    @apply w-full border border-zinc-200 rounded-lg bg-gray-100 mt-4 mt-6 mb-4;
  }

  p > code,
  p > a > code {
    @apply text-sm px-1.5 py-1 rounded-lg bg-azure-100 text-azure-900;
  }

  & code {
    @apply px-1.5 py-1 rounded-lg overflow-x-auto overflow-y-hidden;
  }

  h1,
  h2,
  h3,
  h4 {
    font-weight: bold;
    margin-top: 1.75rem;
    margin-bottom: 1rem;

    &:first-child {
      margin-top: 0;
    }
  }

  h2 + p,
  h3 + p,
  h4 + p {
    margin-top: 1rem;
  }

  h1,
  h2 {
    font-size: 1.875rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    margin-top: 1.25rem;
    margin-bottom: 0.25rem;
    font-size: 1.25rem;
  }

  & pre {
    overflow-x: auto;
    margin-bottom: 1.25rem;
  }

  & p > strong {
    font-weight: 600;
    color: black;
  }

  & p + h2 {
    margin-top: 2rem;
  }

  & p {
    @apply text-lg leading-relaxed text-slate-700;
    margin-bottom: 1rem;
  }

  & img {
    @apply w-full border border-zinc-200 rounded-lg shadow-sm bg-gray-100;
  }

  & ul,
  ol {
    list-style-type: none; /* Remove default list styling */
    font-size: 1.125rem;
    font-weight: 400;
    counter-reset: list-counter; /* Reset the counter for each list */

    & li {
      display: inlineblock;
      margin-bottom: 1.125rem;
      @apply text-slate-700;
      position: relative; /* For absolute positioning of the number */
      padding-left: 2rem; /* Make space for the number */

      &::before {
        content: counter(list-counter) "."; /* Add the number and a period */
        counter-increment: list-counter; /* Increment the counter */
        position: absolute;
        left: 0;
        top: 0;
        font-weight: 600; /* Make the number bold */
        color: theme("colors.slate.600"); /* Adjust color as needed */
      }

      & code {
        @apply bg-azure-100 text-azure-900 text-sm px-1.5;
      }

      & p {
        @apply mb-0;
      }

      & strong {
        @apply font-bold text-black;
      }
    }
  }

  & ul {
    & li::before {
      content: "•"; /* Use a bullet point for unordered lists */
      counter-increment: none; /* Don't increment counter for ul */
    }
  }

  & figure {
    margin: 1.75rem 0;
  }
}