/**
 * WP Career Board — BuddyX Pro theme compatibility styles.
 *
 * Bridges WCB design tokens to BuddyX Pro's own theme tokens so every
 * WCB card, button, border and label inherits the theme palette and
 * flips automatically with BuddyX Pro's html.dark-mode class.
 *
 * Loaded on any page containing a WCB block or displaying a WCB CPT.
 *
 * @package WP_Career_Board
 * @since   1.0.0
 */

/*
 * Token bridge — re-map the WCB palette to BuddyX Pro's variables.
 * BuddyX Pro updates `--color-theme-white-box`, `--global-border-color`,
 * etc. when its dark-mode class is active, so the WCB components re-color
 * for free in both modes. The hex fallbacks keep things sane if a BuddyX
 * token is ever missing (e.g. older theme version).
 *
 * The `html.dark-mode` selector matches the dark-mode block in WCB's own
 * frontend.css (specificity 0,1,1) and load-order tips the tiebreak in
 * favor of the bridge so BuddyX's palette beats the WCB defaults.
 */
:root,
:root[data-bx-mode="dark"],
body.buddyx-dark-theme,
body.buddyx-dark-style-variation,
html.dark-mode {
	/* Brand — BuddyX 5.1 exposes `--bx-color-primary` / `--bx-color-accent`.
	   Legacy BuddyX Pro used `--bbg-primary` / `--buddyx-primary-color`; kept as
	   fallbacks so older theme builds still bridge. */
	--wcb-primary: var( --bx-color-primary, var( --bx-color-accent, var( --bbg-primary, var( --buddyx-primary-color, #2563eb ) ) ) );
	--wcb-primary-dark: var( --bx-color-accent-hover, var( --button-background-hover-color, var( --bbg-primary-hover, #1d4ed8 ) ) );

	/* Theme-aware primary tints — older browsers fall back to the static
	   rgba on the first declaration; modern browsers use color-mix below. */
	--wcb-primary-soft: rgba( 37, 99, 235, 0.08 );
	--wcb-primary-ring: rgba( 37, 99, 235, 0.16 );
	--wcb-primary-soft: color-mix( in srgb, var( --wcb-primary ) 8%, transparent );
	--wcb-primary-ring: color-mix( in srgb, var( --wcb-primary ) 16%, transparent );

	/* Text — 5.1: `--bx-color-text-primary`/`--bx-color-fg` for strong titles,
	   `--bx-color-text`/`--bx-color-fg` for body, `--bx-color-text-muted`/
	   `--bx-color-fg-muted` for secondary/muted. These flip automatically under
	   BuddyX's `:root[data-bx-mode="dark"]`, so WCB re-colors in dark mode free. */
	--wcb-contrast:       var( --bx-color-text-primary, var( --bx-color-fg, var( --bbg-headings-color, #0f172a ) ) );
	--wcb-text-primary:   var( --bx-color-text-primary, var( --bx-color-fg, var( --bbg-headings-color, #111111 ) ) );
	--wcb-text-secondary: var( --bx-color-text, var( --bx-color-fg-muted, var( --global-font-color, #475569 ) ) );
	--wcb-text-muted:     var( --bx-color-text-muted, var( --bx-color-fg-subtle, #6b7280 ) );
	--wcb-text-tertiary:  var( --bx-color-fg-subtle, var( --bx-color-text-muted, #9ca3af ) );

	/* Surfaces — 5.1: `--bx-color-bg-elevated` is the card/panel surface,
	   `--bx-color-bg-subtle`/`--bx-color-bg-muted` are the subtle bands. */
	--wcb-base:      var( --bx-color-bg-elevated, var( --color-theme-white-box, #ffffff ) );
	--wcb-surface:   var( --bx-color-bg-subtle, var( --global-body-lightcolor, #f1f5f9 ) );
	--wcb-bg-subtle: var( --bx-color-bg-muted, var( --bx-color-bg-subtle, var( --color-theme-body, #f8fafc ) ) );
	--wcb-bg-hover:  color-mix( in srgb, var( --wcb-primary ) 6%, var( --wcb-base, #ffffff ) );

	/* Borders — 5.1: `--bx-color-border`. */
	--wcb-border: var( --bx-color-border, var( --global-border-color, #e2e8f0 ) );

	/* Status — keep WCB's accessible defaults rather than bridging to BuddyX's
	   semantic tokens: `--bx-color-warning` (#eab308) and friends are tuned for
	   chips/icons, not text-on-white, and fail contrast for stat values. Legacy
	   `--bbg-*` overrides still win when a site explicitly sets them. */
	--wcb-success: var( --bbg-success-color, #16a34a );
	--wcb-warning: var( --bbg-warning-color, #d97706 );
	--wcb-danger:  var( --bbg-danger-color, #dc2626 );
	--wcb-info:    var( --wcb-primary );

	/* Avatar background — heading tone so initials read against theme contrast. */
	--wcb-avatar-bg: var( --bx-color-text-primary, var( --bbg-headings-color, #1e293b ) );
}

/*
 * Ensure WCB blocks respect BuddyX Pro's content width.
 * `--buddyx-content-width` is set inline by the integration when the site owner
 * picks a custom width; 1200px mirrors BuddyX Pro's default content container.
 * `margin-inline: auto` centres the block when it's narrower than the viewport.
 */
.wcb-job-single,
.wcb-job-listings,
.wcb-resume-archive,
.wcb-resume-single,
.wcb-dashboard,
.wcb-company-archive,
.wcb-company-profile {
	max-width: var( --buddyx-content-width, 1200px );
	margin-inline: auto;
	box-sizing: border-box;
}

/*
 * WCB's brand pill buttons (apply / primary / save) sit on the saturated
 * `--wcb-primary`. BuddyX's own `--button-text-color` varies per palette
 * (some Customizer presets use a dark value that fails contrast against
 * the saturated background), so we force the theme's button text — falling
 * back to white — instead of letting it pick a too-dark token.
 */
.wcb-cbtn--apply,
.wcb-cbtn--primary,
.wcb-btn-primary,
.wcb-apply-btn,
.wcb-save-btn {
	color: var( --bbg-button-text-color, var( --bx-color-button-fg, #ffffff ) ) !important;
	transition: filter var( --wcb-transition-snappy, 0.15s ease );
}

/*
 * Text / ghost buttons rendered as links.
 *
 * The token bridge above maps WCB colors to BuddyX's palette, but BuddyX 5.1
 * ALSO sets `color` directly on every non-wp <button>
 * (`button:not([class*="wp-"]){ color: var(--bx-color-button-fg) }`, specificity
 * ~0,5,1) and gives panel-link buttons the full primary fill. A token remap
 * cannot undo a direct `color`/`background` declaration, so these WCB buttons —
 * the dashboard nav tabs and the "View all" panel links, which are <button>s
 * styled as text/ghost links on light surfaces — must re-assert the bridged
 * token here or they render white-on-white / as solid coral pills. This is the
 * same override pattern as the primary-button rule above; it lives in the theme
 * compat layer (not block CSS) and uses the bridged WCB tokens, so it follows
 * the BuddyX palette and dark mode automatically. `-webkit-text-fill-color`
 * tracks `currentColor` because the theme's fill would otherwise still win.
 */
.wcb-dashboard .wcb-nav-item {
	color: var( --wcb-text-secondary ) !important;
	-webkit-text-fill-color: currentColor !important;
}

.wcb-dashboard .wcb-nav-item:hover,
.wcb-dashboard .wcb-nav-item.wcb-nav-active,
.wcb-dashboard .wcb-nav-item.wcb-view-active {
	color: var( --wcb-contrast ) !important;
	-webkit-text-fill-color: currentColor !important;
}

.wcb-dashboard .wcb-panel-link {
	background: none !important;
	color: var( --wcb-blue, var( --wcb-primary, #2563eb ) ) !important;
	-webkit-text-fill-color: currentColor !important;
}

/* Dark pill CTAs ("Browse Jobs" / "Post a Job") — <a> styled as a solid button;
 * BuddyX paints links with its body color, washing the white label into the
 * dark pill. Force the bridged light surface token for the label. */
.wcb-dashboard .wcb-sidebar-cta {
	color: var( --wcb-base, #ffffff ) !important;
	-webkit-text-fill-color: var( --wcb-base, #ffffff ) !important;
}

/* #OpenToWork badge shown on BuddyX Pro member profiles — uses the WCB
   teal accent family so it reads as a "trust / availability" signal
   rather than competing with the theme's primary brand color. */
.wcb-open-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.2em 0.6em;
	font-size: var( --wcb-text-xs, 0.75rem );
	font-weight: var( --wcb-font-semibold, 600 );
	color: var( --wcb-base, #ffffff );
	background-color: var( --wcb-teal, #0d9488 );
	border-radius: var( --wcb-radius-full, 9999px );
	vertical-align: middle;
}

/*
 * Registration role-picker cards ("Find a Job" / "Hire Talent") are <button>s
 * used as full surface cards, not brand pills. BuddyX 5.1 paints every non-wp
 * <button> with the accent fill + button-fg color (specificity ~0,8,2, plus a
 * direct -webkit-text-fill-color), turning the white cards solid coral and the
 * labels low-contrast. Re-assert the bridged surface tokens — same override
 * pattern as the button rules above; compat layer, not block CSS. The back
 * control (.wcb-reg-back) is a ghost/text button caught by the same theme rule.
 */
.wcb-role-card {
	background: var( --wcb-base, #ffffff ) !important;
	border-color: var( --wcb-border, #e2e8f0 ) !important;
	color: var( --wcb-text-primary, #111111 ) !important;
	-webkit-text-fill-color: currentColor !important;
}

.wcb-role-card:hover,
.wcb-role-card:focus-visible {
	background: var( --wcb-info-bg, var( --wcb-surface, #f1f5f9 ) ) !important;
	border-color: var( --wcb-primary, #2563eb ) !important;
}

.wcb-role-card .wcb-role-label {
	color: var( --wcb-contrast, #0f172a ) !important;
	-webkit-text-fill-color: currentColor !important;
}

.wcb-role-card .wcb-role-desc {
	color: var( --wcb-text-secondary, #475569 ) !important;
	-webkit-text-fill-color: currentColor !important;
}

.wcb-reg-back {
	background: none !important;
	color: var( --wcb-text-secondary, #475569 ) !important;
	-webkit-text-fill-color: currentColor !important;
}

/*
 * WCB button system vs BuddyX's blanket <button> fill.
 *
 * BuddyX 5.1 paints every non-wp <button> with the accent fill + button-fg
 * (`button:not([class*="wp-"])…`, specificity ~0,8,2, direct declarations).
 * That coral-fills WCB's ENTIRE button system — secondary/ghost/danger pills,
 * view toggles, bookmark, filter-clear and salary-reset icon/text buttons —
 * not just the intended primary CTAs. A token remap can't undo a direct
 * background/color, so re-assert the WCB ladder here with the same !important
 * pattern as the button rules above (compat layer, not block CSS). Only the
 * *filled* families keep a solid fill; everything else returns to its
 * token-driven transparent/surface background with readable token text.
 */

/* Filled CTAs — keep the brand fill + a legible label. */
button.wcb-btn--primary,
button.wcb-cbtn--primary,
button.wcb-search-button,
button.wcb-search-hero__button {
	background-color: var( --wcb-primary, #2563eb ) !important;
	color: var( --bbg-button-text-color, var( --bx-color-button-fg, #ffffff ) ) !important;
	-webkit-text-fill-color: currentColor !important;
}

/* Every other WCB <button>: strip BuddyX's blanket accent fill back to a
   transparent surface with readable token text. The allowlist (:not()) is the
   intentionally-filled families above, so this one rule covers all current AND
   future WCB buttons — ladder pills, view toggles, bookmark/filter/reset icon
   buttons, dashboard chips/pills, bell and db-link actions — without having to
   enumerate every class as new widgets are added. */
button[class*="wcb-"]:not(.wcb-btn--primary, .wcb-cbtn--primary, .wcb-search-button, .wcb-search-hero__button) {
	background-color: transparent !important;
	color: var( --wcb-text-primary, #111111 ) !important;
	-webkit-text-fill-color: currentColor !important;
}

/* Surface (outline-on-white) variants keep a solid light background. The extra
   [class*="wcb-"] qualifier lifts these above the blanket rule's specificity. */
button[class*="wcb-"].wcb-btn--secondary,
button[class*="wcb-"].wcb-cbtn--danger,
button[class*="wcb-"].wcb-layout-btn.wcb-active {
	background-color: var( --wcb-base, #ffffff ) !important;
}

/* Link-style + active-toggle buttons carry the primary accent on their label. */
button[class*="wcb-"].wcb-filter-panel__clear,
button[class*="wcb-"].wcb-salary-popover__reset,
button[class*="wcb-"].wcb-layout-btn.wcb-active {
	color: var( --wcb-primary, #2563eb ) !important;
}

/* Danger buttons keep their danger label tone. */
button[class*="wcb-"].wcb-cbtn--danger,
button[class*="wcb-"].wcb-btn--danger {
	color: var( --wcb-danger-fg, #991b1b ) !important;
}