/* ============================================================
   NEXUS MENTOR APPLICATION (apply.html)
   Extends styles.css (Nexus design system: vermillion + navy).
   Only the pieces not already covered by styles.css live here.
   ============================================================ */

/* Role picker: stacked selectable cards */
.role-picker {
  display: grid;
  gap: 12px;
  margin-bottom: 8px;
}
.role-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--bg-light);
  cursor: pointer;
  font-size: 15px;
  line-height: 1.55;
  transition: border-color 0.15s, background 0.15s;
}
.role-option:hover { border-color: var(--vermillion); }
.role-option input { margin-top: 3px; flex-shrink: 0; }
.role-option input:checked ~ span { color: var(--dark); }
.role-option:has(input:checked) {
  border-color: var(--vermillion);
  background: var(--vermillion-pale);
}
.role-option strong { display: block; color: var(--dark); margin-bottom: 2px; }

/* Revealed per-role question blocks */
.role-section {
  border: 1px solid var(--border);
  border-left: 3px solid var(--vermillion);
  border-radius: var(--radius);
  padding: 8px 24px 20px;
  margin: 22px 0;
  background: var(--white);
}
.role-section[hidden] { display: none; }
.role-section-head {
  font-family: 'Source Serif 4', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--dark);
  margin: 18px 0 8px;
}

/* Keep side-by-side inputs aligned even when one label wraps to two lines:
   labels stay top-anchored, inputs drop to the bottom of the grid cell. */
.role-section .form-row .form-group input,
.role-section .form-row .form-group select {
  margin-top: auto;
}

/* Yes / No radio pair */
.yesno {
  display: flex;
  gap: 28px;
  margin-top: 8px;
}

/* Two-column checkbox grid inside role sections
   (styles.css already defines .checkbox-grid; this only tightens it
   for the denser application context if needed) */
.role-section .checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}

@media (max-width: 640px) {
  .role-section .checkbox-grid { grid-template-columns: 1fr; }
  .yesno { gap: 20px; }
}