/*
 * Bmmplay public typography layer
 * Mirrors the /demo reference: Inter/system sans, restrained forest accents,
 * readable body copy, a compact heading scale, and quiet metadata.
 */

:root {
	--kol-uds-canvas: #ffffff;
	--kol-uds-surface: #ffffff;
	--kol-uds-surface-muted: #f7f8f6;
	--kol-uds-text: #202722;
	--kol-uds-title: #111713;
	--kol-uds-muted: #667168;
	--kol-uds-border: #d6dcd7;
	--kol-uds-border-strong: #b9c4bb;
	--kol-uds-green: #4f765d;
	--kol-uds-green-strong: #3f624c;
	--kol-uds-shadow: var(--bmm-ui-card-shadow, 0 1px 2px rgba(24, 34, 26, 0.05), 0 6px 18px rgba(24, 34, 26, 0.035));
	--kol-uds-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html.dark-mode,
body.dark-mode,
body.bb-dark-mode,
body.buddyx-dark-theme,
html[data-theme="dark"],
body[data-theme="dark"] {
	--kol-uds-canvas: #151916;
	--kol-uds-surface: #1a1e1b;
	--kol-uds-surface-muted: #202521;
	--kol-uds-text: #e0e6e1;
	--kol-uds-title: #f4f7f4;
	--kol-uds-muted: #a9b3ab;
	--kol-uds-border: #343b35;
	--kol-uds-border-strong: #4a554c;
	--kol-uds-green: #81a78e;
	--kol-uds-green-strong: #98bba3;
}

html body:not(.wp-admin) {
	color: var(--kol-uds-text);
	font-family: var(--kol-uds-font) !important;
	font-size: 16px;
	line-height: 1.55;
}

html body:not(.wp-admin) :where(
	p,
	li,
	dt,
	dd,
	blockquote,
	figcaption,
	label,
	legend,
	input,
	select,
	textarea,
	button,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6
) {
	font-family: var(--kol-uds-font) !important;
}

html body:not(.wp-admin) :where(p, li, dt, dd, blockquote) {
	line-height: 1.55;
}

html body:not(.wp-admin) :where(h1, h2, h3, h4, h5, h6) {
	font-style: normal;
	letter-spacing: -0.018em;
	text-transform: none;
}

html body:not(.wp-admin) :where(h1, .entry-title):not([class*="hero__title"]):not([class*="hero-title"]) {
	color: var(--kol-uds-title) !important;
	font-size: clamp(2rem, 3vw, 2.375rem) !important;
	font-weight: 700 !important;
	line-height: 1.18 !important;
}

html body:not(.wp-admin) :where(h2):not([class*="hero__title"]):not([class*="hero-title"]) {
	color: var(--kol-uds-title) !important;
	font-size: clamp(1.375rem, 2vw, 1.5625rem) !important;
	font-weight: 700 !important;
	line-height: 1.18 !important;
}

html body:not(.wp-admin) :where(h3) {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
}

html body:not(.wp-admin) :where(h4, h5, h6) {
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

html body:not(.wp-admin) :where(small, figcaption, .description, .meta, .entry-meta, .activity-time-since) {
	color: var(--kol-uds-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
}

/* Blog discovery and category archives previously introduced a separate
 * newspaper type system. Bring them back to the approved demo hierarchy. */
.kol-blog-discover,
.kol-blog-discover--news,
.kol-category-archive {
	color: var(--kol-uds-text) !important;
	font-family: var(--kol-uds-font) !important;
}

.kol-blog-discover :where(a, p, span),
.kol-blog-discover--news :where(a, p, span),
.kol-category-archive :where(a, p, span) {
	font-family: var(--kol-uds-font) !important;
}

.kol-blog-discover-hero__eyebrow,
.kol-discover-news-masthead__eyebrow,
.kol-discover-news-card__kicker,
.kol-category-archive-masthead__eyebrow,
.kol-category-archive-card__kicker {
	color: var(--kol-uds-green) !important;
	font-size: 0.6875rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	line-height: 1.55 !important;
	text-transform: uppercase !important;
}

.kol-blog-discover-hero__title,
.kol-blog-discover-hero__slide--two .kol-blog-discover-hero__title {
	font-size: clamp(2rem, 3.2vw, 2.375rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em !important;
	line-height: 1.18 !important;
}

.kol-blog-discover-hero__body {
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.65 !important;
}

.kol-blog-discover-hero__button,
.kol-discover-news-masthead__aside a,
.kol-discover-card-cta,
.kol-category-archive-load-more {
	font-size: 0.8125rem !important;
	font-weight: 750 !important;
	letter-spacing: 0 !important;
}

.kol-discover-hero-categories span,
.kol-discover-hero-categories__scroller a,
.kol-discover-category-strip span,
.kol-discover-category-strip a {
	color: var(--kol-uds-text) !important;
	font-family: var(--kol-uds-font) !important;
	font-size: 0.8125rem !important;
	font-weight: 650 !important;
	letter-spacing: 0 !important;
	line-height: 1.55 !important;
}

.kol-discover-hero-categories span,
.kol-discover-category-strip span {
	color: var(--kol-uds-green-strong) !important;
	font-weight: 800 !important;
}

html body:not(.wp-admin) .kol-discover-news-masthead h2,
html body:not(.wp-admin) .kol-category-archive-masthead h1 {
	font-size: clamp(2rem, 3.2vw, 2.375rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em !important;
	line-height: 1.18 !important;
}

.kol-discover-news-masthead__dek,
.kol-category-archive-masthead p:last-child {
	color: var(--kol-uds-muted) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
}

.kol-discover-news-masthead__aside p {
	color: var(--kol-uds-muted) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
}

html body:not(.wp-admin) .kol-discover-top-story__rail > h2,
html body:not(.wp-admin) .kol-category-archive-lead__rail > h2,
html body:not(.wp-admin) .kol-discover-news-section__header h2 {
	border-color: var(--kol-uds-green) !important;
	color: var(--kol-uds-title) !important;
	font-family: var(--kol-uds-font) !important;
	font-size: 1.5625rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.018em !important;
	line-height: 1.18 !important;
}

.kol-discover-news-section__header p,
.kol-discover-news-section__header a {
	color: var(--kol-uds-green) !important;
	font-size: 0.75rem !important;
	font-weight: 750 !important;
}

html body:not(.wp-admin) .kol-discover-news-card h3,
html body:not(.wp-admin) .kol-category-archive-card h2 {
	color: var(--kol-uds-title) !important;
	font-family: var(--kol-uds-font) !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.015em !important;
	line-height: 1.25 !important;
}

.kol-discover-news-card h3 a,
.kol-category-archive-card h2 a {
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

.kol-discover-news-card h3 a:hover,
.kol-discover-news-card h3 a:focus,
.kol-category-archive-card h2 a:hover,
.kol-category-archive-card h2 a:focus {
	color: var(--kol-uds-green-strong) !important;
}

html body:not(.wp-admin) .kol-discover-news-card--lead h3,
html body:not(.wp-admin) .kol-category-archive-lead__main .kol-category-archive-card h2 {
	font-size: clamp(1.75rem, 3vw, 2.375rem) !important;
	line-height: 1.15 !important;
}

html body:not(.wp-admin) .kol-discover-news-card--feature h3 {
	font-size: 1.5rem !important;
	line-height: 1.22 !important;
}

html body:not(.wp-admin) .kol-discover-news-card--compact h3,
html body:not(.wp-admin) .kol-discover-news-card--headline h3,
html body:not(.wp-admin) .kol-category-archive-lead__rail .kol-category-archive-card h2 {
	font-size: 1.0625rem !important;
	line-height: 1.3 !important;
}

.kol-discover-news-card p,
.kol-discover-news-card--lead p,
.kol-discover-news-card--compact p,
.kol-category-archive-card__body > p:not(.kol-category-archive-card__kicker) {
	color: var(--kol-uds-text) !important;
	font-size: 0.9375rem !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
}

.kol-discover-news-card__meta,
.kol-category-archive-card__meta,
.kol-discover-news-card__meta a,
.kol-category-archive-card__meta a {
	color: var(--kol-uds-muted) !important;
	font-family: var(--kol-uds-font) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
}

.kol-discover-top-story__rail .kol-discover-news-card--headline {
	background: var(--kol-uds-surface);
	border: 1px solid var(--kol-uds-border) !important;
	border-radius: 5px;
	box-shadow: var(--kol-uds-shadow);
	margin-bottom: 12px;
	padding: 12px;
}

/* Theme sidebars
 * Match the demo's off-white columns and compact, flat white panels without
 * changing feature-specific sidebars such as Music Charts. */
body:not(.wp-admin) :is(.left-sidebar.widget-area, .primary-sidebar.widget-area) {
	background: var(--kol-uds-surface-muted) !important;
	color: var(--kol-uds-text) !important;
}

html body:not(.wp-admin) #page .site-wrapper :is(.left-sidebar.widget-area, .primary-sidebar.widget-area) {
	background: var(--kol-uds-surface-muted) !important;
}

body:not(.wp-admin) :is(.left-sidebar.widget-area, .primary-sidebar.widget-area) > .sticky-sidebar {
	background: transparent !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	padding: 0 !important;
}

html body:not(.wp-admin) .site-wrapper :is(.left-sidebar.widget-area, .primary-sidebar.widget-area) > .sticky-sidebar {
	align-items: stretch !important;
	padding: 0 !important;
}

body:not(.wp-admin) :is(.left-sidebar.widget-area, .primary-sidebar.widget-area) .widget {
	background: var(--kol-uds-surface) !important;
	border: 1px solid var(--kol-uds-border) !important;
	border-radius: 5px !important;
	box-shadow: none !important;
	color: var(--kol-uds-text) !important;
	margin: 0 !important;
	padding: 14px !important;
}

html body:not(.wp-admin) #page .site-wrapper :is(.left-sidebar.widget-area, .primary-sidebar.widget-area) > .sticky-sidebar > .widget {
	background: var(--kol-uds-surface) !important;
	border-color: var(--kol-uds-border) !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	color: var(--kol-uds-text) !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

body:not(.wp-admin) :is(.left-sidebar.widget-area, .primary-sidebar.widget-area) .widget-title {
	background: var(--kol-uds-surface) !important;
	border-bottom: 1px solid var(--kol-uds-border) !important;
	color: var(--kol-uds-title) !important;
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.012em !important;
	line-height: 1.18 !important;
	margin: -14px -14px 14px !important;
	padding: 13px 14px !important;
}

body:not(.wp-admin) :is(.left-sidebar.widget-area, .primary-sidebar.widget-area) .widget :where(p, li) {
	font-size: 0.8125rem;
	line-height: 1.55;
}

body:not(.wp-admin) .left-sidebar #bp_buddyx_bp_login_widget-1 {
	overflow: hidden;
	padding: 0 !important;
}

body:not(.wp-admin) .left-sidebar #bp_buddyx_bp_login_widget-1 .title {
	background: var(--kol-uds-surface-muted) !important;
	border-bottom: 1px solid var(--kol-uds-border) !important;
	color: var(--kol-uds-title) !important;
	font-size: 0.875rem !important;
	font-weight: 750 !important;
	line-height: 1.25 !important;
	margin: 0 !important;
	padding: 11px 14px !important;
}

body:not(.wp-admin) .left-sidebar #bp_buddyx_bp_login_widget-1 .buddyx-sign-form {
	background: var(--kol-uds-surface) !important;
	color: var(--kol-uds-text) !important;
	padding: 14px !important;
}

body:not(.wp-admin) .left-sidebar #bp_buddyx_bp_login_widget-1 :where(.control-label, .kol-social-compact-title) {
	color: var(--kol-uds-text) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}

body:not(.wp-admin) .left-sidebar #bp_buddyx_bp_login_widget-1 input.form-control {
	background: var(--kol-uds-surface-muted) !important;
	border: 1px solid var(--kol-uds-border-strong, #b9c4bb) !important;
	border-radius: 3px !important;
	box-shadow: inset 0 1px 1px rgba(18, 23, 19, 0.04) !important;
	color: var(--kol-uds-text) !important;
	font-size: 0.875rem !important;
	min-height: 40px !important;
	padding: 8px 10px !important;
}

body:not(.wp-admin) .left-sidebar #bp_buddyx_bp_login_widget-1 input.form-control:-webkit-autofill,
body:not(.wp-admin) .left-sidebar #bp_buddyx_bp_login_widget-1 input.form-control:-webkit-autofill:hover,
body:not(.wp-admin) .left-sidebar #bp_buddyx_bp_login_widget-1 input.form-control:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--kol-uds-surface-muted) inset !important;
	-webkit-text-fill-color: var(--kol-uds-text) !important;
}

body:not(.wp-admin) .left-sidebar #bp_buddyx_bp_login_widget-1 .registration-login-submit {
	min-height: 38px !important;
}

body:not(.wp-admin) .left-sidebar #bp_buddyx_bp_login_widget-1 :where(.remember, .registar-lostpass-wrap) {
	font-size: 0.75rem !important;
	line-height: 1.45 !important;
}

body:not(.wp-admin) .left-sidebar #kol_footer_menu_widget-3 {
	font-size: 0.75rem !important;
	line-height: 1.65 !important;
}

body:not(.wp-admin) .left-sidebar #kol_footer_menu_widget-3 a {
	color: var(--kol-uds-green-strong) !important;
	font-weight: 650 !important;
}

body:not(.wp-admin) .primary-sidebar .kol-search-trending-hashtags-empty {
	color: var(--kol-uds-muted) !important;
	font-size: 0.8125rem !important;
	line-height: 1.55 !important;
	margin: 0 !important;
}

body:not(.wp-admin) .primary-sidebar .member-card-holographic-list {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 8px !important;
}

body:not(.wp-admin) .primary-sidebar .member-card-holographic-member {
	min-width: 0 !important;
	width: auto !important;
}

body:not(.wp-admin) .primary-sidebar .member-card-holographic-card {
	background: var(--kol-uds-surface-muted) !important;
	border: 1px solid var(--kol-uds-border) !important;
	border-radius: 5px !important;
	box-shadow: none !important;
	color: var(--kol-uds-text) !important;
	min-height: 94px !important;
	padding: 10px 8px !important;
}

body:not(.wp-admin) .primary-sidebar .member-card-holographic-avatar,
body:not(.wp-admin) .primary-sidebar .member-card-holographic-avatar img {
	border-color: var(--kol-uds-border-strong, #b9c4bb) !important;
}

body:not(.wp-admin) .primary-sidebar .member-card-holographic-name a {
	color: var(--kol-uds-green-strong) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}

@media (min-width: 1024px) {
	/* The demo uses a true edge-to-edge three-column shell. Override the
	 * child theme's 1336px reading-column cap on matching desktop pages. */
	html body:is(.has-sidebar-both, .has-buddypress-sidebar-both):not(.kol-myplace-profile-active) #page #bmp-route-root > .container {
		box-sizing: border-box !important;
		max-width: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: 100% !important;
	}

	html body:is(.has-sidebar-both, .has-buddypress-sidebar-both):not(.kol-myplace-profile-active) #page #bmp-route-root > .container > .site-wrapper {
		box-sizing: border-box !important;
		grid-template-columns: 260px minmax(0, 1fr) 260px !important;
		justify-content: stretch !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	body:not(.wp-admin) :is(.left-sidebar.widget-area, .primary-sidebar.widget-area) {
		align-self: stretch;
		box-sizing: border-box;
		padding: 18px 10px 30px !important;
	}
}

@media (max-width: 640px) {
	html body:not(.wp-admin) :where(h1, .entry-title):not([class*="hero__title"]):not([class*="hero-title"]),
	.kol-blog-discover-hero__title,
	.kol-blog-discover-hero__slide--two .kol-blog-discover-hero__title,
	html body:not(.wp-admin) .kol-discover-news-masthead h2,
	html body:not(.wp-admin) .kol-category-archive-masthead h1,
	html body:not(.wp-admin) .kol-discover-news-card--lead h3,
	html body:not(.wp-admin) .kol-category-archive-lead__main .kol-category-archive-card h2 {
		font-size: 2rem !important;
	}

	html body:not(.wp-admin) .kol-discover-news-card--feature h3 {
		font-size: 1.375rem !important;
	}
}

