/* =====================================================================
   Paras Interiors — form design system  (editorial / drafting-line)
   ---------------------------------------------------------------------
   Modelled on the HAO-style minimal brief form, translated to the Paras
   light palette: fields are underlines on the page (no boxes), labels are
   small tracked uppercase annotations, the submit is a ghost outline
   button with a drafting arrow that fills clay on hover.

   Applies to both native-CF7 forms (.paras-cf-form):
     - Enquiry card (.enq-form, labels above fields)   ~15 pages
     - Contact form (.flex / .itm.row + consent)        contacts/about

   Palette:  ink var(--pi-ink)  clay var(--pi-accent)  clay-dk var(--pi-accent-dk)  sepia var(--pi-sepia)
             paper var(--pi-bg-paper)  line var(--pi-line)

   Specificity note: the Customizer "Additional CSS" prints inline LATE and
   restyles the CF7 submit at (0,2,2) with !important. The doubled scope
   class (.paras-cf-form.paras-cf-form → (0,3,x)) outranks it. Vars are
   prefixed --pf- to avoid the inline block's own --pi- (gold) tokens.
   ===================================================================== */

.paras-cf-form{
  --pf-ink:var(--pi-text);
  --pf-clay:var(--pi-accent);
  --pf-clay-dk:var(--pi-accent-dk);
  --pf-sepia:var(--pi-sepia-txt);
  --pf-paper:var(--pi-bg-paper);
  --pf-line:var(--pi-line);
  --pf-underline:var(--pi-edge); /* flagged: ink-toned underline — no ink hairline token (line tokens are sepia) */
  position:relative;
}

/* ---- Enquiry card: quiet paper sheet with a clay title-block rule ----------- */
.enq-form{
  position:relative;
  background:var(--pf-paper);
  border:1px solid var(--pf-line);
  border-radius:0 !important;          /* square corners (beats the old 10px rule) */
  padding:clamp(30px,4vw,54px) !important;
  box-shadow:0 24px 60px -34px var(--pi-shadow-lg);
  overflow:hidden;
}
.enq-form::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--pf-clay),var(--pf-clay-dk));
}

/* ---- heading inside the enquiry card --------------------------------------- */
.paras-cf-form .enq-heading,
.paras-cf-form .enq-heading p,
.enq-heading p,
.enq-heading{
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  /* This is a <p> in a <div>, so the heading scale in css/typography.css never
     reached it — it sat at 700 while every real heading on the site is 500, and
     at 42px against the h2's 40px. It is a section title inside a card: same
     weight as the display scale, one step below the page's own h2. */
  font-weight:var(--pi-fw-display, 500) !important;
  color:var(--pf-ink) !important;
  font-size:var(--pi-fs-h3) !important;
  line-height:1.2 !important;
  margin:0 0 30px !important;
  letter-spacing:-.01em;
}

/* ---- field labels: tracked uppercase drafting annotations ------------------ */
.paras-cf-form .field > label,
.paras-cf-form .pi-lbl{
  display:block;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--pf-sepia);
  margin-bottom:2px;
  line-height:1.2;
}
.paras-cf-form .field{ margin-bottom:26px; }
.paras-cf-form .itm.row{ margin-bottom:26px; }

/* ---- inputs & textarea: drafting underlines, no boxes ----------------------
   (doubled scope so the late inline Customizer CSS can't re-box them) */
.paras-cf-form.paras-cf-form input[type="text"],
.paras-cf-form.paras-cf-form input[type="email"],
.paras-cf-form.paras-cf-form input[type="tel"],
.paras-cf-form.paras-cf-form input[type="number"],
.paras-cf-form.paras-cf-form textarea{
  width:100%;
  box-sizing:border-box;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--pf-underline) !important;
  border-radius:0 !important;
  padding:10px 2px 12px !important;
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:16.5px !important;
  line-height:1.4;
  color:var(--pf-ink) !important;
  margin-bottom:0 !important;
  transition:border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance:none; appearance:none;
}
.paras-cf-form.paras-cf-form textarea{
  min-height:120px;
  resize:vertical;
}
.paras-cf-form ::placeholder{ color:var(--pi-line-strong); opacity:1; }

/* focus: the underline turns clay and doubles, no boxes, no glow */
.paras-cf-form.paras-cf-form input:focus,
.paras-cf-form.paras-cf-form textarea:focus{
  outline:none;
  border-bottom-color:var(--pf-clay) !important;
  box-shadow:inset 0 -1px 0 0 var(--pf-clay) !important;
  background:transparent !important;
}
/* invalid: warm red underline + note */
.paras-cf-form.paras-cf-form .wpcf7-not-valid{
  border-bottom-color:var(--pi-err) !important;
  box-shadow:inset 0 -1px 0 0 var(--pi-err) !important;
}
.paras-cf-form .wpcf7-not-valid-tip{
  color:var(--pi-err); font-size:12.5px; margin-top:6px; display:block;
}
/* quiet the browser autofill yellow so the sheet stays paper */
.paras-cf-form input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--pf-paper) inset;
  -webkit-text-fill-color:var(--pf-ink);
}

/* ---- contact layout: two-up name/email row -------------------------------- */
.paras-cf-form .flex{
  display:flex; flex-wrap:wrap; gap:0 36px;
  margin-bottom:0;
}
.paras-cf-form .flex > .itm.row{ flex:1 1 240px; }

/* ---- consent checkbox ------------------------------------------------------ */
.paras-cf-form .wpcf7-acceptance{ display:block; margin:6px 0 8px; }
.paras-cf-form .wpcf7-list-item{ margin:0 !important; display:flex; align-items:flex-start; gap:10px; }
.paras-cf-form .wpcf7-list-item-label,
.paras-cf-form span.wpcf7-list-item-label{
  font-size:13px !important;
  color:var(--pf-sepia);
  line-height:1.5;
}
.paras-cf-form.paras-cf-form input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; margin-top:1px;
  border:1px solid var(--pf-underline); border-radius:0;
  background:transparent; cursor:pointer; flex:0 0 auto;
  transition:background .15s ease, border-color .15s ease;
  padding:0 !important;
}
.paras-cf-form.paras-cf-form input[type="checkbox"]:checked{
  background:var(--pf-clay); border-color:var(--pf-clay);
}
.paras-cf-form.paras-cf-form input[type="checkbox"]:checked::after{
  content:""; display:block; width:5px; height:9px;
  margin:1px auto 0; border:solid var(--pi-on-accent); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* ---- submit: ghost outline button with a drafting arrow --------------------
   <input> can't carry pseudo-elements, so the arrow is an inline-SVG
   background that nudges right on hover and swaps to white. */
.paras-cf-form .sc_form_field_submit,
.paras-cf-form .sc_form_field.sc_form_field_button,
.paras-cf-form .enq-submit,
.paras-cf-form .enq-submit p{
  display:block !important;
  width:100% !important;
  margin:0 !important;
}
.paras-cf-form.paras-cf-form input[type="submit"],
.paras-cf-form.paras-cf-form .wpcf7-submit,
.paras-cf-form.paras-cf-form .enq-submit p input{
  width:auto !important;
  display:inline-block;
  background-color:transparent !important;
  color:var(--pf-ink) !important;
  border:1px solid var(--pf-ink) !important;
  border-radius:0 !important;
  padding:16px 66px 16px 30px !important;
  margin-top:28px !important;
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.22em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, background-position .2s ease;
  box-shadow:none;
  /* flagged: %231E2825 ink arrow stroke — inside a data URI, cannot consume var() */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='10' viewBox='0 0 26 10'><path d='M0 5h24M20 1l4 4-4 4' fill='none' stroke='%231E2825' stroke-width='1.4'/></svg>");
  background-repeat:no-repeat;
  background-position:right 26px center;
  background-size:26px 10px;
}
.paras-cf-form.paras-cf-form input[type="submit"]:hover,
.paras-cf-form.paras-cf-form .wpcf7-submit:hover,
.paras-cf-form.paras-cf-form .enq-submit p input:hover{
  background-color:var(--pf-clay) !important;
  color:var(--pi-on-accent) !important;
  border-color:var(--pf-clay) !important;
  /* flagged: %23ffffff white arrow stroke on accent fill — inside a data URI, cannot consume var() */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='10' viewBox='0 0 26 10'><path d='M0 5h24M20 1l4 4-4 4' fill='none' stroke='%23ffffff' stroke-width='1.4'/></svg>");
  background-position:right 20px center;
}
.paras-cf-form.paras-cf-form input[type="submit"]:active{ transform:translateY(1px); }
.paras-cf-form.paras-cf-form input[type="submit"]:focus-visible{
  outline:2px solid var(--pf-clay); outline-offset:2px;
}

/* ---- reassurance line ------------------------------------------------------ */
.paras-cf-form .pi-form-reassure{ color:var(--pf-sepia); }
.paras-cf-form .pi-form-reassure svg{ color:var(--pf-clay); }

/* ---- response / status messages --------------------------------------------
   Invisible until a real state paints it (no empty bordered box). */
.paras-cf-form .wpcf7-response-output{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  font-size:14px;
}
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{
  margin:18px 0 0 !important;
  padding:12px 16px !important;
  border:1px solid var(--pf-line) !important;
}
.wpcf7 form.sent .wpcf7-response-output{
  border-color:var(--pi-ok) !important; background:var(--pi-ok-faint); color:var(--pi-ok-dk); /* flagged: success greens — no success token in the scheme */
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{
  border-color:var(--pi-err) !important; background:var(--pi-err-faint); color:var(--pi-err-dk); /* flagged: err tint + dark err text — no faint/dark err tokens */
}

/* ---- responsive ------------------------------------------------------------ */
@media (max-width:767px){
  .paras-cf-form .flex{ gap:0; }
  .paras-cf-form .flex > .itm.row{ flex:1 1 100%; }
  .enq-form{ padding:26px 22px !important; }
  .paras-cf-form.paras-cf-form input[type="submit"],
  .paras-cf-form.paras-cf-form .wpcf7-submit,
  .paras-cf-form.paras-cf-form .enq-submit p input{ width:100% !important; }
}