// =============================================================================
// MAILCHIMP NEWSLETTER — theme override for the classic Mailchimp embed
// (raw HTML content element, tt_content uid 237, live on /keep-in-touch).
// HTML/JS are Mailchimp's own generated markup and validation script —
// frozen, per this task's requirement — this file only restyles it to match
// the site's design system. Real DOM (confirmed against the live page):
//
//   #mc_embed_shell
//     #mc_embed_signup
//       form#mc-embedded-subscribe-form
//         #mc_embed_signup_scroll
//           h2 ("Subscribe")
//           .indicates-required > .asterisk
//           .mc-field-group (×4: email, first name, last name, phone)
//             label > .asterisk
//             input[type=email|text]
//           #mergeRow-gdpr.mc-field-group
//             .content__gdpr > label + p + fieldset.mc_fieldset
//               label.checkbox.subfield > input[type=checkbox].gdpr + span
//             .content__gdprLegal > p > a
//           #mce-responses > .response#mce-error-response / #mce-success-response
//           div[aria-hidden] (honeypot — already inline-positioned off-screen, untouched)
//           .clear > input[type=submit]#mc-embedded-subscribe.button
//
// Specificity note: the content element already carries an inline <style>
// block pasted alongside the embed snippet (e.g. `#mc_embed_signup
// .mc-field-group{...}`, `#mc_embed_signup #mergeRow-gdpr .checkbox{...}`).
// That block sits later in the document than this compiled stylesheet, so at
// EQUAL specificity it would win cascade ties. Rather than reach for
// !important, every rule below is nested through the same real ID ancestors
// Mailchimp's own inline rules use (#mc_embed_shell → #mc_embed_signup, and
// → #mergeRow-gdpr / #mc-embedded-subscribe for the two rules that
// specifically target those) so this file's selectors always carry an equal
// or greater ID count and win on specificity alone.
//
// Token collision warning: the React booking widget (mounted on every page,
// including this one) injects its OWN global `:root { --space-N: ...; }`
// block into <head> at runtime — unscoped, and using a completely different
// *value-named* convention (its --space-8 literally means 8px) from this
// theme's *step-indexed* one (this theme's --space-8 means "step 8" = 32px).
// Injected after this stylesheet, it silently wins any name it shares with
// this theme's scale. --space-2/4/8/10/20 and --color-text-tertiary all
// collide with genuinely different values, so this file uses literal values
// for those instead of the usual token — every other token used below was
// checked against the widget's tokens.css and is either absent there or
// happens to share the same value, so it's safe to use normally.
// =============================================================================

@import '../mixins';

#mc_embed_shell {
  // ─── 1. Container / layout ─────────────────────────────────────────────────
  width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;

  // The embed's own inline <style> (pasted into the content element alongside
  // the snippet, so it sits LATER in the document than this compiled sheet)
  // declares `#mc_embed_shell{padding:40px 20px}` — a single ID, i.e. exactly
  // the same specificity as this file's root selector, so at a tie it wins on
  // source order. Repeating the ID here is a no-op against the DOM but adds
  // one to specificity, which takes the declaration back without reaching for
  // !important — the same out-specify approach the rest of this file uses.
  // Only `padding` needs the bump: the four declarations above happen to match
  // the inline block's own values exactly, so losing those ties changes
  // nothing.
  //
  // Asymmetric on purpose: this embed always sits directly under the content
  // element's own "NEWSLETTER FORM" headline, which already supplies the
  // visual separation above, so a full section's worth of padding on top just
  // reads as a gap. Bottom keeps the full section rhythm.
  &#mc_embed_shell {
    padding: var(--space-6) 1rem var(--space-14); // 24px top / 16px sides / 56px bottom (16px literal, see collision warning above)

    @include respond-to('tablet') {
      padding: 2rem var(--space-6) 5rem; // 32px top (literal) / 24px sides / 80px bottom
    }
  }

  #mc_embed_signup {
    position: relative; // anchors the decorative envelope icon below
    overflow: hidden;   // clips the icon's bleed at the card's rounded corners
    width: 100%;
    max-width: 43.75rem; // 700px — this page's own established measure for a single-column form (kept, only retheming color/type/spacing below)
    margin: 0 auto;
    background-color: var(--color-white);
    border: 2px solid var(--color-white); // matches .footer__cta-card's card treatment
    border-radius: var(--radius-xs);      // 4px
    box-shadow: var(--shadow-xs);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
    box-sizing: border-box;

    // Decorative slanted envelope icon, referenced from the requested
    // design — bleeds off the card's top-right corner (clipped by the
    // `overflow: hidden` above), sits behind the form content, and is
    // purely decorative (no semantic meaning, so an inert background image
    // rather than an <img> is correct here).
    &::before {
      content: '';
      position: absolute;
      top: -1.25rem;
      right: -1.25rem;
      width: 7rem;
      height: 5.25rem;
      z-index: 0;
      pointer-events: none;
      opacity: 0.16;
      transform: rotate(-12deg);
      background-repeat: no-repeat;
      background-size: contain;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' fill='none'%3E%3Crect x='4' y='4' width='112' height='82' rx='10' stroke='%23956019' stroke-width='4'/%3E%3Cpath d='M8 12 L60 54 L112 12' stroke='%23956019' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    form {
      position: relative; // sits above the envelope icon (z-index stacking)
      z-index: 1;
      padding: 2.5rem var(--space-6); // 40px (literal)/24px mobile
      box-sizing: border-box;
    }

    #mc_embed_signup_scroll {
      display: flex;
      flex-direction: column;
      gap: 1rem; // 16px between fields, matches newsletter-form__form (literal, see collision warning above)
    }

    // ─── 2. Typography ────────────────────────────────────────────────────────
    h2 {
      @include display-heading;
      font-size: var(--fs-display-xs); // 24px — a signup form heading, not a full section title
      text-align: left;
      margin: 0 0 0.5rem; // 8px, matches newsletter-form's eyebrow→heading gap (literal)
    }

    .indicates-required {
      text-align: right;
      font-family: var(--font-body);
      font-size: var(--fs-xs); // 12px
      line-height: var(--lh-xs);
      color: var(--color-text-muted);
      margin: 0 0 1rem; // 16px (literal)
    }

    .asterisk {
      color: var(--color-brand); // matches .required's asterisk color (_form-formframework.scss)
    }

    label {
      display: block;
      font-family: var(--font-body);
      font-size: var(--fs-sm);  // 14px
      font-weight: var(--fw-medium);
      line-height: var(--lh-sm);
      color: var(--color-text-secondary);
      margin-bottom: var(--space-1-5); // 6px, matches .form-label's label→input gap
    }

    // ─── 3. Form fields ───────────────────────────────────────────────────────
    .mc-field-group {
      width: 100%;
      margin: 0;
      box-sizing: border-box;
    }

    input[type='email'],
    input[type='text'] {
      width: 100%;
      box-sizing: border-box;
      font-family: var(--font-body);
      font-size: var(--fs-base); // 16px
      line-height: var(--lh-base);
      color: var(--color-text-primary);
      // Reference design: flat tinted fill, no visible border, small radius —
      // the border is kept declared (transparent) rather than removed so the
      // focus state can colour it in without shifting the box by 1px.
      background-color: var(--color-pampas); // #f2f1ec — the theme's own tan surface tone
      border: 1px solid transparent;
      border-radius: var(--radius-xs);       // 4px
      padding: 14px 18px;
      box-shadow: none;
      transition: border-color 0.2s ease, background-color 0.2s ease;

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

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

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

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

    #mergeRow-gdpr {
      width: 100%;
      margin: 2rem 0; // 32px (literal) — more breathing room from the fields above/below
      padding: 0;
      box-sizing: border-box;

      .content__gdpr {
        width: 100%;

        > label {
          margin-bottom: var(--space-3); // 12px
        }

        p {
          font-family: var(--font-body);
          font-size: var(--fs-sm);  // 14px
          line-height: var(--lh-base); // 24px — roomier than --lh-sm for these longer consent paragraphs
          color: #535862; // --color-text-tertiary, literal (collides with the widget's own, differing #414651 — see warning above)
          margin: 0 0 var(--space-5); // 20px
        }
      }

      .mc_fieldset {
        margin: var(--space-5) 0; // 20px
        padding: 0;
        border: 0;
        min-height: 0;
      }

      // ─── 4. Checkbox / radio controls ────────────────────────────────────────
      // Same custom-checkbox recipe as newsletter-form__checkbox-input/-custom
      // (box + checkmark drawn via ::before/::after), redrawn on the label
      // itself since Mailchimp's <input> can't be restructured without
      // touching its (frozen) HTML — see the :has() rules below for how the
      // checked/focus state reaches this box.
      .checkbox {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: var(--space-3); // 12px, matches newsletter-form__checkbox-label
        margin: 0;
        padding: 0.5rem 0; // 8px vertical (literal) — breathing room above/below the row
        font-family: var(--font-body);
        font-size: var(--fs-sm); // 14px
        line-height: var(--lh-sm); // 20px
        color: #535862; // --color-text-tertiary, literal (see collision warning above)
        cursor: pointer;

        // The box is an in-flow flex item (not absolutely positioned with a
        // hand-tuned `top`), sized to exactly one line-height tall. Combined
        // with the `align-items: flex-start` above, that makes its box span
        // precisely the first line box of the label text — so it is centred
        // on that first line by construction, and stays centred if the font
        // size or line-height ever change. The checkmark is a centred
        // background image on this same element rather than a second
        // absolutely-positioned pseudo-element, so there are no offsets to
        // keep in sync.
        //
        // Unchecked fill uses --color-pampas (the theme's cream/tan surface
        // tone), per the reference design's solid tan checkbox look.
        &::before {
          content: '';
          flex: 0 0 auto;
          width: var(--lh-sm);  // 20px — square, and equal to the line box height
          height: var(--lh-sm); // 20px
          box-sizing: border-box;
          background-color: var(--color-pampas);
          background-repeat: no-repeat;
          background-position: center;
          background-size: 14px 14px;
          border: 1px solid transparent;    // flat, borderless fill — matches the reference (and the inputs above)
          border-radius: var(--radius-2xs); // 2px — crisp square, matches the reference
          transition: background-color 0.15s ease, border-color 0.15s ease;
        }
      }

      input[type='checkbox'] {
        // Kept in the accessibility tree and mouse-clickable (not display:none),
        // just visually hidden — the label's ::before above is what actually
        // renders the checkbox, matching this site's existing custom-checkbox
        // pattern elsewhere. Positioned to overlay ::before (which sits at the
        // label's content-box origin, i.e. inset by its own padding) so the
        // real click/tap target lines up with what's drawn.
        position: absolute;
        left: 0;
        top: 0.5rem; // == .checkbox's own padding-top, where ::before's box starts
        width: var(--lh-sm);
        height: var(--lh-sm);
        margin: 0;
        padding: 0;
        opacity: 0;
        cursor: pointer;
      }

      // Mailchimp nests the real <input> INSIDE .checkbox (input, then span)
      // rather than as a preceding sibling of it, so the :checked/:focus
      // state has to reach back UP to the parent label to repaint the
      // ::before box above — `:has()` is the clean way to do that without
      // touching the (frozen) markup. The input itself stays fully
      // functional/keyboard-operable, just visually transparent.
      .checkbox:has(input:checked)::before {
        background-color: var(--color-brand);
        border-color: var(--color-brand);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.5 4.5L6.5 11.5L3 8' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      }

      .checkbox:has(input:focus-visible)::before {
        outline: 2px solid var(--color-gold);
        outline-offset: 2px;
      }
    }

    // ─── 7. Links (GDPR legal copy references Mailchimp's own privacy page) ───
    .content__gdprLegal {
      p {
        // Not the body-text mixin: its own desktop breakpoint override would
        // win the cascade tie against a later plain font-size decl here (same
        // selector, equal specificity, but the mixin's nested @media block
        // compiles after this rule and applies once desktop-width is active)
        // and silently scale this back up — this legal fine print is meant
        // to stay small at every width, matching
        // newsletter-form__checkbox-label--legal's own (non-scaling) recipe.
        font-family: var(--font-body);
        font-size: var(--fs-xs); // 12px
        font-weight: var(--fw-regular);
        line-height: var(--lh-xs);
        color: var(--color-text-muted);
        margin: var(--space-5) 0 0; // 20px
      }

      a {
        @include prose-link;
      }
    }

    // ─── 5. Messages / errors ─────────────────────────────────────────────────
    #mce-responses {
      width: 100%;
      margin-top: 1rem; // 16px (literal)

      .response {
        font-family: var(--font-body);
        font-size: var(--fs-sm); // 14px
        line-height: var(--lh-sm);
        padding: 0.5rem var(--space-3); // 8px (literal)/12px
        border-radius: var(--radius-xs);
      }

      #mce-error-response {
        color: var(--bs-form-invalid-color); // same token _field-error.scss/_form-formframework.scss use
      }

      #mce-success-response {
        color: var(--color-gold-dark); // no dedicated success token exists in this theme; reuses the brand-positive tone
      }
    }

    // ─── 6. Buttons ───────────────────────────────────────────────────────────
    #mc-embedded-subscribe {
      display: block;
      width: 100%;
      // Mailchimp's own stylesheet pins `.button { height: 32px }` with
      // border-box sizing, which clips the label once this file's taller
      // padding is applied (14+14 padding + 24px line-height needs 52px).
      // Released back to auto so the button sizes to its own content.
      height: auto;
      margin-top: 1rem; // 16px (literal)
      font-family: var(--font-body);
      font-size: var(--fs-base);
      font-weight: var(--fw-semibold);
      line-height: var(--lh-base);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-white);
      background-color: var(--color-brand); // #b8923b, matches newsletter-form__submit
      border: 1px solid var(--color-brand);
      border-radius: var(--radius-xs); // 4px — the reference's button is a small-radius rectangle, not a pill
      padding: 14px 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);
      }

      &: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;
      }
    }
  }

  // ─── 8. Responsive adjustments ──────────────────────────────────────────────
  // This element's own tablet padding lives in the &#mc_embed_shell block up
  // in section 1, where the specificity bump that beats the embed's inline
  // <style> is applied.
  @include respond-to('tablet') {
    #mc_embed_signup form {
      padding: 2.5rem; // 40px both axes (literal)
    }
  }

  @include respond-to('desktop') {
    #mc_embed_signup {
      h2 {
        font-size: var(--fs-display-sm); // 30px
      }
    }
  }
}