/* Ensures sticky header does not obstruct content
   on pages without a hero section
 */
main:not(#homepage, #list-view) {
  margin-top: 4rem;
}

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

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

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;
  }
}

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;
  }
}

a, a:visited {
  color: var(--bs-link-color);
  text-decoration: none;
}

a:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

a.btn, a.btn:visited {
  color: var(--bs-btn-color);
  text-decoration: none;
}

a.btn:hover {
  color: var(--bs-btn-hover-color);
  text-decoration: none;
}

/* Visited link `a.btn:visited` ties `.btn:focus-visible` on specificity; without this, visited outline buttons keep
   `--bs-btn-color` (e.g. gray) while Bootstrap fills `--bs-btn-hover-bg` → text matches the background. */
a.btn:focus-visible,
a.btn:focus {
  color: var(--bs-btn-hover-color);
  text-decoration: none;
}

a.nav-link, a.nav-link:visited {
  color: var(--bs-nav-link-color);
  text-decoration: none;
}

a.nav-link:hover {
  color: var(--bs-nav-link-hover-color);
  text-decoration: none;
}

/* Base styles for form elements.
   Django renders bare elements; form-validation.js adds .form-control at runtime.
   Including .form-control here ensures our styles win over Bootstrap's defaults. */
.form-control,
input[type=number],
input[type=text],
textarea,
select {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--addgene-gray);
  background-color: var(--addgene-gray-0);
  background-clip: padding-box;
  border: 1px solid var(--addgene-border-gray-1);
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}

input[type=number],
input[type=text] {
  width: 100%;
  height: 3.2em;
  padding: 0.28rem 0.75rem;
}

textarea {
  width: 100%;
  padding: 0.28rem 0.75rem;
  min-height: calc(1.5em + 0.75rem + 2px);
}

.form-select,
select.form-control,
select {
  width: auto;
  height: 3.2em;
  /* Reserve space for SVG caret + gap so option text never overlaps the icon */
  padding: 0.375rem 3rem 0.375rem 0.75rem;
  -moz-padding-start: calc(0.75rem - 3px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

input[type=checkbox] {
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
  border: 1px solid var(--addgene-border-gray-1);
  border-radius: 0.25em;
  appearance: none;
  print-color-adjust: exact;
}

input[type=radio] {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0 0.2rem 0.2rem 0;
  padding: 0;
  border: 1px solid var(--addgene-border-gray-1);
  outline: none;
  vertical-align: middle;
  appearance: none;
  border-radius: 10px;
}

input:active {
  filter: brightness(90%);
}

input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

input[type=radio]:checked {
  box-shadow: inset 0 0 0 4px #fff;
}

/* Focus states */
.form-control:focus,
.form-select:focus,
input[type=number]:focus,
input[type=text]:focus,
textarea:focus,
select:focus {
  border-color: var(--bs-primary);
  outline: 2px solid var(--bs-primary);
  box-shadow: none;
}

input[type=checkbox].form-control:checked:focus {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
}

.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus,
.was-validated input:invalid:focus,
.was-validated select:invalid:focus,
.was-validated textarea:invalid:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--bs-form-invalid-border-color);
  outline: 2px solid var(--bs-form-invalid-border-color);
  box-shadow: none;
}

label.required::after {
  content: " *";
  color: var(--addgene-invalid-red);
}

/* Invalid states */
.was-validated .form-control:invalid,
.was-validated input:invalid,
.was-validated textarea:invalid {
  border-color: var(--bs-form-invalid-border-color);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url('../assets/images/icons/icon-solid-exclamation-red.svg');
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(1.05em + 0.375rem) calc(1.05em + 0.375rem);
}

.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.was-validated select:invalid {
  border-color: var(--bs-form-invalid-border-color);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url('../assets/images/icons/icon-solid-exclamation-red.svg');
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(1.05em + 0.375rem) calc(1.05em + 0.375rem);
  box-shadow: none;
}

.was-validated textarea:invalid {
  background-position: right calc(0.375em + 0.1875rem) top calc(0.375em + 0.1875rem);
}

/* Valid states
   Do not clear `background-image` on checkboxes / radios: they use it for the check/dot (see verify step `input.form-control`). */
.form-control.is-valid:not(select):not([type=checkbox]):not([type=radio]),
.was-validated .form-control:valid:not(select):not([type=checkbox]):not([type=radio]),
.was-validated input:valid:not([type=checkbox]):not([type=radio]),
.was-validated textarea:valid {
  background-image: none;
  padding-right: 0.75rem;
  border-color: var(--addgene-border-gray-1);
}

/* Single-selects: do not strip chevron or collapse padding (same gutter as default select) */
.form-select.is-valid:not([multiple]),
select.form-control.is-valid:not([multiple]),
.was-validated .form-select:valid:not([multiple]),
.was-validated select.form-control:valid:not([multiple]),
.was-validated select:valid:not([multiple]) {
  padding: 0.375rem 3rem 0.375rem 0.75rem;
  border-color: var(--addgene-border-gray-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

.was-validated .form-control:valid:focus:not([type=checkbox]):not([type=radio]),
.was-validated .form-select:valid:focus,
.form-control.is-valid:focus:not([type=checkbox]):not([type=radio]),
.form-select.is-valid:focus,
.was-validated input:valid:focus:not([type=checkbox]):not([type=radio]),
.was-validated select:valid:focus,
.was-validated textarea:valid:focus {
  border-color: var(--bs-primary);
  outline: 2px solid var(--bs-primary);
  box-shadow: none;
}

.invalid-feedback {
  margin: 0.3rem 0 0;
  padding: 0;
  font-size: 0.9rem;
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.datahub-dropdown-button {
  color: var(--addgene-gray);
  padding: .8rem 1rem;
  font-size: 1.1rem;
  border: 1px solid var(--addgene-border-gray-1);
  background: none;
  border-radius: var(--addgene-round-button-radius);

  &:active, &:hover {
    outline: none;
  }

  .dropdown-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 95%;
    overflow-x: hidden;
  }

  &.show {
    border-bottom: 1px solid transparent;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  i.bi-caret-down-fill {
    transition: all .3s;
    transform: rotate(0deg);
  }

  &.show i.bi-caret-down-fill {
    transform: rotate(180deg) translateY(5px);
  }

  &.disabled {
    cursor: not-allowed;
    pointer-events: all !important;
    background: var(--addgene-gray-1);
  }
}

.datahub-dropdown-menu {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border: 1px solid var(--addgene-border-gray-1);
  border-top: 1px solid transparent;

  &.show {
    margin-top: -3px !important;
  }

  .dropdown-item {
    color: var(--addgene-gray);
    font-size: 1.1rem;

    &:hover {
      cursor: pointer;
      text-decoration: none;
      color: var(--addgene-dark-blue);
      background-color: var(--addgene-dark-blue-5);
    }
  }
}

/* Need room for sticky global header */
.modal-dialog {
  margin-top: 10rem;
}

.modal-body {
  dl {
    display: grid;
    grid-template-columns: max-content auto;
    margin-bottom: 0;
  }

  dt {
    grid-column-start: 1;
  }

  dd {
    grid-column-start: 2;
    margin-left: 2rem;
  }

  dt:not(:last-of-type),
  dd:not(:last-of-type) {
    margin-bottom: .7rem;
  }
}

/* Reusable elements */

.bi-box-arrow-up-right:before {
  content: "\f1c5";
}

figure.image {
  margin-bottom: 0;

  &:not(:first-of-type) {
    margin-top: 30px;
  }

  div.img-container {
    padding: 35px;
    background: var(--addgene-gray-0);
    border-radius: var(--addgene-panel-border-radius);
    display: flex;
    justify-content: center;

    img {
      border-radius: var(--addgene-panel-border-radius);
      max-height: 500px;
    }

    .expand-image {
      transition: .3s ease-in-out;
      color: #fff;
      position: absolute;
      display: flex;
      top: 8px;
      right: 8px;
      z-index: 100;
      padding: 10px 20px;
      border-radius: var(--addgene-round-button-radius);
      font-size: 2em;

      &:before {
        font-family: bootstrap-icons;
        content: "\F14A";
      }

      &:hover {
        background-color: var(--addgene-gray-1);
        color: var(--addgene-gray);
        opacity: .6;
      }
    }
  }
}

.dropdown-item {
  &:visited {
    color: inherit;
  }

  &:hover {
    text-decoration: none;
  }

  &:active {
    color: inherit;
    background: none;
  }
}

.panel {
  background: var(--addgene-gray-0);
  padding: 35px;
  border-radius: var(--addgene-panel-border-radius);

  .panel-text {
    margin-bottom: 65px;
  }

  a {
    color: var(--addgene-blue);
    text-decoration: none;

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

.contributor-list {
  columns: 2em 2;
  margin: 3em auto 5em;
  width: 60%;
}

.have-questions-text {
  margin-top: 2rem;
  font-weight: 500;
}