/* newsletter — @tokens: --newsletter-padding-y, --newsletter-input-min

   An email-capture band: a FULL-BLEED section (owns its own vertical padding +
   optional background) wrapping a `.hzo-container` with a title, supporting
   line, and an inline email input + submit button. Sibling to blocks/cta-band —
   same section shape, but the CTA here is a capture form rather than a link.

   NOTE: real submission wires to a Fluent Form (the .php handler / block swaps
   the inner control for the form embed). This is the STYLED capture band — the
   `<input>` is a visual/native control, NOT a live subscribe endpoint. The
   input still gets a proper label (aria-label in the template) + its own focus
   ring so the static band is accessible and demo-able on its own.

   Token-only: the band's vertical padding + the input's responsive min-width
   have no dedicated semantic role, so they're component tokens with a literal
   fallback (the icon-button.css dial pattern). Everything else reads a
   semantic/L1 token. */
.hzo-newsletter {
    padding-top: var(--newsletter-padding-y, var(--space-3xl));
    padding-bottom: var(--newsletter-padding-y, var(--space-3xl));
    background: var(--bg-alt);   /* light default surface; --dark flips it below */
}

/* Band heading — visual-h2 scale, heading ink, serif display face. */
.hzo-newsletter__title {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-heading);
    font-size: var(--fs-600);
    line-height: var(--lh-tight);
    color: var(--text-heading);
}

/* Supporting line — muted subtitle, measure-capped for readability. */
.hzo-newsletter__text {
    margin: 0 0 var(--space-lg);
    max-width: var(--prose-max-width);
    font-size: var(--fs-300);
    line-height: var(--lh-normal);
    color: var(--text-muted);
}

/* Inline row: input + submit. Wraps → stacks on narrow viewports. */
.hzo-newsletter__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

/* Native text input styled as a proper control (mirrors form.css / search.css).
   Grows to fill the row but never below its min so it stacks cleanly on mobile. */
.hzo-newsletter__input {
    flex: 1 1 var(--newsletter-input-min, 260px);
    min-width: 0;
    padding: var(--space-smd) var(--space-md);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: var(--fs-200);
    line-height: var(--lh-normal);
    transition: border-color var(--transition-base) ease, box-shadow var(--transition-base) ease;
}
.hzo-newsletter__input::placeholder { color: var(--text-muted); }

/* A11y — focus ring on the input (its own control). Reduced-motion handled
   globally by components/_base/a11y.css. */
.hzo-newsletter__input:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-color: var(--color-focus);
}
.hzo-newsletter__input[disabled],
.hzo-newsletter__input[aria-disabled="true"] {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}

/* Dark modifier — composes the .hzo-section--dark look: dark surface + on-dark
   ink. The submit button should ALSO get `.hzo-btn--on-dark` in this context
   (buttons.css owns that variant; this modifier only re-themes the band). */
.hzo-newsletter--dark {
    /* --surface-dark-bg lives in the (currently inert) L3 block, so fall back to
       the live --bg-dark-section — the exact idiom _base/surface-dark.css uses. */
    background: var(--surface-dark-bg, var(--bg-dark-section));
}
.hzo-newsletter--dark .hzo-newsletter__title {
    color: var(--heading-color-on-dark, #fff);
}
.hzo-newsletter--dark .hzo-newsletter__text {
    color: rgba(255, 255, 255, 0.85);
}

@media (prefers-reduced-motion: reduce) {
    .hzo-newsletter__input { transition: none; }
}