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

@layer base {
  h2 {
    @apply text-lg font-bold mb-6 mt-8;
  }

  h3 {
    @apply mb-4 text-sm uppercase text-zinc-500;
  }

  h3:not(:first-child) {
    @apply mt-6;
  }

  p + p,
  p + ul {
    @apply mt-6;
  }

  /* ul { */
  /*   @apply list-disc list-inside leading-relaxed; */
  /* } */
}

@layer components {
  .text-discreet {
    @apply text-zinc-500;
  }

  .content {
    @apply pb-20;
  }

  .content a         { @apply text-sky-600 border-b border-zinc-300; }
  .content a:hover   { @apply text-sky-700 border-b border-zinc-400; }
  .content a:visited { @apply text-indigo-600 }
  .content a:active  { @apply text-sky-500; }

  input#mobile-nav-is-open + div > a svg:last-of-type          { @apply hidden; }
  input#mobile-nav-is-open:checked + div > a svg:first-of-type { @apply hidden; }
  input#mobile-nav-is-open:checked + div > a svg:last-of-type  { @apply block; }

  input#mobile-nav-is-open + div > div.backdrop         { @apply hidden; }
  input#mobile-nav-is-open:checked + div > div.backdrop { @apply block; }

  input#mobile-nav-is-open + div > nav         { @apply hidden; }
  input#mobile-nav-is-open:checked + div > nav { @apply block }
}