// =============================================================================
// NEWSLETTER-FORM — Task #29 (v2, was newsletter)
// White card inside beige section. Checkboxes + email + SUBSCRIBE button.
// Mobile-first: base = 375px, desktop via respond-to('desktop')
// Figma: web 18580:7228 / mobile 18580:7255
//   Web:    section px-120 py-80; card p-40 gap-60; form col 589px;
//           2 checkboxes in a row gap-40, legal below; email 400px + submit flex-1
//   Mobile: section px-16 py-80; card p-40 gap-60; all stacked gap-16;
//           email h-48 full-width, submit full-width below
// Selectors match components.html markup:
//   __card > __intro (__eyebrow/__heading) + __form-col > __form >
//   __checkboxes > __checkbox-row + __checkbox-label(--legal)
//   (__checkbox-input + __checkbox-custom) ... __email-row > __email-input + __submit
// =============================================================================

@import '../mixins';

.newsletter-form {
  // Section rhythm: 56px mobile+tablet, 80px laptop+ (--section-space,
  // tokens.scss). Was a flat 80px at every width (including mobile) — see
  // the (now redundant) desktop override below — normalised onto the shared
  // rhythm so this component isn't the one exception to "mobile/tablet get
  // 56px, laptop+ gets 80px".
  padding-block: var(--section-space); // (bg via .bg-pampas on <section>; horizontal inset via .container)
  // Same centering technique as .footer__cta-section (_footer.scss): the
  // card's own width:100%/max-width:var(--container-max) below only caps its
  // width, it doesn't position it — without this it sits flush left once the
  // section is wider than 1200px instead of centered like the footer's card.
  display: flex;
  justify-content: center;

  &__card {
    background-color: var(--color-white);
    padding: 2.5rem;                        // p-40
    display: flex;
    flex-direction: column;
    gap: 3.75rem;                           // gap-60
    width: 100%;
    max-width: var(--container-max);        // 1200px
  }

  &__intro {
    display: flex;
    flex-direction: column;
    gap: 8px;                               // eyebrow → heading gap-8
  }

  &__eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-lg);               // mobile: 18px semibold sentence-case
    font-weight: 600;
    line-height: var(--lh-lg-tight);       // 28px
    color: var(--color-nandor);            // #49554c
    margin: 0;
  }

  &__heading {
    font-family: var(--font-display);
    font-size: var(--fs-display-md);       // mobile: 36px
    font-weight: 400;
    line-height: var(--lh-display-md);     // 44px
    letter-spacing: -0.72px;
    color: var(--color-gold-dark);         // #956019
    margin: 0;
  }

  // ── Form column ──────────────────────────────────────────────────────────
  &__form {
    display: flex;
    flex-direction: column;
    gap: 16px;                             // checkboxes → email row gap-16
  }

  &__checkboxes {
    display: flex;
    flex-direction: column;
    gap: 16px;                             // rows gap-16
  }

  &__checkbox-row {
    display: flex;
    flex-direction: column;                // mobile: stacked
    gap: 16px;
  }

  // ── Custom checkbox — label wraps input + custom box + text ──────────────
  &__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;                             // box → label gap-12
    padding-block: 4px;                    // Figma item py-4
    font-family: var(--font-body);
    font-size: var(--fs-sm);              // 14px
    line-height: var(--lh-sm);            // 20px
    color: var(--color-text-tertiary);    // #535862
    cursor: pointer;

    a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
  }

  &__checkbox-label--legal {
    font-size: var(--fs-xs);              // 12px legal text
    line-height: var(--lh-xs);            // 18px
    color: var(--color-text-muted);       // #717680
  }

  &__checkbox-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip-path: inset(50%);
    overflow: hidden;

    &:focus-visible + .newsletter-form__checkbox-custom {
      outline: 2px solid var(--color-gold);
      outline-offset: 2px;
    }

    &:checked + .newsletter-form__checkbox-custom {
      background-color: var(--color-brand);
      border-color: var(--color-brand);

      &::after {
        opacity: 1;
      }
    }
  }

  &__checkbox-custom {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;                       // aligns box with first text line
    background-color: var(--color-white);
    border: 1px solid var(--color-border); // #d5d7da
    border-radius: var(--radius-xs);       // 4px
    transition: background-color 0.15s ease, border-color 0.15s ease;

    // Check mark
    &::after {
      content: '';
      position: absolute;
      left: 4.5px;
      top: 1.5px;
      width: 5px;
      height: 9px;
      border: solid var(--color-white);
      border-width: 0 1.5px 1.5px 0;
      transform: rotate(45deg);
      opacity: 0;
      transition: opacity 0.15s ease;
    }
  }

  // ── Email + button row ────────────────────────────────────────────────────
  &__email-row {
    display: flex;
    flex-direction: column;                // mobile: stacked
    gap: 16px;
  }

  &__email-input {
    width: 100%;
    height: 48px;                          // mobile: h-48
    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;                    // px-14 py-10
    box-shadow: var(--shadow-xs);
    text-transform: uppercase;

    &::placeholder {
      color: var(--color-border);          // #d5d7da placeholder_subtle
      text-transform: uppercase;
    }

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

  &__submit {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: var(--lh-base);
    text-transform: uppercase;
    color: var(--color-white);
    background-color: var(--color-brand);  // #b8923b
    border: none;
    padding: 12px 18px;                    // px-18 py-12
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;

    // Compound selector (2 classes) beats .btn-brand's `border-radius: 0 !important`
    // regardless of import order — Figma 18580:7254 specs 4px, not square, here.
    &.btn-brand {
      border-radius: var(--radius-xs) !important;  // 4px
    }

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

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

  // ── Desktop ──────────────────────────────────────────────────────────────
  @include respond-to('desktop') {
    &__eyebrow {
      font-size: var(--fs-xl);           // 20px
      line-height: var(--lh-xl);         // 30px
      text-transform: uppercase;
    }

    &__heading {
      font-size: var(--fs-display-lg);   // 48px
      line-height: var(--lh-display-md); // 44px — Figma: display-lg uses lh 44 here
      letter-spacing: 0;
    }

    &__form-col {
      width: 589px;                       // Figma form column width
      max-width: 100%;
    }

    &__checkbox-row {
      flex-direction: row;               // desktop: 2 checkboxes side by side
      gap: 40px;                         // gap-40
    }

    &__email-row {
      flex-direction: row;               // desktop: email + button side by side
      align-items: stretch;

      .newsletter-form__email-input {
        width: 400px;
        flex-shrink: 0;
      }

      .newsletter-form__submit {
        flex: 1;
        width: auto;
      }
    }
  }
}