/* Gutenberg paragraph font sizes */
.has-small-font-size {
  font-size: 0.8em;
}

.has-emphasis-font-size {
  font-size: 1.1em;

  @media (min-width: 768px) {
    font-size: 1.2em;
  }
}

.has-medium-font-size {
  font-size: 1.4em;

  @media (min-width: 768px) {
    font-size: 1.6em;
  }
}

.has-large-font-size {
  font-size: 1.6em;

  @media (min-width: 768px) {
    font-size: 2em;
  }
}

.has-huge-font-size {
  font-size: 2.2em;

  @media (min-width: 768px) {
    font-size: 2.6em;
    margin-bottom: 0.4em;
  }

  @media (min-width: 992px) {
    font-size: 3em;
  }
}

.has-text-align-right {
  text-align: right !important;
}

.has-text-align-center {
  text-align: center !important;
}

.has-text-align-left {
  text-align: left !important;
}

/* Gutenberg sets paragraph text alignment to the same as the block alignment,
 * so override for aside right */
p.alignright {
  text-align: left !important;
}

.has-background {
  padding: 18px 32px;
}

.is-style-small {
  width: calc(var(--width) / 3);
}

/* Gutenberg sizing */
@media (min-width: 1200px) {
  .alignwide {
    margin-left: -120px;
    margin-right: -120px;
  }

  .alignfull, .is-resized {
    transition: none;
    --width: calc(100vw - 64px);
    margin-left: calc((100% - var(--width)) / 2 + 8px);
    margin-right: calc((100% - var(--width)) / 2 + 8px);
  }
}

/* Custom */
.alignthin, .alignbody {
  margin-left: auto;
  margin-right: auto;
}

.alignbody {
  max-width: 768px;
}

.alignthin {
  max-width: 480px;
}

/* Gutenberg gallery */
.wp-block-gallery.columns-1 {
  --columns: 1;
}
.wp-block-gallery.columns-2 {
  --columns: 2;
}
.wp-block-gallery.columns-3 {
  --columns: 3;
}
.wp-block-gallery.columns-4 {
  --columns: 4;
}
.wp-block-gallery.columns-5 {
  --columns: 5;
}

.wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 16px;
  padding: 0;
  text-align: center;
  list-style: none;

  > figure {
    margin: 0 16px 16px 0;
    width: 100%;

    @media (min-width: 992px) {
      max-width: calc(100% / var(--columns) - 16px);
    }
  }

  figure, figcaption {
    margin: 0;
    border: none;
  }

  /* PNGs presumed to be screenshots */
  img[src$=".png"] {
    zoom: 0.5;
    /* Firefox doesn't support zoom, close enough */
    -moz-transform: scale(0.5);
  }
}

@media (min-width: 768px) {
  .wp-block-media-text {
    display: grid;
    grid-template-columns: 50% auto;
    align-items: center;
    grid-gap: 32px;
    gap: 32px;

    &.has-media-on-the-right > .wp-block-media-text__media {
      order: 1;
    }

    img {
      max-width: 100%;
      height: auto;
    }
  }
}

.columns-media {
  align-items: center;
  font-size: 1.2em;
  margin-top: 2em;
  margin-bottom: 2em;
}

.is-vertically-aligned-top {
  align-items: flex-start;
}

.is-vertically-aligned-center {
  align-self: center;
}

.is-vertically-aligned-bottom {
  align-items: flex-end;
}

/* Gutenberg video */
.wp-block-video {
  overflow: hidden;

  video {
    width: 100%;
    margin: -8px;
  }
}

/* Gutenberg table */
.wp-block-table {
  overflow-x: scroll;

  table {
    margin: 0 auto 0.8em;
  }

  th {
    font-weight: bold;
  }

  td, th {
    display: block;
    padding: 6px 12px;
    text-align: left;

    &:first-child {
      padding-left: 0;
    }

    &:last-child {
      padding-right: 0;
    }
  }

  @media (min-width: 768px) {
    th, td {
      display: table-cell;
    }
  }

  &.is-style-lined-horizontally {
    border-collapse: collapse;

    th, td {
      padding: 12px;
    }

    td {
      border-top: 1px solid var(--lg);
    }
  }
}

.vatop {
  th, td {
    vertical-align: top;
  }
}

/* Gutenberg pullquote */
.wp-block-pullquote.is-style-default {
  border-top: 4px solid #555;
  border-bottom: 4px solid #555;
  margin: 32px 0;
  text-align: center;
  font-size: 1.6em;
}

.is-style-large {
  font-size: 1.2em;
}

cite {
  font-size: 0.8em;
}