/*
 * BuddyX token application layer
 *
 * Applies the --bx-color-* tokens (defined by inc/Tokens/Component.php) to
 * the standard theme selectors. Loaded after global.css so it overrides
 * any hardcoded values that pre-date the token system.
 *
 * This file should ONLY contain `var(--bx-color-X)` references. Hardcoded
 * hex values are forbidden here. When you want to change a color globally,
 * update the token in inc/Tokens/Component.php — never edit this file.
 *
 * The tokens swap to dark values when [data-bx-mode="dark"] is set on
 * <html>, so this same file drives both light and dark modes.
 */

/* ----- Page surfaces -----
 * Master 5.0.x left .site, .site-main, .entry-content, .hentry, #secondary
 * etc. transparent — body BG showed through. Phase 4 originally added
 * card-style BGs to those surfaces, but on directory pages with sidebars
 * the layered cards exposed empty colored regions when content didn't fill
 * a column (white patch under the member loop, gray patch under sparse
 * sidebars, double-border on nested comment cards). Reverted to master
 * behavior: only html/body get a token-driven BG; everything else inherits.
 */
html,
body {
	background-color: var(--bx-color-bg, #ffffff);
	color: var(--bx-color-fg, #505050);
}

/* ----- Boxed layout (body.layout-boxed) -----
 * Customizer ▸ Site Layout ▸ "Boxed" wraps the main `.site` container in
 * a constrained, elevated card with the body BG visible at left/right
 * margins. This makes `content_background_color` (token --bx-color-bg-page)
 * a visible setting again — it paints the inner card; `body_background_color`
 * (token --bx-color-bg) shows in the outer area around the box.
 *
 * `max-width` is emitted by the customizer's `site_container_width` output
 * (see General_Fields.php) so the customer's chosen width drives the box.
 * Full-bleed elements like the sub-header (which use `width:100vw + negative
 * margin` per commit eb98d11) intentionally remain viewport-spanning even
 * inside the box — matches the modern theme convention (Astra/GP/etc.). */
body.layout-boxed .site {
	margin-left: auto;
	margin-right: auto;
	background-color: var(--bx-color-bg-page, #ffffff);
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
	position: relative;
}
@media (max-width: 640px) {
	/* On phones the boxed shadow + margin reads as visual noise; flatten
	 * to a full-width content area so mobile users get a clean read. */
	body.layout-boxed .site {
		max-width: 100%;
		box-shadow: none;
	}
}

/* ----- Header ----- */
.site-header,
.site-header-section {
	background-color: var(--bx-color-header-bg, #ffffff);
}

.site-title,
.site-title a,
.site-title a:visited {
	color: var(--bx-color-site-title, var(--bx-color-fg, #111111));
}
.site-title a:hover,
.site-title a:focus {
	color: var(--bx-color-site-title-hover, var(--bx-color-accent, #ef5455));
}
.site-description {
	color: var(--bx-color-site-tagline, var(--bx-color-fg, #757575));
}

/* Primary nav */
.main-navigation a,
.main-navigation ul li a {
	color: var(--bx-color-menu-fg, var(--bx-color-fg, #111111));
}
.main-navigation a:hover,
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a {
	color: var(--bx-color-menu-hover, var(--bx-color-accent, #ef5455));
}

/* ----- Sub-header ----- */
.site-sub-header,
.page-header {
	color: var(--bx-color-subheader-fg, var(--bx-color-fg, inherit));
}

/* ----- Headings ----- */
h1, .h1 { color: var(--bx-color-h1, var(--bx-color-fg, #111111)); }
h2, .h2 { color: var(--bx-color-h2, var(--bx-color-fg, #111111)); }
h3, .h3 { color: var(--bx-color-h3, var(--bx-color-fg, #111111)); }
h4, .h4 { color: var(--bx-color-h4, var(--bx-color-fg, #111111)); }
h5, .h5 { color: var(--bx-color-h5, var(--bx-color-fg, #111111)); }
h6, .h6 { color: var(--bx-color-h6, var(--bx-color-fg, #111111)); }

/* ----- Body links -----
 * `:not(.wp-element-button):not(.wp-block-button__link):not(.button):not([class*="button"])`
 * keeps button-as-anchor elements (WP block buttons, pattern CTAs, BP
 * action buttons, plus plugin button links like Elementor's
 * `.elementor-button` / GamiPress buttons via the `[class*="button"]`
 * catch-all) from inheriting the body link color or the prose underline. Without this
 * exclusion, the .entry-content a rule (specificity 0,2,0) overrides
 * the button rule below (0,1,0) and renders Email-us / Buy-Now etc.
 * with link color on top of the brand BG → unreadable.
 *
 * Selector scope is intentionally limited to `.entry-content` and
 * `.comment-content`. An earlier unscoped `p a:not(...)` selector was
 * dropped because BuddyX renders the masthead site title as
 * `<p class="site-title">` (see template-parts/header/branding.php),
 * which the unscoped `p a:not(...)` rule (specificity 0,3,2) was
 * overriding the customer's `site_title_color` (selector
 * `.site-title a`, specificity 0,1,1). All single/page templates
 * already wrap post content in `.entry-content`, so the scoped rule
 * still covers paragraph-nested links inside post bodies. */
.entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not([class*="button"]),
.comment-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not([class*="button"]) {
	color: var(--bx-color-link, var(--bx-color-accent, #111111));
	/* WCAG 1.4.1 Use of Color: links must be distinguishable from
	 * surrounding text without relying on color alone. Body-content
	 * links get an underline; per-context CSS can override (e.g.
	 * pattern CTAs that already have visual chrome). */
	/* text-decoration: underline; */
	text-underline-offset: 2px;
}

/* Post meta category + tag links — underlined to pass link-in-text-block
 * even when the saved customer color happens to match surrounding text. */
.post-meta-category__link,
.post-meta-tag__link,
.tags-list a,
.tag-links a {
	/* text-decoration: underline; */
	text-underline-offset: 2px;
}
.entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not([class*="button"]):hover,
.entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not([class*="button"]):focus,
.comment-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not([class*="button"]):hover,
.comment-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not([class*="button"]):focus {
	color: var(--bx-color-link-hover, var(--bx-color-accent, #ef5455));
}

/* ----- Buttons -----
 * Note: `.button` is intentionally NOT in this selector list. WP and
 * BuddyPress use `.button` for many low-emphasis links (notification
 * dropdown footer, BP friend buttons, etc.) that should NOT inherit the
 * customer's brand button color. Per-context stylesheets already scope
 * `.button` correctly (woocommerce.css, platform.css, _comments.css).
 * This rule covers only canonical button elements + WP block buttons.
 *
 * Also excluded: header chrome buttons (color-mode toggle, menu-toggle,
 * search-icon) — they're navigation icons, not primary actions.
 *
 * Also excluded: WooCommerce block components ([class*="wc-block-"]) —
 * Cart/Checkout/Mini-Cart block buttons (quantity stepper, remove-item)
 * ship their own styling; the brand-button fill broke their layout. */
button:not([class*="wp-"]):not([class*="customize-"]):not([class*="wc-block-"]):not(.bx-color-mode-toggle__btn):not(.menu-toggle):not(.menu-close):not(.datepicker button):not([class*="tribe-events"]),
input[type="button"],
input[type="submit"],
.wp-block-button__link {
	background-color: var(--bx-color-button-bg, var(--bx-color-accent, #ef5455));
	color: var(--bx-color-button-fg, #ffffff);
	border-color: var(--bx-color-button-border, var(--bx-color-accent, #ef5455));
}
button:not([class*="wp-"]):not([class*="customize-"]):not([class*="wc-block-"]):not(.bx-color-mode-toggle__btn):not(.menu-toggle):not(.menu-close):not(.datepicker button):not([class*="tribe-events"]):hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background-color: var(--bx-color-button-bg-hover, var(--bx-color-accent, #ef5455));
	color: var(--bx-color-button-fg-hover, #ffffff);
	border-color: var(--bx-color-button-border-hover, var(--bx-color-accent, #ef5455));
}

/* ----- Footer ----- */
.site-footer,
.site-footer-wrapper,
.footer-widgets {
	background-color: var(--bx-color-footer-bg, var(--bx-color-bg, #ffffff));
	color: var(--bx-color-footer-fg, var(--bx-color-fg, #505050));
}
.site-footer .widget-title,
.footer-widgets .widget-title {
	color: var(--bx-color-footer-title, var(--bx-color-h2, #111111));
}
.site-footer a,
.footer-widgets a {
	color: var(--bx-color-footer-link, var(--bx-color-link, #111111));
}
.site-footer a:hover,
.footer-widgets a:hover {
	color: var(--bx-color-footer-link-hover, var(--bx-color-link-hover, #ef5455));
}

/* ----- Copyright -----
 * `.site-info` is the canonical wrapper rendered by template-parts/footer/info.php
 * (.site-copyright / .copyright-section are kept for back-compat with theme
 * variants that may use them). The `.site-footer` ancestor is added to the
 * link selectors to bump specificity over the `.site-footer a` rule above
 * (both are 0,1,1) so `site_copyright_links_color` wins independently from
 * `site_footer_links_color`. */
.site-info,
.site-copyright,
.copyright-section {
	background-color: var(--bx-color-copyright-bg, var(--bx-color-footer-bg, #ffffff));
	color: var(--bx-color-copyright-fg, var(--bx-color-footer-fg, #505050));
	border-color: var(--bx-color-copyright-border, transparent);
}
.site-footer .site-info a,
.site-info a,
.site-copyright a,
.copyright-section a {
	color: var(--bx-color-copyright-link, var(--bx-color-link, #111111));
	/* Underline to distinguish links from surrounding copyright text
	 * without relying on color alone (WCAG 1.4.1 — Use of Color). */
	text-decoration: underline;
	text-underline-offset: 2px;
}
.site-footer .site-info a:hover,
.site-info a:hover,
.site-copyright a:hover,
.copyright-section a:hover {
	color: var(--bx-color-copyright-link-hover, var(--bx-color-link-hover, #ef5455));
}

/* ----- Active menu state — accessible distinguisher -----
 * Per-WCAG 1.4.3 AA, body text needs a 4.5:1 contrast ratio. The default
 * accent #ef5455 only has 3.87:1 against white — fails. Rather than
 * darken the brand accent globally (would break customer expectations),
 * keep the active state TEXT in the standard menu fg (high contrast) and
 * use the brand accent as a "you are here" bottom-border emphasis. The
 * earlier text-decoration underline read as dated on nav items; a 2px
 * accent bottom-border (drawn with an inset box-shadow so it adds no
 * layout shift vs. inactive items) is the modern equivalent. Bold weight
 * keeps a non-color cue intact, so WCAG 1.4.1 (Use of Color) still holds. */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li.current-menu-ancestor > a {
	color: var(--bx-color-menu-fg, var(--bx-color-fg, #1a1a1a));
	font-weight: 600;
	text-decoration: none;
	box-shadow: inset 0 -2px 0 0 var(--bx-color-menu-active, var(--bx-color-accent, #ef5455));
}

/* ----- Inputs / forms ----- */
/* Note: tokens chosen to match 5.0.x master cascade — input BG follows
 * box_background_color (via bg-elevated) and input border follows
 * site_copyright_border_color (via copyright-border). Semantic decoupling
 * (separate input-bg / input-border tokens) moved to 5.2.x backlog so
 * existing customer color customizations stay visually unchanged. */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
	background-color: var(--bx-color-bg-elevated, #ffffff);
	color: var(--bx-color-fg, #111111);
	border-color: var(--bx-color-copyright-border, #c3c4c7);
	border-radius: var(--bx-radius-form, 4px);
}

/* ----- Borders / dividers ----- */
hr {
	border-color: var(--bx-color-copyright-border, #e8e8e8);
}

/* ----- Dark-mode overrides for Output_Builder hardcoded defaults -----
 * The Background Control's `background_setting` field defaults
 * `background-color` to `rgba(255,255,255,0.8)` (Footer_Fields.php) and
 * `site_copyright_border_color` defaults to `#e8e8e8`. Output_Builder
 * emits these literal hex / rgba values into the inline `<style>` block
 * unconditionally — they don't adapt when [data-bx-mode="dark"] is set
 * because they're hardcoded values, not token references.
 *
 * On a fresh install (no customer color customization yet) toggling the
 * Site Footer Background switch ON inherits this light default and the
 * footer area renders with a near-white wrapper + light gray copyright
 * border-top against an otherwise dark page — broken visual. Add
 * higher-specificity (0,2,1) overrides scoped to the dark-mode root
 * attribute that win against the inline customizer rule (0,1,0).
 *
 * Specificity (not source order) wins here because the inline customizer
 * CSS is a class-only selector. When a customer DOES set explicit dark-
 * adapted values, they remain in effect (this rule provides only the
 * default). */
:root[data-bx-mode="dark"] .site-footer-wrapper {
	background-color: var(--bx-color-bg-page, #0a0a0a);
}
:root[data-bx-mode="dark"] .site-info {
	border-color: var(--bx-color-border, #2a2a2a);
}
@media (prefers-color-scheme: dark) {
	:root[data-bx-mode="auto"] .site-footer-wrapper {
		background-color: var(--bx-color-bg-page, #0a0a0a);
	}
	:root[data-bx-mode="auto"] .site-info {
		border-color: var(--bx-color-border, #2a2a2a);
	}
}

/* ----- Smoothing transition between modes ----- */
html {
	transition: background-color 0.2s ease, color 0.2s ease;
}
body, .site, .site-header, .site-footer {
	transition: background-color 0.2s ease, color 0.2s ease;
}
