/* Ported from dp-core-react DP.UI custom.css: sufficient contrast against a white background */
a {
  color: #0366d6;
}

code {
  color: #E01A76;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Footer: each social icon is drawn inline at the size Font Awesome's "2x" gave it */
.social-icon {
  height: 2em;
  overflow: visible;
  vertical-align: -0.25em;
}

/* CV page, ported from cv.css: an employer's positions sit on a timeline, a vertical line with a dot beside each */
.experience-description {
  margin: 1rem 0;
  white-space: pre-wrap;
}

.experience-thread {
  margin: 0.5rem 0 0 0.375rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--bs-border-color);
}

.experience-thread > li {
  position: relative;
}

.experience-thread > li::before {
  content: "";
  position: absolute;
  left: calc(-1.25rem - 6px);
  top: 0.4rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--bs-secondary-color);
}

.experience-thread > li:last-child .experience-description {
  margin-bottom: 0;
}

/* Nothing page, ported from home.css. The old margin was on every button, which made the phone nav bar tall, so it's
   now on this button only. The button fades in after 5 seconds, and is hidden until then so it can't be focused. */
.press-me {
  margin: 2em;
  animation: press-me-appear 0.15s linear 5s both;
}

@keyframes press-me-appear {
  from {
    opacity: 0;
    visibility: hidden;
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}

.messages {
  margin: 2em;
  min-height: 20em;
}

/* Red on yellow as before, but a darker red so the text passes WCAG AA contrast */
.message-error {
  color: #842029;
  background-color: #ffc107;
}

/* Editor */
.editor-text {
  white-space: pre-wrap;
}

/* A list row's text takes whatever room its buttons leave, so a long item wraps beside its number and buttons
   instead of claiming a line of its own. Below about 20rem of room the buttons drop under it. */
.editor-item-text {
  flex: 1 1 0;
  min-width: min(20rem, 80%);
}

.editor-icon .social-icon {
  height: 1.5em;
  vertical-align: middle;
}

.confirm-dialog {
  max-width: min(32rem, calc(100vw - 2rem));
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  padding: 1.5rem;
}

.confirm-dialog::backdrop {
  background-color: rgb(0 0 0 / 0.5);
}

/* Form errors, drawn as Bootstrap draws invalid fields */
.input-validation-error {
  border-color: var(--bs-form-invalid-border-color);
}

.field-validation-error {
  color: var(--bs-form-invalid-color);
}

/* The errors about a whole form, as a list inside the alert */
.validation-summary-errors ul {
  margin-bottom: 0;
}

/* The up and down arrows are narrow, so give each button at least the WCAG 2.2 minimum target size (24px) */
.move-buttons .btn {
  min-width: 2rem;
}