/* ==========================================================================
   WT Law - Job Openings
   --------------------------------------------------------------------------
   Loaded on the Careers page and on /positions/{slug}/ singles only.
   Kept OUT of main.css deliberately: main.css carries the 28 July office hero
   and careers scrim edits, and every avoided edit to it is one fewer chance to
   revert them.

   Reuses the existing .car-opening-card / -level / -title / -meta / -desc rules
   from main.css. Everything here is additive.
   ========================================================================== */

/* --- Teaser card: whole card is the link target ------------------------- */

.jo-card {
  position: relative;
}

.jo-card .car-opening-title {
  margin-bottom: .4rem;
}

.jo-card-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--fast);
}

/* Stretched hit area - one link for assistive tech, full card for the mouse. */
.jo-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.jo-card:hover .jo-card-link,
.jo-card-link:focus-visible {
  color: var(--gold);
}

.jo-card:focus-within {
  border-color: rgba(231, 199, 153, .45);
}

.jo-card-link:focus-visible {
  outline: none;
}

.jo-card:focus-within::before {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px solid var(--gold);
  pointer-events: none;
}

.jo-card-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: .2rem;
}

.jo-card-more::after {
  content: '\2192';
  transition: transform var(--fast);
}

.jo-card:hover .jo-card-more::after {
  transform: translateX(4px);
}

/* --- Speculative inquiry card ------------------------------------------- */

.jo-spec-card {
  border-color: rgba(231, 199, 153, .22);
  background: rgba(231, 199, 153, .03);
  margin-top: var(--sp-3);
}

.jo-spec-card:hover {
  border-color: rgba(231, 199, 153, .32);
}

/* --- Single posting ----------------------------------------------------- */

.jo-single-head {
  padding: var(--sp-12) 0 var(--sp-5);
  border-bottom: 1px solid var(--border);
}

.jo-breadcrumb {
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9a9ab4;
  margin-bottom: var(--sp-3);
}

.jo-breadcrumb a {
  color: #9a9ab4;
  text-decoration: none;
  transition: color var(--fast);
}

.jo-breadcrumb a:hover {
  color: var(--gold);
}

.jo-breadcrumb .breadcrumb-sep {
  color: rgba(231, 199, 153, .35);
  margin: 0 .5rem;
}

.jo-single-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.12;
  color: var(--headline-white, #f0f0f8);
  margin: 0 0 .8rem;
  max-width: 22ch;
}

.jo-single-meta {
  margin-bottom: var(--sp-4);
}

.jo-single-apply {
  margin-top: .4rem;
}

.jo-notice {
  border: 1px solid rgba(231, 199, 153, .22);
  background: rgba(231, 199, 153, .04);
  padding: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-2);
  max-width: 62ch;
}

.jo-notice p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--platinum);
}

.jo-notice a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(231, 199, 153, .35);
  transition: border-color var(--fast);
}

.jo-notice a:hover {
  border-color: var(--gold);
}

.jo-single-body {
  padding: var(--sp-8) 0 var(--sp-12);
}

.jo-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
  max-width: 70ch;
}

.jo-pay-label {
  font-size: var(--fs-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.jo-pay-value {
  font-size: var(--fs-body);
  color: var(--platinum);
}

/* --- Editor content ----------------------------------------------------- */
/* Replaces the old .car-opening-req repeater styling. The description is now
   the WordPress editor, so headings and lists come through as plain markup and
   are styled here to match what the repeater used to produce. */

.jo-content {
  max-width: 70ch;
}

.jo-content > *:first-child {
  margin-top: 0;
}

.jo-content p {
  font-size: var(--fs-body);
  color: var(--silver);
  line-height: 1.78;
  margin: 0 0 1.4rem;
}

.jo-content h2,
.jo-content h3 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--platinum);
  font-weight: 500;
  margin: var(--sp-5) 0 1rem;
}

.jo-content h4 {
  font-size: var(--fs-h4);
  color: var(--platinum);
  margin: var(--sp-4) 0 .8rem;
}

.jo-content ul,
.jo-content ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin: 0 0 1.6rem;
  padding: 0;
}

.jo-content li {
  font-size: var(--fs-small);
  color: var(--silver);
  padding-left: 1.3rem;
  position: relative;
  line-height: 1.65;
}

.jo-content ul > li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: rgba(231, 199, 153, .35);
}

.jo-content ol {
  counter-reset: jo-ol;
}

.jo-content ol > li {
  counter-increment: jo-ol;
}

.jo-content ol > li::before {
  content: counter(jo-ol) '.';
  position: absolute;
  left: 0;
  color: rgba(231, 199, 153, .55);
  font-size: var(--fs-micro);
}

.jo-content a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(231, 199, 153, .3);
  transition: border-color var(--fast);
}

.jo-content a:hover {
  border-color: var(--gold);
}

.jo-content strong {
  color: var(--platinum);
  font-weight: 500;
}

.jo-content blockquote {
  border-left: 1px solid rgba(231, 199, 153, .35);
  padding-left: var(--sp-3);
  margin: var(--sp-4) 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--platinum);
}

.jo-single-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

/* --- Responsive --------------------------------------------------------- */
/* Existing tiers only - no new breakpoints. */

@media (max-width: 900px) {
  .jo-single-head {
    padding: var(--sp-8) 0 var(--sp-4);
  }
  .jo-single-body {
    padding: var(--sp-5) 0 var(--sp-8);
  }
  .jo-single-title {
    max-width: none;
  }
}

@media (max-width: 600px) {
  .jo-single-foot {
    flex-direction: column;
    align-items: flex-start;
  }
  .jo-single-foot > * {
    width: 100%;
    text-align: center;
  }
}

/* Reduced motion: the arrow nudge is decoration. */
@media (prefers-reduced-motion: reduce) {
  .jo-card-more::after,
  .jo-card:hover .jo-card-more::after {
    transition: none;
    transform: none;
  }
}