/* ============================================================
   BRAND TOKENS — LITTLE CREATIONS
   Change colors / fonts / radius here = whole form restyles.
   Values sampled from the live site (no new design language).
   Fonts (Fraunces + DM Sans) are already loaded by the theme,
   so they are referenced here, not re-imported.
   ============================================================ */
:root{
  /* fonts */
  --font-head:'Fraunces',Georgia,serif;
  --font-body:'DM Sans',sans-serif;

  /* brand colors (sampled live) */
  --c-ink:#183b56;          /* navy — headings, labels, field text */
  --c-ink-2:#5a6e7a;        /* muted navy — helper line under heading */
  --c-primary:#176b9f;      /* brand blue — links + focus ring */
  --c-primary-dark:#125a86;
  --c-accent:#e2ad59;       /* warm gold — submit */
  --c-accent-dark:#d49c3f;
  --c-coral:#cc4b37;        /* required mark + errors */
  --c-paper:#ffffff;
  --c-tint:#f7fcfd;         /* pale panel / field fill */
  --c-line:#d0cbc9;         /* field border */
  --c-line-soft:#c8e1e9;    /* panel border (pale blue, matches contact cards) */
  --c-placeholder:#9aa7ad;

  /* form system */
  --field-h:52px;
  --r-input:12px;
  --r-panel:4px 26px;       /* signature asymmetric "leaf" corner from the live cards */
  --r-pill:999px;
  --gap:22px;               /* vertical rhythm between fields */

  /* type scale */
  --fs-label:15px;
  --fs-field:16px;          /* 16px keeps iOS from zooming on focus */
  --fs-help:13px;

  /* effects */
  --focus-ring:0 0 0 4px rgba(23,107,159,.16);
  --ring-error:0 0 0 4px rgba(204,75,55,.14);
  --shadow-1:0 2px 10px rgba(24,59,86,.06);
  --shadow-2:0 18px 40px rgba(24,59,86,.12);
}

/* ============ BEGIN CONTACT FORM — Little Creations ============
   Scoped under .is-wrapper .form-placeholder:
   - .is-wrapper gives specificity over the theme
   - .form-placeholder keeps the generic widget classes
     (.input / .button / .error / .required) from leaking site-wide
   No locked wrappers or Foundation cells are targeted.
   ============================================================ */

/* panel — mirrors the left contact cards (pale border + leaf corner) */
.is-wrapper .form-placeholder{
  background:var(--c-tint);
  border:1px solid var(--c-line-soft);
  border-radius:var(--r-panel);
  padding:36px 34px;
  box-shadow:var(--shadow-1);
}

/* heading + intro line */
.is-wrapper .form-placeholder h2{
  font-family:var(--font-head);
  color:var(--c-ink);
  text-wrap:balance;
  margin:0 0 6px;
}
.is-wrapper .form-placeholder > p{
  font-family:var(--font-body);
  color:var(--c-ink-2);
  margin:0 0 24px;
}

/* reset the widget fieldset */
.is-wrapper .form-placeholder .fieldset{
  border:none;
  margin:0;
  padding:0;
  min-width:0;
}

/* vertical rhythm — every *_wrap row */
.is-wrapper .form-placeholder [class$="_wrap"]{ margin-bottom:var(--gap); }
.is-wrapper .form-placeholder .submit_wrap{ margin-bottom:0; }

/* labels + required mark */
.is-wrapper .form-placeholder label{
  display:block;
  font-family:var(--font-body);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.2px;
  color:var(--c-ink);
  margin-bottom:8px;
}
.is-wrapper .form-placeholder .required{
  color:var(--c-coral);
  font-weight:700;
  margin-left:2px;
}

/* fields — one consistent look (targets widget classes only,
   so the hidden honeypot bare <input> is never touched) */
.is-wrapper .form-placeholder .input,
.is-wrapper .form-placeholder .phone_number,
.is-wrapper .form-placeholder textarea{
  width:100%;
  min-height:var(--field-h);
  padding:13px 16px;
  font-family:var(--font-body);
  font-size:var(--fs-field);
  color:var(--c-ink);
  background:var(--c-paper);
  border:1.5px solid var(--c-line);
  border-radius:var(--r-input);
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  -webkit-appearance:none;
  appearance:none;
}
/* textarea.input beats the 3-class .input rule so the message box can grow */
.is-wrapper .form-placeholder textarea.input,
.is-wrapper .form-placeholder textarea{
  min-height:140px;
  padding:14px 16px;
  line-height:1.5;
  resize:vertical;
}
.is-wrapper .form-placeholder ::placeholder{ color:var(--c-placeholder); opacity:1; }

/* hover */
.is-wrapper .form-placeholder .input:hover,
.is-wrapper .form-placeholder .phone_number:hover,
.is-wrapper .form-placeholder textarea:hover{
  border-color:var(--c-primary);
}

/* focus — brand-blue ring */
.is-wrapper .form-placeholder .input:focus,
.is-wrapper .form-placeholder .phone_number:focus,
.is-wrapper .form-placeholder textarea:focus{
  outline:none;
  border-color:var(--c-primary);
  background:var(--c-paper);
  box-shadow:var(--focus-ring);
}

/* phone (intl-tel-input) — match field, align flag dropdown */
.is-wrapper .form-placeholder .iti{ width:100%; display:block; }
.is-wrapper .form-placeholder .iti .phone_number{ padding-left:58px; }
.is-wrapper .form-placeholder .iti__selected-flag{
  border-radius:var(--r-input) 0 0 var(--r-input);
  padding:0 8px 0 14px;
}
.is-wrapper .form-placeholder .iti__selected-flag:hover,
.is-wrapper .form-placeholder .iti__selected-flag:focus{ background:transparent; }

/* validation */
.is-wrapper .form-placeholder .error{
  display:block;
  margin-top:6px;
  font-family:var(--font-body);
  font-size:var(--fs-help);
  color:var(--c-coral);
}
.is-wrapper .form-placeholder .input.error,
.is-wrapper .form-placeholder .phone_number.error,
.is-wrapper .form-placeholder textarea.error{
  border-color:var(--c-coral);
  box-shadow:var(--ring-error);
}

/* the recaptcha container also carries .input — strip the field look
   (border/fill/min-height) so it's not rendered as an empty box */
.is-wrapper .form-placeholder .recaptcha-block{
  min-height:0;
  padding:0;
  margin-top:4px;
  background:none;
  border:none;
  border-radius:0;
  box-shadow:none;
}

/* submit — amber pill with a soft lift (reuses the .button utility, scoped) */
.is-wrapper .form-placeholder .submit_wrap{ padding-top:6px; }
.is-wrapper .form-placeholder .submit_wrap .button,
.is-wrapper .form-placeholder .button.input{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:200px;
  padding:15px 34px;
  font-family:var(--font-body);
  font-size:var(--fs-field);
  font-weight:700;
  letter-spacing:.3px;
  color:var(--c-ink);
  background:var(--c-accent);
  border:none;
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-1);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.is-wrapper .form-placeholder .submit_wrap .button:hover,
.is-wrapper .form-placeholder .button.input:hover{
  background:var(--c-accent-dark);
  transform:translateY(-2px);
  box-shadow:var(--shadow-2);
}
.is-wrapper .form-placeholder .submit_wrap .button:active{ transform:translateY(0); }
.is-wrapper .form-placeholder .submit_wrap .button:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring), var(--shadow-1);
}

/* responsive */
@media (max-width:640px){
  .is-wrapper .form-placeholder{ padding:24px 20px; }
  .is-wrapper .form-placeholder .submit_wrap .button{ width:100%; }
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .is-wrapper .form-placeholder .input,
  .is-wrapper .form-placeholder .phone_number,
  .is-wrapper .form-placeholder textarea,
  .is-wrapper .form-placeholder .submit_wrap .button{ transition:none; }
  .is-wrapper .form-placeholder .submit_wrap .button:hover{ transform:none; }
}
/* ============ END CONTACT FORM — Little Creations ============ */