/* =============
   Some defaults
   ============= */

main.content {
  font-family: "Crimson Pro", sans-serif;
  font-size: 1.2rem;

  #post-content {
    grid-column: page-start/body-content-end;
  }
}



/* ===================================
   Post header (title, abstract, etc.)
   =================================== */
main.content {
  header {
    .quarto-title {
      margin-bottom: 1rem;

      h1, h1 a {
        font-family: var(--bs-body-font-family) !important;
      }
    }

    .quarto-title-meta {
      display: flex !important;
      flex-direction: column;

      #post-author-container {
        font-style: italic;
        .post-author {
          font-style: normal;
          font-weight: 600;
        }
      }

      #post-date-container {
        font-style: italic;
        #post-date {
          font-style: normal;
        }
      }

      #post-abstract-container {
        margin: 1em 0;

        *:first-child {
          margin-top: 0;
        }
        *:last-child {
          margin-bottom: 0;
        }
      }

      /* This is just copied over from the Bootstrap defaults */
      .quarto-categories {
        display: flex;
        flex-wrap: wrap;
        row-gap: .5em;
        column-gap: .4em;

        .quarto-category {
          padding: .25em .75em;
          font-size: .65em;
          text-transform: uppercase;
          border: solid 1px;s
          border-radius: .25rem;
          opacity: .6;

          a {
            font-family: var(--bs-body-font-family) !important;
          }
        }
      }
    }
  }
}



/* ============
   Post content
   ============ */

main.content{
  header ~ * {
    font-size: 1.3rem;

  /* -------
     General
     ------- */

    h1, h2, h3 {
      font-family: "Crimson Pro";
    }

    h1 {
      font-weight: 500;
    }

    h3 {
      font-style: italic;
    }

    strong {
      font-weight: 600 !important;
    }

  /* ---------------------------------------
     Footnotes, margin notes, callouts, etc.
     --------------------------------------- */

    .footnote-ref {
      font-weight: bold;
    }

    .column-margin {
      font-size: 0.75em;
    }

    .callout .callout-header,
    .callout .callout-body {
      font-size: 1em !important;
    }

  /* ------
     Images
     ------ */

    figure {
      img {
        max-width: 80%;
      }
      figcaption {
        fontsize: 0.9em;
      }
    }

  /* -----------
     Pull quotes
     ----------- */

    /* WARNING: We only need to wrap this around the pull quote and
       and text that we wish to flow around it in the case where the
       <section> containing both of them *does* have margin content
       (e.g. footnotes). Otherwise, we can just use the .pull-quote
       class on the quote directly and everything works fine. */
    .pull-quote-flow-around {
      display: inline;
    }

    @media (max-width: 992px) {
      .pull-quote {
        display: none;
      }
    }

    .pull-quote {
      & > p {
        font-size: 1.8em;
        line-height: 1.25;
        color: var(--quarto-scss-export-tertiary);

        &:before {
          content: '\201C';
          margin-right: 0.25em;
        }
      }
    }

    .pull-quote-left {
      float: left;
      width: 55%;
      margin-left: -5em;
      margin-right: 1em;
    }
    .pull-quote-right {
      float: right;
      width: 55%;
      margin-left: 1em;
      margin-right: -5em;
    }
  }
}