/**
 * Contact Form 7 skin for V2.
 *
 * Matches the original field recipe exactly: full-width, 1px border-input,
 * surface background, px-5 py-4, 1rem text, red border on focus, and the
 * solid red uppercase submit. Scoped to .tm2-form so it can't leak.
 *
 * The same rules style .tm2-form-fallback — the inert placeholder that
 * renders before a shortcode is pasted in — so the page looks identical
 * either way.
 */

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */

.tm2-form .wpcf7-form,
.tm2-form .tm2-form-fallback {
  display: grid;
  gap: 0.75rem;
}

/* Name + Email side by side (contact form). */
.tm2-form .tm2-field-row {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .tm2-form .tm2-field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Email + button side by side (free-chapter form). */
.tm2-form .tm2-field-row-auto {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .tm2-form .tm2-field-row-auto {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* CF7 wraps every control in a span — make it inert so the grid works. */
.tm2-form .wpcf7-form-control-wrap,
.tm2-form .tm2-field {
  position: static;
  display: block;
  width: 100%;
}

.tm2-form .wpcf7-form > p {
  margin: 0;
}

.tm2-form .wpcf7-form br {
  display: none;
}

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

.tm2-form input[type="text"],
.tm2-form input[type="email"],
.tm2-form input[type="tel"],
.tm2-form input[type="url"],
.tm2-form select,
.tm2-form textarea {
  width: 100%;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--foreground);
  padding: 1rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  outline: none;
  appearance: none;
  transition: border-color 0.2s ease;
}

.tm2-form textarea {
  min-height: 9rem;
  resize: vertical;
}

.tm2-form input::placeholder,
.tm2-form textarea::placeholder {
  color: var(--muted-foreground);
  opacity: 1;
}

.tm2-form input:focus,
.tm2-form select:focus,
.tm2-form textarea:focus {
  border-color: var(--primary);
  box-shadow: none;
}

.tm2-form input:disabled,
.tm2-form textarea:disabled {
  opacity: 1;
  cursor: not-allowed;
}

/* A hidden "which chapter" field is filled in by main.js — never shown. */
.tm2-form input[name="chapter"],
.tm2-form input[name="your-chapter"] {
  display: none;
}

/* Consent / choices */
.tm2-form .wpcf7-acceptance .wpcf7-list-item,
.tm2-form .wpcf7-checkbox .wpcf7-list-item,
.tm2-form .wpcf7-radio .wpcf7-list-item {
  display: block;
  margin: 0;
}

.tm2-form .wpcf7-list-item-label {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin-left: 0.5rem;
}

.tm2-form input[type="checkbox"],
.tm2-form input[type="radio"] {
  width: auto;
  accent-color: var(--primary);
}

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

.tm2-form input[type="submit"],
.tm2-form .wpcf7-submit,
.tm2-form .tm2-form-fallback button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1rem 2.25rem;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

@media (min-width: 640px) {
  .tm2-form input[type="submit"],
  .tm2-form .wpcf7-submit,
  .tm2-form .tm2-form-fallback button[type="submit"] {
    width: auto;
  }
}

.tm2-form input[type="submit"]:hover,
.tm2-form .wpcf7-submit:hover {
  transform: translateY(-4px);
}

.tm2-form .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.tm2-form .wpcf7-spinner {
  margin: 0 0 0 0.75rem;
  background-color: var(--muted-foreground);
}

/* ------------------------------------------------------------------ */
/* Validation + responses                                              */
/* ------------------------------------------------------------------ */

.tm2-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}

.tm2-form .wpcf7-form-control.wpcf7-not-valid {
  border-color: var(--primary);
}

.tm2-form .wpcf7-response-output {
  margin: 0;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--foreground);
  background: var(--surface);
}

.tm2-form form.sent .wpcf7-response-output {
  border-left-color: var(--foreground);
}

.tm2-form form.invalid .wpcf7-response-output,
.tm2-form form.unaccepted .wpcf7-response-output,
.tm2-form form.failed .wpcf7-response-output,
.tm2-form form.aborted .wpcf7-response-output,
.tm2-form form.spam .wpcf7-response-output {
  border-left-color: var(--primary);
}

.tm2-form .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.tm2-form label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Cloudflare Turnstile                                                */
/* ------------------------------------------------------------------ */

/* The widget sits just above the submit button. Its own frame is fixed at
   300x65 and can't be restyled from outside, so the job here is only to give
   it the same rhythm as the fields around it. */
.tm2-form .cf-turnstile,
.tm2-form .cf-turnstile-wrapper {
  display: block;
  margin: 0;
}

.tm2-form .cf-turnstile iframe {
  border-radius: var(--radius);
}

/*
 * The plugin hard-codes `margin-bottom: -15px` inline on its wrapper, which
 * eats the form grid's own gap and glues the widget to the submit button.
 * Inline styles need !important to beat.
 */
.tm2-form .cf7-cf-turnstile {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
}

/* The <br> the plugin appends would add a second, uneven gap. */
.tm2-form .cf-turnstile-br {
  display: none;
}

/* ------------------------------------------------------------------ */
/* CookieYes banner — brand colours                                    */
/* ------------------------------------------------------------------ */

/*
 * The plugin writes its palette as inline styles, so these need !important.
 * Doing it here rather than in the plugin's settings means the colours
 * survive a settings re-save and a plugin update.
 *
 * Accept and Reject are styled IDENTICALLY on purpose: EDPB guidance requires
 * the two choices to be equally prominent, so making "Accept" the pretty one
 * would be a dark pattern.
 */
.cky-btn-accept,
.cky-btn-reject {
  background-color: #f16559 !important;
  border-color: #f16559 !important;
  color: #090909 !important;
}

.cky-btn-accept:hover,
.cky-btn-reject:hover {
  background-color: #ee4a3c !important;
  border-color: #ee4a3c !important;
}

.cky-btn-customize {
  background-color: transparent !important;
  border-color: #f16559 !important;
  color: #f16559 !important;
}

.cky-btn-customize:hover {
  background-color: rgb(241 101 89 / 0.1) !important;
}

/* Preference-centre controls and the small "revisit" bubble */
.cky-btn-preferences,
.cky-preference-content-wrapper .cky-btn,
.cky-btn-revisit-wrapper {
  background-color: #f16559 !important;
  border-color: #f16559 !important;
}

.cky-switch input:checked {
  background-color: #f16559 !important;
}

.cky-notice-des a,
.cky-preference-content-wrapper a,
.cky-always-active {
  color: #f16559 !important;
}

/*
 * The banner is fixed-positioned but its inner bar is not, and the plugin
 * doesn't account for the border-box, so on narrow phones it sat 4-8px wider
 * than the viewport and gave the whole page a horizontal scroll.
 */
.cky-consent-container,
.cky-consent-bar,
.cky-notice,
.cky-notice-group {
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .cky-consent-container {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* Full-width buttons read better than three cramped ones on a phone. */
  .cky-notice-btn-wrapper {
    flex-wrap: wrap !important;
  }

  .cky-notice-btn-wrapper .cky-btn {
    flex: 1 1 auto !important;
    min-width: 8rem !important;
  }
}