/**
 * @file
 * Form elements, inputs, and search bar styling for Wares Point Theme.
 * Responsive forms with 16px input base (prevents iOS auto-zoom) and 44px touch targets.
 */

.form-item {
  margin-bottom: var(--wp-space-md);
}

.form-item label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wp-brown-deep);
  margin-bottom: var(--wp-space-xs);
}

/* Required marker */
.form-required::after,
label.form-required::after {
  content: " *";
  color: var(--wp-status-error);
  font-weight: 700;
}

.form-item--description,
.description {
  font-size: 0.8125rem;
  color: var(--wp-text-muted);
  margin-top: var(--wp-space-xs);
  line-height: 1.4;
}

/* Text & Select inputs - 1rem (16px) minimum prevents iOS Safari zooming on focus */
.form-text,
.form-email,
.form-search,
.form-tel,
.form-url,
.form-password,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--wp-border-soft);
  border-radius: var(--wp-radius-sm);
  background-color: var(--wp-white);
  color: var(--wp-text);
  font-family: var(--wp-font-ui, var(--wp-font-body));
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--wp-transition-fast), box-shadow var(--wp-transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.form-select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23896432' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem;
  padding-right: 2.25rem;
}

.form-text:focus,
.form-email:focus,
.form-search:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--wp-sand-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(200, 169, 126, 0.25);
}

/* Form error states */
input.error,
textarea.error,
select.error {
  border-color: var(--wp-status-error);
  background-color: #fffbfa;
}

.form-item--error-message {
  font-size: 0.8125rem;
  color: var(--wp-status-error);
  font-weight: 600;
  margin-top: var(--wp-space-xs);
}

/* Radios and Checkboxes with comfortable 44px tap targets */
.form-type-checkbox,
.form-type-radio {
  display: flex;
  align-items: center;
  gap: var(--wp-space-sm);
  min-height: 44px;
}

.form-type-checkbox label,
.form-type-radio label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.form-checkbox,
.form-radio {
  width: 20px;
  height: 20px;
  accent-color: var(--wp-brown-deep);
  cursor: pointer;
  flex-shrink: 0;
}

/* Fieldset and Legends */
fieldset {
  border: 1px solid var(--wp-border-soft);
  border-radius: var(--wp-radius-md);
  padding: var(--wp-space-md);
  margin: var(--wp-space-md) 0;
  background-color: var(--wp-white);
}

@media (min-width: 768px) {
  fieldset {
    padding: var(--wp-space-lg);
    margin: var(--wp-space-lg) 0;
  }
}

legend {
  font-family: var(--wp-font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--wp-brown-deep);
  padding: 0 var(--wp-space-sm);
}

/* Details and Summary (collapsible accordions) */
details {
  border: 1px solid var(--wp-border-soft);
  border-radius: var(--wp-radius-md);
  margin-bottom: var(--wp-space-md);
  background-color: var(--wp-white);
  overflow: hidden;
  padding:10px;
}

summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--wp-space-sm) var(--wp-space-md);
  font-weight: 600;
  color: var(--wp-brown-deep);
  cursor: pointer;
  background-color: var(--wp-cream-light);
  border-bottom: 1px solid transparent;
  transition: background-color var(--wp-transition-fast);
}

@media (min-width: 768px) {
  summary {
    padding: var(--wp-space-md) var(--wp-space-lg);
  }
}

details[open] > summary {
  border-bottom-color: var(--wp-border-soft);
}

summary:hover {
  background-color: var(--wp-beige-light);
}

.details-wrapper {
  padding: var(--wp-space-md);
}

@media (min-width: 768px) {
  .details-wrapper {
    padding: var(--wp-space-lg);
  }
}

/* Header search bar */
.search-block-form {
  display: flex;
  align-items: center;
}

.search-block-form .form-item {
  margin-bottom: 0;
  flex-grow: 1;
}

.search-block-form .form-search {
  border-radius: var(--wp-radius-md);
  padding: 0.5rem 1rem;
  background-color: var(--wp-cream-light);
  border: 1px solid var(--wp-border-soft);
  font-size: 0.9375rem;
}

.search-block-form .form-search:focus {
  background-color: var(--wp-white);
  border-color: var(--wp-sand-primary);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--wp-space-md);
  margin-top: var(--wp-space-lg);
}

@media (max-width: 575px) {
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions .button,
  .form-actions input[type="submit"] {
    width: 100%;
    min-height: 48px;
  }
}

/* Search results listing */
.search-results {
  list-style: none;
  padding: 0;
  margin: var(--wp-space-xl) 0;
}

.search-result {
  margin-bottom: var(--wp-space-xl);
  padding-bottom: var(--wp-space-lg);
  border-bottom: 1px solid var(--wp-border-soft);
}

.search-result__title {
  font-size: clamp(1.15rem, 3.5vw, 1.35rem);
  margin-bottom: var(--wp-space-xs);
}

.search-result__snippet {
  font-size: 0.95rem;
  color: var(--wp-text-muted);
}