@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700&family=DM+Sans:ital,wght@0,400;0,500;1,400&display=swap');

#buddypress * { box-sizing: border-box; }

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
    --mo-navy:    #0f172a;
    --mo-teal:    #14b8a6;
    --mo-teal-dk: #0f9e8e;
    --mo-white:   #f8fafc;
    --mo-muted:   #94a3b8;
    --mo-border:  #e2e8f0;
}

/* ============================================================
   GLOBAL FONTS
   ============================================================ */
html, body, p, span, li, td, th,
input, textarea, select, label, div {
    font-family: 'DM Sans', sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .site-title {
    font-family: 'Syne', sans-serif !important;
}
/* ============================================================
   ADMIN BAR
   ============================================================ */
body:not(.logged-in) #wpadminbar { display: none !important; }
#wpadminbar { background: var(--mo-navy) !important; }
#wpadminbar a,
#wpadminbar .ab-item,
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before { color: var(--mo-white) !important; }
html { margin-top: 0 !important; }
/* ============================================================
   HEADER
   ============================================================ */
.site-header-wrapper {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: var(--mo-navy) !important;
}
.logged-in .site-header-wrapper { top: 32px !important; }
.site-content { padding-top: 80px !important; }
.site-header-wrapper .container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}
.site-header-wrapper .site-title a {
    font-family: 'Syne', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--mo-white) !important;
}
.site-header-wrapper .site-description {
    font-size: 0.62rem !important;
    opacity: 0.55 !important;
    color: var(--mo-white) !important;
}
.site-header-wrapper .main-navigation a {
    color: var(--mo-white) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}
.site-header-wrapper .main-navigation a:hover { color: var(--mo-teal) !important; }
.site-header-wrapper .fa,
.site-header-wrapper .fa:before,
.site-header-wrapper i.fa,
.site-header-wrapper .bp-user { color: var(--mo-white) !important; }

/* Profile dropdown */
#user-profile-menu a { color: var(--mo-navy) !important; font-size: 0.85rem !important; }
#user-profile-menu a:hover { color: var(--mo-teal) !important; }

/* Hide menu items — logged out */
body:not(.logged-in) .menu-item-my-postings,
body:not(.logged-in) .menu-item-post-an-opportunity { display: none !important; }

/* Hide site-sub-header on join page */
body.page-id-join .site-sub-header,
body.register .site-sub-header { display: none !important; }

/* ============================================================
   FOOTER
   ============================================================ */
#colophon,
#colophon .site-footer-wrapper,
#colophon .site-info,
#colophon .container { background: var(--mo-navy) !important; }
#colophon .site-info,
#colophon .site-info a { color: rgba(248,250,252,0.4) !important; }
.site-info .container {
    font-size: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 4px !important;
}
.site-info .container::before {
    content: 'Copyright © 2026 ';
    font-size: 13px !important;
    color: rgba(248,250,252,0.4) !important;
}
.site-info .buddyx-footer-site-title { font-size: 13px !important; }
.site-info .buddyx-footer-site-title a { color: rgba(248,250,252,0.4) !important; }

/* ============================================================
   BUTTONS — GLOBAL
   ============================================================ */
#buddypress .generic-button a,
#buddypress .generic-button button,
#buddypress .buddypress-wrap .bp-list .action a,
#buddypress .buddypress-wrap .bp-list .action button,
#buddypress input[type="submit"],
#buddypress .standard-form input[type="submit"],
#buddypress ul.button-nav li a,
#buddypress .buddypress-wrap .activity-list .load-more a,
#buddypress .buddypress-wrap .activity-list .load-newest a {
    background: var(--mo-teal) !important;
    background-color: var(--mo-teal) !important;
    border-color: var(--mo-teal) !important;
    color: #ffffff !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    padding: 7px 16px !important;
    border-radius: 6px !important;
    text-transform: none !important;
}
#buddypress .generic-button a:hover,
#buddypress .generic-button button:hover,
#buddypress input[type="submit"]:hover {
    background: var(--mo-teal-dk) !important;
    background-color: var(--mo-teal-dk) !important;
    color: #ffffff !important;
}

/* Pending friendship */
#buddypress .friendship-button.pending_friend a,
#buddypress .friendship-button.pending_friend button {
    background: var(--mo-navy) !important;
    background-color: var(--mo-navy) !important;
    border-color: var(--mo-navy) !important;
    color: var(--mo-teal) !important;
    white-space: normal !important;
    font-size: 0.75rem !important;
    text-align: center !important;
}

/* WP Job Manager */
.job-manager-form input[type="submit"],
.search_jobs input[type="submit"],
.job_filters input[type="submit"] {
    background: var(--mo-teal) !important;
    border-color: var(--mo-teal) !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
}
.job-manager-form input[type="submit"]:hover {
    background: var(--mo-teal-dk) !important;
    color: #ffffff !important;
}

/* CF7 */
.wpcf7 input[type="submit"],
.wpcf7-submit {
    background: var(--mo-teal) !important;
    border-color: var(--mo-teal) !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    border-radius: 6px !important;
}
.wpcf7-submit:hover {
    background: var(--mo-teal-dk) !important;
    color: #ffffff !important;
}

/* Apply for Opportunity button */
input.application_button,
input.application_button.button {
    background: var(--mo-teal) !important;
    border-color: var(--mo-teal) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
}

/* WordPress search block button */
button.wp-block-search__button,
button.wp-element-button {
    background: var(--mo-teal) !important;
    border-color: var(--mo-teal) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
}

/* View Profile button */
.bp-profile-button a.button,
.bp-profile-button a.button-primary {
    background: var(--mo-teal) !important;
    border-color: var(--mo-teal) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
}

/* Add Opportunity button */
a.jm-ui-button {
    background: var(--mo-teal) !important;
    border-color: var(--mo-teal) !important;
    color: #fff !important;
}
a.jm-ui-button:hover { background: var(--mo-teal-dk) !important; }

/* Listing preview/draft buttons */
input.job-manager-button-edit-listing,
input.job-manager-button-submit-listing {
    background: var(--mo-teal) !important;
    border-color: var(--mo-teal) !important;
    color: #fff !important;
    border-radius: 6px !important;
}
input.job-manager-button-edit-listing:hover,
input.job-manager-button-submit-listing:hover {
    background: var(--mo-teal-dk) !important;
}

/* Profile photo/cover buttons */
#bp-browse-button,
button.avatar-webcam-capture,
button.avatar-webcam-save,
button.button.edit#bp-delete-avatar,
button.button.edit#bp-delete-cover-image {
    background: var(--mo-teal) !important;
    border-color: var(--mo-teal) !important;
    color: #fff !important;
    border-radius: 6px !important;
}

/* Profile edit — Change buttons */
button.visibility-toggle-link {
    background: var(--mo-teal) !important;
    color: #fff !important;
    border: none !important;
    padding: 5px 14px !important;
    border-radius: 6px !important;
}
button.visibility-toggle-link:hover { background: var(--mo-teal-dk) !important; }

/* ============================================================
   ACTIVITY META BUTTONS
   ============================================================ */
#buddypress .activity-list .activity-meta a,
#buddypress .activity-meta .button {
    background: var(--mo-teal) !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    padding: 5px 12px !important;
    border-radius: 5px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
#buddypress .activity-meta .generic-button a.button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    line-height: 1 !important;
}
#buddypress .activity-meta .bp-screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================================
   BUDDYPRESS TABS
   ============================================================ */
#buddypress .item-list-tabs ul li a,
#buddypress nav.bp-navs ul li a {
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: var(--mo-navy) !important;
    padding: 8px 14px !important;
}
#buddypress .item-list-tabs ul li.selected a,
#buddypress .item-list-tabs ul li.current a,
#buddypress nav.bp-navs ul li.current a {
    color: var(--mo-teal) !important;
    border-bottom: 2px solid var(--mo-teal) !important;
    background: transparent !important;
}
#buddypress .item-list-tabs ul li span {
    background: var(--mo-teal) !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    border-radius: 10px !important;
    padding: 1px 6px !important;
}

/* ============================================================
   ACTIVITY FEED
   ============================================================ */
#buddypress .activity-list .activity-item {
    border: 1px solid var(--mo-border) !important;
    border-radius: 10px !important;
    margin-bottom: 1rem !important;
    padding: 1rem !important;
}
#buddypress .activity-list .activity-header {
    font-size: 0.8rem !important;
    color: var(--mo-muted) !important;
}
#buddypress .activity-list .activity-header a {
    font-weight: 600 !important;
    color: var(--mo-navy) !important;
}
#buddypress .activity-list .activity-content {
    font-size: 0.875rem !important;
    color: #1e293b !important;
}
.bp-member-activity-preview { display: none !important; }

/* ============================================================
   NOTIFICATION DROPDOWN
   ============================================================ */
#bp-notify .dropdown-item-title a {
    color: var(--mo-navy) !important;
    font-size: 0.82rem !important;
}
#bp-notify .dropdown-item-title a:hover { color: var(--mo-teal) !important; }
#bp-notify .mute {
    color: var(--mo-muted) !important;
    font-size: 0.72rem !important;
}
#bp-notify .dropdown-footer a {
    color: var(--mo-teal) !important;
    font-size: 0.78rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ============================================================
   MEMBER CARDS
   ============================================================ */
#buddypress .bp-list.grid li {
    border-radius: 10px !important;
    border: 1px solid var(--mo-border) !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}
#buddypress .bp-list.grid .list-wrap {
    padding: 0.75rem !important;
    text-align: center !important;
}
#buddypress .bp-list .item-title a,
#buddypress .bp-list h2.member-name a {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--mo-navy) !important;
    font-family: 'Syne', sans-serif !important;
}
#buddypress .bp-list .item-title a:hover { color: var(--mo-teal) !important; }
#buddypress .bp-list .item-meta,
#buddypress .bp-list .last-activity {
    font-size: 0.72rem !important;
    color: var(--mo-muted) !important;
}

/* ============================================================
   MEMBERS DIRECTORY — LinkedIn style list
   ============================================================ */
#members-list.grid,
ul#members-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: #fff !important;
}
#members-list li.item-entry {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.members-list .list-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 12px 20px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--mo-border) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 100% !important;
}
.members-list li.item-entry {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.buddyx-mem-cover-wrapper { display: none !important; }
.members-list .item-avatar {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}
.members-list .item-avatar img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}
.members-list .item { flex: 1 !important; min-width: 0 !important; }
.members-list .item-block {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    gap: 16px !important;
}
#members-list h2.member-name {
    font-family: 'Syne', sans-serif !important;
    font-size: 15px !important;
    margin: 0 0 2px !important;
    font-weight: 600 !important;
}
#members-list .last-activity {
    font-size: 12px !important;
    color: var(--mo-muted) !important;
    margin: 0 !important;
}
.members-list .member-action-wrapper {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}
.members-list .member-action-wrapper button,
.members-list .member-action-wrapper .button {
    width: auto !important;
    min-width: unset !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
}
.members-list .mo-one-liner {
    display: block !important;
    font-size: 12px !important;
    color: var(--mo-muted) !important;
    margin-top: 2px !important;
}

/* ============================================================
   SIDEBAR WIDGETS
   ============================================================ */
.widget-title, .widgettitle, aside h2, aside h3, .widget h2, .widget h3 {
    font-family: 'Syne', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--mo-navy) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 0.75rem !important;
}
.widget, aside { font-size: 0.82rem !important; }
#block-2 { display: none !important; }

/* ============================================================
   WP JOB MANAGER LISTINGS
   ============================================================ */
ul.job_listings li.job_listing {
    border-bottom: 1px solid var(--mo-border) !important;
    padding: 14px 4px !important;
}
ul.job_listings li.job_listing .position h3 a,
ul.job_listings li.job_listing .position a {
    font-family: 'Syne', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--mo-navy) !important;
}
ul.job_listings li.job_listing .position h3 a:hover { color: var(--mo-teal) !important; }
ul.job_listings li.job_listing .company,
ul.job_listings li.job_listing .location {
    font-size: 0.78rem !important;
    color: var(--mo-muted) !important;
}
.job-type, ul.job_listings .job-type, li.job_listing .job-type a {
    background: #ccfbf1 !important;
    color: #0f766e !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    border: none !important;
}

/* ============================================================
   OPPORTUNITIES PAGE (page 158)
   ============================================================ */
.page-id-158 { background: #ffffff !important; }
.page-id-158 .site-wrapper { display: flex !important; flex-wrap: nowrap !important; }
.page-id-158 #secondary { display: none !important; width: 0 !important; flex: 0 !important; }
.page-id-158 #primary { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; float: none !important; }
.page-id-158 .rss_link { display: none !important; }
.page-id-158 .job_types li label { padding: 4px 10px !important; font-size: 9px !important; }
.page-id-158 ul.job_listings li.job_listing { padding: 20px 24px !important; margin-bottom: 12px !important; }
.page-id-158 ul.job_listings li.job_listing h3 {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 4px !important;
}
.page-id-158 ul.job_listings .company strong {
    color: var(--mo-teal) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}
.page-id-158 ul.job_listings .location { color: var(--mo-muted) !important; font-size: 0.85rem !important; }
.page-id-158 ul.job_listings ul.meta { display: flex !important; align-items: center !important; gap: 10px !important; }

/* ============================================================
   MY POSTINGS PAGE (page 157)
   ============================================================ */
.page-id-157 #secondary { display: none !important; width: 0 !important; flex: 0 !important; }
.page-id-157 #primary { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; float: none !important; }

/* ============================================================
   SINGLE LISTING PAGE
   ============================================================ */
.single-job_listing { background: #ffffff !important; }
.single-job_listing #secondary { display: none !important; width: 0 !important; flex: 0 !important; }
.single-job_listing #primary { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; float: none !important; }
.single-job_listing .job_description { font-size: 15px !important; line-height: 1.8 !important; color: #1e293b !important; }
.single-job_listing .job_company {
    background: #f8fafc !important;
    border: 1px solid var(--mo-border) !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
}
.single-job_listing .job_company h3 a {
    font-family: 'Syne', sans-serif !important;
    font-size: 1.1rem !important;
    color: #0f172a !important;
}
.single-job_listing .job_company p { color: var(--mo-muted) !important; font-size: 13px !important; }
.single-job_listing .job-application { max-width: 600px !important; }
.single-job_listing .job-application .wpcf7 input[type="text"],
.single-job_listing .job-application .wpcf7 input[type="email"],
.single-job_listing .job-application .wpcf7 textarea {
    max-width: 100% !important;
    border-radius: 8px !important;
    border: 1px solid var(--mo-border) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
}
textarea[name="your-message"] {
    height: 120px !important;
    max-width: 480px !important;
    width: 100% !important;
}

/* ============================================================
   FORMS — GLOBAL
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea, select {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    border-radius: 6px !important;
    border: 1px solid var(--mo-border) !important;
    color: var(--mo-navy) !important;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--mo-teal) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(20,184,166,0.12) !important;
}
label {
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: var(--mo-navy) !important;
}

/* ============================================================
   ICON FONTS
   ============================================================ */
.fa, .fas, .far, .fab, .fal,
i.fa, i.fas, i.far, i.fab,
[class^="fa-"], [class*=" fa-"],
.dashicons, .bp-icon,
span.bp-screen-reader-text {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands',
                 'dashicons', sans-serif !important;
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */
h2.user-nicename {
    font-family: 'Syne', sans-serif !important;
    font-size: 1.8rem !important;
    color: var(--mo-navy) !important;
}
.wb-bp-single-section-wrap.incomplete .wb-bp-completed-staus {
    background: #f1f5f9 !important;
    color: var(--mo-muted) !important;
    border-radius: 999px !important;
    padding: 2px 10px !important;
}
/* Force profile header to sit below fixed header---18-Aug-2015 */
#buddypress .bp-profile-header,
.bp-user .entry-header,
body.bp-user [class*="profile"] {
    position: relative !important;
    top: 0 !important;
    margin-top: 20px !important;
}

/* Profile avatar container */
#buddypress #item-header,
#buddypress .bp-user-header {
    position: relative !important;
    z-index: 1 !important;
}
/* Profile header — push down below fixed header */
#item-header-cover-image {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 40px !important;
    padding-top: 20px !important;
}

#item-header-avatar {
    position: relative !important;
    z-index: 2 !important;
}

#item-header-avatar img {
    display: block !important;
    position: relative !important;
}