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

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply text-foreground h-full overflow-y-auto bg-gray-100 font-sans;
  }
  html {
    @apply h-full font-sans text-base;
  }
  body #__next {
    @apply min-h-screen;
  }
  h1,
  h2,
  h3,
  h4,
  h5 {
    @apply font-sans font-semibold;
  }
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }

  label {
    @apply block text-sm;
  }

  a,
  button,
  input,
  select,
  textarea {
    @apply rounded outline-none focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-gray-300;
  }
}

@layer components {
  .blog-content {
    h2,
    h3,
    h4 {
      @apply mb-4 mt-12;
    }
    h2 {
      @apply text-2xl font-bold;
    }
    h3 {
      @apply text-xl font-semibold;
    }
    h4 {
      @apply text-lg font-semibold;
    }
    p {
      @apply mb-6 leading-relaxed;
    }
    p:has(> img) {
      @apply flex items-center justify-center overflow-hidden rounded-xl border bg-gray-50 p-2;
    }
    img {
      @apply mx-auto rounded-lg border;
    }
    ul,
    ol {
      @apply mb-6 ml-6;
    }
    ul {
      @apply list-disc;
    }
    ol {
      @apply list-decimal;
    }
    li {
      @apply mb-2;
    }
    hr {
      @apply my-12;
    }
    a {
      @apply text-primary-600 hover:underline;
    }
    blockquote {
      @apply my-6 border-l-4 border-gray-300 pl-4 italic text-gray-700;
    }
    pre {
      @apply my-6 overflow-x-auto rounded-lg bg-gray-100 p-4;
    }
    code {
      @apply rounded bg-gray-100 px-1 py-0.5 text-sm;
    }
  }

  .text-link {
    @apply text-primary-600 hover:text-primary-600 focus-visible:ring-primary-600 rounded-md font-medium outline-none hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1;
  }
  .formField {
    @apply mb-4;
  }
  .input {
    @apply appearance-none border px-2 text-gray-800 placeholder:text-gray-500;
  }
  input.input {
    @apply h-9;
  }
  .input-lg {
    @apply input px-3 py-3;
  }
  .input-error {
    @apply focus:ring-rose-500;
  }
  .checkbox {
    @apply text-primary-600 focus:ring-primary-600 size-4 rounded border-gray-300 shadow-sm;
  }
  .btn {
    @apply inline-flex h-9 select-none items-center justify-center gap-x-1.5 whitespace-nowrap rounded-md border px-2.5 text-sm font-medium;
  }
  a.btn {
    @apply cursor-pointer hover:no-underline;
  }

  .btn-default {
    @apply btn bg-white/50 text-gray-700 hover:bg-gray-50 hover:shadow-sm active:bg-gray-200 active:shadow-none;
  }
  .btn-danger {
    text-shadow: rgb(0 0 0 / 20%) 0px 1px 1px;
    @apply btn border-rose-700 bg-rose-600 text-white shadow-sm ring-1 ring-inset ring-white/10 hover:bg-rose-500 active:bg-rose-700;
  }
  .btn-link {
    @apply text-primary-600 inline-flex items-center underline;
  }
  .btn.btn-disabled {
    text-shadow: none;
    @apply pointer-events-none border-gray-200 bg-gray-500/5 text-gray-400 shadow-none;
  }
  .btn-primary {
    text-shadow: rgb(0 0 0 / 20%) 0px 1px 1px;
    @apply btn border-gray-900 bg-gray-800 text-white shadow-sm ring-1 ring-inset ring-white/10 hover:bg-gray-700 active:bg-gray-900;
  }

  a.btn-primary {
    @apply text-white;
  }

  .segment-button {
    @apply flex h-9 text-center;
  }

  .segment-button button {
    @apply inline-flex grow items-center justify-center border-b border-r border-t bg-gray-50 px-4 transition-colors first:rounded-r-none first:border-l last:rounded-l-none hover:bg-gray-50 focus:z-10 active:bg-gray-100;
  }

  .segment-button .segment-button-active {
    @apply pointer-events-none bg-white text-gray-800;
  }

  .menu {
    @apply relative;
  }

  .menu-items {
    @apply absolute z-30 mt-1 overflow-hidden rounded border bg-white shadow-md focus:outline-none;
  }

  .menu-item {
    @apply block w-full select-none truncate px-4 py-2 text-left;
  }

  button[disabled] {
    @apply cursor-not-allowed;
  }

  .card {
    @apply border-y bg-white p-4 shadow-sm md:rounded-lg md:border;
  }
}

@layer components {
  .heading {
    @apply text-primary-600 mb-2 text-center text-lg sm:mb-4 sm:text-xl;
  }
  .subheading {
    @apply mb-8 text-center text-2xl font-bold text-gray-800 sm:mb-16 sm:text-4xl;
  }
  .heading-sm {
    @apply mb-4 text-xl font-bold text-gray-800;
  }
  .text {
    @apply leading-relaxed text-gray-500 sm:text-lg;
  }
}

@layer utilities {
  .bg-pattern {
    background-color: #f9fafb;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f3f4f6' fill-opacity='0.75' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
  }
}
