/* ------------------------------------------------------------------
   Newsletter capture.

   Layout and states only. The controls themselves are the site's own:
   `.form-field input` (10px radius, #e2e1e5 border, black on focus) and
   `.primary-btn` (black, 48px pill) — the same pair the account modals use.
   Nothing here restyles them, so a future change to style.css carries through.

   Namespaced .msm-nl* so nothing collides with the 200KB style.css.
   Loaded from partials/head.blade.php rather than pushed onto
   @stack('component-css'), which resolves inline in the head before the
   later includes get a chance to push to it.
   ------------------------------------------------------------------ */

.msm-nl {
    width: 100%;
}

.msm-nl__heading {
    margin: 0 0 6px;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.msm-nl__copy {
    margin: 0 0 22px;
    line-height: 1.4;
    max-width: 44ch;
    opacity: 0.68;
}

/* The field is labelled for screen readers; the placeholder carries it visually. */
.msm-nl__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.msm-nl__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- the row ---------- */

.msm-nl__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 520px;
}

.msm-nl__field {
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 0;
}

/* One state, not two: the field always looks the way it used to look only on
   focus — white, black hairline, pill. A greyed-out resting state read as
   disabled. Rounded to 48px to match .primary-btn, with the horizontal padding
   a pill needs so the text is not jammed against the curve.

   Same specificity as `.form-field input` in style.css, and this file loads
   after it, so these win without !important. 16px stops iOS zooming on focus. */
.msm-nl__field input {
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 48px;
    padding: 13px 24px;
    color: #000;
}

.msm-nl__field input::placeholder {
    color: #9a9a94;
}

/* Focus is the same shape, marked by the ring rather than a colour change. */
.msm-nl__field input:focus {
    background-color: #fff;
    border: 1px solid #000;
    outline: 2px solid #000;
    outline-offset: 2px;
}

.msm-nl__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
    /* Match the field's height so the pill and the box sit on the same baseline,
       and run a little wider than the stock .primary-btn (12px 48px). */
    padding: 13px 56px;
    line-height: 1.2;
}

.msm-nl__btn[disabled] {
    cursor: default;
    opacity: 0.6;
}

.msm-nl.is-busy .msm-nl__spinner {
    display: inline-block !important;
}

/* ---------- messages ---------- */

.msm-nl__msg {
    margin: 10px 0 0;
    line-height: 1.45;
}

.msm-nl__msg:empty {
    display: none;
}

.msm-nl.is-error .msm-nl__msg {
    color: #b3261e;
}

.msm-nl.is-done .msm-nl__msg {
    font-weight: 600;
}

.msm-nl__note {
    margin: 10px 0 0;
    line-height: 1.45;
    opacity: 0.55;
}

/* Once subscribed the fields go away and the message carries the result. */
.msm-nl.is-done .msm-nl__row,
.msm-nl.is-done .msm-nl__note {
    display: none;
}

/* ---------- variant: band (end of article) ----------
   Hairline rules and nothing else: no card, no shadow, no fill. It should
   read as the last section of the article rather than an ad under it. */

/* The divider rules are gone: the yellow stripe is the separation now. */
.msm-nl--band {
    padding: 0;
    margin: 0;
}

/* Full-bleed yellow stripe.

   Flush to the page edges left and right, and flush to whatever follows it,
   but held 50px clear of the tags above so it does not read as glued to them.
   The tags' own trailing padding is zeroed further down, so this margin is the
   whole gap rather than being added to it. */
.msm-nl-stripe {
    background: #f5ff95;
    color: #000;
    padding: 55px 0;
    margin: 50px 0 0;
}

/* Desktop: words on the left, form on the right. Two columns keep the block
   short, which matters here — it sits just above the footer. */
@media (min-width: 992px) {
    .msm-nl--band {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 56px;
    }

    .msm-nl--band .msm-nl__text {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* One line. The controls below were narrowed to free up the room for it. */
    .msm-nl--band .msm-nl__heading {
        font-size: 2.333rem;
        line-height: 1.05;
        white-space: nowrap;
    }

    /* The sub is one line. The 44ch cap on .msm-nl__copy is what wrapped it. */
    .msm-nl--band .msm-nl__copy {
        max-width: none;
        margin-bottom: 0;
        font-size: 1rem;
        white-space: nowrap;
    }

    /* The form column sizes to its contents rather than to a fixed width, so
       changing the button cannot squeeze the field. The words take the rest.

       The padding compensates for the note underneath: `align-items: center`
       centres the whole form, note included, which left the field and button
       sitting a little above the heading's centre. Pushing the form down by
       roughly the note's height puts the row itself on the centre line. */
    .msm-nl--band .msm-nl__form {
        flex: 0 0 510px;
        padding-top: 31px;
    }

    .msm-nl--band .msm-nl__row {
        max-width: none;
        flex-wrap: nowrap;
    }

    /* Field and button split the column evenly, so they stay exactly the same
       width whatever the button says — sizing the button by its padding left
       the field a few pixels narrower than it. */
    .msm-nl--band .msm-nl__field,
    .msm-nl--band .msm-nl__btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .msm-nl--band .msm-nl__btn {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Centred under the controls rather than hanging off the left edge. */
    .msm-nl--band .msm-nl__note,
    .msm-nl--band .msm-nl__msg {
        text-align: center;
    }
}

/* The sub and the small print share one grey, set explicitly rather than with
   opacity so they match exactly on the yellow. */
.msm-nl--band .msm-nl__copy,
.msm-nl--band .msm-nl__note {
    color: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

/* Close the seam above the stripe.

   The credits/tags section immediately before it carries `pb-3`, and that
   padding is page-white — it showed as a thin white band between the tags and
   the yellow. Zeroed only where the stripe actually follows, so the same
   component is untouched everywhere else on the site. */
.credits-area:has(+ .msm-nl-stripe) {
    padding-bottom: 0 !important;
}

/* Fallback for browsers without :has() — the stripe absorbs the tags' padding
   into its own 50px gap so the spacing lands the same either way. */
@supports not selector(:has(*)) {
    .msm-nl-stripe {
        margin-top: 34px;
    }
}

/* Between tablet and desktop there is not enough width to hold the heading on
   one line beside the form, so it wraps again rather than overflowing. */
@media (min-width: 992px) and (max-width: 1299.98px) {
    .msm-nl--band .msm-nl__heading {
        white-space: normal;
        font-size: 2rem;
        text-wrap: balance;
    }

    .msm-nl--band .msm-nl__copy {
        white-space: normal;
    }

    .msm-nl--band .msm-nl__form {
        flex: 0 0 420px;
    }
}

/* ---------- variant: hero (homepage marquee) ---------- */

.msm-nl--hero {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.msm-nl--hero .msm-nl__row {
    max-width: 540px;
}

.msm-nl--hero .msm-nl__msg,
.msm-nl--hero .msm-nl__note {
    text-align: center;
}

/* ---------- phone ---------- */

@media (max-width: 575.98px) {
    .msm-nl--band {
        padding: 34px 0;
        margin-top: 40px;
    }

    .msm-nl__row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .msm-nl__field,
    .msm-nl__btn {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* ------------------------------------------------------------------
   Slide-in newsletter panel

   Enters from the left edge rather than covering the page — the pattern
   It's Nice That uses, and the only popup among the eight design
   publications surveyed. There is no scrim on purpose: the article stays
   readable behind it, which is what makes meeting it mid-read tolerable.
   Because it never blocks the page, focus is not trapped.

   Ground is #f5ff95, the same yellow as .inspiration-area on the homepage.
   ------------------------------------------------------------------ */

.msm-nl-pop {
    position: fixed;
    left: 0;
    top: 50%;
    z-index: 1200;
    width: min(400px, 92vw);
    /* Parked off-canvas and inert until opened. visibility is delayed on the
       way out so the panel is still painted while it slides away. */
    transform: translate(-101%, -50%);
    visibility: hidden;
    transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.36s;
}

.msm-nl-pop.is-open {
    transform: translate(0, -50%);
    visibility: visible;
    transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .msm-nl-pop,
    .msm-nl-pop.is-open {
        transition: visibility 0s;
    }
}

.msm-nl-pop__panel {
    position: relative;
    background: #f5ff95;
    color: #000;
    padding: 34px 30px 28px;
    /* Flush to the edge, so only the inner corners round. */
    border-radius: 0 20px 20px 0;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.msm-nl-pop__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #000;
    background: transparent;
    border: 0;
    border-radius: 50%;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.msm-nl-pop__close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.07);
}

.msm-nl-pop__close:focus-visible {
    opacity: 1;
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ---------- the form inside the panel ---------- */

.msm-nl--popup .msm-nl__heading {
    font-size: 1.5rem;
    line-height: 1.12;
    margin-bottom: 8px;
    padding-right: 26px; /* clears the close button */
}

.msm-nl--popup .msm-nl__copy {
    font-size: 0.9rem;
    max-width: none;
    margin-bottom: 18px;
    opacity: 0.75;
}

/* Stacked: a 400px panel has no room for a field and a pill side by side. */
.msm-nl--popup .msm-nl__row {
    flex-wrap: wrap;
    gap: 10px;
    max-width: none;
}

.msm-nl--popup .msm-nl__field,
.msm-nl--popup .msm-nl__btn {
    flex: 1 1 100%;
    width: 100%;
}

/* White field on the yellow, rather than the soft grey used on white pages. */
.msm-nl--popup .msm-nl__field input {
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.14);
}

.msm-nl--popup .msm-nl__field input:focus {
    border: 1px solid #000;
}

.msm-nl--popup .msm-nl__note {
    font-size: 0.78rem;
    opacity: 0.62;
}

/* ---------- phone: a bottom sheet, never a full-screen interstitial ----------
   Google treats intrusive mobile interstitials as a ranking problem, which
   matters given the SEO work in flight. */

@media (max-width: 767.98px) {
    .msm-nl-pop {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        transform: translateY(101%);
    }

    .msm-nl-pop.is-open {
        transform: translateY(0);
    }

    .msm-nl-pop__panel {
        border-radius: 20px 20px 0 0;
        padding: 28px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    }
}