/**
 * Block: wp-career-board-pro/resume-builder
 *
 * Premium-feel pattern: transparent block container, hairline section
 * dividers, uppercase eyebrow labels per accordion, light-bordered entry
 * cards that lift on hover, and primary CTA matching job-form-simple.
 * 100% token-driven via --wcb-* tokens from frontend-tokens.css.
 */

/* Page chrome (theme title + sidebar) is suppressed by Free's full-width
 * page template, which the resume-builder block now opts into via Pro's
 * `wcb_fullwidth_block_names` filter (see `class-pro-plugin.php`). The
 * earlier `display: none !important` hack on `.entry-title` / `#secondary`
 * / `.widget-area` etc. violated `wp-plugin-development` Part 7.6.2 because
 * it left the markup in the DOM for screen readers and crawlers; the
 * registered-template path is the skill-mandated replacement.
 *
 * Native `[hidden]` honored explicitly so interactivity-driven sub-states
 * collapse without theme defaults overriding.
 */
/* (0,2,1) selector beats the (0,1,0) display rules below on
 * specificity, no `!important` needed. */
.wp-block-wcb-resume-builder [hidden] {
	display: none;
}

/* ── Block container — card chrome that matches `.wcb-card` from
 * `wcb-ui.css` so the resume builder reads as part of the same product
 * family as the candidate / employer dashboards. The previous transparent
 * shell looked like the form sat directly on the page background and
 * confused customers about where the section boundary was. */
.wcb-resume-builder {
	background: var( --wcb-base, #ffffff );
	border: 1px solid var( --wcb-border, #e2e8f0 );
	border-radius: var( --wcb-radius-lg, 10px );
	box-shadow: var( --wcb-shadow-sm );
	padding: var( --wcb-space-2xl );
	font-family: inherit;
	color: var( --wcb-contrast, #0f172a );
}

@media (max-width: 640px) {
	.wcb-resume-builder {
		padding: var( --wcb-space-lg );
		border-radius: var( --wcb-radius-md, 8px );
	}
}

.wcb-rb-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --wcb-space-lg );
	padding-bottom: var( --wcb-space-xl );
	margin-bottom: var( --wcb-space-3xl );
	border-bottom: 1px solid var( --wcb-border, #e2e8f0 );
}

.wcb-rb-visibility-note {
	margin: calc( -1 * var( --wcb-space-2xl ) ) 0 var( --wcb-space-2xl );
	font-size: var( --wcb-text-sm, 13px );
	line-height: 1.5;
	color: var( --wcb-text-secondary, #64748b );
}

.wcb-rb-visibility-note--private {
	color: #b45309;
}

.wcb-rb-header-actions {
	display: flex;
	align-items: center;
	gap: var( --wcb-space-lg );
	flex-shrink: 0;
}

.wcb-rb-visibility-toggle {
	display: inline-flex;
	align-items: center;
	gap: var( --wcb-space-xs );
	font-size: var( --wcb-text-base );
	color: var( --wcb-text-secondary );
	cursor: pointer;
	user-select: none;
	font-family: inherit;
}

.wcb-rb-title {
	font-size: var( --wcb-text-xl );
	font-weight: var( --wcb-font-bold );
	color: var( --wcb-contrast, #0f172a );
	margin: 0;
}

/* ── Professional Summary ────────────────────────────────────────────── */
.wcb-rb-summary-section {
	margin-bottom: var( --wcb-space-3xl );
	padding-bottom: var( --wcb-space-3xl );
	border-bottom: 1px solid var( --wcb-border, #e2e8f0 );
}

.wcb-rb-summary-label {
	display: block;
	font-size: var( --wcb-text-xs );
	font-weight: var( --wcb-font-bold );
	color: var( --wcb-text-secondary );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var( --wcb-space-sm );
}

.wcb-rb-summary-textarea {
	width: 100%;
	padding: var( --wcb-space-md ) var( --wcb-space-lg );
	border: 1px solid var( --wcb-border, #e2e8f0 );
	border-radius: var( --wcb-radius-md );
	font-size: var( --wcb-text-base );
	line-height: var( --wcb-leading-normal );
	font-family: inherit;
	color: var( --wcb-contrast, #0f172a );
	background: var( --wcb-base, #ffffff );
	box-sizing: border-box;
	resize: vertical;
	min-height: 110px;
	transition: border-color var( --wcb-transition-fast ), box-shadow var( --wcb-transition-fast );
}

.wcb-rb-summary-textarea:hover {
	border-color: var( --wcb-text-tertiary );
}

.wcb-rb-summary-textarea:focus {
	border-color: var( --wcb-primary, #2563eb );
	box-shadow: var( --wcb-shadow-focus );
}

.wcb-rb-summary-textarea:focus-visible {
	outline: 2px solid var( --wcb-primary, #2563eb );
	outline-offset: 2px;
	border-color: var( --wcb-primary, #2563eb );
	box-shadow: var( --wcb-shadow-focus );
}

/* ── Accordion — sections separated by hairline dividers, no boxed cards ── */
.wcb-rb-accordion {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.wcb-rb-accordion-section {
	border: 0;
	border-bottom: 1px solid var( --wcb-border, #e2e8f0 );
	border-radius: 0;
	overflow: hidden;
	background: transparent;
}

.wcb-rb-accordion-section:last-child {
	border-bottom: 0;
}

.wcb-rb-accordion-header {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var( --wcb-space-sm );
	padding: var( --wcb-space-lg ) 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	text-align: start;
	transition: color var( --wcb-transition-fast );
}

.wcb-rb-accordion-section .wcb-rb-accordion-header:hover,
.wcb-rb-accordion-section .wcb-rb-accordion-header:focus {
	color: var( --wcb-primary, #2563eb );
	background: transparent;
}

/* Theme guard: aggressive themes (e.g. BuddyX) repaint bare <button>
 * backgrounds with their primary colour via an !important / high-specificity
 * rule, which turns these intentionally flat section headers into solid bars
 * with low-contrast labels. Specificity alone does not win here, so re-assert
 * the transparent background with !important — scoped narrowly to this header. */
[class*="wp-block-wcb-"] button.wcb-rb-accordion-header,
[class*="wp-block-wcb-"] button.wcb-rb-accordion-header:hover,
[class*="wp-block-wcb-"] button.wcb-rb-accordion-header:focus {
	background: transparent !important;
}

.wcb-rb-accordion-title {
	flex: 1;
	min-width: 0;
	font-size: var( --wcb-text-xs );
	font-weight: var( --wcb-font-bold );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wcb-text-secondary );
}

.wcb-rb-accordion-section .wcb-rb-accordion-header:hover .wcb-rb-accordion-title,
.wcb-rb-accordion-header.wcb-open .wcb-rb-accordion-title {
	color: var( --wcb-primary, #2563eb );
}

.wcb-rb-accordion-count {
	font-size: var( --wcb-text-xs );
	color: var( --wcb-text-secondary );
	font-weight: var( --wcb-font-medium );
	min-width: var( --wcb-space-xl );
	text-align: end;
}

.wcb-rb-accordion-chevron {
	font-size: var( --wcb-text-lg );
	color: var( --wcb-text-tertiary );
	transition: transform var( --wcb-transition-snappy );
	line-height: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.wcb-rb-accordion-chevron {
		transition: none;
	}
}

.wcb-rb-accordion-header.wcb-open .wcb-rb-accordion-chevron {
	transform: rotate( 90deg );
	color: var( --wcb-primary, #2563eb );
}

.wcb-rb-accordion-body {
	padding: 0 0 var( --wcb-space-2xl );
	display: flex;
	flex-direction: column;
	gap: var( --wcb-space-md );
}

.wcb-rb-empty {
	font-size: var( --wcb-text-base );
	color: var( --wcb-text-secondary );
	margin: 0;
}

.wcb-rb-add-btn {
	align-self: flex-start;
}

/* ── Entry cards — light hairline border, hover-lift ─────────────────── */
.wcb-rb-entry-card {
	background: var( --wcb-base, #ffffff );
	border: 1px solid var( --wcb-border, #e2e8f0 );
	border-radius: var( --wcb-radius-md );
	overflow: hidden;
	box-shadow: var( --wcb-shadow-sm );
	transition: box-shadow var( --wcb-transition-fast ), transform var( --wcb-transition-fast ), border-color var( --wcb-transition-fast );
}

.wcb-rb-entry-card:hover {
	box-shadow: var( --wcb-shadow-md );
	transform: translateY( -1px );
	border-color: var( --wcb-text-tertiary );
}

.wcb-rb-entry-compact {
	display: flex;
	align-items: center;
	gap: var( --wcb-space-md );
	padding: var( --wcb-space-md ) var( --wcb-space-lg );
	flex-wrap: wrap;
}

.wcb-rb-entry-primary {
	font-size: var( --wcb-text-base );
	color: var( --wcb-contrast, #0f172a );
	font-weight: var( --wcb-font-medium );
	min-width: 0;
}

.wcb-rb-entry-primary:not( :empty ) ~ .wcb-rb-entry-primary::before {
	content: '\00B7';
	margin-inline-end: var( --wcb-space-sm );
	color: var( --wcb-text-tertiary );
}

.wcb-rb-entry-actions {
	margin-inline-start: auto;
	display: flex;
	gap: var( --wcb-space-xs );
	flex-shrink: 0;
}

/* Icon-only action buttons on entry rows. Keep visual chrome minimal so the
 * resume content stays the focus; tooltip + aria-label carry the meaning. */
.wcb-rb-entry-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	background: transparent;
	border: 1px solid var( --wcb-border, #e2e8f0 );
	border-radius: var( --wcb-radius-md );
	color: var( --wcb-text-secondary );
	cursor: pointer;
	font-family: inherit;
	box-sizing: border-box;
	transition: background var( --wcb-transition-fast ), color var( --wcb-transition-fast ), border-color var( --wcb-transition-fast );
}

.wcb-rb-entry-icon-btn .wcb-icon {
	width: 18px;
	height: 18px;
}

.wcb-rb-entry-icon-btn:hover {
	background: var( --wcb-bg-subtle );
}

.wcb-rb-entry-icon-btn--edit:hover,
.wcb-rb-entry-icon-btn--edit:focus-visible {
	border-color: var( --wcb-primary, #2563eb );
	color: var( --wcb-primary, #2563eb );
}

.wcb-rb-entry-icon-btn--remove:hover,
.wcb-rb-entry-icon-btn--remove:focus-visible {
	border-color: var( --wcb-danger );
	color: var( --wcb-danger );
}

.wcb-rb-entry-icon-btn:focus-visible {
	outline: 2px solid var( --wcb-primary, #2563eb );
	outline-offset: 2px;
}

@media ( max-width: 640px ) {
	.wcb-rb-entry-icon-btn {
		width: 40px;
		height: 40px;
	}
}

/* ── Edit modal/form — match simple-form input styling ───────────────── */
.wcb-rb-entry-form {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --wcb-space-lg );
	padding: var( --wcb-space-xl );
	border-top: 1px solid var( --wcb-border, #e2e8f0 );
	background: var( --wcb-bg-subtle );
}

.wcb-rb-field--full {
	grid-column: 1 / -1;
}

.wcb-rb-field--check {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
}

.wcb-rb-field--actions {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: var( --wcb-space-md );
	padding-top: var( --wcb-space-xs );
}

.wcb-rb-label {
	display: block;
	font-size: var( --wcb-text-sm );
	font-weight: var( --wcb-font-semibold );
	color: var( --wcb-contrast, #0f172a );
	margin-bottom: var( --wcb-space-xs );
	letter-spacing: 0;
	text-transform: none;
}

.wcb-rb-input,
.wcb-rb-textarea {
	width: 100%;
	padding: var( --wcb-space-md ) var( --wcb-space-lg );
	border: 1px solid var( --wcb-border, #e2e8f0 );
	border-radius: var( --wcb-radius-md );
	font-size: var( --wcb-text-base );
	line-height: var( --wcb-leading-tight );
	font-family: inherit;
	color: var( --wcb-contrast, #0f172a );
	background: var( --wcb-base, #ffffff );
	box-sizing: border-box;
	transition: border-color var( --wcb-transition-fast ), box-shadow var( --wcb-transition-fast );
}

.wcb-rb-input:hover,
.wcb-rb-textarea:hover {
	border-color: var( --wcb-text-tertiary );
}

.wcb-rb-input:focus,
.wcb-rb-textarea:focus {
	border-color: var( --wcb-primary, #2563eb );
	box-shadow: var( --wcb-shadow-focus );
}

.wcb-rb-input:focus-visible,
.wcb-rb-textarea:focus-visible {
	outline: 2px solid var( --wcb-primary, #2563eb );
	outline-offset: 2px;
	border-color: var( --wcb-primary, #2563eb );
	box-shadow: var( --wcb-shadow-focus );
}

.wcb-rb-textarea {
	resize: vertical;
	min-height: 90px;
	line-height: var( --wcb-leading-normal );
}

.wcb-rb-check-label {
	display: flex;
	align-items: center;
	gap: var( --wcb-space-sm );
	font-size: var( --wcb-text-base );
	font-weight: var( --wcb-font-medium );
	color: var( --wcb-contrast, #0f172a );
	cursor: pointer;
}

.wcb-rb-check-label input[type="checkbox"] {
	width: var( --wcb-icon-md );
	height: var( --wcb-icon-md );
	accent-color: var( --wcb-primary, #2563eb );
	margin: 0;
}

.wcb-rb-remove-btn {
	background: none;
	border: 0;
	font-size: var( --wcb-text-sm );
	color: var( --wcb-danger );
	cursor: pointer;
	padding: var( --wcb-space-xs ) var( --wcb-space-sm );
	font-family: inherit;
	font-weight: var( --wcb-font-medium );
}

.wcb-rb-remove-btn:hover {
	text-decoration: underline;
}

/* ── My Resumes tab in candidate dashboard ───────────────────────────── */
.wcb-resumes-header {
	margin-bottom: var( --wcb-space-lg );
}

.wcb-resume-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var( --wcb-space-lg );
	border: 1px solid var( --wcb-border, #e2e8f0 );
	border-radius: var( --wcb-radius-md );
	background: var( --wcb-base, #ffffff );
	margin-bottom: var( --wcb-space-md );
	gap: var( --wcb-space-lg );
	box-shadow: var( --wcb-shadow-sm );
	transition: box-shadow var( --wcb-transition-fast ), transform var( --wcb-transition-fast );
}

.wcb-resume-card:hover {
	box-shadow: var( --wcb-shadow-md );
	transform: translateY( -1px );
}

.wcb-resume-card-title {
	font-weight: var( --wcb-font-semibold );
	font-size: var( --wcb-text-md );
	color: var( --wcb-contrast, #0f172a );
	display: block;
}

.wcb-resume-card-date {
	font-size: var( --wcb-text-sm );
	color: var( --wcb-text-secondary );
}

.wcb-resume-card-actions {
	display: flex;
	gap: var( --wcb-space-sm );
	flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media ( max-width: 900px ) {
	.wcb-rb-entry-form {
		gap: var( --wcb-space-md );
		padding: var( --wcb-space-lg );
	}
}

@media ( max-width: 640px ) {
	.wcb-rb-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var( --wcb-space-md );
	}

	.wcb-rb-entry-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.wcb-resume-card {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ── Saved message ───────────────────────────────────────────────────── */
.wcb-rb-saved-msg {
	display: none;
	font-size: var( --wcb-text-base );
	color: var( --wcb-success-fg );
	font-weight: var( --wcb-font-medium );
	margin-top: var( --wcb-space-md );
}

.wcb-rb-saved-msg.wcb-shown {
	display: block;
}

/* ── Generic custom section entry rows ───────────────────────────────── */
.wcb-resume-entry-row {
	font-size: var( --wcb-text-base );
	color: var( --wcb-text-secondary );
	margin: 0 0 var( --wcb-space-xs );
}

.wcb-resume-entry-field-label {
	font-weight: var( --wcb-font-semibold );
	color: var( --wcb-contrast, #0f172a );
}

/* ── Shared button tokens — match simple-form primary CTA ────────────── */
.wcb-cbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var( --wcb-space-md ) var( --wcb-space-2xl );
	border-radius: var( --wcb-radius-md );
	font-size: var( --wcb-text-md );
	font-weight: var( --wcb-font-semibold );
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	font-family: inherit;
	box-sizing: border-box;
	transition: transform var( --wcb-transition-fast ), box-shadow var( --wcb-transition-fast ), background var( --wcb-transition-fast ), color var( --wcb-transition-fast ), border-color var( --wcb-transition-fast );
}

.wcb-cbtn--sm {
	padding: var( --wcb-space-sm ) var( --wcb-space-md );
	font-size: var( --wcb-text-sm );
}

.wcb-cbtn--primary {
	background: var( --wcb-primary, #2563eb );
	color: var(--wcb-on-primary, #ffffff);
	box-shadow: var( --wcb-shadow-sm );
}

.wcb-cbtn--primary:hover:not( :disabled ) {
	transform: translateY( -1px );
	box-shadow: var( --wcb-shadow-md );
}

.wcb-cbtn--primary:active:not( :disabled ) {
	transform: translateY( 0 );
}

.wcb-cbtn--primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.wcb-cbtn--ghost {
	background: transparent;
	border: 1px solid var( --wcb-border, #e2e8f0 );
	color: var( --wcb-text-secondary );
}

.wcb-cbtn--ghost:hover {
	background: var( --wcb-bg-subtle );
	border-color: var( --wcb-primary, #2563eb );
	color: var( --wcb-primary, #2563eb );
}