/**
 * BHASNet Theme — Peer Support page styles.
 * Extracted from the page-peer-support.php inline <style> block.
 * Enqueued conditionally by bhasnet_enqueue_peer_support_page_assets()
 * in inc/assets.php, only when this page template is active.
 */

/* ============================================================
   NEW: Conversation feed — its own bounded height + scroller
   ============================================================
   Same concept as #bh-library-results (Resources) and #bh-timeline
   (Events & Awareness) — the feed scrolls within its own space
   instead of growing the whole page as more posts load in via
   "Load More". Matches the same max-height calc() the Categories/
   Tags/"Right Now" sidebar next to it already uses (see .bh-sidebar
   in 04-anchor-sidebar-layout.css), and the same ≥900px gate: below
   that a nested scroll box fights the page's own scroll gesture on
   touch devices, so it's left in normal full-height flow there.

   Scoped to #conversations specifically — .bh-sidebar-content is a
   shared class also used on Resources/Events/News, so an unscoped
   rule here would leak onto those pages too.

   Unlike Resources (which needed to keep #bh-library-heading outside
   the box), there's no separate heading element sitting above the
   feed here — .bh-sidebar-content's only children are either the
   empty-state card, or #bh-peer-support-posts + the Load More button
   together, so bounding .bh-sidebar-content itself is enough; no
   inner element needs its own ID for this. */
@media (min-width: 900px) {
    #conversations .bh-sidebar-content {
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
        padding-right: 0.5rem; /* keeps post cards clear of the scrollbar */
    }
}

/* ============================================================
   Peer Support - Compact styling
   ============================================================ */

.bh-ps-post {
	background: var(--bh-paper);
	border: 1px solid var(--bh-line-dark);
	padding: 0.85rem 1rem;
	margin-bottom: 0.75rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
}

.bh-ps-post:hover {
	border-color: var(--bh-slate-light);
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.bh-ps-post .bh-ps-post-expand {
	cursor: pointer;
}

/* Prevent text selection when clicking quickly */
.bh-ps-post {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* But allow text selection within the post content */
.bh-ps-post .bh-ps-post-excerpt,
.bh-ps-post .bh-ps-post-title,
.bh-ps-post .bh-ps-post-meta {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

.bh-ps-post-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--bh-size-micro);
	color: var(--bh-slate);
	margin-bottom: 0.3rem;
	flex-wrap: wrap;
}
.bh-ps-post-avatar {
	display: inline-flex;
}
.bh-ps-post-avatar .avatar {
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: block;
}
.bh-ps-post-author {
	font-weight: 600;
	color: var(--bh-ink);
}
.bh-ps-post-category {
	background: var(--bh-paper-dim);
	padding: 0.1em 0.5em;
	border-radius: 2px;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bh-slate);
}
.bh-ps-post-title {
	font-family: var(--bh-font-display);
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: 0.15rem;
}
.bh-ps-post-excerpt {
	color: var(--bh-slate);
	font-size: var(--bh-size-small);
	margin-bottom: 0.3rem;
}
.bh-ps-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: 0.4rem;
}
.bh-ps-post-tags .bh-pill--tag {
	font-size: 0.65rem;
	padding: 0.1em 0.4em;
	font-weight: 400;
}
.bh-ps-post-stats {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: var(--bh-size-micro);
	color: var(--bh-slate);
}
.bh-ps-post-stat {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
}
.bh-ps-post-stat i {
	font-size: 0.8rem;
}
.bh-ps-post-expand {
	background: none;
	border: none;
	color: var(--bh-red);
	font-family: var(--bh-font-mono);
	font-size: var(--bh-size-micro);
	cursor: pointer;
	padding: 0.1rem 0.3rem;
	transition: color 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
}
.bh-ps-post-expand:hover {
	color: var(--bh-red-deep);
	text-decoration: underline;
}

/* CHANGED: share row used to live only inside the AJAX-fetched
   .bh-ps-expanded-content (i.e. it didn't exist until a post had been
   clicked open at least once), which meant hovering an unexpanded card
   had nothing to reveal. It's now rendered directly into the card
   itself (conversations.php / createPostCard() in peer-support.js), so
   hovering works immediately, with no fetch required. Same hide-by-
   default/reveal-on-hover concept as .bh-event-actions on the Events
   page. Also gains an .is-expanded trigger (added by expandPost()) so
   that once a post has actually been clicked open, the share row (and
   the full content below) stay visible regardless of hover — matching
   "Expand link clicked -> full content still shows up + share button".
   Deliberately NOT applied to the share row on the standalone thread
   page (thread-view.php) — that mirrors how single-bhasnet_news.php's
   own share row is always visible too; hover-hiding only makes sense
   in a list-of-cards context, not on a page with just one post to
   read. */
.bh-ps-share-row {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	margin-top: 0;
	transition: opacity 0.25s ease, max-height 0.3s ease, margin-top 0.3s ease;
}
.bh-ps-post:hover .bh-ps-share-row,
.bh-ps-post:focus-within .bh-ps-share-row,
.bh-ps-post.is-expanded .bh-ps-share-row {
	opacity: 1;
	max-height: 100px;
	margin-top: 0.75rem;
}

/* NEW: full post content, hidden by default in favor of the short
   .bh-ps-post-excerpt — the two swap on hover/focus/expanded. A plain
   display:none/block swap rather than an animated one: post length
   varies a lot post to post, and animating to an unpredictable height
   tends to look worse than an instant swap, unlike the share row above
   (which is always roughly the same small size, so animating it reads
   as a clean reveal rather than a jump). */
.bh-ps-post-full {
	display: none;
}
.bh-ps-post:hover .bh-ps-post-excerpt,
.bh-ps-post:focus-within .bh-ps-post-excerpt,
.bh-ps-post.is-expanded .bh-ps-post-excerpt {
	display: none;
}
.bh-ps-post:hover .bh-ps-post-full,
.bh-ps-post:focus-within .bh-ps-post-full,
.bh-ps-post.is-expanded .bh-ps-post-full {
	display: block;
	margin-bottom: 0.75rem;
}
.bh-ps-post-full p {
	margin: 0 0 0.75em;
}
.bh-ps-post-full p:last-child {
	margin-bottom: 0;
}

/* Expanded content */
.bh-ps-expanded-content {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--bh-line-dark);
	/* The card this sits inside disables text selection so a quick
	   click-to-expand doesn't accidentally highlight the preview text.
	   That rule was cascading down into the full post + replies once
	   expanded, making it impossible to select or copy anything —
	   turned back on here for everything inside the expanded panel. */
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}
.bh-ps-thread-post-body {
	margin-bottom: 0.5rem;
}
.bh-ps-thread-post-body p:last-child {
	margin-bottom: 0;
}
.bh-ps-thread-replies {
	margin-top: 1rem;
}
.bh-ps-thread-replies-count {
	font-family: var(--bh-font-mono);
	font-size: var(--bh-size-micro);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bh-slate);
	margin-bottom: 0.5rem;
}
.bh-ps-thread-reply {
	padding: 0.6rem 0.8rem;
	margin-bottom: 0.5rem;
	background: var(--bh-paper-dim);
	border-radius: 2px;
}
.bh-ps-thread-reply-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--bh-size-micro);
	color: var(--bh-slate);
	margin-bottom: 0.2rem;
}
.bh-ps-thread-reply-avatar {
	display: inline-flex;
}
.bh-ps-thread-reply-avatar .avatar,
.bh-ps-thread-reply-avatar .bh-ps-avatar {
	border-radius: 50%;
	display: block;
}
.bh-ps-thread-reply-author {
	font-weight: 600;
	color: var(--bh-ink);
}
/* Replies read as secondary to the conversation's main post, so they
   share the feed's smaller "excerpt" size rather than matching the
   main post's larger reading size. */
.bh-ps-thread-reply-body {
	font-size: var(--bh-size-small);
	color: var(--bh-ink);
}
.bh-ps-thread-reply-body p:last-child {
	margin-bottom: 0;
}
.bh-ps-thread-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.4rem;
}
/* Every button living in this compact, repeating context (react,
   report, reply, collapse, sign-in-to-reply) uses the site's default
   button size otherwise — sized for a single hero CTA on an empty
   page, not a dense list of replies. Scaled down to match, the same
   way the header already scales its own buttons down. */
.bh-ps-thread-actions .bh-btn,
.bh-ps-thread-reply-form-actions .bh-btn,
.bh-ps-thread-collapse .bh-btn,
.bh-ps-thread-signin .bh-btn {
	padding: 0.45em 0.9em;
	font-size: var(--bh-size-micro);
}
.bh-ps-thread-reply-form {
	margin-top: 1rem;
}
.bh-ps-thread-reply-form textarea {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--bh-line-dark);
	border-radius: 2px;
	font-family: var(--bh-font-body);
	font-size: var(--bh-size-body);
	min-height: 60px;
	resize: vertical;
}
.bh-ps-thread-reply-form-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 0.4rem;
	flex-wrap: wrap;
}
.bh-ps-thread-reply-form-actions label {
	font-size: var(--bh-size-small);
	color: var(--bh-slate);
	display: flex;
	align-items: center;
	gap: 0.3rem;
}
.bh-ps-thread-collapse {
	margin-top: 1rem;
	text-align: center;
}
.bh-ps-thread-signin {
	margin-top: 1rem;
	text-align: center;
}
.bh-ps-end-message {
	color: var(--bh-slate);
	font-size: var(--bh-size-small);
	text-align: center;
	padding: 1rem 0;
}

/* Anonymous avatar placeholder — deliberately NOT the poster's real
   Gravatar (see BHASNet_Community::avatar_html()), so a neutral icon
   stands in instead. */
.bh-ps-avatar--anon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--bh-paper-dim);
	color: var(--bh-slate);
	flex-shrink: 0;
}

/* Guest "start a conversation" choice — sign in vs. post anonymously */
.bh-ps-guest-choice {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 1.25rem;
}
.bh-ps-guest-option {
	padding: 1.5rem;
}
.bh-ps-guest-option-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bh-slate);
	font-family: var(--bh-font-mono);
	font-size: var(--bh-size-micro);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.cf-turnstile {
	display: flex;
}
@media (max-width: 760px) {
	.bh-ps-guest-choice {
		grid-template-columns: 1fr;
	}
	.bh-ps-guest-option-divider {
		padding: 0.25rem 0;
	}
}

/* Tag suggestions */
.bh-ps-tag-suggestions {
	position: absolute;
	background: var(--bh-paper);
	border: 1px solid var(--bh-line-dark);
	max-height: 150px;
	overflow-y: auto;
	width: 100%;
	z-index: 10;
}
.bh-ps-tag-suggestion {
	padding: 0.4rem 0.75rem;
	cursor: pointer;
	font-size: var(--bh-size-small);
}
.bh-ps-tag-suggestion:hover {
	background: var(--bh-paper-dim);
}
.bh-ps-tag-suggestion strong {
	color: var(--bh-red);
}

/* ============================================================
   Sticky Filter Bar
   ============================================================ */
.bh-sticky-actions {
	position: sticky;
	top: 0; /* JS will override this dynamically */
	z-index: 40;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--bh-line-dark);
	padding: 0.35rem 0;
	transform: none !important;
	opacity: 1 !important;
	transition: top 0.15s ease;
}

.bh-sticky-actions-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.bh-sticky-actions-group {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.bh-sticky-filter-nav {
	display: flex;
	align-items: center;
	gap: 0.05rem;
}

.bh-sticky-filter-link {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.9rem;
	font-family: var(--bh-font-mono);
	font-size: var(--bh-size-micro);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bh-slate);
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
	text-decoration: none;
	cursor: pointer;
}
.bh-sticky-filter-link:hover {
	color: var(--bh-ink);
}
.bh-sticky-filter-link.is-active {
	color: var(--bh-red);
	border-bottom-color: var(--bh-red);
}

.bh-sticky-filter-dropdown {
	position: relative;
	display: inline-block;
}

.bh-sticky-filter-dropdown-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.6rem;
	font-family: var(--bh-font-mono);
	font-size: var(--bh-size-micro);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bh-slate);
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.2s ease;
}
.bh-sticky-filter-dropdown-trigger:hover {
	color: var(--bh-ink);
}
.bh-sticky-filter-dropdown-trigger[aria-expanded="true"] {
	color: var(--bh-red);
}

.bh-sticky-filter-dropdown-menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 0.25rem;
	min-width: 160px;
	background: var(--bh-paper);
	border: 1px solid var(--bh-line-dark);
	box-shadow: 0 4px 16px rgba(11, 11, 14, 0.12);
	padding: 0.25rem 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 50;
}
.bh-sticky-filter-dropdown-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.bh-sticky-filter-dropdown-item {
	display: block;
	padding: 0.3rem 0.9rem;
	font-family: var(--bh-font-body);
	font-size: var(--bh-size-small);
	color: var(--bh-ink);
	text-decoration: none;
	transition: background 0.15s ease;
	cursor: pointer;
}
.bh-sticky-filter-dropdown-item:hover {
	background: var(--bh-paper-dim);
}
.bh-sticky-filter-dropdown-item.is-active {
	color: var(--bh-red);
	font-weight: 600;
}

.bh-sticky-search input[type="search"] {
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--bh-line-dark);
	border-radius: 2px;
	font-family: var(--bh-font-body);
	font-size: var(--bh-size-small);
	background: var(--bh-paper);
	color: var(--bh-ink);
	width: 160px;
}
.bh-sticky-search input[type="search"]:focus-visible {
	outline: 2px solid var(--bh-red);
	outline-offset: 2px;
}

/* Responsive */
@media (max-width: 600px) {
	.bh-ps-post {
		padding: 0.6rem 0.75rem;
	}
	.bh-ps-post-title {
		font-size: 0.95rem;
	}
	.bh-ps-post-meta {
		font-size: 0.65rem;
	}
	.bh-ps-post-stats {
		font-size: 0.65rem;
	}
	.bh-ps-thread-reply {
		padding: 0.4rem 0.6rem;
	}
	.bh-sticky-actions-inner {
		justify-content: center;
	}
	.bh-sticky-actions-group {
		flex-direction: column;
		align-items: stretch;
		gap: 0.3rem;
		width: 100%;
	}
	.bh-sticky-filter-nav {
		justify-content: center;
		flex-wrap: wrap;
	}
	.bh-sticky-filter-link {
		padding: 0.2rem 0.6rem;
		font-size: 0.65rem;
	}
	.bh-sticky-filter-dropdown-trigger {
		padding: 0.2rem 0.4rem;
		font-size: 0.65rem;
	}
	.bh-sticky-search input[type="search"] {
		width: 100%;
	}
}

/* ---- Connect More Privately (merged WhatsApp + one-on-one Connect) ---- */
.bh-connect-privately-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: 800px;
	margin-inline: auto;
}
@media (min-width: 700px) {
	.bh-connect-privately-grid {
		grid-template-columns: 1fr 1fr;
	}
}
/* When Connect with Others isn't active, only the WhatsApp card
   renders — center it at a readable width instead of stretching one
   card across what was meant to be a two-card row. */
.bh-connect-privately-grid--single {
	max-width: 420px;
}
.bh-connect-privately-card {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.bh-connect-privately-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: rgba(215, 38, 61, 0.08);
	color: var(--bh-red);
	font-size: 1.4rem;
	margin-bottom: 1rem;
}
.bh-connect-privately-card__cta {
	margin-top: 1.5rem;
}
.bh-connect-privately-card__note {
	color: var(--bh-slate);
	font-size: var(--bh-size-small);
	margin-top: 0.75rem;
}