/**
 * WP Career Board — Editor.js surface styles
 *
 * Wraps Editor.js inside our token-based design system so the rich-text
 * field reads like every other `.wcb-field-input` — same border, same
 * focus ring, same radius. Editor.js's own CSS (loaded inline by the
 * library) handles the inline toolbar, block menu, and selection chrome.
 */

.wcb-editor {
	display: block;
	border: 1.5px solid var(--wcb-border);
	border-radius: var(--wcb-radius-md);
	background: var(--wcb-base);
	transition: border-color var(--wcb-transition-fast), box-shadow var(--wcb-transition-fast);
}

.wcb-editor:focus-within {
	border-color: var(--wcb-primary);
	box-shadow: var(--wcb-shadow-focus);
}

.wcb-editor-holder {
	min-height: 200px;
	padding: var(--wcb-space-md) var(--wcb-space-lg);
	font-family: inherit;
	font-size: var(--wcb-text-md);
	line-height: 1.6;
	color: var(--wcb-contrast);
}

/*
 * The hidden textarea preserves form-submission semantics and the
 * Interactivity API binding without showing visually. `hidden` plus
 * the SR-only fallback keeps it accessible to assistive tech as a
 * focus target if we ever need it.
 */
.wcb-editor-source {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Editor.js content typography — match the rest of the form. */

.wcb-editor-holder .ce-block__content,
.wcb-editor-holder .ce-toolbar__content {
	max-width: 100%;
}

.wcb-editor-holder h2,
.wcb-editor-holder h3,
.wcb-editor-holder h4 {
	margin: 0.75em 0 0.4em;
	color: var(--wcb-contrast);
}

.wcb-editor-holder h2 { font-size: 1.35em; font-weight: var(--wcb-font-bold); }
.wcb-editor-holder h3 { font-size: 1.15em; font-weight: var(--wcb-font-bold); }
.wcb-editor-holder h4 { font-size: 1em; font-weight: var(--wcb-font-semibold); }

.wcb-editor-holder p {
	margin: 0 0 0.5em;
}

.wcb-editor-holder ul,
.wcb-editor-holder ol {
	margin: 0 0 0.75em;
	padding-inline-start: 1.5em;
}

.wcb-editor-holder li {
	margin-bottom: 0.25em;
}

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

.wcb-editor-holder blockquote,
.wcb-editor-holder .cdx-quote {
	margin: 0.75em 0;
	padding: 0.25em 0 0.25em 1em;
	border-inline-start: 3px solid var(--wcb-border);
	color: var(--wcb-text-secondary);
	font-style: italic;
}

.wcb-editor-holder mark,
.wcb-editor-holder .cdx-marker {
	background: rgba(255, 220, 0, 0.4);
	padding: 0 2px;
	border-radius: 2px;
}

.wcb-editor-holder code,
.wcb-editor-holder .cdx-inline-code {
	background: var(--wcb-bg-subtle, rgba(0, 0, 0, 0.05));
	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;
}

.wcb-editor-holder hr,
.wcb-editor-holder .ce-delimiter {
	border: none;
	border-top: 1px solid var(--wcb-border);
	margin: 1.25em 0;
}

/* Editor.js block-options popovers / selection should win over our z-index stack. */
.ce-popover,
.ce-toolbar,
.ce-inline-toolbar {
	z-index: 5;
}