/* Blogs page (/blogs) styles — moved out of the inline <style> block in blogs.php. */

/* Full-bleed content container (no default Bootstrap gutters).
   min-height keeps the footer down the page when there's little/no blog content. */
.container-fluid.blogs-page { padding: 0; min-height: 600px; }

/* Blogs header is denser than the other section headers (3-column button
   grid + quick-nav panel): tighten the flex gap so everything fits. */
.subs-section-header.bh-section-header { gap: 12px; }

/* Blog header nav buttons / dropdowns (center column of .subs-section-header) */
.bh-nav-buttons { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; margin-left: 0; }
.bh-nav-row { display: flex; align-items: center; gap: 10px; }
.bh-btn {
    display: inline-flex; align-items: center; justify-content: space-between;
    /* S411 (Chris): one uniform width for every band control — 196px is the
       widest label (Blogging Tools & Assets); the search input matches. */
    width: 196px; min-width: 196px; height: 30px; padding: 0 12px 3px 12px;;
    background: #e9eaf3; border: 2px solid #000000; border-radius: 4px;
    color: #1a1a2e; font-family: 'Tahoma', 'Poppins', Geneva, sans-serif; font-size: 13px; font-weight: bold;
    text-decoration: none; cursor: pointer; white-space: nowrap; box-sizing: border-box;
}
.bh-btn:hover { background: #dcdef0; text-decoration: none; color: #1a1a2e; }
.bh-caret { margin-left: 6px; padding: 4px 0 0 0; font-size: 9px; line-height: 1; }
.bh-dd { position: relative; }
.bh-dd-menu {
    display: none; position: absolute; top: 100%; left: 0; z-index: 1200;
    min-width: 200px; margin-top: 2px;
    background: #fff; border: 2px solid #000000; border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    /* S425: overflow was hidden (to round the head's corners). Hidden overflow
       CLIPS the cascading flyouts that open to the right of a menu, so the head
       rounds its own corners now and the menu lets its flyouts out. */
    overflow: visible;
}
.bh-dd-head { border-radius: 3px 3px 0 0; }
.bh-dd-menu.open { display: block; }
.bh-dd-menu-scroll { max-height: 460px; overflow-y: auto; }
.bh-dd-head {
    padding: 7px 12px; background: #3b5bbf; color: #fff;
    font-family: 'Tahoma', 'Poppins', Geneva, sans-serif; font-size: 13px; font-weight: bold; white-space: nowrap;
}
.bh-dd-item {
    padding: 6px 12px; color: #1a1a2e; cursor: pointer; white-space: nowrap;
    font-family: 'Tahoma', 'Poppins', Geneva, sans-serif; font-size: 13px; border-top: 1px solid #eef0f6;
}
.bh-dd-item:hover { background: #e9eaf3; }

/* S425 (Chris): cascading sub-categories. A menu holds TEN items at most; an
   item that is itself a category carries .bh-dd-has-sub and a nested .bh-dd-sub
   panel that flies out to the RIGHT on hover (or on tap, via the .open class the
   page's script toggles). Same chrome as the parent menu, so a flyout reads as
   one more panel of the same dropdown, not a different control. */
.bh-dd-item.bh-dd-has-sub { position: relative; padding-right: 26px; }
.bh-dd-item.bh-dd-has-sub::after {
    content: "\25B6"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 8px; color: #5c6690;
}
.bh-dd-sub {
    display: none; position: absolute; top: -1px; left: 100%; z-index: 1201;
    min-width: 200px; margin-left: -1px;
    background: #fff; border: 2px solid #000000; border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25); overflow: hidden;
}
.bh-dd-item.bh-dd-has-sub:hover > .bh-dd-sub,
.bh-dd-item.bh-dd-has-sub.open > .bh-dd-sub { display: block; }
.bh-dd-sub .bh-dd-item { border-top: 1px solid #eef0f6; }
.bh-dd-sub .bh-dd-item:first-child { border-top: 0; }
/* The flyout opens on hover, so the parent item must not also fire its own
   click action on a device with no hover - the script decides. Right-edge
   safety: a menu near the viewport edge flips its flyouts left. */
.bh-dd-menu.bh-dd-flip .bh-dd-sub { left: auto; right: 100%; margin-left: 0; margin-right: -1px; }
.bh-search { position: relative; display: inline-flex; align-items: center; }
.bh-search-input {
    width: 196px; height: 30px; padding: 0 30px 0 10px; /* S411: matches .bh-btn */
    border: 2px solid #000000; border-radius: 4px; background: #fff;
    font-family: 'Tahoma', 'Poppins', Geneva, sans-serif; font-size: 13px; box-sizing: border-box;
}
.bh-search-icon { position: absolute; right: 9px; color: #5c6690; cursor: pointer; }


.blogs-feed-band .ph-nav-dd .bh-dd-head { text-transform: uppercase; }
.blogs-feed-band .ph-nav-dd .bh-dd-item,
.blogs-feed-band .ph-nav-dd .bh-dd-item.is-on { font-weight: normal; }
.blogs-feed-band .ph-nav-dd .bh-dd-item.is-on[data-nav] { font-weight: bold; }

.blogs-page a.button_white {
    border-radius: 4px;
    padding: 6px 6px 6px 6px;
}

.blogs-page a.button_blue {
    background: #5c74a9;
    border-radius: 4px;
    padding: 4.5px 6px 6px 6px;
}

.blogs-page .column_main {
    border: 1px #DFDFDF solid;
}

/* Bootstrap sets .tooltip{position:absolute}; keep the Write-a-Blog-Post top-row
   help icons in normal flow so they sit AFTER each field instead of over it. */
.mh-blogpost-toprow .tooltip {
    position: static !important;
    flex: 0 0 auto;
}

/* ----------------------------------------------------------------------------
   Blog Subscribing pages ("Blogs You Are Subscribed To" / "Members Subscribed
   to You") — PSD layout: plain heading, alternating-shade rows, 64px avatar,
   indigo name link, muted "Subscribed …" date, grey "Blog UnSubscribe" button.
---------------------------------------------------------------------------- */
.mh-blogcast-head-block { padding: 6px 20px 0 20px; }
.mh-blogcast-title {
    margin: 2px 0 3px 0;
    font-family: Tahoma, 'Poppins', Arial, sans-serif;
    font-size: 18.05px; font-weight: bold; color: #1a1a1a; line-height: 1.15;
}
.mh-blogcast-intro {
    margin: 0 0 14px 0;
    font-family: Tahoma, 'Poppins', Arial, sans-serif;
    font-size: 13.34px; color: #333;
}
.mh-blogcast-row {
    padding: 18px 20px 22px 20px;
    font-family: Tahoma, 'Poppins', Arial, sans-serif;
}
.mh-blogcast-row.alt-a { background: #ebebeb; }
.mh-blogcast-row.alt-b { background: #f7f4f4; }
/* "Members Subscribed To Your Blog" — plain rows, no shaded background. */
.mh-blogcast-row.mh-blogcast-row-plain { background: transparent; }
.mh-blogcast-headline { display: flex; align-items: flex-start; gap: 16px; }
.mh-blogcast-avatar img {
    width: 64px !important; height: 64px !important; display: block; border: 0;
}
.mh-blogcast-name { padding-top: 4px; min-width: 0; }
.mh-blogcast-name a,
.mh-blogcast-name a:hover,
.mh-blogcast-name a:focus {
    font-size: 16.23px; font-weight: bold; color: #4d5998; text-decoration: none;
}
.mh-blogcast-foot { display: flex; align-items: center; margin-top: 18px; }
.mh-blogcast-date {
    flex: 0 0 380px;
    font-size: 14.07px; font-weight: bold; color: #99a7b9; white-space: nowrap;
}
.mh-blogcast-unsub {
    display: inline-block; padding: 2.2px 10.3px;
    background: #f0f0f0; border: 1px solid #cfcfcf; border-radius: 5px;
    color: #8288a8 !important; font-size: 14.47px; font-weight: bold;
    text-decoration: none; cursor: pointer; white-space: nowrap;
}
.mh-blogcast-unsub:hover { background: #e7e7e7; color: #6f7596 !important; text-decoration: none; }
.mh-blogcast-empty { padding: 20px; color: #2e7d32; font-weight: bold; }

/* ----------------------------------------------------------------------------
   My Blog Info page — PSD layout: bold heading, two intro lines, full-width
   lavender "Blog:" band with dropdown, blue feed URLs, note, Feed Title / Feed
   Description bordered inputs, purple UPDATE button.
---------------------------------------------------------------------------- */
.mh-mbi { font-family: Tahoma, 'Poppins', Arial, sans-serif; }
.mh-mbi-title {
    font-size: 18.05px; font-weight: bold; color: #1a1a1a;
    padding: 6px 16px 2px 16px;
}
.mh-mbi-intro {
    font-size: 13.34px; color: #333; line-height: 1.5;
    padding: 0 16px;
}
.mh-mbi-band {
    display: flex; align-items: center; gap: 10px;
    background: #eceff5; padding: 16px; margin-top: 16px;
}
.mh-mbi-band-label { font-weight: bold; font-size: 18.5px; color: #1a1a1a; }
.mh-mbi-select {
    padding: 2.5px 12px; border: 1px solid #9aa0b0; border-radius: 4px;
    background: #fff; font-size: 13.5px; font-weight: bold; color: #1a1a1a;
    font-family: Tahoma, 'Poppins', Arial, sans-serif;
    min-width: 218px;
}
.mh-mbi-urls { padding: 16px 16px 0 16px; font-size: 16.08px; line-height: 1.6; }
.mh-mbi-urls a { color: #3a41c9; text-decoration: none; }
.mh-mbi-urls a:hover { text-decoration: underline; }
.mh-mbi-note { padding: 14px 0 0 0; font-size: 15.36px; line-height: 1.55; color: #333; }
.mh-mbi-form { padding: 22px 16px 0 16px; }
.mh-mbi-row { display: flex; align-items: center; margin-bottom: 14px; }
.mh-mbi-label { width: auto; min-width: 157px; font-weight: bold; font-size: 16px; color: #1a1a1a; white-space: nowrap; }
.mh-mbi-input {
    width: 272px; max-width: 100%; padding: 4px 10px;
    border: 1px solid #6b78b0; border-radius: 6px;
    font-size: 14.47px; color: #1a1a1a; font-family: Tahoma, 'Poppins', Arial, sans-serif;
}
.mh-mbi-input.mh-mbi-input-title { font-weight: bold; }
.mh-mbi-actions { padding: 4px 16px 30px 16px; }
.mh-mbi-update {
    display: inline-block; padding: 3px 14px; border-radius: 5px;
    background: #6b7ec4; color: #fff !important; font-weight: bold; font-size: 13.5px;
    text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; cursor: pointer;
}
.mh-mbi-update:hover { background: #5f72b8; color: #fff !important; text-decoration: none; }

/* Grey like the other .bh-btn dropdowns by default; blue only while the
   Write a new Blog Post section is open (.active toggled from blogs.php). */
.write-new-blog-btn,
.write-new-blog-btn:active,
.write-new-blog-btn:focus {
    color: #1a1a2e !important;
    text-decoration: none;
    padding: 0 12px 3px 12px;
}
.write-new-blog-btn:hover { background: #dcdef0; color: #1a1a2e; }
.write-new-blog-btn.active,
.write-new-blog-btn.active:active,
.write-new-blog-btn.active:focus,
.write-new-blog-btn.active:hover {
    background: #5f78ab;
    color: #fff !important;
}

/* ----------------------------------------------------------------------------
   WordPress Plugin page — PSD layout: bordered header box (title + subtitle +
   "Current Version" chip), a controls row, and a bordered info box.
---------------------------------------------------------------------------- */
.mh-wp-box {
    border: 1px solid #9ea3ad; border-radius: 3px; padding: 16px 18px;
    font-family: Tahoma, 'Poppins', Arial, sans-serif;
}
.mh-wp-title { font-size: 18.05px; font-weight: bold; color: #1a1a1a; margin-bottom: 3px; }
.mh-wp-subtitle { font-size: 13.34px; color: #333; margin-bottom: 14px; }
.mh-wp-version {
    display: inline-block; padding: 6px 14px;
    border: 1px solid #8a8a8a; border-radius: 5px; background: #f0f0f0;
    font-weight: bold; font-size: 15px; color: #1a1a1a; text-decoration: none; cursor: default;
}
.mh-wp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 22px; }
.mh-wp-select {
    padding: 5px 12px; border: 1px solid #8a8a8a; border-radius: 4px; background: #fff;
    font-size: 13.5px; font-weight: bold; color: #1a1a1a; font-family: Tahoma, 'Poppins', Arial, sans-serif;
}
.mh-wp-info-heading { font-size: 18.67px; font-weight: bold; color: #1a1a1a; line-height: 1.35; }
.mh-wp-info-sub { padding-top: 14.67px; font-weight: bold; font-size: 14px; color: #1a1a1a; }
.mh-wp-info-p { padding-top: 10px; font-size: 14.67px; color: #1a1a1a; line-height: 1.5; }
.mh-wp-info-step { padding-top: 4px; font-weight: bold; font-size: 14.67px; color: #1a1a1a; }
.mh-wp-info-step.first { padding-top: 14.67px; }

#wordpress_holder {
    max-width: 950px;
}

.blogs-page .body_text_title_mid_lg {
    font-size: 18.05px;
}

.blogs-page .body_text_mid {
    font-size: 13.34px;
}

.blogs-page .body_text_title_mid {
    font-size: 13.34px;
    font-weight: 400;
    padding: 0 12px !important;
}

/* ----------------------------------------------------------------------------
   Mobile: the .subs-section-header stacks to a column at <=900px, but each
   .bh-nav-row still holds three fixed-width controls that overflow the header
   on phones. Constrain the cluster to full width and let the controls wrap
   onto new lines (growing to fill, ~2 per line on a 375px screen).
---------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .bh-nav-buttons { width: 100%; margin-left: 0; }
    .bh-nav-row { flex-wrap: wrap; width: 100%; }
    .bh-nav-row > .bh-btn,
    .bh-nav-row > .bh-dd,
    .bh-nav-row > .bh-search { flex: 1 1 160px; min-width: 0; }
    .bh-dd > .bh-btn { width: 100%; min-width: 0; }
    .bh-search { display: flex; }
    .bh-search-input { width: 100%; min-width: 0; }
    #wordpress_holder {
        max-width: 100%;
    }
}
/* ── Per-post algorithm action bar (ported from css/newsfeed.css:1033-1217) ──
   Same .nf-post-* class names as the newsfeed so the shared renderer in
   includes/post_action_bar.php works unchanged on both pages. Only the bar's
   own margin differs: on blog rows it sits in block flow under the byline
   (not in a flex header row), so it gets a small top margin instead of the
   newsfeed's left offset. */
.nf-post-action-bar {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: clamp(16px, 3vw, 48px);
    margin: 0 0 6px 0;
}
.nf-post-action-bar .nf-post-badge,
.nf-post-action-bar .nf-post-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    border: none;
    background: transparent;
    text-decoration: none;
}
.nf-post-action-bar .nf-post-badge img,
.nf-post-action-bar .nf-post-action img {
    height: 22px;
    width: auto;
    display: block;
    border: 0;
}
.nf-post-action-bar .nf-post-action {
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.15s, transform 0.15s;
}
.nf-post-action-bar .nf-post-action:hover {
    opacity: 1;
    transform: translateY(-1px);
}
.nf-post-action-bar .nf-post-action-lift img {
    height: 22px;
}

/* Hover tooltips for algorithm-action icons (like/dislike/increase/exclude/lift) */
.nf-post-action-bar .nf-post-action {
    position: relative;
}
.nf-post-action-bar .nf-post-action .nf-tip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: #ffffff;
    border: 1px solid #000;
    color: #000;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.35;
    text-align: left;
    padding: 8px 10px;
    width: 180px;
    white-space: normal;
    box-shadow: 1px 1px 0 #999;
    pointer-events: none;
}
.nf-post-action-bar .nf-post-action .nf-tip::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 7px solid #000;
}
.nf-post-action-bar .nf-post-action .nf-tip::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid #fff;
}
.nf-post-action-bar .nf-post-action:hover .nf-tip {
    display: block;
}
.nf-post-action-bar .nf-post-action .nf-tip strong {
    font-weight: bold;
}
.nf-post-action-bar .nf-post-action .nf-tip-lift {
    text-align: center;
    width: 200px;
}
.nf-post-action-bar .nf-post-action .nf-tip-lift img.nf-tip-icon {
    display: block;
    margin: 0 auto 4px;
    width: 70px;
    height: 37px;
    max-width: 100%;
}

/* Active state once a signal has been sent for a post */
.nf-post-action-bar .nf-post-action.nf-post-action-active img {
    filter: drop-shadow(0 0 3px rgba(255, 200, 0, 0.9));
}

/* Hover tooltips for the 3 left-side badges (validation / vanity / hive rank). */
.nf-post-action-bar .nf-post-badge {
    position: relative;
}
.nf-post-action-bar .nf-post-badge .nf-tip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: #ffffff;
    border: 1px solid #000;
    color: #000;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.35;
    text-align: left;
    padding: 8px 10px;
    width: 230px;
    white-space: normal;
    box-shadow: 1px 1px 0 #999;
    pointer-events: none;
}
.nf-post-action-bar .nf-post-badge .nf-tip::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 7px solid #000;
}
.nf-post-action-bar .nf-post-badge .nf-tip::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid #fff;
}
.nf-post-action-bar .nf-post-badge:hover .nf-tip {
    display: block;
}
.nf-post-action-bar .nf-post-badge .nf-tip-badge-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}
.nf-post-action-bar .nf-post-badge .nf-tip-badge-head img.nf-tip-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: block;
}
.nf-post-action-bar .nf-post-badge .nf-tip-badge-head .nf-tip-title {
    flex: 1;
    font-weight: bold;
    line-height: 1.25;
    font-size: 13px;
}
.nf-post-action-bar .nf-post-badge .nf-tip-body {
    display: block;
    color: #000;
    font-size: 12px;
    line-height: 1.4;
}

/* The blog row wrappers carry inline overflow:hidden (float containment), which
   would clip the action-bar hover tooltips to the row box. Switch containment
   to a ::after clearfix so the tooltips can escape the row. */
[id^="table_rss_main_"].col-xs-12 {
    overflow: visible !important;
}
[id^="table_rss_main_"].col-xs-12::after {
    content: "";
    display: block;
    clear: both;
}

/* Hovering an icon must lift its tooltip above LATER blog rows: the :hover
   transform creates a stacking context with z-index auto, which later
   positioned siblings (subsequent .col-xs-12 rows) would otherwise paint over. */
.nf-post-action-bar .nf-post-badge:hover,
.nf-post-action-bar .nf-post-action:hover {
    z-index: 1200;
}

/* ── Blog post statistics panel (View Statistics icon on own posts) ──
   Injected by PostStatistics() in place of the post's .col-xs-10 content;
   the SVG fragment comes server-rendered from blogs_algo_query.php
   (blog_post_stats). Colors follow the Matomo visitors-overview look:
   blue visits, orange avg-duration, crimson pageviews. */
.bps-panel {
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding-left: 10px;
    padding-right: 0;
}
.bps-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    background: #000;
    color: #fff !important;
    font-size: 12px;
    text-decoration: none !important;
    cursor: pointer;
}
.bps-close:hover { background: #333; }
.bps-subtitle {
    font-family: Tahoma, 'Poppins', Arial, sans-serif;
    font-size: 11px;
    color: #888;
    padding: 2px 0 4px 2px;
}
.bps-chart svg {
    display: block;
    width: 100%;
    height: auto;
}
.bps-grid-line { stroke: #e2e2e2; stroke-width: 1; }
.bps-axis-label, .bps-date-label {
    font-family: Tahoma, 'Poppins', Arial, sans-serif;
    font-size: 12px;
    fill: #666;
}
.bps-legend-visits   { font: bold 12px Tahoma, Arial, sans-serif; fill: #1e87c8; }
.bps-legend-duration { font: bold 12px Tahoma, Arial, sans-serif; fill: #f5871f; }
.bps-legend-views    { font: bold 12px Tahoma, Arial, sans-serif; fill: #c02255; }
.bps-line-visits   { fill: none; stroke: #1e87c8; stroke-width: 2; }
.bps-line-duration { fill: none; stroke: #f5871f; stroke-width: 2; }
.bps-line-views    { fill: none; stroke: #c02255; stroke-width: 2; }
.bps-dot-visits   { fill: #1e87c8; }
.bps-dot-duration { fill: #f5871f; }
.bps-dot-views    { fill: #c02255; }

/* Chart hover: invisible per-day strips + cursor-following tooltip */
.bps-hover {
    fill: transparent;
    pointer-events: all;
}
.bps-tip {
    display: none;
    position: absolute;
    z-index: 1300;
    background: #fff;
    border: 1px solid #000;
    box-shadow: 1px 1px 0 #999;
    padding: 8px 10px;
    font-family: Tahoma, 'Poppins', Arial, sans-serif;
    font-size: 12px;
    color: #000;
    white-space: nowrap;
    pointer-events: none;
}
.bps-tip-date { font-weight: bold; margin-bottom: 4px; }
.bps-tip-row { line-height: 1.5; }
.bps-tip-visits   { color: #1e87c8; }
.bps-tip-duration { color: #f5871f; }
.bps-tip-views    { color: #c02255; }

/* Blog Agent styles live in css/blogs_ai.css (loaded by the form itself). */



.blog-post-popup .body_text_title_lg {
    margin: 12px 0 0 0;
}

/* The blog popup renders the full CKEditor "document" post (see blogs_query.php
   action=page_centered_container_blog_post), and members lay those out for a full
   ~1280px page. The shared newsfeed popup width (960px) squeezes such a layout into
   a sliver of a text column, so give the blog variant more canvas. Anything still
   wider scrolls horizontally inside the post body rather than bleeding out of the
   card. */
.newsfeed-post-permalink-popup-container.blog-post-popup {
    max-width: 1320px;
    max-width: min(1320px, 96vw);
}

/* Two-column blog row (newsfeed post-structure parity): owner avatar in its own
   left column; right column stacks the name + nf-post-action-bar header above the
   post image + text. Avatar 50x50 w/ 1px border and name #104980 match the
   newsfeed — see css/style.css
   .full_width_main_content_newsfeed_post_container_memeber_pic .membericon /
   .full_width_main_content_newsfeed_post_right_the_content_member_name a. */
.blog_post_flex {
    display: flex;
    align-items: flex-start;
}
.blog_post_avatar_col {
    flex: 0 0 auto;
    margin-right: 8px;
}
.blog_post_body_col {
    flex: 1 1 auto;
    min-width: 0;
}
.blog_post_owner_avatar {
    display: inline-flex;
}
.blog_post_owner_avatar img.membericon {
    width: 50px;
    height: 50px;
    border: 1px solid #000;
    object-fit: cover;
    display: block;
}
.blog_post_owner_header {
    display: flex;
    align-items: center;
    /* Wrap onto extra lines on narrow screens instead of overflowing the page
       (mobile). Stays on one line on desktop where there's room. */
    flex-wrap: wrap;
    gap: 8px 10px;
    padding-bottom: 8px;
}
.blog_post_owner_name {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #104980;
    text-decoration: none;
    white-space: nowrap;
}
.blog_post_owner_name:hover {
    text-decoration: none;
}
/* The action bar sits inline after the name; drop its standalone bottom margin
   and give it a little breathing room from the name. */
.blog_post_owner_header .nf-post-action-bar {
    margin: 0 0 0 14px;
}
/* Owner/admin action icons pushed to the far right of the header row. */
.blog_post_owner_actions {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}
/* Mobile: let the header contents fall onto extra lines cleanly instead of
   running past the page edge. The action bar's badges also wrap, and the large
   inter-badge gap shrinks so a full badge row fits a phone width. */
@media (max-width: 600px) {
    .blog_post_owner_header .nf-post-action-bar {
        flex-wrap: wrap;
        gap: 12px;
        margin-left: 0;
    }
    .blog_post_avatar_col {
        margin-right: 6px;
    }
    .blog_post_owner_avatar img.membericon {
        width: 40px;
        height: 40px;
    }
}