/* ==========================================================================
   DoD 8140 Workforce Readiness + four-pillar homepage components
   Added Oct 2026. Used by index.html and the dod-8140-*.html pages.
   Builds on the theme tokens in css/colors/scheme-vis.css.
   ========================================================================== */

/* --- Process flow (Contract -> Work role -> ... -> Evidence) ------------- */
.flow-steps{display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0;list-style:none;counter-reset:flow}
.flow-steps li{flex:1 1 140px;position:relative;padding:16px 16px 14px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  font-weight:600;line-height:1.35;counter-increment:flow}
.flow-steps li:before{content:counter(flow,decimal-leading-zero);display:block;font-size:12px;
  letter-spacing:.12em;color:var(--primary-color);margin-bottom:6px}
.flow-steps li small{display:block;font-weight:400;opacity:.75;margin-top:4px;font-size:13px;line-height:1.4}
.flow-steps.flow-light li{background:#fff;border-color:rgba(8,15,26,.10);color:var(--bg-dark-1)}
@media (min-width:992px){
  .flow-steps{flex-wrap:nowrap}
  .flow-steps li:not(:last-child):after{content:"\2192";position:absolute;right:-13px;top:50%;
    transform:translateY(-50%);font-size:16px;color:var(--primary-color);z-index:2}
}

/* --- Compare rows (CMMC method vs 8140 method) --------------------------- */
.method-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.method-row .m-label{min-width:70px;font-weight:700;color:var(--primary-color)}
.method-row .m-step{padding:4px 12px;border-radius:20px;background:rgba(255,255,255,.08);font-size:15px}
.method-row .m-arrow{opacity:.5}

/* --- Qualification status pills (scorecard tables) ----------------------- */
.q-pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:13px;font-weight:600;white-space:nowrap;line-height:1.6}
.q-met{background:#dcfce7;color:#166534}
.q-gap{background:#fee2e2;color:#991b1b}
.q-partial{background:#fef3c7;color:#92400e}
.q-na{background:#eef2f7;color:#475569}
.scorecard{font-size:15px;margin-bottom:8px}
.scorecard th{white-space:nowrap;font-size:14px}
.scorecard td,.scorecard th{vertical-align:middle;padding:10px 12px}
.scorecard .role-code{display:block;font-size:12px;opacity:.65}

/* --- Comparison table (8570 vs 8140) ------------------------------------- */
.compare-table{font-size:15px}
.compare-table th{background:var(--bg-dark-3);color:#fff;border-color:var(--bg-dark-3)}
.compare-table th:last-child{background:var(--primary-color);border-color:var(--primary-color)}
.compare-table td:first-child{font-weight:600;width:22%}
.compare-table td,.compare-table th{padding:12px 14px;vertical-align:top}
.compare-table td{border-color:rgba(8,15,26,.12)}

/* --- Cards ---------------------------------------------------------------- */
.comp-card{height:100%;padding:30px;border-radius:10px;background:#f6f7f9;border:1px solid rgba(8,15,26,.06);
  display:flex;flex-direction:column}
.comp-card .comp-num{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--primary-color);margin-bottom:8px}
.comp-card .ul-check{margin-bottom:16px}
.comp-card .comp-link{margin-top:auto;font-weight:600;color:var(--secondary-color)}
.comp-card .comp-link:hover{color:var(--primary-color)}

.pkg-card{height:100%;padding:34px 30px;border-radius:10px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column}
.pkg-card .pkg-for{opacity:.8;margin-bottom:18px}
.pkg-card .ul-check{flex:1 1 auto;margin-bottom:24px}
.pkg-card.pkg-featured{background:var(--primary-color);border-color:var(--primary-color)}
.pkg-featured,.pkg-featured p,.pkg-featured li,.pkg-featured h3{color:#fff}
.pkg-featured .pkg-for{opacity:.95}
.pkg-featured .ul-check li:before{color:#fff}
.pkg-card .pkg-tag{display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 10px;border-radius:20px;background:rgba(255,255,255,.18);margin-bottom:14px}

.pillar-card{height:100%;padding:30px 28px;border-radius:10px;background:#fff;border-top:4px solid var(--bg-dark-3);
  box-shadow:0 10px 30px rgba(8,15,26,.07);display:flex;flex-direction:column;position:relative}
.pillar-card.is-new{border-top-color:var(--primary-color)}
.pillar-card .pillar-verb{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-color);margin-bottom:6px}
.pillar-card .pillar-new{position:absolute;top:18px;right:18px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 9px;border-radius:20px;background:var(--primary-color);color:#fff}
.pillar-card p{margin-bottom:14px}
.pillar-tags{margin-bottom:16px}
.pillar-tags span{display:inline-block;font-size:13px;line-height:1.5;padding:3px 10px;border-radius:20px;
  background:rgba(var(--primary-color-rgb),.10);color:var(--secondary-color);margin:0 6px 6px 0}
.pillar-card .pillar-link{margin-top:auto;font-weight:600;color:var(--secondary-color)}
.pillar-card .pillar-link:hover{color:var(--primary-color)}

/* Outline button for light backgrounds (theme .btn-line assumes a dark section) */
a.btn-main.btn-line.btn-line-dark{border:solid 1px rgba(8,15,26,.35);color:var(--bg-dark-1)}
a.btn-main.btn-line.btn-line-dark:hover{border-color:var(--primary-color);color:#fff}

/* --- Callouts -------------------------------------------------------------- */
.note-box{border-left:4px solid var(--primary-color);background:#fff7ed;padding:20px 24px;border-radius:0 10px 10px 0}
.note-box h5{margin-bottom:6px}
.quote-box{border-left:4px solid var(--primary-color);padding:6px 0 6px 22px;font-size:19px;line-height:1.55;font-style:italic}
.faq-item{padding:22px 0;border-bottom:1px solid rgba(8,15,26,.08)}
.faq-item:first-child{padding-top:0}
.faq-item h4{font-size:19px;margin-bottom:8px}
.faq-item p:last-child{margin-bottom:0}
.fine-print{font-size:13px;line-height:1.6;opacity:.75}

/* Sidebar group label used on the 8140 sub-pages */
.side-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin:22px 0 10px 4px}

/* In-text links on the 8140 pages (theme leaves paragraph links uncolored) */
.faq-item p a,.link-prose a{color:var(--secondary-color);font-weight:600}
.faq-item p a:hover,.link-prose a:hover{color:var(--primary-color)}

/* FAQ blocks on service pages (Oct 2026 SEO pass): questions are h3, styled like the h4 version */
.faq-item h3{font-size:19px;margin-bottom:8px}
.faq-byline{font-size:13px;line-height:1.6;opacity:.75;margin-top:14px}
.status-box{border-left:4px solid var(--primary-color);background:#fff7ed;padding:18px 22px;border-radius:0 10px 10px 0}
.status-box p:last-child{margin-bottom:0}
.faq-byline a,.status-box a{color:var(--secondary-color);font-weight:600}
.faq-byline a:hover,.status-box a:hover{color:var(--primary-color)}

/* Career tracks hub (Oct 2026) */
.track-new{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 9px;border-radius:20px;background:var(--primary-color);color:#fff;margin-bottom:10px}
.compare-table td a{font-weight:600}
/* T9 primary sources */
.faq-sources{margin-top:22px}.faq-sources-title{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px}.faq-sources ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:13.5px;line-height:1.5}.faq-sources a{color:var(--secondary-color);font-weight:600}.faq-sources a:hover{color:var(--primary-color)}.faq-related{font-size:13.5px;line-height:1.6;margin:12px 0 0}

/* T12 (9 Oct 2026): longer manufacturer-first homepage headline */
h1.slider-title.vis-hero-h1{font-size:48px;letter-spacing:-1px;line-height:1.1em;margin-bottom:16px;text-wrap:balance}
.vis-hero-h1 + .slider-teaser{font-size:20px;line-height:1.5}
@media (min-width:992px){.vis-hero-tall{min-height:800px}}
@media (max-width:991px){h1.slider-title.vis-hero-h1{font-size:40px;letter-spacing:-.5px}}
@media (max-width:575px){h1.slider-title.vis-hero-h1{font-size:32px;letter-spacing:-.3px}.vis-hero-h1 + .slider-teaser{font-size:18px}}