/**
 * RECOMMENDED SITE CSS
 * 
 * DESCRIPTION:
 * Comprehensive CSS styling for all plugins (BuddyPress, WooCommerce, Events Calendar, CCM, etc.)
 * Uses CSS custom properties (--site-*) for colors, making it easy to customize per subsite.
 * Automatically loaded by buddyx-child theme via functions.php
 * 
 * WORKFLOW FOR EACH SUBSITE:
 * 1. Each subsite does NOT need to copy this entire file
 * 2. Instead, go to Customizer > Additional CSS
 * 3. Copy ONLY the :root and [data-bx-mode="dark"] sections (color variables)
 * 4. Use a preset from /web/app/themes/buddyx-child/ as a starting point:
 *    - buddyx-preset-*.css (for theme presets like Cool, Dark, Pastel, etc.)
 *    - site-*.css (for production site colors like dcrand, lirando, etc.)
 * 5. Paste just those sections, modify hex colors as needed for your subsite branding
 * 6. All other CSS rules automatically apply from this theme-loaded file
 * 
 * DARK MODE:
 * Respects BuddyX's data-bx-mode attribute toggle. Light/dark color overrides work automatically.
 * Fallback: @media (prefers-color-scheme: dark) for systems without BuddyX toggle.
 */

/* ═══════════════════════════════════════════════════════════════
   COLOR VARIABLES - Light Mode Default
═══════════════════════════════════════════════════════════════ */
:root {
	--site-bg-primary: #ffffff;
	--site-bg-secondary: #f5f5f5;
	--site-bg-tertiary: #eeeeee;
	--site-text-primary: #1a1a1a;
	--site-text-secondary: #333333;
	--site-text-muted: #666666;
	--site-border: #dddddd;
	--site-input-bg: #ffffff;
	--site-input-border: #cccccc;
	--site-accent: #3C3C3C;
	--site-accent-hover: #d62828;
	--site-disabled-bg: #e0e0e0;
	--site-disabled-text: #999999;
	--site-disabled-icon: rgba(102, 102, 102, 0.25);
}

/* Dark mode - overrides when dark mode is active */
[data-bx-mode="dark"] {
	--site-bg-primary: #0a0a0a;
	--site-bg-secondary: #1a1a1a;
	--site-bg-tertiary: #262626;
	--site-text-primary: #fafafa;
	--site-text-secondary: #e0e0e0;
	--site-text-muted: #b3b3b3;
	--site-border: #333333;
	--site-input-bg: #0f0f0f;
	--site-input-border: #2a2a2a;
	--site-accent: #f87171;
	--site-accent-hover: #d62828;
	--site-disabled-bg: #484848;
	--site-disabled-text: #acacac;
	--site-disabled-icon: rgba(179, 179, 179, 0.25);
}

/* Fallback for system preference */
@media (prefers-color-scheme: dark) {
	:root:not([data-bx-mode="light"]) {
		--site-bg-primary: #0a0a0a;
		--site-bg-secondary: #1a1a1a;
		--site-bg-tertiary: #262626;
		--site-text-primary: #fafafa;
		--site-text-secondary: #e0e0e0;
		--site-text-muted: #b3b3b3;
		--site-border: #333333;
		--site-input-bg: #0f0f0f;
		--site-input-border: #2a2a2a;
		--site-accent: #f87171;
		--site-accent-hover: #d62828;
		--site-disabled-bg: #484848;
		--site-disabled-icon: rgba(179, 179, 179, 0.25);
		--site-disabled-text: #acacac;
	}
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL LAYOUT & TYPOGRAPHY
═══════════════════════════════════════════════════════════════ */
html,
body,
#page,
#content,
.site,
.site-content,
#primary,
#main,
.site-wrapper {
	background-color: var(--site-bg-primary);
	color: var(--site-text-primary);
}

.site-header {
	background-color: var(--site-bg-secondary);
	color: var(--site-text-primary);
}

.entry-content,
.entry-content p,
.entry-content li,
.entry-content label,
.site-main h1,
.site-main h2,
.site-main h3,
.site-main h4,
.site-main h5,
.site-main h6 {
	color: var(--site-text-primary);
}

.entry-content a {
	color: var(--site-accent);
	text-decoration: none;
}

a {
	color: var(--site-accent);
}

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

/* ═══════════════════════════════════════════════════════════════
   SITE BRANDING
═══════════════════════════════════════════════════════════════ */
.site-branding .site-title,
.site-branding .site-title a {
	color: var(--site-text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.site-footer .widget a {
	color: var(--site-accent);
}

.site-footer .widget,
.site-footer .widget p,
.site-footer .widget strong {
	color: var(--site-text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   BUDDYPRESS / BUDDYBOSS / BBPRESS
═══════════════════════════════════════════════════════════════ */
.buddypress-wrap:not(.bp-vertical-navs) .item-body {
	background: var(--site-bg-primary);
	color: var(--site-text-primary);
}

.buddypress-wrap .item-body,
.buddypress-wrap .item-body h2,
.buddypress-wrap .item-body h3,
.buddypress-wrap .item-body td,
.buddypress-wrap .bp-tables-user tr.alt td {
	background: var(--site-bg-primary);
	color: var(--site-text-primary);
}

.item-body h2,
.item-body h3 {
	color: var(--site-text-primary);
}

.profile.public h2,
.profile.public h3 {
	color: var(--site-text-primary);
}

#bbpress-forums ul.odd,
#bbpress-forums ul.even {
	background: var(--site-bg-secondary);
	color: var(--site-text-primary);
}

.bp-navs {
	background: var(--site-bg-primary);
}

@media screen and (max-width: 46.8em) {
	.buddypress-wrap:not(.bp-single-vert-nav) .bp-navs:not(.bp-subnavs) li {
		background: var(--site-bg-primary);
		border-color: var(--site-border);
	}
}

.buddypress-wrap ul.subnav {
	background: var(--site-bg-secondary);
	border-color: var(--site-bg-secondary);
}

#bbpress-forums li.bbp-header {
	background-color: var(--site-bg-tertiary);
}

#bbpress-forums div.even {
	background-color: var(--site-bg-primary);
}

#bbpress-forums div.bbp-forum-header,
#bbpress-forums div.bbp-reply-header,
#bbpress-forums div.bbp-topic-header,
#bbpress-forums div.odd,
#bbpress-forums fieldset.bbp-form,
#bbpress-forums li.bbp-header,
#bbpress-forums ul.odd,
.widgetable .bbp-logged-in,
.widgetable .bbp-login-form {
	background-color: var(--site-bg-tertiary);
}

.bbp-reply-form {
	background: var(--site-bg-primary);
}

.bbp-reply-form #whats-new-toolbar .medium-editor-toolbar,
.bbp-topic-form #whats-new-toolbar .medium-editor-toolbar {
	background: var(--site-bg-primary);
}

#bp-message-thread-list {
	background: var(--site-bg-primary);
}

#bp-message-thread-list li {
	background: var(--site-bg-tertiary);
}

.bp-messages-content #bp-message-content .medium-editor-toolbar {
	background-color: var(--site-bg-primary);
}

.bp-messages-content #bp-message-content .medium-editor-toolbar .medium-editor-toolbar-actions button {
	color: var(--site-text-muted);
}

.buddypress-wrap .media_search.media_search,
.buddypress-wrap form.bp-dir-search-form,
.buddypress-wrap form.bp-invites-search-form,
.buddypress-wrap form.bp-messages-search-form {
	background-color: var(--site-bg-primary);
}

#bbpress-forums .status-spam.even,
#bbpress-forums .status-trash.even {
	background-color: rgba(212, 39, 40, 0.1);
}

.buddypress-wrap .grid-filters {
	background-color: var(--site-bg-primary);
}

.buddypress-wrap ul.bp-list.groups-dir-list:not(.grid) .item-entry .list-wrap {
	background: var(--site-bg-primary);
}

.buddypress-wrap .friends-mutual-list:not(.grid) .list-wrap,
.buddypress-wrap .members-list:not(.grid) .list-wrap {
	background: var(--site-bg-primary);
}

.bp-list>li .list-wrap {
	background: var(--site-bg-primary);
}

/* Form inputs */
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=range],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
textarea {
	color: var(--site-text-primary);
	border: 1px solid var(--site-input-border);
	background: var(--site-input-bg);
}

input[type=color]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=datetime]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=range]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
textarea:focus {
	color: var(--site-text-primary);
	background: var(--site-input-bg);
}

#whats-new-form,
.bp-nouveau-activity-form-placeholder- {
	background-color: var(--site-bg-primary);
}

#whats-new-formatting-toolbar .bb-icon,
#whats-new-formatting-toolbar [class*=" bb-icon-"],
#whats-new-messages-toolbar .bb-icon,
#whats-new-messages-toolbar [class*=" bb-icon-"],
#whats-new-toolbar .bb-icon,
#whats-new-toolbar [class*=" bb-icon-"],
.ac-reply-toolbar .bb-icon,
.ac-reply-toolbar [class*=" bb-icon-"] {
	color: var(--site-text-muted);
}

.activity-update-form .bb-model-header,
.bp-nouveau-activity-form-placeholder- .bb-model-header {
	background-color: var(--site-bg-primary);
}

.activity-update-form.modal-popup,
.bp-nouveau-activity-form-placeholder-.modal-popup {
	background-color: rgba(20, 20, 22, 0.92);
}

.buddypress-wrap .profile.edit .editfield {
	background: var(--site-bg-primary);
	color: var(--site-text-primary);
	border-color: var(--site-bg-secondary);
}

.buddypress-wrap .current-visibility-level {
	color: var(--site-text-muted);
}

.buddypress-wrap .select-wrap {
	background-color: var(--site-bg-primary);
}

.activity-list.bp-list .activity-item {
	background-color: var(--site-bg-primary);
}

div#buddypress .activity-read-more a {
	background-color: var(--site-bg-secondary);
}

.activity-list .activity-item .activity-meta.action .button {
	background-color: var(--site-bg-secondary);
	color: rgba(255, 255, 255, .6);
}

body .buddypress-wrap .subnav-filters .component-filters select,
body .buddypress-wrap .subnav-filters .last select {
	background-color: var(--site-bg-primary);
}

.activity-list li.bbp_reply_create .activity-content .activity-inner .activity-discussion-title-wrap,
.activity-list li.bbp_topic_create .activity-content .activity-inner .activity-discussion-title-wrap {
	background-color: var(--site-bg-primary);
}

.activity-list li.bbp_reply_create .bb-content-inr-wrap,
.activity-list li.bbp_topic_create .bb-content-inr-wrap {
	background-color: var(--site-bg-secondary);
}

.activity-list li.bbp_reply_create .activity-content .activity-inner .activity-discussion-title-wrap a,
.activity-list li.bbp_reply_create .activity-content .activity-inner .bb-post-title a,
.activity-list li.bbp_topic_create .activity-content .activity-inner .activity-discussion-title-wrap a,
.activity-list li.bbp_topic_create .activity-content .activity-inner .bb-post-title a,
.activity-list li.blogs .activity-content .activity-inner .activity-discussion-title-wrap a,
.activity-list li.blogs .activity-content .activity-inner .bb-post-title a {
	color: var(--site-text-secondary);
}

.buddypress-wrap .standard-form .groups-members-search input[type=search],
.buddypress-wrap .standard-form .groups-members-search input[type=text],
.buddypress-wrap .standard-form [data-bp-search] input[type=search],
.buddypress-wrap .standard-form [data-bp-search] input[type=text],
.buddypress-wrap .standard-form input[type=color],
.buddypress-wrap .standard-form input[type=date],
.buddypress-wrap .standard-form input[type=datetime-local],
.buddypress-wrap .standard-form input[type=datetime],
.buddypress-wrap .standard-form input[type=email],
.buddypress-wrap .standard-form input[type=month],
.buddypress-wrap .standard-form input[type=number],
.buddypress-wrap .standard-form input[type=password],
.buddypress-wrap .standard-form input[type=range],
.buddypress-wrap .standard-form input[type=search],
.buddypress-wrap .standard-form input[type=tel],
.buddypress-wrap .standard-form input[type=text],
.buddypress-wrap .standard-form input[type=time],
.buddypress-wrap .standard-form input[type=url],
.buddypress-wrap .standard-form input[type=week],
.buddypress-wrap .standard-form select,
.buddypress-wrap .standard-form textarea {
	background: var(--site-bg-primary);
	color: var(--site-text-primary);
}

.buddypress-wrap .standard-form.profile-edit input:focus {
	background: var(--site-bg-secondary);
	color: var(--site-text-primary);
}

.main-notification-settings thead .title,
.main-notification-settings .email:last-child {
	background-color: var(--site-bg-primary);
	color: var(--site-text-primary);
}

.comment-list,
.comment-list ol,
.comment-list li,
.comment-respond {
	background: var(--site-bg-primary);
}

textarea#comment {
	color: var(--site-text-primary);
	background: var(--site-bg-primary);
}

.comment-reply-link {
	color: var(--site-accent);
}

.buddyx-post-section {
	background: var(--site-bg-primary);
}

.bp-feedback {
	background: var(--site-bg-primary);
	color: var(--site-text-primary);
}

#bbpress-forums fieldset.bbp-form {
	background: var(--site-bg-primary);
	color: var(--site-text-primary);
}

.bs-styled-checkbox+label:before,
#bbpress-forums fieldset.bbp-form select,
.medium-editor-element.medium-editor-element,
#bbpress-forums fieldset.bbp-form input[type=text] {
	background: var(--site-bg-secondary);
	color: var(--site-text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   WOOCOMMERCE
═══════════════════════════════════════════════════════════════ */
.woocommerce-notice,
.woocommerce-message,
.woocommerce-page,
.woocommerce-error,
.woocommerce-info,
.woocommerce-order-details,
.woocommerce-customer-details,
form.checkout.woocommerce-checkout,
.woocommerce-page .woocommerce ul.order_details {
	background: var(--site-bg-primary);
	color: var(--site-text-primary);
}

.woocommerce-cart table.cart td.actions .coupon .input-text,
.select2-container.select2-container--default span.select2-selection,
.woocommerce form .form-row .input-text {
	background: var(--site-bg-secondary);
	color: var(--site-text-primary);
}

.woocommerce-cart .cart-collaterals .cart_totals table,
.woocommerce .cart-collaterals .cart_totals,
form.woocommerce-cart-form {
	background: var(--site-bg-primary);
}

/* ═══════════════════════════════════════════════════════════════
   THE EVENTS CALENDAR
═══════════════════════════════════════════════════════════════ */
:root {
	--tec-color-text-primary: var(--site-text-primary);
	--tec-color-text-primary-light: var(--site-text-secondary);
	--tec-color-text-secondary: var(--site-text-primary);
	--tec-color-text-disabled: var(--site-text-muted);
	--tec-color-accent-secondary-hover: var(--site-accent-hover);
	--tec-color-background-events-bar: var(--site-bg-secondary);
	--tec-color-accent-secondary: var(--site-accent);
	--tec-color-background: var(--site-bg-primary);
	--tec-color-background-secondary: var(--site-bg-secondary);
	--tec-color-icon-primary: var(--site-text-muted);
	--tec-color-icon-primary-alt: var(--site-text-secondary);
	--tec-color-icon-secondary: var(--site-text-muted);
	--tec-color-icon-active: var(--site-accent);
	--tec-color-icon-disabled: rgba(179, 175, 175, 0.25);
}

.event-tickets .tribe-tickets__tickets-buy.tribe-common-c-btn,
.event-tickets .tribe-tickets__tickets-buy.tribe-common-c-btn:hover,
.tribe-common.tribe-common .tribe-common-c-btn,
.tribe-common.tribe-common .tribe-common-c-btn:hover {
	color: var(--site-text-primary);
}

.tribe-compatibility-container,
.tribe-events-widget-events-list,
.tribe-events-widget-events-list__event-title a,
.tribe-events-widget-events-list__event-datetime,
.tribe-events-widget-events-list__event-date-tag-month,
.tribe-events-widget-events-list__event-date-tag-daynum {
	background-color: transparent;
	color: var(--site-text-primary);
}

.tribe-events-widget-events-list__event-title,
.tribe-events-widget-events-list__event-title a {
	color: var(--site-text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   BLOG / ARCHIVE
═══════════════════════════════════════════════════════════════ */
.blog .hentry,
.archive .hentry {
	background-color: var(--site-bg-secondary);
}

.blog .tribe-compatibility-container,
.archive .tribe-compatibility-container {
	background-color: var(--site-bg-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR VISIBILITY
═══════════════════════════════════════════════════════════════ */
.home #secondary,
.home .primary-sidebar {
	display: none;
}

.home #primary {
	grid-column: 1 / -1;
}

.home .site-wrapper {
	grid-template-columns: 1fr;
}

.pmpro-levels #secondary,
.pmpro-levels .primary-sidebar,
.pmpro-login #secondary,
.pmpro-login .primary-sidebar {
	display: none;
}

.pmpro-levels #primary,
.pmpro-login #primary {
	grid-column: 1 / -1;
}

.pmpro-levels .site-wrapper,
.pmpro-login .site-wrapper {
	grid-template-columns: 1fr;
}


/* Font size for screens smaller than 480px */
@media (max-width: 480px) {
	.site-title {
		margin: 0 0 8px;
		font-size: 24px;
		font-weight: 700;
		line-height: 1;
	}

	header#masthead {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Keep sub-menus to right of the header menu */
ul.sub-menu {
	left: 0;
	right: auto;
	min-width: 200px;
}