/* SME brand polish (smesa-brand-polish.php). Joel 2026-10-13: no gradients from the new design CI. A banner without a cover photo
   gets the site's light pink header background (--smesa-pink-bg, set inline from uploads/2025/10/header-outer-bg-1.png); members
   without a photo get their initials on solid maroon. Real cover photos are never overridden. */

/* the new member profile: banner without a cover photo */
#profile-hero .from-\[\#0C1F31\] { background: var(--smesa-pink-bg, #FCF7F9) !important; }
#profile-hero .from-\[\#0C1F31\] > .opacity-40 { display: none !important; }
#profile-hero .from-\[\#0C1F31\] > button { border: 1px solid #EEE4E6 !important; }

/* the SME Hub profile card */
.sh-me-cover { background: var(--smesa-pink-bg, #FCF7F9) !important; border-bottom: 1px solid #F1E7EA; }
.sh-me-cover::before { display: none !important; }

/* the members directory cards and "People you may know" band: only when the member has no cover photo */
body.smesa-net #members-list .list-wrap:not(.has-cov)::before { background: var(--smesa-pink-bg, #FCF7F9) !important; border-bottom: 1px solid #F1E7EA; }
.smesa-pymk-band:not(.has-cov) { background: var(--smesa-pink-bg, #FCF7F9) !important; }

/* initials (members without a photo): solid maroon, no maroon-to-coral or red-to-orange gradient */
.sh-av--ini,
.bg-gradient-to-br.from-\[\#DC183C\],
[data-me-avatar].bg-gradient-to-br { background: #9C1C1F !important; background-image: none !important; }

/* the profile's 300x250 slot: collapses when there is no ad for this view */
.smec-ad300:empty { display: none !important; }
.smec-ad300.is-empty { display: none !important; }
.smec-ad300:not(.smec-ad300--house) { display: flex; align-items: center; justify-content: center; background: #F6F7F9; }
.smesa-ad-ph { width: 300px; height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #F1F3F6; border: 1px dashed #CBD5E1; border-radius: 16px; box-sizing: border-box; font-family: Roboto, Arial, sans-serif; color: #64748B; }
.smesa-ad-ph span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.smesa-ad-ph b { font-size: 15px; font-weight: 500; }

/* "More profiles for you" (profile rail): its section shares the class smec-more with the feed's "Read more" link, whose inline-flex,
   bold red styling laid the title, the list and "Show all" side by side. Back to a card. */
section.smec-more { display: block !important; min-height: 0 !important; margin: 0 !important; font: 400 14px/1.4 Roboto, Arial, sans-serif !important; color: #121A21 !important; text-decoration: none !important; }
section.smec-more:hover { text-decoration: none !important; }
section.smec-more li { align-items: flex-start; }
section.smec-more .smec-more-b { flex: 1; }
section.smec-more .smec-more-n { display: block; }
section.smec-more .smec-more-c { all: unset; box-sizing: border-box; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border: 1px solid #9C1C1F; border-radius: 999px; background: #fff; font: 500 12.5px/1 Roboto, Arial, sans-serif; color: #9C1C1F; cursor: pointer; transition: background .15s; }
section.smec-more .smec-more-c:hover { background: #F7E9E9; }
section.smec-more .smec-more-c:focus-visible { outline: 2px solid #9C1C1F; outline-offset: 2px; }
section.smec-more .smec-more-c svg { width: 14px; height: 14px; }
section.smec-more .smec-more-c.is-sent, section.smec-more .smec-more-c[disabled] { border-color: #CBD5E1; color: #64748B; background: #fff; cursor: default; }

/* The hub's components (Connect pills, cards, menus) read colour variables that are only defined on hub pages. On the community
   screens (profile, Account Settings) they were undefined, so e.g. Connect lost its border and colour. Same values here. */
body.smec {
	--sh-maroon: #9C1C1F; --sh-maroon-d: #7E1619; --sh-coral: #FF5A5D; --sh-blush: #F7E9E9; --sh-navy: #0A2C3D; --sh-ink: #121A21;
	--sh-text: #3B4754; --sh-muted: #64748B; --sh-soft: #94A3B8; --sh-line: #E6EAEF; --sh-line-2: #F0F3F6; --sh-bg: #F5F6F8; --sh-hover: #F8FAFC;
}
section.smec-more .smec-more-c { border: 1px solid #9C1C1F !important; color: #9C1C1F !important; background: #fff !important; }
section.smec-more .smec-more-c:hover { background: #F7E9E9 !important; }
section.smec-more .smec-more-c.is-sent, section.smec-more .smec-more-c[disabled] { border-color: #CBD5E1 !important; color: #64748B !important; background: #fff !important; }

/* ---------- one gridline: every page starts where the logo starts (Joel 2026-10-13) ----------
   The site's Elementor pages sit on a 1200 px content grid. The member header, hub, footer, profile and the community screens
   (Account Settings, Notifications, Messages) now use the same box: 1240 px wide with 20 px gutters, so the logo and every page's
   first line share one left edge. */
@media (min-width: 768px) {
	.sh-top-in, .sh-main, .sh-foot-in, .sh-fbar, .smec-prof { max-width: 1240px !important; }
	body.smec main.max-w-7xl, body.smec main > .max-w-7xl, body.smec main > .max-w-6xl,
	body.smec .max-w-7xl.mx-auto, body.smec .max-w-6xl.mx-auto { max-width: 1240px !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box; }
	body.smec-route-notifications main .max-w-3xl.mx-auto { margin-left: 0 !important; margin-right: auto !important; max-width: 880px !important; }
}

/* ---------- the post window (BuddyBoss "Create a post") on desktop: narrower, higher, no title bar ---------- */
@media (min-width: 768px) {
	body.activity-modal-open .activity-update-form.modal-popup { align-items: flex-start !important; }
	body.activity-modal-open .activity-update-form.modal-popup #whats-new-form { width: 560px !important; max-width: calc(100% - 32px) !important; margin: 11vh auto 0 !important; border-radius: 16px !important; overflow: visible; }
	body.activity-modal-open .modal-popup #whats-new-form > .bb-model-header { position: absolute !important; top: 8px; right: 8px; left: auto; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; z-index: 3; }
	body.activity-modal-open .modal-popup #whats-new-form > .bb-model-header > h3 { display: none !important; }
	body.activity-modal-open .modal-popup #whats-new-form .bb-model-close-button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #5B6775; }
	body.activity-modal-open .modal-popup #whats-new-form .bb-model-close-button:hover { background: #F7E9E9; color: #9C1C1F; }
	body.activity-modal-open .modal-popup #whats-new-form .whats-new-scroll-view { padding-top: 6px; }
}

/* ---------- Account Settings > Events: the filter wraps instead of cutting chips off ---------- */
#smesc-view div:has(> div > [data-mb-key]) { flex-wrap: wrap !important; row-gap: 10px; }
#smesc-view div:has(> [data-mb-key]) { flex: none !important; flex-wrap: wrap; overflow: visible !important; }
#smesc-view div:has(> [data-mb-key]) + .hidden.lg\:block { align-self: center; }
@media (max-width: 1279px) { #smesc-view div:has(> div > [data-mb-key]) > .relative { flex: 1 1 100%; width: 100% !important; margin-left: 0 !important; } }

/* ---------- Account Settings > Library: one "browse" button, not two ---------- */
#smesc-view:has(a.h-11[href*="/sme-resources/"]) > div:first-child > a[href*="/sme-resources/"] { display: none !important; }

/* gridline, continued: BuddyBoss pages (Members, groups, forums: a 1200 px container with 10 px gutters) and the Podcast template
   (its own 1200 px sections with 32 px padding) */
@media (min-width: 768px) {
	body.smesa-hub-chrome.buddypress #content > .container { max-width: 1240px !important; padding-left: 20px !important; padding-right: 20px !important; }
	body.smesa-hub-chrome .sme-podcast-wrapper { padding-left: 0 !important; padding-right: 0 !important; }
	body.smesa-hub-chrome .sme-podcast-wrapper section.max-w-\[1200px\] { max-width: 1240px !important; padding-left: 20px !important; padding-right: 20px !important; }
}

/* the profile's Connections pages (members) */
.smesa-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
.smesa-pg { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid #E6EAEF; background: #fff; font: 600 14px/1 Roboto, Arial, sans-serif; color: #33414E; cursor: pointer; }
.smesa-pg:hover { border-color: #9C1C1F; color: #9C1C1F; }
.smesa-pg.is-on { background: #9C1C1F; border-color: #9C1C1F; color: #fff; }
.smesa-pg[disabled] { opacity: .4; cursor: default; }
.smesa-pg:focus-visible { outline: 2px solid #9C1C1F; outline-offset: 2px; }
[data-smesa-conn][aria-busy="true"] { opacity: .6; transition: opacity .15s; }

/* ------------------------------------------------------------------ single post (Joel 15 Oct 2026): /members/{x}/activity/{id}/ in the new design */
/* One focused column on the 1240 grid: the post as a card (avatar, name, time, text at reading size), a quiet reaction row, four equal 44 px+
   actions, then the comments as a second card. Live brand: maroon #9C1C1F, navy #0A2C3D, blush #F7E9E9, Roboto. No markup changes: BuddyBoss's own
   reactions picker, comments and sharing keep working. */
body.activity-permalink #buddypress .activity,
body.activity-permalink .activity { max-width: 780px; margin: 0 auto; padding: 24px 0 48px; }
body.activity-permalink ul.activity-list { margin: 0; padding: 0; list-style: none; }
body.activity-permalink li.activity-item { background: #fff; border: 1px solid #E7EBEF; border-radius: 18px; box-shadow: 0 1px 2px rgba(10,44,61,.05), 0 18px 40px -26px rgba(10,44,61,.28); padding: 22px 26px 6px; margin: 0; overflow: visible; }
body.activity-permalink li.activity-item .activity-header { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
body.activity-permalink li.activity-item .activity-header > p:first-child { flex: 1 1 100%; }
body.activity-permalink li.activity-item .activity-header .activity-date, body.activity-permalink li.activity-item .activity-header .activity-topic { flex: 0 0 auto; white-space: nowrap; }
body.activity-permalink li.activity-item .activity-header .activity-topic a { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: #F7E9E9; color: #9C1C1F !important; font-size: 12.5px !important; font-weight: 700; text-decoration: none; }
body.activity-permalink li.activity-item .activity-avatar img.avatar { width: 52px !important; height: 52px !important; border-radius: 999px; object-fit: cover; }
body.activity-permalink li.activity-item .activity-header p, body.activity-permalink li.activity-item .activity-header .activity-header-data { margin: 0; font-size: 15px; line-height: 1.35; color: #5A6B78; }
body.activity-permalink li.activity-item .activity-header a:first-of-type { color: #0A2C3D; font-weight: 700; font-size: 16px; }
body.activity-permalink li.activity-item .activity-header .time-since, body.activity-permalink li.activity-item .activity-header .activity-time-since { font-size: 13px; color: #7A8894; }
body.activity-permalink li.activity-item .activity-content .activity-inner { font-size: 17.5px; line-height: 1.62; color: #121A21; margin: 16px 0 8px; overflow-wrap: anywhere; }
body.activity-permalink li.activity-item .activity-inner p { margin: 0 0 .75em; }
body.activity-permalink li.activity-item .activity-inner a { color: #9C1C1F; text-decoration: underline; text-underline-offset: 2px; }
body.activity-permalink li.activity-item .activity-state, body.activity-permalink li.activity-item .activity-meta-state { display: flex; align-items: center; gap: 10px; padding: 12px 0; margin-top: 4px; border-top: 1px solid #EEF1F4; color: #5A6B78; font-size: 14px; }
body.activity-permalink li.activity-item .activity-meta.action { display: flex; gap: 4px; border-top: 1px solid #EEF1F4; margin: 0 -14px; padding: 6px 8px; }
body.activity-permalink li.activity-item .activity-meta.action > .generic-button { flex: 1 1 0; display: flex; justify-content: center; margin: 0; }
body.activity-permalink li.activity-item .activity-meta.action { position: relative; }
body.activity-permalink li.activity-item .activity-meta.action a, body.activity-permalink li.activity-item .activity-meta.action button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: #3C4B57; transition: background .15s, color .15s; }
body.activity-permalink li.activity-item .activity-meta.action a:hover, body.activity-permalink li.activity-item .activity-meta.action button:hover { background: #F7E9E9; color: #9C1C1F; }
body.activity-permalink li.activity-item .activity-meta.action .bp-like-button.reaction .bp-like-button-text, body.activity-permalink li.activity-item .activity-meta.action .has-reaction { color: #9C1C1F; }
/* comments as their own card */
body.activity-permalink li.activity-item .activity-comments { margin: 0 -26px; padding: 18px 26px 22px; background: #FBFAFA; border-top: 1px solid #EEF1F4; border-radius: 0 0 18px 18px; }
body.activity-permalink li.activity-item .activity-comments ul { list-style: none; margin: 0; padding: 0; }
body.activity-permalink li.activity-item .acomment-avatar img { width: 40px !important; height: 40px !important; border-radius: 999px; }
body.activity-permalink li.activity-item .acomment-content { font-size: 15.5px; line-height: 1.55; color: #121A21; }
body.activity-permalink li.activity-item .ac-reply-content, body.activity-permalink li.activity-item .ac-form { border-radius: 14px; }
body.activity-permalink li.activity-item .ac-textarea, body.activity-permalink li.activity-item .ac-reply-content .ac-textarea { border: 1px solid #DDE3E9; border-radius: 22px; background: #fff; padding: 10px 14px; min-height: 46px; }
body.activity-permalink li.activity-item .ac-form .ac-reply-content .ac-submit, body.activity-permalink li.activity-item .ac-form input[type="submit"] { background: #9C1C1F; border-color: #9C1C1F; color: #fff; border-radius: 999px; min-height: 40px; padding: 0 20px; font-weight: 700; }
@media (max-width: 767px) {
  body.activity-permalink .activity { padding: 10px 0 28px; }
  body.activity-permalink li.activity-item { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; padding: 16px 16px 4px; }
  body.activity-permalink li.activity-item .activity-avatar img.avatar { width: 44px !important; height: 44px !important; }
  body.activity-permalink li.activity-item .activity-content .activity-inner { font-size: 16.5px; }
  body.activity-permalink li.activity-item .activity-meta.action { margin: 0 -8px; padding: 4px; }
  body.activity-permalink li.activity-item .activity-meta.action a span:not(.bp-screen-reader-text):not(.like-count) { font-size: 13.5px; }
  body.activity-permalink li.activity-item .activity-comments { margin: 0 -16px; padding: 14px 16px 18px; border-radius: 0; }
}
body.activity-permalink li.activity-item .activity-comments:not(:has(li)):has(> form.not-initialized) { margin: 0; padding: 0; background: none; border: 0; }