/* ── WP Career Board — global frontend styles ────────────────────────────── */

/*
 * Color bridge — ensures a good first-load on any theme, no config required.
 *
 * The hardcoded fallbacks (#2563eb etc.) are the plugin's brand defaults and
 * are used automatically on classic themes or any theme that does not define
 * matching wcb-* color slugs.
 *
 * Recommended override path (block themes / child themes):
 *   Add a "wcb-primary" slug to your theme.json color palette and WordPress
 *   will automatically recolor all WCB UI — no extra CSS needed.
 *
 *   Example child theme.json:
 *   { "settings": { "color": { "palette": [
 *     { "slug": "wcb-primary",      "color": "#6d28d9" },
 *     { "slug": "wcb-primary-dark", "color": "#5b21b6" }
 *   ] } } }
 *
 * Classic theme override: set --wcb-primary directly in :root.
 */
:root {
	/* Host-theme token adoption (Wbcom standard — see jetonomy
	   docs/standards/host-theme-color-adoption.md). The accent adopts the
	   ACTIVE theme's own brand token first so the plugin reads as native and
	   follows the theme's dark mode for free, then WP theme.json presets, then
	   the popular page-builder themes, then the plugin's hardcoded brand. Tokens
	   are mutually exclusive per active theme, so order only sets precedence:
	     BuddyX / BuddyX Pro 5.1+ -> --bx-color-accent
	     Reign 8.0+               -> --reign-colors-theme
	     BuddyNext                -> --brand
	     "primary"-slug themes    -> --wp--preset--color--primary (TT3, classic)
	     Astra                    -> --ast-global-color-0
	     Kadence                  -> --global-palette1
	     Blocksy                  -> --theme-palette-color-1
	     GeneratePress / "accent" -> --wp--preset--color--accent */
	--wcb-primary:      var( --bx-color-accent, var( --reign-colors-theme, var( --brand, var( --wp--preset--color--wcb-primary, var( --wp--preset--color--primary, var( --ast-global-color-0, var( --global-palette1, var( --theme-palette-color-1, var( --wp--preset--color--accent, #2563eb ) ) ) ) ) ) ) ) );

	/* Darker shade for hover/active. Derived from whatever --wcb-primary
	   resolves to so the hover state always tracks the adopted accent (a
	   BuddyX red primary must not get a blue hover). Hex fallback first for
	   browsers without color-mix(). */
	--wcb-primary-dark: #1d4ed8;
	--wcb-primary-dark: color-mix( in srgb, var( --wcb-primary-strong ) 85%, #000 );

	/* Accent used as TEXT (small links, pills on a tint): the raw accent is chosen
	   for fills and often misses 4.5:1 on white, so text uses this darker shade.
	   Dark mode overrides it back to the accent. */
	--wcb-primary-text: #1d4ed8;
	--wcb-primary-text: color-mix( in srgb, var( --wcb-primary ) 78%, #000 );

	--wcb-avatar-bg:    var( --wp--preset--color--wcb-avatar-bg,    #1e293b );

	/* Surfaces + text — adopt BuddyX / BuddyX Pro's clean --bx-color-* and
	   BuddyNext, then WP base/contrast presets, then a neutral default. Per the
	   standard, non --bx- theme-specific surface/text tokens are NOT auto-adopted
	   (too varied; risk of clashing with the plugin's card UI). */
	--wcb-base:         var( --bx-color-bg-elevated, var( --surface, var( --bg, var( --wp--preset--color--wcb-base, var( --wp--preset--color--base, #ffffff ) ) ) ) );
	--wcb-contrast:     var( --bx-color-fg, var( --text-1,  var( --wp--preset--color--wcb-contrast, var( --wp--preset--color--contrast, #0f172a ) ) ) );
	/* Text that sits directly on the theme's own background (page heading,
	   result count, the Remote toggle), not on a plugin surface. It follows
	   the theme's text colour, so a dark block-theme style stays readable;
	   --wcb-contrast stays the text colour for the plugin's own cards. */
	--wcb-canvas-fg:    var( --bx-color-fg, var( --text-1, var( --wp--preset--color--contrast, var( --wp--preset--color--wcb-contrast, #0f172a ) ) ) );
	--wcb-muted:        var( --bx-color-fg-muted, var( --text-2,  var( --wp--preset--color--wcb-muted,        #667085 ) ) );
	--wcb-surface:      var( --bx-color-bg, var( --canvas,  var( --wp--preset--color--wcb-surface,      #f1f5f9 ) ) );
	--wcb-border:       var( --bx-color-border, var( --line,    var( --wp--preset--color--wcb-border,       #e2e8f0 ) ) );
	--wcb-featured:     var( --wp--preset--color--wcb-featured,     #f59e0b );
}

/*
 * Dark-mode overrides. The same dark token values apply under every dark-mode
 * convention we support, so every WCB component using `var(--wcb-*)` re-colors
 * automatically:
 *   - Reign / generic block themes that add `dark-mode` to <html>.
 *   - BuddyX / BuddyX Pro 5.1+ color modes, which set `data-bx-mode` on <html>:
 *       explicit dark -> html[data-bx-mode="dark"]
 *       "auto" (follow system) -> prefers-color-scheme inside [data-bx-mode="auto"]
 *
 * The two declaration lists below are intentionally identical and MUST stay in
 * sync (the auto block lives in a media query, so it cannot share the selector).
 * Keep all dark-mode config here so it spans the core palette (frontend.css) and
 * the semantic palette (frontend-tokens.css) in one place.
 */
html.dark-mode,
html[data-bx-mode="dark"],
html[data-bn-theme="dark"],
[data-theme="dark"] {
	/* Core palette. */
	--wcb-base:            #1e1f24;
	--wcb-contrast:        #f1f5f9;
		--wcb-canvas-fg:       #f1f5f9;
	--wcb-muted:           #94a3b8;
	--wcb-surface:         #2a2d36;
	--wcb-border:          #3a3d46;
	/* Lifted off the dark card (#0f172a was ~1.1:1 against it). */
	--wcb-avatar-bg:       #334155;

	/* Semantic palette (frontend-tokens.css). */
	--wcb-bg-subtle:       #16181d;
	--wcb-bg-hover:        #2a2d36;
	--wcb-text-secondary:  #cbd5e1;
	--wcb-text-tertiary:   #94a3b8;

	/* Status tint backgrounds — keep readable against a dark card. */
	--wcb-success-bg:      rgba( 22, 163, 74, 0.22 );
	--wcb-warning-bg:      rgba( 217, 119, 6, 0.22 );
	--wcb-danger-bg:       rgba( 220, 38, 38, 0.22 );
	--wcb-info-bg:         rgba( 37, 99, 235, 0.22 );

	/* Soft tints + the primary banner tint — translucent so tinted callouts
	   (onboarding banner, form-success notice) read as a dark surface, not a
	   light patch stuck in light mode. */
	--wcb-success-bg-soft: rgba( 22, 163, 74, 0.15 );
	--wcb-warning-bg-soft: rgba( 217, 119, 6, 0.15 );
	--wcb-danger-bg-soft:  rgba( 220, 38, 38, 0.15 );
	--wcb-info-bg-soft:    rgba( 37, 99, 235, 0.15 );
	--wcb-purple-bg:       rgba( 124, 58, 237, 0.22 );
	--wcb-primary-bg:      rgba( 37, 99, 235, 0.18 );
	--wcb-primary-border:  rgba( 37, 99, 235, 0.40 );
	--wcb-primary-bg:      color-mix( in srgb, var( --wcb-primary, #2563eb ) 18%, transparent );
	--wcb-primary-border:  color-mix( in srgb, var( --wcb-primary, #2563eb ) 40%, transparent );

	/* Status foreground — lightened so text on the translucent tints stays
	   legible (was dark-on-dark / invisible before). */
	--wcb-success-fg:      #4ade80;
	--wcb-warning-fg:      #fbbf24;
	--wcb-danger-fg:       #f87171;
	--wcb-primary-text:    var( --wcb-primary );
	--wcb-info-fg:         #93c5fd;
	--wcb-purple-fg:       #c4b5fd;

	/* --wcb-danger-border never had a dark value, so an outlined danger
	   control (Withdraw, Clear all) kept the light-mode pink and glowed on a
	   dark surface. Same translucent-tint pattern as --wcb-primary-border
	   above, derived from the already dark-appropriate -fg red. */
	--wcb-danger-border:   color-mix( in srgb, var( --wcb-danger-fg, #f87171 ) 40%, transparent );
}

/*
 * BuddyX "auto" color mode follows the OS preference. Scoped strictly to
 * html[data-bx-mode="auto"] so themes without that attribute (Reign, classic
 * themes, the block editor) are never recolored by the visitor's OS setting.
 * Mirror of the dark token list above - keep both in sync.
 */
@media ( prefers-color-scheme: dark ) {
	html[data-bx-mode="auto"] {
		/* Core palette. */
		--wcb-base:            #1e1f24;
		--wcb-contrast:        #f1f5f9;
		--wcb-canvas-fg:       #f1f5f9;
		--wcb-muted:           #94a3b8;
		--wcb-surface:         #2a2d36;
		--wcb-border:          #3a3d46;
		--wcb-avatar-bg:       #334155;

		/* Semantic palette (frontend-tokens.css). */
		--wcb-bg-subtle:       #16181d;
		--wcb-bg-hover:        #2a2d36;
		--wcb-text-secondary:  #cbd5e1;
		--wcb-text-tertiary:   #94a3b8;

		/* Status tint backgrounds — keep readable against a dark card. */
		--wcb-success-bg:      rgba( 22, 163, 74, 0.22 );
		--wcb-warning-bg:      rgba( 217, 119, 6, 0.22 );
		--wcb-danger-bg:       rgba( 220, 38, 38, 0.22 );
		--wcb-info-bg:         rgba( 37, 99, 235, 0.22 );

		/* Soft tints + primary banner tint (mirror of the explicit-dark block). */
		--wcb-success-bg-soft: rgba( 22, 163, 74, 0.15 );
		--wcb-warning-bg-soft: rgba( 217, 119, 6, 0.15 );
		--wcb-danger-bg-soft:  rgba( 220, 38, 38, 0.15 );
		--wcb-info-bg-soft:    rgba( 37, 99, 235, 0.15 );
		--wcb-purple-bg:       rgba( 124, 58, 237, 0.22 );
		--wcb-primary-bg:      rgba( 37, 99, 235, 0.18 );
		--wcb-primary-border:  rgba( 37, 99, 235, 0.40 );
		--wcb-primary-bg:      color-mix( in srgb, var( --wcb-primary, #2563eb ) 18%, transparent );
		--wcb-primary-border:  color-mix( in srgb, var( --wcb-primary, #2563eb ) 40%, transparent );

		/* Status foreground — lightened for legibility on the translucent tints. */
		--wcb-success-fg:      #4ade80;
		--wcb-warning-fg:      #fbbf24;
		--wcb-danger-fg:       #f87171;
	--wcb-primary-text:    var( --wcb-primary );
		--wcb-info-fg:         #93c5fd;
		--wcb-purple-fg:       #c4b5fd;

		/* Mirror of the explicit-dark block above. */
		--wcb-danger-border:   color-mix( in srgb, var( --wcb-danger-fg, #f87171 ) 40%, transparent );
	}
}

/* Suppress the theme's page title on WCB app / archive pages. The block-theme
 * title is `.wp-block-post-title`, which a Query Loop also uses for every
 * entry it lists, so leave the ones inside `.wp-block-post-template` alone. */
.wcb-page .entry-title,
.wcb-page .page-title,
.wcb-page h1.post-title,
.wcb-page .wp-block-post-title:not(.wp-block-post-template .wp-block-post-title) {
	display: none !important;
}

/* A display:none title still counts as the first child, so a block theme's
 * blockGap stayed on the content under it (19px more than the same page's
 * archive on Twenty Twenty-Five). */
.wcb-page .wp-block-post-title:not(.wp-block-post-template .wp-block-post-title) ~ .wp-block-post-content,
body:is(.single-wcb_job, .single-wcb_company, .single-wcb_resume) .wp-block-post-title ~ .wp-block-post-content {
	margin-block-start: 0;
}

/* Some block themes (Twenty Twenty-Four) put the title and byline in their own
 * padded group above the content. With both hidden it was an empty 130px band,
 * so the group goes too, along with the gap it left on the content. */
body:is(.single-wcb_job, .single-wcb_company, .single-wcb_resume) .wp-block-group:has(> .wp-block-post-title):not(:has(.wp-block-post-content)) {
	display: none;
}

body:is(.single-wcb_job, .single-wcb_company, .single-wcb_resume) .wp-block-group:has(> .wp-block-post-title):not(:has(.wp-block-post-content)) + .wp-block-post-content {
	margin-block-start: 0;
}

/* Suppress the theme sidebar on WCB app / archive pages. */
.wcb-page #secondary,
.wcb-page .widget-area,
.wcb-page aside.sidebar,
.wcb-page .sidebar-area,
.wcb-page .site-sidebar,
.wcb-page #sidebar {
	display: none !important;
}

/* ── Page heading — rendered inside listing blocks ───────────────────────── */
/* The block-scope reset in frontend-components.css zeroes h1 margins. The
   .wp-block-heading form covers the Find Jobs page H1, a core heading placed
   outside our blocks, where a theme's `.entry-content h1` would otherwise win. */
.wcb-page-heading,
.wp-block-heading.wcb-page-heading,
[class*="wp-block-wp-career-board"] .wcb-page-heading,
[class*="wp-block-wcb-"] .wcb-page-heading {
	font-size: var(--wcb-text-2xl);
	font-weight: var( --wcb-font-bold, 700 );
	color: var( --wcb-canvas-fg, #0f172a );
	margin: 0 0 var(--wcb-space-lg);
	line-height: 1.2;
}

/* Block themes zero our blocks' margin-block-end and put their own blockGap
   (TT25 19.2px) between them, so stacked Career Board blocks (search, filters,
   listings) got the theme's gap instead of ours. One plugin gap between two
   of our blocks; the theme's gap still applies next to its own blocks. */
body :is(.is-layout-constrained, .is-layout-flow) > :is([class*="wp-block-wp-career-board-"], [class*="wp-block-wcb-"], .wcb-page-heading) + :is([class*="wp-block-wp-career-board-"], [class*="wp-block-wcb-"]) {
	margin-block-start: var(--wcb-space-lg);
}

/* Block themes also append post meta, previous/next links and a "More posts"
   query after the content of any single. On a job, company or resume page
   those point at unrelated blog posts, so everything the theme adds after the
   post content is hidden (the site footer is outside main and unaffected). */
body:is(.single-wcb_job, .single-wcb_company, .single-wcb_resume) .wp-block-post-content ~ *,
body:is(.single-wcb_job, .single-wcb_company, .single-wcb_resume) main > :has(.wp-block-post-content) ~ * {
	display: none;
}

/* Block themes (Twenty Twenty-Five) print their own title and an author/date byline
   above our single templates. A job and a company already render their own H1, so
   the theme's title is a second H1; the byline is an empty "Written by" band on all
   three. A resume renders no H1 of its own, so its theme title stays. */
body.single-wcb_job .wp-block-post-title,
body.single-wcb_company .wp-block-post-title,
body.single-wcb_job .wp-block-post-title ~ .wp-block-group.is-layout-flex,
body.single-wcb_company .wp-block-post-title ~ .wp-block-group.is-layout-flex,
body.single-wcb_resume .wp-block-post-title ~ .wp-block-group.is-layout-flex {
	display: none;
}

/* Phone: every page H1 steps down to xl, like the job, company and resume
   titles and the dashboard titles. */
@media (max-width: 640px) {
	.wcb-page-heading,
	.wp-block-heading.wcb-page-heading,
	[class*="wp-block-wp-career-board"] .wcb-page-heading,
	[class*="wp-block-wcb-"] .wcb-page-heading {
		font-size: var(--wcb-text-xl);
	}
}