/* =========================================================================
   Careers slice (migration slice 7): /careers/ listings + filters.
   Careers pages load base.css + site.css + careers.css only, so the hero and
   card styles are self-contained here. Brand tokens come from css/base.css
   :root. Hover effects are limited to interactive elements (selects, apply
   button). No em dashes in this file.
   ========================================================================= */

/* Both pages open with the shared .breadcrumb-bar trail and .people-intro
   title block (css/site.css). They were on the amber .hero-band plus a
   .page-intro until 2026-10-21. */

/* ---------- Toolbar + filters ---------- */
.careers-section .container { max-width: 1120px; }

.careers-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
.careers-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.careers-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.careers-field-label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: none;
  color: var(--color-text-light);
}
.careers-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 200px;
  padding: 11px 40px 11px 14px;
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23004473' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 1rem;
  font-family: var(--font-base);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s;
}
.careers-select:hover { border-color: var(--color-primary); }
.careers-select:focus { border-color: var(--color-primary); }
/* A11Y (2026-10-01): was `outline: none` plus a border tint. 10.12:1 navy
   on the white page ground behind the toolbar. */
.careers-select:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.careers-count {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-body);
  white-space: nowrap;
}

/* "Reset filters" (js/careers.js, issue #110): a button that reads as a
   link. It sits last in .careers-filters; align-self keeps it on the select
   row rather than the label row, and the vertical padding gives a tap target
   level with the 46px selects. */
.careers-reset {
  align-self: flex-end;
  padding: 12px 4px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.careers-reset:hover { color: var(--color-secondary); }
.careers-reset:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
}
.careers-reset[hidden] { display: none; }

/* ---------- Status + empty ---------- */
.careers-status {
  text-align: center;
  color: var(--color-text-light);
  padding: 40px 0;
  font-size: 1rem;
}
.careers-empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--color-light);
  border-radius: var(--radius);
}
.careers-empty-text {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text-body);
}

/* ---------- Listings ---------- */
.careers-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

/* CLS: hold the space the job cards are about to occupy.
   #careers-list ships empty and js/careers.js fills it after fetching
   /api/careers, which returns 34 jobs today. Until they arrive the footer
   newsletter band sits INSIDE the viewport, and the cards then shove it
   thousands of pixels down. Measured on the deployed preview 2026-10-15:
   CLS 0.128 desktop on 3 of 3 runs, with Lighthouse naming
   .footer-newsletter-band as the culprit. Reserving the height means
   nothing visible moves.

   70vh is chosen to push the band below the fold at first paint, not to
   match the final list height, which cannot be known in advance and is far
   taller anyway.

   THE ZERO-JOB CASE IS THE TRAP. A first attempt reserved the height and
   released it unconditionally after render; when the feed returned nothing,
   the reservation collapsed and the band jumped 625px, against a 33px
   baseline shift. So the two states are explicit and each holds the same
   space: --loading reserves on the list, --empty hands that reservation to
   the empty-state block. Releasing one while setting the other is a swap,
   not a collapse. */
.careers-section--loading .careers-list {
  min-height: 70vh;
}
.careers-section--empty .careers-empty {
  min-height: 70vh;
  display: grid;
  place-items: center;
}
.careers-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
}
.careers-card-body { flex-grow: 1; }
.careers-card-title {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-secondary);
  margin-bottom: 14px;
}

.careers-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
/* Both chips (department and job type) are navy outlines on the white card: the
   filled gold and navy pills read as a color-heavy pair, per beacon #243. */
.careers-chip {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: none;
  padding: 3px 11px;
  border: 2px solid var(--color-secondary);
  border-radius: 50px;
  background: none;
  color: var(--color-secondary);
}

.careers-card-place {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
}
.careers-card-summary {
  font-size: 1rem;
  color: var(--color-text-body);
  line-height: 1.65;
  margin-bottom: 14px;
}
.careers-card-posted {
  font-size: 1rem;
  color: var(--color-text-light);
  margin-bottom: 20px;
}

.careers-apply {
  align-self: flex-start;
  margin-top: auto;
  text-decoration: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .careers-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .careers-filters { flex-direction: column; }
  .careers-field { width: 100%; }
  .careers-select { width: 100%; min-width: 0; }
  .careers-reset { align-self: flex-start; }
  .careers-list { grid-template-columns: 1fr; }
}

/* ---------- Listing: title link + closed-job notice ---------- */
.careers-card-link {
  color: inherit;
  text-decoration: none;
}
.careers-card-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.careers-card-link:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Empty until js/careers.js fills it, and it must stay in the page while
   empty (a live region has to exist before it speaks), so collapse the box
   instead of hiding it. */
.careers-notice:empty {
  margin: 0;
  padding: 0;
  border: 0;
}
.careers-notice {
  margin: 0 0 24px;
  padding: 14px 18px;
  border-left: 4px solid var(--color-secondary);
  border-radius: 8px;
  background: var(--color-light);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 600;
}

/* ---------- Program page careers section ----------
   .program-careers is the open-jobs section a program record's `careers`
   block adds (scripts/program_sections.py render_careers; first on
   /programs/easterseals-academy/). It is the listing above, filled by the same
   js/careers.js, with three differences, all scoped to this class so
   /careers/ and the DSP page are untouched:

   1. #careers-list is a <ul> there, so js/careers.js wraps each card in an
      <li class="careers-item">. The list loses its bullets and indent, and
      each item stretches its card so a grid row keeps equal card heights.
   2. The reservation is 360px, not 70vh. The section sits far below the fold
      on a long program page, so the 70vh figure, chosen to push the footer
      band out of a first-paint viewport on /careers/, has nothing to protect
      here, and on an empty result it would leave a 70vh grey box mid page.
      360px is about one row of cards, so the swap from --loading to the
      cards or to --empty moves the content under it by a row at most.
   3. The empty block carries a link to /careers/ under its text line, shown
      for no matching jobs and for a failed fetch alike. */
.program-careers ul.careers-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.careers-item {
  display: flex;
}
.careers-item > .careers-card {
  flex: 1 1 auto;
}
.program-careers.careers-section--loading .careers-list {
  min-height: 360px;
}
.program-careers.careers-section--empty .careers-empty {
  min-height: 360px;
}
.program-careers-lead {
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--color-text-body);
  margin-top: 12px;
}
.careers-empty-link {
  margin-top: 14px;
  font-size: 1.0625rem;
}
.careers-empty-link a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
}
.careers-empty-link a:hover { color: var(--color-primary-dark); }
.careers-empty-link a:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* =========================================================================
   Job page: /careers/?job_id=<id> (template careers/job/index.html,
   behaviour js/job.js). New-site style: the shared .breadcrumb-bar and
   .people-intro opener (css/site.css), white ground, rounded panels, brand
   tokens only.
   ========================================================================= */

/* ---------- Hero: title and tag chips under the trail bar ----------
   A SECOND BREADCRUMB COMPONENT WAS RETIRED HERE on 2026-10-21, with the amber
   opener. This page carried its own `.breadcrumb.job-breadcrumb` <ol>, the only
   one in the tree, plus three rules whose entire purpose was to beat the
   `.hero-band .breadcrumb` alpha values in css/site.css: that 0.6 alpha navy
   current crumb measured under 4.5:1 on the amber and had to be forced back to
   full navy. There is no amber left to read on, and the shared
   .breadcrumb-current is 0.75 alpha navy on the #e6f4f9 bar, so the override
   had nothing to override and the component had nothing to be a second of.
   Both are gone. The trail is now `_kit.render_breadcrumb`'s shape, hand
   written here because this page is hand authored, and the current crumb keeps
   the runtime fill: js/job.js:54 does
   setText('[data-job-text="title"]', job.title) through querySelectorAll, so it
   fills EVERY node carrying that attribute. The crumb and the h1 both carry it,
   exactly as the <ol> version did, and js/job.js is unchanged. */

/* The 16px under the h1 is .people-intro h1's own margin, restated because
   this selector has the same (0,1,1) specificity and loads after site.css, so
   the plain `margin: 0 auto` it carried while the h1 sat on the amber band
   would silently win and close the gap above .job-tags. */
.job-hero h1 { max-width: 900px; margin: 0 auto 16px; overflow-wrap: anywhere; }

.job-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.job-tag {
  display: inline-block;
  padding: 5px 14px;
  border: 2px solid var(--color-secondary);
  border-radius: 50px;
  color: var(--color-secondary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

/* ---------- Actions row, status, error ---------- */
.job-section .container { max-width: 960px; }
.job-section { padding-top: 40px; }

.job-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 32px;
}
.job-back {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: underline;
}
.job-back::before { content: "\2190"; margin-right: 8px; text-decoration: none; display: inline-block; }
.job-back:hover { color: var(--color-primary-dark); }
.job-back:focus-visible,
.job-error-link:focus-visible,
.job-richtext a:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
}
.job-apply {
  min-height: 48px;
  text-decoration: none;
}
.job-apply:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 3px;
}

.job-status {
  text-align: center;
  color: var(--color-text-light);
  padding: 32px 0;
  font-size: 1rem;
}
.job-status:empty { padding: 0; }
.job-error {
  text-align: center;
  padding: 0 0 32px;
}
.job-error-link {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
}

/* ---------- Description and requirements panels ---------- */
.job-salary {
  margin: 0 0 24px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-secondary);
}
/* iprov-agency/eas-easterseals#236 ("Get rid of the card and just put the job
   description on white"). The gray description card and the cream
   requirements card are gone, and their padding and radius with them: both
   sections sit on the page's white ground. */
.job-panel {
  margin-bottom: 32px;
}
.job-panel-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-secondary);
  margin: 0 0 20px;
}

/* Server-sanitized feed HTML: only p, br, ul, ol, li, strong, em, u and
   p.job-text-center can appear here (src/careers-job.js). */
.job-richtext {
  color: var(--color-text);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.job-richtext p { margin: 0 0 14px; }
.job-richtext ul,
.job-richtext ol { margin: 0 0 18px; padding-left: 24px; }
.job-richtext ul { list-style: disc; }
.job-richtext ol { list-style: decimal; }
.job-richtext li { margin-bottom: 8px; }
.job-richtext ul ul,
.job-richtext ol ol { margin: 8px 0 0; }
.job-richtext strong { font-weight: 700; color: var(--color-text); }
.job-richtext > :last-child { margin-bottom: 0; }
.job-text-center { text-align: center; }

/* ---------- Closing call to action ---------- */
/* Light yellow closing band (iprov-agency/eas-easterseals#235). The ground is
   --color-cream #ffe3b3, the same light yellow .page-cta--cream and
   .cta-banner--cream carry in .specs/CTA-Yellow-Batch.md, so the job page's
   closing CTA reads as one decision with the rest of the site's.
   The 8px top padding was NOT a band's padding: on white this section read as a
   continuation of the job body above it, and the visible gap came from
   .job-section's own 80px bottom padding. On a coloured ground it needs a
   band's own measure, so it takes 56px, the figure .cta-banner uses in
   css/base.css, and 40px at the 768px breakpoint below.
   Measured on cream: the navy .job-closing-title 8.14:1, the body-gray
   .job-closing-text 6.08:1, and the orange .btn-primary keeps its white label
   at 4.51:1 with its fill 3.62:1 against the band. The .job-apply focus ring is
   already --focus-ring-color, which resolves to navy, 8.14:1 here.
   .job-closing is declared here and rendered on careers/job/index.html alone,
   the template the worker serves at /careers/?job_id=<id>, so no modifier class
   is needed and no other page can pick this up. */
.job-closing {
  background: var(--color-cream);
  padding: 56px 0 var(--section-spacing);
  text-align: center;
}
.job-closing .container { max-width: 860px; }
.job-closing-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-secondary);
  margin: 0 0 16px;
}
.job-closing-text {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--color-text-body);
  margin: 0 auto 28px;
}

@media (max-width: 768px) {
  .job-section { padding-top: 28px; padding-bottom: 40px; }
  .job-actions { flex-direction: column; align-items: stretch; }
  .job-actions .job-apply { justify-content: center; }
  .job-back { align-self: flex-start; }
  .job-closing { padding: 40px 0 56px; }
  .job-closing .job-apply { width: 100%; justify-content: center; }
}

/* =========================================================================
   DSP recruitment page: /become-a-direct-support-professional-at-easterseals/
   (body.dsp-page). The page is built from shared components (area-hero,
   prose-cta, value-icon, about-splits, mission-statement, the careers cards
   above), so this block only adds what the page needs and nothing restyles a
   component. Both in-page targets (#family-members for the Family DSP ads,
   #openings for the two buttons) land below the sticky site header, the same
   offset `.area [id]` uses in css/template-kit.css.
   ========================================================================= */
.dsp-page [id] { scroll-margin-top: calc(var(--eas-header-h, 96px) + 24px); }
.dsp-page .section-head { max-width: 860px; margin-left: auto; margin-right: auto; }
.dsp-page .mission-statement .value-icon { margin-bottom: 18px; }