/* ═══════════════════════════════════════════════════════════════════════
   Artists Camp — Fluent Forms skin.

   The Contact and Starter Kit forms are now Fluent Forms (editable in
   wp-admin). This file re-dresses Fluent Forms' default output so it is
   visually identical to the original React design:
     artists-camp-3.0/src/pages/Contact.tsx
     artists-camp-3.0/src/pages/StarterKit.tsx
   Every value below is taken verbatim from those files (and matches the
   .ac-form-* rules the hand-rolled markup used in pages/_plugin.css).

   Scope: everything is under .ac-form-card, the class handed to the
   shortcode via css_classes=, so other Fluent Forms on the site keep
   their own styling.

   The shortcodes pass css_classes="ac-form-card" (plus --kit), so the card
   chrome is the same vocabulary the hand-rolled markup used.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Card chrome ─────────────────────────────────────────────────────── */

/* Declared here as well as in pages/_plugin.css (identical values) so this
   file stands on its own once the legacy shortcodes are retired. */

.ac-form-card {
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  padding: clamp(22px, 3.5vw, 32px);
  display: flex;
  flex-direction: column;
}

.ac-form-card--kit {
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.06);
}

/* ── Form shell ──────────────────────────────────────────────────────── */

.ac-form-card > form.frm-fluent-form {
  margin: 0;
  display: block;
}

/* The fieldset Fluent Forms wraps every field in. Flex so the Starter
   Kit's fine print can sit after the button (CSS order) while staying
   next to the input in the DOM. Hidden inputs are display:none per the
   UA sheet and the <legend> is not a flex item, so only real field
   groups produce gaps. */
.ac-form-card > form.frm-fluent-form > fieldset {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-inline-size: 0;
}

.ac-form-card--kit > form.frm-fluent-form > fieldset {
  gap: 16px;
}

/* Belt and braces: keep the screen-reader legend out of flow so it can
   never contribute a gap. */
.ac-form-card legend.ff_screen_reader_title {
  position: absolute;
}

.ac-form-card .ff-el-group {
  margin-bottom: 0;
}

/* Fluent Forms' float clearfix would show up as stray boxes here. */
.ac-form-card .ff-el-group::before,
.ac-form-card .ff-el-group::after {
  content: none;
}

/* ── Labels ──────────────────────────────────────────────────────────── */

.ac-form-card .ff-el-input--label {
  display: block;
  margin-bottom: 6px;
}

/* Block label: no inline-block line-box slop, so the 6px gap is exact. */
.ac-form-card .ff-el-input--label label {
  display: block;
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  color: #111827;
  margin-bottom: 0;
}

/* The topic block's label sits 10px above the pills in the design. */
.ac-form-card .ac-ff-topics > .ff-el-input--label {
  margin-bottom: 10px;
}

/* The design shows no required asterisks. */
.ac-form-card .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.ac-form-card .ff-el-input--label.ff-el-is-required.asterisk-left label::before {
  content: none;
  margin: 0;
}

/* Starter Kit's single label is a notch larger and sits on the card's own
   16px rhythm rather than the tight label/input pairing. */
.ac-form-card .ac-ff-kit-email .ff-el-input--label label {
  font-size: 15px;
}

.ac-form-card .ac-ff-kit-email > .ff-el-input--label {
  margin-bottom: 16px;
}

/* ── Inputs ──────────────────────────────────────────────────────────── */

.ac-form-card .ff-el-form-control {
  padding: 13px 15px;
  border: 1.5px solid #cdd4df;
  border-radius: 8px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 15px;
  line-height: normal;
  color: #111827;
  background: #ffffff;
  background-clip: border-box;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.ac-form-card .ff-el-form-control:focus {
  border-color: #00789e;
  background-color: #ffffff;
  color: #111827;
}

.ac-form-card textarea.ff-el-form-control {
  resize: vertical;
  line-height: normal;
  min-height: 0;
}

.ac-form-card .ff-el-form-control::placeholder {
  color: #8b97aa;
  opacity: 1;
}

/* The Starter Kit input is the page's primary control — larger. */
.ac-form-card .ac-ff-kit-email .ff-el-form-control {
  padding: 14px 16px;
  font-size: 16px;
}

/* ── Name / Email row ────────────────────────────────────────────────── */

.ac-form-card .ac-ff-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.ac-form-card .ac-ff-row .ff-t-cell {
  display: block;
  width: auto;
  flex-basis: auto !important;
  padding: 0;
}

/* ── Topic pills (radio group) ───────────────────────────────────────── */

.ac-form-card .ac-ff-topics .ff-el-input--content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 0;
}

.ac-form-card .ac-ff-topics .ff-el-form-check {
  margin: 0;
  width: auto;
}

/* Specific enough to beat .ff-default .ff-el-form-check label.ff-el-form-check-label. */
.ac-form-card .ac-ff-topics .ff-el-form-check label.ff-el-form-check-label {
  display: inline-block;
  position: relative;
  margin: 0;
  cursor: pointer;
  line-height: 0;
}

/* Hide the native radio without removing it from the a11y tree. */
.ac-form-card .ac-ff-topics .ff-el-form-check-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.ac-form-card .ac-ff-topics .ff-el-form-check-label > span {
  display: inline-flex;
  align-items: center;
  font-family: "Inter", Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid #cdd4df;
  background: #ffffff;
  color: #243047;
  cursor: pointer;
  min-height: 44px;
  margin-left: 0;
  box-sizing: border-box;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.ac-form-card .ac-ff-topics .ff-el-form-check-input:checked + span {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

.ac-form-card .ac-ff-topics .ff-el-form-check-input:focus-visible + span {
  outline: 3px solid #00789e;
  outline-offset: 2px;
}

/* Fluent Forms turns the whole label red on error; the pills keep their
   own colours and the message below carries the error. */
.ac-form-card .ff-el-is-error .ff-el-form-check-label,
.ac-form-card .ff-el-is-error .ff-el-form-check-label a {
  color: #243047;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.ac-form-card .ff_submit_btn_wrapper {
  display: flex;
}

.ac-form-card .ff-btn-submit {
  border: none;
  border-radius: 8px;
  padding: 15px 26px;
  font-family: "Inter", Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  color: #ffffff;
  cursor: pointer;
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  white-space: normal;
}

.ac-form-card .ac-ff-submit--cobalt .ff-btn-submit {
  background: #2447c6;
}

.ac-form-card .ac-ff-submit--cobalt .ff-btn-submit:hover,
.ac-form-card .ac-ff-submit--cobalt .ff-btn-submit:focus {
  background: #111827;
  color: #ffffff;
  opacity: 1;
}

/* The Starter Kit CTA fills the card, as in StarterKit.tsx (a stretched
   flex child), unlike Contact's left-aligned Send. */
.ac-form-card .ac-ff-submit--green .ff-btn-submit {
  background: #19a974;
  padding: 15px 24px;
  width: 100%;
  align-self: stretch;
}

.ac-form-card .ac-ff-submit--green .ff-btn-submit:hover,
.ac-form-card .ac-ff-submit--green .ff-btn-submit:focus {
  background: #0b7d58;
  color: #ffffff;
  opacity: 1;
}

/* ── Starter Kit fine print (rendered before the button, shown after) ── */

.ac-form-card .ac-ff-fine {
  order: 1;
}

.ac-form-card .ac-ff-fine p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8b97aa;
}

/* ── Validation messages ─────────────────────────────────────────────── */

.ac-form-card .text-danger,
.ac-form-card .ff-el-is-error .text-danger {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: #d7374f;
  margin-top: 6px;
}

.ac-form-card .ff-el-is-error .ff-el-form-control {
  border-color: #d7374f;
}

.ac-form-card + .ff-errors-in-stack .error,
.ac-form-card .ff-errors-in-stack .error {
  font-size: 13.5px;
  font-weight: 500;
  color: #d7374f;
}

/* ── Success card ────────────────────────────────────────────────────── */

/* Fluent Forms injects .ff-message-success as a sibling of the form,
   inside the card, once the form slides away. Strip its default chrome —
   the card around it is the chrome. */
.ac-form-card .ff-message-success {
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  background: none;
}

.ac-form-card .ff-message-success:focus {
  outline: none;
}

.ac-ff-done {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}

.ac-ff-done__check {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ddf7ec;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: #0b7d58;
  font-weight: 700;
}

.ac-ff-done__title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: #111827;
}

.ac-ff-done__sub {
  font-size: 15px;
  line-height: 1.5;
  color: #516078;
}

/* ── Progress / loading affordance ───────────────────────────────────── */

.ac-form-card .ff-btn.ff-working {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .ac-form-card .ff-el-form-control,
  .ac-form-card .ac-ff-topics .ff-el-form-check-label > span {
    transition: none;
  }
}