input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: 0.78rem 0.92rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: none;
}
textarea { min-height: 150px; resize: vertical; }
input:focus,
textarea:focus,
select:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent); }
button,
input[type="submit"],
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.72rem 1.05rem;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-surface);
  font-weight: 800;
  text-decoration: none;
}
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover { filter: brightness(0.96); color: var(--color-surface); }
.search-form { display: flex; gap: var(--space-sm); align-items: center; }
.search-form label { flex: 1 1 auto; }
.search-submit { flex: 0 0 auto; }
@media (max-width: 520px) { .search-form { flex-direction: column; align-items: stretch; } }


/* v0.3.0: clickable form controls */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.form-submit .submit,
.comment-form input[type="submit"] {
  cursor: pointer;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
}


/* v0.8.0: search form */
.search-form {
  display: flex;
  gap: 0.55rem;
  width: 100%;
  max-width: 620px;
}

.search-form label {
  flex: 1 1 auto;
  min-width: 0;
}

.search-field {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.search-field:focus {
  border-color: color-mix(in srgb, var(--color-accent) 48%, var(--color-border-soft));
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.search-submit {
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, var(--color-border-soft));
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.search-submit:hover {
  filter: brightness(1.04);
}

@media (max-width: 520px) {
  .search-form {
    flex-direction: column;
  }

  .search-submit {
    width: 100%;
  }
}


/* v0.8.1: refined primary form buttons */
.search-submit,
.comment-form input[type="submit"],
.form-submit .submit {
  border-color: color-mix(in srgb, var(--color-accent) 58%, var(--color-border-soft));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-accent) 92%, white 8%),
      color-mix(in srgb, var(--color-accent) 86%, black 14%)
    );
  color: #fff;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--color-accent) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 25%, transparent);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background-color var(--transition-base),
    color var(--transition-base),
    filter var(--transition-base);
}

.search-submit:visited,
.comment-form input[type="submit"]:visited,
.form-submit .submit:visited {
  color: #fff;
}

.search-submit:hover,
.comment-form input[type="submit"]:hover,
.form-submit .submit:hover {
  border-color: color-mix(in srgb, var(--color-accent) 78%, var(--color-border-soft));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-accent) 78%, white 22%),
      color-mix(in srgb, var(--color-accent) 72%, black 28%)
    );
  color: color-mix(in srgb, #fff 88%, var(--color-surface) 12%);
  filter: none;
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--color-accent) 26%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 32%, transparent);
}

.search-submit:focus-visible,
.comment-form input[type="submit"]:focus-visible,
.form-submit .submit:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-accent) 24%, transparent),
    0 12px 28px color-mix(in srgb, var(--color-accent) 24%, transparent);
}

.search-submit:active,
.comment-form input[type="submit"]:active,
.form-submit .submit:active {
  transform: translateY(0);
  box-shadow:
    0 7px 18px color-mix(in srgb, var(--color-accent) 18%, transparent),
    inset 0 1px 3px color-mix(in srgb, black 18%, transparent);
}

.search-submit:disabled,
.comment-form input[type="submit"]:disabled,
.form-submit .submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Dark mode keeps the button warm and readable */
[data-theme="dark"] .search-submit,
[data-theme="dark"] .comment-form input[type="submit"],
[data-theme="dark"] .form-submit .submit {
  color: #1b120b;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-accent) 82%, white 18%),
      color-mix(in srgb, var(--color-accent) 88%, black 12%)
    );
}

[data-theme="dark"] .search-submit:hover,
[data-theme="dark"] .comment-form input[type="submit"]:hover,
[data-theme="dark"] .form-submit .submit:hover {
  color: #130d08;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-accent) 90%, white 10%),
      color-mix(in srgb, var(--color-accent) 80%, black 20%)
    );
}


/* v0.16.0: form field consistency */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  color: var(--color-text);
  background: var(--color-surface);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-faint);
}

select {
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  font: inherit;
}

select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus {
  border-color: color-mix(in srgb, var(--color-accent) 48%, var(--color-border-soft));
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.search-submit,
.search-submit:visited,
.comment-form input[type="submit"],
.comment-form input[type="submit"]:visited,
.form-submit .submit,
.form-submit .submit:visited {
  color: #fff;
}

.search-submit:hover,
.search-submit:focus-visible,
.comment-form input[type="submit"]:hover,
.comment-form input[type="submit"]:focus-visible,
.form-submit .submit:hover,
.form-submit .submit:focus-visible {
  color: #fff;
}

[data-theme="dark"] .search-submit,
[data-theme="dark"] .search-submit:visited,
[data-theme="dark"] .comment-form input[type="submit"],
[data-theme="dark"] .comment-form input[type="submit"]:visited,
[data-theme="dark"] .form-submit .submit,
[data-theme="dark"] .form-submit .submit:visited {
  color: var(--color-accent-contrast);
}

[data-theme="dark"] .search-submit:hover,
[data-theme="dark"] .search-submit:focus-visible,
[data-theme="dark"] .comment-form input[type="submit"]:hover,
[data-theme="dark"] .comment-form input[type="submit"]:focus-visible,
[data-theme="dark"] .form-submit .submit:hover,
[data-theme="dark"] .form-submit .submit:focus-visible {
  color: var(--color-accent-contrast);
}


/* v0.34.25: keep forms from widening narrow/mobile layouts */
.search-form,
.comment-form,
.comment-form p,
.comment-form label,
.comment-form input,
.comment-form textarea,
.comment-form select,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  max-width: 100%;
  min-width: 0;
}

.comment-form input,
.comment-form textarea,
.comment-form select {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* v0.35.75: client-side blank search guard. */
.search-form__empty-message {
  display: block;
  margin-top: 0.42rem;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.search-form__empty-message[hidden] {
  display: none;
}

.search-field[aria-invalid="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}