@import url('./zenburn.min.css');

@import url('./spacing.css');
@import url('./typography.css');

@font-face {
  font-family: 'BasementGrotesque';
  src: url('/fonts/BasementGrotesque-Black_v1.202.woff2') format('woff2');
}

@font-face {
  font-family: 'Didactic';
  src: url('/fonts/Didactic[wght].woff2') format('woff2');
}

:root {
  --readable-width: 80ch;
  --prose-width: 65ch;

  --breakpoint-xs: 640px;

  --c-transparent: transparent;
  --c-white: #ffffff;
  --c-black: hsl(197, 14%, 10%);
  --c-light-latte: hsl(44, 56%, 96%);
  --c-latte: hsl(44, 56%, 92%);
  --c-dark-latte: hsl(44, 56%, 87%);
  --c-opal: hsl(188, 19%, 76%);
  --c-light-blue: hsl(180, 11%, 55%);
  --c-dark-blue: hsl(214, 41%, 37%);
  --c-green: green;
  --c-red: red;

  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

* {
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-serif);
}

body {
  margin: 0 auto;
  width: 100%;
  background-color: var(--c-latte);
  min-height: 100vh;
  line-height: 1.5;
}

img,
picture {
  max-width: 100%;
  display: block;
}

header {
  margin-inline: 2rem;
}

main {
  padding-inline: 2rem;
  max-width: var(--readable-width);
}

blockquote {
  font-style: italic;
  border-left: 4px var(--c-black) solid;
  padding-inline-start: 1rem;
}

@media (prefers-color-scheme: dark) {
  body {
    color: var(--c-opal);
    background-color: var(--c-dark-blue);
  }
}

@media (min-width: 640px) {
  body {
    max-width: var(--breakpoint-xs);
  }
}

@media (min-width: 768px) {
  body {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  body {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  body {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  body {
    max-width: 1536px;
  }
}

header {
  margin-block: 2rem;
}

nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: var(--readable-width);

  ul {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.5rem;
  }
}

p {
  margin: 0;
}

ul {
  list-style: none;
}

main ul {
  list-style-type: square;
  list-style-position: inside;
  padding-inline-start: 0rem;
  margin-block-end: 0.5rem;
}

main ul li {
  margin-block-start: 0.5rem;
}

.image-filter-dark-blue {
  filter: grayscale(100%);
  mix-blend-mode: hard-light;
}

.dark .image-filter-dark-blue {
  filter: grayscale(100%);
  mix-blend-mode: lighten;
}

a {
  text-decoration: none;
  color: var(--c-black);
}

main a,
footer a {
  text-decoration-line: underline;

  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;

  &:hover {
    color: var(--c-dark-blue);
  }
}

@media (prefers-color-scheme: dark) {
  main a,
  footer a {
    &:hover {
      color: var(--c-light-blue);
    }
  }
}

main h1 {
  text-transform: uppercase;
  font-size: 1.875rem;
  line-height: 2.25rem;
}

main h2 {
  font-size: 1.5rem;
  line-height: 2rem;
}

main h3 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
}

.footnotes ol {
  list-style-type: decimal;
  list-style-position: inside;
  padding: 0;
}

.footnotes ol li p {
  display: inline-block;
  margin-block-end: 0;
}

/* .style-child-anchors > a {
  @apply underline hover:text-dark-blue dark:hover:text-light-blue transition-colors;
} */

.blog-title {
  /* font-sans text-dark-blue dark:text-latte text-4xl md:text-7xl uppercase max-w-[8ch] */
  font-family: var(--font-sans-serif);
  color: var(--c-dark-blue);
  text-transform: uppercase;
  max-width: 8ch;
  font-size: 2.25rem;
  line-height: 2.5rem;
  display: block;

  /* TODO: This is what I had on md devices and above - but do I really need it? */
  /* font-size: 4.5rem;
  line-height: 1; */
}

@media (prefers-color-scheme: dark) {
  .blog-title {
    color: var(--c-latte);
  }
}

.hidden {
  display: none;
}

/* The not([class]) selector allows us to avoid styling Prism code blocks. */
code:not([class]) {
  font-size: 0.75rem /* 12px */;
  line-height: 1rem /* 16px */;
  border-radius: 0.125rem /* 2px */;
  font-family: var(--font-mono);
  background-color: var(--c-light-latte);
  border: 1px solid var(--c-dark-latte);
  padding-inline: 0.25rem;
  padding-block: 0.125rem;
}

.heading-anchor {
  /* p-2 absolute ml-[-31px] mt-[-3px] text-transparent group-hover:text-black dark:group-hover:text-opal */
  /* position: absolute; */
  float: left;
  margin-inline-start: -31px;
  color: var(--c-transparent);
  /* padding: 0.5rem; */
  /* margin-block-start: -3px; */
}

h2:hover > .heading-anchor,
h3:hover > .heading-anchor {
  color: var(--c-black);
}

@media (prefers-color-scheme: dark) {
  h2:hover > .heading-anchor,
  h3:hover > .heading-anchor {
    color: var(--c-opal);
  }
}