/* SME SA Network: LinkedIn-style members directory. Scoped to body.smesa-net (members directory + a member's connections).
   Brand: navy #0A2C3D, red #9C1C1F, ink #121A21, muted #5A6675, line #E3E8EE. */

/* ---------- the switch is gone (grid only) ---------- */
.smesa-net .grid-filters,.smesa-net .layout-view{display:none !important}

/* ---------- directory grid: 2 per row on phones, 3 on tablets, 4 on desktop ---------- */
.smesa-net #members-list.bp-list{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 24px;padding:0;list-style:none}
@media (min-width:700px){.smesa-net #members-list.bp-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1100px){.smesa-net #members-list.bp-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
.smesa-net #members-list.bp-list>li{width:auto !important;max-width:none !important;flex:none !important;margin:0 !important;padding:0 !important;float:none !important;border:0 !important}

/* the card */
.smesa-net #members-list .list-wrap{position:relative;height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid #E3E8EE !important;border-radius:12px;overflow:hidden;padding:0 !important;margin:0 !important;box-shadow:none;transition:box-shadow .2s,border-color .2s}
.smesa-net #members-list .list-wrap:hover{border-color:#C9D2DC !important;box-shadow:0 6px 18px rgba(10,44,61,.08)}
.smesa-net #members-list .list-wrap::before{content:"";display:block;height:54px;flex:none;background:linear-gradient(120deg,#0A2C3D 0%,#123E55 60%,#9C1C1F 160%)}
.smesa-net #members-list .list-wrap-inner{display:flex !important;flex-direction:column;align-items:center;text-align:center;flex:1;padding:0 12px 4px !important;margin:0 !important}
.smesa-net #members-list .item-avatar{margin:-40px 0 8px !important;width:auto !important;float:none !important;position:relative;z-index:1}
.smesa-net #members-list .item-avatar img.avatar{width:80px !important;height:80px !important;max-width:none !important;border-radius:50%;border:3px solid #fff;object-fit:cover;box-shadow:0 1px 3px rgba(10,44,61,.15);display:block}
.smesa-net #members-list .item{display:flex !important;flex-direction:column;align-items:center;width:100% !important;flex:1;padding:0 !important;margin:0 !important;min-width:0}
.smesa-net #members-list .item-block{margin:0 !important;padding:0 !important;width:100%;min-width:0}
/* name and headline sit together: no stray gap between them */
.smesa-net #members-list .list-title.member-name{margin:0 !important;padding:0 !important;font-size:15px !important;line-height:1.3 !important;font-weight:700;color:#121A21;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smesa-net #members-list .list-title.member-name a{color:inherit !important;text-decoration:none}
.smesa-net #members-list .list-title.member-name a:hover{text-decoration:underline}
.smesa-net #members-list .smesa-member-job{margin:3px 0 0 !important;padding:0 !important;font-size:12.5px !important;line-height:1.35 !important;color:#5A6675 !important;width:100%;min-height:2.7em;display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center !important}
.smesa-net #members-list .item-meta.member-type,.smesa-net #members-list .item-meta.last-activity,.smesa-net #members-list .follow-container:empty{display:none !important}
/* one action, full width, at the foot of the card */
.smesa-net #members-list .member-buttons-wrap .only-list-view{display:none !important}
.smesa-net #members-list .primary-action{width:100%;margin:10px 0 12px !important;padding:0 !important}
.smesa-net #members-list .primary-action .generic-button{width:100%;margin:0 !important}
.smesa-net #members-list .primary-action .generic-button>a,.smesa-net #members-list .primary-action .generic-button>button{display:flex !important;align-items:center;justify-content:center;gap:6px;width:100%;min-height:36px;padding:6px 10px !important;border-radius:999px !important;border:1.5px solid #0A2C3D !important;background:#fff !important;color:#0A2C3D !important;font-size:14px !important;font-weight:600 !important;line-height:1.2 !important;text-decoration:none;box-shadow:none !important}
.smesa-net #members-list .primary-action .generic-button>a:hover{background:#0A2C3D !important;color:#fff !important}
.smesa-net #members-list .primary-action .generic-button>a.pending,.smesa-net #members-list .primary-action .generic-button>a.is_friend{border-color:#C9D2DC !important;color:#5A6675 !important}
.smesa-net #members-list .footer-button-wrap,.smesa-net #members-list .member-button-wrap.footer-button-wrap{display:none !important}
/* the three-dot menu sits quietly on the banner */
.smesa-net #members-list .bb_more_options{position:absolute !important;top:6px;right:6px;z-index:2}
.smesa-net #members-list .bb_more_options_action{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff !important}
.smesa-net #members-list .bp-members-list-hook{display:none !important}
@media (max-width:420px){
	.smesa-net #members-list .list-wrap-inner{padding:0 8px 2px !important}
	.smesa-net #members-list .item-avatar img.avatar{width:72px !important;height:72px !important}
	.smesa-net #members-list .item-avatar{margin-top:-36px !important}
	.smesa-net #members-list .list-title.member-name{font-size:14px !important}
}

/* ---------- People you may know ---------- */
.smesa-pymk{margin:0 0 22px;padding:16px;background:#fff;border:1px solid #E3E8EE;border-radius:14px}
.smesa-pymk-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 14px}
.smesa-pymk-hd h2{margin:0;font-size:18px;line-height:1.25;font-weight:700;color:#121A21}
.smesa-pymk-hd p{margin:3px 0 0;font-size:13px;color:#5A6675}
.smesa-pymk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
@media (min-width:700px){.smesa-pymk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (min-width:1100px){.smesa-pymk-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.smesa-pymk-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #E3E8EE;border-radius:12px;overflow:hidden;transition:opacity .25s,transform .25s}
.smesa-pymk-card.is-more{display:none}
.smesa-pymk.is-open .smesa-pymk-card.is-more{display:flex}
.smesa-pymk-card.is-gone{opacity:0;transform:scale(.96)}
.smesa-pymk-top{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 10px;text-decoration:none !important;color:inherit}
.smesa-pymk-band{display:block;align-self:stretch;height:54px;margin:0 -10px;background:linear-gradient(120deg,#0A2C3D 0%,#123E55 60%,#9C1C1F 160%)}
.smesa-pymk-av{width:84px;height:84px;margin:-42px 0 8px;border-radius:50%;border:3px solid #fff;object-fit:cover;background:#F1F4F7;box-shadow:0 1px 3px rgba(10,44,61,.15)}
.smesa-pymk-name{display:block;width:100%;font-size:15px;line-height:1.3;font-weight:700;color:#121A21;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smesa-pymk-head{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;min-height:2.7em;margin-top:3px;font-size:12.5px;line-height:1.35;color:#5A6675}
.smesa-pymk-head.is-empty{visibility:hidden}
.smesa-pymk-why{display:flex;align-items:center;justify-content:center;gap:4px;min-height:20px;margin:8px 10px 0;font-size:12px;line-height:1.3;color:#5A6675}
.smesa-pymk-why img{width:18px;height:18px;border-radius:50%;border:1.5px solid #fff;margin-right:-8px;object-fit:cover}
.smesa-pymk-why img:last-of-type{margin-right:2px}
.smesa-pymk-why span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.smesa-pymk-connect{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 10px 12px;min-height:36px;border-radius:999px;border:1.5px solid #0A2C3D;background:#fff;color:#0A2C3D;font:600 14px/1.2 inherit;cursor:pointer;transition:background .15s,color .15s}
.smesa-pymk-connect:hover{background:#0A2C3D;color:#fff}
.smesa-pymk-connect[disabled]{border-color:#C9D2DC;color:#5A6675;background:#fff;cursor:default}
.smesa-pymk-x{position:absolute;top:6px;right:6px;z-index:2;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:rgba(18,26,33,.55);color:#fff;cursor:pointer}
.smesa-pymk-x:hover{background:rgba(18,26,33,.8)}
.smesa-pymk-more{display:block;width:100%;margin:14px 0 0;padding:10px;border:0;border-top:1px solid #E3E8EE;background:none;color:#0A2C3D;font:600 14px inherit;cursor:pointer}
.smesa-pymk.is-open .smesa-pymk-more{display:none}
@media (max-width:420px){.smesa-pymk{padding:12px;border-radius:12px}.smesa-pymk-av{width:72px;height:72px;margin-top:-36px}.smesa-pymk-name{font-size:14px}}

/* theme resets: BuddyBoss styles every <button>, <h2> and <span> in content; win back the card look */
.smesa-pymk .smesa-pymk-hd h2{margin:0 !important;padding:0 !important;font-family:inherit !important;font-size:18px !important;letter-spacing:0 !important;text-transform:none !important;color:#121A21 !important}
.smesa-pymk .smesa-pymk-hd p{margin:4px 0 0 !important;padding:0 !important;font-size:13px !important;line-height:1.4 !important;color:#5A6675 !important}
.smesa-pymk button.smesa-pymk-x{all:unset;position:absolute !important;top:6px !important;right:6px !important;z-index:2;display:grid !important;place-items:center;width:30px !important;height:30px !important;border-radius:50% !important;background:rgba(18,26,33,.55) !important;color:#fff !important;cursor:pointer;box-sizing:border-box}
.smesa-pymk button.smesa-pymk-x:hover{background:rgba(18,26,33,.85) !important}
.smesa-pymk button.smesa-pymk-x:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.smesa-pymk button.smesa-pymk-connect{all:unset;box-sizing:border-box;display:flex !important;align-items:center;justify-content:center;gap:6px;margin:10px 10px 12px !important;min-height:36px;padding:6px 10px !important;border-radius:999px !important;border:1.5px solid #0A2C3D !important;background:#fff !important;color:#0A2C3D !important;font-size:14px !important;font-weight:600 !important;line-height:1.2 !important;cursor:pointer;text-align:center}
.smesa-pymk button.smesa-pymk-connect:hover{background:#0A2C3D !important;color:#fff !important}
.smesa-pymk button.smesa-pymk-connect[disabled]{border-color:#C9D2DC !important;color:#5A6675 !important;background:#fff !important;cursor:default}
.smesa-pymk button.smesa-pymk-connect:focus-visible{outline:2px solid #9C1C1F;outline-offset:2px}
.smesa-pymk button.smesa-pymk-more{all:unset;box-sizing:border-box;display:block !important;width:100%;margin:14px 0 0 !important;padding:10px !important;border-top:1px solid #E3E8EE !important;text-align:center;color:#0A2C3D !important;font-size:14px !important;font-weight:600 !important;cursor:pointer}
.smesa-pymk.is-open button.smesa-pymk-more{display:none !important}
.smesa-pymk .smesa-pymk-name{font-family:inherit !important;font-size:15px !important;font-weight:700 !important;color:#121A21 !important;margin:0 !important}
.smesa-pymk .smesa-pymk-head{font-family:inherit !important;font-size:12.5px !important;font-weight:400 !important;color:#5A6675 !important;margin:3px 0 0 !important}
.smesa-pymk .smesa-pymk-why,.smesa-pymk .smesa-pymk-why span{font-size:12px !important;font-weight:400 !important;color:#5A6675 !important}
@media (max-width:420px){.smesa-pymk .smesa-pymk-name{font-size:14px !important}}
/* BuddyBoss gives grid items a fixed min-width (275px) and the name block flex-basis 100% (which opens the gap under the name) */
.smesa-net #members-list.bp-list>li{min-width:0 !important}
.smesa-net #members-list .item-block{flex:none !important;min-height:0 !important}
.smesa-net #members-list .item>*{flex:none !important}
.smesa-net #members-list .item .primary-action{margin-top:auto !important}
.smesa-net #members-list .primary-action,.smesa-net #members-list .primary-action .generic-button{position:static !important;top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;transform:none !important;width:100% !important}
.smesa-net #members-list .list-title.member-name a{display:block;font-size:inherit !important;line-height:inherit !important;font-weight:inherit !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smesa-net #members-list .item{padding-bottom:0 !important}

/* ---------- page header (v1.1.0) ---------- */
/* the page's own H1 stays for search engines and screen readers, visually replaced by the header below */
.smesa-net-dir h1.entry-title,.smesa-net-dir .bb-title-wrap>h1{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important;margin:0 !important;padding:0 !important}
.smesa-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:24px;margin:4px 0 16px;padding:24px 22px;border-radius:16px;color:#fff;background:radial-gradient(120% 140% at 100% 0%,rgba(156,28,31,.55) 0%,rgba(156,28,31,0) 55%),linear-gradient(135deg,#0A2C3D 0%,#0E3A50 55%,#123F57 100%);box-shadow:0 10px 30px rgba(10,44,61,.18)}
.smesa-hero-in{position:relative;z-index:1;flex:1;min-width:0}
.smesa-hero .smesa-hero-eye{display:flex;align-items:center;gap:8px;margin:0 0 8px !important;font-size:11.5px !important;font-weight:700 !important;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75) !important}
.smesa-hero-eye span{width:8px;height:8px;border-radius:50%;background:#E03A3E;box-shadow:0 0 0 4px rgba(224,58,62,.25)}
.smesa-hero h2.smesa-hero-h{margin:0 !important;padding:0 !important;font-family:Oswald,"Roboto Condensed",Arial,sans-serif !important;font-size:30px !important;line-height:1.08 !important;font-weight:600 !important;letter-spacing:.2px;color:#fff !important;text-transform:none !important}
.smesa-hero .smesa-hero-p{margin:10px 0 0 !important;max-width:560px;font-size:14.5px !important;line-height:1.55 !important;color:rgba(255,255,255,.82) !important}
.smesa-hero-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.smesa-hero a.smesa-hero-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border-radius:999px;background:#fff;color:#0A2C3D !important;font-size:14px;font-weight:700;text-decoration:none !important;border:1.5px solid #fff;transition:transform .15s,background .15s}
.smesa-hero a.smesa-hero-btn:hover{transform:translateY(-1px)}
.smesa-hero a.smesa-hero-btn.is-ghost{background:transparent;color:#fff !important;border-color:rgba(255,255,255,.55)}
.smesa-hero a.smesa-hero-btn.is-ghost:hover{background:rgba(255,255,255,.1)}
.smesa-hero-art{position:relative;flex:none;width:170px;height:120px;display:none}
.smesa-hero-art i{position:absolute;border-radius:50%;border:3px solid rgba(255,255,255,.9);background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.08))}
.smesa-hero-art i:nth-child(1){width:64px;height:64px;left:0;top:28px}
.smesa-hero-art i:nth-child(2){width:84px;height:84px;left:44px;top:8px;background:linear-gradient(135deg,rgba(224,58,62,.7),rgba(156,28,31,.4))}
.smesa-hero-art i:nth-child(3){width:58px;height:58px;left:112px;top:46px}
.smesa-hero-art i:nth-child(4){width:22px;height:22px;left:96px;top:0;border:0;background:#E03A3E}
@media (min-width:700px){.smesa-hero{padding:30px 32px}.smesa-hero h2.smesa-hero-h{font-size:38px !important}.smesa-hero-art{display:block}}
@media (max-width:400px){.smesa-hero{padding:20px 18px;border-radius:14px}.smesa-hero h2.smesa-hero-h{font-size:27px !important}.smesa-hero-ctas .smesa-hero-btn{flex:1}}

/* search: one clean pill under the header */
.smesa-net-dir .subnav-search,.smesa-net-dir .members-search,.smesa-net-dir #members-dir-search{margin:0 0 12px !important}
.smesa-net-dir .bp-dir-search-form,.smesa-net-dir form.bp-dir-search-form{position:relative}
.smesa-net-dir .bp-dir-search-form input[type=search],.smesa-net-dir .bp-dir-search-form input[type=text]{height:46px !important;border-radius:999px !important;border:1px solid #DCE3EA !important;background:#fff !important;padding-left:44px !important;font-size:15px !important;box-shadow:0 1px 2px rgba(10,44,61,.05) !important}
.smesa-net-dir .bp-dir-search-form input:focus{border-color:#0A2C3D !important;box-shadow:0 0 0 3px rgba(10,44,61,.12) !important}

/* tabs: segmented pills */
.smesa-net-dir .bp-navs.dir-navs,.smesa-net-dir nav.members-type-navs{margin:0 0 16px !important;border:0 !important}
.smesa-net-dir .bp-navs.dir-navs ul{display:flex !important;gap:8px;flex-wrap:nowrap;overflow-x:auto;margin:0 !important;padding:0 !important;border:0 !important;scrollbar-width:none}
.smesa-net-dir .bp-navs.dir-navs ul::-webkit-scrollbar{display:none}
.smesa-net-dir .bp-navs.dir-navs li{margin:0 !important;padding:0 !important;border:0 !important;flex:none}
.smesa-net-dir .bp-navs.dir-navs li a{display:flex !important;align-items:center;gap:6px;min-height:38px;padding:0 16px !important;border-radius:999px !important;border:1px solid #DCE3EA !important;background:#fff;color:#33454F !important;font-size:14px !important;font-weight:600 !important;text-decoration:none;box-shadow:none !important}
.smesa-net-dir .bp-navs.dir-navs li a::after,.smesa-net-dir .bp-navs.dir-navs li::after{display:none !important}
.smesa-net-dir .bp-navs.dir-navs li.selected a,.smesa-net-dir .bp-navs.dir-navs li.current a{background:#0A2C3D !important;border-color:#0A2C3D !important;color:#fff !important}
.smesa-net-dir .bp-navs.dir-navs li a .count{background:rgba(10,44,61,.08);color:inherit;border-radius:999px;padding:1px 7px;font-size:12px}
.smesa-net-dir .bp-navs.dir-navs li.selected a .count{background:rgba(255,255,255,.18)}
/* the theme forces its own heading colour with !important; the id wins */
#smesa-hero .smesa-hero-h{color:#fff !important;-webkit-text-fill-color:#fff !important}
#smesa-hero .smesa-hero-p{color:rgba(255,255,255,.82) !important;-webkit-text-fill-color:rgba(255,255,255,.82) !important}
#smesa-hero .smesa-hero-eye{color:rgba(255,255,255,.75) !important;-webkit-text-fill-color:rgba(255,255,255,.75) !important}
.smesa-net-dir .bp-dir-search-form{border:0 !important;background:transparent !important;box-shadow:none !important;padding:0 !important}
.smesa-net-dir .bp-dir-search-form .search-form_submit,.smesa-net-dir .bp-dir-search-form button[type=submit]{left:14px !important;right:auto !important}
.smesa-net-dir .bp-navs.dir-navs li::before,.smesa-net-dir .bp-navs.dir-navs li a::before,.smesa-net-dir .bp-navs.dir-navs li::after{display:none !important;content:none !important}
.smesa-net-dir .bp-navs.dir-navs li.selected a{box-shadow:none !important;border-bottom:1px solid #0A2C3D !important}
.smesa-net-dir .bb-component-nav-item-point{border:0 !important;padding:0 !important;margin:0 !important;box-shadow:none !important}
.smesa-net-dir .bp-dir-search-form .search-form_submit{top:50% !important;transform:translateY(-50%) !important;height:20px !important;margin:0 !important}
.smesa-net-dir #buddypress>.smesa-hero:first-child,.smesa-net-dir .smesa-hero{margin-top:0 !important}
.smesa-net-dir .entry-header,.smesa-net-dir .bb-title-wrap{min-height:0 !important;margin:0 !important;padding:0 !important}

/* ---------- v1.1.4 (Joel 10-12): live-brand header band full width like the other pages; no red hover on the tabs ---------- */
/* The band is drawn by a pseudo-element that spans the viewport; overflow-x:clip stops it adding sideways scroll. */
body.smesa-net-dir{overflow-x:clip}
html body #smesa-hero.smesa-hero{position:relative !important;z-index:0;isolation:isolate;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;overflow:visible !important;margin-top:-30px !important;margin-bottom:22px !important;padding:44px 0 40px !important}
html body #smesa-hero.smesa-hero::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:#FDFBFD url(https://smesouthafrica.co.za/wp-content/uploads/2025/10/header-outer-bg-1.png) center top/cover no-repeat;border-bottom:1px solid #EEE7EE}
html body #smesa-hero .smesa-hero-in{padding:0 !important}
@media (max-width:700px){html body #smesa-hero.smesa-hero{margin-top:-30px !important;padding:30px 0 28px !important}}
/* tabs: brand navy only, never the theme's red hover */
.smesa-net-dir .bp-navs.dir-navs li a:hover,.smesa-net-dir .bp-navs.dir-navs li a:focus,.smesa-net-dir .bp-navs.dir-navs li a:hover *,.smesa-net-dir .bp-navs.dir-navs li a:focus *{color:#0A2C3D !important;border-color:#0A2C3D !important;background:#fff !important}
.smesa-net-dir .bp-navs.dir-navs li.selected a,.smesa-net-dir .bp-navs.dir-navs li.selected a *,.smesa-net-dir .bp-navs.dir-navs li.selected a:hover,.smesa-net-dir .bp-navs.dir-navs li.selected a:hover *,.smesa-net-dir .bp-navs.dir-navs li.selected a:focus *{color:#fff !important;background-color:transparent !important}
.smesa-net-dir .bp-navs.dir-navs li.selected a,.smesa-net-dir .bp-navs.dir-navs li.selected a:hover{background:#0A2C3D !important;border-color:#0A2C3D !important}
html:has(body.smesa-net-dir){overflow-x:clip}