/**
 * Job Applications page template.
 *
 * Rebuilt 1:1 from Figma file PVN4inCuKZfy1s8gozHug2, page "Job Posting —
 * Rebuild": desktop frame 211:2 (1920w), mobile frame 211:182 (390w), spec card
 * 231:3. Two states only — the design specifies nothing between them, so the
 * single breakpoint is 991.98px.
 *
 * Units are px throughout. The legacy theme sets `html { font-size: 62.5% }`,
 * so `rem` here would silently mean 10px. Do not introduce rem.
 *
 * The job description is editor content: a `wp:accordion` block whose plugin is
 * not installed on this site, so it renders as inert static markup with no CSS
 * or JS of its own. Its appearance is owned outright by this file — including
 * the toggle button, which is deliberately given no pointer affordance because
 * nothing is listening to it.
 *
 * Two measured facts that the Figma export gets wrong, both caught by sampling
 * the artboard raster rather than reading the export:
 *
 * 1. Figma interpolates gradient alpha STRAIGHT; CSS interpolates PREMULTIPLIED.
 *    The hero's two-stop `#b3e5fc → rgba(233,244,241,.6)` drifts up to 5.4/255
 *    mid-ramp if handed to CSS as-is, so the ramp is carried here as five
 *    OPAQUE stops sampled off Figma's own curve pre-composited over white —
 *    max error 0.34/255, and the sampled values agree with the raster.
 * 2. The band gradient runs left→right on desktop (colour varies with x and is
 *    constant with y, reaching the end colour at exactly 62.4% of 1920) and on
 *    a 130.389° diagonal on mobile. They are not the same gradient rotated.
 * 3. The mobile ramp's first stop is at -5.348%, not the +5.348% the export
 *    reports. The sign was recovered by fitting the artboard's iso-colour
 *    lines; the positive value starts the ramp ~80px late.
 *
 * Preserved quirks, reproduced on purpose (spec card 231:13): the eyebrow pill
 * is Inter Semi Bold on desktop and Medium on mobile; the lede's first line is
 * Semi Bold on desktop and Regular on mobile; the accordion title is
 * Merriweather SemiBold 40/48 on desktop against Regular 31/36 on mobile — a
 * different weight, not a scaled version; the desktop pill is 102px wide and
 * the mobile one 105px around a shorter label.
 *
 * Deliberate deviations, all documented at the rule that makes them:
 * - The design's one-off heading sizes (Merriweather Medium 40 for "Core
 *   Responsibilities", Regular 48 for "What We Offer") are normalised to the
 *   dominant Heading 2 style. They are position-dependent accidents in
 *   editor-managed rich text with no markup to target, and the spec card lists
 *   them as candidates for normalisation.
 * - A heading that follows a list sits 40px below it here against the design's
 *   32–36px. The design's own rhythm is irregular at that junction (three
 *   instances, three values), so the natural margin collapse is used.
 * - The call to action is shown on both breakpoints; the design has it on
 *   mobile only. It is 342×50 on both, sitting 33px below the lede on
 *   desktop and the design's own 10px below it on mobile, which makes the
 *   desktop band 671px rather than 638px; mobile is unaffected, because
 *   the design's own mobile band already allows for the button.
 */

body.page-template-job-applications {
  background: #fff;
}

.job-applications {
  --ja-navy: #0e2c47;
  --ja-orange: #fe6c3b;
  --ja-muted: #6e757c;
  --ja-on-accent: #fff;
  --ja-surface: #fff;
  --ja-pill-border: #141414;
  --ja-pill-wash: rgba(255, 255, 255, 0.004);
  --ja-card-border: rgba(14, 44, 71, 0.05);
  --ja-card-shadow: rgba(14, 44, 71, 0.08);

  --ja-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ja-serif: 'Merriweather', Georgia, 'Times New Roman', serif;

  --ja-radius-sm: 6px;
  --ja-radius-lg: 10px;
  --ja-radius-xl: 12px;

  --ja-header-offset: 0px;
  --ja-header-offset-mobile: 0px;

  display: block;
  padding: 0;
  font-family: var(--ja-sans);
  color: var(--ja-navy);
}

/* Legacy-bundle neutraliser.
 *
 * This template keeps theme.min.css, which sets a Bookmania serif family on
 * every heading, generates `li::before` bullets, forces `text-decoration:
 * underline` on every anchor and sizes body copy in rem.
 *
 * The ancestor class is OUTSIDE :where() on purpose, so each rule sits at
 * (0,1,0) — enough to outrank the bundle's element selectors, and still below
 * every component rule below it. Wrapping the ancestor too would drop these to
 * zero specificity, where `a { text-decoration: underline }` wins and the hero
 * button comes out underlined. */
.job-applications :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote) {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: none;
}

.job-applications :where(ul, ol, li) {
  list-style: none;
}

.job-applications :where(ul, ol) :where(li)::before,
.job-applications :where(ul, ol) :where(li)::after {
  content: none;
}

.job-applications :where(a) {
  color: inherit;
  text-decoration: none;
}

.job-applications :where(strong, b, em, i, span) {
  font-family: inherit;
}

/* The site header is sticky and opaque (185px, 132px below 992px) and nothing
 * on the document sets scroll-padding-top, so a link tabbed to from below —
 * or an in-page jump such as the #JobDescription anchor the editor content
 * carries — would land behind it (WCAG 2.2 SC 2.4.11). This moves only the
 * resting scroll position. */
.job-applications a,
.job-applications [id] {
  scroll-margin-top: 200px;
}

/* Navy rather than currentColor: the ring is drawn OUTSIDE its target, so the
 * colour it has to clear is the surface behind it (SC 1.4.11). currentColor
 * would put a white ring on the pale hero band around the orange button, and a
 * 2.83:1 orange ring around the body links. Navy clears 11:1 on both. */
.job-applications :focus-visible {
  outline: 2px solid var(--ja-navy);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- Hero band */

.ja-hero {
  margin-top: var(--ja-header-offset);
  background: linear-gradient(
    90deg,
    #b3e5fc 0%,
    #c7ebfa 15.6%,
    #d8f0f8 31.2%,
    #e6f5f7 46.8%,
    #f1f8f6 62.4%
  );
}

/* 1296px minus the 24px gutters is the design's 1248px content box: at 1920 the
 * left edge lands on 336 and the photo's right edge on 1584, the symmetric
 * inset the design uses. The 101px block padding plus the 436px photo is the
 * band's own 638px height. */
.ja-hero__inner {
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  column-gap: 84px;
  align-items: start;
  max-width: 1296px;
  margin: 0 auto;
  padding: 101px 24px;
}

/* The content column starts 3px below the photo. */
.ja-hero__content {
  padding-top: 3px;
}

.ja-hero__badge {
  display: inline-block;
  min-width: 102px;
  margin: 0 0 29.5px;
  padding: 7px 12px;
  border-radius: var(--ja-radius-sm);
  background: var(--ja-pill-wash);
  /* An inset shadow rather than a border: the design's 900px card and 102px
   * pill are outer dimensions with the hairline drawn inside them, and a real
   * border would eat a pixel of each content box. */
  box-shadow: inset 0 0 0 1px var(--ja-pill-border);
  font: 600 16px/20px var(--ja-sans);
  letter-spacing: 0.64px;
  text-align: center;
  text-transform: uppercase;
  color: var(--ja-navy);
}

.ja-hero__title {
  margin: 0 0 33.5px;
  font: 700 62px/68px var(--ja-sans);
  letter-spacing: -1.24px;
  color: var(--ja-navy);
}

.ja-hero__lede {
  max-width: 385px;
  font: 400 20px/30px var(--ja-sans);
  letter-spacing: -0.4px;
  color: var(--ja-navy);
}

/* One blank line between the two lede paragraphs, as the design's single text
 * node draws it. */
.ja-hero__lede-lead {
  margin: 0 0 30px;
  font: inherit;
  font-weight: 600;
  letter-spacing: inherit;
}

.ja-hero__lede-note {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

/* 342px wide on both breakpoints — the width the design draws the mobile
 * button at, and the width specified for the desktop one. `width: 100%` under
 * the cap keeps it inside the column on phones narrower than 390. */
.ja-hero__cta {
  display: flex;
  width: 100%;
  max-width: 342px;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-top: 33px;
  padding: 10px 28px;
  text-align: center;
  border-radius: var(--ja-radius-sm);
  background: var(--ja-orange);
  font: 500 20px/30px var(--ja-sans);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ja-on-accent);
  transition: background-color 0.2s ease-in-out;
}

.ja-hero__cta:hover,
.ja-hero__cta:focus {
  background: #ef5b28;
  color: var(--ja-on-accent);
}

.ja-hero__photo-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 604 / 436;
  object-fit: cover;
  border-radius: var(--ja-radius-lg);
}

/* ----------------------------------------------------- Application card ---- */

/* 928px minus the 14px gutters is the design's 900px card: at 1920 its left
 * edge lands on 510, and at 390 the same gutters give the 362px mobile card. */
.job-applications__inner {
  max-width: 928px;
  margin: 0 auto;
  padding: 112px 14px;
}

.job-applications__card {
  padding: 17px;
  border-radius: var(--ja-radius-xl);
  background: var(--ja-surface);
  box-shadow:
    0 4px 20px var(--ja-card-shadow),
    inset 0 0 0 1px var(--ja-card-border);
}

.job-applications__card iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
}

/* The editor content ends with an empty paragraph, which would otherwise add a
 * 32px line box and a 24px margin below the accordion. */
.job-applications__card p:empty {
  display: none;
}

/* -------------------------------------------------- Job description block --- */

.job-applications .wp-block-accordion-heading {
  margin: 0 0 16px;
  font: 600 40px/48px var(--ja-serif);
  font-optical-sizing: auto;
  color: var(--ja-navy);
}

/* The header row is 56.78px tall with the title's line box 4px down from its
 * top — the design's own offsets, kept because the whole card's vertical
 * rhythm is measured from them. */
.job-applications .wp-block-accordion-heading__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 4px 0 4.78px;
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
}

/* The size is repeated on the label because WordPress emits its font-size
 * presets as `!important` (the editor tagged this heading `has-large-font-size`,
 * which resolves to 36px), and no selector can outrank that. The label carries
 * no preset class, so setting it there wins cleanly instead. */
.job-applications .wp-block-accordion-heading__toggle-title {
  display: block;
  font-size: 40px;
}

/* A rotated "+" reading as an ×, which is how the design draws the open state.
 * The rotation is scoped to .is-open so the closed state stays a plus if the
 * accordion is ever given its behaviour back. line-height 0 keeps the 36px
 * glyph from driving the row height: it centres on this 16px box — the ink
 * extent measured off the artboard — and overflows it symmetrically. */
.job-applications .wp-block-accordion-heading__toggle-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  /* The design's icon sits 15px in from the content edge, not flush with it. */
  margin-right: 15px;
  font: 600 36px/0 var(--ja-sans);
  color: var(--ja-navy);
}

.job-applications .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
  transform: rotate(45deg);
}

.job-applications .wp-block-accordion-panel {
  font: 400 20px/32px var(--ja-sans);
  letter-spacing: 0.03px;
  color: var(--ja-navy);
}

.job-applications .wp-block-accordion-panel p {
  margin: 0 0 24px;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.job-applications .wp-block-accordion-panel h2,
.job-applications .wp-block-accordion-panel h3,
.job-applications .wp-block-accordion-panel h4 {
  margin: 40px 0 16px;
  font-family: var(--ja-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ja-navy);
}

.job-applications .wp-block-accordion-panel h2 {
  font-size: 40px;
  line-height: 50px;
}

.job-applications .wp-block-accordion-panel h3 {
  font-size: 30px;
  line-height: 40px;
}

.job-applications .wp-block-accordion-panel h4 {
  font-size: 24px;
  line-height: 34px;
}

/* Editors wrap heading text in <strong>; the design's headings are Merriweather
 * Regular, so the emphasis must not survive into them. */
.job-applications .wp-block-accordion-panel :is(h2, h3, h4) :is(strong, b) {
  font-weight: inherit;
}

.job-applications .wp-block-accordion-panel :is(strong, b) {
  font-weight: 700;
}

.job-applications .wp-block-accordion-panel a {
  font-weight: 700;
  color: var(--ja-orange);
  text-decoration: underline;
  text-underline-position: from-font;
}

.job-applications .wp-block-accordion-panel ul,
.job-applications .wp-block-accordion-panel ol {
  margin: 0 0 32px 16px;
}

.job-applications .wp-block-accordion-panel li {
  position: relative;
  margin: 0 0 16px;
  padding-left: 22px;
  font: 400 20px/33px var(--ja-sans);
  letter-spacing: 0.1px;
  color: var(--ja-navy);
}

.job-applications .wp-block-accordion-panel li::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--ja-orange);
}

/* Nested lists carry a muted dash instead of a dot, and hang from the parent
 * item's text rather than its marker. */
.job-applications .wp-block-accordion-panel li ul,
.job-applications .wp-block-accordion-panel li ol {
  margin: 16px 0 16px 24px;
}

.job-applications .wp-block-accordion-panel li li {
  margin-bottom: 8px;
  padding-left: 24px;
}

.job-applications .wp-block-accordion-panel li li::before {
  top: 14px;
  width: 12px;
  height: 2px;
  border-radius: 0;
  background: var(--ja-muted);
}

.job-applications .wp-block-accordion-panel > :first-child,
.job-applications .wp-block-accordion-panel li > :first-child {
  margin-top: 0;
}

.job-applications .wp-block-accordion-panel > :last-child,
.job-applications .wp-block-accordion-panel li > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ Mobile - */

@media (max-width: 991.98px) {
  .ja-hero {
    margin-top: var(--ja-header-offset-mobile);
    /* The first stop is NEGATIVE. Figma's own CSS export reports it as
     * +5.348%, which starts the ramp 80px too late — the artboard's iso-colour
     * lines put it at -5.386%, and -5.348% reproduces the raster to 1/255. */
    background: linear-gradient(
      130.389deg,
      #b3e5fc -5.348%,
      #c7ebfa 9.165%,
      #d8f0f8 23.677%,
      #e6f5f7 38.19%,
      #f1f8f6 52.702%
    );
  }

  /* Capped at the desktop photo width. The design only specifies 390, where
   * the column resolves to its full 342px; without the cap a 900px tablet
   * stacks a 943px-wide photo 629px tall and the band grows past 1000px. */
  .ja-hero__inner {
    grid-template-columns: minmax(0, 604px);
    column-gap: 0;
    padding: 48px 24px 40px;
  }

  .ja-hero__content {
    padding-top: 0;
  }

  .ja-hero__badge {
    min-width: 0;
    margin-bottom: 24px;
    padding: 7px 14px;
    font-weight: 500;
  }

  .ja-hero__title {
    margin-bottom: 9px;
    font-size: 38px;
    line-height: 44px;
    letter-spacing: -0.76px;
  }

  .ja-hero__lede {
    max-width: none;
    font-size: 18px;
    letter-spacing: -0.36px;
  }

  .ja-hero__lede-lead {
    font-weight: 400;
  }

  /* The design's own lede-to-button gap; desktop uses 33px. */
  .ja-hero__cta {
    margin-top: 10px;
  }

  .ja-hero__photo {
    margin-top: 28px;
  }

  .ja-hero__photo-img {
    aspect-ratio: 3 / 2;
  }

  .job-applications__inner {
    padding: 44px 14px;
  }

  .job-applications__card {
    padding: 11px;
  }

  .job-applications a,
  .job-applications [id] {
    scroll-margin-top: 150px;
  }

  /* 51.97px header row with the title's line box 7.98px down from its top. */
  .job-applications .wp-block-accordion-heading {
    font-size: 31px;
    font-weight: 400;
    line-height: 36px;
  }

  .job-applications .wp-block-accordion-heading__toggle-title {
    font-size: 31px;
  }

  .job-applications .wp-block-accordion-heading__toggle {
    padding: 7.98px 0 7.99px;
  }

  .job-applications .wp-block-accordion-panel {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.02px;
  }

  .job-applications .wp-block-accordion-panel h2 {
    font-size: 30px;
    line-height: 40px;
  }

  .job-applications .wp-block-accordion-panel h3 {
    font-size: 24px;
    line-height: 34px;
  }

  .job-applications .wp-block-accordion-panel h4 {
    font-size: 20px;
    line-height: 30px;
  }

  .job-applications .wp-block-accordion-panel ul,
  .job-applications .wp-block-accordion-panel ol {
    margin-bottom: 28px;
  }

  .job-applications .wp-block-accordion-panel li {
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.09px;
  }

  .job-applications .wp-block-accordion-panel li::before {
    top: 10px;
  }

  /* The design hangs mobile nested lists straight off the parent item's text,
   * with no extra indent of their own. */
  .job-applications .wp-block-accordion-panel li ul,
  .job-applications .wp-block-accordion-panel li ol {
    margin-left: 0;
  }

  .job-applications .wp-block-accordion-panel li li {
    margin-bottom: 8px;
  }
}

/* ---------------------------------------------------------- Forced colours - */

/* Windows High Contrast strips background images and shadows, and the card, the
 * pill, the button and every list marker are drawn with exactly those. Each is
 * re-expressed as a border so the structure survives. */
@media (forced-colors: active) {
  .job-applications__card,
  .ja-hero__badge {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }

  .ja-hero__cta {
    border: 1px solid ButtonText;
  }

  .job-applications .wp-block-accordion-panel li::before {
    width: 0;
    height: 0;
    border: 3px solid CanvasText;
    background: none;
  }

  .job-applications .wp-block-accordion-panel li li::before {
    width: 12px;
    height: 0;
    border: 0;
    border-top: 2px solid CanvasText;
    border-radius: 0;
    background: none;
  }
}