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

@layer base {
  main .prose h1, main .prose h2, main .prose h3, main .prose h4, main .prose h5, main .prose h6 {
    @apply text-gray-900;
  }
  main .post-body h2 {
      @apply !pt-0;
  }
  main.post-body h1 {
    @apply text-4xl font-bold;
  }
  main.post-body h2 {
    @apply text-3xl font-bold !pt-0;
  }
  main.post-body h3 {
    @apply text-2xl font-bold;
  }
  main.post-body h4 {
    @apply text-xl font-bold;
  }
  main.post-body h5 {
    @apply text-lg font-bold;
  }
  main.post-body ul {
    @apply list-disc list-outside ml-4;
  }
  main.post-body a {
    @apply text-blue-600 hover:underline;
  }
  div#list-cities-footer a {
    @apply underline text-blue-200 hover:text-white;
  }
  .bio-content li {
    @apply ml-6;
  }
  .bio-content ol li {
    @apply list-decimal;
  }
  .bio-content ul li {
    @apply list-disc;
  }
  #advisor-bio a {
    @apply text-blue-600 no-underline border-blue-600 border-b hover:border-b-2;
  }
}

@layer components {
  /* Animation classes */
  .hidden {
    display: none;
  }
  /* Transition for the toggle icon */
  [data-controller="toc"] svg {
    @apply transition-transform duration-300 ease-in-out;
  }
}

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

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

.form-field.is-required > label:first-child:after {
  content: '*';
  margin-left: 2px;
}