/**
 * NETAG Compliance Assessment — Frontend CSS
 *
 * Mobile-first. Uses CSS custom properties for brand colors.
 * Inherits font-family from the active WordPress theme.
 * No CDN dependencies.
 *
 * @package NETAG\ComplianceAssessment
 */

/* =====================================================================
   CSS custom properties
   ===================================================================== */
.nca-assessment-app {
  --nca-color-primary:    #F57C00;
  --nca-color-primary-dk: #E65100;
  --nca-color-primary-lt: #FFF3E0;
  --nca-color-text:       #1a202c;
  --nca-color-muted:      #64748b;
  --nca-color-border:     #e2e8f0;
  --nca-color-bg:         #F7FAFC;
  --nca-color-white:      #ffffff;
  --nca-color-error:      #c53030;
  --nca-color-error-bg:   #fff5f5;
  --nca-color-success:    #276749;
  --nca-color-success-bg: #f0fff4;
  --nca-radius:           0.5rem;
  --nca-shadow:           0 1px 4px rgba(0,0,0,0.08);
  --nca-transition:       0.2s ease;
  --nca-max-width:        720px;

  box-sizing: border-box;
  max-width: var(--nca-max-width);
  margin: 0 auto;
  padding: 1rem;
  color: var(--nca-color-text);
  line-height: 1.6;
}

.nca-assessment-app *,
.nca-assessment-app *::before,
.nca-assessment-app *::after {
  box-sizing: inherit;
}

/* =====================================================================
   Accessibility utilities
   ===================================================================== */
.nca-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.nca-hidden {
  display: none !important;
}

/* Required indicator */
.nca-required {
  color: var(--nca-color-error);
  margin-left: 0.125rem;
}

/* =====================================================================
   Loading state
   ===================================================================== */
.nca-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 0;
  color: var(--nca-color-muted);
}

.nca-loading__spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid var(--nca-color-border);
  border-top-color: var(--nca-color-primary);
  border-radius: 50%;
  animation: nca-spin 0.7s linear infinite;
}

@keyframes nca-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nca-loading__spinner {
    animation: none;
    border-top-color: var(--nca-color-primary);
  }
}

.nca-loading-text {
  color: var(--nca-color-muted);
  padding: 2rem 0;
}

/* =====================================================================
   Step indicator
   ===================================================================== */
.nca-steps {
  display: flex;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  counter-reset: steps;
  gap: 0;
}

.nca-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--nca-color-muted);
  position: relative;
}

.nca-step + .nca-step::before {
  content: '';
  position: absolute;
  top: 0.875rem;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--nca-color-border);
  z-index: 0;
}

.nca-step--done + .nca-step::before,
.nca-step--active + .nca-step--active::before {
  background: var(--nca-color-primary);
}

.nca-step__num {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid var(--nca-color-border);
  background: var(--nca-color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  position: relative;
  z-index: 1;
}

.nca-step--done  .nca-step__num { background: var(--nca-color-primary); border-color: var(--nca-color-primary); color: #fff; }
.nca-step--active .nca-step__num { border-color: var(--nca-color-primary); color: var(--nca-color-primary); font-weight: 800; }

.nca-step__label {
  text-align: center;
  line-height: 1.2;
}

.nca-step--active .nca-step__label { color: var(--nca-color-primary); font-weight: 600; }
.nca-step--done  .nca-step__label  { color: var(--nca-color-text); }

/* =====================================================================
   Step content area
   ===================================================================== */
.nca-step-heading {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--nca-color-text);
}

.nca-step-intro {
  color: var(--nca-color-muted);
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
}

/* =====================================================================
   Framework selection cards
   ===================================================================== */
.nca-fw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.nca-fw-card {
  background: var(--nca-color-white);
  border: 2px solid var(--nca-color-border);
  border-radius: var(--nca-radius);
  padding: 1.25rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color var(--nca-transition), box-shadow var(--nca-transition);
  box-shadow: var(--nca-shadow);
}

.nca-fw-card:hover,
.nca-fw-card:focus-within {
  border-color: var(--nca-color-primary);
  box-shadow: 0 4px 16px rgba(245,124,0,0.15);
}

.nca-fw-card__name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--nca-color-text);
}

.nca-fw-card__version {
  font-size: 0.75rem;
  color: var(--nca-color-muted);
  font-weight: 600;
  background: var(--nca-color-bg);
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  display: inline-block;
  width: fit-content;
}

.nca-fw-card__desc {
  font-size: 0.875rem;
  color: var(--nca-color-muted);
  margin: 0;
  flex: 1;
}

.nca-fw-card__meta {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nca-fw-card__meta li {
  font-size: 0.8125rem;
  color: var(--nca-color-muted);
  background: var(--nca-color-bg);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

/* =====================================================================
   Buttons
   ===================================================================== */
.nca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--nca-radius);
  font-size: 0.9375rem;
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--nca-transition), border-color var(--nca-transition), color var(--nca-transition), box-shadow var(--nca-transition);
  text-decoration: none;
  line-height: 1.4;
}

.nca-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(245,124,0,0.4);
}

.nca-btn--primary {
  background: var(--nca-color-primary);
  border-color: var(--nca-color-primary);
  color: #fff!important;
}

.nca-btn--primary:hover,
.nca-btn--primary:focus-visible {
  background: var(--nca-color-primary-dk);
  border-color: var(--nca-color-primary-dk);
}

.nca-btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.nca-btn--ghost {
  background: transparent;
  border-color: var(--nca-color-border);
  color: var(--nca-color-text);
}

.nca-btn--ghost:hover {
  border-color: var(--nca-color-primary);
  color: var(--nca-color-primary);
}

.nca-btn--lg {
  padding: 0.875rem 1.75rem;
  font-size: 1.0625rem;
}

/* =====================================================================
   Form elements
   ===================================================================== */
.nca-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.nca-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* display:flex above overrides the browser's [hidden] default.
   This rule restores correct hide behaviour for conditional groups. */
.nca-form-group[hidden] {
  display: none;
}

.nca-form-label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.nca-field-hint {
  font-size: 0.8125rem;
  color: var(--nca-color-text-muted, #6b7280);
  margin: 0.15rem 0 0.5rem;
  line-height: 1.4;
}

.nca-form-control {
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--nca-color-border);
  border-radius: var(--nca-radius);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color var(--nca-transition);
  background: var(--nca-color-white);
  width: 100%;
}

.nca-form-control:focus {
  outline: none;
  border-color: var(--nca-color-primary);
  box-shadow: 0 0 0 3px rgba(245,124,0,0.2);
}

.nca-form-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.nca-form-actions--center {
  justify-content: center;
}

.nca-form-error,
.nca-q-error,
.nca-field-error {
  color: var(--nca-color-error);
  font-size: 0.875rem;
  min-height: 1.25rem;
}

/* Radio / checkbox */
.nca-radio-group,
.nca-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nca-radio-label,
.nca-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9375rem;
  cursor: pointer;
}

.nca-radio-label input,
.nca-checkbox-label input {
  margin-top: 0.2rem;
  accent-color: var(--nca-color-primary);
  flex-shrink: 0;
}

/* =====================================================================
   Progress bar
   ===================================================================== */
.nca-progress-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.nca-progress-bar {
  flex: 1;
  height: 0.5rem;
  background: var(--nca-color-border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.nca-progress-bar::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--nca-color-primary);
  border-radius: 999px;
  width: var(--nca-progress, 0%);
  transition: width 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .nca-progress-bar::after { transition: none; }
}

/* We actually use the progressBar as the outer container and the fill as a child */
.nca-progress-pct {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--nca-color-primary);
  min-width: 3rem;
  text-align: right;
}

.nca-q-counter {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--nca-color-text-muted, #6b7280);
  white-space: nowrap;
  min-width: 6rem;
}

.nca-progress-wrap--bottom {
  margin-bottom: 0;
  margin-top: 1rem;
}

/* =====================================================================
   Domain label
   ===================================================================== */
.nca-domain-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--nca-color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
  min-height: 1.25rem;
}

/* =====================================================================
   Question area
   ===================================================================== */
.nca-question {
  background: var(--nca-color-white);
  border: 1px solid var(--nca-color-border);
  border-radius: var(--nca-radius);
  padding: 1.5rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--nca-shadow);
}

.nca-question__text {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 1rem;
  line-height: 1.5;
}

.nca-help-toggle {
  background: none;
  border: none;
  color: var(--nca-color-primary);
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0;
  margin-bottom: 0.75rem;
  text-decoration: underline;
  text-decoration-style: dotted;
}

.nca-help-toggle:focus-visible { outline: 2px solid var(--nca-color-primary); outline-offset: 2px; }

.nca-help-box {
  background: var(--nca-color-primary-lt);
  border-left: 3px solid var(--nca-color-primary);
  padding: 0.75rem 1rem;
  border-radius: 0 var(--nca-radius) var(--nca-radius) 0;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  color: var(--nca-color-text);
}

.nca-question__inputs {
  margin-bottom: 1rem;
}

/* =====================================================================
   Answer options
   ===================================================================== */
.nca-options {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.nca-option-label {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border: 2px solid var(--nca-color-border);
  border-radius: var(--nca-radius);
  cursor: pointer;
  transition: border-color var(--nca-transition), background var(--nca-transition);
  font-size: 0.9375rem;
}

.nca-option-label:hover {
  border-color: var(--nca-color-primary);
  background: var(--nca-color-primary-lt);
}

.nca-option-label input {
  accent-color: var(--nca-color-primary);
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.nca-option-label input:checked + * {
  font-weight: 600;
}

.nca-option-label:has(input:checked) {
  border-color: var(--nca-color-primary);
  background: var(--nca-color-primary-lt);
}

/* Yes/No large buttons */
.nca-options--yn {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.nca-option-label--btn {
  flex: 1;
  min-width: 120px;
  justify-content: center;
  padding: 1rem;
  font-size: 1rem;
}

/* =====================================================================
   Maturity scale
   ===================================================================== */
.nca-maturity-scale {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nca-maturity-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--nca-color-border);
  border-radius: var(--nca-radius);
  cursor: pointer;
  transition: border-color var(--nca-transition), background var(--nca-transition);
}

.nca-maturity-option:hover {
  border-color: var(--nca-color-primary);
  background: var(--nca-color-primary-lt);
}

.nca-maturity-option:has(input:checked) {
  border-color: var(--nca-color-primary);
  background: var(--nca-color-primary-lt);
}

.nca-maturity-option input {
  accent-color: var(--nca-color-primary);
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.nca-maturity-option__label {
  font-weight: 700;
  display: block;
  font-size: 0.9375rem;
}

.nca-maturity-option__desc {
  display: block;
  font-size: 0.8125rem;
  color: var(--nca-color-muted);
  margin-top: 0.1rem;
}

/* =====================================================================
   N/A section
   ===================================================================== */
.nca-na-wrap {
  border-top: 1px dashed var(--nca-color-border);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
}

.nca-na-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--nca-color-muted);
  cursor: pointer;
}

.nca-na-label input { accent-color: var(--nca-color-primary); }

.nca-na-reason {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* =====================================================================
   Question navigation actions
   ===================================================================== */
.nca-q-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* =====================================================================
   Summary — step 4
   ===================================================================== */
.nca-score-card {
  background: var(--nca-color-white);
  border: 2px solid var(--nca-color-primary);
  border-radius: var(--nca-radius);
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
  box-shadow: var(--nca-shadow);
}

.nca-score-card__label {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--nca-color-primary);
  margin-bottom: 0.5rem;
}

.nca-score-card__pct {
  font-size: 3rem;
  font-weight: 800;
  color: var(--nca-color-text);
  line-height: 1;
  margin-bottom: 1rem;
}

.nca-score-bar {
  height: 0.75rem;
  background: var(--nca-color-border);
  border-radius: 999px;
  overflow: hidden;
}

.nca-score-bar__fill {
  height: 100%;
  background: var(--nca-color-primary);
  border-radius: 999px;
  transition: width 1s ease;
}

@media (prefers-reduced-motion: reduce) {
  .nca-score-bar__fill { transition: none; }
}

.nca-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 480px) {
  .nca-stat-grid { grid-template-columns: repeat(4, 1fr); }
}

.nca-stat-card {
  background: var(--nca-color-white);
  border: 1px solid var(--nca-color-border);
  border-radius: var(--nca-radius);
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: var(--nca-shadow);
}

.nca-stat-card__value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--nca-color-primary);
}

.nca-stat-card__label {
  font-size: 0.75rem;
  color: var(--nca-color-muted);
  line-height: 1.3;
}

/* =====================================================================
   Disclaimer
   ===================================================================== */
.nca-disclaimer {
  background: var(--nca-color-bg);
  border: 1px solid var(--nca-color-border);
  border-radius: var(--nca-radius);
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  color: var(--nca-color-muted);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.nca-disclaimer strong {
  color: var(--nca-color-text);
}

/* =====================================================================
   Resume banner
   ===================================================================== */
.nca-resume-banner {
  background: var(--nca-color-white);
  border: 2px solid var(--nca-color-primary);
  border-radius: var(--nca-radius);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--nca-shadow);
}

.nca-resume-banner .nca-form-actions {
  justify-content: center;
}

/* =====================================================================
   Lead teaser (Phase 6 placeholder)
   ===================================================================== */
.nca-lead-teaser {
  background: var(--nca-color-primary-lt);
  border: 2px dashed var(--nca-color-primary);
  border-radius: var(--nca-radius);
  padding: 1.5rem;
  margin-top: 1.5rem;
  text-align: center;
}

.nca-lead-teaser h3 {
  color: var(--nca-color-primary);
  margin: 0 0 0.5rem;
}

/* =====================================================================
   Notices / errors
   ===================================================================== */
.nca-notice {
  background: var(--nca-color-bg);
  border: 1px solid var(--nca-color-border);
  border-radius: var(--nca-radius);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--nca-color-muted);
}

.nca-notice--warn {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
}

.nca-error {
  color: var(--nca-color-error);
  background: var(--nca-color-error-bg);
  border: 1px solid #fed7d7;
  border-radius: var(--nca-radius);
  padding: 0.75rem 1rem;
}

/* =====================================================================
   No-JS notice
   ===================================================================== */
.nca-no-js-notice {
  padding: 1rem;
  background: #fffbeb;
  border: 1px solid #f6e05e;
  border-radius: var(--nca-radius);
}

/* =====================================================================
   Report (Step 5) — full report layout
   ===================================================================== */
.nca-report-section {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--nca-color-white);
  border: 1px solid var(--nca-color-border);
  border-radius: var(--nca-radius);
  box-shadow: var(--nca-shadow);
}

.nca-report-section--critical {
  border-left: 4px solid #c53030;
}

.nca-report-section--services {
  background: var(--nca-color-primary-lt);
  border-color: var(--nca-color-primary);
}

.nca-report-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--nca-color-text);
}

/* Evidence bar */
.nca-score-bar__fill--evidence {
  background: #4299e1;
}

.nca-report-evidence-label {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--nca-color-muted);
}

/* Domain table */
.nca-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.nca-report-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--nca-color-border);
  color: var(--nca-color-muted);
  font-weight: 600;
}

.nca-report-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--nca-color-border);
  vertical-align: middle;
}

.nca-report-domain-pct {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--nca-color-primary-dk);
  min-width: 3rem;
  display: inline-block;
}

/* Gap items */
.nca-report-gap {
  padding: 0.875rem 1rem;
  border: 1px solid var(--nca-color-border);
  border-radius: var(--nca-radius);
  margin-bottom: 0.75rem;
  background: var(--nca-color-bg);
}

.nca-report-gap--critical {
  border-color: #fc8181;
  background: #fff5f5;
}

.nca-report-gap__domain {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nca-color-muted);
  margin: 0 0 0.25rem;
}

.nca-report-gap--critical .nca-report-gap__domain {
  color: #c53030;
}

.nca-report-gap__question {
  margin: 0 0 0.5rem;
  font-weight: 500;
}

.nca-report-gap__rec {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  color: var(--nca-color-text);
}

.nca-report-gap__service {
  margin: 0;
  font-size: 0.8rem;
  color: var(--nca-color-primary-dk);
  font-weight: 600;
}

/* Roadmap phases */
.nca-report-phase {
  border-left: 4px solid var(--nca-color-border);
  padding: 0.875rem 1rem 0.875rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 0 var(--nca-radius) var(--nca-radius) 0;
  background: var(--nca-color-bg);
}

.nca-report-phase--critical { border-left-color: #c53030; }
.nca-report-phase--high     { border-left-color: #f57c00; }
.nca-report-phase--medium   { border-left-color: #4299e1; }

.nca-report-phase__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.375rem;
}

.nca-report-phase__desc {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--nca-color-muted);
}

.nca-report-phase__actions {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
}

.nca-report-phase__actions li {
  margin-bottom: 0.25rem;
}

/* Services list */
.nca-report-service-list {
  margin: 0;
  padding-left: 1.5rem;
  font-size: 0.9rem;
}

.nca-report-service-list li {
  margin-bottom: 0.375rem;
}

/* Risk badge */
.nca-report-risk-badge {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.5rem;
  background: #e2e8f0;
  color: var(--nca-color-text);
}

.nca-report-risk-badge--critical { background: #fed7d7; color: #c53030; }
.nca-report-risk-badge--high     { background: #feebcb; color: #c05621; }
.nca-report-risk-badge--medium   { background: #ebf8ff; color: #2b6cb0; }
.nca-report-risk-badge--low      { background: #f0fff4; color: #276749; }
.nca-report-risk-badge--minimal  { background: #f0fff4; color: #276749; }

/* CTA section */
.nca-report-cta-section {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--nca-color-primary-lt);
  border: 1px solid var(--nca-color-primary);
  border-radius: var(--nca-radius);
}

.nca-btn--secondary {
  background: transparent;
  border: 2px solid var(--nca-color-primary);
  color: var(--nca-color-primary-dk);
}

.nca-btn--secondary:hover,
.nca-btn--secondary:focus {
  background: var(--nca-color-primary-lt);
  color: var(--nca-color-primary-dk);
}

/* =====================================================================
   Lead capture form (Step 5)
   ===================================================================== */
.nca-lead-intro {
  color: var(--nca-color-muted);
  margin: 0 0 1.5rem;
}

.nca-lead-form {
  margin-top: 1rem;
}

/* Two-column layout for paired fields */
.nca-form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}

@media (max-width: 540px) {
  .nca-form-row-2col {
    grid-template-columns: 1fr;
  }
}

/* Checkbox row */
.nca-form-row--check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.nca-form-check {
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  margin-top: 0.2rem;
  accent-color: var(--nca-color-primary);
  cursor: pointer;
}

.nca-form-check-label {
  font-size: 0.875rem;
  color: var(--nca-color-text);
  cursor: pointer;
  line-height: 1.5;
  flex: 1;
}

.nca-form-check-label a {
  color: var(--nca-color-primary-dk);
}

/* Field-level error messages */
.nca-field-error {
  display: block;
  font-size: 0.78rem;
  color: var(--nca-color-error);
  min-height: 1.1em;
  margin-top: 0.2rem;
}

/* Error summary (above form) */
.nca-error-summary:not(:empty) {
  padding: 0.75rem 1rem;
  background: var(--nca-color-error-bg);
  border: 1px solid var(--nca-color-error);
  border-radius: var(--nca-radius);
  margin-bottom: 1rem;
}

.nca-error-summary:empty {
  display: none;
}

/* Highlight invalid fields */
.nca-form-control[aria-invalid="true"] {
  border-color: var(--nca-color-error);
  background: var(--nca-color-error-bg);
}

.nca-form-check[aria-invalid="true"] {
  outline: 2px solid var(--nca-color-error);
  outline-offset: 2px;
}

/* =====================================================================
   Responsive adjustments
   ===================================================================== */
@media (max-width: 480px) {
  .nca-fw-grid {
    grid-template-columns: 1fr;
  }

  .nca-steps {
    gap: 0;
  }

  .nca-step__label {
    font-size: 0.625rem;
  }

  .nca-score-card__pct {
    font-size: 2.5rem;
  }
}

/* =====================================================================
   Report footer actions (PDF + new assessment)
   ===================================================================== */
.nca-report-footer-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding: 1.5rem;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* PDF button */
.nca-btn--pdf {
  background: #fff;
  border: 2px solid var(--nca-color-primary);
  color: var(--nca-color-primary-dk);
  font-weight: 700;
}

.nca-btn--pdf:hover,
.nca-btn--pdf:focus-visible {
  background: var(--nca-color-primary-lt);
  border-color: var(--nca-color-primary-dk);
  color: var(--nca-color-primary-dk);
}

.nca-btn-pdf-icon {
  font-style: normal;
  font-size: 1em;
  line-height: 1;
}

/* =====================================================================
   Print / PDF styles
   ===================================================================== */
@media print {
  /* --- Page setup --- */
  @page {
    margin: 18mm 15mm 18mm 15mm;
    size: A4 portrait;
  }

  /* --- Hide all page chrome regardless of WordPress DOM depth.
         visibility:hidden on body* lets .nca-assessment-app children
         override with visibility:visible even when ancestors are hidden.
         display:none would prevent the override — do not use it here. --- */
  body * {
    visibility: hidden !important;
  }

  .nca-assessment-app,
  .nca-assessment-app * {
    visibility: visible !important;
  }

  /* Position the app at the top of the print canvas so hidden
     ancestor containers don't shift it off-page. */
  .nca-assessment-app {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000 !important;
    font-size: 10pt;
    line-height: 1.5;
  }

  /* --- Hide elements inside the app that are not part of the report --- */
  .nca-steps,
  .nca-report-cta-section,
  .nca-report-footer-actions,
  .nca-btn,
  .nca-loading,
  .nca-loading-text {
    display: none !important;
  }

  /* --- Report heading --- */
  .nca-step-heading {
    font-size: 16pt;
    margin-bottom: 0.5rem;
    color: #000 !important;
    border-bottom: 2pt solid #F57C00;
    padding-bottom: 0.4rem;
  }

  /* --- Score card --- */
  .nca-score-card {
    border: 2pt solid #F57C00 !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .nca-score-card__label {
    font-size: 13pt;
    color: #F57C00 !important;
  }

  .nca-score-card__pct {
    font-size: 26pt;
    color: #000 !important;
  }

  /* --- Score bars: rendered as solid filled blocks --- */
  .nca-score-bar {
    height: 8pt;
    background: #e2e8f0 !important;
    border-radius: 4pt;
    overflow: hidden;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .nca-score-bar__fill {
    height: 100%;
    background: #F57C00 !important;
    border-radius: 4pt;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .nca-score-bar__fill--evidence {
    background: #4299e1 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* --- Risk badge --- */
  .nca-report-risk-badge {
    border: 1pt solid #ccc !important;
    background: #f4f4f4 !important;
    color: #000 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .nca-report-risk-badge--critical { background: #fed7d7 !important; color: #c53030 !important; border-color: #fc8181 !important; }
  .nca-report-risk-badge--high     { background: #feebcb !important; color: #c05621 !important; border-color: #f6ad55 !important; }
  .nca-report-risk-badge--medium   { background: #ebf8ff !important; color: #2b6cb0 !important; border-color: #90cdf4 !important; }
  .nca-report-risk-badge--low,
  .nca-report-risk-badge--minimal  { background: #f0fff4 !important; color: #276749 !important; border-color: #9ae6b4 !important; }

  /* --- Report sections --- */
  .nca-report-section {
    background: #fff !important;
    border: 1pt solid #ccc !important;
    box-shadow: none !important;
    padding: 0.75rem 1rem !important;
    margin: 1rem 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .nca-report-section--critical {
    border-left: 4pt solid #c53030 !important;
    background: #fff5f5 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .nca-report-section--services {
    background: #FFF3E0 !important;
    border-color: #F57C00 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .nca-report-section-title {
    font-size: 12pt;
    font-weight: 700;
    color: #000 !important;
  }

  /* --- Domain table --- */
  .nca-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5pt;
  }

  .nca-report-table th,
  .nca-report-table td {
    border-bottom: 1pt solid #ccc !important;
    padding: 0.35rem 0.5rem !important;
  }

  .nca-report-domain-pct {
    font-weight: 700;
    color: #E65100 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* --- Gaps --- */
  .nca-report-gap {
    border: 1pt solid #ccc !important;
    background: #fafafa !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .nca-report-gap--critical {
    border-color: #fc8181 !important;
    background: #fff5f5 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* --- Roadmap phases --- */
  .nca-report-phase {
    background: #fafafa !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .nca-report-phase--critical { border-left-color: #c53030 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .nca-report-phase--high     { border-left-color: #F57C00 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .nca-report-phase--medium   { border-left-color: #4299e1 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  /* --- Disclaimer --- */
  .nca-disclaimer {
    background: #f7fafc !important;
    border: 1pt solid #ccc !important;
    box-shadow: none !important;
    font-size: 8pt;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* --- Evidence section --- */
  .nca-report-evidence-label {
    font-size: 8.5pt;
    color: #444 !important;
  }

  /* Linked audit banner: hide in PDF (not actionable offline) */
  .nca-report-section--audit-banner {
    display: none !important;
  }

  /* Support text below domain name */
  .nca-report-domain-support {
    font-size: 8pt;
    color: #444 !important;
    margin: 0.2rem 0 0;
  }
}