/* ═══════════════════════════════════════════════════════════════════════
   Connect Card — builds on the form styles in css/prayer.css (.pr-*),
   in brand gold instead of prayer purple.
   ═══════════════════════════════════════════════════════════════════════ */

main[data-connect] { --pr-accent: var(--gold); }

/* Address / phone groups */
.cn-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.cn-group legend { padding: 0; margin-bottom: 0.45rem; font-weight: 700; font-size: 0.95rem; }
.cn-opt { margin-left: 0.4rem; font-weight: 600; font-size: 0.78rem; color: var(--fg-faint); }
.cn-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
}
.cn-type   { grid-column: span 2; }
.cn-street { grid-column: span 4; }
.cn-apt    { grid-column: span 6; }
.cn-city   { grid-column: span 3; }
.cn-state  { grid-column: span 1; }
.cn-zip    { grid-column: span 2; }
.cn-grid--phone { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.cn-grid--phone .cn-type { grid-column: auto; }

/* Selects match the text boxes */
.pr-field select {
  width: 100%;
  padding: 0.8rem 2.5rem 0.8rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7a294' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 0.9rem center / 16px no-repeat,
    rgba(255, 255, 255, 0.04);
  color: var(--fg);
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.pr-field select:focus { outline: none; border-color: var(--pr-accent); }
.pr-field select option { color: #111; }

.cn-next { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cn-link { color: var(--gold); font-weight: 700; text-decoration: none; white-space: nowrap; }
.cn-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 520px) {
  .cn-type, .cn-street, .cn-apt { grid-column: span 6; }
  .cn-city { grid-column: span 6; }
  .cn-state { grid-column: span 3; }
  .cn-zip { grid-column: span 3; }
  .cn-grid--phone { grid-template-columns: minmax(0, 1fr); }
}