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

@layer components {
  .cta-button {
    @apply cursor-pointer rounded-full border-2 font-open-sans text-[0.6em] sm:text-[1.13em] font-bold py-[2px] px-[10px] sm:py-[8px] sm:px-[20px];
  }

  .primary-cta-button {
    @apply cta-button border-amber bg-amber  text-white;
  }

  .secondary-cta-button {
    @apply cta-button border-amber bg-transparent text-charcoal hover:bg-amber hover:text-white;
  }

  .alternate-cta-button {
    @apply cta-button border-teal bg-transparent text-teal hover:bg-teal hover:text-white;
  }

  .inverted-cta-button {
    @apply cta-button border-white bg-transparent text-white hover:bg-white hover:text-teal;
  }

  .text-style-h1 {
    @apply text-[40px] md:text-[48px] leading-[60px] font-bold;
  }

  .text-style-h2 {
    @apply text-[32px] md:text-[40px] leading-[48px] font-bold;
  }

  .text-style-h3 {
    @apply text-[24px] md:text-[32px] leading-[40px] font-semibold;
  }

  .text-style-h4 {
    @apply text-[18px] md:text-[24px] leading-[32px] font-medium;
  }

  .text-style-h5 {
    @apply text-[18px] md:text-[20px] leading-[24px] font-medium;
  }

  .text-style-nav-links {
    @apply text-[18px] leading-[22px] font-semibold text-teal;
  }

  .text-style-nav-sub-links {
    @apply text-[16px] leading-[20px] font-medium text-charcoal;
  }

  .text-style-subheader {
    @apply text-[15px] leading-[16px] font-bold font-open-sans;
  }

  .text-style-body-copy {
    @apply text-[18px] md:text-[15px] leading-[22px] font-normal font-open-sans;
  }

  .text-style-caption {
    @apply text-[12px] leading-[16px] font-normal font-open-sans italic;
  }

  .accordion-content {
    @apply hidden;
  }

  .accordion-content.active {
    @apply block;
  }

  .accordion-header.active .caret {
    @apply rotate-180;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}