@import 'tailwindcss';

@import '../fonts/tilt-warp/tilt-warp.css';
@import '../fonts/encode-sans/encode-sans.css';
@import '../fonts/m-plus-1-code/m-plus-1-code.css';

@import './modules/callouts.css' layer(base);
@import './prism.css';

@plugin '@tailwindcss/typography';
@plugin 'tailwindcss-safe-area';

@theme {
  --grid-template-rows-article-header: 1fr auto;

  --min-height-128: 32rem;
  --min-height-160: 40rem;
  --min-height-192: 48rem;
}

:root {
  --font-copy: 'Encode Sans', sans-serif;
  --font-heading: 'Tilt Warp', sans-serif;
  --font-monospace: 'M PLUS 1 Code', monospace;
}

body {
  font-family: var(--font-copy);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

blockquote {
  @apply relative mt-10 rounded-xl border-2 border-sky-500 ps-6 pe-6 font-normal text-slate-700 not-italic *:before:content-none *:after:content-none lg:ps-8 lg:pe-8 2xl:ps-10 2xl:pe-10 dark:text-slate-300;

  &::before {
    @apply absolute -top-8 left-4 block h-12 w-20 bg-slate-300 text-center text-8xl leading-none font-bold text-slate-300 not-italic content-['“'] dark:bg-slate-900 dark:text-slate-900;
    -webkit-text-stroke: var(--color-sky-600) 0.25rem;
  }
}

pre,
code {
  font-family: var(--font-monospace);
}

a:not(nav a, .button) {
  @apply font-normal text-inherit underline decoration-sky-600 decoration-2 underline-offset-4 transition-colors duration-300 hover:text-sky-600;
}

details {
  @apply overflow-clip rounded-xl shadow-xl border border-solid border-sky-600 bg-sky-200 text-sky-600 dark:bg-sky-950 dark:text-sky-300;

  margin: 1.25em 0;

  @media (min-width: 768px) {
    margin: 1.3333333em 0;
  }

  @media (min-width: 1024px) {
    margin: 1.2em 0;
  }

  > :not(summary) {
    @apply px-4 last:pb-4 sm:px-6 sm:last:pb-6;
  }

  &[open] summary {
    @apply border-b border-solid border-sky-600;
  }
}

summary {
  @apply cursor-pointer p-4;
  font-family: var(--font-heading);
}

dl {
  & dt {
    @apply font-normal! text-sky-600! dark:text-sky-300!;
    font-family: var(--font-heading);
  }

  & code {
    @apply text-sky-800! dark:text-sky-500!;
  }
}

.footnote-item {
  padding-inline: 0.4em;

  &:target {
    @apply bg-slate-200 dark:bg-sky-950;
  }
}

abbr {
  @apply no-underline;

  &::after {
    content: ' (' attr(title) ')';
  }
}

@media (hover: hover) {
  abbr {
    @apply underline decoration-sky-600 decoration-dotted decoration-2 underline-offset-4;

    &::after {
      content: '';
    }
  }
}