/*
 * Recruitment public pages.
 *
 * The corporate shell (jobs-shell.css + mobile-shell.css) owns the black
 * background, the IBM Plex Mono body, the Pixeled headings, the square
 * thin-bordered cards and the logo/navigation language.  This file only
 * styles what the corporate jobs index does not provide: the application
 * form, the job body sections and the archive disclosure.
 *
 * No body colour, no font family and no corporate shell class is redefined
 * here.  The rejected warm-paper palette and its sans-serif stack are absent.
 */

/* Long headings must stay readable and wrap on small screens. */
.title-wrap { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

/* Job body ---------------------------------------------------------- */
/* The title is a link to the advert: it keeps the colour of the corporate
   title instead of the browser default. */
.job-card .job-title a { color: inherit; text-decoration: none; }
.job-card .job-title a:hover { text-decoration: underline; }

/* The name of the role is a job title, not a section heading: it keeps the
   corporate body font and never shouts in Pixeled. */
.job-title.detail-title {
  font-family: inherit;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
}

/* The eyebrow and the tags line up on the left, like the corporate cards. */
.job-eyebrow { display: flex; gap: 14px; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
.job-tags { justify-content: flex-start; margin-bottom: 34px; }
.detail-heading {
  font-family: 'Pixeled', monospace;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 38px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.detail-paragraph { font-size: 13px; line-height: 1.85; color: rgba(255, 255, 255, 0.75); margin: 0 0 16px; }
.detail-list { list-style: none; padding-left: 0; margin: 0 0 20px; }
.detail-list li { font-size: 12px; color: rgba(255, 255, 255, 0.7); padding-left: 16px; position: relative; margin-bottom: 6px; }
.detail-list li::before { content: "-"; position: absolute; left: 0; color: rgba(255, 255, 255, 0.3); }

/* Application form --------------------------------------------------- */
.apply-section { margin-top: 48px; }
.apply-section label { display: block; font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); margin-bottom: 22px; }
.apply-section input,
.apply-section textarea,
.apply-section select {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  min-height: 44px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  font: inherit;
}
.apply-section textarea { resize: vertical; }
.apply-section input:focus,
.apply-section textarea:focus,
.apply-section select:focus { outline: 2px solid #fff; outline-offset: 2px; }
.apply-section .grid.two { display: grid; gap: 0 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.apply-section .check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; }
.apply-section .check input { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; flex-shrink: 0; accent-color: #fff; }
.apply-section button.apply-btn { cursor: pointer; margin-top: 8px; }
.apply-section details { margin: 26px 0; font-size: 12px; }
.apply-section details summary { cursor: pointer; }
.apply-section .cf-turnstile { margin: 24px 0; }
.errors { border: 1px solid rgba(255, 255, 255, 0.2); border-left: 3px solid #fff; padding: 20px; margin: 26px 0; }
.errors strong { font-family: 'Pixeled', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; display: block; }
.errors ul { margin: 14px 0 0; padding-left: 18px; }
.errors li { font-size: 12px; margin-bottom: 6px; color: rgba(255, 255, 255, 0.8); }
.errors p { font-size: 11px; color: rgba(255, 255, 255, 0.5); margin: 12px 0 0; }
.muted { color: rgba(255, 255, 255, 0.5); font-size: 11px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.reference { font-size: 22px; letter-spacing: 0.1em; margin: 24px 0; }

/* Listing ------------------------------------------------------------ */
.city-filter { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 42px; font-size: 12px; }
.city-filter select { width: auto; padding: 10px 12px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); font: inherit; min-height: 40px; }
.filter-btn {
  font-family: 'Pixeled', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px 18px;
  cursor: pointer;
}
.filter-btn:hover { background: #fff; color: #000; }
.job-archive { margin-top: 56px; }
.job-archive > summary { cursor: pointer; list-style: revert; }
.job-archive > summary::marker { color: rgba(255, 255, 255, 0.4); }
.job-card .job-description { margin-bottom: 16px; }

/* Back to the listing (never an application button) -------------------- */
.back-link {
  display: inline-block;
  margin-top: 20px;
  font-family: 'Pixeled', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 6px;
}

/* Header ------------------------------------------------------------- */
/* The corporate adapter moves .nav-right into the mobile menu.  The locale
   choices stay in the bar next to the wordmark, so a reader can change the
   language without opening the menu. */
.lang-switch { display: flex; gap: 14px; align-items: center; }
.lang-switch a { font-family: 'Pixeled', monospace; font-size: 12px; letter-spacing: 2px; color: rgba(255, 255, 255, 0.6); text-decoration: none; text-transform: uppercase; }
.lang-switch a:hover,
.lang-switch a[aria-current="true"] { color: #fff; }

@media (max-width: 1199px) {
  /* The bar is a flex row: the wordmark on the left, the locales and the
     menu button on the right. */
  .recruitment-languages { margin-left: auto; }
  nav.recruitment-nav .mobile-nav-toggle { margin-left: 0; }
  /* Touch-sized locale links: the wordmark, the three languages and the
     menu button fit a 320 pixel screen. */
  .recruitment-languages a { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 44px; }
  /* A field smaller than 16 pixels makes iOS zoom on focus. */
  .apply-section input,
  .apply-section select,
  .apply-section textarea { font-size: 16px; }
}

@media (max-width: 600px) {
  .apply-section .grid.two { grid-template-columns: 1fr; }
  .title-wrap { font-size: 18px; }
}