/* ============================================================================
   /vacancies — the open-positions list.
   Loaded after site.css (see $page_css in partials/header.php), so it can rely
   on the shared shell -- header, footer, .container, the palette in tokens.css.

   WHY THIS SHEET IS IN PIXELS while site.css is in rem: the root font-size on
   this site is 70% and steps down to 45% on a narrow screen, which scales every
   rem on the page with it. That is right for a landing whose type is meant to
   breathe, and wrong for a dense list of filters and cards: the same rule has
   already produced a 7.9px footer once. The sizes below come from the design as
   pixels and stay pixels; only the two headings are allowed to grow with the
   viewport, through clamp().
   ========================================================================= */

/* The page carries no dark hero, so nothing pushes it clear of the fixed header:
   site.js gives .page-hero a top margin and there is no .page-hero here. The
   clearance is taken from --hdr-h, which that same script publishes on :root --
   with a floor written in, because a page whose script has not run yet must not
   start underneath the header. */
.vac-page {
  padding-top: calc(var(--hdr-h, 96px) + 40px);
  padding-bottom: 24px;
}

/* ---- heading ---- */
.vac-head { max-width: 760px; margin-bottom: 40px; }
.vac-bc {
  font-family: var(--kanit); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mid);
  margin-bottom: 14px;
}
.vac-bc a:hover { color: var(--gold); }
.vac-bc .sep { color: var(--gold); margin: 0 .6em; }
.vac-head h1 {
  font-family: var(--kanit); font-weight: 300; font-size: clamp(38px, 5vw, 52px);
  line-height: 1.05; color: var(--navy); margin: 0 0 20px;
}
.vac-head h1 em { color: var(--gold); font-style: normal; }
.vac-head p { font-size: 17px; line-height: 1.6; color: var(--mid); margin: 0; }

/* ---- the two columns ---- */
.vac-layout {
  display: grid; grid-template-columns: 260px 1fr; gap: 48px;
  align-items: start; padding-bottom: 64px;
}

/* ---- filter rail ----
   The rail follows the list down the page, and getting it to do so takes one line
   somewhere else. site.css puts overflow-x: hidden on body to stop a wide element
   ever making the page scroll sideways; on this document html carries that too, so
   body's own value is not propagated to the viewport and body becomes a scroll
   container of its own -- and position: sticky inside a scroll container that never
   scrolls does nothing at all. `clip` cuts exactly the same overflow WITHOUT making
   a scroll container, which is what that rule wanted in the first place. Scoped to
   this page rather than changed in site.css: it is the page that needs it, and a
   browser too old for :has() simply gets a rail that scrolls away. */
body:has(.vac-page) { overflow-x: clip; }
.vac-rail { position: sticky; top: calc(var(--hdr-h, 96px) + 24px); }
.vf-body { display: flex; flex-direction: column; gap: 28px; }
.vf-group { display: block; }
.vf-lbl {
  display: block; font-family: var(--kanit); font-size: 12px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mid);
  margin-bottom: 8px;
}
.vf-inp {
  width: 100%; font-family: var(--lato); font-size: 14px; color: var(--navy);
  padding: 9px 12px; border: 1.5px solid var(--line-strong); background: var(--white);
  border-radius: 2px; outline: none; appearance: none;
}
.vf-inp:focus { border-color: var(--gold); }
select.vf-inp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px; cursor: pointer;
}
.vf-line {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; line-height: 1.3; padding: 5px 0; cursor: pointer; color: var(--text);
}
.vf-line input { accent-color: var(--gold); width: 15px; height: 15px; flex: none; cursor: pointer; }
.vf-line.on { color: var(--gold); font-weight: 600; }
.vf-line:hover { color: var(--navy); }
.vf-line.on:hover { color: var(--gold); }

.vf-btn {
  display: block; width: 100%; text-align: center; cursor: pointer;
  font-family: var(--kanit); font-size: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 0; border-radius: 2px;
  background: transparent; color: var(--navy); border: 1.5px solid var(--navy);
  transition: background-color .15s, color .15s;
}
.vf-btn:hover { background: var(--navy); color: var(--white); }

/* The pill's checkbox is hidden from the eye but NOT from the keyboard: taken out
   of the flow rather than given display:none, so it can still be tabbed to and
   toggled with Space, which is the only way to open the panel without a pointer. */
.vf-switch { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.vf-switch:focus-visible + .vf-toggle { outline: 2px solid var(--gold); outline-offset: 2px; }

/* the phone pill; on a wide screen the rail is simply always open */
.vf-toggle { display: none; }

/* ---- list ---- */
.vac-count {
  font-family: var(--kanit); font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--mid); margin: 0 0 20px;
}
.vac-list { display: flex; flex-direction: column; gap: 16px; }
.vc {
  display: block; border: 1px solid var(--rule); border-radius: 3px;
  padding: 22px 24px; background: var(--white);
  transition: background-color .15s, border-color .15s;
}
.vc:hover { border-color: var(--navy); background: var(--light); }
.vc-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.vc-disc {
  font-family: var(--kanit); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
}
.vc-sep { color: var(--line-strong); }
.vc-fact { font-size: 12px; color: var(--mid); white-space: nowrap; }
.vc-title {
  display: block; font-family: var(--kanit); font-weight: 400; font-size: 22px;
  line-height: 1.2; color: var(--navy);
}
/* Folded until the card is opened. The fold is done by the script (it adds .open);
   with no script both stay hidden and the card is a plain link to the position. */
.vc-sum, .vc-more { display: none; }
.vc.open .vc-sum {
  display: block; font-size: 14px; line-height: 1.55; color: var(--mid); margin-top: 8px;
}
.vc.open .vc-more { display: block; font-size: 12px; color: var(--mid); margin-top: 6px; }

/* ---- nothing matched ---- */
.vac-empty { border: 1px dashed var(--rule); background: var(--light); padding: 48px 32px; text-align: center; }
.vac-empty h3 { font-family: var(--kanit); font-weight: 400; font-size: 24px; color: var(--navy); margin: 0 0 10px; }
.vac-empty p { font-size: 15px; color: var(--mid); margin: 0 auto 24px; max-width: 460px; }

/* ---- the talent-pool door ---- */
.vac-cta {
  position: relative; overflow: hidden; margin: 0 0 64px;
  padding: 48px 40px; border: 1.5px solid var(--navy); border-radius: 3px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px;
}
.vac-cta::before {
  content: ''; position: absolute; top: -90px; right: -40px;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(238,155,0,.18), transparent 70%);
}
.vac-cta-t { position: relative; }
.vac-cta h2 {
  font-family: var(--kanit); font-weight: 300; font-size: clamp(24px, 3vw, 30px);
  color: var(--navy); margin: 0 0 8px; line-height: 1.15;
}
.vac-cta h2 em { color: var(--gold); font-style: normal; }
.vac-cta p { color: var(--mid); margin: 0; max-width: 480px; font-size: 15px; line-height: 1.55; }

.vac-btn {
  position: relative; display: inline-block; white-space: nowrap;
  font-family: var(--kanit); font-size: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 14px 28px; border-radius: 2px;
  background: var(--gold); color: var(--white); border: 1.5px solid var(--gold);
  transition: background-color .15s, border-color .15s;
}
.vac-btn:hover { background: var(--gold-l); border-color: var(--gold-l); }

/* ---- phone and small tablet ---- */
@media (max-width: 860px) {
  .vac-layout { grid-template-columns: 1fr; gap: 28px; }
  .vac-rail { position: static; }
  /* The pill, and the panel it opens. Both states live in CSS so that a phone
     whose script did not load still has a working filter. */
  .vf-toggle {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-family: var(--kanit); font-size: 13px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--navy);
    border: 1.5px solid var(--line-strong); border-radius: 22px;
    padding: 9px 18px; width: fit-content; min-height: 44px;
  }
  /* A finger, not a mouse: every row in the rail is a 44px target on a phone.
     At 14px over 5px of padding a discipline row is 28px tall, which is a
     target you aim at rather than one you hit. */
  .vf-line { min-height: 44px; padding: 4px 0; }
  .vf-inp { font-size: 16px; padding: 12px; }
  .vf-switch:checked + .vf-toggle { border-color: var(--navy); }
  .vf-body { display: none; margin-top: 20px; }
  .vf-switch:checked ~ .vf-body { display: flex; }
}

@media (max-width: 560px) {
  .vac-page { padding-top: calc(var(--hdr-h, 96px) + 28px); }
  .vac-head { margin-bottom: 28px; }
  .vc { padding: 18px 18px; }
  .vac-cta { padding: 32px 24px; }
  .vac-cta p { font-size: 14px; }
  .vac-btn { width: 100%; text-align: center; }
}