/* Befora Newsletter Signup — scoped via data-component-id. */

[data-component-id="befora:newsletter-signup"] {
  background: var(--bef-canvas-raised);
  border-top: 1px solid var(--bef-hairline);
  border-bottom: 1px solid var(--bef-hairline);

  .befora-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--s-7);
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--s-7) var(--s-5);
  }

  .befora-eyebrow {
    font-family: var(--bef-mono);
    font-size: var(--fs-11);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bef-honey-deep);
    margin: 0 0 var(--s-3);
  }

  .befora-heading {
    font-family: var(--bef-display);
    font-size: var(--fs-36);
    font-weight: 400;
    letter-spacing: -0.005em;
    color: var(--bef-ink);
    margin: 0 0 var(--s-3);
  }

  .befora-description {
    color: var(--bef-stone);
    margin: 0;
    max-width: 38ch;
  }

  .befora-form-slot form {
    display: flex;
    gap: var(--s-2);
    align-items: center;
  }

  .befora-form-slot .form-item {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }

  .befora-form-slot .form-item label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .befora-form-slot input[type="email"] {
    width: 100%;
    font-family: var(--bef-body);
    font-size: var(--fs-15);
    color: var(--bef-ink);
    background: var(--bef-canvas);
    border: 1px solid var(--bef-control-border);
    border-radius: var(--r-2);
    padding: 12px 14px;
    transition:
      border-color var(--dur-2) var(--ease-quiet),
      box-shadow var(--dur-2) var(--ease-quiet);

    &:focus {
      outline: none;
      border-color: var(--bef-ember);
      box-shadow: 0 0 0 3px var(--bef-ember-tint);
    }

    &::placeholder {
      color: var(--bef-ash);
    }

    &.error {
      border-color: var(--bef-ember-deep, #4D1815);
    }
  }

  .befora-form-slot .webform-confirmation {
    font-family: var(--bef-body);
    color: var(--bef-ink);
  }

  .befora-form-slot input[type="submit"],
  .befora-form-slot button[type="submit"] {
    flex: 0 0 auto;
    font-family: var(--bef-body);
    font-size: var(--fs-15);
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--bef-canvas);
    background: var(--bef-ember);
    border: 1px solid var(--bef-ember);
    border-radius: var(--r-2);
    padding: 12px 22px;
    cursor: pointer;
    white-space: nowrap;
    transition:
      background var(--dur-2) var(--ease-quiet),
      border-color var(--dur-2) var(--ease-quiet);
  }

  .befora-form-slot input[type="submit"]:hover,
  .befora-form-slot button[type="submit"]:hover {
    background: var(--bef-ember-deep);
    border-color: var(--bef-ember-deep);
  }

  .befora-form-slot input[type="submit"]:focus-visible,
  .befora-form-slot button[type="submit"]:focus-visible {
    outline: 2px solid var(--bef-ink);
    outline-offset: 2px;
  }

  @media (width <= 768px) {
    .befora-inner {
      grid-template-columns: 1fr;
      gap: var(--s-5);
      padding: var(--s-5) var(--s-4);
    }
    .befora-heading { font-size: var(--fs-28); }
    .befora-form-slot form { flex-wrap: wrap; }
    .befora-form-slot input[type="email"] { flex: 1 1 100%; }
  }
}