/*
 * LK Web theme: form.css, Contact Form 7 in the concept's look.
 *
 * It styles the form body the content converter writes, and nothing else:
 *   <div class="lkw-form">
 *     <div class="lkw-field lkw-field--<type>"><label for="..">Label</label>[tag ...]</div>
 *     <div class="lkw-field lkw-field--acceptance">[acceptance your-consent] text [/acceptance]</div>
 *     <div class="lkw-actions">[submit "Lähetä"]</div>
 *   </div>
 * so a form written in a concept's own markup keeps the concept's own field styles. Every rule is scoped to
 * .lkw-form, and the answer box to the one that follows a .lkw-form.
 *
 * What the plugin needs to work without its own stylesheet (hidden fields, screen reader response, spinner, the empty
 * answer box, wrappers without a box) is in base.css, for every form. Here the field wrapper span has no box either,
 * so a label, its field and the plugin's error tip are the rows of the .lkw-field grid.
 *
 * Colours follow the text colour of wherever the form stands (a form on a light section of a dark concept works too):
 * field borders and backgrounds are mixed from currentColor, the button uses the concept's --accent. Tokens of
 * pages.css are used when it is there, each with a fallback when it is not.
 */

.wpcf7-form {
  --lkw-f-accent: var(--lkw-accent, var(--accent, currentColor));
  --lkw-f-on-accent: var(--lkw-on-accent, #ffffff);
  --lkw-f-border: color-mix(in srgb, currentColor 34%, transparent);
  --lkw-f-fill: color-mix(in srgb, currentColor 5%, transparent);
  --lkw-f-error: color-mix(in srgb, #d0342c 78%, currentColor);
  --lkw-f-soft: color-mix(in srgb, currentColor 70%, transparent);
}

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

.lkw-form {
  display: grid;
  gap: var(--space-3, 24px);
}

.lkw-form .lkw-field {
  display: grid;
  gap: var(--space-1, 8px);
  margin: 0;
}

.lkw-form .lkw-field > label {
  font-size: var(--step--1, 15px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

form[inert] > .lkw-form {
  opacity: 0.5;
}

/* ---------- fields ---------- */

.lkw-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 16px;
  font: inherit;
  font-size: max(16px, var(--step-0, 17px));
  line-height: 1.4;
  color: inherit;
  background-color: var(--lkw-f-fill);
  border: 1px solid var(--lkw-f-border);
  border-radius: var(--radius, 0);
  box-shadow: none;
  appearance: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lkw-form :is(input[type="url"], input[type="email"], input[type="tel"]) {
  direction: ltr;
}

.lkw-form textarea {
  min-height: 168px;
  resize: vertical;
}

.lkw-form select {
  padding-right: 48px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 24px) 50%,
    calc(100% - 18px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.lkw-form select option {
  color: initial;
}

.lkw-form :is(input, select, textarea)::placeholder {
  color: var(--lkw-f-soft);
  opacity: 1;
}

.lkw-form :is(input, select, textarea):hover {
  border-color: color-mix(in srgb, currentColor 55%, transparent);
}

.lkw-form :is(input, select, textarea, .wpcf7-submit):focus-visible {
  outline: 2px solid var(--lkw-f-accent);
  outline-offset: 2px;
}

.lkw-form :is(input, select, textarea):focus {
  border-color: var(--lkw-f-accent);
}

/* ---------- checkboxes, radio buttons and the consent ---------- */

.lkw-form :is(.wpcf7-checkbox, .wpcf7-radio) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 8px) var(--space-4, 32px);
}

.lkw-form .wpcf7-list-item {
  display: block;
  margin: 0;
}

.lkw-form .wpcf7-list-item > label {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding-top: 10px;
  line-height: 1.5;
  cursor: pointer;
}

.lkw-form :is(input[type="checkbox"], input[type="radio"]) {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--lkw-f-accent);
  cursor: pointer;
}

.lkw-form .lkw-field--acceptance .wpcf7-list-item > label {
  min-height: 0;
  padding-top: 0;
  font-size: var(--step--1, 15px);
}

.lkw-form .lkw-field--acceptance a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--lkw-f-accent);
  text-underline-offset: 0.2em;
}

/* ---------- the button ---------- */

.lkw-form .lkw-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 24px);
  margin-top: var(--space-1, 8px);
}

.lkw-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin: 0;
  padding: 0 var(--space-5, 48px);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  color: var(--lkw-f-on-accent);
  background: var(--lkw-f-accent);
  border: 0;
  border-radius: var(--radius-btn, var(--radius, 0));
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.lkw-form .wpcf7-submit:hover {
  background: color-mix(in srgb, var(--lkw-f-accent) 82%, #000000);
}

/* Contact Form 7 keeps the button disabled until the consent box is ticked. */
.lkw-form .wpcf7-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

form.submitting > .lkw-form .wpcf7-submit {
  opacity: 0.7;
  cursor: progress;
}

/* ---------- validation and the answer ---------- */

.lkw-form .wpcf7-not-valid {
  border-color: var(--lkw-f-error);
}

.lkw-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0;
  font-size: var(--step--1, 14px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--lkw-f-error);
}

.lkw-form ~ .wpcf7-response-output {
  margin: var(--space-4, 32px) 0 0;
  padding: var(--space-2, 16px) var(--space-3, 24px);
  border: 1px solid var(--lkw-f-border);
  border-left: 3px solid var(--lkw-f-accent);
  border-radius: var(--radius, 0);
  line-height: 1.5;
}

.wpcf7-form.init > .lkw-form ~ .wpcf7-response-output {
  display: none;
}

.wpcf7-form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) > .lkw-form ~ .wpcf7-response-output {
  border-left-color: var(--lkw-f-error);
}

@media (max-width: 599px) {
  .lkw-form .wpcf7-submit {
    width: 100%;
  }
}