/*!
 * NGO Job Site — Consolidated Theme Stylesheet
 * assets/css/main.css
 *
 * Auto-consolidated from inline <style> blocks previously duplicated
 * across every template file. This file is enqueued once, cached by
 * the browser, and versioned via filemtime() so updates bust cache
 * automatically. Dynamic (customizer-driven) values are injected via
 * a small inline <style> block generated in functions.php, which sets
 * --ngo-primary / --ngo-secondary / --ngo-footer-bg on :root — every
 * component below simply reads from those two source-of-truth vars.
 */

:root {
    --ngo-primary:   #1e73be; /* overridden by inline customizer style */
    --ngo-secondary: #afb88d; /* overridden by inline customizer style */
    --ngo-olive:     #b5b87a; /* fixed accent, not user-configurable */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; }

/* ======================================================
   HOMEPAGE (index.php)
====================================================== */
:root {
    --hp-primary:   var(--ngo-primary);
    --hp-secondary: var(--ngo-secondary);
    --hp-text-body: #222222;
    --hp-text-muted:#5a6474;
    --hp-border:    #d8dde6;
    --hp-bg:        #f4f6f9;
    --hp-card-bg:   #ffffff;
    --hp-link-blue: #003399;
    --hp-link-red:  #cc0000;
}

.homepage-index-posts-list {
    background: var(--hp-card-bg);
    border: 1px solid var(--hp-border);
    width: 100%;
    box-sizing: border-box;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.homepage-index-post-card {
    padding: 14px 18px;
    border-bottom: 1px dashed var(--hp-border);
    background: var(--hp-card-bg);
}

.homepage-index-post-card:last-child { border-bottom: none; }

.homepage-index-title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 5px;
}

.homepage-index-badge-img {
    width: 44px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 3px;
    display: block;
}

.homepage-index-post-title {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    letter-spacing: -0.01em;
}

.homepage-index-post-title a {
    color: var(--hp-link-blue);
    text-decoration: none !important;
}

.homepage-index-post-title a:hover {
    color: var(--hp-link-red);
    text-decoration: none !important;
}

.homepage-index-post-meta {
    font-size: 0.8rem;
    color: var(--hp-text-muted);
    font-style: italic;
    margin-bottom: 9px;
    line-height: 1.4;
}

.homepage-index-meta-source {
    color: var(--hp-secondary);
    font-style: italic;
    font-weight: 600;
    cursor: default;
}

.homepage-index-meta-comments {
    color: var(--hp-link-blue);
    font-style: italic;
    text-decoration: none;
}

.homepage-index-meta-comments:hover { color: var(--hp-link-red); }

.homepage-index-post-excerpt {
    font-size: 0.93rem;
    color: var(--hp-text-body);
    line-height: 1.7;
    margin: 0 0 14px;
    font-weight: 500;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.homepage-index-post-footer { display: flex; justify-content: flex-start; }

.homepage-index-apply-btn {
    display: inline-block;
    background: var(--hp-primary);
    color: #fff !important;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 9px 22px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: background 0.18s ease;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.homepage-index-apply-btn:hover { background: var(--hp-secondary); }

.homepage-index-no-posts {
    padding: 50px 20px;
    text-align: center;
    color: var(--hp-text-muted);
    font-size: 0.95rem;
}

.homepage-index-pagination {
    display: flex;
    align-items: stretch;
    gap: 3px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.homepage-index-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--hp-text-body);
    text-decoration: none;
    background: var(--hp-card-bg);
    transition: background 0.15s, color 0.15s;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    box-sizing: border-box;
}

.homepage-index-pagination .page-numbers.current {
    background: var(--hp-primary);
    color: #fff;
    border-color: var(--hp-primary);
}

.homepage-index-pagination .page-numbers:not(.current):not(.dots):hover {
    background: #e2e6ea;
    border-color: #adb5bd;
}

.homepage-index-pagination .page-numbers.dots {
    background: transparent;
    border-color: transparent;
    color: var(--hp-text-muted);
    pointer-events: none;
    width: auto;
    padding: 0 4px;
}

.homepage-index-pagination .page-numbers.next,
.homepage-index-pagination .page-numbers.prev {
    width: auto;
    padding: 0 14px;
    font-weight: 700;
    background: var(--hp-primary);
    color: #fff;
    border-color: var(--hp-primary);
    border-radius: 0;
}

.homepage-index-pagination .page-numbers.next:hover,
.homepage-index-pagination .page-numbers.prev:hover {
    background: #155a8a;
    border-color: #155a8a;
}

/* ======================================================
   ARCHIVE (archive.php)
====================================================== */
:root {
    --arc-primary:   var(--ngo-primary);
    --arc-secondary: var(--ngo-secondary);
    --arc-text-body: #222222;
    --arc-text-muted:#5a6474;
    --arc-border:    #d8dde6;
    --arc-card-bg:   #ffffff;
    --arc-link-blue: #003399;
    --arc-link-red:  #cc0000;
}

.archive-page-header {
    padding: 14px 18px 12px;
    background: var(--arc-card-bg);
    border: 1px solid var(--arc-border);
    border-bottom: 3px solid var(--arc-primary);
    margin-bottom: 6px;
    box-sizing: border-box;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.archive-page-header-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--arc-link-blue);
    margin: 0 0 4px;
}

.archive-page-header-desc {
    font-size: 0.85rem;
    color: var(--arc-text-muted);
    margin: 4px 0 0;
    line-height: 1.5;
}

.archive-page-posts-list {
    background: var(--arc-card-bg);
    border: 1px solid var(--arc-border);
    width: 100%;
    box-sizing: border-box;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.archive-page-post-card {
    padding: 14px 18px;
    border-bottom: 1px dashed var(--arc-border);
}

.archive-page-post-card:last-child { border-bottom: none; }

.archive-page-title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 5px;
}

.archive-page-badge-img {
    width: 44px; height: 28px;
    object-fit: contain; flex-shrink: 0; margin-top: 3px;
}

.archive-page-post-title {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.archive-page-post-title a { color: var(--arc-link-blue); text-decoration: none !important; }
.archive-page-post-title a:hover { color: var(--arc-link-red); text-decoration: none !important; }

.archive-page-post-meta {
    font-size: 0.8rem; color: var(--arc-text-muted);
    font-style: italic; margin-bottom: 9px;
}

.archive-page-meta-source { color: var(--arc-secondary); font-style: italic; font-weight: 600; cursor: default; }
.archive-page-meta-comments { color: var(--arc-link-blue); font-style: italic; text-decoration: none; }
.archive-page-meta-comments:hover { color: var(--arc-link-red); }

.archive-page-post-excerpt {
    font-size: 0.93rem; color: var(--arc-text-body);
    line-height: 1.7; margin: 0 0 14px; font-weight: 500;
}

.archive-page-post-footer { display: flex; justify-content: flex-start; }

.archive-page-apply-btn {
    display: inline-block; background: var(--arc-primary);
    color: #fff !important; font-size: 0.9rem; font-weight: 700;
    padding: 9px 22px; border-radius: 4px;
    text-decoration: none !important; transition: background 0.18s;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.archive-page-apply-btn:hover { background: var(--arc-secondary); }

.archive-page-no-posts { padding: 50px 20px; text-align: center; color: var(--arc-text-muted); }

.archive-page-pagination {
    display: flex; align-items: stretch; gap: 3px;
    margin-top: 18px; flex-wrap: wrap;
}

.archive-page-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 1px solid var(--arc-border);
    border-radius: 0; font-size: 0.87rem; font-weight: 700;
    color: var(--arc-text-body); text-decoration: none;
    background: var(--arc-card-bg); transition: background 0.15s;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.archive-page-pagination .page-numbers.current { background: var(--arc-primary); color: #fff; border-color: var(--arc-primary); }
.archive-page-pagination .page-numbers:not(.current):not(.dots):hover { background: #e2e6ea; border-color: #adb5bd; }
.archive-page-pagination .page-numbers.dots { background: transparent; border-color: transparent; color: var(--arc-text-muted); pointer-events: none; width: auto; padding: 0 4px; }
.archive-page-pagination .page-numbers.next,
.archive-page-pagination .page-numbers.prev { width: auto; padding: 0 14px; font-weight: 700; background: var(--arc-primary); color: #fff; border-color: var(--arc-primary); border-radius: 0; }
.archive-page-pagination .page-numbers.next:hover,
.archive-page-pagination .page-numbers.prev:hover { background: #155a8a; border-color: #155a8a; }

/* ======================================================
   SINGLE POST (single.php)
====================================================== */
/* ============================================================
   CSS Variables
============================================================ */
:root {
    --sp-primary:   var(--ngo-primary);
    --sp-secondary: var(--ngo-secondary);
    --sp-text-body: #1a1a1a;
    --sp-text-muted:#5a6474;
    --sp-border:    #d8dde6;
    --sp-bg:        #f4f6f9;
    --sp-card-bg:   #ffffff;
    --sp-link-blue: #003399;
    --sp-link-red:  #cc0000;
}

/* ============================================================
   Page wrapper
============================================================ */
/* layout handled by ngo-page-layout */ .single-post-wrap-unused {
    background: var(--sp-bg);
    width: 100%;
    padding: 18px 0 48px;
    box-sizing: border-box;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.single-post-inner {
    width: 100%;
    padding: 0 14px;
    box-sizing: border-box;
}

/* ============================================================
   Post article card
============================================================ */
.single-post-article {
    background: var(--sp-card-bg);
    border: 1px solid var(--sp-border);
    width: 100%;
    box-sizing: border-box;
    padding: 18px 20px 20px;
}

/* ============================================================
   Post title
============================================================ */
.single-post-title {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 8px;
    color: var(--sp-link-blue);
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    letter-spacing: -0.01em;
}

/* ============================================================
   Meta line
============================================================ */
.single-post-meta {
    font-size: 0.82rem;
    color: var(--sp-text-muted);
    font-style: italic;
    margin: 0 0 16px;
    line-height: 1.4;
    border-bottom: 1px dashed var(--sp-border);
    padding-bottom: 14px;
}

.single-post-meta .single-meta-source {
    color: var(--sp-secondary);
    font-style: italic;
    font-weight: 600;
    cursor: default;
}

.single-post-meta .single-meta-comments {
    color: var(--sp-link-blue);
    font-style: italic;
    text-decoration: none;
}

.single-post-meta .single-meta-comments:hover {
    color: var(--sp-link-red);
    text-decoration: none;
}

/* ============================================================
   Post content
============================================================ */
.single-post-content {
    font-size: 0.95rem;
    color: var(--sp-text-body);
    line-height: 1.75;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 400;
}

.single-post-content p {
    margin: 0 0 10px;
}

.single-post-content strong,
.single-post-content b {
    font-weight: 800;
    color: var(--sp-text-body);
}

.single-post-content ul,
.single-post-content ol {
    margin: 6px 0 12px 18px;
    padding: 0;
}

.single-post-content ul {
    list-style-type: circle;
}

.single-post-content ul li,
.single-post-content ol li {
    margin-bottom: 6px;
    line-height: 1.7;
}

.single-post-content a {
    color: var(--sp-link-blue);
    text-decoration: none;
    font-weight: 700;
}

.single-post-content a:hover {
    color: var(--sp-link-red);
    text-decoration: underline;
}

.single-post-content h1,
.single-post-content h2,
.single-post-content h3,
.single-post-content h4,
.single-post-content h5,
.single-post-content h6 {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 800;
    color: var(--sp-text-body);
    margin: 16px 0 6px;
    line-height: 1.3;
}

/* ============================================================
   How to Apply
============================================================ */
.single-post-apply {
    margin-top: 20px;
    padding: 16px 18px;
    background: var(--sp-bg);
    border: 1px solid var(--sp-border);
    border-radius: 6px;
}

.single-post-apply h3 {
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--sp-primary);
}

.single-post-apply p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--sp-text-body);
}

.single-post-apply a {
    color: var(--sp-primary);
    font-weight: 700;
}

.single-post-apply-btn {
    display: inline-block;
    background: var(--sp-primary);
    color: #fff !important;
    padding: 10px 22px;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: 700;
    transition: background .15s ease;
}
.single-post-apply-btn:hover {
    background: var(--sp-secondary);
}

.single-post-apply-notes {
    font-size: 0.92rem;
    color: var(--sp-text-body);
    line-height: 1.7;
}

/* ============================================================
   Share bar
============================================================ */
.single-post-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px dashed var(--sp-border);
    flex-wrap: wrap;
}

.single-post-share-label {
    font-size: 1rem;
    font-weight: 800;
    color: var(--sp-text-body);
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    white-space: nowrap;
}

.single-post-share-icons {
    display: flex;
    align-items: center;
    gap: 5px;
}

.single-post-share-icons a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.single-post-share-icons a img {
    width: 32px;
    height: 32px;
    display: block;
    object-fit: contain;
}

/* ============================================================
   Related posts — no heading, just title links as h4
============================================================ */
.single-post-related {
    background: var(--sp-card-bg);
    border: 1px solid var(--sp-border);
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 14px 18px;
}

.single-post-related-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.single-post-related-list li {
    border-bottom: 1px dashed var(--sp-border);
    padding: 0;
}

.single-post-related-list li:last-child {
    border-bottom: none;
}

.single-post-related-list li h4 {
    margin: 0;
    padding: 8px 0;
    font-size: 0.97rem;
    font-weight: 800;
    line-height: 1.35;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    letter-spacing: -0.01em;
}

.single-post-related-list li h4 a {
    color: var(--sp-link-blue);
    text-decoration: none !important;
}

.single-post-related-list li h4 a:hover {
    color: var(--sp-link-red);
    text-decoration: none !important;
}

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 600px) {
    .single-post-inner {
        padding: 0 8px;
    }

    .single-post-article {
        padding: 14px 12px 16px;
    }

    .single-post-title {
        font-size: 1.15rem;
    }

    .single-post-content {
        font-size: 0.9rem;
    }

    .single-post-share-label {
        font-size: 0.9rem;
    }

    .single-post-share-icons a img {
        width: 28px;
        height: 28px;
    }

    .single-post-related {
        padding: 12px 12px;
    }

    .single-post-related-list li h4 {
        font-size: 0.9rem;
    }
}

/* ======================================================
   SEARCH RESULTS (search.php)
====================================================== */
:root {
    --srch-primary:   var(--ngo-primary);
    --srch-secondary: var(--ngo-secondary);
    --srch-text-body: #222222;
    --srch-text-muted:#5a6474;
    --srch-border:    #d8dde6;
    --srch-card-bg:   #ffffff;
    --srch-link-blue: #003399;
    --srch-link-red:  #cc0000;
}

.search-page-header {
    padding: 14px 18px 12px;
    background: var(--srch-card-bg);
    border: 1px solid var(--srch-border);
    border-bottom: 3px solid var(--srch-primary);
    margin-bottom: 6px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.search-page-header-title { font-size: 1.1rem; font-weight: 800; color: var(--srch-link-blue); margin: 0 0 2px; }
.search-page-header-title .search-page-query { color: var(--srch-secondary); }
.search-page-header-count { font-size: 0.82rem; color: var(--srch-text-muted); font-style: italic; margin: 4px 0 0; }

.search-page-posts-list {
    background: var(--srch-card-bg); border: 1px solid var(--srch-border);
    width: 100%; box-sizing: border-box;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.search-page-post-card { padding: 14px 18px; border-bottom: 1px dashed var(--srch-border); }
.search-page-post-card:last-child { border-bottom: none; }

.search-page-title-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 5px; }
.search-page-badge-img { width: 44px; height: 28px; object-fit: contain; flex-shrink: 0; margin-top: 3px; }

.search-page-post-title { font-size: 1.15rem; font-weight: 800; line-height: 1.3; margin: 0; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
.search-page-post-title a { color: var(--srch-link-blue); text-decoration: none !important; }
.search-page-post-title a:hover { color: var(--srch-link-red); text-decoration: none !important; }

.search-page-post-meta { font-size: 0.8rem; color: var(--srch-text-muted); font-style: italic; margin-bottom: 9px; }
.search-page-meta-source { color: var(--srch-secondary); font-style: italic; font-weight: 600; cursor: default; }
.search-page-meta-comments { color: var(--srch-link-blue); font-style: italic; text-decoration: none; }
.search-page-meta-comments:hover { color: var(--srch-link-red); }

.search-page-post-excerpt { font-size: 0.93rem; color: var(--srch-text-body); line-height: 1.7; margin: 0 0 14px; font-weight: 500; }
.search-page-post-footer { display: flex; justify-content: flex-start; }

.search-page-apply-btn {
    display: inline-block; background: var(--srch-primary); color: #fff !important;
    font-size: 0.9rem; font-weight: 700; padding: 9px 22px; border-radius: 4px;
    text-decoration: none !important; transition: background 0.18s;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.search-page-apply-btn:hover { background: var(--srch-secondary); }

.search-page-no-posts { padding: 50px 20px; text-align: center; color: var(--srch-text-muted); font-size: 0.95rem; }
.search-page-no-posts p { margin: 0 0 16px; }
.search-page-retry-form { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.search-page-retry-form input[type="search"] { padding: 8px 12px; font-size: 0.9rem; border: 1px solid var(--srch-border); border-radius: 0; outline: none; width: 260px; box-sizing: border-box; }
.search-page-retry-form input[type="search"]:focus { border-color: var(--srch-primary); }
.search-page-retry-form button { padding: 8px 18px; background: var(--srch-primary); color: #fff; font-size: 0.9rem; font-weight: 700; border: none; cursor: pointer; }
.search-page-retry-form button:hover { background: var(--srch-secondary); }

.search-page-pagination { display: flex; align-items: stretch; gap: 3px; margin-top: 18px; flex-wrap: wrap; }
.search-page-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--srch-border); border-radius: 0; font-size: 0.87rem; font-weight: 700; color: var(--srch-text-body); text-decoration: none; background: var(--srch-card-bg); transition: background 0.15s; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
.search-page-pagination .page-numbers.current { background: var(--srch-primary); color: #fff; border-color: var(--srch-primary); }
.search-page-pagination .page-numbers:not(.current):not(.dots):hover { background: #e2e6ea; border-color: #adb5bd; }
.search-page-pagination .page-numbers.dots { background: transparent; border-color: transparent; color: var(--srch-text-muted); pointer-events: none; width: auto; padding: 0 4px; }
.search-page-pagination .page-numbers.next,
.search-page-pagination .page-numbers.prev { width: auto; padding: 0 14px; font-weight: 700; background: var(--srch-primary); color: #fff; border-color: var(--srch-primary); border-radius: 0; }
.search-page-pagination .page-numbers.next:hover,
.search-page-pagination .page-numbers.prev:hover { background: #155a8a; border-color: #155a8a; }

/* ======================================================
   404 PAGE (404.php)
====================================================== */
.site-404{
    --primary: var(--ngo-primary);
    --secondary: var(--ngo-secondary);

    background:#f8f9fb;
}

.site-404-hero{

    padding:90px 20px;
    text-align:center;
    background:#fff;

}

.site-404-container{

    max-width:800px;
    margin:auto;

}

.site-404-number{

    font-size:120px;
    font-weight:800;
    color:var(--primary);
    line-height:1;

}

.site-404-title{

    font-size:42px;
    margin:15px 0;

}

.site-404-text{

    max-width:650px;
    margin:auto;
    color:#666;
    line-height:1.8;
    font-size:18px;

}

.site-404-search{

    display:flex;
    justify-content:center;
    gap:10px;

    margin:40px auto;

    flex-wrap:wrap;

}

.site-404-search input{

    width:450px;
    max-width:100%;

    padding:14px 18px;

    border:1px solid #ddd;
    border-radius:40px;
    font-size:16px;

}

.site-404-search button{

    padding:14px 28px;

    border:none;
    border-radius:40px;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    transition:.3s;

}

.site-404-search button:hover{

    background:var(--secondary);

}

.site-404-home{

    display:inline-block;

    margin-top:10px;

    padding:12px 28px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    border-radius:40px;

    transition:.3s;

}

.site-404-home:hover{

    background:var(--secondary);

}

.site-404-content{

    max-width:1200px;

    margin:60px auto;

    padding:0 20px;

}

.site-404-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

.site-404-box{

    background:#fff;

    padding:30px;

    border-radius:14px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

}

.site-404-box h2{

    margin-top:0;
    margin-bottom:20px;

}

.site-404-box ul{

    list-style:none;

    padding:0;
    margin:0;

}

.site-404-box li{

    padding:10px 0;

    border-bottom:1px solid #eee;

}

.site-404-box li:last-child{

    border:none;

}

.site-404-box a{

    color:#333;

    text-decoration:none;

}

.site-404-box a:hover{

    color:var(--primary);

}

@media(max-width:768px){

.site-404-number{

    font-size:90px;

}

.site-404-title{

    font-size:30px;

}

.site-404-text{

    font-size:16px;

}

.site-404-search{

    flex-direction:column;

}

.site-404-search input,
.site-404-search button{

    width:100%;

}

}

/* ======================================================
   COMMENTS (comments.php)
====================================================== */
:root {
    --cf-primary:   var(--ngo-primary);
    --cf-text-body: #1a1a1a;
    --cf-text-muted:#5a6474;
    --cf-border:    #d8dde6;
    --cf-link-blue: #003399;
    --cf-link-red:  #cc0000;
    --cf-label-bg: #b8bf8a;
}

/* ── Comments heading pill ── */
.ngojobsite-comments-heading {
    display: inline-block;
    background: var(--cf-primary);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 6px 14px;
    margin-bottom: 10px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    letter-spacing: 0.01em;
}

/* ── Existing comments list ── */
.ngojobsite-comment-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.ngojobsite-comment-item {
    background: #fff;
    border: 1px solid var(--cf-border);
    padding: 12px 14px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--cf-text-body);
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.ngojobsite-comment-author {
    font-weight: 800;
    color: var(--cf-link-blue);
    margin-bottom: 4px;
    font-size: 0.88rem;
}

.ngojobsite-comment-date {
    font-size: 0.78rem;
    color: var(--cf-text-muted);
    font-style: italic;
    margin-bottom: 8px;
}

.ngojobsite-comment-text {
    line-height: 1.65;
}

/* ── Comment form wrap ── */
.ngojobsite-comment-form-wrap {
    border: 1px solid var(--cf-border);
    width: 100%;
    max-width: 760px;
    box-sizing: border-box;
    overflow: hidden;
}

.ngojobsite-cf-header {
    background: var(--cf-primary);
    color: #fff;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 12px 10px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    letter-spacing: 0.01em;
}

.ngojobsite-cf-sep {
    height: 4px;
    background: #b8c8d8;
}

.ngojobsite-cf-table {
    width: 100%;
    border-collapse: collapse;
}

.ngojobsite-cf-table .cf-label-cell.cf-label-top {
    vertical-align: top;
    padding-top: 12px;
}

.ngojobsite-cf-table .cf-label-cell {
    background: var(--cf-label-bg);
    text-align: right;
    padding: 10px 14px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cf-text-body);
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    width: 140px;
    vertical-align: middle;
    border-bottom: 1px solid #c8cfaa;
}

.ngojobsite-cf-table .cf-label-cell .cf-required {
    color: var(--cf-link-red);
    font-weight: 700;
    margin-left: 2px;
}

.ngojobsite-cf-table .cf-input-cell {
    background: var(--cf-label-bg);
    padding: 10px 12px;
    border-bottom: 1px solid #c8cfaa;
    vertical-align: middle;
}

.ngojobsite-cf-table input[type="text"],
.ngojobsite-cf-table input[type="email"],
.ngojobsite-cf-table input[type="url"],
.ngojobsite-cf-table textarea {
    width: 100%;
    background: #fff;
    border: 1px solid #b0b8c8;
    padding: 6px 8px;
    font-size: 0.88rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: var(--cf-text-body);
    box-sizing: border-box;
    outline: none;
    border-radius: 0;
}

.ngojobsite-cf-table input[type="text"]:focus,
.ngojobsite-cf-table input[type="email"]:focus,
.ngojobsite-cf-table input[type="url"]:focus,
.ngojobsite-cf-table textarea:focus {
    border-color: var(--cf-primary);
}

.ngojobsite-cf-table textarea {
    height: 160px;
    resize: vertical;
}

.ngojobsite-cf-submit-row {
    background: var(--cf-label-bg);
    text-align: center;
    padding: 12px;
    border-bottom: 1px solid #c8cfaa;
}

.ngojobsite-cf-submit-row input[type="submit"] {
    background: #f0f0f0;
    border: 1px solid #aaa;
    padding: 6px 22px;
    font-size: 0.88rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 400;
    color: var(--cf-text-body);
    cursor: pointer;
    border-radius: 0;
}

.ngojobsite-cf-submit-row input[type="submit"]:hover {
    background: #e0e0e0;
}

.ngojobsite-cf-footer {
    background: var(--cf-primary);
    height: 14px;
}

@media (max-width: 600px) {
    .ngojobsite-comment-form-wrap {
        max-width: 100%;
    }

    .ngojobsite-cf-table .cf-label-cell {
        width: 90px;
        font-size: 0.82rem;
        padding: 8px;
    }
}

/* ======================================================
   PAGE (page.php)
====================================================== */
.page-container{
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

.page-title{
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 25px;
    color: #222;
}

.page-body{
    font-size: 18px;
    line-height: 1.9;
    color: #333;
}

.page-body p{
    margin-bottom: 1.5em;
}

.page-body h2{
    font-size: 30px;
    margin: 40px 0 20px;
    line-height: 1.4;
}

.page-body h3{
    font-size: 24px;
    margin: 35px 0 15px;
    line-height: 1.4;
}

.page-body ul,
.page-body ol{
    margin: 20px 0 20px 30px;
}

.page-body li{
    margin-bottom: 10px;
}

.page-body img{
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.page-body a{
    color: #0066cc;
    text-decoration: none;
}

.page-body a:hover{
    text-decoration: underline;
}

@media (max-width: 768px){
    .page-title{
        font-size: 28px;
    }

    .page-body{
        font-size: 17px;
        line-height: 1.8;
    }

    .page-container{
        margin: 25px auto;
    }
}

/* ======================================================
   FOOTER (footer.php)
====================================================== */
.site-footer{
    padding:12px 15px;
    text-align:center;
    color:#fff;
    margin-top:20px;
    background: var(--ngo-footer-bg, #1a1a2e);
}

.site-footer-links{
    margin:0 auto 8px;
    line-height:1.9;
}

.site-footer-link{
    color:#fff;
    text-decoration:none;
    font-size:13px;
    transition:all .3s ease;
}

.site-footer-link:hover{
    color:var(--ngo-secondary);
}

.site-footer-separator{
    display:inline-block;
    margin:0 5px;
    opacity:.5;
}

.site-footer-copyright{
    font-size:12px;
    opacity:.85;
}

#site-footer-top-btn{
    position:fixed;
    right:20px;
    bottom:20px;
    width:48px;
    height:48px;
    border:none;
    border-radius:50px;
    cursor:pointer;
    z-index:9999;

    background:var(--ngo-primary);
    color:#fff;

    font-size:20px;
    font-weight:700;

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

    opacity:0;
    visibility:hidden;

    transition:all .3s ease;
}

#site-footer-top-btn:hover{
    background:var(--ngo-secondary);
    transform:translateY(-2px);
}

#site-footer-top-btn.site-footer-show{
    opacity:1;
    visibility:visible;
}

@media (max-width:768px){

    .site-footer{
        padding:10px 12px;
    }

    .site-footer-links{
        line-height:1.8;
        margin-bottom:6px;
    }

    .site-footer-link{
        font-size:12px;
    }

    .site-footer-copyright{
        font-size:11px;
    }

    #site-footer-top-btn{
        right:15px;
        bottom:15px;
        width:44px;
        height:44px;
    }

}

/* ======================================================
   HEADER (header.php)
====================================================== */

/* ════════════════════════════════════════════════════════════
   1. TOP THIN BAR
════════════════════════════════════════════════════════════ */
#ngo-topbar {
    background: var(--ngo-primary);
    height: 20px;
    width: 100%;
}

/* ════════════════════════════════════════════════════════════
   2. LOGO / NAV ROW
════════════════════════════════════════════════════════════ */
#ngo-header {
    background: #fff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    position: relative;
    top: 0;
    z-index: 900;
}
.ngo-sticky-header #ngo-header {
    position: sticky;
}
.ngo-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
}

/* Logo */
.ngo-logo a          { display: inline-flex; align-items: center; text-decoration: none; }
.ngo-logo img        { max-height: 64px; width: 250px; display: block; }
.ngo-logo-text       { font-size: 22px; font-weight: 800; color: #222; }

/* Desktop nav buttons — wrap into two rows naturally */
.ngo-nav-desktop {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 360px;   /* forces two rows at typical button sizes */
}
.ngo-nav-desktop a {
    display: inline-block;
    padding: 5px 12px;
    background: var(--ngo-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 3px;
    white-space: nowrap;
    transition: opacity .15s;
}
.ngo-nav-desktop a:hover { opacity: .85; }

/* Hamburger — mobile only */
#ngo-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: #c0392b;
    border: none;
    border-radius: 4px;
    padding: 9px 10px;
    cursor: pointer;
    position: relative;
    z-index: 1001;
}
#ngo-hamburger span {
    display: block;
    width: 22px; height: 2px;
    background: #fff;
    border-radius: 2px;
}

/* ════════════════════════════════════════════════════════════
   3. TWO-TONE DIVIDER BAR
════════════════════════════════════════════════════════════ */
#ngo-divider {
    display: flex;
    height: 22px;
    width: 100%;
}
#ngo-divider .left  { flex: 0 0 50%; background: var(--ngo-primary); }
#ngo-divider .right { flex: 0 0 50%; background: var(--ngo-olive); }

/* ════════════════════════════════════════════════════════════
   4. SEARCH BAR (desktop strip — Google CSE)
════════════════════════════════════════════════════════════ */
#ngo-searchbar {
    background: var(--ngo-primary);
    padding: 10px 150px;
    margin-top: 18px;
}
.ngo-search-inner {
    display: flex;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
}
/* Google CSE table stretches to fill the flex container */
.ngo-search-inner form,
.ngo-search-inner table { width: 100%; }
/* Override any Google CSE white backgrounds on the outer wrapper */
.gsc-search-box { width: 100% !important; }
.gsc-input-box  { border-radius: 3px 0 0 3px !important; }
/* Search button */
#ngo-searchbar .ngo-cse-btn {
    padding: 8px 22px;
    background: var(--ngo-olive);
    color: #fff;
    border: none;
    border-radius: 0 3px 3px 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    height: 38px;
    transition: opacity .15s;
}
#ngo-searchbar .ngo-cse-btn:hover { opacity: .88; }

/* ════════════════════════════════════════════════════════════
   5. MOBILE DROPDOWN MENU
   — drops down below header, not fullscreen
════════════════════════════════════════════════════════════ */
#ngo-mobile-menu {
    display: none;
    flex-direction: column;
    background: var(--ngo-primary);
    position: absolute;
    top: 100%;          /* flush under #ngo-header */
    left: 0; right: 0;
    z-index: 950;
    border-top: 2px solid rgba(255,255,255,.15);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
#ngo-mobile-menu.is-open { display: flex; }

/* Search inside mobile menu */
.ngo-mob-search {
    padding: 10px 14px;
    background: rgba(0,0,0,.15);
}
.ngo-mob-search form { display: flex; }
.ngo-mob-search input[type="search"] {
    flex: 1;
    padding: 9px 12px;
    border: none;
    border-radius: 3px 0 0 3px;
    font-size: 14px;
    outline: none;
}
.ngo-mob-search button[type="submit"] {
    padding: 9px 18px;
    background: var(--ngo-olive);
    color: #fff;
    border: none;
    border-radius: 0 3px 3px 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Mobile nav list */
.ngo-mob-nav { list-style: none; }
.ngo-mob-nav li { border-bottom: 1px solid rgba(255,255,255,.1); }
.ngo-mob-nav li a {
    display: block;
    padding: 14px 20px;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-family: Georgia, serif;
    text-align: center;
    transition: background .15s;
}
.ngo-mob-nav li a:hover { background: rgba(255,255,255,.1); }
.ngo-mob-nav li.current-menu-item > a { font-weight: 700; }

/* Close row */
#ngo-mob-close {
    background: #c0392b;
    border: none;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: Georgia, serif;
    padding: 14px 20px;
    text-align: center;
    cursor: pointer;
    width: 100%;
}
#ngo-mob-close:hover { background: #a93226; }

/* ════════════════════════════════════════════════════════════
   6. MOBILE TOP SEARCH BAR (above logo row)
════════════════════════════════════════════════════════════ */
#ngo-mobile-top-search {
    display: none;
    background: var(--ngo-primary);
    padding: 10px 14px;
}
#ngo-mobile-top-search form { display: flex; }
#ngo-mobile-top-search input[type="search"] {
    flex: 1;
    padding: 9px 12px;
    border: 2px solid #ccc;
    border-right: none;
    border-radius: 3px 0 0 3px;
    font-size: 14px;
    background: #fff;
    color: #333;
    outline: none;
}
#ngo-mobile-top-search input[type="search"]::placeholder { color: #999; }
#ngo-mobile-top-search button[type="submit"] {
    padding: 9px 20px;
    background: var(--ngo-olive);
    color: #fff;
    border: none;
    border-radius: 0 3px 3px 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
@media ( max-width: 768px ) {
    .ngo-nav-desktop  { display: none; }
    #ngo-hamburger    { display: flex; }

    /* On mobile the divider and desktop search hide;
       search lives above the header and inside the dropdown instead */
    #ngo-divider      { display: none; }
    #ngo-searchbar    { display: none; }

    /* Show mobile top search bar */
    #ngo-mobile-top-search { display: block; }

    /* Header must be position:relative so dropdown can use top:100% */
    #ngo-header { position: relative; }
}
@media ( min-width: 769px ) {
    #ngo-mobile-menu       { display: none !important; }
    #ngo-mobile-top-search { display: none !important; }
}

.site-header-filter{
    padding:0 15px;
}

/* CSE search form (desktop search bar + fallback), was inline style="" */
.ngo-cse-input{
    flex:1;
    padding:8px 14px;
    border:2px solid #ccc;
    border-right:none;
    border-radius:3px 0 0 3px;
    font-size:14px;
    background:#fff;
    color:#333;
    outline:none;
}
.ngo-cse-form{
    display:flex;
    width:100%;
}

/* ════════════════════════════════════════════════════════════
   7. SITE WRAPPER — single shared container so every bar
      (topbar, header, divider, search bar, page content,
      footer) lines up on the exact same left/right edges and
      the whole theme sits centred on wide desktop screens
      instead of stretching edge-to-edge.
════════════════════════════════════════════════════════════ */
.ngo-site-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    position: relative;
}

/* ======================================================
   MOBILE FILTER SIDEBAR (sidebar-mobile-footer.php)
====================================================== */
/* ============================================================
   Mobile Footer Sidebar — hidden on desktop, shown on mobile
============================================================ */
:root {
    --mfs-primary:   var(--ngo-primary);
    --mfs-secondary: var(--ngo-secondary);
    --mfs-border:    #c8ccd2;
    --mfs-bg:        #f4f6f9;
    --mfs-card:      #ffffff;
    --mfs-text:      #1a1a1a;
    --mfs-muted:     #5a6474;
    --mfs-link-blue: #003399;
    --mfs-link-red:  #cc0000;
}

.mobile-footer-sidebar-wrap {
    display: none; /* hidden on desktop by default */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    flex-direction: column;
    gap: 10px;
    padding: 0 14px;
    margin: 24px 0;
}

/* ============================================================
   Ad slot — force full-width stretch so adv_display() fills
   the container the same way the desktop sidebars do.
   The injected markup (div / img / iframe / ins) must also
   stretch, hence the child selectors below.
============================================================ */
.mfs-ad-widget {
    display: block;          /* block instead of flex avoids centering collapse */
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;        /* clip anything that tries to bleed out */
}

/* Every direct child injected by adv_display() */
.mfs-ad-widget > * {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    height: auto !important; /* let height scale naturally with content */
}

/* Images and iframes inside the ad slot */
.mfs-ad-widget img,
.mfs-ad-widget iframe,
.mfs-ad-widget ins {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
}

/* Shared widget heading bar */
.mfs-widget-heading {
    background: var(--mfs-primary);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 7px 12px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    letter-spacing: 0.02em;
}

/* Filter widget */
.mfs-filter-widget {
    background: var(--mfs-bg);
    padding: 8px;
    box-sizing: border-box;
}

.mfs-filter-fieldset {
    border: 1px solid var(--mfs-border);
    padding: 10px 12px 14px;
    margin: 0;
    background: var(--mfs-bg);
}

.mfs-filter-legend {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--mfs-text);
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    padding: 0 5px;
}

.mfs-filter-label {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--mfs-text);
    margin-bottom: 6px;
    display: block;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.mfs-filter-select {
    width: 100%;
    padding: 9px 10px;
    font-size: 0.85rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: var(--mfs-muted);
    border: 1px solid #c0c5ce;
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    margin-bottom: 12px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a6474'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

.mfs-filter-select:focus {
    border-color: var(--mfs-primary);
    color: var(--mfs-text);
}

.mfs-filter-btn {
    display: block;
    width: 100%;
    background: var(--mfs-primary);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 12px 10px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    letter-spacing: 0.02em;
    text-align: center;
    transition: background 0.18s;
    margin-top: 2px;
}

.mfs-filter-btn:hover,
.mfs-filter-btn:active {
    background: var(--mfs-secondary);
}

/* Subscription widget */
.mfs-subscription-widget {
    background: var(--mfs-card);
    border: 1px solid var(--mfs-border);
    padding: 16px 14px 18px;
    box-sizing: border-box;
    text-align: center;
}

.mfs-subscription-heading {
    font-size: 0.88rem;
    font-weight: 700;
    font-style: italic;
    color: var(--mfs-link-red);
    line-height: 1.45;
    margin: 0 0 12px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.mfs-subscription-input {
    width: 100%;
    padding: 9px 10px;
    font-size: 0.85rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    border: 1px solid #c0c5ce;
    border-radius: 0;
    box-sizing: border-box;
    outline: none;
    margin-bottom: 10px;
}

.mfs-subscription-input:focus {
    border-color: var(--mfs-primary);
}

.mfs-subscription-btn {
    background: var(--mfs-bg);
    border: 1px solid #aaa;
    padding: 9px 24px;
    font-size: 0.85rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 600;
    color: var(--mfs-text);
    cursor: pointer;
    border-radius: 0;
    transition: background 0.15s;
    width: 100%;
}

.mfs-subscription-btn:hover,
.mfs-subscription-btn:active {
    background: #e0e0e0;
}

/* Widget area (for admin-added widgets) */
.mfs-widgets-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mfs-widget {
    background: var(--mfs-card);
    border: 1px solid var(--mfs-border);
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 0 10px;
}

.mfs-widget > *:not(.mfs-widget-heading) {
    padding: 0 12px;
}

.mfs-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mfs-widget li {
    padding: 7px 12px;
    border-bottom: 1px dashed var(--mfs-border);
    font-size: 0.82rem;
}

.mfs-widget li:last-child {
    border-bottom: none;
}

/* ============================================================
   Responsive — only show below the 992px sidebar breakpoint
============================================================ */
@media (max-width: 992px) {
    .mobile-footer-sidebar-wrap {
        display: flex;
    }
}

@media (max-width: 600px) {
    .mobile-footer-sidebar-wrap { padding: 0 10px; }
    .mfs-widget-heading { font-size: 0.82rem; padding: 7px 10px; }
    .mfs-filter-select,
    .mfs-subscription-input { font-size: 0.88rem; }
    .mfs-filter-btn,
    .mfs-subscription-btn { font-size: 0.92rem; }
}

/* ======================================================
   FILTER RESULTS — sidebar filter (template-parts/filter-results.php)
====================================================== */
:root {
    --fr-primary:   var(--ngo-primary);
    --fr-secondary: var(--ngo-secondary);
    --fr-text-body: #222222;
    --fr-text-muted:#5a6474;
    --fr-border:    #d8dde6;
    --fr-bg:        #f4f6f9;
    --fr-card-bg:   #ffffff;
    --fr-link-blue: #003399;
    --fr-link-red:  #cc0000;
}

/* layout handled by ngo-page-layout */ .filter-results-wrap-unused {
    background: var(--fr-bg);
    width: 100%;
    padding: 18px 0 48px;
    box-sizing: border-box;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.filter-results-inner {
    width: 100%;
    padding: 0 14px;
    box-sizing: border-box;
}

/* Header */
.filter-results-header {
    padding: 14px 18px 12px;
    background: var(--fr-card-bg);
    border: 1px solid var(--fr-border);
    border-bottom: 3px solid var(--fr-primary);
    margin-bottom: 6px;
    box-sizing: border-box;
}

.filter-results-header-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--fr-link-blue);
    margin: 0 0 2px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.filter-results-header-title span {
    color: var(--fr-secondary);
}

.filter-results-header-count {
    font-size: 0.82rem;
    color: var(--fr-text-muted);
    font-style: italic;
    margin: 4px 0 0;
}

/* Post list — same as index */
.filter-results-posts-list {
    background: var(--fr-card-bg);
    border: 1px solid var(--fr-border);
    width: 100%;
    box-sizing: border-box;
}

.filter-results-post-card {
    padding: 14px 18px;
    border-bottom: 1px dashed var(--fr-border);
    background: var(--fr-card-bg);
}

.filter-results-post-card:last-child { border-bottom: none; }

.filter-results-title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 5px;
}

.filter-results-badge-img {
    width: 44px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 3px;
}

.filter-results-post-title {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.filter-results-post-title a {
    color: var(--fr-link-blue);
    text-decoration: none !important;
}

.filter-results-post-title a:hover {
    color: var(--fr-link-red);
    text-decoration: none !important;
}

.filter-results-post-meta {
    font-size: 0.8rem;
    color: var(--fr-text-muted);
    font-style: italic;
    margin-bottom: 9px;
}

.filter-results-meta-source {
    color: var(--fr-secondary);
    font-style: italic;
    font-weight: 600;
    cursor: default;
}

.filter-results-meta-comments {
    color: var(--fr-link-blue);
    font-style: italic;
    text-decoration: none;
}

.filter-results-meta-comments:hover { color: var(--fr-link-red); }

.filter-results-post-excerpt {
    font-size: 0.93rem;
    color: var(--fr-text-body);
    line-height: 1.7;
    margin: 0 0 14px;
    font-weight: 500;
}

.filter-results-post-footer { display: flex; justify-content: flex-start; }

.filter-results-apply-btn {
    display: inline-block;
    background: var(--fr-primary);
    color: #fff !important;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 9px 22px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: background 0.18s;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.filter-results-apply-btn:hover { background: var(--fr-secondary); }

.filter-results-no-posts {
    padding: 50px 20px;
    text-align: center;
    color: var(--fr-text-muted);
    font-size: 0.95rem;
}

/* Pagination */
.filter-results-pagination {
    display: flex;
    align-items: stretch;
    gap: 3px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.filter-results-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--fr-border);
    border-radius: 0;
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--fr-text-body);
    text-decoration: none;
    background: var(--fr-card-bg);
    transition: background 0.15s, color 0.15s;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    box-sizing: border-box;
}

.filter-results-pagination .page-numbers.current {
    background: var(--fr-primary);
    color: #fff;
    border-color: var(--fr-primary);
}

.filter-results-pagination .page-numbers:not(.current):not(.dots):hover {
    background: #e2e6ea;
    border-color: #adb5bd;
}

.filter-results-pagination .page-numbers.dots {
    background: transparent;
    border-color: transparent;
    color: var(--fr-text-muted);
    pointer-events: none;
    width: auto;
    padding: 0 4px;
}

.filter-results-pagination .page-numbers.next,
.filter-results-pagination .page-numbers.prev {
    width: auto;
    padding: 0 14px;
    font-weight: 700;
    background: var(--fr-primary);
    color: #fff;
    border-color: var(--fr-primary);
}

.filter-results-pagination .page-numbers.next:hover,
.filter-results-pagination .page-numbers.prev:hover {
    background: #155a8a;
    border-color: #155a8a;
}

@media (max-width: 600px) {
    .filter-results-inner { padding: 0 8px; }
    .filter-results-post-card { padding: 12px; }
    .filter-results-post-title { font-size: 1rem; }
    .filter-results-badge-img { width: 38px; height: 24px; }
}

/* ======================================================
   JOB FILTER RESULTS — header filter results (template-parts/job-filter-results.php)
====================================================== */
:root {
    --jf-primary:   var(--ngo-primary);
    --jf-secondary: var(--ngo-secondary);
    --jf-text-body: #222222;
    --jf-text-muted:#5a6474;
    --jf-border:    #d8dde6;
    --jf-card-bg:   #ffffff;
    --jf-link-blue: #003399;
    --jf-link-red:  #cc0000;
}

.jf-header {
    padding: 14px 18px 12px;
    background: var(--jf-card-bg);
    border: 1px solid var(--jf-border);
    border-bottom: 3px solid var(--jf-primary);
    margin-bottom: 6px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    box-sizing: border-box;
}

.jf-header-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--jf-link-blue);
    margin: 0 0 2px;
}

.jf-header-title span { color: var(--jf-secondary); }

.jf-header-count {
    font-size: 0.82rem;
    color: var(--jf-text-muted);
    font-style: italic;
    margin: 4px 0 0;
}

.jf-posts-list {
    background: var(--jf-card-bg);
    border: 1px solid var(--jf-border);
    width: 100%;
    box-sizing: border-box;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.jf-post-card {
    padding: 14px 18px;
    border-bottom: 1px dashed var(--jf-border);
}

.jf-post-card:last-child { border-bottom: none; }

.jf-title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 5px;
}

.jf-badge-img {
    width: 44px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 3px;
}

.jf-post-title {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.jf-post-title a { color: var(--jf-link-blue); text-decoration: none !important; }
.jf-post-title a:hover { color: var(--jf-link-red); text-decoration: none !important; }

.jf-post-meta {
    font-size: 0.8rem;
    color: var(--jf-text-muted);
    font-style: italic;
    margin-bottom: 9px;
}

.jf-meta-source { color: var(--jf-secondary); font-style: italic; font-weight: 600; cursor: default; }
.jf-meta-comments { color: var(--jf-link-blue); font-style: italic; text-decoration: none; }
.jf-meta-comments:hover { color: var(--jf-link-red); }

.jf-post-excerpt {
    font-size: 0.93rem;
    color: var(--jf-text-body);
    line-height: 1.7;
    margin: 0 0 14px;
    font-weight: 500;
}

.jf-post-footer { display: flex; justify-content: flex-start; }

.jf-apply-btn {
    display: inline-block;
    background: var(--jf-primary);
    color: #fff !important;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 9px 22px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: background 0.18s;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.jf-apply-btn:hover { background: var(--jf-secondary); }

.jf-no-posts {
    padding: 50px 20px;
    text-align: center;
    color: var(--jf-text-muted);
    font-size: 0.95rem;
}

.jf-pagination {
    display: flex;
    align-items: stretch;
    gap: 3px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.jf-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--jf-border);
    border-radius: 0;
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--jf-text-body);
    text-decoration: none;
    background: var(--jf-card-bg);
    transition: background 0.15s;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.jf-pagination .page-numbers.current { background: var(--jf-primary); color: #fff; border-color: var(--jf-primary); }
.jf-pagination .page-numbers:not(.current):not(.dots):hover { background: #e2e6ea; border-color: #adb5bd; }
.jf-pagination .page-numbers.dots { background: transparent; border-color: transparent; color: var(--jf-text-muted); pointer-events: none; width: auto; padding: 0 4px; }
.jf-pagination .page-numbers.next,
.jf-pagination .page-numbers.prev { width: auto; padding: 0 14px; background: var(--jf-primary); color: #fff; border-color: var(--jf-primary); border-radius: 0; font-weight: 700; }
.jf-pagination .page-numbers.next:hover,
.jf-pagination .page-numbers.prev:hover { background: #155a8a; border-color: #155a8a; }

/* ======================================================
   PAGE LAYOUT — 3 column wrapper (template-parts/layout-open.php)
====================================================== */
.ngo-page-layout {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 18px 14px 48px;
    box-sizing: border-box;
    background: #f4f6f9;
}

.ngo-col-right-sidebar {
    width: 220px;
    flex-shrink: 0;
}

.ngo-col-main {
    flex: 1;
    min-width: 0;
}

.ngo-col-left-sidebar {
    width: 220px;
    flex-shrink: 0;
}

/* Sticky applied to the column div — not the inner wrapper */
.ngo-col-sticky {
    position: sticky;
    top: 16px;
}

@media (max-width: 768px) {
    .ngo-page-layout {
        padding: 12px 8px 32px;
        display: block;
    }
    .ngo-col-right-sidebar,
    .ngo-col-left-sidebar {
        display: none !important;
    }
    .ngo-col-main {
        width: 100%;
    }
}

/* ======================================================
   LEFT SIDEBAR (template-parts/left-sidebar.php)
====================================================== */
/* ============================================================
   Left Sidebar — CSS Variables
============================================================ */
:root {
    --ls-primary:   var(--ngo-primary);
    --ls-secondary: var(--ngo-secondary);
    --ls-border:    #c8ccd2;
    --ls-bg:        #f4f6f9;
    --ls-card:      #ffffff;
    --ls-text:      #1a1a1a;
    --ls-muted:     #5a6474;
    --ls-link-blue: #003399;
    --ls-link-red:  #cc0000;
}

/* ============================================================
   Sidebar wrapper
============================================================ */
.left-sidebar-wrap {
    width: 100%;
    max-width: 260px;
    box-sizing: border-box;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ============================================================
   Sidebar ad slot
============================================================ */
.ls-ad-widget {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* ============================================================
   Job Filter widget
============================================================ */
.ls-filter-widget {
    background: var(--ls-bg);
    padding: 10px;
    box-sizing: border-box;
}

.ls-filter-fieldset {
    border: 1px solid var(--ls-border);
    padding: 10px 13px 16px;
    margin: 0;
    background: var(--ls-bg);
}

.ls-filter-legend {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ls-text);
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    padding: 0 5px;
}

.ls-filter-label {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--ls-text);
    margin-bottom: 5px;
    display: block;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.ls-filter-select {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.78rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: var(--ls-muted);
    border: 1px solid #c0c5ce;
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    margin-bottom: 10px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a6474'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    padding-right: 26px;
}

.ls-filter-select:focus {
    border-color: var(--ls-primary);
    color: var(--ls-text);
}

.ls-filter-select option {
    color: var(--ls-text);
}

.ls-filter-btn {
    display: block;
    width: 100%;
    background: var(--ls-primary);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 10px 13px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    letter-spacing: 0.02em;
    text-align: center;
    transition: background 0.18s;
    margin-top: 2px;
}

.ls-filter-btn:hover {
    background: var(--ls-secondary);
}

/* ============================================================
   Subscription widget
============================================================ */
.ls-subscription-widget {
    background: var(--ls-card);
    border: 1px solid var(--ls-border);
    padding: 18px 16px 20px;
    box-sizing: border-box;
    text-align: center;
}

.ls-subscription-heading {
    font-size: 0.8rem;
    font-weight: 700;
    font-style: italic;
    color: var(--ls-link-red);
    line-height: 1.45;
    margin: 0 0 10px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.ls-subscription-input {
    width: 100%;
    padding: 8px 10px;
    font-size: 0.78rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    border: 1px solid #c0c5ce;
    border-radius: 0;
    box-sizing: border-box;
    outline: none;
    margin-bottom: 9px;
}

.ls-subscription-input:focus {
    border-color: var(--ls-primary);
}

.ls-subscription-btn {
    background: #f0f0f0;
    border: 1px solid #aaa;
    padding: 7px 22px;
    font-size: 0.78rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 400;
    color: var(--ls-text);
    cursor: pointer;
    border-radius: 0;
    transition: background 0.15s;
}

.ls-subscription-btn:hover {
    background: #e0e0e0;
}

/* ============================================================
   Jobs By States widget
============================================================ */
.ls-states-widget {
    background: var(--ls-card);
    border: 1px solid var(--ls-border);
    overflow: hidden;
    box-sizing: border-box;
}

.ls-widget-heading {
    background: var(--ls-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 8px 16px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    letter-spacing: 0.02em;
}

.ls-states-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ls-states-list li {
    border-bottom: 1px dashed var(--ls-border);
}

.ls-states-list li:last-child {
    border-bottom: none;
}

.ls-states-list li a {
    display: block;
    padding: 7px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ls-link-blue);
    text-decoration: none !important;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    transition: color 0.15s, background 0.15s;
}

.ls-states-list li a:hover {
    color: var(--ls-link-red);
    background: var(--ls-bg);
}

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 992px) {
    .left-sidebar-wrap {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .ls-filter-legend { font-size: 0.78rem; }
    .ls-filter-select { font-size: 0.8rem; padding: 8px 10px; }
    .ls-filter-btn { font-size: 0.84rem; padding: 11px; }
    .ls-subscription-heading { font-size: 0.82rem; }
    .ls-states-list li a { padding: 8px 13px; font-size: 0.8rem; }
}

/* ======================================================
   RIGHT SIDEBAR (template-parts/right-sidebar.php)
====================================================== */
/* ============================================================
   Right Sidebar
============================================================ */
:root {
    --rs-primary:   var(--ngo-primary);
    --rs-secondary: var(--ngo-secondary);
    --rs-border:    #c8ccd2;
    --rs-bg:        #f4f6f9;
    --rs-card:      #ffffff;
    --rs-text:      #1a1a1a;
    --rs-muted:     #5a6474;
    --rs-link-blue: #003399;
    --rs-link-red:  #cc0000;
}

.right-sidebar-wrap {
    width: 100%;
    max-width: 260px;
    margin-left: auto;
    box-sizing: border-box;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ============================================================
   Sidebar ad slot
============================================================ */
.rs-ad-widget {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* ============================================================
   Shared widget heading bar
============================================================ */
.rs-widget-heading {
    background: var(--rs-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 8px 16px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    letter-spacing: 0.02em;
}

/* ============================================================
   Categories widget — ~30% more padding on items
============================================================ */
.rs-categories-widget {
    background: var(--rs-card);
    border: 1px solid var(--rs-border);
    overflow: hidden;
    box-sizing: border-box;
}

.rs-categories-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rs-categories-list li {
    border-bottom: 1px dashed var(--rs-border);
}

.rs-categories-list li:last-child {
    border-bottom: none;
}

.rs-categories-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;   /* was 6px 12px — ~30% increase */
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rs-link-blue);
    text-decoration: none !important;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    transition: color 0.15s, background 0.15s;
}

.rs-categories-list li a:hover {
    color: var(--rs-link-red);
    background: var(--rs-bg);
}

.rs-cat-count {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: var(--rs-primary);
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* ============================================================
   Recent posts widget — ~30% more padding on items
============================================================ */
.rs-recent-widget {
    background: var(--rs-card);
    border: 1px solid var(--rs-border);
    overflow: hidden;
    box-sizing: border-box;
}

.rs-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rs-recent-list li {
    border-bottom: 1px dashed var(--rs-border);
}

.rs-recent-list li:last-child {
    border-bottom: none;
}

.rs-recent-list li h4 {
    margin: 0;
    padding: 9px 16px;   /* was 7px 12px — ~30% increase */
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.35;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.rs-recent-list li h4 a {
    color: var(--rs-link-blue);
    text-decoration: none !important;
}

.rs-recent-list li h4 a:hover {
    color: var(--rs-link-red);
    text-decoration: none !important;
}

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 992px) {
    .right-sidebar-wrap {
        max-width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .rs-widget-heading { font-size: 0.78rem; padding: 7px 13px; }
    .rs-categories-list li a,
    .rs-recent-list li h4 { padding: 9px 13px; font-size: 0.8rem; }
}

/* ======================================================
   HEADER FILTER BAR (template-parts/header-filter.php)
====================================================== */
/* ============================================================
   Header Filter Bar
============================================================ */
:root {
    --hf-primary:   var(--ngo-primary);
    --hf-secondary: var(--ngo-secondary);
}

.header-filter-bar {
    width: 100%;
    background: #fff;
    border-bottom: 2px solid #e2e8f0;
    box-sizing: border-box;
}

.header-filter-inner {
    display: flex;
    flex-direction: column;
}

/* Each row */
.header-filter-row {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}

.header-filter-row::-webkit-scrollbar {
    display: none;
}

/* Button base */
.hf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #fff;
    background: var(--hf-primary);
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    border-right: 1px solid rgba(255,255,255,0.12);
    transition: background 0.18s;
    line-height: 1;
    flex-shrink: 0;
}

.hf-btn:last-child {
    border-right: none;
}

.hf-btn:hover,
.hf-btn.is-active {
    background: var(--hf-secondary);
    color: #fff;
}

/* Featured — secondary color by default */
.hf-btn-featured {
    background: var(--hf-secondary);
}

.hf-btn-featured:hover,
.hf-btn-featured.is-active {
    background: var(--hf-primary);
}

/* Close button */
.hf-btn-close {
    background: var(--hf-primary);
    cursor: pointer;
}

.hf-btn-close:hover {
    background: #cc0000;
}

/* Row separator */
.header-filter-row + .header-filter-row {
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* ── Mobile: wrap into grid ── */
@media (max-width: 768px) {
    .header-filter-bar {
        background: #fff;
    }

    .header-filter-row {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 8px;
        padding: 10px 12px;
        background: #fff;
        border-top: none;
    }

    .header-filter-row + .header-filter-row {
        border-top: none;
        padding-top: 0;
    }

    .hf-btn {
        border-right: none;
        border-radius: 2px;
        padding: 12px 18px;
        font-size: 0.84rem;
    }
}

/* ============================================================
   Email typo suggestion ("Did you mean gmail.com?")
   Appears under any input[type="email"] site-wide — the newsletter
   box, recruiter auth pages, and dashboard forms all share this.
============================================================ */
.ngo-email-suggestion {
    display: none;
    margin-top: 6px;
    font-size: 12.5px;
    color: #6b7280;
}
.ngo-email-suggestion-fix {
    background: none;
    border: none;
    padding: 0;
    margin: 0 2px;
    font: inherit;
    font-weight: 700;
    color: var(--ngo-primary, #1e73be);
    text-decoration: underline;
    cursor: pointer;
}
.ngo-email-suggestion-fix:hover {
    color: var(--ngo-secondary, #afb88d);
}