/* ============================================================
   FIRST-Network brand theme for XiotForms.
   Matched 1:1 to the original site mockup (founding-member.html).
   Fonts loaded via wp_enqueue_style in functions.php (NOT @import).
   Selectors are `html`-prefixed (and card width uses !important) so they
   out-rank XiotForms' defaults + the per-form inline width.

   DEFAULT color = FIRST-CONNECT green.
   PER-PROGRAM: add ONE class to the form's container block in GreenShift
   (Advanced → Additional CSS class):
        fn-support  → purple   fn-action → gold   fn-missions → maroon
   ============================================================ */

/* ---- DEFAULT tokens (green) — values taken from the mockup :root ---- */
html .xiotforms-wrap,
html .xiotforms{
  --xf-primary:#3F5E54;          /* --accent */
  --xf-primary-600:#365047;
  --xf-primary-700:#2f4940;      /* --accent-deep */
  --xf-primary-50:#eef2f0;
  --xf-primary-100:#dfe7e3;
  --xf-ink:#16253A;              /* --navy */
  --xf-ink-2:#5b6472;
  --xf-line:rgba(22,37,58,.16);
  --xf-line-2:rgba(22,37,58,.30);
  --xf-bg-soft:#FBF8F1;          /* --ivory-warm */
  --xf-radius:13px;
  --xf-radius-lg:18px;
  --xf-accent-ring:0 0 0 3px rgba(63,94,84,.16);
  --xf-success:#3F5E54;
  --xf-font:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ---- PER-PROGRAM color ---- */
html .fn-support .xiotforms-wrap, html .fn-support .xiotforms{   /* purple */
  --xf-primary:#5C4A6B; --xf-primary-600:#4f3f5c; --xf-primary-700:#41334c;
  --xf-primary-50:#efebf2; --xf-primary-100:#ddd5e3;
  --xf-accent-ring:0 0 0 3px rgba(92,74,107,.18);
}
html .fn-action .xiotforms-wrap, html .fn-action .xiotforms{     /* gold */
  --xf-primary:#D2A64A; --xf-primary-600:#bb9038; --xf-primary-700:#9e7a2f;
  --xf-primary-50:#faf3e2; --xf-primary-100:#f2e4c4;
  --xf-accent-ring:0 0 0 3px rgba(210,166,74,.22);
}
html .fn-missions .xiotforms-wrap, html .fn-missions .xiotforms{ /* maroon */
  --xf-primary:#6E3540; --xf-primary-600:#5e2c36; --xf-primary-700:#4d242d;
  --xf-primary-50:#f3e9eb; --xf-primary-100:#e6d2d6;
  --xf-accent-ring:0 0 0 3px rgba(110,53,64,.18);
}

/* ---- CARD (.formcard) — width 880, radius 32, mockup shadow ---- */
html .xiotforms-wrap{
  width:auto;
  max-width:880px !important;     /* cap at 880 (mockup), but never wider than its container */
  margin:2em auto !important;
  box-sizing:border-box;          /* padding stays inside the width → no container overflow */
  background:#fff;
  border-radius:32px;             /* --r-lg */
  padding:46px 48px;
  box-shadow:0 18px 44px -22px rgba(16,29,46,.30);   /* --shadow-card */
  border:none;
}
@media (max-width:560px){
  html .xiotforms-wrap{ padding:32px 22px; border-radius:22px; }
}

/* ---- form title (Playfair navy) ---- */
html .xiotforms-wrap .xiotforms-title{
  font-family:'Playfair Display', Georgia, serif;
  color:#16253A; font-weight:700;
}

/* ---- SECTION BREAK → .fs-title + short accent bar (.fs-rule) ---- */
html .xiotforms .xiot-row-section{ margin-top:16px; }
html .xiotforms .xiot-section-title{
  font-family:'Playfair Display', Georgia, serif;
  font-size:1.35rem; color:#16253A; font-weight:700;
  margin:0 0 6px; padding:0; border:none;
}
html .xiotforms .xiot-section-title::after{
  content:''; display:block;
  width:46px; height:2px; border-radius:2px;
  background:var(--xf-primary);          /* short accent bar, follows program */
  margin:0 0 14px;
}
html .xiotforms .xiot-section-desc{ color:#5b6472; font-size:.9rem; margin:0 0 18px; }

/* ---- labels (.field label) ---- */
html .xiotforms .xiot-label{
  color:#16253A; font-weight:700; font-size:.86rem;
  margin-bottom:7px; letter-spacing:.2px;
}
html .xiotforms .xiot-req{ color:#bb4d2b; }

/* ---- fields (.field input/select/textarea) ---- */
html .xiotforms{ font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; }
html .xiotforms .xiot-input{
  padding:13px 15px;
  border:1.5px solid rgba(22,37,58,.16);
  border-radius:13px;
  font-size:.95rem;
  background:#FBF8F1;
  color:#2D3748;
}
html .xiotforms textarea.xiot-input{ min-height:84px; }

/* ---- checkbox / radio chips (.optgrid / .opt) ---- */
html .xiotforms .xiot-choices{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
html .xiotforms .xiot-choice{
  display:flex; align-items:center; gap:11px; margin:0;
  background:#FBF8F1;
  border:1.5px solid rgba(22,37,58,.13);
  border-radius:13px;
  padding:12px 14px;
  font-size:.9rem; font-weight:600; color:#16253A;
}
html .xiotforms .xiot-choice input{ width:18px; height:18px; flex-shrink:0; accent-color:var(--xf-primary); }
html .xiotforms .xiot-choice:hover{ border-color:var(--xf-primary); box-shadow:none; }
html .xiotforms .xiot-choice:has(input:checked){
  border-color:var(--xf-primary);
  background:var(--xf-primary-50);
  box-shadow:0 0 0 1px var(--xf-primary);
}
@media (max-width:980px){ html .xiotforms .xiot-choices{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ html .xiotforms .xiot-choices{ grid-template-columns:1fr; } }

/* ---- consent (.consent) ---- */
html .xiotforms .xiot-consent{
  display:flex; align-items:flex-start; gap:13px;
  background:#FBF8F1; border:1.5px solid rgba(22,37,58,.13);
  border-radius:15px; padding:18px 20px;
  font-size:.9rem; color:#16253A; font-weight:500;
}
html .xiotforms .xiot-consent input{ width:20px; height:20px; margin-top:2px; flex-shrink:0; accent-color:var(--xf-primary); }

/* ---- submit button (.btn.btn-accent, centered) ---- */
html .xiotforms .xiot-btn{
  background:var(--xf-primary); color:#F5F2EB;
  border-radius:100px; padding:17px 40px;
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:1.02rem; font-weight:700; letter-spacing:.2px;
  box-shadow:0 14px 30px -12px rgba(16,29,46,.5);
}
html .xiotforms .xiot-btn:hover{ transform:translateY(-3px); filter:brightness(1.08); }
html .xiotforms .xiot-submit{ display:block; width:-moz-fit-content; width:fit-content; margin:10px auto 0; }

/* gold is light → use dark navy text for contrast (matches the site's .btn-gold) */
html .fn-action .xiotforms .xiot-btn{ color:#101D2E; }