/* Native shell around the plugin-owned Community application. */

.su-community-page {
	min-height: 70vh;
	overflow-x: clip;
	background: var(--su-ds-background, #fbf9fa);
}

.su-community-shell {
	width: 100%;
	max-width: none;
	padding-block: 0;
}

.su-community-app-host > :first-child {
	margin-top: 0;
}

.su-community-app-host {
	min-width: 0;
	overflow-x: visible;
}

/* Override the plugin's viewport breakout only on the Community page. */
.su-community-page .su-community-app-host > .su-community--stitch {
	left: auto !important;
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}

.su-community-app-host > :last-child {
	margin-bottom: 0;
}

/* Bridge the plugin's presentation tokens without changing its application layout. */
.su-community-page .su-community-app-host > .su-community--stitch {
	--su-brand-primary: var(--su-ds-primary, #7b0038);
	--su-brand-primary-hover: var(--su-ds-primary-hover, #96144f);
	--su-brand-on-primary: #fff;
	--su-brand-link: var(--su-ds-primary, #7b0038);
	--su-brand-link-hover: var(--su-ds-primary-hover, #96144f);
	--su-brand-cta: var(--su-ds-primary, #7b0038);
	--su-brand-cta-hover: var(--su-ds-primary-hover, #96144f);
	--su-brand-bg: var(--su-ds-background, #fbf9fa);
	--su-brand-surface: var(--su-ds-surface, #fff);
	--su-brand-surface-soft: var(--su-ds-surface-soft, #f5f2f4);
	--su-brand-border: var(--su-ds-border, #ece5e9);
	--su-brand-text: var(--su-ds-text, #292329);
	--su-brand-muted: var(--su-ds-muted, #796c74);
	--su-brand-font-body: var(--su-ds-font-body, "Inter", Arial, sans-serif);
	--su-brand-font-heading: var(--su-ds-font-heading, "Plus Jakarta Sans", Arial, sans-serif);
	--su-community-accent: var(--su-ds-accent, #f35e84);
	--su-community-rose: var(--su-ds-accent, #f35e84);
	--su-community-pink: var(--su-ds-primary, #7b0038);
	--su-community-pink-hover: var(--su-ds-primary-hover, #96144f);
	--su-community-pink-soft: var(--su-ds-accent-soft, #fde7ee);
	--su-community-nav-soft: var(--su-ds-accent-soft, #fde7ee);
	--su-stitch-soft: var(--su-ds-accent-soft, #fde7ee);
	color: var(--su-ds-text, #292329);
	font-size: var(--su-ds-body, 14px);
	line-height: 1.55;
}

/* The plugin still owns heading and icon font selectors; only their tokens change. */
.su-community-page .su-community-app-host .su-community-appbar__identity h1 {
	font-size: var(--su-ds-heading, clamp(22px, 2.1vw, 30px));
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.su-community-page .su-community-app-host :is(
	.su-stitch-section-head,
	.su-stitch-feed-title,
	.su-stitch-directory
) h2 {
	font-size: var(--su-ds-subheading, 18px);
	line-height: 1.35;
	font-weight: 700;
}

.su-community-page .su-community-app-host .su-community--stitch :is(
	.su-stitch-sidebar-card,
	.su-stitch-composer,
	.su-community__post,
	.su-stitch-post,
	.su-stitch-profile-card,
	.su-stitch-status-card,
	.su-stitch-inbox,
	.su-stitch-bookmarks,
	.su-stitch-directory,
	.su-stitch-spaces,
	.su-community-guide--compact,
	.su-stitch-notification-preferences
) {
	border-color: var(--su-ds-border, #ece5e9);
	border-radius: var(--su-ds-radius-card, 16px);
	background-color: var(--su-ds-surface, #fff);
	box-shadow: 0 4px 18px rgb(63 0 26 / 0.035);
}

.su-community-page .su-community-app-host .su-community-appbar__mark {
	border-color: var(--su-ds-accent, #f35e84);
	background: var(--su-ds-accent-soft, #fde7ee);
	color: var(--su-ds-primary, #7b0038);
}

.su-community-page .su-community-app-host .su-stitch-feed-title > .material-symbols-outlined {
	color: var(--su-ds-accent, #f35e84);
}

.su-community-page .su-community-app-host .su-community--stitch .su-stitch-nav__item.is-active {
	border-radius: var(--su-ds-radius-control, 8px);
	background: var(--su-ds-accent-soft, #fde7ee);
	box-shadow: inset 3px 0 0 var(--su-ds-accent, #f35e84);
	color: var(--su-ds-primary, #7b0038);
}

/* The existing plugin marks primary backgrounds important; scope the override to its named actions. */
.su-community-page .su-community-app-host .su-community--stitch .su-stitch-primary:not(.su-stitch-primary--subtle) {
	border-color: var(--su-ds-primary, #7b0038) !important;
	border-radius: var(--su-ds-radius-control, 8px);
	background: var(--su-ds-primary, #7b0038) !important;
	color: #fff !important;
	font-size: var(--su-ds-label, 12px);
	font-weight: 700;
}

.su-community-page .su-community-app-host .su-community--stitch .su-stitch-primary:not(.su-stitch-primary--subtle):is(:hover, :focus-visible) {
	border-color: var(--su-ds-primary-hover, #96144f) !important;
	background: var(--su-ds-primary-hover, #96144f) !important;
}

.su-community-page .su-community-app-host .su-community--stitch :is(
	.su-community__cursor-more,
	.su-stitch-primary--subtle
) {
	border: 1px solid var(--su-ds-border, #ece5e9) !important;
	border-radius: var(--su-ds-radius-control, 8px);
	background: var(--su-ds-surface, #fff) !important;
	color: var(--su-ds-primary, #7b0038) !important;
}

.su-community-page .su-community-app-host .su-community--stitch :is(
	.su-community__cursor-more,
	.su-stitch-primary--subtle
):is(:hover, :focus-visible) {
	border-color: var(--su-ds-accent, #f35e84) !important;
	background: var(--su-ds-accent-soft, #fde7ee) !important;
}

.su-community-page .su-community-app-host .su-community--member :is(
	input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"])),
	select,
	textarea
) {
	border-color: var(--su-ds-border, #ece5e9);
	border-radius: var(--su-ds-radius-control, 8px);
	background-color: var(--su-ds-surface, #fff);
	color: var(--su-ds-text, #292329);
}

.su-community-page .su-community-app-host .su-community--member :is(input, select, textarea):focus {
	border-color: var(--su-ds-accent, #f35e84);
}

.su-community-page .su-community-app-host .su-community--stitch :is(
	.su-stitch-nav__item,
	.su-stitch-primary,
	.su-community__cursor-more
):focus-visible {
	outline: 2px solid var(--su-ds-primary, #7b0038);
	outline-offset: 3px;
}