/* ===== NATG box color update (October 2026) =====
   Adds a soft tinted background behind box sections and a colored top bar,
   gentle shadow and hover lift to the boxes. Load AFTER natg-theme.css. */

/* 1. Color BEHIND the boxes: tinted sections (the light "alt" bands) */
.band.alt {
  background: linear-gradient(180deg, #EEF3FA 0%, #E4ECF6 100%);
  border-top: 28px solid #FFFFFF;      /* white space above the tinted section; change 28px to make it thicker or thinner */
  border-bottom: 1px solid #D3DEEC;
}

/* 2. Color INSIDE the boxes: white card, navy-to-blue top bar, soft shadow */
.state-card, .step, .aud, .program, .cert, .benefit-box, .contact-card, .board div, .start-path {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #D3DEEC;
  border-top: 4px solid #3B5694;
  box-shadow: 0 6px 18px rgba(23, 38, 68, 0.08);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.state-card:hover, .step:hover, .aud:hover, .program:hover, .cert:hover, .contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(23, 38, 68, 0.14);
  border-top-color: #B9852A;
}

/* 3. Box titles in brand navy */
.state-card h3, .step h3, .aud h3, .program h3, .cert h3 { color: #172644; }

/* 4. Mix the bar colors: state cards rotate blue, olive, gold; program boxes alternate blue, olive */
.state-grid .state-card:nth-child(3n+2) { border-top-color: #7A9A3A; }
.state-grid .state-card:nth-child(3n+3) { border-top-color: #B9852A; }
.programs .program:nth-child(even) { border-top-color: #7A9A3A; }

/* Respect users who turn off motion */
@media (prefers-reduced-motion: reduce) {
  .state-card, .step, .aud, .program, .cert, .contact-card { transition: none; }
  .state-card:hover, .step:hover, .aud:hover, .program:hover, .cert:hover, .contact-card:hover { transform: none; }
}

/* Dark mode: keep the tinted band dark */
@media (prefers-color-scheme: dark) {
  .band.alt { background: linear-gradient(180deg, #13213A 0%, #0F1B30 100%); border-top-color: #0B1424; border-bottom-color: #22324F; }
  .state-card, .step, .aud, .program, .cert, .benefit-box, .contact-card, .board div, .start-path { background: #172644; border-color: #22324F; }
  .state-card h3, .step h3, .aud h3, .program h3, .cert h3 { color: #FFFFFF; }
}