/* =============================================================
   MAYHM Newsletter Signup — mayhm-newsletter.css
   Matches the brand's dark footer aesthetic:
   near-black background · off-white text · uppercase tracking
   ============================================================= */

/* ── Tokens ─────────────────────────────────────────────── */
.mayhm-nl {
    --nl-bg:          transparent;        /* inherits page/footer bg  */
    --nl-text:        #ffffff;
    --nl-muted:       rgba(255,255,255,0.55);
    --nl-border:      rgba(255,255,255,0.25);
    --nl-border-focus:rgba(255,255,255,0.85);
    --nl-input-bg:    transparent;
    --nl-btn-text:    #ffffff;
    --nl-font:        inherit;            /* inherits theme font stack */
    --nl-track:       0.12em;
    --nl-success:     #7ec8a0;
    --nl-error:       #e07070;
    --nl-radius:      0;                  /* brand uses sharp edges    */
    --nl-transition:  0.2s ease;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.mayhm-nl {
    background: var(--nl-bg);
    color:      var(--nl-text);
    font-family: var(--nl-font);
    max-width:  340px;          /* mirrors footer column width */
}

/* ── Heading label ───────────────────────────────────────── */
.mayhm-nl__heading {
    font-size:      0.68rem;
    font-weight:    600;
    letter-spacing: var(--nl-track);
    text-transform: uppercase;
    color:          var(--nl-text);
    margin:         0 0 0.9rem;
    padding:        0;
}

/* ── Blurb ───────────────────────────────────────────────── */
.mayhm-nl__blurb {
    font-size:   0.875rem;
    line-height: 1.55;
    color:       var(--nl-text);
    margin:      0 0 1.1rem;
    padding:     0;
}

/* ── Form field row ──────────────────────────────────────── */
.mayhm-nl__field {
    display:         flex;
    align-items:     center;
    border-bottom:   1px solid var(--nl-border);
    transition:      border-color var(--nl-transition);
}

.mayhm-nl__field:focus-within {
    border-color: var(--nl-border-focus);
}

/* ── Email input ─────────────────────────────────────────── */
.mayhm-nl__input {
    flex:            1 1 auto;
    min-width:       0;
    background:      var(--nl-input-bg);
    border:          none;
    outline:         none;
    color:           var(--nl-muted);
    font-family:     var(--nl-font);
    font-size:       0.8rem;
    letter-spacing:  0.03em;
    padding:         0.55rem 0.5rem 0.55rem 0;
    caret-color:     var(--nl-text);
    -webkit-appearance: none;
    appearance:      none;
    box-shadow:      none !important; /* override browser autofill */
}

.mayhm-nl__input::placeholder {
    color: var(--nl-muted);
}

.mayhm-nl__input:focus {
    color: var(--nl-text);
}

/* Suppress autofill background tint */
.mayhm-nl__input:-webkit-autofill,
.mayhm-nl__input:-webkit-autofill:hover,
.mayhm-nl__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--nl-text);
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* ── Submit button ───────────────────────────────────────── */
.mayhm-nl__btn {
    flex:            0 0 auto;
    background:      transparent;
    border:          none;
    outline:         none;
    color:           var(--nl-btn-text);
    font-family:     var(--nl-font);
    font-size:       0.68rem;
    font-weight:     600;
    letter-spacing:  var(--nl-track);
    text-transform:  uppercase;
    padding:         0.55rem 0 0.55rem 0.75rem;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      opacity var(--nl-transition);
}

.mayhm-nl__btn:hover:not(:disabled) {
    opacity: 0.7;
}

.mayhm-nl__btn:disabled {
    opacity: 0.45;
    cursor:  default;
}

/* ── Status message ──────────────────────────────────────── */
.mayhm-nl__msg {
    font-size:   0.78rem;
    margin:      0.6rem 0 0;
    padding:     0;
    min-height:  1.2em;
    line-height: 1.4;
}

.mayhm-nl__msg--success { color: var(--nl-success); }
.mayhm-nl__msg--error   { color: var(--nl-error);   }

/* ── Accessibility ───────────────────────────────────────── */
.screen-reader-text {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0,0,0,0);
    white-space:nowrap;
    border:     0;
}

@media (prefers-reduced-motion: reduce) {
    .mayhm-nl__field,
    .mayhm-nl__btn,
    .mayhm-nl__input { transition: none; }
}