/*
 * Newsletter — block style for core/group (email sign-up section).
 * Reuse unit: block style. Consumes ONLY token CSS vars (no raw hex/px).
 *
 * The group wraps a heading + subhead + an inline email form. The form
 * is delivered via core/html inside the pattern (no server-side form
 * handler in the library; theme wires it to a mailing service at P7).
 *
 * Two variants:
 *   wpdl-newsletter       — light band (bg-base), centred layout
 *   wpdl-newsletter-dark  — dark band (bg-inverse), light text
 *
 * Form anatomy:
 *   <form class="wpdl-nl-form">
 *     <label class="wpdl-nl-label" for="nl-email">…</label>
 *     <div class="wpdl-nl-row">
 *       <input class="wpdl-nl-input" type="email" id="nl-email" …>
 *       <button class="wpdl-nl-btn" type="submit">…</button>
 *     </div>
 *   </form>
 *
 * Ordering: shared base → dark variant → heading → subhead → form row →
 *           input → button → states → focus → motion.
 * Each compound selector appears exactly once.
 *
 * Tokens read:
 *   component.input.bg / border / border-focus / radius / min-height
 *   component.button.bg.primary / primary-hover / text.primary / radius
 *   component.button.pad-x / pad-y / min-size
 *   semantic.color.bg.base / inverse · semantic.color.text.primary / inverse / muted
 *   semantic.color.border.base · semantic.color.interactive.focus
 *   semantic.typography.heading-2.* / body.* / label.*
 *   space.3 / space.4 / space.7 / space.13
 *   duration.base · easing.default
 */

/* --- Shared base ---------------------------------------------------------- */

.wp-block-group.is-style-wpdl-newsletter,
.wp-block-group.is-style-wpdl-newsletter-dark {
  padding-inline: var(--wp--custom--space--7);
  text-align: center;

  /* Background set in block attribute (Section Ownership Rule) — not here.
     Vertical padding is buyer-editable via spacingSizes preset in markup. */
}

/* --- Inner container ------------------------------------------------------ */

.wp-block-group.is-style-wpdl-newsletter > *,
.wp-block-group.is-style-wpdl-newsletter-dark > * {
  max-inline-size: 36rem;
  margin-inline: auto;
}

/* --- Heading -------------------------------------------------------------- */

.wp-block-group.is-style-wpdl-newsletter > .wp-block-heading,
.wp-block-group.is-style-wpdl-newsletter-dark > .wp-block-heading {
  font-family: var(--wp--custom--semantic--typography--heading-2--font-family);
  font-size: var(--wp--custom--semantic--typography--heading-2--font-size);
  font-weight: var(--wp--custom--semantic--typography--heading-2--font-weight);
  line-height: var(--wp--custom--semantic--typography--heading-2--line-height);
  letter-spacing: var(--wp--custom--semantic--typography--heading-2--letter-spacing);
  margin-block: 0 var(--wp--custom--space--4);
}

.wp-block-group.is-style-wpdl-newsletter > .wp-block-heading {
  color: var(--wp--custom--semantic--color--text--primary);
}

.wp-block-group.is-style-wpdl-newsletter-dark > .wp-block-heading {
  color: var(--wp--custom--semantic--color--text--inverse);
}

/* --- Subhead -------------------------------------------------------------- */

.wp-block-group.is-style-wpdl-newsletter > .wp-block-paragraph,
.wp-block-group.is-style-wpdl-newsletter-dark > .wp-block-paragraph {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: var(--wp--custom--semantic--typography--body--font-size);
  line-height: var(--wp--custom--semantic--typography--body--line-height);
  margin-block: 0 var(--wp--custom--space--7);
}

.wp-block-group.is-style-wpdl-newsletter > .wp-block-paragraph {
  color: var(--wp--custom--semantic--color--text--secondary);
}

.wp-block-group.is-style-wpdl-newsletter-dark > .wp-block-paragraph {
  color: var(--wp--custom--semantic--color--text--inverse);
  opacity: 0.8;
}

/* --- Form container ------------------------------------------------------- */

.wpdl-nl-form {
  inline-size: 100%;
  max-inline-size: 36rem;
  margin-inline: auto;
}

/* --- Label ---------------------------------------------------------------- */

.wpdl-nl-label {
  display: block;
  margin-block-end: var(--wp--custom--space--3);
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-size: var(--wp--custom--semantic--typography--label--font-size);
  font-weight: var(--wp--custom--semantic--typography--label--font-weight);
  letter-spacing: var(--wp--custom--semantic--typography--label--letter-spacing);
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--text--muted);
  text-align: start;
}

.wp-block-group.is-style-wpdl-newsletter-dark .wpdl-nl-label {
  color: var(--wp--custom--semantic--color--text--inverse);
  opacity: 0.7;
}

/* --- Row (input + button inline) ----------------------------------------- */

.wpdl-nl-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--custom--space--3);
  align-items: stretch;
}

/* --- Email input ---------------------------------------------------------- */

.wpdl-nl-input {
  flex: 1 1 12.5rem; /* 200px in rem */
  min-block-size: 2.75rem;
  padding-inline: var(--wp--custom--semantic--space--component--btn-x);
  padding-block: var(--wp--custom--semantic--space--component--btn-y);
  background-color: var(--wp--custom--semantic--color--input--bg);
  border: 0.0625rem solid var(--wp--custom--semantic--color--input--border);
  border-radius: var(--wp--custom--semantic--radius--input);
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: var(--wp--custom--semantic--typography--body--font-size);
  color: var(--wp--custom--semantic--color--text--primary);
  transition: border-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-nl-input::placeholder {
  color: var(--wp--custom--semantic--color--text--muted);
}

/* --- Submit button -------------------------------------------------------- */

.wpdl-nl-btn {
  min-block-size: 2.75rem;
  padding-inline: var(--wp--custom--semantic--space--component--btn-x);
  padding-block: var(--wp--custom--semantic--space--component--btn-y);
  background-color: var(--wp--custom--semantic--color--button--primary--bg);
  color: var(--wp--custom--semantic--color--button--primary--text);
  border: 0.0625rem solid transparent;
  border-radius: var(--wp--custom--semantic--radius--btn);
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-size: var(--wp--custom--semantic--typography--label--font-size);
  font-weight: var(--wp--custom--semantic--typography--label--font-weight);
  letter-spacing: var(--wp--custom--semantic--typography--label--letter-spacing);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    border-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

/* --- States --------------------------------------------------------------- */

.wpdl-nl-input:hover {
  border-color: var(--wp--custom--semantic--color--input--focus-border);
}

.wpdl-nl-btn:hover {
  background-color: var(--wp--custom--semantic--color--button--primary--hover-bg);
}

.wpdl-nl-btn:active {
  background-color: var(--wp--custom--semantic--color--button--primary--hover-bg);
}

/* --- Focus ---------------------------------------------------------------- */

.wpdl-nl-input:focus-visible {
  outline: 0.1875rem solid var(--wp--custom--semantic--color--focus--ring);
  outline-offset: 0.125rem;
  border-color: var(--wp--custom--semantic--color--input--focus-border);
}

.wpdl-nl-btn:focus-visible {
  outline: 0.1875rem solid var(--wp--custom--semantic--color--focus--ring);
  outline-offset: 0.125rem;
}

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wpdl-nl-input,
  .wpdl-nl-btn {
    transition: none;
  }
}

/* Front-store tone: gold eyebrow + serif title (Figma "Stay in Bloom"). */
.is-style-wpdl-newsletter .wpdl-newsletter__eyebrow {
  margin-block: 0 var(--wp--custom--space--2);
  color: var(--wp--custom--semantic--color--accent--secondary);
  font-family: var(--wp--custom--typography--family--sans);
  font-size: var(--wp--custom--typography--size--sm, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.is-style-wpdl-newsletter .wpdl-newsletter__title {
  margin-block: 0 var(--wp--custom--space--3);
  font-family: var(--wp--custom--typography--family--serif, serif);
  font-weight: 500;
}