/* Accessibility, contrast, and the consent chip. Loaded after main.css. */

.skip-link {
  position: fixed;
  left: 12px;
  top: 0;
  z-index: 200;
  padding: 10px 16px;
  background: #1c2528;
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-120%);
  transition: none;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(12px);
  transition: none;
}

a,
a.btn,
a.btn-link,
button,
.btn,
input,
textarea {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity, filter, top, left, right, width, height, margin, padding, border-radius;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity, filter, top, left, right, width, height, margin, padding, border-radius;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible {
  outline: 3px solid #ff8059 !important;
  outline-offset: 3px !important;
}

/* #ff8059 on the cream page is below 3:1. This is the same darkened accent as the light-mode links. */
body.light-skin a:focus-visible,
body.light-skin button:focus-visible,
body.light-skin input:focus-visible,
body.light-skin textarea:focus-visible,
body.light-skin select:focus-visible,
body.light-skin .btn:focus-visible {
  outline-color: #994d35 !important;
}

a.btn:hover,
.btn:hover,
a.btn-link:hover,
.btn-link:hover,
button:hover,
body.light-skin a.btn:hover,
body.light-skin .btn:hover,
body.light-skin a.btn-link:hover,
body.light-skin .btn-link:hover,
body.light-skin button:hover {
  color: #1c2528;
}

.header__builder button.switcher-btn,
.header__builder button.menu-btn {
  display: inline-block;
  vertical-align: middle;
  width: 44px;
  height: 44px;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 0;
  overflow: visible;
  color: inherit;
}

.header__builder button.switcher-btn:before,
.header__builder button.menu-btn:before {
  display: none;
}

.header__builder button.menu-btn span {
  width: 25px;
  left: 50%;
  margin-left: -12.5px;
}

.header__builder button.switcher-btn:hover,
.header__builder button.menu-btn:hover {
  color: inherit;
  background: transparent;
}

.social-links a,
.menu-social-links a {
  min-width: 44px;
  min-height: 44px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-links a svg,
.menu-social-links a svg {
  width: 22px;
  height: 22px;
  display: block;
}

.hero-started .description .hero-lead {
  margin: 30px 0;
  color: #fff;
  font-family: "Sorts Mill Goudy", serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}

body.light-skin .hero-started .description .hero-lead {
  color: #1c2528;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 8px;
}

.hero-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.light-skin .hero-actions a {
  color: #994d35;
}

body.light-skin .hero-actions a:hover {
  color: #7c3a28;
}

.footer .copyright-text a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.resume-preview {
  display: block;
  max-width: 820px;
  margin: 0 auto;
  text-decoration: none;
}

.resume-preview img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1105 / 1430;
  background: #fff;
}

.resume-download {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

.preloader {
  pointer-events: none;
}

.preloader.loaded .centrize {
  animation: audit-hide 0.2s linear 0.7s forwards;
}

@keyframes audit-hide {
  to {
    visibility: hidden;
    opacity: 0;
  }
}

html.has-consent-chip {
  scroll-padding-bottom: calc(var(--consent-chip-space, 76px) + env(safe-area-inset-bottom, 0px));
}

html.has-consent-chip body {
  padding-bottom: calc(var(--consent-chip-space, 76px) + env(safe-area-inset-bottom, 0px));
}

.consent {
  position: fixed;
  z-index: 80;
  left: 12px;
  right: auto;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 24px);
  margin: 0;
  padding: 4px 8px 4px 12px;
  border-radius: 999px;
  background: #1c2528;
  color: #fff;
  font-family: Rubik, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  box-shadow: 0 10px 30px rgba(28, 37, 40, 0.18);
}

@media (min-width: 768px) {
  .consent {
    left: auto;
    right: 16px;
  }
}

.consent p {
  margin: 0;
}

body.light-skin .consent button,
.consent button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}

.consent button:before {
  display: none;
}

body.light-skin .consent button:first-of-type,
.consent button:first-of-type {
  background: #ff8059;
  border-color: #ff8059;
  color: #1c2528;
}

.message-form .group {
  margin-bottom: 28px;
}

.message-form label {
  padding-bottom: 8px;
}

.message-form button[type="submit"] {
  min-width: 160px;
  min-height: 60px;
}

.message-form button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.message-status {
  min-height: 1.5em;
  margin: 0 0 20px;
  font-family: Rubik, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.message-status.is-error {
  color: #ff8059;
}

body.light-skin .message-status.is-error {
  color: #994d35;
}

.message-status a {
  color: inherit;
  text-decoration: underline;
}

.message-honeypot,
.message-honeypot input,
.message-honeypot label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.light-skin .consent button:hover,
body.light-skin .consent button:focus-visible,
.consent button:hover,
.consent button:focus-visible {
  background: #fff;
  color: #1c2528;
  outline: 3px solid #ff8059 !important;
  outline-offset: 2px !important;
}