/* ==========================================================================
   Contact Form 7 — the plugin's markup, the theme's skin

   Loaded only on pages that render a selected CF7 form, and only after the
   theme stylesheet.

   CF7's own two stylesheets are dequeue'd by the adapter. They ship an
   opinionated reset and a theme stylesheet that between them set borders,
   fonts and a yellow submit button — fighting them with overrides would mean
   `!important` in a dozen places, so they are removed and the rules restated
   here in the theme's tokens instead.

   Two layers:

   1. A default layout that looks right for any form the desk builds in the
      CF7 editor, whatever structure they use. Single column, full-width
      fields, generous spacing.

   2. The theme's own classes, which work inside a CF7 form unchanged. A form
      written with .fgrid / .field / .wide gets the theme's exact two-column
      layout and its focus states — because those rules in style.css are not
      scoped to the theme's own form. That is the escape hatch for matching
      the built-in form precisely, without any code.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Default layout
   -------------------------------------------------------------------------- */

.cf7-wrap .wpcf7 {
  margin: 0;
}

.cf7-wrap .wpcf7 form {
  display: block;
}

/* CF7 wraps each field in a <p>. The theme's form uses a grid; here the
   default is a stack with real spacing, which survives any structure. */
.cf7-wrap .wpcf7 form > p {
  margin: 0 0 18px;
  display: block;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-2);
}

.cf7-wrap .wpcf7 form > p:last-of-type {
  margin-bottom: 0;
}

/* The control wrapper is inline by default, which collapses a 100%-width input
   into a stray inline box. */
.cf7-wrap .wpcf7 .wpcf7-form-control-wrap {
  display: block;
  margin-top: 7px;
}

/* CF7 inserts a <br> between the label and the field. With the wrapper now a
   block, the break is a second line of nothing. */
.cf7-wrap .wpcf7 form > p > br {
  display: none;
}

/* --------------------------------------------------------------------------
   Fields

   Matches .field input in the theme stylesheet: same border weight, radius,
   padding and focus ring, so a CF7 field and a built-in one are the same
   object to look at.
   -------------------------------------------------------------------------- */

.cf7-wrap .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.cf7-wrap .wpcf7 textarea,
.cf7-wrap .wpcf7 select {
  width: 100%;
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}

.cf7-wrap .wpcf7 textarea {
  min-height: 118px;
  resize: vertical;
  line-height: 1.6;
}

.cf7-wrap .wpcf7 select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5F53' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
  padding-right: 42px;
}

.cf7-wrap .wpcf7 input:not([type="submit"]):focus,
.cf7-wrap .wpcf7 textarea:focus,
.cf7-wrap .wpcf7 select:focus {
  outline: none;
  border-color: var(--pink-btn);
  background: var(--paper);
  box-shadow: 0 0 0 3.5px rgba(176, 78, 53, .12);
}

/* Checkboxes and radios keep their native size — a 100% wide checkbox is a
   full-width bar with a tick at one end. */
.cf7-wrap .wpcf7 input[type="checkbox"],
.cf7-wrap .wpcf7 input[type="radio"] {
  width: auto;
  accent-color: var(--pink-btn);
  margin-right: 8px;
}

.cf7-wrap .wpcf7 .wpcf7-list-item {
  display: block;
  margin: 0 0 8px;
  font-weight: 400;
  font-size: .95rem;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Submit

   CF7 prints an <input type="submit">, not a <button>, so it cannot carry the
   theme's .btn class. Styled to match .btn-primary by hand.
   -------------------------------------------------------------------------- */

.cf7-wrap .wpcf7 input[type="submit"],
.cf7-wrap .wpcf7 button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  font-family: var(--body);
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.1;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--pink-btn);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}

.cf7-wrap .wpcf7 input[type="submit"]:hover,
.cf7-wrap .wpcf7 button[type="submit"]:hover {
  background: var(--ink);
  color: var(--ink-inv);
}

.cf7-wrap .wpcf7 input[type="submit"]:disabled {
  opacity: .6;
  cursor: progress;
}

/* --------------------------------------------------------------------------
   Validation

   Mirrors .field.bad in the theme stylesheet, so a rejected CF7 field and a
   rejected built-in field look the same. CF7 marks the wrapper with
   .wpcf7-not-valid, and adds a tip below it.
   -------------------------------------------------------------------------- */

.cf7-wrap .wpcf7 .wpcf7-not-valid {
  border-color: var(--pink-btn);
  background: #FDF4EE;
}

.cf7-wrap .wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: .78rem;
  font-weight: 400;
  color: var(--pink-text);
}

/* --------------------------------------------------------------------------
   Response

   The success and error banner CF7 prints at the bottom of the form. Hidden
   until CF7 writes a status onto the form, which is how the plugin signals
   "nothing to say yet" — an empty bordered box on a working form looks like a
   bug.
   -------------------------------------------------------------------------- */

.cf7-wrap .wpcf7 .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  font-size: .92rem;
  line-height: 1.55;
}

.cf7-wrap .wpcf7 form.init .wpcf7-response-output,
.cf7-wrap .wpcf7 form.resetting .wpcf7-response-output,
.cf7-wrap .wpcf7 form.submitting .wpcf7-response-output {
  display: none;
}

.cf7-wrap .wpcf7 form.sent .wpcf7-response-output,
.cf7-wrap .wpcf7 form.invalid .wpcf7-response-output,
.cf7-wrap .wpcf7 form.failed .wpcf7-response-output,
.cf7-wrap .wpcf7 form.aborted .wpcf7-response-output {
  display: block;
  padding: 16px 20px;
  border: 1.5px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--r-md);
  background: var(--paper);
}

.cf7-wrap .wpcf7 form.sent .wpcf7-response-output {
  border-left-color: #6E8264;
}

.cf7-wrap .wpcf7 form.invalid .wpcf7-response-output,
.cf7-wrap .wpcf7 form.failed .wpcf7-response-output,
.cf7-wrap .wpcf7 form.aborted .wpcf7-response-output {
  border-left-color: var(--pink-btn);
}

/* --------------------------------------------------------------------------
   Spinner

   CF7's own spinner is a large grey circle with a hard border. Scaled down and
   repainted so it reads as activity rather than as a broken image.
   -------------------------------------------------------------------------- */

.cf7-wrap .wpcf7 .wpcf7-spinner {
  width: 18px;
  height: 18px;
  margin: 0 0 0 12px;
  background-color: transparent;
  border: 2px solid var(--sand-deep);
  border-top-color: var(--pink-btn);
  border-radius: 50%;
  opacity: 1;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cf7-wrap .wpcf7 .wpcf7-spinner {
    animation: none;
  }
}

/* CF7 infrastructure remains hidden when its default stylesheet is replaced. */
.cf7-wrap .wpcf7 .hidden-fields-container { display:none; }
.cf7-wrap .wpcf7 .screen-reader-response { position:absolute; overflow:hidden; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); width:1px; height:1px; margin:-1px; padding:0; border:0; }
.cf7-wrap .wpcf7 .fgrid .field > label { display:block; }
.cf7-wrap .wpcf7 .form-foot { align-items:center; }