/**


 * WFG Portal Styles


 * Posts Section - Dark Theme Design


 */





/* ===== POSTS SECTION ===== */


.wfg-posts-section {


    font-family: "Inter", Sans-serif;


}





/* Category Tabs */


.wfg-posts-tabs {


    display: flex;


    flex-wrap: wrap;


    justify-content: center;


    gap: 12px;


    margin-bottom: 50px;


}





.wfg-posts-tab {


    display: inline-block;


    padding: 8px 24px;


    border-radius: 50px;


    font-size: 18px;


    font-weight: 600;


    text-decoration: none;


    transition: all 0.3s ease;


    border: 1px solid transparent;


}





.wfg-posts-tab:not(.active) {


    background-color: #f5801933;


    color: #222;


}





.wfg-posts-tab:not(.active):hover {


    background-color: #f580194d;


    color: #222;


    box-shadow: 0px 4px 12px -2px #235c4733;


}





.wfg-posts-tab.active {


    background-color: #235c47;


    color: #dedede;


}





/* Posts Grid */


.wfg-posts-grid {


    display: grid;


    grid-template-columns: repeat(2, 1fr);


    gap:15px;


    max-width: 100%;


    margin: 0 auto 60px;


}





@media(min-width:768px) {


    .wfg-posts-grid {


        grid-template-columns: repeat(3, 1fr);


    }


}





@media(min-width:1024px) {


    .wfg-posts-grid {


        grid-template-columns: repeat(5, 1fr);


    }


}





/* Post Card */


.wfg-post-card {


    background-color: #f7f7f7;


    border-radius: 6px;


    padding: 16px;


    display: flex;


    flex-direction: column;


    transition: transform 0.3s ease, box-shadow 0.3s ease;


    border: 1px solid #e6e6e6;


}





.wfg-post-card:hover {


    box-shadow: 0 10px 6px -3px rgba(0, 0, 0, 0.3);


    text-decoration: underline;


}





/* Card Header */


.wfg-post-card-header {


    display: flex;


    justify-content: space-between;


    align-items: center;


    margin-bottom: 12px;


    gap: 8px;


}





.wfg-post-category {


    display: inline-block;


    padding: 6px 12px;


    background-color: #235c47;


    border: 1px solid #fff;


    border-radius: 4px;


    font-size: 10px;


    line-height: 15px;


    font-weight: 600;


    text-transform: uppercase;


    letter-spacing: 0.25px;


    color: #dedede;


}





.wfg-post-date {


    font-size: 10px;


    color: #222;


    line-height: 14px;


}





/* Card Title */


.wfg-post-title {


    font-size: 16px;


    font-weight: 700;


    line-height: 1.4;


    letter-spacing: -0.56px;


    margin: 0 0 8px;


    color: #222;


    overflow: hidden;


    display: -webkit-box;


    -webkit-box-orient: vertical;


    -webkit-line-clamp: 3;


    height: 68px;


}





.wfg-post-title a {


    color: inherit;


    text-decoration: none;


    transition: color 0.3s ease;


}





.wfg-post-title a:hover {


        color: #222;


        text-decoration: underline;


}





/* Card Excerpt */


.wfg-post-excerpt {


    font-size: 12px;


    line-height: 16px;


    color: #222;


    margin-bottom: 12px;


    flex-grow: 1;


        overflow: hidden;


    display: -webkit-box;


    -webkit-box-orient: vertical;


    -webkit-line-clamp: 2;


    height: 32px;


}





/* Card Footer */


.wfg-post-footer {


    display: flex;


    justify-content: space-between;


    align-items: center;


    padding-top:8px;


    border-top: 1px solid #e6e6e6;


}





.wfg-post-read-time {


    font-size: 10px;


    color: #222;


}





.wfg-post-read-link {


    display: inline-flex;


    align-items: center;


    gap: 6px;


    font-size: 12px;


    line-height: 16px;


    font-weight: 500;


    color: #235c47;


    text-decoration: none;


    transition: color 0.3s ease;


}





.wfg-post-read-link:hover {


    color: #235c47;


    text-decoration: underline;


}





.wfg-arrow {


    font-size: 16px;


    transition: transform 0.3s ease;


}








/* Post Tags */


.wfg-post-tags {


    display: flex;


    flex-wrap: wrap;


    align-items: center;


    gap: 8px;


    margin-top: 16px;


    padding-top: 16px;


    border-top: 1px solid #1e2d45;


}





.wfg-tags-label {


    font-size: 12px;


    color: #6b7b94;


    margin-right: 4px;


}





.wfg-post-tag {


    display: inline-block;


    padding: 4px 10px;


    background-color: #1a2942;


    border-radius: 4px;


    font-size: 12px;


    color: #8b9bb4;


}





/* No Posts Message */


.wfg-no-posts {


    text-align: center;


    color: #8b9bb4;


    font-size: 16px;


    padding: 60px 20px;


    grid-column: 1 / -1;


}





/* ===== CTA SECTION ===== */


.wfg-post-cta {


    background: linear-gradient(180deg, #1a2942 0%, #0a1628 100%);


    border-radius: 16px;


    padding: 50px 40px;


    text-align: center;


    max-width: 800px;


    margin: 0 auto;


    border: 1px solid #2a3a52;


}





.wfg-cta-title {


    font-size: 28px;


    font-weight: 600;


    color: #c9a962;


    margin: 0 0 12px;


    font-style: italic;


}





.wfg-cta-text {


    font-size: 15px;


    color: #8b9bb4;


    margin: 0 0 30px;


    line-height: 1.6;


}





.wfg-cta-buttons {


    display: flex;


    justify-content: center;


    gap: 16px;


    flex-wrap: wrap;


}





.wfg-btn {


    display: inline-block;


    padding: 14px 32px;


    border-radius: 6px;


    font-size: 13px;


    font-weight: 600;


    text-decoration: none;


    text-transform: uppercase;


    letter-spacing: 1px;


    transition: all 0.3s ease;


}





.wfg-btn-primary {


    background-color: #ffffff;


    color: #0a1628;


    border: 2px solid #ffffff;


}





.wfg-btn-primary:hover {


    background-color: transparent;


    color: #ffffff;


}





.wfg-btn-secondary {


    background-color: transparent;


    color: #8b9bb4;


    border: 2px solid #2a3a52;


}





.wfg-btn-secondary:hover {


    border-color: #c9a962;


    color: #c9a962;


}





/* ===== SINGLE POST PAGE ===== */


.wfg-single-post {


    max-width: 900px;


    margin: 0 auto;


    padding: 40px 20px;


}





.wfg-single-post-image {


    margin-bottom: 30px;


    border-radius: 12px;


    overflow: hidden;


}





.wfg-single-post-image img {


    width: 100%;


    height: auto;


    display: block;


}





.wfg-single-post-categories {


    margin-bottom: 16px;


}





.wfg-single-post-categories a {


    display: inline-block;


    padding: 6px 14px;


    background-color: #1a2942;


    border-radius: 4px;


    font-size: 12px;


    font-weight: 600;


    text-transform: uppercase;


    color: #c9a962;


    text-decoration: none;


    margin-right: 8px;


}





.wfg-single-post-title {


    font-size: 36px;


    font-weight: 700;


    color: #ffffff;


    margin: 0 0 16px;


    line-height: 1.3;


}





.wfg-single-post-meta {


    display: flex;


    align-items: center;


    gap: 20px;


    margin-bottom: 30px;


    color: #8b9bb4;


    font-size: 14px;


}





.wfg-single-post-author {


    display: flex;


    align-items: center;


    gap: 8px;


}





.wfg-single-post-content {


    font-size: 16px;


    line-height: 1.8;


    color: #b8c5d6;


}





.wfg-single-post-content h2,


.wfg-single-post-content h3,


.wfg-single-post-content h4 {


    color: #ffffff;


    margin-top: 32px;


    margin-bottom: 16px;


}





.wfg-single-post-content p {


    margin-bottom: 20px;


}





.wfg-single-post-content table {


    width: 100%;


    border-collapse: collapse;


    margin: 24px 0;


    background-color: #111d32;


    border-radius: 8px;


    overflow: hidden;


}





.wfg-single-post-content th,


.wfg-single-post-content td {


    padding: 14px 16px;


    text-align: left;


    border-bottom: 1px solid #1e2d45;


}





.wfg-single-post-content th {


    background-color: #1a2942;


    font-weight: 600;


    color: #ffffff;


}





/* ===== BREADCRUMB NAVIGATION ===== */


.wfg-breadcrumb {


    display: flex;


    align-items: center;


    flex-wrap: wrap;


    gap: 8px;


    margin-bottom: 30px;


    font-size: 13px;


}





.wfg-breadcrumb a {


    color: #8b9bb4;


    text-decoration: none;


    transition: color 0.3s ease;


}





.wfg-breadcrumb a:hover {


    color: #c9a962;


}





.wfg-breadcrumb-separator {


    color: #4a5568;


}





.wfg-breadcrumb-current {


    color: #ffffff;


    max-width: 300px;


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


}





/* ===== BACK TO RESOURCES BUTTON ===== */


.wfg-back-button-wrapper {


    margin-bottom: 40px;


    text-align: center;


}





.wfg-back-button {


    display: inline-flex;


    align-items: center;


    gap: 8px;


    padding: 12px 24px;


    background-color: #1a2942;


    border-radius: 30px;


    color: #ffffff;


    font-size: 12px;


    font-weight: 600;


    text-decoration: none;


    text-transform: uppercase;


    letter-spacing: 1px;


    transition: all 0.3s ease;


}





.wfg-back-button:hover {


    background-color: #2a3a52;


    color: #c9a962;


}





.wfg-back-arrow {


    font-size: 14px;


}





/* ===== SINGLE POST EXCERPT ===== */


.wfg-single-post-excerpt {


    text-align: center;


    font-size: 18px;


    line-height: 1.7;


    color: #b8c5d6;


    max-width: 700px;


    margin: 0 auto 24px;


}





/* ===== CTA DESCRIPTION ===== */


.wfg-cta-description {


    font-size: 15px;


    color: #8b9bb4;


    margin: 0 0 30px;


    line-height: 1.6;


}





/* ===== RESPONSIVE ===== */


@media (max-width: 768px) {


    .wfg-posts-section {


        padding: 40px 16px;


    }





    .wfg-posts-tabs {


        gap: 8px;


    }





    .wfg-posts-tab {


        padding: 10px 16px;


        font-size: 13px;


    }











    .wfg-post-card {


        padding: 20px;


    }





    .wfg-post-cta {


        padding: 40px 24px;


    }





    .wfg-cta-title {


        font-size: 24px;


    }





    .wfg-cta-buttons {


        flex-direction: column;


        align-items: center;


    }





    .wfg-btn {


        width: 100%;


        max-width: 280px;


        text-align: center;


    }





    .wfg-single-post-title {


        font-size: 28px;


    }





    .wfg-breadcrumb {


        font-size: 12px;


        gap: 6px;


    }





    .wfg-breadcrumb-current {


        max-width: 150px;


    }





    .wfg-back-button {


        padding: 10px 20px;


        font-size: 11px;


    }





    .wfg-single-post-excerpt {


        font-size: 16px;


    }





    .wfg-single-post-meta {


        flex-direction: column;


        gap: 10px;


    }


}





@media (max-width: 480px) {


    .wfg-post-card-header {


        flex-direction: column;


        align-items: flex-start;


        gap: 8px;


    }





    .wfg-post-title {


        font-size: 16px;


    }


}





/* ===== DASHBOARD STYLES ===== */


.wfg-dashboard-main {


    max-width: 1200px;


    margin: 0 auto;


    padding: 20px;


}





.wfg-row {


    margin-bottom: 30px;


}





.row-1 {


    display: grid;


    grid-template-columns: 2fr 1fr;


    gap: 30px;


}





@media (max-width: 768px) {


    .row-1 {


        grid-template-columns: 1fr;


    }


}





.wfg-left-column,


.wfg-right-column {


    display: flex;


    flex-direction: column;


    gap: 20px;


}





.membership-section,


.privacy-section,


.household-section,


.quicklinks,


.latest-posts-section {


    background: #fff;


    border-radius: 8px;


    padding: 20px;


    box-shadow: 0 2px 4px rgba(0,0,0,0.1);


}





.membership-section h2,


.quicklinks h3,


.latest-posts-section h3 {


    margin-top: 0;


    margin-bottom: 15px;


    display: flex;


    align-items: center;


    gap: 10px;


}





.wfg-quick-links {


    display: flex;


    flex-wrap: wrap;


    gap: 10px;


}





.wfg-quick-links a {


    display: flex;


    align-items: center;


    gap: 8px;


    padding: 10px 15px;


    background: #f5f5f5;


    border-radius: 6px;


    text-decoration: none;


    color: #333;


    transition: background 0.3s;


}





.wfg-quick-links a:hover {


    background: #e0e0e0;


}





.wfg-posts-list {


    list-style: none;


    padding: 0;


    margin: 0;


}





.wfg-post-item {


    padding: 10px 0;


    border-bottom: 1px solid #eee;


}





.wfg-post-item:last-child {


    border-bottom: none;


}





.wfg-post-item .wfg-post-title {


    font-weight: 600;


    color: #333;


    text-decoration: none;


}





.wfg-post-item .wfg-post-title:hover {


    color: #235c47;


}





.wfg-post-item .wfg-post-date,


.wfg-post-item .wfg-post-category {


    font-size: 12px;


    color: #666;


}





.view-all-link {


    display: inline-block;


    margin-top: 15px;


    color: #235c47;


    text-decoration: none;


    font-weight: 500;


}





.view-all-link:hover {


    text-decoration: underline;


}





/* Household Table */


.wfg-household-table {


    width: 100%;


    border-collapse: collapse;


    margin-bottom: 15px;


}





.wfg-household-table th,


.wfg-household-table td {


    padding: 10px;


    text-align: left;


    border-bottom: 1px solid #eee;


}





.wfg-household-table th {


    background: #f9f9f9;


    font-weight: 600;


}





/* Directory & Archive Sections */


.directory-section,


.archive-section {


    background: #fff;


    border-radius: 8px;


    padding: 30px;


    box-shadow: 0 2px 4px rgba(0,0,0,0.1);


}





.directory-header,


.archive-header {


    display: flex;


    justify-content: space-between;


    align-items: flex-start;


    margin-bottom: 20px;


    flex-wrap: wrap;


    gap: 20px;


}





.directory-subtitle,


.archive-subtitle {


    font-size: 12px;


    text-transform: uppercase;


    letter-spacing: 1px;


    color: #666;


    margin: 0 0 5px;


}





.directory-title,


.archive-title {


    font-size: 24px;


    margin: 0 0 10px;


    color: #333;


}





.directory-description,


.archive-description {


    color: #666;


    margin: 0;


}





.button-outline {


    display: inline-flex;


    align-items: center;


    gap: 8px;


    padding: 10px 20px;


    border: 2px solid #235c47;


    border-radius: 6px;


    color: #235c47;


    text-decoration: none;


    font-weight: 500;


    transition: all 0.3s;


}





.button-outline:hover {


    background: #235c47;


    color: #fff;


}





.wfg-directory-grid,


.wfg-archive-grid {


    display: grid;


    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));


    gap: 20px;


}





.wfg-directory-card,


.wfg-archive-card {


    background: #f9f9f9;


    border-radius: 8px;


    padding: 20px;


}





.wfg-directory-card-inner {


    display: flex;


    align-items: center;


    gap: 15px;


    margin-bottom: 15px;


}





.wfg-directory-avatar img {


    width: 50px;


    height: 50px;


    border-radius: 50%;


    object-fit: cover;


}





.wfg-directory-info strong {


    display: block;


    font-size: 16px;


    color: #333;


}





.wfg-role {


    font-size: 12px;


    color: #666;


}





.wfg-directory-meta {


    font-size: 13px;


    color: #666;


}





.wfg-directory-meta div {


    display: flex;


    align-items: center;


    gap: 8px;


    margin-bottom: 5px;


}





.wfg-archive-card h4 {


    margin: 0 0 10px;


    color: #333;


}





.button-secondary {


    display: inline-block;


    padding: 8px 16px;


    background: #235c47;


    color: #fff;


    border-radius: 4px;


    text-decoration: none;


    font-size: 14px;


}





.button-secondary:hover {


    background: #1a4635;


}





/* Privacy & Form Styles */


.wfg-privacy-form,


.wfg-account-form,


.wfg-email-form {


    margin-top: 15px;


}





.wfg-checkbox-group {


    display: flex;


    flex-direction: column;


    gap: 10px;


    margin-bottom: 15px;


}





.wfg-checkbox-group label {


    display: flex;


    align-items: center;


    gap: 8px;


    cursor: pointer;


}





.householdheading {


    display: flex;


    align-items: flex-start;


    gap: 10px;


    margin-bottom: 15px;


}





.householdheading h3 {


    margin: 0;


}





.householdheading h3 span {


    display: block;


    font-size: 13px;


    font-weight: normal;


    color: #666;


    margin-top: 5px;


}





/* Forms */


.form-row {


    margin-bottom: 15px;


}





.form-row label {


    display: block;


    margin-bottom: 5px;


    font-weight: 500;


}





.form-row input[type="text"],


.form-row input[type="email"],


.form-row input[type="password"] {


    width: 100%;


    padding: 10px;


    border: 1px solid #ddd;


    border-radius: 4px;


    font-size: 14px;


}





.form-row input:focus {


    border-color: #235c47;


    outline: none;


}





/* Buttons */


.button,


.button-primary {


    display: inline-flex;


    align-items: center;


    gap: 8px;


    padding: 10px 20px;


    border: none;


    border-radius: 4px;


    cursor: pointer;


    font-size: 14px;


    transition: background 0.3s;


}





.button {


    background: #f0f0f0;


    color: #333;


}





.button:hover {


    background: #e0e0e0;


}





.button-primary {


    background: #235c47;


    color: #fff;


}





.button-primary:hover {


    background: #1a4635;


}





.button:disabled {


    opacity: 0.5;


    cursor: not-allowed;


}





/* Directory Page */


.wfg-directory-page {


    max-width: 1200px;


    margin: 0 auto;


    padding: 20px;


}





.wfg-directory-search {


    display: flex;


    gap: 10px;


    margin-bottom: 20px;


}





.wfg-directory-search input {


    flex: 1;


    padding: 10px;


    border: 1px solid #ddd;


    border-radius: 4px;


}





/* Archive Page */


.wfg-archive-page {


    max-width: 1200px;


    margin: 0 auto;


    padding: 20px;


}





.wfg-archive-category {


    margin-bottom: 30px;


}





.wfg-archive-category h3 {


    border-bottom: 2px solid #235c47;


    padding-bottom: 10px;


    margin-bottom: 15px;


}





.wfg-archive-list {


    list-style: none;


    padding: 0;


}





.wfg-archive-list li {


    padding: 10px 0;


    border-bottom: 1px solid #eee;


    display: flex;


    justify-content: space-between;


    align-items: center;


}





.download-link {


    color: #235c47;


    text-decoration: none;


}





.download-link:hover {


    text-decoration: underline;


}





/* Account & Email Prefs Pages */


.wfg-account-page,


.wfg-email-prefs-page {


    max-width: 600px;


    margin: 0 auto;


    padding: 20px;


    background: #fff;


    border-radius: 8px;


    box-shadow: 0 2px 4px rgba(0,0,0,0.1);


}





.wfg-account-page h2,


.wfg-account-page h3,


.wfg-email-prefs-page h2 {


    margin-top: 0;


}





.wfg-account-page hr {


    margin: 30px 0;


    border: none;


    border-top: 1px solid #eee;


}





/* Status Messages */


.wfg-form-status,


.wfg-password-status,


.wfg-email-status,


.wfg-save-status {


    margin-top: 10px;


    padding: 10px;


    border-radius: 4px;


}





.wfg-form-status.success,


.wfg-password-status.success,


.wfg-email-status.success,


.wfg-save-status.success {


    background: #d4edda;


    color: #155724;


}





.wfg-form-status.error,


.wfg-password-status.error,


.wfg-email-status.error,


.wfg-save-status.error {


    background: #f8d7da;


    color: #721c24;


}





/* Sidebar */


.wfg-sidebar {


    position: fixed;


    top: 0;


    right: -300px;


    width: 300px;


    height: 100%;


    background: #fff;


    box-shadow: -2px 0 10px rgba(0,0,0,0.1);


    transition: right 0.3s;


    z-index: 9999;


    padding: 20px;


}





.wfg-sidebar .close-btn {


    position: absolute;


    top: 10px;


    right: 15px;


    font-size: 24px;


    background: none;


    border: none;


    cursor: pointer;


}





.wfg-sidebar-user {


    display: flex;


    align-items: center;


    gap: 10px;


    padding: 20px 0;


    border-bottom: 1px solid #eee;


    margin-bottom: 20px;


}





.wfg-sidebar-user i {


    font-size: 24px;


}





.wfg-sidebar .responsive-menu {


    list-style: none;


    padding: 0;


    margin: 0;


}





.wfg-sidebar .responsive-menu li {


    margin-bottom: 10px;


}





.wfg-sidebar .responsive-menu a {


    display: block;


    padding: 10px;


    color: #333;


    text-decoration: none;


    border-radius: 4px;


    transition: background 0.3s;


}





.wfg-sidebar .responsive-menu a:hover {


    background: #f5f5f5;


}





.wfg-sidebar-logout,


.wfg-sidebar-login {


    position: absolute;


    bottom: 20px;


    left: 20px;


    right: 20px;


}





.btn-sidebar-logout,


.btn-sidebar-login {


    display: flex;


    align-items: center;


    justify-content: center;


    gap: 8px;


    padding: 12px;


    background: #235c47;


    color: #fff;


    text-decoration: none;


    border-radius: 4px;


}





.open-sidebar-btn {


    display: none;


    position: fixed;


    top: 20px;


    right: 20px;


    z-index: 9998;


    padding: 10px 15px;


    background: #235c47;


    color: #fff;


    border: none;


    border-radius: 4px;


    cursor: pointer;


    font-size: 18px;


}





@media (max-width: 768px) {


    .open-sidebar-btn {


        display: block;


    }


}





/* User Buttons */


.wfg-user-buttons {


    display: flex;


    gap: 10px;


}





.btn-logout {


    display: flex;


    align-items: center;


    gap: 8px;


    padding: 8px 16px;


    background: #dc3545;


    color: #fff;


    text-decoration: none;


    border-radius: 4px;


    font-size: 14px;


}





.btn-logout:hover {


    background: #c82333;


}








.wfg-post-read-link{


    display:flex;


    align-items:center;


    gap:6px;


}





.wfg-post-read-link {


    display: inline-flex;


    align-items: center;


    gap: 6px;


    font-weight: 600;


}





.wfg-arrow svg {


    transition: transform 0.25s ease;


}





.wfg-post-read-link:hover .wfg-arrow svg {


    transform: translate(3px, -3px);


}