/* 2.4.6 — literal sweep: a literal whose value IS a token became it; the rest is a value this
   file paints by hand and is counted in the report. The names are global-2026.css's own aliases (2.4.2); a value only the system holds is written --pui-*. */
/* =========================================================================
   PAGE: CAREER DETAIL — resources/views/public/careers/career.blade.php
   Linked from @section('css') (cache-busted). Shared tokens, nav, footer,
   `.page-eyebrow`, and `html,body{overflow-x:clip}` + `min-width:1320` live in
   /public/css/new/global-2026.css — NOT duplicated here.

   NOTE — `.form-success-msg*` is now the SHARED site-wide standard in
   global-2026.css (revealed by `form.is-success`) — no longer defined here.
   The `.btn` / `.btn--dark`, `.ui-form`, `.field*`, `.checkbox*` blocks below
   are still a generic, page-neutral library scoped here only because
   global-2026.css doesn't carry them yet and it's backend-owned
   (`.btn--dark` is also forked in home-2026.css). RECOMMEND the backend dev
   promote those too so every page shares one definition.
   ========================================================================= */

/* ---------- Page-scoped reset (prototype has these globally in styles.css;
   global-2026.css doesn't, so Bootstrap reboot's `ul{padding-left:2rem}` leaks
   a left indent into .bullet-list without this). ---------- */
.page-career-detail, .page-career-detail *, .page-career-detail *::before, .page-career-detail *::after { box-sizing: border-box; }
.page-career-detail ul { list-style: none; padding: 0; margin: 0; }

/* ---------- Anti-cascade overrides (defeat layout.min.css + bootstrap.min.css) ---------- */
/* 2.4.2 — guard: the page's anti-cascade resets (`button`, `a:link…`) outrank a one-class component (0,1,1 / 0,2,1 over
   0,1,0); they now skip any element carrying a pui- class (inside :where(), so their specificity is unchanged — D60) and the package paints its own. */
.page-career-detail a:where(:not([class*="pui-"])):link,
.page-career-detail a:where(:not([class*="pui-"])):visited,
.page-career-detail a:where(:not([class*="pui-"])):hover,
.page-career-detail a:where(:not([class*="pui-"])):focus,
.page-career-detail a:where(:not([class*="pui-"])):active { color: inherit; text-decoration: none; }

.page-career-detail button:where(:not([class*="pui-"])) {
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.page-career-detail img { display: block; max-width: 100%; }

.page-career-detail .container {
  width: 1320px;
  max-width: 1320px;
  padding-left: var(--pui-space-12);
  padding-right: var(--pui-space-12);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}


/* ---------- Shell + sticky footer ----------
   The wrapper is the flex column; main grows to fill so the included
   blocks.footer-2026 (margin-top:auto) is pushed to the bottom on short pages.
   Mirrors the contact-us pattern but keyed off the .page-career-detail wrapper. */
.page-career-detail {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.career-detail-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: var(--page-top);   /* the eyebrow's line — --page-top in global-2026.css (132 / 116 / 96), no per-breakpoint line */
}
.career-detail-main > .container:first-of-type { margin-bottom: var(--pui-space-64); }
.career-detail-main > .footer-2026 {
  margin-top: auto;
}

/* Eyebrow uses the global .page-eyebrow class (global-2026.css) — do not fork. */

/* ===========================================================
   HEADER CARD — job title + location + Apply button
   =========================================================== */
:where(.career-detail-main) .container > .pui-card {
  padding: var(--pui-space-32);
  display: flex;
  flex-direction: row;   /* B — the header is a row; the Card's column is the kit's default */
  align-items: center;
  justify-content: space-between;
  gap: var(--pui-space-24);
  margin-bottom: var(--pui-space-64);
  /* B — the tinted card (surface/card, radius 16) is .pui-card; padding 32 stays (stated); the row layout is the site's */
}
.cd-header__info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
:where(.cd-header__info) > .pui-text--headline-small {
  margin: 0;
}
.cd-header__loc {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}
.cd-header__loc .pui-icon { width: 18px; height: 22px; }
.cd-header__loc span {
  font-family: var(--pui-font-family-poppins);
  font-weight: var(--pui-font-weight-400);
  font-size: var(--pui-type-body-large-font-size);        /* 22 */
  line-height: var(--pui-font-line-height-relaxed);                        /* Figma loc box 33px @22 */
  color: var(--pui-text-subtle);
}
/* Shared .btn.btn--dark component; this instance is a fixed 105px wide per
   Figma (the label centers in it) — Figma "Button" 105x36. */
:where(.career-detail-main) .container > .pui-card > .pui-button { flex: 0 0 auto; min-width: 105px; }

/* ===========================================================
   BODY — Responsibilities / Requirements / We Offer (left column)
   =========================================================== */
.cd-body {
  width: 638px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--pui-space-64);
  margin-bottom: var(--pui-space-64);
}
.cd-section {
  display: flex;
  flex-direction: column;
  gap: var(--pui-space-16);
}
:where(.cd-section) > .pui-text--title-small {
  margin: 0;
  color: var(--pui-text-default);
}

/* Items: shared .bullet-list component (global-2026.css) — no per-page li/img/span rules. */

/* ===========================================================
   APPLY SECTION — intro (left) + shared form (right)
   =========================================================== */
.cd-apply {
  background: var(--pui-surface-card);
  border-radius: var(--pui-radius-32);
  padding: var(--pui-space-32);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pui-space-32);
  overflow: clip;
  scroll-margin-top: 120px;
}
.cd-apply__intro {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:where(.cd-apply__intro) > .pui-text--headline-small {
  margin: 0;
}
:where(.cd-apply__intro) > .pui-text--title-small {
  margin: 0;
  color: var(--pui-text-subtle);
}
/* "Email us: <address>" line under the apply intro — mirrors the echo-ai page's
   .cta-email (Poppins Medium 22 / neutral-600, 22px below the copy above it).
   Link colour + underline set explicitly: this page's `a` reset kills both, and
   layout.min.css adds `body a { text-decoration: none !important }`. */
:where(.cd-apply__intro) > .pui-text--body-large {
  margin: 22px 0 0;
  color: var(--pui-text-muted);
}
:where(.cd-apply__intro) > .pui-text--body-large a {
  color: inherit;
  text-decoration: underline !important;
  text-underline-position: from-font;
}
.cd-apply > .form-card {
  flex: 0 0 604px;
  max-width: 604px;
  /* F — the card is the form's own (blocks/form-2026: .form-card.pui-card.pui-card--plain — the white card on the tinted band); the page keeps its width in the row */
}

/* F — the form (.ui-form, the spam trap, the file control) is stated once, in global-2026.css § FORM; this page's copy went (2026-09-28). The form itself is blocks/form-2026; the paint is the kit's. */

/* =========================================================================
   TABLET — 768 .. 1023
   ========================================================================= */
@media (max-width: 1023px) {
  .page-career-detail .container {
    width: 100%;
    max-width: 100%;
    padding-left: var(--pui-space-32);
    padding-right: var(--pui-space-32);
  }
  .career-detail-main > .container:first-of-type { margin-bottom: var(--pui-space-48); }

  :where(.career-detail-main) .container > .pui-card { margin-bottom: var(--pui-space-32); }
  .cd-body { width: 100%; gap: var(--pui-space-32); margin-bottom: var(--pui-space-32); }

  /* Apply section stacks: intro on top, form below (full width) */
  .cd-apply {
    flex-direction: column;
    gap: var(--pui-space-24);
  }
  .cd-apply > .form-card { flex: 0 0 auto; width: 100%; max-width: 100%; }
}

/* =========================================================================
   MOBILE — <768
   ========================================================================= */
@media (max-width: 767px) {
  .page-career-detail .container { padding-left: var(--pui-space-16); padding-right: var(--pui-space-16); }
  .career-detail-main > .container:first-of-type { margin-bottom: var(--pui-space-32); }

  /* Header card: stack title/loc, then full-width Apply button */
  :where(.career-detail-main) .container > .pui-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--pui-space-24);
    padding: var(--pui-space-16);
    margin-bottom: var(--pui-space-24);
  }
  :where(.career-detail-main) .container > .pui-card > .pui-button { width: 100%; }

  .cd-body { gap: var(--pui-space-24); margin-bottom: var(--pui-space-24); }

  .cd-apply { padding: var(--pui-space-16); gap: var(--pui-space-12); }
  /* F — the card's inset on a phone is the form card's own (global-2026.css) */
}

/* C — the ink of every glyph the kit does not paint itself, bound by name (the file's colour → its token; 2026-09-25). Glyphs inside a
   kit slot (.pui-card__icon, .pui-badge, .pui-icon-button, .pui-input-group__icon, .pui-select__chevron, .pui-nav-link__caret, .pui-form-result__icon) take the kit's ink. */
.cd-header__loc .pui-icon { color: var(--pui-color-red-300); }
/* F — the file control's glyph (neutral/300, 14) is stated with the file control, in global-2026.css § FORM */

/* STEP 12 (2026-09-28) — a design-system part carries the design system's classes only; this page reaches a part through the block that holds it
   and states only what is the page's (a width in a row, a place in a grid, a picture's ratio). */
/* STEP 12 · TOKENS — the site's alias names became the design system's; a typed value that equals a token is the token */