@import './tokens.css';

/** Create stencil components for this */
@layer components {
  h1,
  .h1 {
    @apply font-heading text-2xl sm:text-4xl lg:text-6xl/tight font-extrabold mb-3 mt-0;
  }
  h2,
  .h2 {
    @apply font-heading text-xl sm:text-3xl font-extrabold mt-4 mb-4;
  }
  .h2--small {
    @apply font-heading text-xl font-extrabold mt-4 mb-4;
  }

  h3,
  .h3 {
    @apply font-heading text-xl font-extrabold mt-4 mb-4;
  }

  .h3--small {
    @apply font-heading text-lg font-extrabold mt-4 mb-2;
  }
  h1:focus,
  h2:focus,
  h3:focus {
    @apply focus:outline-0;
  }

  .label {
    @apply font-bold mb-2! tracking-wide;
  }
  p {
    @apply mb-4;
  }
  li:not(:last-child) {
    @apply mb-2;
  }
  .link,
  .html a {
    @apply text-blue-600 hover:text-blue-700 active:text-blue-800 underline focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500 cursor-pointer;
  }

  .link--with-parens::before {
    content: '(';
  }

  .link--with-parens::after {
    content: ')';
  }

  .capitalize-first::first-letter {
    text-transform: uppercase;
  }
}

@layer utilities {
  /** Override browser background color when autocomplete field */
  input:not(input[type='checkbox'], input[type='radio']),
  textarea {
    box-shadow: 0 0 0 1000px #fff inset !important;
  }
  /** Style active router link in main nav */
  .nav-items .router-link-active {
    @apply bg-blue-100 text-blue-700 font-bold;
  }
}