/* -- Outer wrapper -- */
.wcb-cp-wrap {
	font-family: inherit;
}

/* -- Hero -- */
.wcb-cp-hero {
	position: relative;
	background: var(--wcb-base);
	border: 1px solid var(--wcb-border);
	border-radius: var(--wcb-radius-2xl);
	overflow: hidden;
	margin-bottom: var(--wcb-space-xl);
}

/* Save button anchored top-right of the hero card so it sits in the same
 * spot as Find Jobs single's "Saved" pill. (0,3,1) wins over the canonical
 * `.wcb-bookmark-hero-btn` rule that has no positioning. */
[class*="wp-block-wp-career-board"] .wcb-cp-hero > .wcb-cp-hero-save {
	position: absolute;
	top: var(--wcb-space-lg);
	inset-inline-end: var(--wcb-space-lg);
	z-index: 1;
}

/* Reserve right padding inside the hero body so the absolute-positioned
 * Save button doesn't crash into the meta chip row at narrow widths. */
.wcb-cp-hero-body {
	padding-inline-end: var(--wcb-space-5xl, 4rem);
}

/* On mobile keep the Save button absolutely anchored at the top-right
 * corner of the hero (same spot as desktop, just snugger). The earlier
 * `position: static` override pushed the pill into DOM order at the top
 * of the card where it clipped against the avatar - the avatar now sits
 * naturally below the header line without needing a negative margin. */
@media (max-width: 720px) {
	[class*="wp-block-wp-career-board"] .wcb-cp-hero > .wcb-cp-hero-save {
		top: var(--wcb-space-md);
		inset-inline-end: var(--wcb-space-md);
	}

	.wcb-cp-hero-body {
		padding-inline-end: var(--wcb-space-4xl);
	}
}

/* Cover strip collapsed to zero height so the company hero matches the
 * job-single and resume-single heroes — none of which carry a cover.
 * Same-family rule: the visual mark on org pages should be the logo
 * square + chip row, not a 120px dark band that has no information
 * payload. Keep the element in the DOM (rendered by the block) for
 * back-compat; future revision can drop the wrapper entirely. */
.wcb-cp-cover {
	height: 0;
	background: transparent;
}

.wcb-cp-hero-body {
	display: flex;
	align-items: flex-start;
	gap: var(--wcb-space-xl);
	padding: var(--wcb-space-xl) var(--wcb-space-2xl);
	margin-top: 0;
}

/* -- Avatar / Logo -- */
.wcb-cp-avatar-wrap {
	flex-shrink: 0;
}

.wcb-cp-logo,
.wcb-cp-avatar {
	width: 88px;
	height: 88px;
	border-radius: 14px;
	border: 3px solid var(--wcb-base);
	box-shadow: var(--wcb-shadow-sm);
	display: block;
	object-fit: cover;
	background: var(--wcb-base);
}

.wcb-cp-avatar {
	background: var(--wcb-avatar-bg, #1e293b);
	color: var(--wcb-base, #ffffff);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wcb-text-2xl);
	font-weight: var(--wcb-font-bold);
	letter-spacing: 0.02em;
}

/* -- Hero info --
 * No `padding-top` offset so the "Name + tagline" group's vertical
 * center aligns with the logo's vertical center, matching Find Jobs
 * single hero where the title + company name sit centered against the
 * avatar. The 52px offset that used to live here was a vestige of an
 * earlier cover-strip design that has since been collapsed. */
.wcb-cp-hero-info {
	flex: 1;
	min-width: 0;
}

.wcb-cp-name-row {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	flex-wrap: wrap;
}

.wcb-cp-name {
	font-size: var(--wcb-text-2xl);
	font-weight: var(--wcb-font-bold);
	color: var(--wcb-contrast);
	margin: 0;
	line-height: 1.2;
}

/* -- Trust badge -- */
.wcb-cp-trust-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wcb-space-xs);
	padding: var(--wcb-space-xs) var(--wcb-space-sm);
	border-radius: var(--wcb-radius-full);
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-bold);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.wcb-trust--verified {
	background: var(--wcb-success-bg);
	color: var(--wcb-success-fg);
}

.wcb-trust--trusted {
	background: var(--wcb-info-bg);
	color: var(--wcb-info);
}

.wcb-trust--premium {
	background: var(--wcb-warning-bg);
	color: var(--wcb-warning-fg);
}

/* -- Tagline -- */
.wcb-cp-tagline {
	font-size: var(--wcb-text-md);
	color: var(--wcb-text-secondary);
	margin: var(--wcb-space-xs) 0 var(--wcb-space-md);
	line-height: var(--wcb-leading-normal);
}

/* -- Meta chips -- */
.wcb-cp-meta-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wcb-space-sm);
	margin-bottom: var(--wcb-space-lg);
}

.wcb-cp-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--wcb-space-xs);
	padding: var(--wcb-space-xs) var(--wcb-space-sm);
	background: var(--wcb-surface, var(--wp--preset--color--wcb-surface));
	border-radius: var(--wcb-radius-full);
	font-size: var(--wcb-text-sm);
	color: var(--wcb-text-secondary);
	font-weight: var(--wcb-font-medium);
}

/* -- External links -- */
.wcb-cp-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wcb-space-sm);
}

.wcb-cp-link {
	display: inline-flex;
	align-items: center;
	gap: var(--wcb-space-xs);
	padding: var(--wcb-space-xs) var(--wcb-space-md);
	border: 1.5px solid var(--wcb-border);
	border-radius: var(--wcb-radius-sm);
	font-size: var(--wcb-text-sm);
	font-weight: var(--wcb-font-semibold);
	text-decoration: none;
	transition: border-color var(--wcb-transition-fast), color var(--wcb-transition-fast);
	color: var(--wcb-contrast);
}

.wcb-cp-link:hover {
	border-color: var(--wcb-text-tertiary);
	color: var(--wcb-contrast);
	text-decoration: none;
}

.wcb-cp-link--linkedin:hover {
	border-color: #0a66c2;
	color: #0a66c2;
}

.wcb-cp-link--twitter:hover {
	border-color: var(--wcb-contrast, #000);
	color: var(--wcb-contrast, #000);
}

/* -- Body (2-col grid on desktop: main + sidebar) -- */
.wcb-cp-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--wcb-space-xl);
	align-items: start;
}

.wcb-cp-main {
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-xl);
	min-width: 0;
}

.wcb-cp-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-lg);
	min-width: 0;
}

/* -- Unified side-card shell --
 *
 * Every sidebar block, whether one of our defaults (similar-companies,
 * recent-jobs, job-alert) or an admin-placed widget rendered with our
 * registered before_widget wrapper, takes the same card shell as
 * .wcb-cp-section in the main column. Keeps the page reading as one
 * cohesive layout instead of a main column + visually-different
 * sidebar.
 */
.wcb-cp-side-card,
.wcb-cp-sidebar > .wcb-recent-jobs,
.wcb-cp-sidebar > .wp-block-wp-career-board-recent-jobs {
	background: var(--wcb-base);
	border: 1px solid var(--wcb-border);
	border-radius: var(--wcb-radius-2xl);
	padding: var(--wcb-space-2xl);
}

.wcb-cp-side-card__title,
.wcb-cp-sidebar .wcb-widget-title {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	font-size: var(--wcb-text-lg);
	font-weight: var(--wcb-font-bold);
	color: var(--wcb-contrast);
	margin: 0 0 var(--wcb-space-lg);
	padding-bottom: var(--wcb-space-md);
	border-bottom: 1px solid var(--wcb-surface, var(--wp--preset--color--wcb-surface));
}

.wcb-cp-sidebar .wcb-widget-header {
	margin: 0 0 var(--wcb-space-lg);
	padding-bottom: var(--wcb-space-md);
	border-bottom: 1px solid var(--wcb-surface, var(--wp--preset--color--wcb-surface));
}

.wcb-cp-sidebar .wcb-widget-header .wcb-widget-title {
	margin: 0;
	padding: 0;
	border: 0;
}

@media (max-width: 1024px) {
	.wcb-cp-body {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -- Sections -- */
.wcb-cp-section {
	background: var(--wcb-base);
	border: 1px solid var(--wcb-border);
	border-radius: var(--wcb-radius-2xl);
	padding: var(--wcb-space-2xl);
}

.wcb-cp-section-title {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	font-size: var(--wcb-text-lg);
	font-weight: var(--wcb-font-bold);
	color: var(--wcb-contrast);
	margin: 0 0 var(--wcb-space-lg);
	padding-bottom: var(--wcb-space-md);
	border-bottom: 1px solid var(--wcb-surface, var(--wp--preset--color--wcb-surface));
}

.wcb-cp-jobs-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 var(--wcb-space-xs);
	background: var(--wcb-primary);
	color: var(--wcb-base);
	border-radius: var(--wcb-radius-full);
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-bold);
}

/* -- Description (Editor.js-authored rich content) -- */
.wcb-cp-desc {
	font-size: var(--wcb-text-md);
	line-height: 1.75;
	color: var(--wcb-contrast);
}

.wcb-cp-desc > :first-child {
	margin-top: 0;
}

.wcb-cp-desc > :last-child {
	margin-bottom: 0;
}

.wcb-cp-desc p {
	margin: 0 0 var(--wcb-space-md);
}

.wcb-cp-desc h2,
.wcb-cp-desc h3,
.wcb-cp-desc h4 {
	margin: var(--wcb-space-xl) 0 var(--wcb-space-sm);
	color: var(--wcb-contrast);
	line-height: 1.35;
}

.wcb-cp-desc h2 { font-size: var(--wcb-text-xl); font-weight: var(--wcb-font-bold); }
.wcb-cp-desc h3 { font-size: var(--wcb-text-lg); font-weight: var(--wcb-font-bold); }
.wcb-cp-desc h4 { font-size: var(--wcb-text-md); font-weight: var(--wcb-font-semibold); }

.wcb-cp-desc ul,
.wcb-cp-desc ol {
	margin: 0 0 var(--wcb-space-md);
	padding-inline-start: var(--wcb-space-2xl);
}

.wcb-cp-desc li {
	margin-bottom: var(--wcb-space-xs);
}

.wcb-cp-desc li::marker {
	color: var(--wcb-text-tertiary);
}

.wcb-cp-desc blockquote {
	margin: var(--wcb-space-md) 0;
	padding: var(--wcb-space-sm) 0 var(--wcb-space-sm) var(--wcb-space-lg);
	border-inline-start: 3px solid var(--wcb-border);
	color: var(--wcb-text-secondary);
	font-style: italic;
}

.wcb-cp-desc a {
	color: var(--wcb-primary);
	text-decoration: underline;
}

.wcb-cp-desc code {
	background: var(--wcb-bg-subtle);
	border-radius: var(--wcb-radius-sm, 4px);
	padding: 0.125em 0.375em;
	font-size: 0.9em;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* -- Details grid -- */
.wcb-cp-details-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wcb-space-lg) var(--wcb-space-3xl);
	margin: 0;
}

.wcb-cp-detail-item {
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-xs);
}

.wcb-cp-detail-item dt {
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wcb-text-tertiary);
}

.wcb-cp-detail-item dd {
	font-size: var(--wcb-text-md);
	color: var(--wcb-contrast);
	font-weight: var(--wcb-font-medium);
	margin: 0;
}

.wcb-cp-detail-item dd a {
	color: var(--wcb-primary);
	text-decoration: none;
}

.wcb-cp-detail-item dd a:hover {
	text-decoration: underline;
}

/* -- Jobs loading -- */
.wcb-cp-jobs-loading {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-sm);
	color: var(--wcb-text-secondary);
	font-size: var(--wcb-text-base);
	padding: var(--wcb-space-sm) 0;
}

.wcb-cp-spinner {
	display: inline-block;
	width: var(--wcb-space-lg);
	height: var(--wcb-space-lg);
	border: 2px solid var(--wcb-border);
	border-top-color: var(--wcb-primary);
	border-radius: 50%;
	animation: wcb-spin 0.7s linear infinite;
}

@keyframes wcb-spin {
	to { transform: rotate(360deg); }
}

/* -- Job cards -- */
.wcb-cp-job-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wcb-space-lg);
	padding: var(--wcb-space-lg) 0;
	border-bottom: 1px solid var(--wcb-surface, var(--wp--preset--color--wcb-surface));
}

.wcb-cp-job-card:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}

.wcb-cp-job-card:first-of-type {
	padding-top: 0;
}

.wcb-cp-job-main {
	flex: 1;
	min-width: 0;
}

.wcb-cp-job-title {
	font-size: var(--wcb-text-md);
	font-weight: var(--wcb-font-bold);
	color: var(--wcb-contrast);
	margin: 0 0 var(--wcb-space-sm);
	line-height: 1.35;
}

/*
 * !important on text-decoration is intentional theme defence — Astra,
 * Twenty Twenty-Four, and several other themes ship `entry-content a {
 * text-decoration: underline }` at higher specificity than a single
 * class selector, which gave the job title a default-blue underline
 * inside our company profile card. We're owning the link styling
 * deterministically so the card looks identical across themes.
 */
.wcb-cp-job-title a,
.wcb-cp-job-title a:visited {
	color: inherit;
	text-decoration: none !important;
	box-shadow: none;
}

.wcb-cp-job-title a:hover,
.wcb-cp-job-title a:focus-visible {
	color: var(--wcb-primary);
	text-decoration: underline !important;
}

.wcb-cp-job-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wcb-space-xs);
	align-items: center;
}

.wcb-cjbadge {
	display: none;
	align-items: center;
	gap: var(--wcb-space-xs);
	padding: 2px var(--wcb-space-sm);
	border-radius: var(--wcb-radius-full);
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-medium);
}

.wcb-cjbadge.wcb-shown {
	display: inline-flex;
}

.wcb-cjbadge--type     { background: var(--wcb-surface, var(--wp--preset--color--wcb-surface)); color: var(--wcb-text-secondary); }
.wcb-cjbadge--location { background: var(--wcb-surface, var(--wp--preset--color--wcb-surface)); color: var(--wcb-text-secondary); }

.wcb-cp-job-apply {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: var(--wcb-space-xs) var(--wcb-space-lg);
	background: var(--wcb-primary);
	color: var(--wcb-base);
	border-radius: var(--wcb-radius-sm);
	font-size: var(--wcb-text-sm);
	font-weight: var(--wcb-font-semibold);
	text-decoration: none;
	transition: background var(--wcb-transition-fast);
	white-space: nowrap;
}

.wcb-cp-job-apply:hover {
	background: var(--wcb-primary-dark);
	color: var(--wcb-base);
	text-decoration: none;
}

/* -- No jobs message -- */
.wcb-cp-no-jobs {
	color: var(--wcb-text-secondary);
	font-size: var(--wcb-text-base);
	font-style: italic;
	margin: 0;
}

/* -- Responsive -- */
@media (max-width: 640px) {
	/* Centered profile-card layout - matches the Single Resume hero
	 * because the Company single page is also a "profile" surface with
	 * lots of meta (industry, size, location, website). Big logo on
	 * top, name + tagline + chip row + website button all centered
	 * under it. Same visual rhythm a customer gets on /resume/<slug>/. */
	.wcb-cp-hero-body {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--wcb-space-md);
		padding: var(--wcb-space-2xl) var(--wcb-space-xl);
	}

	.wcb-cp-avatar-wrap {
		margin-top: 0;
	}

	.wcb-cp-logo,
	.wcb-cp-avatar {
		width: 88px;
		height: 88px;
		font-size: var(--wcb-text-2xl);
	}

	.wcb-cp-hero-info {
		padding-top: 0;
		width: 100%;
	}

	.wcb-cp-name-row {
		justify-content: center;
	}

	.wcb-cp-name {
		font-size: var(--wcb-text-xl);
	}

	.wcb-cp-tagline {
		margin-inline: auto;
	}

	.wcb-cp-meta-chips {
		justify-content: center;
	}

	.wcb-cp-links {
		justify-content: center;
	}

	.wcb-cp-section {
		padding: var(--wcb-space-xl);
	}

	.wcb-cp-details-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wcb-space-md);
	}

	.wcb-cp-job-card {
		flex-wrap: wrap;
	}

	.wcb-cp-job-apply {
		width: 100%;
		justify-content: center;
	}
}

/* -- Theme-agnostic sidebar + title suppression --
 *
 * Many themes (Reign, BuddyX Pro, Astra, Kadence, etc.) reserve a column
 * slot for their primary sidebar on single posts. Hiding the sidebar
 * widgets with `display: none` alone leaves the column slot empty,
 * causing a wide whitespace strip on the right of our content. Below we
 * hide the sidebar AND expand the content column to fill the freed slot
 * so our in-block sidebar (rendered inside .wcb-cp-wrap) can use the
 * space. Selectors target the common content-column patterns found
 * across modern WP themes.
 *
 * `!important` policy: the rules below fight theme rules that themselves
 * ship `!important` declarations (Astra's container width, BuddyX Pro's
 * grid-template-columns, Reign's #sidebar display). Specificity alone
 * cannot beat the theme's own `!important` - this is the legitimate
 * use case the keyword exists for. Each `!important` in this section
 * is intentional and load-bearing; do not refactor without testing
 * against the four target themes.
 */
.wcb-company-page #secondary,
.wcb-company-page .widget-area,
.wcb-company-page aside.sidebar,
.wcb-company-page .sidebar-area,
.wcb-company-page .site-sidebar,
.wcb-company-page #sidebar { display: none !important; }

.wcb-company-page #primary,
.wcb-company-page .content-area,
.wcb-company-page .primary-content,
.wcb-company-page main.site-main,
.wcb-company-page .site-main,
.wcb-company-page .col-md-8,
.wcb-company-page .col-md-9,
.wcb-company-page .col-lg-8,
.wcb-company-page .col-lg-9 {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}

/* Collapse parent grid wrappers that reserve a column slot for the
 * (now hidden) theme sidebar. BuddyX Pro uses `.site-wrapper` with
 * `grid-template-columns: minmax(0, 1fr) 260px`, Astra uses `.ast-container`,
 * etc. Forcing a single-column grid here gives our content the full
 * width that was previously wasted by the reserved-but-empty sidebar
 * slot.
 */
.wcb-company-page .site-wrapper,
.wcb-company-page .ast-container,
.wcb-company-page .container-grid {
	grid-template-columns: minmax(0, 1fr) !important;
}

.wcb-company-page .entry-title,
.wcb-company-page .page-title,
.wcb-company-page h1.post-title,
.wcb-company-page .post-title,
.wcb-company-page .wp-block-post-title { display: none !important; }

.wcb-company-page .post-thumbnail,
.wcb-company-page .entry-thumbnail,
.wcb-company-page .featured-image,
.wcb-company-page .wp-block-post-featured-image,
.wcb-company-page .wp-post-image:not(.wcb-cp-logo) { display: none !important; }

/* `.wcb-load-more-*` and `.wcb-loading-label` live globally in
 * `assets/css/frontend-components.css`. */


@media (prefers-reduced-motion: reduce) {
	.wcb-cp-spinner {
		animation: none;
	}

	.wcb-ca-card,
	.wcb-cp-link,
	.wcb-cp-job-apply,
	.wcb-load-more-btn {
		transition: none;
	}
}