// =============================================================================
// TYPO3 FORM FRAMEWORK — Contact Form (Figma 18580:6994 desktop / 18580:7210
// mobile — both are breakpoint variants of the same "CONTACT FORM" component
// already implemented once for newsletter-form's own repurposed contact form;
// same field list, same measurements, reused here verbatim).
//
// HTML is FROZEN per this task's explicit requirement: this is the real
// TYPO3 Form Framework "Bootstrap" preset output (.form-element/.form-label/
// .form-control/.form-select/.form-text/.btn, plus Bootstrap5's own
// .is-invalid/.invalid-feedback validation classes — confirmed against
// vendor/typo3/cms-form/Configuration/Form/Base/FormElements/Form.yaml's
// fieldProperties, not guessed). Every rule below is scoped under
// .frame-type-form_formframework so it can never leak onto Bootstrap forms
// used anywhere else in the project.
//
// This element lives inside <aside class="drawer"> > .drawer__body (see the
// live DOM — this content element was already placed inside a drawer), which
// already provides the 628px-wide fixed right panel, white background,
// scroll, and pt-40/px-80/pb-80 desktop padding (_drawer.scss) that Figma's
// own "CONTACT FORM" node specifies — deliberately NOT redeclared here to
// avoid doubling up the padding/width. This file only styles the form's own
// internal elements (header, fields, button).
// =============================================================================

.frame-type-form_formframework {
  // ─── Header ────────────────────────────────────────────────────────────────
  header {
    margin-bottom: 30px;                   // Figma: gap-30 from caption to first field

    h2 {
      font-family: var(--font-body);
      font-size: var(--fs-base);           // 16px
      font-weight: 600;
      line-height: var(--lh-base);         // 24px
      text-transform: uppercase;
      color: var(--color-nandor);          // #49554c
      margin: 0;
    }
  }

  // ─── Field rhythm ────────────────────────────────────────────────────────
  // Bootstrap's own .mb-3 (16px) on .form-element is what's actually in the
  // frozen HTML — override to Figma's 30px field-to-field gap instead of
  // adding a new margin utility class (that would mean editing the HTML).
  .form-element {
    margin-bottom: 30px !important;

    &:last-of-type {
      margin-bottom: 0 !important;
    }
  }

  // ─── Labels + required indicator ───────────────────────────────────────────
  .form-label {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: var(--font-body);
    font-size: var(--fs-sm);               // 14px
    font-weight: 500;
    line-height: var(--lh-sm);             // 20px
    color: var(--color-text-secondary);    // #414651
    margin-bottom: 6px;                    // Figma: gap-6 label → input
  }

  .required {
    color: var(--color-brand);             // #b8923b — Figma's required-asterisk color
  }

  // ─── Inputs / selects / textarea ───────────────────────────────────────────
  .form-control,
  .form-select {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-base);             // 16px
    line-height: var(--lh-base);
    color: var(--color-text-primary);
    background-color: var(--color-white);
    border: 1px solid var(--color-border); // #d5d7da
    border-radius: var(--radius-xs);       // 4px
    padding: 10px 14px;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.2s ease;

    &::placeholder {
      color: var(--color-text-muted);
      text-transform: uppercase;
    }

    &:focus {
      outline: none;
      border-color: var(--color-gold);
      box-shadow: var(--shadow-xs);
    }

    &:disabled {
      background-color: var(--color-bg-tertiary);
      color: var(--color-text-muted);
      cursor: not-allowed;
    }

    // Bootstrap5's own validation state — confirmed via Form.yaml's
    // fieldProperties.errorClassAttribute: is-invalid.
    &.is-invalid {
      border-color: var(--bs-form-invalid-color);

      &:focus {
        border-color: var(--bs-form-invalid-color);
      }
    }
  }

  // Select — appearance:none is already set globally by Bootstrap; just
  // recolor its own built-in chevron (--bs-form-select-bg-img) to the
  // muted gray Figma actually shows instead of Bootstrap's default dark
  // gray, and match the rest of this form's text-tertiary "unselected"
  // color convention.
  .form-select {
    color: var(--color-text-tertiary);
    padding-right: 40px;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23717680' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
  }

  textarea.form-control {
    min-height: 180px;
    border-radius: var(--radius-md);       // Figma: textarea uses the larger 8px radius
    padding: 12px 14px;
    text-transform: none;
    resize: vertical;

    &::placeholder {
      text-transform: uppercase;
    }
  }

  // ─── Helper / description text (e.g. under the Description textarea) ──────
  .form-text {
    display: block;
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: var(--fs-sm);               // 14px
    line-height: var(--lh-sm);
    color: var(--color-text-muted);
  }

  // ─── Validation error messages ──────────────────────────────────────────
  // Bootstrap5's own class (fieldProperties.errorMsgClassAttribute) — this
  // project doesn't otherwise style it, so no existing rule to conflict with.
  .invalid-feedback {
    display: block;
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--bs-form-invalid-color);
  }

  // ─── Submit button ──────────────────────────────────────────────────────
  .actions {
    margin-top: 30px;
  }

  // Matches the site's own .btn-gold recipe (components/_buttons.scss) —
  // the theme's actual solid-fill CTA color is --color-gold, not
  // --color-brand (that token is for other UI, e.g. the mobile nav bar bg).
  // Kept full-width here since this button spans the form, unlike the
  // auto-width nav/CTA instances of .btn-gold elsewhere.
  .btn.btn-primary {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: var(--lh-base);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-white);
    background-color: var(--color-gold);
    border: 1px solid var(--color-gold);
    border-radius: var(--radius-sm) !important; // beats Bootstrap's own .btn radius reset
    padding: 12px 18px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;

    &:hover {
      background-color: var(--color-gold-dark);
      border-color: var(--color-gold-dark);
      color: var(--color-white);
    }

    &:focus-visible {
      outline: 2px solid var(--color-gold);
      outline-offset: 2px;
    }

    &:disabled {
      background-color: var(--color-border);
      border-color: var(--color-border);
      cursor: not-allowed;
    }
  }
}