@import "variables";

.post {
  width: 100%;
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
  hyphenate-limit-chars: 10;
  margin: 20px auto;
  padding: 20px 0 0 0;


  @media (max-width: $tablet-max-width) {
    margin: 0 auto;
    max-width: 660px;
  }

  &:first-of-type {
    padding-top: 0;
  }

  &:not(:last-of-type) {
    border-bottom: 1px solid var(--border-color);
  }

  &-meta {
    margin-bottom: 10px;
    color: var(--accent-alpha-70);
    a { text-decoration: none; }
    a:hover { text-decoration: underline; }
  }

  &-title {
    --border: 3px dotted var(--accent);
    position: relative;
    color: var(--accent);
    margin: 0 0 15px;
    padding-bottom: 15px;
    border-bottom: var(--border);

    &:after {
      content: '';
      position: absolute;
      bottom: 2px;
      display: block;
      width: 100%;
      border-bottom: var(--border);
    }

    a {
      text-decoration: none;
    }
  }

  &.on-list &-title { --border: none; }

  &-tags {
    display: block;
    margin-bottom: 20px;
    opacity: .5;

    a {
        text-decoration: none;
    }
  }

  &-content {
    margin-top: 30px;
  }

  &-cover {
    border: 20px solid var(--accent);
    background: transparent;
    margin: 40px 0;
    padding: 20px;

    @media (max-width: $phone-max-width) {
      padding: 10px;
      border-width: 10px;
    }
  }

  ul {
    list-style: "\29bf";

    ul {
      list-style: "\25a0";

      ul { list-style: "\25ba"; }
    }
  }
}

// TODO: try adapting this using a properly nested selector in the block above
//       for ul items.
.tag-list {
    @media(max-width: $phone-max-width) {
        margin-left: 5%;
    }
}

.post--regulation {
  h1 {
    justify-content: center;
  }

  h2 {
    justify-content: center;
    margin-bottom: 10px;

    &+ h2 {
      margin-top: -10px;
      margin-bottom: 20px;
    }
  }
}

.post-list {
  .post-date {
    color: var(--accent-alpha-70);
    text-decoration: none;
  }

  a {
    text-decoration: none;
  }
}

.post-toc {
  font-size: .8rem;

  .toggleable { display: none; }

  label {
    color: var(--accent-alpha-70);
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }
  label::before { content: '>'; margin-right: 1rem; }

  input[type="checkbox"]:checked {
    & ~ .toggleable { display: block; }
    & ~ label::before { content: 'v'; }
  }

  a { text-decoration: none; }

  a:hover { text-decoration: underline; }
}

.for-hire {
  @media print {
    display: none;
  }

  width: 100%;
  text-align: center;
  font-weight: bolder;

  border: 1px white solid;
  padding: 1em;
  margin: 2em 0;
}

.webmentions .url-only {
  line-break: anywhere;
}

.halmos {
  text-align: right;
  font-size: 1.5em;
}

.footnote-definition {
  @media (min-width: #{$tablet-max-width + 1px}) {
    position: absolute;
    left: 105%;

    width: 10vw;

    margin-top: -7rem;
  }

  margin-top: 1rem;

  font-size: .8em;

  p {
    padding-left: .5rem;
    display: inline;
  }

  // For some reason `:last-of-type` doesn't work
  &:has(+ .halmos) {
    margin-bottom: -.5rem;
  }
}