/**
 * 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;
}