{{/*
  structure.css
  Eryn Wells <eryn@erynwells.me>
  vim: set sw=2 sts=2:
*/}}




/*************************
 # CONTENT AREA STRUCTURE
 ************************/

:root {
  --content-width: 40em;
}

body {
  margin: 0;
}

main {
  margin-inline: auto;
  max-width: var(--content-width);
}

main,
.site-header__conatiner,
.site-footer__container {
  padding-inline: var(--space-xs);
}

figure, img {
  max-width: 100%;
}

img {
  object-fit: contain;
}

.content {
  .heading {
    align-items: center;
    gap: 0.25em;
    display: flex;
  }

  .codeblock {
    overflow: auto;
  }
}


.page-navigation {
  align-items: baseline;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  list-style: none;
  padding-inline: 0;

  &:has(.next-page:only-child) {
    justify-content: flex-end;
  }

  li {
    display: flex block;
    height: 2lh;
  }

  .next-page {
    text-align: right;
  }

  .previous-page::before {
    content: "←";
    padding-inline-end: var(--space-s);
  }

  .next-page::after {
    content: "→";
    padding-inline-start: var(--space-s);
  }
}


.site-header {
  border-bottom: 3px solid var(--gray6);
}

.site-header__container {
  align-items: baseline;
  display: flex;

  .site-header__nav {
    ul {
      display: flex;
      list-style: none;

      li {
        margin: 0;
        padding: 0;
      }

      li:not(:last-child)::after {
        content: "•";
      }
    }
  }
}

.site-header__container,
.site-footer__container {
  margin-inline: auto;
  max-width: var(--content-width);
}


.content-term-list {
  display: flex;
  list-style: none;
  padding-inline: 0;

  li:not(:last-child) {
    margin-inline-end: var(--space-s);
  }
}