/* When updating this file, make sure to bump the version number in files that import this, to bust the cache. */

:root {
  --base-font-family: "iA Writer Quattro", monospace;
  --base-font-size: 13pt;

  --base-color: #333;
  --base-background-color: #f5f5f5;

  --base-secondary-color: hsl(from var(--base-color) h s calc(l + 10));

  --header-color: #6a0dad;
  --header-secondary-color: hsl(from var(--header-color) h s calc(l + 5));

  --link-color: #c34100;
  --visited-link-color: #8a2c00;

  --horizontal-list-separator: "•";
  --horizontal-list-separator-margin: 0 0.5em;
}

html {
  font-family: var(--base-font-family);
  font-size: var(--base-font-size);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--header-color);
}

blockquote {
  padding-left: 1em;

  border-left: 5px solid var(--base-secondary-color);
  border-radius: 5px;
  color: var(--base-secondary-color);

  font-style: italic;
}

a {
  font-size: inherit;

  color: var(--link-color);

  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;

  &:hover,
  &:focus {
    text-decoration-style: solid;
  }

  &:visited {
    color: var(--visited-link-color);
  }
}

.icon-and-text {
  display: inline-flex;

  gap: 0.25em;

  align-items: center;

  .icon {
    width: 1em;
    height: 1em;
  }

  svg.icon {
    fill: currentColor;
  }
}

a.icon-and-text {
  svg.icon {
    fill: var(--link-color);
  }
}

a.icon-and-text:visited svg.icon {
  fill: var(--visited-link-color);
}

body > nav {
  position: sticky;
  top: 0;

  display: flex;

  padding: 1rem;

  color: var(--base-background-color);
  background-color: rgb(from var(--header-color) r g b / 0.95);
  backdrop-filter: blur(2px);

  text-transform: uppercase;

  transition: transform 0.3s ease-in-out;

  .header-breadcrumb {
    flex: 1;

    --horizontal-list-separator: "▸";
  }

  a.icon-and-text,
  a.icon-and-text:visited {
    color: var(--base-background-color);

    svg.icon {
      fill: var(--base-background-color);
    }
  }

  &.hidden {
    transform: translateY(-100%);
  }
}

.horizontal-list {
  display: inline-flex;

  padding-inline-start: 0;

  list-style: none;

  li {
    display: inline-flex;
  }

  li:not(:last-child)::after {
    content: var(--horizontal-list-separator);
    margin: var(--horizontal-list-separator-margin);
  }
}