/* Hallmark · pre-emit critique: P4 H5 E5 S5 R5 V4 */
/* Hallmark · genre: modern-minimal · macrostructure: Marquee Hero · theme: filld · enrichment: empty media frame · nav/footer: inherited · contrast: pass (46–50) · honest/chrome/tokens: pass (56–58) · mobile: pass (36, 59, 61–69) */
@import url("../../tokens.css?ver=0.9.30");

.careers {
  background: var(--color-paper);
  color: var(--color-ink);
  padding-block-end: var(--space-3xl);
}
.careers .container { padding-inline: clamp(var(--space-md), 4vw, var(--space-xl)); }

/* ---- Intro hero ---- */
.careers-hero {
  background: var(--color-paper);
  color: var(--color-ink);
  padding-block: var(--space-hero-top) var(--space-hero-bottom);
}
.careers-hero-grid {
  display: grid;
  gap: var(--space-xl);
  align-items: stretch;
}
.careers-hero-copy { min-width: 0; align-self: center; }
.careers-eyebrow {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .1em;
  margin: 0 0 var(--space-sm);
  text-transform: uppercase;
}
.careers-hero h1 {
  font-family: var(--font-display);
  font-size: 1.9375rem;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.02;
  margin: 0;
  max-width: 12ch;
  min-width: 0;
  overflow-wrap: anywhere;
}
.careers-hero h1 .underline-accent {
  color: var(--color-ink);
  text-decoration: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  --filld-hero-underline-gap: 6px;
  --filld-hero-underline-linebox-offset: 9px;
  background-position: left bottom calc(var(--filld-hero-underline-linebox-offset) - var(--filld-hero-underline-gap));
  background-size: 100% var(--filld-hero-underline-h, 5px);
}
@media (prefers-reduced-motion: no-preference) {
  .careers-hero h1 .underline-accent {
    background-size: 0 var(--filld-hero-underline-h, 5px);
    animation: filld-uline-draw .5s cubic-bezier(.22, .61, .36, 1) .3s forwards;
  }
}
@media (max-width: 760px) {
  .careers-hero h1 .underline-accent {
    --filld-hero-underline-h: 3px;
    --filld-hero-underline-gap: 8px;
  }
}
.careers-intro {
  color: var(--color-ink-muted);
  font-size: var(--text-base);
  line-height: 1.65;
  margin-block-start: var(--space-lg);
  max-width: 45ch;
}
.careers-intro p { margin: 0; }
.careers-hero-media {
  aspect-ratio: 5 / 3.4;
  background-color: var(--color-media-empty);
  background-position: center;
  background-size: cover;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-hero);
  min-width: 0;
}

/* ---- Open positions ---- */
.careers-openings { padding-block: var(--space-2xl) 0; }
.careers-section-head {
  display: grid;
  gap: var(--space-md);
  margin-block-end: var(--space-xl);
}
.careers-section-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.careers-section-head p { color: var(--color-ink-muted); font-size: var(--text-base); margin: var(--space-xs) 0 0; }
.careers-section-head .careers-count {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin: 0;
}
.careers-layout { display: grid; gap: var(--space-xl); align-items: start; }

/* ---- Filters ---- */
.careers-filters {
  background: var(--color-paper-2);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
}
.careers-search { position: relative; margin-block-end: var(--space-lg); }
.careers-search-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  margin-block-end: var(--space-xs);
}
.careers-search svg {
  color: var(--color-ink-soft);
  height: var(--space-md);
  inset-block-end: calc((44px - var(--space-md)) / 2);
  inset-inline-start: var(--space-sm);
  pointer-events: none;
  position: absolute;
  top: auto;
  transform: none;
  width: var(--space-md);
}
.careers-search input {
  background: var(--color-paper);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-input);
  color: var(--color-ink);
  font-size: var(--text-sm);
  height: 44px;
  outline: 2px solid transparent;
  outline-offset: 1px;
  padding: 0 var(--space-md);
  padding-inline-start: calc(var(--space-lg) + var(--space-sm));
  text-align: start;
  width: 100%;
}
.careers-search input::placeholder { color: var(--color-ink-soft); opacity: 1; }
.careers-search input:focus-visible {
  border-color: var(--color-rule-strong);
  outline-color: var(--color-focus);
}
.careers-search input:disabled {
  background: var(--color-paper-2);
  cursor: not-allowed;
  opacity: .55;
}
.careers-search input[aria-invalid="true"] { border-color: var(--color-error); }
.careers-search input[data-state="success"] { border-color: var(--color-success); }
.careers-filter-group { border: 0; margin: 0 0 var(--space-lg); padding: 0; }
.careers-filter-group legend {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0 0 var(--space-xs);
  padding: 0;
  text-transform: uppercase;
}
.careers-radio {
  align-items: center;
  color: var(--color-ink-muted);
  cursor: pointer;
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-xs);
  min-height: 44px;
}
.careers-radio input { accent-color: var(--color-accent); cursor: pointer; height: 1rem; margin: 0; width: 1rem; }
.careers-radio:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-input); }
.careers-radio:has(input:checked) span { color: var(--color-ink); font-weight: 700; }
.careers-radio:has(input:disabled) { cursor: not-allowed; opacity: .55; }
.careers-clear,
.careers-empty-clear {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-button);
  color: var(--color-accent);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  gap: var(--space-xs);
  min-height: 44px;
  padding: 0;
  white-space: nowrap;
}
.careers-clear svg { height: var(--space-md); width: var(--space-md); }
.careers-clear:active,
.careers-empty-clear:active { transform: translateY(1px); }
.careers-clear:disabled,
.careers-empty-clear:disabled { cursor: not-allowed; opacity: .55; }

/* ---- Role list ---- */
.careers-listing { min-width: 0; }
.careers-group { margin-block-end: var(--space-xl); }
.careers-group-title {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0 0 var(--space-sm);
  text-transform: uppercase;
}
.careers-roles { list-style: none; margin: 0; padding: 0; }
.careers-role {
  align-items: flex-start;
  background: var(--color-paper);
  border-block-start: var(--rule-thin) solid var(--color-rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-block: var(--space-lg);
}
.careers-roles .careers-role:last-child { border-block-end: var(--rule-thin) solid var(--color-rule); }
.careers-role-title { font-size: var(--text-md); font-weight: 700; letter-spacing: -.01em; margin: 0 0 var(--space-xs); }
.careers-role-title a { color: var(--color-ink); text-decoration: none; }
.careers-role-meta { align-items: center; color: var(--color-ink-muted); display: flex; flex-wrap: wrap; font-size: var(--text-sm); gap: var(--space-md); margin: 0; }
.careers-role-loc { align-items: center; display: inline-flex; gap: var(--space-xs); }
.careers-role-loc svg { color: var(--color-ink-soft); height: var(--text-sm); width: var(--text-sm); }
.careers-role-cta {
  align-items: center;
  align-self: stretch;
  background: var(--color-accent);
  border: var(--rule-thin) solid var(--color-accent);
  border-radius: var(--radius-button);
  color: var(--color-accent-ink);
  display: inline-flex;
  flex: none;
  font-size: var(--text-sm);
  font-weight: 700;
  gap: var(--space-xs);
  justify-content: center;
  min-height: 44px;
  padding-inline: var(--space-md);
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
  white-space: nowrap;
}
.careers-role-cta svg { height: var(--text-sm); width: var(--text-sm); }
.careers-role-cta:focus-visible,
.careers-clear:focus-visible,
.careers-empty-clear:focus-visible,
.careers-role-title a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.careers-role-cta:active { transform: translateY(1px); }
.careers-role-cta[aria-disabled="true"], .careers-role-cta.is-disabled { cursor: not-allowed; opacity: .55; pointer-events: none; }
.careers-role-cta[data-state="loading"] { cursor: wait; opacity: .75; }
.careers-role-cta[data-state="error"] { background: var(--color-error); border-color: var(--color-error); color: var(--color-accent-ink); }
.careers-role-cta[data-state="success"] { background: var(--color-success); border-color: var(--color-success); color: var(--color-accent-ink); }
.careers-empty { color: var(--color-ink-muted); font-size: var(--text-base); padding-block: var(--space-lg); }

@media (hover: hover) and (pointer: fine) {
  .careers-role-title a:hover,
  .careers-clear:hover,
  .careers-empty-clear:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: .2em; }
  .careers-role-cta:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); transform: translateY(-1px); }
}

@media (min-width: 40rem) {
  .careers-hero h1 { font-size: 2.625rem; }
  .careers-section-head { align-items: end; grid-template-columns: minmax(0, 1fr) auto; }
  .careers-role { align-items: center; flex-direction: row; justify-content: space-between; }
  .careers-role-cta { align-self: center; }
}

@media (min-width: 60rem) {
  .careers-hero h1 { font-size: 3rem; }
  .careers-hero-grid { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: var(--space-hero-top); }
  .careers-hero-media { aspect-ratio: 5 / 3.4; }
  .careers-layout { grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); gap: var(--space-2xl); }
  .careers-filters { position: sticky; top: 6rem; }
}

@media (min-width: 68.75rem) {
  .careers-hero h1 { font-size: 4.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .careers-role-cta { transition-duration: 150ms; }
}

/* ========================================================================
   Single job — content + application sidebar
   ===================================================================== */
.job {
  background: var(--color-paper);
  color: var(--color-ink);
  padding-block: var(--space-xl) var(--space-3xl);
}
.job-shell { max-width: 74rem; }
.job-back {
  align-items: center;
  border-radius: var(--radius-button);
  color: var(--color-accent);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 700;
  gap: var(--space-xs);
  margin-block-end: var(--space-xl);
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
}
.job-back svg { height: var(--space-md); width: var(--space-md); }
.job-back:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.job-back:active { transform: translateY(1px); }
.job-back[aria-disabled="true"] { cursor: not-allowed; opacity: .55; pointer-events: none; }

.job-header {
  -webkit-backdrop-filter: none;
  background: var(--color-paper-2);
  backdrop-filter: none;
  border: 0;
  border-radius: var(--radius-hero);
  color: var(--color-ink);
  margin-block-end: var(--space-2xl);
  padding: var(--space-xl);
  position: static;
  top: auto;
  z-index: auto;
}
.job-eyebrow {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0 0 var(--space-sm);
  text-transform: uppercase;
}
.job-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.04;
  margin: 0 0 var(--space-md);
  min-width: 0;
  overflow-wrap: anywhere;
}
.job-tags { align-items: center; display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0 0 var(--space-lg); padding: 0; }
.job-tag {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--color-ink-muted);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 600;
  gap: 0;
  min-height: auto;
  padding: 0;
}
.job-tag + .job-tag::before {
  background: var(--color-rule-strong);
  content: "";
  height: var(--space-md);
  margin-inline: var(--space-sm);
  width: var(--rule-thin);
}
.job-tag svg { display: none; }
.job-tag--salary { color: var(--color-accent-hover); }
.job-header-cta { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-md); }
.job .btn {
  align-items: center;
  background: var(--color-accent);
  border: var(--rule-thin) solid var(--color-accent);
  border-radius: var(--radius-button);
  color: var(--color-accent-ink);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 700;
  justify-content: center;
  min-height: 44px;
  padding-inline: var(--space-lg);
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
  white-space: nowrap;
}
.job .btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.job .btn:active { transform: translateY(1px); }
.job .btn:disabled, .job .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; pointer-events: none; }
.job .btn[data-state="loading"] { cursor: wait; opacity: .75; }
.job .btn[data-state="error"] { background: var(--color-error); border-color: var(--color-error); }
.job .btn[data-state="success"] { background: var(--color-success); border-color: var(--color-success); }
.job-closes { color: var(--color-ink-muted); font-size: var(--text-sm); }

.job-content-grid { display: grid; gap: var(--space-2xl); }
.job-body { color: var(--color-ink-muted); font-size: var(--text-base); line-height: 1.75; max-width: 65ch; min-width: 0; }
.job-body h2 { color: var(--color-ink); font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: var(--space-xl) 0 var(--space-sm); }
.job-body h2:first-child { margin-block-start: 0; }
.job-body h3 { color: var(--color-ink); font-size: var(--text-md); font-weight: 700; margin: var(--space-lg) 0 var(--space-xs); }
.job-body p { margin: 0 0 var(--space-md); }
.job-body ul, .job-body ol { margin: 0 0 var(--space-lg); padding-inline-start: var(--space-lg); }
.job-body li { margin-block-end: var(--space-xs); padding-inline-start: var(--space-xs); }
.job-body li::marker { color: var(--color-accent); }
.job-body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: .2em; }
.job-body a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.job-body a:active { color: var(--color-accent-hover); }

.job-apply {
  align-self: start;
  background: var(--color-paper-2);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  scroll-margin-top: 6rem;
}
.job-apply h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 var(--space-md); }
.job-apply > p { color: var(--color-ink-muted); font-size: var(--text-sm); margin: 0 0 var(--space-lg); }
.job-apply-error {
  background: var(--color-error-soft);
  border: var(--rule-thin) solid var(--color-error);
  border-radius: var(--radius-input);
  color: var(--color-error);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-lg) !important;
  padding: var(--space-sm) var(--space-md);
}
.job-apply-success { padding-block: var(--space-sm); text-align: center; }
.job-apply-success svg { background: var(--color-success-soft); border-radius: 50%; color: var(--color-success); height: 3rem; margin-block-end: var(--space-sm); padding: var(--space-sm); width: 3rem; }
.job-apply-success h2 { margin: 0 0 var(--space-xs); }
.job-apply-success p { color: var(--color-ink-muted); margin: 0; }
.job-apply-form .job-field-row { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
.job-field { margin: 0 0 var(--space-md); }
.job-field label { color: var(--color-ink); display: block; font-size: var(--text-sm); font-weight: 700; margin-block-end: var(--space-xs); }
.job-field .req { color: var(--color-error); }
.job-field-hint { color: var(--color-ink-soft); font-size: var(--text-xs); font-weight: 400; }
.job-field input,
.job-field textarea {
  background: var(--color-paper);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-input);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  outline: 2px solid transparent;
  outline-offset: 1px;
  padding-inline: var(--space-sm);
  width: 100%;
}
.job-field input { min-height: 44px; }
.job-field textarea { min-height: 8rem; padding-block: var(--space-sm); resize: vertical; }
.job-field input:focus-visible,
.job-field textarea:focus-visible { outline-color: var(--color-focus); }
.job-field input:disabled,
.job-field textarea:disabled { background: var(--color-paper-2); cursor: not-allowed; opacity: .55; }
.job-field input[aria-invalid="true"], .job-field textarea[aria-invalid="true"] { border-color: var(--color-error); }
.job-field input[data-state="success"], .job-field textarea[data-state="success"] { border-color: var(--color-success); }
.job-field input[type="file"] { cursor: pointer; padding-block: var(--space-xs); }

/* Honeypot — visually hidden but present in the DOM. */
.job-apply-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.job-apply-submit { margin: var(--space-sm) 0 0; }
.job-apply-submit .btn { width: 100%; }

/* ---- Application status pills (wp-admin list) ---- */
.filld-app-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.filld-app-status--new { background: #e3edfa; color: #1f52a4; }
.filld-app-status--reviewing { background: #fff3d6; color: #8a6100; }
.filld-app-status--interview { background: #e6e2fb; color: #4b3ba4; }
.filld-app-status--offer { background: #dff0e4; color: #2e7d47; }
.filld-app-status--hired { background: #cdebd6; color: #1d6b3a; }
.filld-app-status--rejected { background: #f0f0f1; color: #6a6f76; }

@media (hover: hover) and (pointer: fine) {
  .job-back:hover { text-decoration: underline; text-underline-offset: .2em; }
  .job .btn:hover { background: var(--color-accent-hover); transform: translateY(-1px); }
  .job-field input:hover,
  .job-field textarea:hover { background: var(--color-paper-2); }
}

@media (min-width: 60rem) {
  .job-header { padding: var(--space-xl); }
  .job .job-header-apply { display: none; }
  .job-content-grid { grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem); }
  .job-apply { position: sticky; top: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .job .btn { transition-duration: 150ms; }
}

/* reCAPTCHA disclosure under the apply form */
.job-apply-recaptcha {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
  margin: var(--space-sm) 0 0;
}
.job-apply-recaptcha a { color: var(--color-ink-muted); }