/* Specific css for community page */

.community-page .entry-actions {
    margin: 1.25rem 0;
}

.community-page .entry-actions .first-page-nav,
.community-page .entry-actions .exotic-buttons {
    margin-bottom: 0;
}

.community-page .members-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.community-page .members-pager-btn {
    min-width: 160px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    border: 2px solid;
    clip-path: none;
    overflow: visible;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.community-page .members-pager-btn::before {
    display: none;
}

.community-page .members-pager-btn:hover {
    transform: translateY(-1px);
}

.community-page .members-pager-btn:disabled {
    opacity: 0.45;
    transform: none;
    cursor: not-allowed;
}

/* Social icon buttons used by the community profile pages. The markup pairs
   the standard Bootstrap button classes (`.btn.btn-outline-secondary`) with a
   single Bootstrap Icons glyph, e.g.

     <a href="..." class="btn btn-outline-secondary social-btn" ...>
       <i class="bi bi-twitter-x" aria-hidden="true"></i>
     </a>

   Bootstrap sizes a button from its padding, which stretches an icon-only
   anchor into a wide pill, so `.social-btn` pins a square 50px box and
   centres the glyph. It is used by every network button on purpose: one
   class keeps all profiles visually identical. */
.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    line-height: 1;
}

/* Narrow screens: shrink the pager buttons so Previous/Next still fit on one
   row next to the "showing X-Y of Z" label. */
@media screen and (max-width: 768px) {
    .community-page .members-pager {
        gap: 0.6rem;
    }

    .community-page .members-pager-btn {
        min-width: 0;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
}