/*
 * Roam — Careers (inc/careers.php).
 *
 * The /careers landing (hero + role grid + application form) and single role
 * pages, in the roamstays design system. Every value from a --roam-* token, no
 * override flags. Loads after roam.css.
 */

.roam-careers { width: 100%; padding-block: var(--roam-sp-8) var(--roam-sp-32); }

/* ── Shared eyebrow ───────────────────────────────────────────────────────── */
.roam-careers__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--roam-sp-10);
  margin: 0 0 var(--roam-sp-12);
  font-family: var(--roam-font-body);
  font-size: var(--roam-fs-12);
  font-weight: var(--roam-fw-semibold);
  letter-spacing: var(--roam-ls-section);
  text-transform: uppercase;
  color: var(--roam-gold-active);
}
.roam-careers__rule { width: 26px; height: 2px; background: var(--roam-gold); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.roam-careers__hero { margin-bottom: var(--roam-sp-40); }
.roam-careers__title {
  margin: 0 0 var(--roam-sp-16);
  font-family: var(--roam-font-display);
  font-size: clamp(34px, 5vw, var(--roam-fs-56));
  line-height: var(--roam-lh-tight);
  color: var(--roam-forest);
}
.roam-careers__lede {
  margin: 0;
  max-width: 60ch;
  font-family: var(--roam-font-body);
  font-size: var(--roam-fs-18);
  line-height: var(--roam-lh-body);
  color: var(--roam-text-secondary);
}
.roam-careers__meta {
  margin: 0 0 var(--roam-sp-16);
  font-size: var(--roam-fs-15);
  color: var(--roam-text-muted);
}

/* ── Role grid ────────────────────────────────────────────────────────────── */
.roam-careers__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--roam-sp-20);
  margin-bottom: var(--roam-sp-56);
}
.roam-careers__empty {
  grid-column: 1 / -1;
  padding: var(--roam-sp-32);
  border: 1px dashed var(--roam-border-tag);
  border-radius: var(--roam-r-xl);
  text-align: center;
  color: var(--roam-text-secondary);
  font-size: var(--roam-fs-15);
}
.roam-careers__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--roam-sp-28);
  border: 1px solid var(--roam-border-cream);
  border-radius: var(--roam-r-xl);
  background: var(--roam-white);
  box-shadow: var(--roam-shadow-rest);
  transition: transform 0.2s var(--roam-easing), box-shadow 0.2s var(--roam-easing);
}
.roam-careers__card:hover { transform: var(--roam-lift-hover); box-shadow: var(--roam-shadow-hover); }
.roam-careers__cardtop {
  margin: 0 0 var(--roam-sp-8);
  font-size: var(--roam-fs-11);
  font-weight: var(--roam-fw-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--roam-gold-active);
}
.roam-careers__cardttl {
  margin: 0 0 var(--roam-sp-12);
  font-family: var(--roam-font-display);
  font-size: var(--roam-fs-24);
  color: var(--roam-forest);
}
.roam-careers__cardttl a { color: inherit; text-decoration: none; }
.roam-careers__cardttl a:hover { color: var(--roam-forest-light); }
.roam-careers__pill {
  display: inline-block;
  margin-bottom: var(--roam-sp-12);
  padding: var(--roam-sp-4) var(--roam-sp-12);
  border-radius: var(--roam-r-full);
  background: var(--roam-cream);
  color: var(--roam-text-secondary);
  font-size: var(--roam-fs-12);
  font-weight: var(--roam-fw-semibold);
}
.roam-careers__cardtx {
  margin: 0 0 var(--roam-sp-20);
  font-size: var(--roam-fs-15);
  line-height: var(--roam-lh-snug);
  color: var(--roam-text-body);
}
.roam-careers__cardacts {
  display: flex;
  gap: var(--roam-sp-16);
  align-items: center;
  margin-top: auto;
}
.roam-careers__view {
  color: var(--roam-forest);
  font-size: var(--roam-fs-14);
  font-weight: var(--roam-fw-semibold);
  text-underline-offset: 3px;
}
.roam-careers__applybtn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--roam-sp-18);
  border-radius: var(--roam-r-sm);
  background: var(--roam-forest);
  color: var(--roam-cream);
  font-size: var(--roam-fs-14);
  font-weight: var(--roam-fw-semibold);
  text-decoration: none;
  transition: background-color 0.2s var(--roam-easing);
}
.roam-careers__applybtn:hover { background: var(--roam-forest-light); }

/* ── Application form ─────────────────────────────────────────────────────── */
.roam-careers__apply { max-width: 720px; }
.roam-careers--single .roam-careers__apply { max-width: none; }
.roam-careers__formcard {
  padding: var(--roam-sp-36);
  border: 1px solid var(--roam-border-cream);
  border-radius: var(--roam-r-xl);
  background: var(--roam-white);
  box-shadow: var(--roam-shadow-rest);
}
.roam-careers__formttl {
  margin: 0 0 var(--roam-sp-24);
  font-family: var(--roam-font-display);
  font-size: var(--roam-fs-28);
  color: var(--roam-forest);
}
.roam-careers__form { display: flex; flex-direction: column; gap: var(--roam-sp-16); }
.roam-careers__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--roam-sp-16); }
.roam-careers__field { display: flex; flex-direction: column; min-width: 0; }
.roam-careers__field > span {
  margin-bottom: var(--roam-sp-6);
  font-size: var(--roam-fs-11);
  font-weight: var(--roam-fw-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--roam-text-muted);
}
.roam-careers__field input,
.roam-careers__field select,
.roam-careers__field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: var(--roam-sp-12) var(--roam-sp-14);
  border: 1px solid var(--roam-border-tag);
  border-radius: var(--roam-r-sm);
  background: var(--roam-white);
  font-family: var(--roam-font-body);
  font-size: var(--roam-fs-15);
  color: var(--roam-text-primary);
}
.roam-careers__field textarea { min-height: auto; resize: vertical; line-height: var(--roam-lh-body); }
.roam-careers__field input:focus,
.roam-careers__field select:focus,
.roam-careers__field textarea:focus {
  outline: 2px solid var(--roam-gold);
  outline-offset: -1px;
  border-color: var(--roam-gold);
}
.roam-careers__error { margin: 0; color: var(--roam-error); font-size: var(--roam-fs-13); }
.roam-careers__error[hidden] { display: none; }
.roam-careers__submit {
  align-self: flex-start;
  min-height: 50px;
  padding: 0 var(--roam-sp-28);
  border: 0;
  border-radius: var(--roam-r-sm);
  background: var(--roam-forest);
  color: var(--roam-cream);
  font-family: var(--roam-font-body);
  font-size: var(--roam-fs-15);
  font-weight: var(--roam-fw-semibold);
  cursor: pointer;
  transition: background-color 0.2s var(--roam-easing);
}
.roam-careers__submit:hover:not(:disabled) { background: var(--roam-forest-light); }
.roam-careers__submit:disabled { opacity: 0.6; cursor: default; }

.roam-careers__success { text-align: center; padding: var(--roam-sp-16) 0; }
.roam-careers__success[hidden] { display: none; }
.roam-careers__successico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--roam-sp-16);
  border-radius: 50%;
  background: var(--roam-cream);
  color: var(--roam-forest);
}
.roam-careers__success p { margin: 0; font-size: var(--roam-fs-16); color: var(--roam-forest); }

/* ── Single role ──────────────────────────────────────────────────────────── */
.roam-careers__back { margin-bottom: var(--roam-sp-16); }
.roam-careers__back a { color: var(--roam-text-secondary); font-size: var(--roam-fs-14); text-decoration: none; }
.roam-careers__back a:hover { color: var(--roam-forest); }
.roam-careers__hr { margin: var(--roam-sp-28) 0; border: 0; border-top: 1px solid var(--roam-border-cream); }
.roam-careers__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--roam-sp-40);
  align-items: start;
}
.roam-careers__desc { max-width: none; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .roam-careers__split { grid-template-columns: minmax(0, 1fr); gap: var(--roam-sp-28); }
}
@media (max-width: 640px) {
  .roam-careers__grid { grid-template-columns: minmax(0, 1fr); }
  .roam-careers__row { grid-template-columns: minmax(0, 1fr); }
  .roam-careers__formcard { padding: var(--roam-sp-24); }
}