/* ============================================================================
   Revival Runway — Forms styles  (revival-forms)
   ----------------------------------------------------------------------------
   Tiny, mobile-first, brand-locked. REUSES the rr-core tokens (Crete Round +
   Roboto Condensed, black/white + warm paper, cyan #0ca0c9) by re-declaring
   them here as a fallback set, so forms still look right even on a page with
   no .rr-grid-root. When rr-core IS present its stylesheet loads first and the
   look matches exactly. No new colours invented — same palette as rr-grid.css.

   Artisan (green) sub-brand: wrap the form/page in .rr-scope-artisan to flip
   the accent, mirroring rr-core. Never apply green globally.
   ============================================================================ */

.rr-form{
  --rr-font-display:'Crete Round',Georgia,serif;
  --rr-font-body:'Roboto Condensed',Helvetica,Arial,sans-serif;
  --rr-ink:#000;
  --rr-paper:#fff;
  --rr-paper-warm:#fafaf7;
  --rr-text:#444;
  --rr-muted:#999;
  --rr-border:#d8d8d8;
  --rr-hairline:#e5e5e5;
  --rr-accent:#0ca0c9;
  --rr-accent-ink:#fff;
  --rr-error:#b32d2e;

  font-family:var(--rr-font-body);
  font-size:15px;line-height:1.6;color:var(--rr-text);
  max-width:560px;margin:0 auto;
}
.rr-scope-artisan .rr-form,.rr-form.rr-scope-artisan{ --rr-accent:#5a9a3d; }

.rr-form *,.rr-form *::before,.rr-form *::after{box-sizing:border-box}

.rr-form-title{
  font-family:var(--rr-font-display);font-weight:400;color:var(--rr-ink);
  font-size:26px;line-height:1.2;margin:0 0 20px;
}

/* rows ------------------------------------------------------------------- */
.rr-form-row{margin-bottom:18px}
.rr-form-row[hidden]{display:none} /* conditional rows hidden by forms.js (change #6) */
.rr-form-label{
  display:block;font-weight:700;font-size:13px;letter-spacing:.04em;
  color:var(--rr-ink);margin-bottom:6px;
}
.rr-form-req{color:var(--rr-accent)}

.rr-form input[type=text],
.rr-form input[type=email],
.rr-form input[type=url],
.rr-form input[type=tel],
.rr-form textarea,
.rr-form select{
  width:100%;border:1px solid var(--rr-border);background:var(--rr-paper);
  padding:12px 14px;font-family:inherit;font-size:16px; /* 16px = no iOS zoom */
  color:var(--rr-ink);line-height:1.4;
}
.rr-form textarea{resize:vertical;min-height:120px}
.rr-form input:focus,
.rr-form textarea:focus,
.rr-form select:focus{outline:none;border-color:var(--rr-accent);box-shadow:0 0 0 2px rgba(12,160,201,.15)}

/* checkbox row ----------------------------------------------------------- */
.rr-form-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-weight:400}
.rr-form-check input[type=checkbox]{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--rr-accent)}
.rr-form-check span{flex:1;color:var(--rr-text)}

/* honeypot — visually hidden, off-screen, but present for bots ----------- */
.rr-form-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* submit ----------------------------------------------------------------- */
.rr-form-actions{margin-top:22px}
.rr-form-submit{
  font-family:var(--rr-font-body);font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  color:var(--rr-accent-ink);background:var(--rr-accent);
  border:1px solid var(--rr-accent);padding:14px 32px;min-height:48px;
  transition:opacity .15s;
}
.rr-form-submit:hover{opacity:.85}
.rr-form-submit:focus-visible{outline:2px solid var(--rr-ink);outline-offset:2px}

/* error summary + per-field errors --------------------------------------- */
.rr-form-error-summary{
  border:1px solid var(--rr-error);background:#fdf3f3;
  padding:14px 16px;margin-bottom:22px;color:var(--rr-error);
}
.rr-form-error-summary p{margin:0 0 6px}
.rr-form-error-summary ul{margin:0;padding-left:18px}
.rr-form-error-summary li{margin:2px 0}
.rr-form-row-error input,
.rr-form-row-error textarea,
.rr-form-row-error select{border-color:var(--rr-error)}
.rr-form-field-error{display:block;margin-top:6px;font-size:13px;color:var(--rr-error)}

/* success + graceful notice ---------------------------------------------- */
.rr-form-success{
  border:1px solid var(--rr-hairline);border-top:3px solid var(--rr-accent);
  background:var(--rr-paper-warm);padding:24px 26px;
}
.rr-form-success p{margin:0;font-family:var(--rr-font-display);font-size:18px;color:var(--rr-ink)}
/* forms.js hides the inline success box once its text is mirrored into the popup,
   so the thank-you isn't shown twice (popup + footer box). No-JS users never get
   this class, so they still see the inline box. (Josh 21 Jul) */
.rr-form-success--in-popup{display:none}
.rr-form-notice{
  font-family:'Roboto Condensed',Helvetica,Arial,sans-serif;color:#666;
  border:1px solid #e5e5e5;background:#fafaf7;padding:14px 16px;
}

/* focus ring for keyboard users on the whole form ------------------------ */
.rr-form :focus-visible{outline:2px solid var(--rr-accent);outline-offset:2px}

/* mobile ----------------------------------------------------------------- */
@media (max-width:560px){
  .rr-form{font-size:15px}
  .rr-form-title{font-size:22px}
  .rr-form-submit{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .rr-form-submit{transition:none}
}

/* --- Confirmation popup (built by forms.js) — unmissable success dialog ----
   Self-scoped literal colours (this sits on <body>, outside .rr-grid-root, so it
   can't inherit rr-core's --rr-* tokens). Matches the locked brand: ink/paper +
   Revival cyan #0ca0c9, Crete Round + Roboto Condensed. */
.rr-form-popup-overlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:20px;font-family:'Roboto Condensed',Helvetica,Arial,sans-serif}
.rr-form-popup-card{background:#fff;max-width:440px;width:100%;padding:34px 30px;border-top:4px solid #0ca0c9;box-shadow:0 24px 64px rgba(0,0,0,.32);text-align:center}
.rr-form-popup-title{font-family:'Crete Round',Georgia,serif;font-weight:400;font-size:26px;line-height:1.2;margin:0 0 12px;color:#0a0a0a}
.rr-form-popup-msg{margin:0 0 24px;color:#444;font-size:16px;line-height:1.6}
.rr-form-popup-close{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:13px 30px;min-height:44px;border:1px solid #0a0a0a;background:#0a0a0a;color:#fff}
.rr-form-popup-close:hover{background:#0ca0c9;border-color:#0ca0c9;color:#fff}