/*TODO: move to blades.css */
object {
  vertical-align: middle;
}
sup[style] {
  font-size: min(50%, 0.75rem);
  line-height: 1.1;
}
.opt:not(.does-not-exist) {
  @media (width < 1024px) {
    display: none;
  }
}
/*---*/
body > header nav {
  --pico-primary: var(--pico-contrast);
  align-items: center;
  justify-content: end;

  > big {
    padding-right: 1rem;
    margin-inline-end: auto;
    text-wrap: nowrap;

    a {
      text-decoration: none;
      font-weight: bold;
    }
  }
  li.sitenav {
    text-wrap: balance;
    text-align: end;

    &::before {
      display: none;
    }
    > *:not(:first-child) {
      margin-inline-start: 0.5rem;

      @media (width < 1024px) {
        display: none;
      }
    }
    summary {
      padding-block-end: 0;

      &::after {
        display: none;
      }
      &:not(:hover) {
        text-decoration: underline dashed var(--pico-secondary-focus);
      }
    }
    ul {
      text-align: start;
      &:has(ul) {
        display: grid;
        grid-template-columns: repeat(2, auto);
        align-items: start;

        > li:not(:has(ul)) {
          grid-column: 1 / -1;
        }
      }

      ul {
        flex-direction: column;
      }
    }
  }
}
body > main {
  padding-block-start: 2rem;
}
body > footer {
  padding-bottom: 2rem;
  font-size: small;
  opacity: 75%;

  nav {
    @media (width < 768px) {
      display: block;
    }
  }
}
.hero {
  display: flex;
  flex-direction: column;
  text-wrap: balance;
  @media (width >= 768px) {
    justify-content: center;
    text-align: center;
    min-height: calc(100dvh - 200px);
  }

  nav {
    gap: 1rem;
    margin-block-start: 2em;
    justify-content: normal;

    @media (width >= 768px) {
      justify-content: center;
    }
    a {
      align-items: center;
      align-content: center;
      gap: 0.75ch;
      text-align: left;
    }
  }
}
h1 sup {
  color: darkgoldenrod;
}
.mark-brand,
*:is(h1, h2, h3) mark {
  background: linear-gradient(
    to right,
    rgb(215.4, 140.8, 210.2),
    rgb(184.5, 153, 237.75),
    rgb(156.6, 165.3, 232.6),
    rgb(142.75, 168.95, 240.05)
  );
  background-clip: text;
  color: transparent;

  &:is(mark) {
    padding: 0;
  }
}
*:is(a, summary) mark {
  font-size: 12px;
  vertical-align: text-bottom;
  font-weight: 600;
  border-radius: 0.125rem;
}

/* Colorize FA icons */
.fa-tailwind-css {
  color: deepskyblue;
}
.fa-bootstrap {
  color: blueviolet;
}
/* ... except hovered buttons */
[role="button"]:not(:hover, :focus-visible) {
  [class^="fa-"] {
    color: inherit;
  }
}

/* Beautify markup fetched from https://picocss.com/ */
:is(h1, h2, h3, h4, h5, h6) > a[id], /*TODO: via blades */
.code > a.copy-to-clipboard,
a:has(svg.icon-edit) {
  display: none;
}