/**
 * community.memberside.app skin.
 *
 * 1. Dark palette: remaps Twenty Twenty-Five's colour presets when the Theme Toggle
 *    (or the operating system) asks for dark mode. Every block that uses presets —
 *    core, WooCommerce and the Memberside blocks — follows automatically.
 * 2. Plugin harmony: Ultimate Member, ForumWP, JobBoardWP, Better Messages and myCred
 *    ship their own button and card styles; these rules bring them onto the theme's
 *    radius, font and accent colour so the site reads as one product.
 */

/* ─── Brand tokens ───────────────────────────────────────────────────────── */

:root {
	--ms-accent: var(--wp--preset--color--accent-1, #5b5bd6);
	--ms-accent-text: #fff;
	--ms-radius: 18px;
	--ms-site-shadow: 0 1px 2px rgb(15 18 34 / 5%), 0 12px 32px rgb(15 18 34 / 7%);
	color-scheme: light;
}

/* ─── Dark palette ───────────────────────────────────────────────────────── */

:root[data-ms-theme="dark"] {
	--wp--preset--color--base: #0b0d14;
	--wp--preset--color--contrast: #e9ebf3;
	--wp--preset--color--accent-1: #8c8cff;
	--wp--preset--color--accent-2: #1a1d2c;
	--wp--preset--color--accent-3: #c4b5fd;
	--wp--preset--color--accent-4: #9ba1b3;
	--wp--preset--color--accent-5: #121521;
	--wp--preset--color--accent-6: rgb(233 235 243 / 14%);
	--ms-accent-text: #0b0d14;
	--ms-site-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 35%);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {

	:root:not([data-ms-theme="light"]) {
		--wp--preset--color--base: #0b0d14;
		--wp--preset--color--contrast: #e9ebf3;
		--wp--preset--color--accent-1: #8c8cff;
		--wp--preset--color--accent-2: #1a1d2c;
		--wp--preset--color--accent-3: #c4b5fd;
		--wp--preset--color--accent-4: #9ba1b3;
		--wp--preset--color--accent-5: #121521;
		--wp--preset--color--accent-6: rgb(233 235 243 / 14%);
		--ms-accent-text: #0b0d14;
		--ms-site-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 35%);
		color-scheme: dark;
	}
}

body {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	-webkit-font-smoothing: antialiased;
}

img {
	color-scheme: normal;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

.ms-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.admin-bar .ms-site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.ms-site-header .wp-block-site-logo img {
	max-height: 36px;
	width: auto;
}

/* ─── Sections ───────────────────────────────────────────────────────────── */

.ms-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.ms-hero::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto;
	z-index: -1;
	height: 120%;
	background:
		radial-gradient(40% 50% at 20% 30%, color-mix(in srgb, var(--ms-accent) 35%, transparent), transparent 70%),
		radial-gradient(35% 45% at 80% 20%, color-mix(in srgb, #f472b6 25%, transparent), transparent 70%),
		radial-gradient(30% 40% at 60% 80%, color-mix(in srgb, #22d3ee 20%, transparent), transparent 70%);
	filter: blur(20px);
	pointer-events: none;
}

.ms-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.3em 0.85em;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.ms-band {
	background: var(--wp--preset--color--accent-5);
	border-block: 1px solid var(--wp--preset--color--accent-6);
}

.ms-band--dark {
	--wp--preset--color--base: #0b0d14;
	--wp--preset--color--contrast: #e9ebf3;
	--wp--preset--color--accent-1: #8c8cff;
	--wp--preset--color--accent-5: #121521;
	--wp--preset--color--accent-6: rgb(233 235 243 / 14%);
	--ms-accent-text: #0b0d14;
	background:
		radial-gradient(60% 80% at 100% 0%, rgb(140 140 255 / 22%), transparent 60%),
		#0b0d14;
	color: #e9ebf3;
}

.ms-feature-card {
	height: 100%;
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: var(--ms-radius);
	background: var(--wp--preset--color--base);
	box-shadow: var(--ms-site-shadow);
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.ms-feature-card:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--ms-accent) 40%, transparent);
}

.ms-feature-card h3 a,
.ms-feature-card .wp-block-heading a {
	color: inherit;
	text-decoration: none;
}

.ms-feature-card .ms-feature-icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 0 1rem;
	border-radius: 14px;
	background: color-mix(in srgb, var(--ms-accent) 14%, transparent);
	font-size: 1.35rem;
	line-height: 1;
}

.ms-section-head .wp-block-heading {
	letter-spacing: -0.02em;
}

.ms-query-card {
	height: 100%;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: var(--ms-radius);
	background: var(--wp--preset--color--base);
	overflow: hidden;
	box-shadow: var(--ms-site-shadow);
}

.ms-query-card .wp-block-post-featured-image {
	margin: 0;
}

.ms-query-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ms-query-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.ms-meta-chip {
	display: inline-block;
	margin: 0;
	padding: 0.15em 0.65em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ms-accent) 12%, transparent);
	color: var(--ms-accent);
	font-size: 0.75rem;
	font-weight: 650;
}

.ms-form-success,
.ms-form-error {
	padding: 0.75rem 1rem;
	border-radius: 12px;
	font-weight: 600;
}

.ms-form-success {
	background: color-mix(in srgb, #16a34a 14%, transparent);
	color: #15803d;
}

.ms-form-error {
	background: color-mix(in srgb, #e11d48 12%, transparent);
	color: #be123c;
}

.ms-deletion-form textarea {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 12px;
	background: transparent;
	color: inherit;
	font: inherit;
}

.ms-button--danger {
	border-color: #e11d48;
	color: #e11d48;
}

/* ─── Buttons across plugins ─────────────────────────────────────────────── */

.wp-element-button,
.wp-block-button__link {
	border-radius: 999px;
	font-weight: 600;
}

/*
 * Core's outline button style hard-codes its own em-based padding and a 2px border, so it
 * ignored the global button padding and stood taller and wider than the filled button
 * beside it. Same padding, and the 1px border is taken out of it so both boxes match.
 */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline,
.wc-block-components-button.is-style-outline {
	padding: calc(0.6rem - 1px) calc(1.25rem - 1px) !important;
	border: 1px solid currentcolor !important;
}

/*
 * Only FILLED buttons get the accent pill. UM 3 also uses .um-button for inline actions
 * (Like, Reply, Hide comments — the "link-gray" and "tertiary" variants); painting every
 * .um-button turned those into big purple pills.
 */
.um input[type="submit"].um-button,
.um :is(a, button).um-button.um-button-primary,
.um a.um-button:not([class*="um-button-link"]):not([class*="-gray"]):not([class*="-color"]):not(.um-button-primary),
.fmwp-button,
.fmwp a.fmwp-button,
.jb .jb-button,
.jb a.jb-button,
.jb input[type="submit"] {
	border-radius: 999px !important;
	background: var(--ms-accent) !important;
	color: var(--ms-accent-text) !important;
	font-weight: 600 !important;
	box-shadow: none !important;
}

.um a.um-button.um-alt,
.um input[type="submit"].um-button.um-alt,
.fmwp-button.fmwp-button-secondary {
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* ─── Ultimate Member ────────────────────────────────────────────────────── */

.um {
	color: var(--wp--preset--color--contrast);
}

.um input[type="text"],
.um input[type="email"],
.um input[type="password"],
.um input[type="url"],
.um input[type="tel"],
.um input[type="number"],
.um textarea,
.um select,
.um .select2-container .select2-selection {
	border-color: var(--wp--preset--color--accent-6) !important;
	border-radius: 12px !important;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.um-directory .um-members-wrapper .um-members .um-member,
.um-directory .um-member {
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	border-radius: var(--ms-radius) !important;
	background: var(--wp--preset--color--base) !important;
	box-shadow: var(--ms-site-shadow);
	overflow: hidden;
}

.um-directory .um-member-name a,
.um-profile .um-name a {
	color: var(--wp--preset--color--contrast) !important;
}

.um-profile .um-header,
.um-profile .um-profile-nav {
	background: transparent !important;
	border-color: var(--wp--preset--color--accent-6) !important;
}

.um-profile-nav-item a {
	border-radius: 999px;
}

.um-profile-nav-item.active a,
.um-profile-nav-item a:hover {
	background: color-mix(in srgb, var(--ms-accent) 14%, transparent) !important;
	color: var(--ms-accent) !important;
}

.um-account-side ul li a,
.um-account-main {
	border-color: var(--wp--preset--color--accent-6) !important;
}

.um-account-side li a.current,
.um-account-side li a.current:hover {
	background: color-mix(in srgb, var(--ms-accent) 14%, transparent) !important;
	color: var(--ms-accent) !important;
}

.um-activity-widget,
.um-activity-new-post,
.um-groups-single,
.um-groups-directory .um-group-item,
.um-notes-list .um-notes-note {
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	border-radius: var(--ms-radius) !important;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* ─── ForumWP ────────────────────────────────────────────────────────────── */

.fmwp {
	color: var(--wp--preset--color--contrast);
}

.fmwp .fmwp-forums-wrapper,
.fmwp .fmwp-topics-wrapper,
.fmwp .fmwp-topic-main-wrapper,
.fmwp .fmwp-forum-row,
.fmwp .fmwp-topic-row {
	border-color: var(--wp--preset--color--accent-6) !important;
	background: transparent !important;
}

.fmwp .fmwp-forum-row:hover,
.fmwp .fmwp-topic-row:hover {
	background: var(--wp--preset--color--accent-5) !important;
}

/* ─── JobBoardWP ─────────────────────────────────────────────────────────── */

.jb .jb-job-list-wrapper,
.jb .jb-job-list-row,
.jb-jobs-list .jb-job-list-row {
	border-color: var(--wp--preset--color--accent-6) !important;
	border-radius: 14px;
}

.jb .jb-job-list-row:hover {
	background: var(--wp--preset--color--accent-5);
}

.jb .jb-job-type {
	border-radius: 999px !important;
}

/* ─── The Events Calendar and Event Tickets ──────────────────────────────── */

/*
 * Both plugins derive every colour from one small set of `--tec-color-*`
 * variables, so the calendar, a single event and the RSVP block all follow the
 * site palette from here rather than from a sheaf of selector overrides. Left
 * alone they are near-black on near-black in dark mode: the event title, its
 * description and the whole list view read as blank space.
 *
 * Each one points at a theme preset rather than a literal, so the dark palette
 * at the top of this file switches the calendar with everything else and there
 * is only one copy of these rules. The accent tints are the exception — they
 * are the brand colour at low alpha, which only `color-mix` can express.
 *
 * `:root:root` is deliberate, not a typo. Both plugins enqueue their variable
 * sheets AFTER this one and declare the same names on a plain `:root`, so at
 * equal specificity theirs win and every rule below is silently discarded —
 * which looks exactly like the overrides never being written. Doubling the
 * selector settles it on specificity instead of on load order.
 */

:root:root {
	--tec-border-radius-default: 10px;

	/* Text */
	--tec-color-text-primary: var(--wp--preset--color--contrast);
	--tec-color-text-primary-hover: var(--wp--preset--color--contrast);
	--tec-color-text-primary-active: var(--wp--preset--color--contrast);
	--tec-color-text-primary-light: var(--wp--preset--color--accent-4);
	--tec-color-text-secondary: var(--wp--preset--color--accent-4);
	--tec-color-text-disabled: var(--wp--preset--color--accent-4);

	/* Grounds */
	--tec-color-background: var(--wp--preset--color--base);
	--tec-color-background-secondary: var(--wp--preset--color--accent-5);
	--tec-color-background-secondary-hover: var(--wp--preset--color--accent-5);
	--tec-color-background-transparent: var(--wp--preset--color--base);
	--tec-color-background-messages: var(--wp--preset--color--accent-5);

	/* Rules and icons */
	--tec-color-border-default: var(--wp--preset--color--accent-6);
	--tec-color-border-secondary: var(--wp--preset--color--accent-6);
	--tec-color-border-tertiary: var(--wp--preset--color--accent-4);
	--tec-color-border-hover: var(--wp--preset--color--accent-4);
	--tec-color-border-active: var(--wp--preset--color--contrast);
	--tec-color-icon-primary: var(--wp--preset--color--accent-4);
	--tec-color-icon-primary-alt: var(--wp--preset--color--accent-4);
	--tec-color-icon-secondary: var(--wp--preset--color--accent-4);
	--tec-color-icon-active: var(--wp--preset--color--contrast);
	--tec-color-icon-focus: var(--ms-accent);
	--tec-color-event-icon: var(--wp--preset--color--accent-4);
	--tec-color-event-icon-hover: var(--ms-accent);

	/* Accents: the site brand, not The Events Calendar's blue */
	--tec-color-accent-primary: var(--ms-accent);
	--tec-color-accent-primary-hover: var(--ms-accent);
	--tec-color-accent-primary-active: var(--ms-accent);
	--tec-color-accent-secondary: var(--wp--preset--color--contrast);
	--tec-color-accent-secondary-hover: var(--wp--preset--color--contrast);
	--tec-color-accent-secondary-active: var(--wp--preset--color--contrast);
	--tec-color-link-primary: var(--wp--preset--color--contrast);
	--tec-color-link-accent: var(--ms-accent);
	--tec-color-link-accent-hover: var(--ms-accent);

	/* Accent tints: month-grid event bars, the datepicker, selected days */
	--tec-color-accent-primary-background: color-mix(in srgb, var(--ms-accent) 12%, transparent);
	--tec-color-accent-secondary-background: var(--wp--preset--color--accent-5);
	--tec-color-accent-primary-week-event: color-mix(in srgb, var(--ms-accent) 18%, transparent);
	--tec-color-accent-primary-week-event-hover: color-mix(in srgb, var(--ms-accent) 28%, transparent);
	--tec-color-accent-primary-week-event-featured: color-mix(in srgb, var(--ms-accent) 10%, transparent);
	--tec-color-accent-primary-week-event-featured-hover: color-mix(in srgb, var(--ms-accent) 20%, transparent);
	--tec-color-background-primary-multiday: color-mix(in srgb, var(--ms-accent) 28%, transparent);
	--tec-color-background-primary-multiday-hover: color-mix(in srgb, var(--ms-accent) 38%, transparent);
	--tec-color-background-secondary-multiday: var(--wp--preset--color--accent-5);
	--tec-color-background-secondary-multiday-hover: var(--wp--preset--color--accent-5);
}

/* The search bar and the view tabs sit on the page, not on a white slab. */
body .tribe-events .tribe-events-header,
body .tribe-events .tribe-events-c-events-bar {
	background: transparent;
}

/* Event cards and the month grid follow the site's hairline. */
body .tribe-events .tribe-events-calendar-list__event-row,
body .tribe-events .tribe-events-calendar-month__day,
body .tribe-events .tribe-events-calendar-day__event {
	border-color: var(--wp--preset--color--accent-6);
}

/*
 * The RSVP block is the one place that has to read as a card: its own rules give
 * it the page background and a hairline, which on this site makes it vanish.
 */
body .event-tickets .tribe-tickets__rsvp-wrapper {
	background-color: var(--wp--preset--color--accent-5);
	border-color: var(--wp--preset--color--accent-6);
	border-radius: var(--ms-radius);
}

/* ─── BuddyPress (nouveau) ───────────────────────────────────────────────── */

/*
 * BuddyPress ships a light template pack with hard-coded greys (#fff, #fafafa, #eaeaea,
 * #555, #767676) and no custom properties, so on the dark palette its cards turned white
 * with near-invisible text and its controls stayed browser-default. Everything below
 * re-points those greys at the theme's tokens; nothing changes BuddyPress's layout.
 */

.buddypress-wrap {
	color: var(--wp--preset--color--contrast);
}

.buddypress-wrap :is(h1, h2, h3, h4, h5, a:not(.button)) {
	color: var(--wp--preset--color--contrast);
}

.buddypress-wrap a:not(.button):hover {
	color: var(--ms-accent);
}

/* Directory and member navigation tabs. */
.buddypress-wrap:not(.bp-single-vert-nav) .bp-navs li,
.buddypress-wrap .bp-subnavs li {
	background: transparent !important;
}

.buddypress-wrap.bp-dir-hori-nav:not(.bp-vertical-navs) nav:not(.tabbed-links) {
	border-top: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--accent-6) !important;
	box-shadow: none !important;
}

.buddypress-wrap :is(.bp-navs, .bp-subnavs) li a {
	border-radius: 999px;
	color: var(--wp--preset--color--accent-4) !important;
	font-weight: 600;
}

.buddypress-wrap :is(.bp-navs, .bp-subnavs) li:not(.current):not(.selected) a:hover {
	background: var(--wp--preset--color--accent-5) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.buddypress-wrap :is(.bp-navs, .bp-subnavs) li:is(.current, .selected) a {
	background: color-mix(in srgb, var(--ms-accent) 16%, transparent) !important;
	color: var(--ms-accent) !important;
}

.buddypress-wrap :is(.bp-navs, .bp-subnavs) li a .count {
	border: 0 !important;
	background: var(--ms-accent) !important;
	color: var(--ms-accent-text) !important;
}

/* The panel behind the stream, and BuddyPress's 2px corners. */
.buddypress-wrap .activity-list.bp-list {
	padding: 0;
	border: 0 !important;
	background: transparent !important;
}

.buddypress-wrap .bp-list {
	border-top: 1px solid var(--wp--preset--color--accent-6) !important;
}

.buddypress-wrap .bp-list > li {
	border-bottom: 1px solid var(--wp--preset--color--accent-6) !important;
}

body #buddypress :is(div, dl, li, textarea, select, input, .bp-feedback) {
	border-radius: inherit;
}

.buddypress-wrap :is(.meta, .item-meta, .activity-comments .acomment-meta, .bp-invites-content .item-meta span) {
	color: var(--wp--preset--color--accent-4) !important;
}

.buddypress-wrap .groups-list li .group-desc {
	border-color: var(--wp--preset--color--accent-6) !important;
	color: var(--wp--preset--color--accent-4) !important;
}

/* Group header description box. */
.buddypress-wrap .groups-header .desc-wrap .group-description,
.buddypress-wrap .groups-header .desc-wrap {
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: var(--ms-radius);
	background: var(--wp--preset--color--accent-5) !important;
	color: var(--wp--preset--color--contrast) !important;
	box-shadow: none !important;
}

.buddypress-wrap .activity-comments .acomment-content {
	border-left-color: var(--wp--preset--color--accent-6) !important;
}

/* Activity stream cards. */
.buddypress-wrap .activity-list .activity-item {
	margin-bottom: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: var(--ms-radius);
	background: var(--wp--preset--color--base);
	box-shadow: var(--ms-site-shadow);
}

.buddypress-wrap .activity-list .activity-item :is(.activity-inner, blockquote),
.buddypress-wrap .activity-comments :is(.acomment-content, blockquote) {
	border: 0 !important;
	border-radius: var(--ms-radius-sm, 10px);
	background: var(--wp--preset--color--accent-5) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.buddypress-wrap :is(.activity-header, .comment-header, .acomment-meta, .time-since, .activity-inreplyto, .bp-pagination, .item-meta, .group-desc + *, .last-post, .update) {
	color: var(--wp--preset--color--accent-4) !important;
}

/*
 * The row under a post (comment count, favourite) is a separate light band in nouveau,
 * whichever element it lands on — ul.activity-meta on a post, div.activity-meta.action
 * on a comment.
 */
.buddypress-wrap :is(ul, div).activity-meta,
.buddypress-wrap .activity-meta.action,
.buddypress-wrap .activity-content .activity-meta {
	background: transparent !important;
	box-shadow: none !important;
}

.buddypress-wrap .activity-list .activity-item > .activity-content > .activity-meta {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	padding: 0.5rem 0 0;
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.buddypress-wrap .activity-meta :is(a, button) {
	color: var(--wp--preset--color--accent-4) !important;
}

.buddypress-wrap .activity-meta :is(a, button):hover {
	color: var(--ms-accent) !important;
}

.buddypress-wrap .activity-comments {
	background: transparent !important;
}

.buddypress-wrap .activity-comments > ul {
	border-left: 2px solid var(--wp--preset--color--accent-6);
	padding-left: 1rem;
}

/* The "what's new" composer. */
.buddypress-wrap .activity-update-form,
.buddypress-wrap #whats-new-form {
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	border-radius: var(--ms-radius);
	background: var(--wp--preset--color--base) !important;
	box-shadow: none !important;
}

.buddypress-wrap #whats-new-textarea textarea,
.buddypress-wrap :is(input[type="text"], input[type="search"], input[type="email"], input[type="password"], textarea, select) {
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	border-radius: 12px !important;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	font: inherit;
}

.buddypress-wrap .dir-search form,
.buddypress-wrap .bp-search form {
	border: 0;
}

/*
 * BuddyPress wraps each filter select in a bordered `.select-wrap`. Keeping the border on
 * both drew a box inside a box, and the select's own padding clipped its label.
 */
.buddypress-wrap .select-wrap {
	display: flex;
	align-items: center;
	padding-right: 0.5rem;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
}

.buddypress-wrap .select-wrap select {
	width: 100%;
	max-width: none !important;
	padding: 0.45rem 0.5rem 0.45rem 0.9rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	font-size: 0.875rem;
	text-indent: 0 !important;
	text-overflow: ellipsis;

	/* BuddyPress draws its own arrow next to the select, so hide the native one. */
	appearance: none;
}

.buddypress-wrap .select-wrap .select-arrow {
	padding-right: 0.75rem;
	color: var(--wp--preset--color--accent-4);
}

/* Buttons: filled for primary actions, outline for the rest. */
.buddypress-wrap :is(.generic-button a, .group-button a, .friendship-button a, button:not(.ms-theme-toggle__button):not([class*="bp-tooltip"]), input[type="submit"], a.button) {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 2.25rem;
	padding: 0.4rem 1rem !important;
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
	font-size: 0.875rem !important;
	font-weight: 600;
	text-decoration: none;
	box-shadow: none !important;
}

.buddypress-wrap :is(.generic-button a, .group-button a, .friendship-button a, button, input[type="submit"], a.button):hover {
	border-color: var(--ms-accent) !important;
	color: var(--ms-accent) !important;
}

.buddypress-wrap :is(#whats-new-submit input, .activity-update-form input[type="submit"], .group-button a.join-group, .friendship-button a.add) {
	border-color: transparent !important;
	background: var(--ms-accent) !important;
	color: var(--ms-accent-text) !important;
}

/* Avatars: BuddyPress leaves these at their natural size, which is huge for UM uploads. */
.buddypress-wrap .bp-list li .item-avatar img.avatar,
.buddypress-wrap .activity-list .activity-item div.item-avatar img,
.buddypress-wrap .activity-avatar img.avatar {
	width: 64px !important;
	height: 64px !important;
	max-width: 64px !important;
	border-radius: 50%;
	object-fit: cover;
}

.buddypress-wrap .activity-comments .acomment-avatar img.avatar,
.buddypress-wrap .activity-header .avatar {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50%;
	object-fit: cover;
}

.buddypress-wrap #item-header-avatar img.avatar {
	width: 128px !important;
	height: 128px !important;
	border: 4px solid var(--wp--preset--color--base);
	border-radius: 50%;
	object-fit: cover;
}

/* Member and group lists. */
.buddypress-wrap .bp-list li {
	padding: 1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.buddypress-wrap .bp-list li .item-title {
	font-size: var(--wp--preset--font-size--medium, 1.0625rem);
	font-weight: 650;
}

.buddypress-wrap .bp-list li :is(.group-desc, .user-update, .last-post) {
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: var(--ms-radius-sm, 10px);
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--accent-4);
}

/* Profile and group headers. */
/*
 * Only the colour and the sizing: BuddyPress puts the group's own cover in an inline
 * `background-image`, and a `background` shorthand here reset its repeat and size, which
 * tiled the picture across the header.
 */
.buddypress-wrap #header-cover-image {
	border-radius: var(--ms-radius) var(--ms-radius) 0 0;
	background-color: var(--wp--preset--color--accent-5);
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

.buddypress-wrap #header-cover-image:not([style*="background-image"]) {
	background-image: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ms-accent) 45%, transparent), transparent 70%);
}

.buddypress-wrap #item-header-cover-image #item-header-content {
	color: var(--wp--preset--color--contrast);
}

.buddypress-wrap :is(#item-header, .single-headers) {
	color: var(--wp--preset--color--contrast);
}

/* Feedback and empty-state notices. */
.buddypress-wrap .bp-feedback {
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	border-radius: var(--ms-radius-sm, 10px);
	background: var(--wp--preset--color--accent-5) !important;
	color: var(--wp--preset--color--contrast) !important;
	box-shadow: none !important;
}

.buddypress-wrap .bp-feedback .bp-icon {
	background: var(--ms-accent) !important;
	color: var(--ms-accent-text) !important;
}

.buddypress-wrap .bp-feedback p {
	color: var(--wp--preset--color--contrast) !important;
}

/* BuddyPress widget blocks: titles, the filter row and the list rows. */
:is(.wp-block-bp-latest-activities, .wp-block-bp-dynamic-members, .wp-block-bp-dynamic-groups) :is(h2, h3, .widget-title) a,
:is(.wp-block-bp-latest-activities, .wp-block-bp-dynamic-members, .wp-block-bp-dynamic-groups) :is(h2, h3, .widget-title) {
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: none !important;
}

/*
 * BuddyPress sets this row at font-size .5em and separates the filters with literal "|"
 * characters. A readable size, a gap instead of the pipes (hidden by the transparent
 * colour, with the links keeping their own), and a rule under it.
 */
.bp-dynamic-block-container .item-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	margin: 0 0 1rem;
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	color: transparent;
	font-size: 0.8125rem;
}

.bp-dynamic-block-container .item-options a {
	color: var(--wp--preset--color--accent-4) !important;
	text-decoration: none !important;
}

.bp-dynamic-block-container .item-options a:is(.selected, .current, :hover) {
	color: var(--ms-accent) !important;
	font-weight: 600;
}

.bp-dynamic-block-container ul.item-list li {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.bp-dynamic-block-container ul.item-list li .item-avatar {
	float: none !important;
	width: auto !important;
}

.bp-dynamic-block-container ul.item-list li .item-avatar img {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50%;
	object-fit: cover;
}

.bp-dynamic-block-container ul.item-list li .item {
	margin-left: 0 !important;
}

/* Names read as titles, like every other card on the site, not as underlined links. */
.bp-dynamic-block-container ul.item-list li .item-title a,
.bp-latest-activities-block a {
	color: var(--wp--preset--color--contrast) !important;
	font-weight: 600;
	text-decoration: none !important;
}

.bp-dynamic-block-container ul.item-list li .item-title a:hover,
.bp-latest-activities-block a:hover {
	color: var(--ms-accent) !important;
}

.bp-dynamic-block-container ul.item-list li .item-meta {
	color: var(--wp--preset--color--accent-4) !important;
	font-size: 0.8125rem;
}

/*
 * The "Latest activity" block draws each item as a white speech bubble: a box-shadow plus
 * two CSS-triangle arrows (one of them hard-coded #fff). On the dark palette that read as
 * stray white wedges with the text floating between them. Cards instead.
 */
.bp-latest-activities-block .activity-list.item-list blockquote .activity-item:not(.mini) {
	padding: 0.875rem 1rem !important;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: var(--ms-radius-sm, 10px);
	background: var(--wp--preset--color--accent-5);
	box-shadow: none !important;
}

.bp-latest-activities-block .activity-list.item-list blockquote .activity-item:not(.mini)::before,
.bp-latest-activities-block .activity-list.item-list blockquote .activity-item:not(.mini)::after {
	display: none !important;
}

.bp-latest-activities-block .activity-list.item-list > li {
	margin-bottom: 1.25rem;
	padding: 0;
	border: 0;
	list-style: none;
}

.bp-latest-activities-block .activity-list.item-list footer {
	gap: 0.5rem;
	margin-top: 0.5rem;
	color: var(--wp--preset--color--accent-4);
	font-size: 0.8125rem;
}

.bp-latest-activities-block .activity-list.item-list footer img.avatar,
.bp-latest-activities-block .activity-item.mini .avatar {
	width: 24px !important;
	height: 24px !important;
	margin-right: 0.35rem;
	border-radius: 50%;
	object-fit: cover;
}

.bp-latest-activities-block .activity-list.item-list .activity-item.mini {
	padding: 0.5rem 0 !important;
	color: var(--wp--preset--color--accent-4);
	font-size: 0.875rem;
	line-height: 1.5;
}

.bp-latest-activities-block .activity-list.item-list :is(.activity-time-since, .time-since) {
	color: var(--wp--preset--color--accent-4) !important;
	white-space: nowrap;
}

/* Profile field tables. */
.buddypress-wrap :is(.bp-tables-user, .profile-fields) :is(th, td) {
	border-color: var(--wp--preset--color--accent-6) !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* ─── Better Messages ────────────────────────────────────────────────────── */

.bp-messages-wrap,
.bp-messages-wrap-main {
	--main-bm-color: 91, 91, 214;
	border-radius: var(--ms-radius) !important;
	overflow: hidden;
}

/* ─── myCred ─────────────────────────────────────────────────────────────── */

.mycred-leaderboard {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ms-rank;
}

.mycred-leaderboard li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	counter-increment: ms-rank;
}

.mycred-leaderboard li::before {
	content: counter(ms-rank);
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ms-accent) 14%, transparent);
	color: var(--ms-accent);
	font-weight: 700;
	font-size: 0.875rem;
}

.mycred-leaderboard li:nth-child(-n+3)::before {
	background: linear-gradient(135deg, #fbbf24, #f59e0b);
	color: #3b2500;
}

.mycred-leaderboard img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
}

/* ─── WooCommerce ────────────────────────────────────────────────────────── */

.wc-block-product-template .wc-block-components-product-image img,
.wp-block-woocommerce-product-image img {
	border-radius: 14px;
}

/* ─── Mega menu on the site palette ──────────────────────────────────────── */

.ms-site-header .ms-megamenu {
	--ms-megamenu-trigger-color: var(--wp--preset--color--contrast);
	--ms-megamenu-trigger-color-hover: var(--ms-accent);
	--ms-megamenu-panel-bg: var(--wp--preset--color--base);
	--ms-megamenu-panel-shadow: 0 24px 60px rgb(0 0 0 / 28%);
	--ms-megamenu-panel-radius: 18px;
	--ms-megamenu-eyebrow-color: var(--wp--preset--color--accent-4);
	--ms-megamenu-link-title-color: var(--wp--preset--color--contrast);
	--ms-megamenu-link-description-color: var(--wp--preset--color--accent-4);
	--ms-megamenu-link-hover-bg: var(--wp--preset--color--accent-5);
	--ms-megamenu-accent: var(--ms-accent);
	--ms-megamenu-on-accent: var(--ms-accent-text);
	--ms-megamenu-border-color: var(--wp--preset--color--accent-6);
	--ms-megamenu-focus-color: var(--wp--preset--color--contrast);
	--ms-megamenu-overlay-bg: var(--wp--preset--color--base);
}

.ms-site-header .ms-megamenu__panel {
	border: 1px solid var(--wp--preset--color--accent-6);
}

/*
 * Desktop panels centre on the page, not on the menu. The menu starts well right of
 * the logo, so a panel centred on it runs off the left edge below ~1400px. The header
 * (sticky, with a backdrop filter) is the containing block for fixed descendants and
 * spans the viewport, so `fixed` + 50% centres the panel on the screen, just below the bar.
 */
.ms-site-header .ms-megamenu:not([data-ms-mode="mobile"]) .ms-megamenu__panel {
	position: fixed;
	top: calc(100% - 4px);
	left: 50%;
	right: auto;
	width: min(1120px, calc(100vw - 48px));
	transform: translateX(-50%) !important;
}

.ms-site-header .ms-megamenu__trigger:hover,
.ms-site-header .ms-megamenu__item-link:hover {
	text-decoration: none;
}

/* Logo and actions keep their size; the menu is what gives way. */
.ms-site-header .wp-block-site-logo,
.ms-site-header .ms-header-actions {
	flex-shrink: 0;
}

/*
 * `backdrop-filter` makes the header the containing block for fixed descendants, which
 * would trap the full-screen mobile menu inside an 80px bar. Drop it while the menu is open.
 */
.ms-site-header:has(.ms-megamenu[data-ms-mobile-open]) {
	backdrop-filter: none;
	background: var(--wp--preset--color--base);
}

.ms-megamenu[data-ms-mode="mobile"] .ms-megamenu__toggle {
	border-radius: 999px;
	padding: 8px 14px;
}

/* In the full-screen menu the close button sits top-right, clear of the logo. */
.ms-megamenu[data-ms-mobile-open] .ms-megamenu__toggle {
	position: fixed;
	top: 16px;
	right: 16px;
	background: var(--wp--preset--color--base);
}

.ms-megamenu[data-ms-mode="mobile"] .ms-megamenu__viewport {
	box-sizing: border-box;
	padding-inline: max(20px, calc((100vw - 720px) / 2));
}

.ms-megamenu[data-ms-mode="mobile"] :is(.ms-megamenu__trigger, .ms-megamenu__item-link, .ms-megamenu__panel) {
	box-sizing: border-box;
}

.ms-site-header .ms-megamenu[data-ms-mode="mobile"] .ms-megamenu__panel {
	border: 0;
	background: transparent;
}

@media (max-width: 1280px) {

	.ms-site-header .ms-megamenu {
		--ms-megamenu-item-padding-inline: 8px;
		--ms-megamenu-gap: 2px;
	}

	.ms-site-header .wp-block-site-logo img {
		max-height: 30px;
	}
}

/* ─── Ultimate Member design tokens ──────────────────────────────────────── */

/*
 * UM 3 prints its palette (primary green, grays) as inline custom properties on
 * `body`, so overrides on :root never reach UM markup. `:root body` outranks the
 * plugin's bare `body` rule without !important.
 */
:root body {
	--um-primary-25-bg: #f5f5ff;
	--um-primary-50-bg: #eef0ff;
	--um-primary-100-bg: #e0e3ff;
	--um-primary-200-bg: #c7ccff;
	--um-primary-300-bg: #a5acf7;
	--um-primary-400-bg: #8288ec;
	--um-primary-500-bg: #6a6ee0;
	--um-primary-500-a-24: rgb(91 91 214 / 24%);
	--um-primary-600-bg: #5b5bd6;
	--um-primary-600-fg: #fff;
	--um-primary-700-bg: #4a48c4;
	--um-primary-700-fg: #fff;
	--um-primary-800-bg: #3b3aa6;
	--um-primary-800-fg: #fff;
	--um-primary-900-bg: #2f2e85;
	--um-primary-900-fg: #fff;
}

:root[data-ms-theme="dark"] body {
	--um-primary-600-bg: #8c8cff;
	--um-primary-600-fg: #0b0d14;
	--um-primary-700-bg: #a5a5ff;
	--um-primary-700-fg: #0b0d14;
	--um-gray-25: #0f121b;
	--um-gray-50: #121521;
	--um-gray-100: #1a1d2c;
	--um-gray-200: #262a3b;
	--um-gray-300: #363b50;
	--um-gray-400: #6b7185;
	--um-gray-500: #9ba1b3;
	--um-gray-600: #b9bfcd;
	--um-gray-700: #d4d8e2;
	--um-gray-800: #e4e7ee;
	--um-gray-900: #f2f4f8;
	--um-gray-400-a-14: rgb(233 235 243 / 8%);
	--um-gray-400-a-20: rgb(233 235 243 / 12%);
	--um-gray-900-a-3: rgb(0 0 0 / 20%);
	--um-gray-900-a-5: rgb(0 0 0 / 25%);
	--um-gray-900-a-6: rgb(0 0 0 / 28%);
	--um-gray-900-a-8: rgb(0 0 0 / 30%);
	--um-gray-900-a-10: rgb(0 0 0 / 34%);
	--um-gray-900-a-14: rgb(0 0 0 / 38%);
	--um-gray-900-a-18: rgb(0 0 0 / 42%);
}

@media (prefers-color-scheme: dark) {

	:root:not([data-ms-theme="light"]) body {
		--um-primary-600-bg: #8c8cff;
		--um-primary-600-fg: #0b0d14;
		--um-primary-700-bg: #a5a5ff;
		--um-primary-700-fg: #0b0d14;
		--um-gray-25: #0f121b;
		--um-gray-50: #121521;
		--um-gray-100: #1a1d2c;
		--um-gray-200: #262a3b;
		--um-gray-300: #363b50;
		--um-gray-400: #6b7185;
		--um-gray-500: #9ba1b3;
		--um-gray-600: #b9bfcd;
		--um-gray-700: #d4d8e2;
		--um-gray-800: #e4e7ee;
		--um-gray-900: #f2f4f8;
		--um-gray-400-a-14: rgb(233 235 243 / 8%);
		--um-gray-400-a-20: rgb(233 235 243 / 12%);
		--um-gray-900-a-3: rgb(0 0 0 / 20%);
		--um-gray-900-a-5: rgb(0 0 0 / 25%);
		--um-gray-900-a-6: rgb(0 0 0 / 28%);
		--um-gray-900-a-8: rgb(0 0 0 / 30%);
		--um-gray-900-a-10: rgb(0 0 0 / 34%);
		--um-gray-900-a-14: rgb(0 0 0 / 38%);
		--um-gray-900-a-18: rgb(0 0 0 / 42%);
	}
}

/* Directory cards, buttons and filters (UM 3 markup). */
.um .um-box,
.um-directory .um-member,
.um-members-wrapper .um-member {
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	border-radius: var(--ms-radius) !important;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	box-shadow: var(--ms-site-shadow);
}

.um :is(.um-member-name, .um-member-name a) {
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: none;
}

.um :is(.um-member-tagline, .um-members-counter, .um-count-followers, .um-count-following, .um-count-friends) {
	color: var(--wp--preset--color--accent-4) !important;
}

.um :is(.um-button, .um-link-button):not([class*="um-button-link"]) {
	border-radius: 999px !important;
	font-weight: 600;
}

/*
 * Inline actions (Like, Reply, Comments, Show likes) read as text links: no fill, no
 * pill, body-sized text in the muted colour, accent on hover.
 */
.um :is(a, button).um-button[class*="um-button-link"] {
	min-height: 0 !important;
	padding: 4px 6px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--accent-4) !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

.um :is(a, button).um-button[class*="um-button-link"]:hover,
.um :is(a, button).um-button[class*="um-button-link"].um-toggle-button-active,
.um :is(a, button).um-button[class*="um-button-link"].active {
	background: transparent !important;
	color: var(--ms-accent) !important;
}

.um :is(a, button).um-button[class*="um-button-link"] :is(svg, i) {
	width: 18px;
	height: 18px;
	color: currentcolor;
}

.um .um-activity-post-likes-count,
.um .um-wall-post-likes-count {
	min-width: 0;
	padding: 0 4px;
	border: 0 !important;
	background: transparent !important;
	color: var(--wp--preset--color--accent-4) !important;
	font-size: 0.875rem;
}

.um :is(.um-activity-comment-form, .um-wall-comment-form) .um-button.um-button-primary,
.um .um-wall-post.um-button-primary {
	min-height: 0;
	padding: 6px 16px !important;
	font-size: 0.875rem !important;
}

/*
 * Real-time notifications bell. The element carries the `.um` class, and UM core's
 * `.um:not(.um-not-responsive):not(.um-modal) { position: relative }` loads after the
 * notifications stylesheet, so the fixed bell dropped into the page flow at the very
 * bottom with `right: 24px` pushing it off the left edge. Pin it back to the corner.
 */
.um.um-notification-b {
	position: fixed !important;
	top: auto !important;
	right: max(16px, env(safe-area-inset-right)) !important;
	bottom: calc(20px + env(safe-area-inset-bottom)) !important;
	left: auto !important;
	z-index: 900;
	width: 52px !important;
	height: 52px !important;
	border: 1px solid var(--wp--preset--color--accent-6);
	background: var(--ms-accent) !important;
	color: var(--ms-accent-text) !important;
	box-shadow: 0 10px 30px rgb(0 0 0 / 30%);
}

.um.um-notification-b.left {
	right: auto !important;
	left: max(16px, env(safe-area-inset-left)) !important;
}

.um.um-notification-b svg {
	width: 24px;
	height: 24px;
	color: currentcolor;
}

.um.um-notification-b .um-notification-live-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	border: 2px solid var(--wp--preset--color--base);
	border-radius: 999px;
	background: #e11d48;
	color: #fff;
}

/*
 * The live notifications panel. UM gives it a hard-coded white ground and z-index 3,
 * so it opened as a white sheet sliding under the sticky header, which hid its title
 * and close button; on phones its 400px min-width ran off the screen.
 */
.um-notification-live-feed {
	z-index: 1000 !important;
	width: min(400px, 100vw) !important;
	min-width: 0 !important;
	border-left: 1px solid var(--wp--preset--color--accent-6) !important;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast);
	box-shadow: -24px 0 60px rgb(0 0 0 / 35%) !important;
}

.um-notification-live-feed .um-notification-shortcode .um-notification-header.um-notifications-sidebar {
	padding-top: 20px;
}

.um-notification-live-feed .um-notification-header-row {
	padding-inline: 24px !important;
}

.um-notification-live-feed .um-notification-header-row:last-child {
	border-bottom-color: var(--wp--preset--color--accent-6) !important;
}

.um-notification-shortcode .um-notification-sidebar-title {
	color: var(--wp--preset--color--contrast) !important;
	font-size: 1.125rem !important;
}

.um-notification-shortcode .um-notifications-filters .um-tab a {
	color: var(--wp--preset--color--accent-4) !important;
	text-decoration: none;
}

.um-notification-shortcode .um-notifications-filters .um-tab.um-tab-current a {
	color: var(--wp--preset--color--contrast) !important;
}

.um-notification-shortcode .um-notifications-list .um-notification {
	border-bottom: 1px solid var(--wp--preset--color--accent-6) !important;
	background: transparent;
	transition: background-color 0.15s ease;
}

.um-notification-shortcode .um-notifications-list .um-notification:hover {
	background: var(--wp--preset--color--accent-5);
}

.um-notification-shortcode .um-notification-content-string {
	color: var(--wp--preset--color--accent-4) !important;
}

.um-notification-shortcode .um-notification.unread .um-notification-content-string {
	color: var(--wp--preset--color--contrast) !important;
}

.um-notification-shortcode .um-notification-content-string :is(strong, b) {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.um-notification-shortcode .um-notification-content-inner :is(time, .um-supporting-text, span:not([class])) {
	color: var(--wp--preset--color--accent-4);
}

.um-notification-shortcode .um-notifications-is-unread-dot {
	background: var(--ms-accent) !important;
	border-color: var(--ms-accent) !important;
}

.um-notification-shortcode .um-notifications-none {
	color: var(--wp--preset--color--accent-4) !important;
}

/* UM dropdowns (notification and conversation actions) open on the page ground. */
.um-dropdown {
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	border-radius: 12px !important;
	background: var(--wp--preset--color--base) !important;
	box-shadow: 0 16px 40px rgb(0 0 0 / 35%) !important;
}

.um-dropdown :is(li a, li button) {
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: none;
}

.um-dropdown :is(li a, li button):hover {
	background: var(--wp--preset--color--accent-5) !important;
}

.um-dropdown :is(li a, li button).um-destructive {
	color: #f87171 !important;
}

.um-dropdown-toggle-dots,
.um-dropdown-toggle-dots svg {
	color: var(--wp--preset--color--accent-4);
}

/*
 * Private messages (UM Messaging profile tab). The wrapper, skeletons and the history
 * dividers are hard-coded white, the sent bubble is a pale lilac with black text, and
 * the site-wide field style boxed the textarea inside UM's own composer border.
 */
.um-private-messages-wrapper:not(.um-private-messages-no-conversations) {
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	border-radius: var(--ms-radius) !important;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--ms-site-shadow) !important;
}

.um-private-messages-wrapper .um-private-messages-overlay {
	border-radius: var(--ms-radius);
	background: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent) !important;
}

.um-private-messages-wrapper .um-private-messages-sidebar {
	border-right-color: var(--wp--preset--color--accent-6) !important;
}

.um-private-messages-wrapper .um-private-messages-sidebar-title {
	color: var(--wp--preset--color--contrast) !important;
}

.um-private-messages-wrapper .um-private-messages-conversations-count {
	border-color: var(--wp--preset--color--accent-6) !important;
	background: var(--wp--preset--color--accent-5) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.um-private-messages-conversations-search .um-button {
	min-height: 0 !important;
}

.um-private-messages-conversations-list .um-list-item {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	transition: background-color 0.15s ease;
}

.um-private-messages-conversations-list .um-list-item:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-5) 60%, transparent);
}

.um-private-messages-wrapper .um-private-messages-conversations-list.um-list .um-list-item.um-private-messages-current-conversation {
	background: var(--wp--preset--color--accent-5) !important;
	box-shadow: inset 3px 0 0 var(--ms-accent);
}

.um-private-messages-conversations-list .um-user-display-name,
.um-private-messages-conversation-view .um-private-messages-conversation-header .um-user-display-name {
	color: var(--wp--preset--color--contrast) !important;
	font-weight: 600;
	text-decoration: none;
}

.um-private-messages-wrapper .um-private-messages-conversations-list.um-list .um-list-item :is(.um-private-messages-conversation-time, .um-private-messages-conversation-last-message) {
	color: var(--wp--preset--color--accent-4) !important;
}

.um-private-messages-conversation-is-new-dot {
	background: var(--ms-accent) !important;
	border-color: var(--ms-accent) !important;
}

.um-private-messages-conversation-view .um-private-messages-conversation-header {
	border-bottom-color: var(--wp--preset--color--accent-6) !important;
}

.um-private-messages-conversation-view .um-private-messages-conversation-body :is(.um-private-messages-conversation-history-before, .um-private-messages-conversation-history-after),
.um-private-messages-conversation-view.um-skeleton-mode .um-skeleton-base,
.um-modal.um-messaging-conversation-modal .um-modal-body {
	background: var(--wp--preset--color--base) !important;
}

.um-private-messages-conversation-view.um-skeleton-mode .um-skeleton-base .um-message-item .um-message-item-content {
	background: var(--wp--preset--color--accent-5) !important;
}

.um-private-messages-conversation-view .um-message-item .um-message-display-name :is(a, .um-link) {
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: none;
}

.um-private-messages-conversation-view .um-message-item .um-private-messages-time {
	color: var(--wp--preset--color--accent-4) !important;
}

.um-private-messages-conversation-view .um-private-messages-conversation-body .um-message-item.left_m .um-message-item-data .um-message-item-content {
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	border-radius: 4px 16px 16px 16px !important;
	background: var(--wp--preset--color--accent-5) !important;
}

.um-private-messages-conversation-view .um-private-messages-conversation-body .um-message-item.left_m .um-message-item-content-text {
	color: var(--wp--preset--color--contrast) !important;
}

.um-private-messages-conversation-view .um-private-messages-conversation-body .um-message-item.right_m .um-message-item-data .um-message-item-content {
	border: 1px solid var(--ms-accent) !important;
	border-radius: 16px 4px 16px 16px !important;
	background: var(--ms-accent) !important;
}

.um-private-messages-conversation-view .um-private-messages-conversation-body .um-message-item.right_m .um-message-item-content-text {
	color: var(--ms-accent-text) !important;
}

.um-private-messages-conversation-view .um-private-messages-conversation-body .um-message-item.right_m .um-message-item-status {
	color: color-mix(in srgb, var(--ms-accent-text) 70%, transparent) !important;
}

.um-private-messages-conversation-view .um-messaging-message-reactions :is(.um-message-item-react, .um-messaging-reaction) {
	border-color: var(--wp--preset--color--accent-6) !important;
	background: var(--wp--preset--color--accent-5) !important;
	color: var(--wp--preset--color--contrast);
}

.um-private-messages-conversation-view .um-private-messages-conversation-footer .um-private-messages-conversation-footer-inner {
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	border-radius: 14px !important;
	background: var(--wp--preset--color--base);
}

.um-private-messages-conversation-view .um-private-messages-conversation-footer .um-private-messages-conversation-footer-inner:focus-within {
	border-color: var(--ms-accent) !important;
}

.wp-site-blocks .um-private-messages-conversation-view .um-private-messages-conversation-footer-inner textarea.um-message-textarea {
	min-height: 2.5rem;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--contrast) !important;
}

.um-private-messages-conversation-view .um-message-limit {
	color: var(--wp--preset--color--accent-4) !important;
}

.um-private-messages-conversation-view .um-message-buttons .um-button:not([class*="um-button-link"]) {
	min-height: 0 !important;
	padding: 6px 18px !important;
	font-size: 0.875rem !important;
}

.um-message-unreaditems {
	background-color: #e11d48 !important;
}

/* ─── WooCommerce buttons: compact on product grids and the cart ─────────── */

:is(.wc-block-product-template, .wp-block-woocommerce-product-collection, .wc-block-grid, ul.products, .wp-block-woocommerce-cart, .wp-block-woocommerce-empty-cart-block) .wp-element-button,
.wc-block-components-product-button__button {
	width: auto !important;
	min-height: 0 !important;
	padding: 0.5rem 1.1rem !important;
	font-size: 0.875rem !important;
	line-height: 1.3 !important;
	white-space: nowrap;
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	font-size: 1rem !important;
	padding: 0.75rem 1.25rem !important;
}

.wc-block-components-product-button {
	justify-content: center;
}

.woocommerce-ordering select,
.wc-block-catalog-sorting select,
.wp-block-woocommerce-catalog-sorting select {
	padding: 0.45rem 2rem 0.45rem 0.85rem;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.875rem;
}

.um :is(.um-button-secondary-gray, .um-button-tertiary-gray, .um-pagination-item) {
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
}

.um :is(.um-button-secondary-gray, .um-button-tertiary-gray, .um-pagination-item):hover,
.um .um-pagination-item.current {
	background: var(--wp--preset--color--accent-5) !important;
}

.um .um-member-action-buttons {
	gap: 0.5rem;
}

.um :is(.choices__inner, .choices__input, .choices__list--dropdown, .choices__list[aria-expanded]) {
	border-color: var(--wp--preset--color--accent-6) !important;
	border-radius: 12px !important;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.um .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background: var(--wp--preset--color--accent-5) !important;
}

.um .choices__list--multiple .choices__item {
	border-color: var(--ms-accent) !important;
	background: var(--ms-accent) !important;
	color: var(--ms-accent-text) !important;
}

.um :is(.um-skeleton-box, .um-skeleton-box-header, .um-skeleton-box-avatar) {
	background: var(--wp--preset--color--accent-5) !important;
}

/* The UM login and register forms cap themselves at 450px; centre them in their card. */
.ms-feature-card .um,
.ms-feature-card .um-form-new {
	margin-inline: auto !important;
}

.wp-block-column.ms-feature-card {
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* ─── Header details ─────────────────────────────────────────────────────── */

html,
body {
	overflow-x: clip;
}

.ms-site-header,
.ms-site-header .ms-megamenu__trigger,
.ms-site-header .ms-megamenu__item-link,
.ms-site-header .ms-megamenu__toggle {
	color: var(--wp--preset--color--contrast);
}

.ms-site-header .ms-megamenu__trigger:hover,
.ms-site-header .ms-megamenu__item-link:hover {
	color: var(--ms-accent);
}

/* The logo lockup is dark artwork; flip it to light in dark mode. */
:root[data-ms-theme="dark"] .wp-block-site-logo img,
:root[data-ms-theme="dark"] .ms-site-footer .wp-block-site-logo img {
	filter: invert(1) hue-rotate(180deg) brightness(1.1);
}

@media (prefers-color-scheme: dark) {

	:root:not([data-ms-theme="light"]) .wp-block-site-logo img {
		filter: invert(1) hue-rotate(180deg) brightness(1.1);
	}
}

/*
 * Header actions share one compact size: 34px controls, 18px icons, a 30px avatar and
 * 16px count badges. The search button is a themed `wp-element-button`, so the global
 * button padding pushed its icon off centre; it is a centred grid cell here.
 */
.ms-site-header .ms-header-actions {
	--ms-header-control: 2.125rem;
	--ms-header-icon: 18px;
	align-items: center;
	gap: 0.375rem;
}

.ms-site-header .wp-block-search__inside-wrapper {
	align-items: center;
}

.ms-site-header .wp-block-search__button,
.ms-site-header .ms-theme-toggle__button,
.ms-site-header .ms-user-menu__shortcut,
.ms-site-header .wc-block-mini-cart__button {
	display: grid !important;
	place-items: center;
	box-sizing: border-box;
	width: var(--ms-header-control) !important;
	min-width: 0 !important;
	height: var(--ms-header-control) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: inherit !important;
	line-height: 1;
}

.ms-site-header .wp-block-search__button,
.ms-site-header .ms-theme-toggle__button {
	border: 1px solid var(--wp--preset--color--accent-6) !important;
}

.ms-site-header :is(.ms-user-menu__shortcut, .wc-block-mini-cart__button) {
	border: 0 !important;
}

.ms-site-header :is(.wp-block-search__button, .ms-user-menu__shortcut, .wc-block-mini-cart__button):hover,
.ms-site-header .ms-theme-toggle__button:hover {
	background: var(--wp--preset--color--accent-5) !important;
}

.ms-site-header :is(.wp-block-search__button, .ms-theme-toggle__button, .ms-user-menu__shortcut, .wc-block-mini-cart__button) svg {
	display: block;
	width: var(--ms-header-icon) !important;
	min-width: 0 !important;
	height: var(--ms-header-icon) !important;
	min-height: 0 !important;
	margin: 0 !important;
}

.ms-site-header .wp-block-search__button svg {
	fill: currentcolor;
}

/* Core's search and Woo's cart glyphs sit small inside their boxes; give them more room. */
.ms-site-header :is(.wp-block-search__button, .wc-block-mini-cart__button) svg {
	width: 22px !important;
	height: 22px !important;
}

@media (max-width: 600px) {

	.ms-site-header .ms-user-menu__shortcut {
		display: none !important;
	}
}

.ms-site-header :is(.ms-theme-toggle__sun, .ms-theme-toggle__moon) {
	align-items: center;
	justify-content: center;
}

.ms-site-header .wc-block-mini-cart__quantity-badge {
	position: relative;
	display: grid;
	place-items: center;
}

/* Count badges: the mini-cart's defaults are a white pill with the block's green text. */
.ms-site-header .wc-block-mini-cart__badge,
.ms-site-header .ms-user-menu__badge {
	position: absolute;
	top: -6px !important;
	right: -8px !important;
	left: auto !important;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	min-width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	padding: 0 4px !important;
	border: 2px solid var(--wp--preset--color--base) !important;
	border-radius: 999px;
	background: #e11d48 !important;
	color: #fff !important;
	font-size: 0.5625rem !important;
	font-weight: 700;
	line-height: 1 !important;
	transform: none !important;
}

.ms-site-header .wc-block-mini-cart__badge[hidden] {
	display: none;
}

.ms-site-header .ms-user-menu__shortcut .ms-user-menu__badge {
	top: 1px !important;
	right: -1px !important;
}

.ms-site-header .ms-user-menu {
	gap: 0.375rem;
}

.ms-site-header .ms-user-menu__account .ms-avatar {
	width: 30px !important;
	height: 30px !important;
}

.ms-user-menu__signin,
.ms-user-menu__join {
	white-space: nowrap;
}

/* Six top-level items fit on one row at laptop widths only at a nav-sized font. */
.ms-site-header .ms-megamenu__list {
	flex-wrap: nowrap;
	column-gap: 0.25rem;
}

.ms-site-header .ms-megamenu__trigger,
.ms-site-header .ms-megamenu__item-link {
	font-size: 0.9375rem;
	white-space: nowrap;
}

@media (max-width: 1280px) {

	.ms-site-header .ms-megamenu__trigger,
	.ms-site-header .ms-megamenu__item-link {
		font-size: 0.875rem;
		padding-inline: 0.5rem;
	}
}

@media (max-width: 600px) {

	.ms-site-header .ms-user-menu__signin,
	.ms-site-header .wp-block-woocommerce-mini-cart {
		display: none;
	}
}

/*
 * Phones: the logo, the Menu button and the Join pill together were wider than the row,
 * and a nowrap row does not wrap — it overflows, which is why the pill sat on top of
 * "Menu". Everything here buys that width back.
 */
@media (max-width: 782px) {

	.ms-site-header .wp-block-search,
	.ms-site-header .wp-block-memberside-blocks-theme-toggle {
		display: none;
	}

	.ms-site-header {
		padding-inline: 1rem !important;
	}

	.ms-site-header > .wp-block-group > .wp-block-group {
		gap: 0.75rem !important;
	}

	.ms-site-header .wp-block-site-logo img {
		max-height: 24px;
	}

	.ms-site-header .ms-header-actions {
		gap: 0.35rem;
	}

	.ms-site-header :is(.ms-user-menu, .ms-megamenu, .ms-megamenu__toggle) {
		min-width: 0;
	}

	.ms-megamenu[data-ms-mode="mobile"] .ms-megamenu__toggle {
		padding: 6px 12px;
		font-size: 0.9375rem;
	}

	.ms-user-menu__join {
		min-height: 2rem;
		padding: 0.35rem 0.85rem;
		font-size: 0.8125rem;
	}
}

/* ─── Alignment and lists ────────────────────────────────────────────────── */

.ms-center {
	text-align: center;
}

p.ms-eyebrow {
	display: flex;
	width: fit-content;
}

p.ms-eyebrow.ms-center {
	margin-inline: auto;
}

.ms-section-head:has(.ms-center) {
	text-align: center;
}

.ms-link-list {
	padding-left: 0;
	list-style: none;
}

.ms-link-list li + li {
	margin-top: 0.35rem;
}

.ms-check-list {
	padding-left: 0;
	list-style: none;
}

.ms-check-list li {
	position: relative;
	padding-left: 1.75rem;
}

.ms-check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #22c55e;
	font-weight: 700;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--contrast);
}

.wp-block-table.is-style-stripes {
	border-bottom-color: var(--wp--preset--color--accent-6);
}

.ms-pricing__cta .ms-button,
.ms-demo-login__button {
	font-size: 1rem;
}

/* ─── Every form control follows the palette ─────────────────────────────── */

/*
 * A catch-all so a plugin that ships its own white fields (Gravity Forms, ACF, JobBoardWP)
 * still matches the site. Scoped to content so it never touches the admin bar or the
 * header's own search.
 */
.wp-site-blocks :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.wp-block-search__input) {
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 12px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.9375rem;
}

.wp-site-blocks :is(input, select, textarea)::placeholder {
	color: var(--wp--preset--color--accent-4);
	opacity: 1;
}

.wp-site-blocks :is(input, select, textarea):focus {
	border-color: var(--ms-accent);
	outline: 2px solid color-mix(in srgb, var(--ms-accent) 35%, transparent);
	outline-offset: 1px;
}

/* Native ticks, radios and the date picker's own widgets take the brand colour. */
.wp-site-blocks :is(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
	accent-color: var(--ms-accent);
}

/* Gravity Forms paints its own fields. */
.gform_wrapper :is(input, select, textarea):not([type="submit"]) {
	border-color: var(--wp--preset--color--accent-6) !important;
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.gform_wrapper :is(.gfield_label, .gform_description, .gfield_description) {
	color: var(--wp--preset--color--contrast) !important;
}

.gform_wrapper .gform_footer input[type="submit"] {
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--ms-accent) !important;
	color: var(--ms-accent-text) !important;
	padding: 0.6rem 1.25rem !important;
	font-weight: 600;
}

/* ─── Plugin text follows the palette ────────────────────────────────────── */

/*
 * Ultimate Member, ForumWP and JobBoardWP hard-code dark text and white fields, which
 * disappear on the dark palette. Their titles, labels and names take the theme's
 * contrast colour instead (so light mode is unchanged), and fields take the surface.
 */
:is(.um, .fmwp, .jb) :is(h1, h2, h3, h4, h5, label, legend, .um-field-label, .um-member-name, .um-member-name a, .um-name a, .fmwp-forum-title, .fmwp-forum-title a, .fmwp-topic-title a, .jb-job-title a) {
	color: var(--wp--preset--color--contrast) !important;
}

/*
 * Date and time inputs matter as much as text ones: UM paints `.um input[type="date"]`
 * white, which on the dark palette left the Birth Date field white-on-white.
 */
:is(.um, .fmwp, .jb) :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select, textarea) {
	border-color: var(--wp--preset--color--accent-6) !important;
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/*
 * Native date/time pickers draw their own chrome (the calendar button, the drop-down
 * panel, the spin buttons) from the colour scheme, not from CSS, so it has to be told.
 */
:root[data-ms-theme="dark"] .wp-site-blocks :is(input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"]) {
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {

	:root:not([data-ms-theme="light"]) .wp-site-blocks :is(input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"]) {
		color-scheme: dark;
	}
}

:is(.um, .fmwp, .jb) :is(.select2-selection, .select2-selection__rendered) {
	border-color: var(--wp--preset--color--accent-6) !important;
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}

:is(.um, .fmwp) a:is(.um-link, [class*="forgot"]):not(.um-link-button) {
	color: var(--ms-accent) !important;
}

/* Filled UM buttons keep their on-accent label; the link colour above must not reach them. */
.um :is(.um-link-button-primary, .um-button-primary),
.um :is(.um-link-button-primary, .um-button-primary) * {
	color: var(--um-primary-600-fg) !important;
}

/* Segmented controls (Grid / List) follow the outline style, with the current one filled. */
.um .um-buttons-group > :is(a, button, span, .um-button) {
	border-color: var(--wp--preset--color--accent-6) !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
}

.um .um-buttons-group > :is(.current, .active, [aria-pressed="true"], [aria-current]) {
	background: var(--wp--preset--color--accent-5) !important;
}

:root[data-ms-theme="dark"] :is(.um, .fmwp) img[src*="logo"] {
	filter: invert(1) hue-rotate(180deg) brightness(1.1);
}

@media (prefers-color-scheme: dark) {

	:root:not([data-ms-theme="light"]) :is(.um, .fmwp) img[src*="logo"] {
		filter: invert(1) hue-rotate(180deg) brightness(1.1);
	}
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */

.ms-site-footer a {
	color: inherit;
	text-decoration: none;
}

.ms-site-footer a:hover {
	color: var(--ms-accent);
}