:root {
    --westmid-blue: #2F5496;
    --westmid-yellow: #FCD326;
    --westmid-yellow-light: #FFE56B;
    --westmid-ink: #17345F;
}

.westmid-loop,
.wp-block-westmid-stay-in-the-loop {
    position: relative;
    width: 100%;
    max-width: none !important;
    margin-block: 0 !important;
    padding-block: 0 !important;
    overflow: visible;
    isolation: isolate;
    color: var(--westmid-ink);
}

.westmid-loop__paint {
    position: absolute;
    inset: -7px 0 -7px;
    z-index: -1;
    background:
        linear-gradient(176deg, transparent 0 3%, rgba(255,229,107,.78) 3.4% 8%, transparent 8.4%),
        linear-gradient(2deg, transparent 0 4%, rgba(235,190,0,.23) 4.5% 10%, transparent 10.5%),
        linear-gradient(178deg, transparent 0 5%, var(--westmid-yellow) 5.5% 94%, transparent 94.5%);
    clip-path: polygon(0 8%, 7% 4%, 15% 7%, 27% 2%, 39% 6%, 52% 1%, 63% 5%, 75% 2%, 88% 6%, 100% 3%, 100% 94%, 90% 98%, 79% 95%, 67% 99%, 55% 94%, 43% 98%, 30% 95%, 18% 99%, 7% 95%, 0 98%);
}

.westmid-loop__desktop-inner {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(2rem, 5vw, 6rem);
    width: min(100% - 48px, 1440px);
    margin-inline: auto;
    padding-block: 20px;
}

.westmid-loop__copy {
    min-width: 0;
}

.westmid-loop__title,
.westmid-loop__description {
    margin: 0;
}

.westmid-loop__title {
    color: var(--westmid-blue);
    font: inherit;
    font-size: clamp(1.55rem, 2.1vw, 2.15rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.025em;
}

.westmid-loop__description {
    margin-top: .35rem;
    color: var(--westmid-ink);
    font-size: clamp(.94rem, 1.15vw, 1.05rem);
    line-height: 1.45;
}

.westmid-loop__form {
    margin-top: .75rem;
}

.westmid-loop__form form,
.westmid-loop__form .wp-block-jetpack-subscriptions__form,
.westmid-loop__form #subscribe-blog,
.westmid-loop__form .jetpack_subscription_widget {
    margin: 0 !important;
}

.westmid-loop__form p {
    margin: 0 !important;
}

.westmid-loop__form #subscribe-email,
.westmid-loop__form .wp-block-jetpack-subscriptions__form-elements {
    display: flex;
    align-items: stretch;
    gap: .55rem;
    width: min(100%, 650px);
}

.westmid-loop__form input[type="email"] {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    margin: 0 !important;
    padding: .72rem 1rem !important;
    border: 1px solid rgba(47,84,150,.25) !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #24364f !important;
    box-shadow: none !important;
    font: inherit;
}

.westmid-loop__form input[type="submit"],
.westmid-loop__form button[type="submit"] {
    min-height: 44px;
    margin: 0 !important;
    padding: .7rem 1.35rem !important;
    border: 1px solid var(--westmid-blue) !important;
    border-radius: 4px !important;
    background: var(--westmid-blue) !important;
    color: #fff !important;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.westmid-loop__form input:focus-visible,
.westmid-loop__form button:focus-visible,
.westmid-loop__mobile-trigger:focus-visible,
.westmid-loop__close:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.westmid-loop__brand {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: clamp(74px, 7.5vw, 102px);
    padding-right: .35rem;
}

.westmid-loop__stethoscope {
    display: block;
    width: auto;
    height: 100%;
    object-fit: contain;
    opacity: .95;
}

.westmid-loop__motto {
    display: flex;
    flex-direction: column;
    margin-left: clamp(-1.2rem, -1.6vw, -.7rem);
    color: var(--westmid-blue);
    font-size: clamp(.78rem, 1.1vw, 1.05rem);
    font-weight: 900;
    line-height: .93;
    letter-spacing: -.025em;
    text-align: left;
    text-transform: uppercase;
}

.westmid-loop__mobile-trigger,
.westmid-loop__sheet-layer {
    display: none;
}

.westmid-loop__notice {
    font-size: .9rem;
}

html.westmid-loop-sheet-open,
html.westmid-loop-sheet-open body {
    overflow: hidden;
}

@media (max-width: 700px) {
    .westmid-loop__desktop-inner {
        display: none;
    }

    .westmid-loop__paint {
        inset: -4px 0;
        clip-path: polygon(0 12%, 13% 6%, 27% 10%, 43% 4%, 61% 9%, 77% 5%, 100% 11%, 100% 90%, 84% 96%, 65% 91%, 46% 97%, 25% 92%, 0 96%);
    }

    .westmid-loop__mobile-trigger {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;
        min-height: 58px;
        margin: 0;
        padding: .7rem 1.2rem;
        border: 0;
        background: transparent;
        color: var(--westmid-blue);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .westmid-loop__mobile-title {
        font-size: 1.2rem;
        font-weight: 800;
        letter-spacing: -.02em;
    }

    .westmid-loop__mobile-action {
        white-space: nowrap;
        font-size: .95rem;
        font-weight: 750;
    }

    .westmid-loop__sheet-layer {
        position: fixed;
        inset: 0;
        z-index: 999999;
        display: block;
    }

    .westmid-loop__sheet-layer[hidden] {
        display: none;
    }

    .westmid-loop__backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        border: 0;
        background: rgba(10, 27, 53, .52);
        opacity: 0;
        transition: opacity .26s ease;
    }

    .westmid-loop__sheet {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        min-height: min(62vh, 520px);
        max-height: 88vh;
        overflow-y: auto;
        padding: 2.2rem 1.25rem 1.2rem;
        border-radius: 22px 22px 0 0;
        background: var(--westmid-yellow);
        color: var(--westmid-ink);
        box-shadow: 0 -18px 50px rgba(15, 40, 75, .24);
        transform: translateY(104%);
        transition: transform .26s ease;
    }

    .westmid-loop__sheet-layer.is-open .westmid-loop__backdrop {
        opacity: 1;
    }

    .westmid-loop__sheet-layer.is-open .westmid-loop__sheet {
        transform: translateY(0);
    }

    .westmid-loop__close {
        position: absolute;
        top: .65rem;
        right: .85rem;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(47,84,150,.1);
        color: var(--westmid-blue);
        font-size: 2rem;
        font-weight: 400;
        line-height: 1;
        cursor: pointer;
    }

    .westmid-loop__sheet-content {
        position: relative;
        z-index: 2;
        max-width: 34rem;
    }

    .westmid-loop__sheet .westmid-loop__title {
        padding-right: 3rem;
        font-size: clamp(1.75rem, 8vw, 2.35rem);
    }

    .westmid-loop__sheet .westmid-loop__description {
        max-width: 29rem;
        margin-top: .65rem;
        font-size: 1rem;
    }

    .westmid-loop__sheet .westmid-loop__form {
        max-width: 31rem;
        margin-top: 1.15rem;
        padding-bottom: 7rem;
    }

    .westmid-loop__sheet .westmid-loop__form #subscribe-email,
    .westmid-loop__sheet .westmid-loop__form .wp-block-jetpack-subscriptions__form-elements {
        display: grid;
        grid-template-columns: 1fr;
        gap: .65rem;
        width: 100%;
    }

    .westmid-loop__sheet .westmid-loop__form input[type="submit"],
    .westmid-loop__sheet .westmid-loop__form button[type="submit"] {
        width: 100%;
    }

    .westmid-loop__sheet .westmid-loop__brand {
        position: absolute;
        right: 1rem;
        bottom: .8rem;
        height: 78px;
        opacity: .82;
        pointer-events: none;
    }

    .westmid-loop__sheet .westmid-loop__motto {
        margin-left: -1rem;
        font-size: .78rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .westmid-loop__backdrop,
    .westmid-loop__sheet {
        transition: none !important;
    }
}

/* v1.0.1 refinements ----------------------------------------------------- */
/* Break out of constrained theme wrappers so the painted band reaches both
   viewport edges without requiring an additional Group block. */
.westmid-loop.alignfull,
.wp-block-westmid-stay-in-the-loop.alignfull {
    box-sizing: border-box;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
}

/* A little more breathing room above the heading while retaining a compact
   overall band. This is internal spacing, not an external section gap. */
.westmid-loop__desktop-inner {
    padding-top: 30px;
    padding-bottom: 18px;
}

/* Jetpack/WordPress.com can output the input and button in separate paragraph
   wrappers. Lay those wrappers out as a single row as well as supporting the
   newer block form markup. */
.westmid-loop__form--desktop > form,
.westmid-loop__form--desktop form,
.westmid-loop__form--desktop .jetpack_subscription_widget,
.westmid-loop__form--desktop #subscribe-blog {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: min(100%, 650px) !important;
}

.westmid-loop__form--desktop #subscribe-email,
.westmid-loop__form--desktop #subscribe-submit {
    display: block !important;
    width: auto !important;
}

.westmid-loop__form--desktop input[type="email"] {
    width: 100% !important;
    border-radius: 4px 0 0 4px !important;
}

.westmid-loop__form--desktop input[type="submit"],
.westmid-loop__form--desktop button[type="submit"] {
    width: auto !important;
    white-space: nowrap;
    border-radius: 0 4px 4px 0 !important;
}

/* Rebuild the small brand lock-up as one integrated mark. The motto occupies
   approximately the full stethoscope height and its yellow backing masks the
   stethoscope line beneath the overlap. */
.westmid-loop__brand {
    height: clamp(78px, 7vw, 102px);
}

.westmid-loop__motto {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    justify-content: space-between;
    height: 92%;
    margin-left: clamp(-2.25rem, -2.2vw, -1.55rem);
    padding: .08em .12em .08em .16em;
    background: var(--westmid-yellow);
    font-size: clamp(1.12rem, 1.55vw, 1.55rem);
    line-height: .86;
}

.westmid-loop__motto span {
    display: block;
}

@media (max-width: 700px) {
    .westmid-loop.alignfull,
    .wp-block-westmid-stay-in-the-loop.alignfull {
        margin-inline: calc(50% - 50vw) !important;
    }

    .westmid-loop__sheet .westmid-loop__brand {
        height: 76px;
    }

    .westmid-loop__sheet .westmid-loop__motto {
        height: 92%;
        margin-left: -1.65rem;
        padding-left: .14em;
        font-size: 1.05rem;
    }
}

/* v1.0.2 alignment and brand-lockup refinements ------------------------- */
/* The Jetpack shortcode includes an empty introductory wrapper before the
   field. Remove it from layout and anchor the actual form controls to the
   same left edge as the heading and description. */
.westmid-loop__form--desktop {
    width: min(100%, 650px);
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.westmid-loop__form--desktop #subscribe-text,
.westmid-loop__form--desktop .wp-block-jetpack-subscriptions__supports-newline,
.westmid-loop__form--desktop .screen-reader-text:empty {
    display: none !important;
}

.westmid-loop__form--desktop > form,
.westmid-loop__form--desktop form,
.westmid-loop__form--desktop .jetpack_subscription_widget,
.westmid-loop__form--desktop #subscribe-blog {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 650px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.westmid-loop__form--desktop #subscribe-email {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.westmid-loop__form--desktop #subscribe-submit {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Make the right-hand signature more legible while revealing slightly more
   of the stethoscope. The extended yellow mask guarantees that no cropped
   stethoscope line appears above, below or through the lettering. */
.westmid-loop__brand {
    height: clamp(86px, 7.7vw, 112px);
    transform: translateY(-6px);
}

.westmid-loop__motto {
    position: relative;
    isolation: isolate;
    height: 94%;
    margin-left: clamp(-1.55rem, -1.45vw, -1rem);
    padding: .02em .1em;
    background: transparent;
    font-size: clamp(1.28rem, 1.72vw, 1.72rem);
    line-height: .84;
}

.westmid-loop__motto::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -.28em;
    right: -.22em;
    bottom: -.28em;
    left: -.38em;
    background: var(--westmid-yellow);
}

@media (max-width: 700px) {
    .westmid-loop__sheet .westmid-loop__brand {
        height: 82px;
        transform: none;
    }

    .westmid-loop__sheet .westmid-loop__motto {
        height: 94%;
        margin-left: -1.15rem;
        padding: .02em .08em;
        font-size: 1.12rem;
    }

    .westmid-loop__sheet .westmid-loop__motto::before {
        top: -.25em;
        right: -.18em;
        bottom: -.25em;
        left: -.32em;
    }
}


/* v1.0.3 final-polish refinements --------------------------------------- */
/* Extend the desktop field slightly for better visual balance while keeping
   the existing compact one-line form. */
.westmid-loop__form--desktop,
.westmid-loop__form--desktop > form,
.westmid-loop__form--desktop form,
.westmid-loop__form--desktop .jetpack_subscription_widget,
.westmid-loop__form--desktop #subscribe-blog {
    width: min(100%, 700px) !important;
    max-width: 700px !important;
}

/* Remove the browser's white/black focus rings. A restrained inset colour
   change preserves a visible keyboard focus state without an external outline. */
.westmid-loop__form input:focus,
.westmid-loop__form input:focus-visible,
.westmid-loop__form button:focus,
.westmid-loop__form button:focus-visible,
.westmid-loop__mobile-trigger:focus,
.westmid-loop__mobile-trigger:focus-visible,
.westmid-loop__close:focus,
.westmid-loop__close:focus-visible {
    outline: none !important;
}

.westmid-loop__form input[type="email"]:focus,
.westmid-loop__form input[type="email"]:focus-visible {
    border-color: var(--westmid-blue) !important;
    box-shadow: inset 0 0 0 1px rgba(47,84,150,.35) !important;
}

.westmid-loop__form input[type="submit"]:focus,
.westmid-loop__form input[type="submit"]:focus-visible,
.westmid-loop__form button[type="submit"]:focus,
.westmid-loop__form button[type="submit"]:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.28) !important;
}

/* Move the lettering only a fraction to the right; size is unchanged. Extend
   the mask so no stethoscope line can appear behind or above the words. */
.westmid-loop__motto {
    margin-left: clamp(-1.28rem, -1.18vw, -.78rem);
}

.westmid-loop__motto::before {
    top: -.38em;
    right: -.28em;
    bottom: -.34em;
    left: -.52em;
}

/* Provide a guaranteed West Mid blue landing beneath the irregular lower
   paint edge. This sits behind the yellow and blends directly into the footer,
   preventing white anti-aliasing gaps at the join. */
.westmid-loop::after {
    content: "";
    position: absolute;
    z-index: -2;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 18px;
    background: var(--westmid-blue);
    pointer-events: none;
}

@media (max-width: 700px) {
    .westmid-loop__sheet .westmid-loop__motto {
        margin-left: -.96rem;
    }

    .westmid-loop__sheet .westmid-loop__motto::before {
        top: -.34em;
        right: -.24em;
        bottom: -.31em;
        left: -.45em;
    }

    /* The compact mobile banner retains its painted lower edge without adding
       a visible blue strip; the footer transition applies to desktop layout. */
    .westmid-loop::after {
        bottom: -5px;
        height: 12px;
    }
}


/* v1.0.4 optical-balance refinements ----------------------------------- */
/* Give the desktop email field one final, modest increase. The max-width
   remains capped so it scales down safely on narrower desktop layouts. */
.westmid-loop__form--desktop,
.westmid-loop__form--desktop > form,
.westmid-loop__form--desktop form,
.westmid-loop__form--desktop .jetpack_subscription_widget,
.westmid-loop__form--desktop #subscribe-blog {
    width: min(100%, 750px) !important;
    max-width: 750px !important;
}

/* Tighten only the left side of the yellow mask. The motto and stethoscope
   positions and sizes remain unchanged; this simply removes the oversized
   empty yellow corridor while still preventing the line showing through. */
.westmid-loop__motto::before {
    left: -.26em;
}

@media (max-width: 700px) {
    .westmid-loop__sheet .westmid-loop__motto::before {
        left: -.23em;
    }
}


/* v1.0.5 final spacing refinement --------------------------------------- */
/* Lengthen the desktop form modestly once more. The cap prevents it from
   growing excessively and it still contracts naturally on narrower screens. */
.westmid-loop__form--desktop,
.westmid-loop__form--desktop > form,
.westmid-loop__form--desktop form,
.westmid-loop__form--desktop .jetpack_subscription_widget,
.westmid-loop__form--desktop #subscribe-blog {
    width: min(100%, 810px) !important;
    max-width: 810px !important;
}

/* Bring the existing lettering closer to the clipped stethoscope without
   changing the size of either element. Keep a very narrow yellow mask behind
   the first letters so the stethoscope line cannot show through. */
.westmid-loop__motto {
    margin-left: clamp(-1.52rem, -1.4vw, -.94rem);
}

.westmid-loop__motto::before {
    left: -.14em;
}

@media (max-width: 700px) {
    .westmid-loop__sheet .westmid-loop__motto {
        margin-left: -1.08rem;
    }

    .westmid-loop__sheet .westmid-loop__motto::before {
        left: -.13em;
    }
}


/* v1.0.7 corrected shared wide-width content grid ----------------------- */
/* Keep the painted background and blue footer transition at true viewport
   width, while the content uses one continuous WordPress wide-width rule at
   every desktop/laptop size. Do not replace this with an intermediate
   nearly-full-width override: that caused the content to drift to the edge
   on laptop screens in v1.0.6. */
.westmid-loop__desktop-inner {
    width: min(
        calc(100% - 48px),
        var(--wp--style--global--wide-size, 1280px)
    );
    margin-inline: auto;
}

@media (max-width: 700px) {
    /* The compact mobile banner remains full-width visually, but its text and
       action align to the same mobile content gutter as surrounding sections. */
    .westmid-loop__mobile-trigger {
        width: min(
            calc(100% - 32px),
            var(--wp--style--global--wide-size, 1280px)
        );
        margin-inline: auto;
        padding-inline: 0;
    }

    /* Use the same mobile gutter inside the bottom sheet so its heading and
       form align consistently with the rest of the website. */
    .westmid-loop__sheet {
        padding-right: max(1.25rem, calc((100vw - min(100vw - 32px, var(--wp--style--global--wide-size, 1280px))) / 2));
        padding-left: max(1.25rem, calc((100vw - min(100vw - 32px, var(--wp--style--global--wide-size, 1280px))) / 2));
    }
}


/* v1.0.8 reliable wide-grid alignment ----------------------------------- */
/* The theme's wide-size custom property can resolve differently between
   templates and viewport sizes. Use an explicit West Mid content grid so
   laptop and desktop layouts retain meaningful side gutters, while the
   painted background continues to span the full viewport. */
.westmid-loop__desktop-inner {
    width: calc(100% - (2 * clamp(24px, 7.5vw, 120px)));
    max-width: 1200px;
    margin-inline: auto;
}

@media (max-width: 700px) {
    /* Apply the same responsive page gutter to the compact banner on phones.
       This keeps Stay in the Loop aligned with surrounding mobile content,
       rather than against the edge of the yellow paint strip. */
    .westmid-loop__mobile-trigger {
        width: calc(100% - (2 * clamp(20px, 6vw, 28px)));
        max-width: 1200px;
        margin-inline: auto;
        padding-inline: 0;
    }

    /* Match the bottom-sheet content to the same mobile page gutter. */
    .westmid-loop__sheet {
        padding-right: clamp(20px, 6vw, 28px);
        padding-left: clamp(20px, 6vw, 28px);
    }
}


/* v1.0.9 inherit the active theme's real wide-width grid ---------------- */
/* The painted yellow and blue layers remain full viewport width. The inner
   content now follows the same global wide-size and root page padding that
   WordPress exposes for blocks set to Wide width. No project-specific pixel
   maximum is imposed. */
.westmid-loop__desktop-inner {
    box-sizing: border-box;
    width: calc(
        100% -
        var(--wp--style--root--padding-left, 24px) -
        var(--wp--style--root--padding-right, 24px)
    );
    max-width: var(--wp--style--global--wide-size, 1400px);
    margin-inline: auto;
}

@media (max-width: 700px) {
    /* On phones, retain the full-width painted strip while aligning the
       compact trigger to the theme's own mobile content padding. */
    .westmid-loop__mobile-trigger {
        box-sizing: border-box;
        width: calc(
            100% -
            var(--wp--style--root--padding-left, 20px) -
            var(--wp--style--root--padding-right, 20px)
        );
        max-width: var(--wp--style--global--wide-size, 1400px);
        margin-inline: auto;
        padding-inline: 0;
    }

    /* Apply the same theme-owned content edges inside the yellow bottom sheet. */
    .westmid-loop__sheet {
        padding-left: var(--wp--style--root--padding-left, 20px);
        padding-right: var(--wp--style--root--padding-right, 20px);
    }
}

/* v1.0.12 clean mobile bottom-sheet implementation ----------------------- */
@media (max-width: 700px) {
    /* The layer fills the viewport only to provide modal stacking and a
       dismissible veil. The visible subscription panel remains a separate,
       opaque card anchored to the bottom of the screen. */
    .westmid-loop__sheet-layer {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483000 !important;
        display: block;
        isolation: isolate;
        pointer-events: none;
    }

    .westmid-loop__sheet-layer[hidden] {
        display: none !important;
    }

    .westmid-loop__sheet-layer.is-open {
        pointer-events: auto;
    }

    .westmid-loop__backdrop {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: rgba(10, 27, 53, .52) !important;
        opacity: 0;
        transition: opacity .26s ease;
    }

    .westmid-loop__sheet-layer.is-open .westmid-loop__backdrop {
        opacity: 1;
    }

    .westmid-loop__sheet {
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1;
        box-sizing: border-box;
        min-height: min(62vh, 520px);
        max-height: 88vh;
        overflow-y: auto;
        padding-top: 2.2rem;
        padding-right: var(--wp--style--root--padding-right, 20px);
        padding-bottom: 1.2rem;
        padding-left: var(--wp--style--root--padding-left, 20px);
        border-radius: 22px 22px 0 0;
        background: var(--westmid-yellow) !important;
        color: var(--westmid-ink);
        opacity: 1 !important;
        box-shadow: 0 -18px 50px rgba(15, 40, 75, .24);
        transform: translateY(104%);
        transition: transform .26s ease;
    }

    .westmid-loop__sheet-layer.is-open .westmid-loop__sheet {
        transform: translateY(0);
    }

    /* Keep all native WordPress.com/Jetpack wrappers on one predictable
       column so the field and compact action align reliably. */
    .westmid-loop__sheet .westmid-loop__form,
    .westmid-loop__sheet .westmid-loop__form > form,
    .westmid-loop__sheet .westmid-loop__form form,
    .westmid-loop__sheet .westmid-loop__form .jetpack_subscription_widget,
    .westmid-loop__sheet .westmid-loop__form #subscribe-blog,
    .westmid-loop__sheet .westmid-loop__form #subscribe-email,
    .westmid-loop__sheet .westmid-loop__form #subscribe-submit,
    .westmid-loop__sheet .westmid-loop__form .wp-block-jetpack-subscriptions__form,
    .westmid-loop__sheet .westmid-loop__form .wp-block-jetpack-subscriptions__form-elements {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
    }

    .westmid-loop__sheet .westmid-loop__form > form,
    .westmid-loop__sheet .westmid-loop__form form,
    .westmid-loop__sheet .westmid-loop__form .jetpack_subscription_widget,
    .westmid-loop__sheet .westmid-loop__form #subscribe-blog,
    .westmid-loop__sheet .westmid-loop__form .wp-block-jetpack-subscriptions__form-elements {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: start;
        gap: .55rem !important;
    }

    /* Bring only the form upwards. The heading, description, close control,
       brand mark and overall sheet geometry remain unchanged. */
    .westmid-loop__sheet .westmid-loop__form {
        max-width: 31rem;
        margin-top: .3rem !important;
        padding-bottom: 7rem;
    }

    .westmid-loop__sheet .westmid-loop__form input[type="email"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    .westmid-loop__sheet .westmid-loop__form input[type="submit"],
    .westmid-loop__sheet .westmid-loop__form button[type="submit"] {
        justify-self: start;
        width: auto !important;
        min-width: 0 !important;
        padding-inline: 1.35rem !important;
        white-space: nowrap;
    }
}

/* v1.0.13 mobile spacing and brand-colour correction -------------------- */
@media (max-width: 700px) {
    /* Halve the visible gap between the description and the native
       WordPress.com/Jetpack subscription controls. The description and all
       other sheet content remain in their approved positions. */
    .westmid-loop__sheet .westmid-loop__form {
        margin-top: .1rem !important;
    }

    .westmid-loop__sheet .westmid-loop__form > :first-child,
    .westmid-loop__sheet .westmid-loop__form > form:first-child,
    .westmid-loop__sheet .westmid-loop__form form > :first-child,
    .westmid-loop__sheet .westmid-loop__form .jetpack_subscription_widget,
    .westmid-loop__sheet .westmid-loop__form #subscribe-blog,
    .westmid-loop__sheet .westmid-loop__form #subscribe-email,
    .westmid-loop__sheet .westmid-loop__form .wp-block-jetpack-subscriptions__form,
    .westmid-loop__sheet .westmid-loop__form .wp-block-jetpack-subscriptions__form-elements {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Restore the complete mobile brand lock-up to full-strength West Mid
       blue. Earlier opacity reductions blended the mark into the yellow. */
    .westmid-loop__sheet .westmid-loop__brand,
    .westmid-loop__sheet .westmid-loop__stethoscope {
        opacity: 1 !important;
    }

    .westmid-loop__sheet .westmid-loop__motto {
        color: #2F5496 !important;
        opacity: 1 !important;
    }
}

/* v1.0.14 — mobile Jetpack form spacing correction ---------------------- */
@media (max-width: 700px) {
    /* The native subscription shortcode can output empty title/intro
       containers even when title and subscribe_text are blank. Those
       containers reserve height on WordPress.com, so hide them explicitly
       in this plugin's mobile form, where the block already supplies its own
       heading and description. */
    .westmid-loop__form--mobile #subscribe-text,
    .westmid-loop__form--mobile .widget-title,
    .westmid-loop__form--mobile .wp-block-jetpack-subscriptions__supports-newline,
    .westmid-loop__form--mobile .wp-block-jetpack-subscriptions__subscribe-text,
    .westmid-loop__form--mobile .jetpack-subscribe-description,
    .westmid-loop__form--mobile p:empty,
    .westmid-loop__form--mobile h1:empty,
    .westmid-loop__form--mobile h2:empty,
    .westmid-loop__form--mobile h3:empty {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .westmid-loop__sheet .westmid-loop__form--mobile {
        margin-top: .7rem !important;
    }

    .westmid-loop__form--mobile #subscribe-email,
    .westmid-loop__form--mobile #subscribe-blog,
    .westmid-loop__form--mobile .wp-block-jetpack-subscriptions__form,
    .westmid-loop__form--mobile .wp-block-jetpack-subscriptions__form-elements {
        margin-block-start: 0 !important;
        padding-block-start: 0 !important;
        min-height: 0 !important;
    }
}


/* v1.0.22 — balanced compact desktop subscription controls ---------------- */
/* Use an explicit desktop-only control height so inherited theme or Jetpack
   padding cannot keep the email field and button visually oversized. Mobile
   trigger and bottom-sheet controls remain exactly as approved. */
@media (min-width: 701px) {
    .westmid-loop__form--desktop input[type="email"],
    .westmid-loop__form--desktop input[type="submit"],
    .westmid-loop__form--desktop button[type="submit"] {
        box-sizing: border-box !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        line-height: 1.15 !important;
    }

    .westmid-loop__form--desktop input[type="email"] {
        padding: .12rem .9rem !important;
    }

    .westmid-loop__form--desktop input[type="submit"],
    .westmid-loop__form--desktop button[type="submit"] {
        padding: .12rem 1.1rem !important;
    }
}


/* v1.0.25 — desktop subscription typography refinement ------------------- */
/* Restore the successful v1.0.23 measured-width implementation unchanged.
   Only the desktop email and Subscribe text are set to 15px. Mobile remains
   exactly as previously approved. */
@media (min-width: 701px) {
    .westmid-loop__form--desktop input[type="email"],
    .westmid-loop__form--desktop input[type="submit"],
    .westmid-loop__form--desktop button[type="submit"] {
        font-size: 16px !important;
    }

    .westmid-loop__form--desktop input[type="email"]::placeholder {
        font-size: 16px !important;
    }
}


/* v1.0.26 — desktop email field and typography refinement -----------------
 * Increase the successful measured desktop email field by a further 25% over
 * v1.0.25, while preserving the attached button, zero gap and left alignment.
 * Restore desktop input and Subscribe text to 16px. Mobile remains unchanged.
 */