/* /assets/css/forum-left-rail-v19.css
   WebNigerians shared Forum left navigation rail V19
*/

.wnfrShell{
    width:min(1580px,calc(100% - 28px));
    margin:0 auto;
    padding:20px 0 46px;
    display:grid;
    grid-template-columns:255px minmax(0,1fr);
    gap:20px;
    align-items:start;
}

.wnfrMain{min-width:0}

.wnfrLeft{
    position:sticky;
    top:82px;
    align-self:start;
}

.wnfrRailStack{
    display:grid;
    gap:14px;
}

.wnfrCard{
    background:#fff;
    border:1px solid #d9e5f2;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(15,42,74,.055);
    overflow:hidden;
}

.wnfrHead{
    min-height:56px;
    padding:15px 17px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid #e4edf6;
}

.wnfrHead strong{
    color:#071d3d;
    font-size:15px;
    font-weight:900;
}

.wnfrBadge{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid #c9d8e9;
    background:#f4f8fc;
    color:#53657d;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}

.wnfrBadge.blue{
    color:#075ec5;
    border-color:#bfdbfe;
    background:#eff6ff;
}

.wnfrBody{padding:17px}

.wnfrIdentity{
    display:flex;
    align-items:center;
    gap:11px;
}

.wnfrAvatar{
    width:54px;
    height:54px;
    flex:0 0 54px;
    border-radius:50%;
    overflow:hidden;
    background:linear-gradient(135deg,#0a66c2,#0ea5a8);
    color:#fff;
    display:grid;
    place-items:center;
    position:relative;
    font-size:16px;
    font-weight:950;
    box-shadow:0 0 0 3px #fff,0 4px 16px rgba(10,102,194,.16);
}

.wnfrAvatar img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.wnfrName{
    color:#081e3e;
    font-size:14px;
    line-height:1.25;
    font-weight:950;
}

.wnfrHandle,
.wnfrMuted{
    color:#66778d;
    font-size:11px;
    font-weight:750;
    line-height:1.5;
}

.wnfrHeadline{
    margin-top:13px;
    color:#455a73;
    font-size:11.5px;
    line-height:1.55;
    font-weight:760;
}

.wnfrStats{
    margin-top:14px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.wnfrStat{
    background:#f7faff;
    border:1px solid #e1eaf4;
    border-radius:12px;
    padding:10px;
}

.wnfrStat b{
    display:block;
    color:#071d3d;
    font-size:17px;
    line-height:1;
    font-weight:950;
}

.wnfrStat span{
    display:block;
    margin-top:5px;
    color:#718096;
    font-size:9.5px;
    font-weight:850;
}

.wnfrProfileLink{
    display:inline-flex;
    margin-top:12px;
    color:#0867c9;
    text-decoration:none;
    font-size:11px;
    font-weight:900;
}

.wnfrProfileLink:hover{text-decoration:underline}

.wnfrNav{padding:8px}

.wnfrNav a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px;
    border-radius:12px;
    color:#0a1e3b;
    text-decoration:none;
    transition:.16s ease;
}

.wnfrNav a:hover{
    background:#f3f8ff;
    color:#075fbf;
}

.wnfrNav a.active{
    background:#eaf4ff;
    color:#0567ce;
}

.wnfrNav strong{
    display:block;
    font-size:12px;
    font-weight:930;
    line-height:1.2;
}

.wnfrNav small{
    display:block;
    margin-top:3px;
    color:#748398;
    font-size:9.5px;
    line-height:1.2;
    font-weight:720;
}

.wnfrArrow{
    color:#7c8ba0;
    font-size:16px;
    line-height:1;
}

.wnfrGuestTitle{
    color:#071d3d;
    font-size:15px;
    line-height:1.35;
    font-weight:950;
}

.wnfrGuestActions{
    display:grid;
    gap:8px;
    margin-top:14px;
}

.wnfrGuestActions .wndBtn{
    width:100%;
    justify-content:center;
}

.wnfrContextLinks{
    display:grid;
    gap:4px;
}

.wnfrContextLinks a{
    display:block;
    border-radius:12px;
    padding:10px;
    text-decoration:none;
    transition:.15s ease;
}

.wnfrContextLinks a:hover{background:#f3f8ff}

.wnfrContextLinks b{
    display:block;
    color:#0b2347;
    font-size:11.5px;
    font-weight:900;
}

.wnfrContextLinks span{
    display:block;
    margin-top:3px;
    color:#718096;
    font-size:9.5px;
    line-height:1.4;
}

.wnfrMain > .wndShell{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
}

.wnfrMain .wndGrid.forum{
    grid-template-columns:minmax(0,1fr) 300px;
    gap:18px;
}

.wnfrMobileNav{display:none}

/* Create/edit pages already had a secondary left helper.
   V19 moves primary navigation to the shared left rail and
   keeps the editor itself wide and focused. */
.wnfrShell.editor .wnfrMain .wndGrid.workspace{
    grid-template-columns:minmax(0,1fr)!important;
}

.wnfrShell.editor .wnfrMain .wndGrid.workspace > .wndSideDesktop{
    display:none!important;
}

@media(max-width:1240px){
    .wnfrShell{
        grid-template-columns:220px minmax(0,1fr);
        gap:16px;
    }

    .wnfrMain .wndGrid.forum{
        grid-template-columns:minmax(0,1fr);
    }

    .wnfrMain .wndGrid.forum > .wndSideDesktop{
        display:none;
    }
}

@media(max-width:920px){
    .wnfrShell{
        width:min(100% - 20px,1040px);
        display:block;
        padding-top:14px;
    }

    .wnfrLeft{display:none}

    .wnfrMobileNav{
        display:flex;
        gap:8px;
        overflow-x:auto;
        padding:0 0 12px;
        scrollbar-width:none;
    }

    .wnfrMobileNav::-webkit-scrollbar{display:none}

    .wnfrMobileNav a{
        flex:0 0 auto;
        min-height:38px;
        display:inline-flex;
        align-items:center;
        padding:0 13px;
        border-radius:999px;
        border:1px solid #d8e4f1;
        background:#fff;
        color:#40536b;
        text-decoration:none;
        font-size:11px;
        font-weight:900;
        box-shadow:0 4px 15px rgba(15,42,74,.04);
    }

    .wnfrMobileNav a.active{
        background:#0a66c2;
        border-color:#0a66c2;
        color:#fff;
    }
}

@media(max-width:640px){
    .wnfrShell{
        width:min(100% - 14px,760px);
        padding-bottom:28px;
    }

    .wnfrMain .wndHeroInner{
        padding:22px 18px;
    }

    .wnfrMain .wndTitle{
        font-size:clamp(30px,10vw,46px);
    }
}


/* =========================================================
   V19.1 — COMMUNITY / CATEGORY WIDTH REBALANCE
   Wider centre workspace + slimmer contextual right rail
========================================================= */

.wnfrShell.wnfrCategoriesDirectory,
.wnfrShell.wnfrCommunityPage{
    width:min(1680px,calc(100% - 28px));
    grid-template-columns:238px minmax(0,1fr);
    gap:18px;
}

/* The directory needs most of the horizontal space for cards. */
.wnfrCategoriesDirectory .wnfrMain .wndGrid.forum{
    grid-template-columns:minmax(0,1fr) 228px;
    gap:14px;
}

/* Individual community feeds also benefit from a wider conversation column. */
.wnfrCommunityPage .wnfrMain .wndGrid.forum{
    grid-template-columns:minmax(0,1fr) 238px;
    gap:15px;
}

/* Let community cards use the wider centre area more naturally. */
.wnfrCategoriesDirectory .wndCategoryGrid{
    grid-template-columns:repeat(3,minmax(205px,1fr));
    gap:14px;
}

.wnfrCategoriesDirectory .wndCommunityCard{
    min-width:0;
}

.wnfrCategoriesDirectory .wndCommunityBody{
    padding:14px;
}

/* Keep the slimmer right rail compact instead of cramped. */
.wnfrCategoriesDirectory .wndSideDesktop .wndHead,
.wnfrCommunityPage .wndSideDesktop .wndHead{
    padding-left:14px;
    padding-right:14px;
}

.wnfrCategoriesDirectory .wndSideDesktop .wndPad,
.wnfrCommunityPage .wndSideDesktop .wndPad{
    padding-left:14px;
    padding-right:14px;
}

.wnfrCategoriesDirectory .wndSideItem,
.wnfrCommunityPage .wndSideItem{
    min-width:0;
}

.wnfrCategoriesDirectory .wndSideItem a,
.wnfrCommunityPage .wndSideItem a{
    overflow-wrap:anywhere;
    word-break:normal;
}

.wnfrCategoriesDirectory .wndSideItem p,
.wnfrCommunityPage .wndSideItem p{
    line-height:1.45;
}

/* Give the centre toolbar and heading more breathing room. */
.wnfrCategoriesDirectory .wndGrid.forum > main,
.wnfrCommunityPage .wndGrid.forum > main{
    min-width:0;
}

.wnfrCategoriesDirectory .wndGrid.forum > main .wndHead,
.wnfrCommunityPage .wndGrid.forum > main .wndHead{
    gap:16px;
}

/* On medium desktop widths, use two generous cards rather than squeezing three. */
@media (max-width:1360px) and (min-width:921px){
    .wnfrCategoriesDirectory .wndCategoryGrid{
        grid-template-columns:repeat(2,minmax(235px,1fr));
    }

    .wnfrCategoriesDirectory .wnfrMain .wndGrid.forum,
    .wnfrCommunityPage .wnfrMain .wndGrid.forum{
        grid-template-columns:minmax(0,1fr) 215px;
        gap:13px;
    }
}

/* At smaller desktop/tablet widths the contextual rail disappears,
   allowing the centre content to become full width. */
@media (max-width:1120px){
    .wnfrShell.wnfrCategoriesDirectory,
    .wnfrShell.wnfrCommunityPage{
        grid-template-columns:215px minmax(0,1fr);
    }

    .wnfrCategoriesDirectory .wnfrMain .wndGrid.forum,
    .wnfrCommunityPage .wnfrMain .wndGrid.forum{
        grid-template-columns:minmax(0,1fr);
    }

    .wnfrCategoriesDirectory .wndGrid.forum > .wndSideDesktop,
    .wnfrCommunityPage .wndGrid.forum > .wndSideDesktop{
        display:none;
    }
}

@media (max-width:920px){
    .wnfrShell.wnfrCategoriesDirectory,
    .wnfrShell.wnfrCommunityPage{
        width:min(100% - 20px,1100px);
        display:block;
    }

    .wnfrCategoriesDirectory .wndCategoryGrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:620px){
    .wnfrCategoriesDirectory .wndCategoryGrid{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   V19.2 — PREMIUM COMMUNITY DIRECTORY CARDS
   Clearer category hierarchy, equal-height cards,
   readable text and complete action buttons.
========================================================= */

/* Two strong cards are better than three cramped cards in the
   actual WebNigerians centre-column width. */
.wnfrCategoriesDirectory .wnCommunityDirectoryGrid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    align-items:stretch;
}

/* Card itself */
.wnfrCategoriesDirectory .wnCommunityDirectoryCard{
    min-width:0;
    height:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid #d8e5f3;
    border-radius:20px;
    background:#fff;
    box-shadow:0 8px 24px rgba(10,38,76,.045);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.wnfrCategoriesDirectory .wnCommunityDirectoryCard:hover{
    transform:translateY(-2px);
    border-color:#bfd7ef;
    box-shadow:0 14px 34px rgba(10,71,145,.09);
}

/* Media area */
.wnfrCategoriesDirectory .wnCommunityDirectoryCover{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:16/8.8;
    height:auto;
    overflow:hidden;
    background:linear-gradient(135deg,#eaf4ff,#f6faff);
    border-radius:0;
}

.wnfrCategoriesDirectory .wnCommunityDirectoryCover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .24s ease;
}

.wnfrCategoriesDirectory .wnCommunityDirectoryCard:hover .wnCommunityDirectoryCover img{
    transform:scale(1.025);
}

.wnfrCategoriesDirectory .wnCommunityFallback{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    background:
        radial-gradient(circle at 20% 15%,rgba(20,126,255,.20),transparent 32%),
        linear-gradient(135deg,#eaf4ff,#f7fbff);
    color:#0a66c2;
    font-size:54px;
    font-weight:950;
}

.wnfrCategoriesDirectory .wnCommunityFeatured{
    position:absolute;
    top:12px;
    right:12px;
    z-index:2;
    box-shadow:0 5px 14px rgba(7,43,91,.10);
}

/* Body hierarchy */
.wnfrCategoriesDirectory .wnCommunityDirectoryBody{
    padding:17px;
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:0;
}

.wnfrCategoriesDirectory .wnCommunityIdentity h3{
    margin:0;
    font-size:19px;
    line-height:1.18;
    letter-spacing:-.02em;
    font-weight:950;
}

.wnfrCategoriesDirectory .wnCommunityIdentity h3 a{
    color:#071d3d;
    text-decoration:none;
}

.wnfrCategoriesDirectory .wnCommunityIdentity h3 a:hover{
    color:#0668ce;
}

.wnfrCategoriesDirectory .wnCommunityIdentity p{
    margin:9px 0 0;
    min-height:62px;
    color:#66778e;
    font-size:12.5px;
    line-height:1.55;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* Optional category tags */
.wnfrCategoriesDirectory .wnCommunityTags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:12px;
}

.wnfrCategoriesDirectory .wnCommunityTags span{
    display:inline-flex;
    align-items:center;
    min-height:25px;
    max-width:100%;
    padding:0 9px;
    border-radius:999px;
    background:#f3f7fb;
    border:1px solid #e1e9f2;
    color:#5d6f85;
    font-size:9.5px;
    line-height:1;
    font-weight:850;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Stats become a deliberate block, not one long wrapped sentence. */
.wnfrCategoriesDirectory .wnCommunityStats{
    margin-top:15px;
    padding:11px 0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-top:1px solid #e8eef5;
    border-bottom:1px solid #e8eef5;
}

.wnfrCategoriesDirectory .wnCommunityStats > div{
    min-width:0;
    padding:0 9px;
}

.wnfrCategoriesDirectory .wnCommunityStats > div:first-child{
    padding-left:0;
}

.wnfrCategoriesDirectory .wnCommunityStats > div + div{
    border-left:1px solid #e8eef5;
}

.wnfrCategoriesDirectory .wnCommunityStats b{
    display:block;
    color:#09234b;
    font-size:13px;
    line-height:1.1;
    font-weight:950;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.wnfrCategoriesDirectory .wnCommunityStats span{
    display:block;
    margin-top:4px;
    color:#7b8b9e;
    font-size:8.5px;
    line-height:1.2;
    font-weight:800;
}

/* Actions are always complete and never clipped. */
.wnfrCategoriesDirectory .wnCommunityDirectoryActions{
    margin-top:auto;
    padding-top:14px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.wnfrCategoriesDirectory .wnCommunityDirectoryActions .wndBtn{
    width:100%;
    min-width:0;
    min-height:38px;
    padding:0 10px;
    justify-content:center;
    white-space:normal;
    text-align:center;
    line-height:1.12;
    border-radius:12px;
    font-size:10.5px;
}

.wnfrCategoriesDirectory .wnCommunityOpen{
    background:#fff;
}

.wnfrCategoriesDirectory .wnCommunityJoin{
    overflow:hidden;
}

/* Ultra-wide centre column can comfortably support 3 cards. */
@media(min-width:1780px){
    .wnfrCategoriesDirectory .wnCommunityDirectoryGrid{
        grid-template-columns:repeat(3,minmax(250px,1fr));
    }
}

/* Medium desktops remain two-column. */
@media(max-width:1180px) and (min-width:921px){
    .wnfrCategoriesDirectory .wnCommunityDirectoryGrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .wnfrCategoriesDirectory .wnCommunityDirectoryBody{
        padding:15px;
    }
}

/* Tablet */
@media(max-width:920px){
    .wnfrCategoriesDirectory .wnCommunityDirectoryGrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:13px;
    }
}

/* Mobile */
@media(max-width:640px){
    .wnfrCategoriesDirectory .wnCommunityDirectoryGrid{
        grid-template-columns:1fr;
    }

    .wnfrCategoriesDirectory .wnCommunityIdentity p{
        min-height:auto;
        -webkit-line-clamp:4;
    }

    .wnfrCategoriesDirectory .wnCommunityDirectoryActions{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:390px){
    .wnfrCategoriesDirectory .wnCommunityDirectoryActions{
        grid-template-columns:1fr;
    }
}