/* NASA SEWP VI page (sewp-vi.html). Loaded only on that page, after style.css and a11y.css.
   Every rule is scoped to .sewp-vi so nothing reaches the shared header and footer.
   Design tokens from the approved mockup (docs/sewp-vi/Pillar_SEWP_VI_Webpage_Mockup-v3.html).
   Never use --sky as text on white: it is 1.7:1. Use it only as a fill or on --slate. */

.sewp-vi {
  --ink: #151515;
  --slate: #2c343b;
  --sky: #88ceec;
  --link: #1b6488;
  --muted: #5b5b5b;
  --surface: #f3f3f3;
  --rule: #d7d7d7;
  --on-slate: #c9d3db;
  --head: "Montserrat", "Segoe UI", Arial, sans-serif;
  --body: "Lato", "Segoe UI", Arial, sans-serif;
  display: block;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
}
.sewp-vi * { box-sizing: border-box; }

/* Neutralize style.css element defaults (heading sizes and spacing, "* + p" margins,
   undecorated sky links) so the page matches the mockup. */
.sewp-vi h1, .sewp-vi h2, .sewp-vi h3 { font-family: var(--head); color: var(--slate); line-height: 1.25; letter-spacing: normal; text-transform: none; }
.sewp-vi h2 { font-size: 1.45rem; font-weight: 700; margin: 0 0 0.75rem; }
.sewp-vi h3 { font-size: 1.05rem; font-weight: 600; margin: 1.4rem 0 0.35rem; }
.sewp-vi p { margin: 0 0 1rem; }
.sewp-vi a,
.sewp-vi a:hover,
.sewp-vi a:focus,
.sewp-vi a:active { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.sewp-vi a:focus-visible,
.sewp-vi .sewp-btn:focus-visible { outline: 3px solid var(--link) !important; outline-offset: 3px; box-shadow: none; }
.sewp-vi .ext-icon { width: 0.8em; height: 0.8em; margin-left: 0.2em; vertical-align: -0.05em; }

/* In-page links ("On this page"): the header is fixed while scrolled (56px below 1200px,
   71px from 1200px up), so land each section 16px below it instead of under it.
   The sections take tabindex="-1" so keyboard focus moves to the target; the section
   itself is not a control, so it gets no focus ring. */
.sewp-vi section[id] { scroll-margin-top: 72px; }
@media (min-width: 1200px) {
  .sewp-vi section[id] { scroll-margin-top: 87px; }
}
.sewp-vi section[tabindex="-1"]:focus { outline: none !important; box-shadow: none; }

/* Hero: the one bold element on the page */
.sewp-vi .hero { background: var(--slate); color: #fff; padding: 76px 24px 48px; border-bottom: 6px solid var(--sky); } /* below 1200px the fixed menu bar covers the top 56px */
.sewp-vi .hero-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.sewp-vi .hero h1 { color: #fff; margin: 0; font-size: clamp(2.6rem, 6vw, 4.25rem); font-weight: 700; letter-spacing: -0.01em; }
.sewp-vi .hero .contract { font-family: var(--head); font-weight: 500; color: var(--sky); font-size: 1.15rem; margin: 0.4rem 0 1.25rem; }
/* Contract number links to Pillar Global's SEWP VI contract holder entry. Sky on slate is 7.3:1;
   hover and focus turn it white (12.6:1) with a heavier underline. */
.sewp-vi .hero .contract a,
.sewp-vi .hero .contract a:active { color: var(--sky); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sewp-vi .hero .contract a:hover,
.sewp-vi .hero .contract a:focus-visible { color: #fff; text-decoration-thickness: 2px; }
/* Back link and breadcrumb above the h1. On-slate text is 8.3:1; hover and focus turn it white (12.6:1). */
.sewp-vi .hero .crumb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; margin: 0 0 1.1rem; font-family: var(--head); font-size: 0.95rem; }
.sewp-vi .hero .crumb-row a,
.sewp-vi .hero .crumb-row a:active { color: var(--on-slate); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sewp-vi .hero .crumb-row a:hover,
.sewp-vi .hero .crumb-row a:focus-visible { color: #fff; text-decoration-thickness: 2px; }
.sewp-vi .hero .back-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.sewp-vi .hero .back-icon { width: 1em; height: 1em; flex: none; }
.sewp-vi .hero .crumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.sewp-vi .hero .crumbs li { color: #fff; }
.sewp-vi .hero .crumbs li + li::before { content: "\203A"; content: "\203A" / ""; margin: 0 0.55em; color: var(--on-slate); }
.sewp-vi .hero .lede { color: var(--on-slate); max-width: 60ch; font-size: 1.1rem; margin-bottom: 1.75rem; }
.sewp-vi .actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* .sewp-btn, not .btn: Bootstrap's .btn and .btn-primary states would otherwise apply. */
.sewp-vi .sewp-btn,
.sewp-vi .sewp-btn:hover,
.sewp-vi .sewp-btn:focus,
.sewp-vi .sewp-btn:active { display: inline-block; font-family: var(--head); font-weight: 600; font-size: 0.95rem; line-height: 1.6; text-decoration: none; padding: 12px 22px; border-radius: 4px; }
.sewp-vi .sewp-btn-primary,
.sewp-vi .sewp-btn-primary:focus,
.sewp-vi .sewp-btn-primary:active { background: var(--sky); color: var(--ink); }
.sewp-vi .sewp-btn-primary:hover { background: #a6dbf1; color: var(--ink); }
.sewp-vi .sewp-btn-secondary,
.sewp-vi .sewp-btn-secondary:focus,
.sewp-vi .sewp-btn-secondary:active { border: 2px solid var(--sky); color: #fff; }
.sewp-vi .sewp-btn-secondary:hover { border: 2px solid var(--sky); background: rgba(136, 206, 236, 0.15); color: #fff; }
.sewp-vi .hero a:focus-visible,
.sewp-vi .hero .sewp-btn:focus-visible { outline-color: var(--sky) !important; }
.sewp-vi .ch-logo { display: block; width: 220px; text-decoration: none; }
.sewp-vi .ch-logo img { display: block; width: 100%; height: auto; border-radius: 4px; }

/* Contract facts strip */
.sewp-vi .facts { background: var(--surface); border-bottom: 1px solid var(--rule); padding: 28px 24px; }
.sewp-vi .facts dl { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 28px; }
.sewp-vi .facts dt { font-size: 0.85rem; color: var(--muted); font-weight: 400; }
.sewp-vi .facts dd { margin: 0; font-weight: 700; }

.sewp-vi .jump { max-width: 1120px; margin: 0 auto; padding: 18px 24px 0; }
.sewp-vi .jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; font-family: var(--head); font-weight: 500; font-size: 0.95rem; }

/* The mockup's <main>; the whole page body is the <main> landmark here. */
.sewp-vi .sewp-vi-content { max-width: 1120px; margin: 0 auto; padding: 32px 24px 64px; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 48px; }
.sewp-vi .sewp-vi-content > div > section { padding: 0 0 2.25rem; margin: 0 0 2.25rem; border-bottom: 1px solid var(--rule); }
.sewp-vi .sewp-vi-content > div > section:last-child { border-bottom: none; margin-bottom: 0; }
.sewp-vi .sewp-vi-content > div > section#about { border-bottom: none; }

.sewp-vi .scope { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border-top: 3px solid var(--sky); }
.sewp-vi .scope li { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); }
.sewp-vi .scope strong { display: block; font-family: var(--head); font-weight: 600; color: var(--slate); }
.sewp-vi .scope span { color: var(--muted); font-size: 0.95rem; }

.sewp-vi .split { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.sewp-vi ul.plain { padding-left: 1.1rem; margin: 0; }
.sewp-vi ul.plain li { margin-bottom: 0.5rem; }

.sewp-vi ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 1rem 0 0; }
.sewp-vi ol.steps > li { counter-increment: step; position: relative; padding: 0 0 1.1rem 3.1rem; }
.sewp-vi ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--sky); color: var(--ink); font-family: var(--head); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sewp-vi ol.steps strong { font-family: var(--head); font-weight: 600; color: var(--slate); display: block; }

.sewp-vi .checklist { columns: 2; column-gap: 32px; padding-left: 1.1rem; margin: 0.5rem 0 0; }
.sewp-vi .checklist li { break-inside: avoid; margin-bottom: 0.4rem; }

.sewp-vi .policy { margin: 1em 0; }
.sewp-vi .policy dt { font-family: var(--head); font-weight: 600; color: var(--slate); margin-top: 1rem; }
.sewp-vi .policy dd { margin: 0.2rem 0 0; }

.sewp-vi .clause { margin: 1.25rem 0 0; padding: 20px 24px; background: var(--surface); border-left: 4px solid var(--slate); font-size: 0.95rem; }
.sewp-vi .clause h3 { margin-top: 0; }
.sewp-vi .clause ol { margin: 0 0 1rem; }

.sewp-vi aside { align-self: start; }
.sewp-vi aside .panel { background: var(--surface); border: 0; border-top: 4px solid var(--slate); padding: 22px 24px 8px; margin-bottom: 24px; }
.sewp-vi aside h2 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.sewp-vi aside h3 { font-size: 0.98rem; margin: 1.1rem 0 0.2rem; }
.sewp-vi aside p { margin: 0 0 0.9rem; font-size: 0.97rem; }
.sewp-vi aside .who { font-weight: 700; display: block; }
.sewp-vi aside ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.sewp-vi aside ul li { margin-bottom: 0.5rem; }

/* From 1200px the theme's desktop navbar (about 77px tall) overlays the top of the page,
   as it does over the home page slider. Clear it so the h1 is not crowded. */
@media (min-width: 1200px) {
  .sewp-vi .hero { padding-top: 136px; }
}

/* Long email addresses may break, so narrow screens (320px, or 400% zoom) do not clip text. */
.sewp-vi { overflow-wrap: break-word; }
.sewp-vi a[href^="mailto:"] { overflow-wrap: anywhere; white-space: normal; } /* style.css sets nowrap */

@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr: a 1fr track never shrinks below its longest word. */
  .sewp-vi .sewp-vi-content { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sewp-vi .hero-inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .sewp-vi .split { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sewp-vi .checklist { columns: 1; }
}