@media (max-width: 576px) {
  .container,
  .container-fluid {
    --bs-gutter-x: 3rem;
  }
}

a:not(.btn) {
  text-underline-offset: 0.3125rem;
}

h1, h2, h3 {
  font-family: var(--addgene-brand-font-1);
}

h1, h2 {
  color: var(--addgene-h1-h2-color);

  [data-bs-theme="dark"] & {
    color: #fff;
  }
}

h1, .h1 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

h2, .h2 {
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 1.25rem;
}

h3, .h3 {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 1.25rem;
}

h4, .h4 {
  font-size: 1rem;
  font-weight: revert;
}

h5, .h5 {
  font-size: 0.875rem;
  font-weight: revert;
}

h6, .h6 {
  font-weight: revert;
}

@media (min-width: 768px) {
  h1, .h1 {
    font-size: 3rem;
    margin-bottom: 1.875rem;
  }

  h2, .h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  h3, .h3 {
    font-size: 1.25rem;
  }

  h4, .h4 {
    font-size: 1.125rem;
  }

  h5, .h5 {
    font-size: 1rem;
  }
}

@media (min-width: 1400px) {
  h1, .h1 {
    font-size: 3.75rem;
  }

  h2, .h2 {
    font-size: 1.875rem;
  }

  h3, .h3 {
    font-size: 1.25rem;
  }

  h4, .h4 {
    font-size: 1.125rem;
  }

  h5, .h5 {
    font-size: 1rem;
  }
}

section {
  scroll-margin-top: 6.25rem;

  @media (min-width: 768px) {
    scroll-margin-top: 7.5rem;
  }

  @media (min-width: 1400px) {
    scroll-margin-top: 8.125rem;
  }
}

.section-mb-1 {
  margin-bottom: 5rem !important;

  @media (min-width: 1400px) {
    margin-bottom: 6.25rem !important;
  }
}

.section-mb-2 {
  margin-bottom: 2.5rem !important;

  @media (min-width: 1400px) {
    margin-bottom: 3.75rem !important;
  }
}

.section-mb-3 {
  margin-bottom: 2rem !important;

  @media (min-width: 1400px) {
    margin-bottom: 2.5rem !important;
  }
}

.page-hero {
  background-color: var(--addgene-gray-0);
  padding-top: 3.125rem;
  padding-bottom: 3.125rem;
  margin-bottom: 3.125rem;

  [data-bs-theme="dark"] & {
    background-color: var(--addgene-page-hero-dark-bg);
  }

  @media (min-width: 768px) {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
    margin-bottom: 3.75rem;

    .tagline {
      width: 76%;
      margin: auto;
    }
  }

  @media (min-width: 1400px) {
    padding-top: 4.375rem;
    padding-bottom: 4.375rem;
    margin-bottom: 4.375rem;

    .tagline {
      width: 60%;
      font-size: 1.25rem;
    }
  }
}

.dropdown-toggle::after {
  display: inline-block;
  width: 1em;
  margin-left: 0.255em;
  vertical-align: middle;
  content: "";
  aspect-ratio: 15 / 8;
  border: none;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg width='15' height='8' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='m12.464.39-4.7 4.188a.4.4 0 0 1-.527 0L2.529.39a1.592 1.592 0 0 0-2.091 0 1.224 1.224 0 0 0 0 1.87L6.45 7.616c.578.515 1.52.515 2.098 0l6.014-5.358a1.224 1.224 0 0 0 0-1.87c-.579-.515-1.52-.515-2.099 0z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

.dropdown-item {
  &[aria-checked="true"]::after {
    content: '';
    aspect-ratio: 1;
    width: 1em;
    display: inline-block;
    margin: 0 0.2em 0.2em 0;
    vertical-align: middle;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  &.active,
  &:active {
    background-color: var(--bs-primary);
  }
}

.offcanvas.offcanvas-end {
  border-left: none;
}

.table > :not(caption) > * > * {
  padding: 0.75rem 0.75rem;
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] {
  .table {
    thead, tbody, tfoot, tr, td, th {
      border-color: var(--bs-border-color-translucent);
    }
  }
}

#main-content:not(:has(.page-hero)) {
  padding-top: 4rem;

  @media (min-width: 1400px) {
    padding-top: 5rem;
  }
}

pre {
  user-select: all;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 1rem;
  background-color: var(--bs-light);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;

  [data-bs-theme="dark"] & {
    background-color: unset;
    border: 1px solid var(--bs-border-color-translucent);
  }
}

.mb-a-1 {
  margin-bottom: 2rem !important;
}

.title-case {
  text-transform: capitalize;
}