/*
 * Moduli a pillola. .form__grid = campi affiancati che vanno a capo; .field = etichetta + campo;
 * .inline-form = campo e pulsante nella stessa pillola bianca (email di adesione, ricerca).
 * In fondo gli adattamenti per il markup di Contact Form 7.
 */
@layer components {
  .form { position: relative; display: flex; flex-direction: column; gap: 12px; }
  .form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
  .form__full { grid-column: 1 / -1; }
  .form__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
  .form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form__note { font-size: 14px; line-height: 1.5; color: var(--color-muted-text); }
  .form__section { grid-column: 1 / -1; margin-top: 12px; font-weight: 700; font-size: 18px; }

  .field { position: relative; display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--color-ink); }
  /* Etichetta visibile solo ai lettori di schermo (il segnaposto fa da etichetta visiva, come nel layout) */
  .field__label--sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* :where = specificità minima, così le regole di textarea e select qui sotto vincono senza trucchi */
  .field :where(input:not([type=checkbox], [type=radio], [type=file]), select, textarea) {
    width: 100%; min-width: 0; height: 56px; padding: 0 22px;
    border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-bg);
    font-family: inherit; font-weight: 400; font-size: 16px; letter-spacing: var(--tracking); color: var(--color-ink);
    outline: none;
    &::placeholder { color: var(--color-muted-text); opacity: 1; }
    /* Focus ben visibile (WCAG 2.4.7): anello primario di 2px */
    &:focus { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
  }
  .field textarea { height: auto; min-height: 140px; padding: 18px 22px; border-radius: 20px; line-height: 1.5; resize: vertical; }
  .field select { appearance: none; padding-right: 44px; cursor: pointer; }
  .field__select { position: relative; display: block; }
  .field__select::after {
    content: ""; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; pointer-events: none;
    border-right: 1.5px solid var(--color-ink); border-bottom: 1.5px solid var(--color-ink); transform: translateY(-75%) rotate(45deg);
  }
  .field input[type=file] { font-size: 14px; font-weight: 400; color: var(--color-ink-soft); }
  .field input[type=file]::file-selector-button {
    margin-right: 12px; padding: 10px 16px; border: 0; border-radius: var(--radius-pill); cursor: pointer;
    background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-ink); color: var(--color-ink); font: inherit; font-weight: 600;
  }
  .field__hint { font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--color-muted-text); }

  .check {
    display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); cursor: pointer;
    & input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--color-primary); }
    & a { font-weight: 600; text-decoration: underline; }
  }

  /* Campo + pulsante nella stessa pillola */
  .inline-form {
    display: flex; align-items: center; gap: 10px;
    min-height: 64px; padding: 5px 5px 5px 24px; border-radius: var(--radius-pill); background: var(--color-bg);
    & input { flex: 1; min-width: 0; height: 54px; border: 0; background: transparent; outline: none; font-family: inherit; font-size: 16px; letter-spacing: var(--tracking); color: var(--color-ink); }
    & input::placeholder { color: var(--color-muted-text); opacity: 1; }
    &:focus-within { box-shadow: 0 0 0 3px var(--color-accent); }
    & .wpcf7-form-control-wrap { flex: 1; min-width: 0; }
    & .wpcf7-form-control-wrap input { width: 100%; }
    & .button { flex: none; white-space: nowrap; }
  }

  /* Esito dell'invio */
  .form__done { display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: var(--radius-l); background: var(--color-bg); }
  .form__done-title { font-weight: 700; font-size: 22px; letter-spacing: -0.03em; }

  /* ---------- Contact Form 7 ---------- */
  .wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .form .hidden-fields-container { display: none; }
  .form .wpcf7-form-control-wrap { display: block; }
  .form .wpcf7-not-valid-tip { display: block; margin: 6px 22px 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--color-error); }
  .field .wpcf7-not-valid { border-color: var(--color-error); }
  .check .wpcf7-list-item { display: block; margin: 0; }
  .check .wpcf7-list-item label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
  .form .wpcf7-response-output {
    margin: 0; padding: 14px 20px; border-radius: var(--radius-m); font-size: 15px; line-height: 1.5;
    background: color-mix(in srgb, var(--color-error) 8%, var(--color-bg)); color: var(--color-ink);
    &:empty { display: none; }
  }
  .form.sent .wpcf7-response-output { background: var(--color-bg); }
  .form.submitting { opacity: 0.6; pointer-events: none; }
  .wpcf7-spinner { display: none; }
}