/* First Church Publicity Intake — public form (M1, no-JS base).
 * Styled with the theme's --fcs-* design tokens; the fallbacks keep it
 * presentable if it's ever rendered outside the firstchurch theme. */

.fcpi {
  max-width: 43.5rem;
  margin-inline: auto;
}

.fcpi__heading {
  font-family: var(--font-display, "Raleway", system-ui, sans-serif);
  font-weight: 600;
  margin: 0 0 .5rem;
}

.fcpi__intro {
  color: var(--fcs-text-soft, #4c4750);
  margin: 0 0 1.5rem;
  line-height: 1.6;
}

/* --- Notices (success / error banners) --- */
.fcpi-note {
  border-radius: .6rem;
  padding: .9rem 1.1rem;
  margin: 0 0 1.5rem;
  line-height: 1.55;
}
.fcpi-note strong { display: block; margin-bottom: .15rem; }
.fcpi-note--ok {
  background: var(--fcs-surface-3, #f4f2ee);
  border: 1px solid var(--fcs-border, #e3e0db);
  color: var(--fcs-text, #232026);
}
.fcpi-note--error {
  background: #fcf0f6;
  border: 1px solid #ecdfe7;
  color: #5e2046;
}
.fcpi-note ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.fcpi-note li { margin: .15rem 0; }

/* --- Form fields --- */
.fcpi-form { display: flex; flex-direction: column; gap: 1.1rem; }

.fcpi-field { display: flex; flex-direction: column; }

.fcpi-field label {
  font-weight: 700;
  font-size: .9rem;
  color: var(--fcs-text-soft, #4c4750);
  margin-bottom: .35rem;
}

.fcpi-req { color: var(--fcs-maroon, #9c3a75); }
.fcpi-opt { font-weight: 400; color: var(--fcs-text-muted, #7f7984); }

.fcpi-field input[type="text"],
.fcpi-field input[type="email"],
.fcpi-field input[type="date"],
.fcpi-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--fcs-surface, #fdfcfa);
  border: 1px solid var(--fcs-border, #e3e0db);
  border-radius: .5rem;
  padding: .6rem .75rem;
  font: inherit;
  color: var(--fcs-text, #232026);
}
.fcpi-field textarea { resize: vertical; line-height: 1.55; min-height: 8rem; }

.fcpi-field input:focus-visible,
.fcpi-field textarea:focus-visible {
  outline: 2px solid var(--fcs-accent, #9c3a75);
  outline-offset: 2px;
}

.fcpi-field [aria-invalid="true"] {
  border-color: #c0397a;
  background: #fdf5f9;
}

.fcpi-hint {
  margin: .35rem 0 0;
  font-size: .82rem;
  color: var(--fcs-text-muted, #7f7984);
}

/* Two-up row that stacks on narrow screens. */
.fcpi-row { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 38rem) {
  .fcpi-row { grid-template-columns: 1fr 1fr; }
}

/* Honeypot: visually + AT hidden, but not display:none (some bots skip those). */
.fcpi-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Submit (mirrors the theme's .btn-primary footprint) --- */
.fcpi-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .75rem 1.5rem;
  border: 1px solid var(--fcs-maroon, #9c3a75);
  border-radius: .5rem;
  background: var(--fcs-maroon, #9c3a75);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(156, 58, 117, .18);
  transition: background-color .12s ease-out, transform .12s ease-out;
}
.fcpi-submit:hover,
.fcpi-submit:focus-visible { background: var(--fcs-maroon-dark, #7d2c5d); }
.fcpi-submit:active { transform: translateY(1px); }
.fcpi-submit:focus-visible { outline: 2px solid var(--fcs-accent, #9c3a75); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
 * Wizard island (M2/M3) — the Preact wizard that replaces the no-JS form.
 * ------------------------------------------------------------------------- */

.fcpi-island { animation: fcpi-fade 0.2s ease-out; }
@keyframes fcpi-fade { from { opacity: 0; } to { opacity: 1; } }

.fcpi-step { display: flex; flex-direction: column; gap: 1.1rem; }
.fcpi-step__heading {
  font-family: var(--font-display, "Raleway", system-ui, sans-serif);
  font-weight: 600;
  margin: 0;
  outline: none; /* programmatic focus target; not a visible outline */
}

/* aria-live region — only takes space when it carries a message. */
.fcpi-status:empty { display: none; }
.fcpi-status:not(:empty) {
  background: #fcf0f6;
  border: 1px solid #ecdfe7;
  color: #5e2046;
  border-radius: 0.6rem;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}

.fcpi-error { color: #b3296b; font-size: 0.85rem; margin: 0.35rem 0 0; }

/* Reviewing interstitial */
.fcpi-spinner {
  width: 2rem; height: 2rem;
  border: 3px solid var(--fcs-border, #e3e0db);
  border-top-color: var(--fcs-maroon, #9c3a75);
  border-radius: 50%;
  animation: fcpi-spin 0.8s linear infinite;
}
@keyframes fcpi-spin { to { transform: rotate(360deg); } }

/* Recap */
.fcpi-recap { margin: 0; border: 1px solid var(--fcs-border, #e3e0db); border-radius: 0.6rem; overflow: hidden; }
.fcpi-recap__row { display: grid; grid-template-columns: 7rem 1fr; gap: 0.5rem; padding: 0.6rem 0.9rem; }
.fcpi-recap__row + .fcpi-recap__row { border-top: 1px solid var(--fcs-border, #e3e0db); }
.fcpi-recap dt { font-weight: 700; color: var(--fcs-text-soft, #4c4750); margin: 0; }
.fcpi-recap dd { margin: 0; }

.fcpi-gaps { display: flex; flex-direction: column; gap: 1rem; }
.fcpi-gap__q { margin: 0 0 0.35rem; color: var(--fcs-text, #232026); }

/* Type confirmation — the AI's event/announcement read, correctable */
.fcpi-kind {
  border: 1px solid var(--fcs-border, #e3e0db);
  border-radius: 0.6rem;
  padding: 0.75rem 0.9rem;
  margin: 0;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.fcpi-kind legend { font-weight: 700; color: var(--fcs-text-soft, #4c4750); padding: 0 0.25rem; }
.fcpi-kind__option { display: flex; align-items: baseline; gap: 0.5rem; cursor: pointer; }
.fcpi-kind__option input { accent-color: var(--fcs-maroon, #9c3a75); }

/* Photo step — "upload your own" (no stock picker) */
.fcpi-upload { display: flex; flex-direction: column; gap: 0.35rem; }

@media (prefers-reduced-motion: reduce) {
  .fcpi-island { animation: none; }
  .fcpi-spinner { animation-duration: 1.6s; }
}

/* ---- hosting track + availability ---- */

.fcpi-notices { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.fcpi-notice {
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  line-height: 1.45;
  border: 1px solid transparent;
}
.fcpi-notice--ok   { background: #eef7ef; border-color: #cbe5cd; color: #275a2c; }
.fcpi-notice--info { background: #eef4fa; border-color: #cddff0; color: #234a6d; }
.fcpi-notice--warn { background: #fdf3e7; border-color: #f3d9b7; color: #7a4c14; }

.fcpi-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.fcpi-chips__label { font-size: 0.85rem; color: var(--fcs-text-muted, #7f7984); }
.fcpi-chip {
  border: 1px solid var(--fcs-maroon, #9c3a75);
  color: var(--fcs-maroon, #9c3a75);
  background: transparent;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.fcpi-chip:hover, .fcpi-chip:focus-visible { background: var(--fcs-maroon, #9c3a75); color: #fff; }

.fcpi-linklike {
  background: none; border: none; padding: 0;
  color: var(--fcs-maroon, #9c3a75);
  font-size: 0.9rem; text-decoration: underline; cursor: pointer;
  align-self: flex-start;
}

.fcpi-hosting__section { display: flex; flex-direction: column; gap: 0.9rem; padding-top: 0.6rem; border-top: 1px solid #eee7ee; }
.fcpi-hosting__title { margin: 0; font-size: 1rem; }

.fcpi-field select {
  border: 1px solid var(--fcs-border, #d9d2dc);
  border-radius: 6px;
  padding: 0.55rem 0.65rem;
  font: inherit;
  background: #fff;
}
.fcpi-field input[type="time"] {
  border: 1px solid var(--fcs-border, #d9d2dc);
  border-radius: 6px;
  padding: 0.55rem 0.65rem;
  font: inherit;
}

.fcpi-month { border: 1px solid var(--fcs-border, #d9d2dc); border-radius: 8px; padding: 0.7rem; }
.fcpi-month__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.fcpi-month__bar .fcpi-linklike { text-decoration: none; font-size: 1.2rem; padding: 0 0.5rem; }
.fcpi-month__label { font-weight: 600; }
.fcpi-month__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.fcpi-month__wd { text-align: center; font-size: 0.75rem; color: var(--fcs-text-muted, #7f7984); padding-bottom: 2px; }
.fcpi-day {
  position: relative;
  border: 1px solid transparent;
  background: #f4f7f4;
  border-radius: 6px;
  padding: 0.45rem 0;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: center;
}
.fcpi-day:hover, .fcpi-day:focus-visible { border-color: var(--fcs-maroon, #9c3a75); }
.fcpi-day--arena  { background: #fdf3e7; }
.fcpi-day--booked { background: #eef4fa; }
.fcpi-day--arena.fcpi-day--booked { background: linear-gradient(135deg, #fdf3e7 50%, #eef4fa 50%); }
.fcpi-day__dot { display: block; font-size: 0.55rem; line-height: 1; color: #7a4c14; }

/* ---- week strip (the picked date's 9-day neighborhood) ---- */

.fcpi-strip { margin-top: 0.5rem; }
.fcpi-strip__row { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; }
.fcpi-strip__day {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1px solid transparent;
  background: #f4f7f4;
  border-radius: 6px;
  padding: 0.3rem 0;
  font-size: 0.8rem;
  cursor: pointer;
}
.fcpi-strip__day:hover, .fcpi-strip__day:focus-visible { border-color: var(--fcs-maroon, #9c3a75); }
.fcpi-strip__day--arena  { background: #fdf3e7; }
.fcpi-strip__day--booked { background: #eef4fa; }
.fcpi-strip__day--arena.fcpi-strip__day--booked { background: linear-gradient(135deg, #fdf3e7 50%, #eef4fa 50%); }
.fcpi-strip__day--center { border-color: var(--fcs-maroon, #9c3a75); font-weight: 700; }
.fcpi-strip__wd { font-size: 0.65rem; color: var(--fcs-text-muted, #7f7984); }
.fcpi-strip__num { line-height: 1.1; }
.fcpi-strip__flag { font-size: 0.6rem; line-height: 1; min-height: 0.7em; color: #7a4c14; }