/*
  Dependency chain: jobs/index.html decision-group markup -> this cognitive
  presentation layer -> shared public-content.css. This file owns separation,
  reading width, mobile priority, and Jobs-only sticky-header compatibility.
*/

/* `clip` prevents horizontal paint overflow without creating the scroll
   container that disables the shared sticky topbar. `hidden` is the fallback. */
html,
body.jobs-page {
  overflow-x: hidden;
  overflow-x: clip;
}

.jobs-page .content-section p {
  max-width: 70ch;
}

.jobs-before-apply {
  max-width: var(--jobs-reading-width);
  margin-top: var(--jobs-module-space);
  padding: 1.2rem;
  background: rgba(8, 27, 71, 0.42);
  border: 2px solid var(--jobs-section-title-color);
  border-radius: 6px;
}

.jobs-before-apply h3,
.jobs-access-note h3,
.jobs-certainty-card h3,
.jobs-inclusion-callout h3 {
  margin-top: 0;
}

.jobs-readiness-list,
.jobs-separated-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  width: 100%;
  max-width: none !important;
  margin-top: 1rem;
  padding-left: 0 !important;
  list-style: none;
}

.jobs-readiness-list li,
.jobs-separated-list li {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 0.8rem 0.9rem;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  overflow-wrap: anywhere;
}

.jobs-readiness-list strong,
.jobs-separated-list strong {
  color: #fff;
}

.jobs-certainty-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jobs-card-gap);
  align-items: start;
  max-width: var(--jobs-grid-width);
  margin-top: 1.35rem;
}

.jobs-certainty-card {
  min-width: 0;
  padding: 1.15rem;
  background: var(--card);
  border: 2px solid rgba(255, 255, 255, 0.34);
  border-radius: 6px;
}

.jobs-certainty-card--scheduled {
  border-color: var(--jobs-subtitle-color);
}

.jobs-certainty-card--possible {
  border-color: var(--jobs-section-title-color);
}

.jobs-certainty-card p,
.jobs-certainty-card ul {
  margin-top: 0.8rem;
}

.jobs-change-note {
  max-width: var(--jobs-reading-width) !important;
  margin-top: 1.2rem !important;
  padding: 0.9rem 1rem;
  background: rgba(8, 27, 71, 0.24);
  border-left: 4px solid var(--gold);
}

.jobs-access-note {
  max-width: var(--jobs-reading-width);
  margin-top: var(--jobs-module-space);
  padding: 1.1rem 1.2rem;
  background: rgba(8, 27, 71, 0.24);
  border-left: 4px solid var(--gold);
}

.jobs-rules-block {
  margin-bottom: 1rem;
}

.jobs-inclusion-callout {
  max-width: var(--jobs-reading-width);
  margin-top: 1rem;
  padding: 1.1rem 1.2rem;
  background: rgba(31, 71, 61, 0.78);
  border: 2px solid var(--jobs-subtitle-color);
  border-radius: 6px;
}

.jobs-inclusion-callout p {
  color: rgba(255, 255, 255, 0.94);
}

@media (max-width: 800px) {
  .jobs-hero .hero-copy {
    grid-row: 1;
  }

  .jobs-hero h1 {
    font-size: 2.25rem;
  }

  .jobs-page .content-section h2 {
    font-size: 1.8rem;
  }

  .jobs-hero .page-lede {
    font-size: 1.08rem;
  }

  .jobs-certainty-grid {
    grid-template-columns: 1fr;
  }

  .jobs-page .topbar {
    position: relative;
    top: auto;
  }

  .jobs-page main [id] {
    scroll-margin-top: 1rem;
  }
}

@media (max-width: 520px) {
  .jobs-page .nav-menu-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    left: auto;
    width: min(220px, calc(100vw - 1.5rem));
    max-height: calc(100vh - 1rem);
    overflow-y: auto;
  }
}

/* Anchor the narrow open menu to the full header instead of the trigger. This
   keeps zoomed menu content below the header with an internal scroll area. */
@media (min-width: 381px) and (max-width: 520px) and (min-height: 421px) {
  .jobs-page .nav-menu {
    position: static;
  }

  .jobs-page .nav-menu-panel {
    top: calc(100% + 0.5rem);
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    max-height: calc(100vh - 100% - 1rem);
    max-height: calc(100dvh - 100% - 1rem);
  }
}

/* A short landscape header stays in normal flow so it cannot consume the useful
   viewport. Narrow layouts already use normal flow above. */
@media (max-height: 420px) {
  .jobs-page .topbar {
    position: relative;
    top: auto;
  }

  .jobs-page main [id] {
    scroll-margin-top: 1rem;
  }
}

@media (max-width: 380px) {
  .jobs-before-apply,
  .jobs-certainty-card,
  .jobs-access-note,
  .jobs-inclusion-callout {
    padding: 0.9rem;
  }
}