/* assets/css/components/form.css
 * @layer components — .form BEM block
 * ════════════════════════════════════════════════════════════════════
 *
 * Input block-padding equals button block-padding (0.625em) so inputs
 * and buttons pair flush in inline layouts (§9 / §11 squish-inset).
 *
 * Custom checkbox / radio use appearance: none + SVG background-image
 * for reliable cross-browser rendering without extra DOM elements.
 *
 * Token sources: §11 --input-*, --label-*, --form-*; §2 --feedback-*;
 *                §13 --radius-s; §15 --duration-fast; §17 --focus-*
 * ════════════════════════════════════════════════════════════════════ */


@layer components {

  /* ════════════════════════════════════════════════════════════════════
     Form layout rhythm
     ════════════════════════════════════════════════════════════════════ */

  /* Top-level section wrapper — larger gap between field groups */
  .form__section {
    display: flex;
    flex-direction: column;
    gap: var(--form-section-gap);
  }

  /* Individual field wrapper — label + input + hint/error */
  .form__group {
    display: flex;
    flex-direction: column;
    gap: var(--label-gap);
  }

  /* Horizontal row of groups (e.g. first / last name) */
  .form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: var(--form-group-gap);
  }


  /* ════════════════════════════════════════════════════════════════════
     Labels
     ════════════════════════════════════════════════════════════════════ */

  .form__label {
    display: flex;
    align-items: center;
    gap: var(--label-gap);
    font-family: var(--font-body);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    letter-spacing: var(--label-tracking);
    text-transform: var(--label-text-transform);
    color: var(--label-color);
    cursor: default;
  }

  /* Required field asterisk */
  .form__label--required::after {
    content: '*';
    color: var(--feedback-error);
    margin-inline-start: var(--space-3xs);
    font-weight: var(--weight-bold);
  }


  /* ════════════════════════════════════════════════════════════════════
     Base input / textarea / select
     ════════════════════════════════════════════════════════════════════ */

  .form__input,
  .form__textarea,
  .form__select {
    display: block;
    inline-size: 100%;
    min-block-size: var(--input-min-height);
    padding-block: var(--input-padding-block);
    padding-inline: var(--input-padding-inline);
    font-family: var(--font-body);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    color: var(--text-body);
    background-color: var(--input-bg);
    border: var(--input-border);
    border-radius: var(--input-radius);
    appearance: none;
    -webkit-appearance: none;
    transition:
      border           var(--input-transition),
      background-color var(--input-transition),
      box-shadow       var(--input-transition);
  }

  .form__input::placeholder,
  .form__textarea::placeholder {
    color: var(--input-placeholder);
  }

  .form__input:hover,
  .form__textarea:hover,
  .form__select:hover {
    background-color: var(--input-bg-hover);
    border: var(--input-border-hover);
  }

  .form__input:focus,
  .form__textarea:focus,
  .form__select:focus {
    outline: none;
    border: var(--input-border-focus);
    background-color: var(--body-bg);
  }


  /* ════════════════════════════════════════════════════════════════════
     Validation states
     ════════════════════════════════════════════════════════════════════ */

  /* Error */
  .form__input--error,
  .form__textarea--error,
  .form__select--error {
    border: var(--input-border-error);
  }

  .form__input--error:focus,
  .form__textarea--error:focus,
  .form__select--error:focus {
    border: var(--input-border-error);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--feedback-error) 15%, transparent);
  }

  /* Success */
  .form__input--success,
  .form__textarea--success,
  .form__select--success {
    border: var(--input-border-success);
  }

  .form__input--success:focus,
  .form__textarea--success:focus,
  .form__select--success:focus {
    border: var(--input-border-success);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--feedback-success) 15%, transparent);
  }


  /* ════════════════════════════════════════════════════════════════════
     Specific input types
     ════════════════════════════════════════════════════════════════════ */

  /* Textarea — resizable vertically only */
  .form__textarea {
    min-block-size: 8rem;
    resize: vertical;
  }

  /* Select — custom chevron via SVG background */
  .form__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--input-padding-inline) center;
    padding-inline-end: calc(var(--input-padding-inline) * 2 + 1rem);
    cursor: pointer;
  }


  /* ════════════════════════════════════════════════════════════════════
     Helper text
     ════════════════════════════════════════════════════════════════════ */

  /* Hint — neutral supplementary instruction below the input */
  .form__hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-snug);
  }

  /* Error message — destructive feedback below the input */
  .form__error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--feedback-error);
    line-height: var(--leading-snug);
  }


  /* ════════════════════════════════════════════════════════════════════
     Custom checkbox
     ════════════════════════════════════════════════════════════════════ */

  .form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-s);
    cursor: pointer;
  }

  .form__checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin-block-start: 0.1875rem;    /* optical alignment with label cap-height */
    background-color: var(--input-bg);
    border: var(--input-border);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition:
      border           var(--input-transition),
      background-color var(--input-transition);
  }

  .form__checkbox input[type="checkbox"]:hover {
    border: var(--input-border-hover);
    background-color: var(--input-bg-hover);
  }

  .form__checkbox input[type="checkbox"]:checked {
    background-color: var(--surface-primary);
    border-color: var(--border-focus);
    /* Checkmark SVG inline — white stroke */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 6 3 3 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }

  .form__checkbox input[type="checkbox"]:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .form__checkbox__label {
    font-size: var(--text-m);
    color: var(--text-body);
    line-height: var(--leading-normal);
  }


  /* ════════════════════════════════════════════════════════════════════
     Custom radio
     ════════════════════════════════════════════════════════════════════ */

  .form__radio {
    display: flex;
    align-items: flex-start;
    gap: var(--space-s);
    cursor: pointer;
  }

  .form__radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin-block-start: 0.1875rem;
    background-color: var(--input-bg);
    border: var(--input-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition:
      border           var(--input-transition),
      background-color var(--input-transition),
      box-shadow       var(--input-transition);
  }

  .form__radio input[type="radio"]:hover {
    border: var(--input-border-hover);
    background-color: var(--input-bg-hover);
  }

  .form__radio input[type="radio"]:checked {
    border-color: var(--border-focus);
    background-color: var(--body-bg);
    /* Filled circle via layered inset shadows */
    box-shadow:
      inset 0 0 0 4px var(--body-bg),
      inset 0 0 0 8px var(--surface-primary);
  }

  .form__radio input[type="radio"]:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .form__radio__label {
    font-size: var(--text-m);
    color: var(--text-body);
    line-height: var(--leading-normal);
  }


  /* ════════════════════════════════════════════════════════════════════
     SEARCH FORM — WordPress get_search_form() output
     ════════════════════════════════════════════════════════════════════ */

  .search-form {
    display: flex;
    gap: var(--space-xs);
    max-inline-size: 36rem;
  }

  .search-form label {
    flex: 1;
    margin: 0;
  }

  .search-field {
    inline-size: 100%;
    padding-block: 0.625rem;
    padding-inline: var(--space-s);
    font-size: var(--text-m);
    color: var(--text-body);
    background-color: var(--input-bg);
    border: var(--input-border);
    border-radius: var(--radius-s);
    outline: none;
    transition:
      border-color var(--duration-fast) var(--ease-default),
      box-shadow   var(--duration-fast) var(--ease-default);
  }

  .search-field:focus {
    border-color: var(--border-focus);
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .search-submit {
    flex-shrink: 0;
    padding-block: 0.625rem;
    padding-inline: var(--space-m);
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    color: var(--text-on-primary);
    background-color: var(--surface-primary);
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-default);
  }

  .search-submit:hover {
    background-color: var(--primary-dark);
  }

  .search-submit:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }


  /* ════════════════════════════════════════════════════════════════════
     V3 — Contact Form Component
     ════════════════════════════════════════════════════════════════════ */

  .contact-form {
    max-inline-size: 35rem;
    padding: var(--space-xl);
    border-radius: var(--radius-l);
    background: var(--white);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 24px oklch(0% 0 0 / 5%);
  }

  .contact-form__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-block-end: var(--space-l);
  }

  .contact-form__title {
    font-family: var(--font-heading);
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin: 0;
  }

  .contact-form__subtitle {
    font-size: var(--text-s);
    color: var(--text-muted);
    margin: 0;
  }

  .contact-form__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }

  .contact-form__row {
    display: flex;
    gap: var(--space-m);
  }

  .contact-form__row > * {
    flex: 1;
  }

  .contact-form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    inline-size: 100%;
    block-size: 3rem;
    border-radius: var(--radius-m);
    background: var(--surface-primary);
    color: var(--text-on-primary);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    border: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-default);
  }

  .contact-form__submit:hover {
    background: var(--primary-hover);
  }

  .contact-form__submit-icon {
    width: 1rem;
    height: 1rem;
  }

  /* ── Form group: label + field wrapper (used by contact-form) ── */
  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .form-group__label {
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
  }

  .form-group__field {
    display: block;
    width: 100%;
    padding: var(--space-xs) var(--space-s);
    font-size: var(--text-s);
    font-family: inherit;
    color: var(--text-main);
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-s);
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
  }

  .form-group__field::placeholder {
    color: var(--text-subtle);
  }

  select.form-group__field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-s) center;
    padding-right: var(--space-xl);
  }

  textarea.form-group__field {
    resize: vertical;
    min-height: 6rem;
  }

  /* ── Focus glow for V3 inputs ── */
  .form-group__field:focus,
  .form-group__field:focus-within {
    background: var(--white);
    border-color: var(--border-focus);
    border-width: 2px;
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--border-focus) 13%, transparent);
  }

  .form-group--error .form-group__field {
    background: var(--feedback-error-light);
    border-color: var(--feedback-error);
    border-width: 2px;
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--feedback-error) 10%, transparent);
  }

  .form-group--success .form-group__field {
    border-color: var(--feedback-success);
    border-width: 2px;
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--feedback-success) 10%, transparent);
  }

  .form-group__message {
    font-size: var(--text-xs);
    margin: 0;
  }

  .form-group--error .form-group__message {
    color: var(--feedback-error);
  }

  @media (max-width: 30em) {
    .contact-form__row {
      flex-direction: column;
    }
  }

}