/* Shared article/category sidebar. Existing forms and widget settings stay live. */
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) {
    --sidebar-accent: var(--post-accent, var(--archive-accent, var(--fw-link)));
    --sidebar-ink: var(--fw-text);
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .mh-widget {
    padding: 0 0 23px;
    margin: 0 0 23px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--fw-border);
    box-shadow: none;
    min-width: 0;
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) :is(.fw-archive-widget-title, .mh-widget-title) {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    color: var(--sidebar-ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .01em;
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .wp-block-latest-posts li {
    display: flow-root;
    min-width: 0;
    padding: 14px 0;
    margin: 0;
    border-bottom: 1px solid var(--fw-border);
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .wp-block-latest-posts li:has(.wp-block-latest-posts__featured-image) {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .wp-block-latest-posts li:first-child { padding-top: 0; }
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .wp-block-latest-posts li:last-child { padding-bottom: 0; border: 0; }
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .wp-block-latest-posts__featured-image {
    float: none;
    width: 64px;
    margin: 2px 0 0;
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .wp-block-latest-posts__featured-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 5px;
    background: var(--fw-image-placeholder);
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .wp-block-latest-posts__featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .fw-sidebar-story { min-width: 0; }
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .fw-sidebar-story-label {
    display: block;
    margin: 0 0 3px;
    color: var(--fw-link);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .wp-block-latest-posts a.wp-block-latest-posts__post-title {
    display: block;
    color: var(--fw-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .mh-widget:has(.fw-sidebar-signup) {
    padding: 18px 14px;
    background: var(--fw-soft);
    border: 1px solid var(--fw-border);
    border-top: 3px solid var(--sidebar-accent);
    border-radius: 6px;
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .fw-sidebar-intro {
    margin: -3px 0 16px;
    color: var(--fw-muted);
    font-size: 13px;
    line-height: 1.65;
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .wp-block-jetpack-subscriptions input[type="email"] {
    border-radius: 4px;
    padding: 10px !important;
    font-size: 16px !important;
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .wp-block-jetpack-subscriptions button {
    border-radius: 4px;
    background: var(--sidebar-accent);
    color: var(--fw-on-accent);
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .fw-sidebar-browse { container-type: inline-size; }
/* Equal pills in even rows: two across in the column, three where there is room. */
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .fw-sidebar-browse ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .fw-sidebar-browse li { margin: 0; padding: 0; border: 0; min-width: 0; }
@container (min-width: 330px) {
    :is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .fw-sidebar-browse ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .fw-sidebar-browse a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    height: 100%;
    padding: 6px 10px;
    text-align: center;
    border: 1px solid var(--fw-border);
    border-radius: 999px;
    color: var(--fw-text);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .fw-sidebar-browse a:hover { border-color: var(--sidebar-accent); }
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .fw-sidebar-browse a[aria-current="page"] { border-color: var(--sidebar-accent); background: var(--sidebar-accent); color: var(--fw-on-accent); }
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .fw-sidebar-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .fw-sidebar-social a { font-size: 12px; padding: 8px 0; color: var(--fw-text); }
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) a:hover { color: var(--sidebar-accent); }
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) :is(a, button, input):focus-visible { outline: 2px solid var(--sidebar-accent); outline-offset: 3px; }
@media (max-width: 960px) {
    :is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .mh-widget { margin: 0; }
}

/* A compact companion to the article's warm paper and burgundy support card. */
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .mh-widget.fw-sidebar-support {
    --sidebar-support-paper: var(--fw-paper);
    --sidebar-support-ink: var(--fw-paper-ink);
    --sidebar-support-copy: var(--fw-paper-copy);
    --sidebar-support-gold: var(--fw-gold-trim);
    box-sizing: border-box;
    padding: 24px 16px;
    border: 1px solid rgba(var(--fw-trim-rgb), .30);
    border-radius: 8px;
    background: radial-gradient(ellipse at 50% 0, rgba(var(--fw-gold-rgb), .09), transparent 75%), var(--sidebar-support-paper);
    box-shadow: inset 0 0 0 4px var(--sidebar-support-paper), inset 0 0 0 5px rgba(var(--fw-trim-rgb), .10);
    text-align: center;
}
.fw-sidebar-support::before {
    content: "";
    display: block;
    width: 42px;
    height: 2px;
    margin: 0 auto 15px;
    background: linear-gradient(90deg, transparent, var(--sidebar-support-gold) 25%, var(--sidebar-support-gold) 75%, transparent);
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .fw-sidebar-support-title {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    color: var(--sidebar-support-ink);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.015em;
    text-transform: none;
    text-wrap: balance;
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .fw-sidebar-support-copy {
    max-width: 30ch;
    margin: 0 auto 18px;
    color: var(--sidebar-support-copy);
    font-size: 13px;
    line-height: 1.65;
    text-wrap: pretty;
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) a.fw-sidebar-support-button {
    box-sizing: border-box;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    max-width: 260px;
    min-height: 46px;
    padding: 12px 10px;
    border: 1px solid rgba(255, 224, 179, .23);
    border-radius: 5px;
    background: linear-gradient(135deg, var(--fw-red), var(--fw-red-dark));
    box-shadow: 0 4px 12px rgba(92, 22, 33, .15), inset 0 1px 0 rgba(255, 255, 255, .10);
    color: var(--fw-white);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    transition: box-shadow 180ms ease, border-color 180ms ease;
}
.fw-sidebar-support-button svg { flex: 0 0 18px; }
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) a.fw-sidebar-support-button:hover {
    background: linear-gradient(135deg, var(--fw-red-light), var(--fw-red));
    border-color: rgba(255, 224, 179, .50);
    box-shadow: 0 6px 18px rgba(92, 22, 33, .23);
    color: var(--fw-white);
}
:is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) a.fw-sidebar-support-button:focus-visible {
    outline: 2px solid var(--sidebar-support-gold);
    outline-offset: 4px;
}
@media (prefers-reduced-motion: no-preference) {
    .fw-sidebar-support-button::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(110deg, transparent 30%, rgba(255, 243, 213, .06) 42%, rgba(255, 243, 213, .20) 50%, rgba(255, 243, 213, .06) 58%, transparent 70%);
        transform: translateX(-110%);
        animation: fw-sidebar-support-sheen 6s ease-in-out infinite;
    }
}
@keyframes fw-sidebar-support-sheen {
    0%, 82% { transform: translateX(-110%); }
    100% { transform: translateX(110%); }
}
@media (prefers-reduced-motion: reduce) {
    .fw-sidebar-support-button { transition: none !important; }
}

/* Beside the article (wider than 960px) the sidebar column runs the article's full
   height, and the support card stays in view below the On the Wire strip, so the
   column is never empty further down a long article. */
@media (min-width: 961px) {
    :is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar) { align-self: stretch; }
    .fw-archive-sidebar .mh-sidebar { height: 100%; }
    :is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .mh-widget.fw-sidebar-support {
        position: sticky;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 20px);
    }
    html:not([data-fw-wire="hidden"]):has(.fw-wire) :is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .mh-widget.fw-sidebar-support {
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 63px);
    }
}

/* Below the article (960px and narrower). The in-article support card already
   asks, so articles drop the sidebar's copy; category pages keep theirs. */
@media (max-width: 960px) {
    .single-post .mh-wrapper > .mh-sidebar .mh-widget.fw-sidebar-support { display: none; }
    :is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .mh-widget { padding-bottom: 0; border-bottom: 0; }
}
/* Tablets: two columns that each stack on their own, so a short card never
   leaves a hole beside a long list. */
@media (min-width: 601px) and (max-width: 960px) {
    .single-post .mh-wrapper > .mh-sidebar { grid-template-areas: "latest follow" "latest browse"; }
    .fw-archive .fw-archive-sidebar .mh-sidebar { grid-template-areas: "latest follow" "latest support" "browse support"; }
    :is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .mh-widget:has(.fw-sidebar-latest) { grid-area: latest; }
    :is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .mh-widget:has(.fw-sidebar-signup) { grid-area: follow; }
    :is(.single-post .mh-wrapper > .mh-sidebar, .fw-archive-sidebar .mh-sidebar) .mh-widget:has(.fw-sidebar-directory) { grid-area: browse; }
    .fw-archive-sidebar .mh-sidebar .mh-widget.fw-sidebar-support { grid-area: support; }
}