/**
 * Página individual de vaga do tema Cais.
 * Réplica do mockup aprovado — usa os tokens de variables.css.
 *
 * Reutiliza .sidebar-card/.sidebar-title (widgets) e a paleta rotativa de
 * badges .job-badge-c1..c5/.job-badge-remote já definidas em jobs-listing.css
 * (carregado em todas as páginas) — carregado como dependência deste ficheiro
 * para que a ordem de carregamento garanta que os ajustes daqui (padding,
 * tamanho) vencem para esta página especificamente.
 *
 * Nota: o mockup usava --color-accent (dourado) no fio de destaque do
 * cabeçalho e do footer. Mantendo a paleta só-teal do CLAUDE.md, usámos um
 * gradiente teal → teal-escuro, tal como em jobs-listing.css/footer.css.
 */

/* ============ BREADCRUMB ============ */
.breadcrumb {
	max-width: var(--container-max-width, 1240px);
	margin: 0 auto;
	padding: var(--space-md) var(--space-lg) 0;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.breadcrumb a {
	text-decoration: none;
	color: var(--color-text-secondary);
}

.breadcrumb a:hover {
	color: var(--color-primary);
}

/* ============ JOB HEADER ============ */
.job-header-card {
	max-width: var(--container-max-width, 1240px);
	margin: var(--space-lg) auto 0;
	padding: 0 var(--space-lg);
}

.job-header-inner {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	position: relative;
	overflow: hidden;
}

.job-header-inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.job-header-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-lg);
	flex-wrap: wrap;
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-lg);
}

.job-header-info h1 {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--text-3xl);
	letter-spacing: -0.01em;
	margin-bottom: 0.6rem;
}

.job-header-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1.1rem;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

/*
 * v1.84.1 — .job-header-inner (pai) tem overflow:hidden só para recortar
 * a barra decorativa ::before aos cantos arredondados (nunca removido,
 * continua necessário) — mas isso significa que qualquer conteúdo aqui
 * dentro que exceda a largura fica silenciosamente CORTADO em vez de
 * quebrar linha. Um nome de empresa/localização muito longo, sem espaços
 * suficientes para quebrar antes do limite, precisa de poder quebrar a
 * meio da palavra.
 */
.job-header-meta span {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
	white-space: normal;
}

.job-header-meta svg {
	width: 14px;
	height: 14px;
}

.job-header-meta a {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 600;
}

/* Selo de empresa verificada */
.verified-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--color-primary);
	flex-shrink: 0;
}

.verified-badge svg {
	width: 9px;
	height: 9px;
	stroke: #fff;
	stroke-width: 3;
}

.job-badge {
	display: inline-block;
	font-size: var(--text-sm);
	font-weight: 700;
	padding: 0.25rem 0.7rem;
	border-radius: var(--radius-sm);
	margin-top: 0.7rem;
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
	white-space: normal;
}

/* v1.61.0 — Tipo de Vaga passou a link para o arquivo da taxonomia
   (taxonomy-job_listing_type.php); hover discreto, nunca um botão novo —
   a cor/fundo do badge em si já vêm de .job-badge-c1..c5 (jobs-listing.css). */
a.job-badge:hover {
	opacity: 0.8;
}

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

.btn-save {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-background);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.btn-save svg {
	width: 18px;
	height: 18px;
	stroke: var(--color-text-secondary);
}

.btn-save:hover {
	border-color: var(--color-primary);
}

.btn-save:hover svg {
	stroke: var(--color-primary);
}

.btn-save.is-saved {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-save.is-saved svg {
	stroke: #fff;
	fill: #fff;
}

/* Banner de vaga encerrada — cor de estado (--color-error), fundo/borda
   claros sem token equivalente em variables.css (par único desta situação). */
.closed-banner {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	background: #FDF2F0;
	border: 1px solid #F3D9D4;
	border-radius: var(--radius-sm);
	padding: 0.85rem 1.1rem;
	margin-bottom: var(--space-lg);
	font-size: var(--text-sm);
	color: var(--color-error);
	font-weight: 500;
}

.closed-banner svg {
	width: 18px;
	height: 18px;
	stroke: var(--color-error);
	flex-shrink: 0;
}

/*
 * Modo Escuro (v1.93.0) — override pontual, aprovado explicitamente: as
 * cores fixas do banner acima (#FDF2F0/#F3D9D4, sem token equivalente)
 * ficariam destoantes sobre o novo fundo escuro. Vermelho mais claro
 * (#f87171) escolhido para manter 5.39:1 de contraste sobre o novo fundo
 * do banner (#3b1f24), calculado, não adivinhado — --color-error em si
 * nunca é alterado (usado noutros contextos não auditados nesta fase).
 */
html[data-theme="dark"] .closed-banner {
	background: #3b1f24;
	border-color: #5c2a30;
	color: #f87171;
}

html[data-theme="dark"] .closed-banner svg {
	stroke: #f87171;
}

/* Resumo integrado — grid de mini-blocos dentro do cabeçalho */
.job-summary-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-md);
}

.summary-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.summary-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-light);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.summary-icon svg {
	width: 16px;
	height: 16px;
	stroke: var(--color-primary);
}

.summary-text {
	min-width: 0;
}

.summary-label {
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-secondary);
}

/*
 * v1.84.2 — causa raiz do corte de "Categoria" (ex: "Desenvolvimento
 * Comunitário") no cabeçalho mobile: nunca foi .job-badge (v1.84.1, já
 * corrigido), foi este .summary-value — white-space:nowrap +
 * text-overflow:ellipsis, pensado para valores curtos ("Tempo Inteiro",
 * "Há 2 dias"), corta silenciosamente qualquer valor mais longo do que a
 * coluna do grid (3 ou 2 colunas em mobile, ver breakpoints abaixo).
 * .summary-text (pai imediato) já tinha min-width:0 desde sempre — nunca
 * foi um bug de "min-width:auto do flexbox" (a família de bug já
 * documentada 2x no projeto), só a truncatura deliberada do valor.
 */
.summary-value {
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-text);
	overflow-wrap: anywhere;
	word-break: break-word;
	white-space: normal;
}

/* v1.61.0 — Categoria/Nível/Localização passaram a links para o arquivo
   da respetiva taxonomia; mantém a mesma tipografia (herda de
   .summary-value), só um hover discreto — nunca um botão. */
.summary-value a {
	color: inherit;
	text-decoration: none;
}

.summary-value a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

/* ============ SHARE ============
 * .share-row é o template-part reutilizável (template-parts/content-share-row.php),
 * incluído em dois sítios: dentro do cartão do cabeçalho (redesenhado — linha
 * final separada por border-top, em vez de ficar solta por baixo do card) e
 * no fim do conteúdo, antes do CTA. Os seletores descendentes tratam de cada
 * contexto sem precisar de variantes/classes extra.
 */
.share-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.job-header-inner .share-row {
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.job-content .share-row {
	margin: var(--space-lg) 0;
}

.share-label {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	font-weight: 600;
	margin-right: 0.3rem;
}

.share-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #F3F6F5;
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
}

/*
 * Modo Escuro (v1.93.0) — override pontual, aprovado explicitamente:
 * #F3F6F5 (cinza quase branco, sem token equivalente) ficaria quase
 * invisível sobre o novo fundo escuro. Reaproveita --color-border (já
 * redefinida para #334155 dentro deste tema, variables.css) em vez de um
 * hex novo — nunca uma terceira cor a manter.
 */
html[data-theme="dark"] .share-btn {
	background: var(--color-border);
}

.share-btn svg {
	width: 15px;
	height: 15px;
	stroke: var(--color-text-secondary);
}

.share-btn:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.share-btn:hover svg {
	stroke: #fff;
}

.share-btn.is-copied {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.share-btn.is-copied svg {
	stroke: #fff;
}

/* ============ LAYOUT ============ */
.job-layout {
	max-width: var(--container-max-width, 1240px);
	margin: 0 auto;
	padding: var(--space-lg) var(--space-lg) var(--space-xl);
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: var(--space-xl);
	align-items: start;
}

.job-layout.no-sidebar {
	grid-template-columns: 1fr;
}

/* ============ CONTEÚDO ============ */
.job-content {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-xl);
}

.job-content h2 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-xl);
	margin: var(--space-lg) 0 var(--space-sm);
}

.job-content h2:first-child {
	margin-top: 0;
}

/*
 * v1.84.1 — causa raiz do slider "Vaga Individual — Descrição" sem
 * efeito: font-size em .job-content (v1.84.0) nunca chegava ao texto
 * real, porque .job-content p/.job-content li já tinham a sua própria
 * declaração (mais específica, var(--text-base)) — font-size só herda do
 * pai quando o filho não tem a sua própria. Corrigido aplicando a
 * variável diretamente aqui, onde o texto é mesmo renderizado.
 */
.job-content p {
	font-size: var(--cais-single-job-font-size, 15px);
	line-height: 1.7;
	color: var(--color-text);
	margin-bottom: var(--space-sm);
}

.job-content ul {
	padding-left: 1.3rem;
	margin-bottom: var(--space-sm);
	list-style: disc;
}

.job-content li {
	font-size: var(--cais-single-job-font-size, 15px);
	line-height: 1.7;
	color: var(--color-text);
	margin-bottom: 0.3rem;
}

.job-tags-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.job-tag {
	font-size: var(--text-sm);
	padding: 0.35rem 0.8rem;
	border-radius: var(--radius-pill);
	background: #F3F6F5;
	color: var(--color-text-secondary);
	border: 1px solid var(--color-border);
	text-decoration: none;
}

.job-tag:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Modo Escuro (v1.93.0) — mesmo override/razão do .share-btn acima. */
html[data-theme="dark"] .job-tag {
	background: var(--color-border);
}

/* CTA de candidatura */
.content-apply-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	background: var(--color-primary-light);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	margin-top: var(--space-lg);
	flex-wrap: wrap;
}

.content-apply-cta p {
	font-size: var(--text-base);
	color: var(--color-primary-dark);
	font-weight: 600;
	margin: 0;
}

.btn-apply {
	padding: 0.85rem 2rem;
	background: var(--color-primary);
	color: var(--color-primary-contrast, #ffffff) !important;
	border: none;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--text-base);
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	display: inline-block;
}

.btn-apply:hover {
	background: var(--color-primary-dark);
}

.btn-apply:disabled,
.btn-apply[disabled] {
	background: #C9D2D0;
	cursor: not-allowed;
}

.btn-apply:disabled:hover,
.btn-apply[disabled]:hover {
	background: #C9D2D0;
}

/*
 * Modo Escuro (v1.93.0) — override pontual, aprovado explicitamente:
 * #C9D2D0 ficaria demasiado claro/destacado sobre o novo fundo escuro
 * para um estado "desativado". Reaproveita --color-border, mesma razão
 * já usada acima para .share-btn/.job-tag.
 */
html[data-theme="dark"] .btn-apply:disabled,
html[data-theme="dark"] .btn-apply[disabled],
html[data-theme="dark"] .btn-apply:disabled:hover,
html[data-theme="dark"] .btn-apply[disabled]:hover {
	background: var(--color-border);
}

/* Ação de candidatura real (shortcode nativo do WP Job Manager) — cobre os
   elementos mais comuns que o plugin/addon Applications pode gerar. */
.cta-apply-action .application_button,
.cta-apply-action input[type="submit"],
.cta-apply-action button[type="submit"] {
	padding: 0.85rem 2rem;
	background: var(--color-primary);
	color: var(--color-primary-contrast, #ffffff) !important;
	border: none;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--text-base);
	cursor: pointer;
	white-space: nowrap;
}

.cta-apply-action .application_button:hover,
.cta-apply-action input[type="submit"]:hover,
.cta-apply-action button[type="submit"]:hover {
	background: var(--color-primary-dark);
}

/* Estado "já candidatado" */
.applied-state {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8rem 1.4rem;
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: var(--text-base);
}

.applied-state svg {
	width: 17px;
	height: 17px;
	stroke: var(--color-primary-dark);
}

/* ============ SECÇÕES DE CONTEÚDO (vagas semelhantes / artigos) ============ */
.content-section {
	margin-top: var(--space-lg);
}

/* Modo Escuro (v1.93.0) — mesmo bug/correção de .sidebar-title
   (jobs-listing.css): vive fora de .sidebar-card, precisa da sua
   própria declaração. */
.content-section-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-lg);
	color: var(--color-heading, #0f172a);
	margin-bottom: var(--space-md);
}

.related-grid,
.articles-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.related-card {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	text-decoration: none;
	color: inherit;
}

.related-card:hover {
	border-color: var(--color-primary);
}

/* Modo Escuro (v1.93.2) — mesmo bug/correção de .job-title/.sidebar-title
   (v1.93.0/v1.93.1): nunca teve "color" próprio, herdava preto absoluto
   do browser. */
.related-card-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-sm);
	color: var(--color-heading, #0f172a);
	margin-bottom: 0.4rem;
}

.related-card-meta {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.article-card {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

.article-card:hover {
	border-color: var(--color-primary);
}

.article-thumb {
	width: 100%;
	background: var(--color-primary-light);
	background-image: linear-gradient(135deg, var(--color-primary-light), #D8ECE8);
	background-size: cover;
	background-position: center;
}

.article-thumb.size-small {
	height: 90px;
}

.article-thumb.size-medium {
	height: 140px;
}

.article-thumb.size-large {
	height: 190px;
}

.article-card-body {
	padding: var(--space-md);
}

.article-card-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-sm);
	margin-bottom: 0.3rem;
	line-height: 1.35;
}

.article-card-meta {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

/* ============ SIDEBAR ============ */
.company-card-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-base);
	margin-bottom: 0.3rem;
}

.company-card-meta {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-md);
}

/* Widget nativo "Recent Jobs"/"Featured Jobs" — migrado para
   assets/css/widgets.css na v1.83.0 (generalizado para cobrir os 2
   widgets e enfileirado sempre, nas 4 sidebars do tema, nunca só aqui).
   Ver widgets.css para o histórico completo desta correção (achado do QA
   de contraste, 2026-09-02). */

.btn-view-company {
	display: block;
	text-align: center;
	padding: 0.6rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	color: var(--color-text);
}

.btn-view-company:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Zona de anúncio (widget Cais_Job_Ad_Widget) — a "sidebar-card" padrão dos
   widgets fica demasiado destacada para um anúncio; sobrepomos aqui um
   estilo mais neutro/discreto só quando este widget específico tem conteúdo. */
.widget_cais_job_ad_widget {
	border: 1px dashed var(--color-border);
	background: var(--color-background);
	text-align: center;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
	.job-layout {
		grid-template-columns: 1fr;
	}

	.related-grid,
	.articles-grid {
		grid-template-columns: 1fr 1fr;
	}

	.job-summary-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.job-header-top {
		flex-direction: column;
	}

	.job-header-actions {
		width: 100%;
	}

	.btn-apply {
		flex: 1;
	}

	.job-header-inner {
		padding: var(--space-lg);
	}

	.job-content {
		padding: var(--space-lg);
	}

	.related-grid,
	.articles-grid {
		grid-template-columns: 1fr;
	}

	.job-header-info h1 {
		font-size: var(--text-2xl);
	}

	.job-summary-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============ EXIGÊNCIA DE CURRÍCULO ≥75% (v1.67.0/v1.68.0) ============
   Partilhado entre template-application-page.php ([job_apply], carrega
   application-page.css, que já depende deste ficheiro) e o override
   wp-job-manager-resumes/apply-with-resume.php ("Apply with Resume", que
   renderiza na página NORMAL da vaga — só single-job.css, nunca
   application-page.css) — um único lugar em vez de duplicado nos dois.
   Mesmo padrão já usado em auth.css/header.css/submit-job.css para
   notices de erro/sucesso — color-mix() sobre --color-error/--color-success
   (variables.css), nunca cores inventadas. */
.resume-completion-notice {
	border-radius: var(--radius-sm);
	padding: var(--space-md);
	margin-bottom: var(--space-md);
	font-size: var(--text-sm);
	line-height: 1.5;
}

.resume-completion-notice-row {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.resume-completion-notice svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 1px;
}

.resume-completion-notice.is-warning {
	background: color-mix(in srgb, var(--color-error) 10%, transparent);
	color: var(--color-error);
}

.resume-completion-notice.is-success {
	background: color-mix(in srgb, var(--color-success) 12%, transparent);
	color: var(--color-success);
}

.resume-completion-cta {
	display: inline-block;
	margin-top: 0.6rem;
	font-weight: 700;
	text-decoration: underline;
	color: inherit;
}

/* Botões nativos desativados enquanto o currículo não atinge o limiar —
   nunca a única proteção real (ver cais_block_low_completion_resume_application()/
   cais_intercept_low_completion_apply_with_resume(), functions.php), só
   reforço visual. Cobre os dois formulários nativos distintos
   (.wp_job_manager_send_application_button do addon Applications,
   input[name="wp_job_manager_resumes_apply_with_resume"] do Resume
   Manager). */
.job-manager-application-form .wp_job_manager_send_application_button:disabled,
.apply_with_resume input[name="wp_job_manager_resumes_apply_with_resume"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ============ "CURRÍCULO ONLINE" — VISUALIZAR/EDITAR (v1.68.0) ============
   Substitui o link nativo quebrado (aponta para a página sem estilo
   /resume/{slug}/) por duas ações próprias do ecossistema — ver
   wp-job-manager-applications/form-fields/single-resume-field.php
   (override do tema). */
.cais-selected-resume {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.8rem;
	margin-top: 0.4rem;
}

.cais-selected-resume-name {
	font-weight: 700;
	font-size: var(--text-sm);
	color: var(--color-text);
}

.cais-selected-resume-actions {
	display: flex;
	gap: 0.5rem;
}

.cais-resume-action-btn {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--color-primary);
	background: var(--color-background);
	text-decoration: none;
	white-space: nowrap;
}

.cais-resume-action-btn:hover {
	border-color: var(--color-primary);
	background: var(--color-primary-light);
}

/* ============ Modal "Acesso Restrito" — candidatura de conta empregadora (v1.69.1) ============
   Classes próprias desta página (nunca .team-modal, definido só em
   team.css — ficheiro nunca carregado aqui), mesmo padrão visual
   estabelecido (overlay fixo + caixa centrada, team.css). */
.cais-apply-block-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 32, 30, 0.5);
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
	z-index: 200;
}

.cais-apply-block-modal-overlay.is-open {
	display: flex;
}

.cais-apply-block-modal {
	background: var(--color-background);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	max-width: 400px;
	width: 100%;
	text-align: center;
}

.cais-apply-block-modal h2 {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--color-text);
	margin-bottom: 0.6rem;
}

.cais-apply-block-modal p {
	font-size: 0.9rem;
	color: var(--color-text-secondary);
	margin-bottom: var(--space-md);
	line-height: 1.5;
}

.cais-apply-block-modal .btn-apply {
	display: inline-block;
}

/*
 * ============ PREMIUMIZAÇÃO DA PÁGINA SINGULAR DE VAGA (v1.89.0) ============
 * Classes injetadas via body_class() (cais_add_layout_body_classes(),
 * functions.php — guardadas por is_singular('job_listing')), nunca um
 * wrapper novo em single-job_listing.php (confirmado por auditoria: não
 * existe hoje nenhum wrapper único em torno de .breadcrumb/.job-header-card/
 * .job-layout, e criar um obrigaria a reestruturar um ficheiro com um
 * histórico deliberado de "nunca chamar the_content()").
 *
 * "Clássico" (body.cais-single-classic, default) nunca tem NENHUMA regra
 * própria aqui — é a AUSÊNCIA das 3 classes de estilo seguintes que o
 * define, preservando o layout já existente byte a byte.
 *
 * Granularidade do Bento confirmada explicitamente: só os 3 blocos
 * estruturais JÁ EXISTENTES (.job-header-inner/.job-content/cada
 * .sidebar-card, este último já embrulhado automaticamente pelo próprio
 * register_sidebar() desde sempre) — nunca subdivide .job-content em
 * cartões novos (descrição/CTA/secções continuam um único bloco), mesma
 * filosofia já usada com sucesso na Listagem de Vagas (v1.86.0).
 *
 * Risco de colisão confirmado por auditoria e sempre respeitado: .btn-apply
 * é reutilizado literalmente em template-application-page.php (com
 * .btn-continue) — TODA a regra desta secção que toca .btn-apply está
 * sempre scoped a um destes body.cais-single-*, nunca ao seletor nu, para
 * nunca vazar para essa página completamente diferente.
 */

/* ---------------- SaaS Moderno ---------------- */
.cais-single-saas .job-header-inner {
	border-color: transparent;
	border-radius: var(--radius-lg, 16px);
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.06);
}

.cais-single-saas .job-content {
	border-color: transparent;
	border-radius: var(--radius-lg, 16px);
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.06);
}

.cais-single-saas .sidebar-card {
	border-color: transparent;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}

/*
 * Sidebar fixa ao scroll — .job-layout já tem align-items:start (base,
 * necessário para sticky funcionar dentro de um grid), nunca precisou de
 * nenhuma alteração. var(--space-lg) de folga no topo para nunca colar
 * ao cabeçalho sticky do site (mesma norma de espaçamento, Regra 9 do
 * CLAUDE.md, já usada em toda a parte do tema).
 */
.cais-single-saas aside {
	position: sticky;
	top: var(--space-lg);
}

/* ---------------- Editorial ---------------- */
/*
 * Bug real, encontrado e corrigido ao testar ao vivo: h1 { font-size:
 * var(--cais-h1-size, 36px) !important; } (Tipografia global, style.css,
 * v1.81.1) aplica-se a QUALQUER <h1> do site, incluindo este — sem
 * !important aqui, o valor global vencia sempre (confirmado:
 * getComputedStyle devolvia sempre 36px, nunca o clamp() abaixo). Mesmo
 * princípio já usado no projeto para sobrepor deliberadamente um sistema
 * mais genérico com um mais específico — nunca toca em font-family/
 * font-weight/color (as outras 3 propriedades !important do mesmo bloco),
 * só font-size, o único que este estilo precisa de substituir.
 */
.cais-single-editorial .job-header-info h1 {
	font-size: clamp(2.2rem, 4vw, 3.4rem) !important;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.cais-single-editorial .job-header-inner {
	border: none;
	border-bottom: 2px solid var(--color-text);
	border-radius: 0;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
	background: transparent;
}

.cais-single-editorial .job-header-inner::before {
	content: none;
}

.cais-single-editorial .job-content {
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	padding-left: 0;
	padding-right: 0;
}

/*
 * Sidebar "demarcada por uma linha vertical simples" — remove o cartão
 * próprio de cada widget (fundo/borda/radius/sombra) a favor de uma única
 * regra vertical no CONTENTOR <aside>, nunca em cada .sidebar-card
 * individualmente (produziria 1 linha por widget, não 1 linha para a
 * coluna toda).
 */
.cais-single-editorial aside {
	border-left: 1px solid var(--color-text);
	padding-left: var(--space-lg);
}

.cais-single-editorial .sidebar-card {
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	padding-left: 0;
	padding-right: 0;
}

/* ---------------- Bento / Dashboard ---------------- */
/*
 * Fundo escurecido só nesta página (nunca o mesmo toggle sitewide do
 * Sistema de Contentor, v1.84.0/v1.85.0) — override direto e literal,
 * consistente com o MESMO valor já usado pelo estilo Bento da Listagem
 * de Vagas (v1.86.0, var(--cais-color-site-bg, #f8fafc)).
 */
body.cais-single-bento {
	background-color: var(--cais-color-site-bg, #f8fafc);
}

.cais-single-bento .job-header-inner,
.cais-single-bento .job-content {
	border-radius: var(--radius-md, 8px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cais-single-bento .sidebar-card {
	border-radius: var(--radius-md, 8px);
}

/* ---------------- Posição da Barra Lateral ---------------- */
/*
 * "sidebar-left": nunca via CSS "order" sozinho — com 2 tracks de
 * larguras DIFERENTES (1fr/340px), "order" apenas troca qual item entra
 * em qual track pela ordem de auto-placement, produzindo o resultado
 * errado (conteúdo estreito, sidebar larga). A troca correta troca a
 * PRÓPRIA ordem dos tracks (340px primeiro) e coloca cada elemento
 * explicitamente por grid-column, nunca dependente da ordem no DOM.
 */
.cais-single-layout-sidebar-left .job-layout {
	grid-template-columns: 340px 1fr;
}

.cais-single-layout-sidebar-left .job-content {
	grid-column: 2;
}

.cais-single-layout-sidebar-left aside {
	grid-column: 1;
}

/*
 * Mobile ignora sempre a escolha de "sidebar à esquerda" — o conteúdo da
 * vaga continua sempre primeiro, sidebar sempre abaixo, independentemente
 * do que foi escolhido para desktop (mesma especificidade da regra base
 * de .job-layout em @media (max-width:980px), mas 2 classes contra 1
 * garantem a vitória sem depender da ordem no ficheiro).
 */
@media (max-width: 980px) {
	.cais-single-layout-sidebar-left .job-layout {
		grid-template-columns: 1fr;
	}

	.cais-single-layout-sidebar-left .job-content,
	.cais-single-layout-sidebar-left aside {
		grid-column: 1;
	}
}

/* Sem sidebar, conteúdo centrado — reaproveita a MESMA variável já
   configurável do Sistema de Contentor (v1.84.0), nunca um valor novo. */
.cais-single-layout-no-sidebar-centered .job-layout,
.cais-single-layout-no-sidebar-centered .job-header-card {
	max-width: var(--cais-container-narrow-width, 750px);
}

.cais-single-layout-no-sidebar-centered .job-layout {
	grid-template-columns: 1fr;
}

.cais-single-layout-no-sidebar-centered aside {
	display: none;
}

/* ---------------- Alinhamento do Cabeçalho ---------------- */
.cais-single-align-center .job-header-top {
	flex-direction: column;
	align-items: center;
}

.cais-single-align-center .job-header-info {
	text-align: center;
}

.cais-single-align-center .job-header-meta {
	justify-content: center;
}

/* ---------------- Estilo do Botão "Candidatar-me" ---------------- */
@keyframes caisApplyPulse {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 45%, transparent);
	}
	70% {
		box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-primary) 0%, transparent);
	}
	100% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent);
	}
}

.cais-single-cta-pulse .btn-apply:not(:disabled) {
	animation: caisApplyPulse 2.2s ease-out infinite;
}

@media (max-width: 640px) {
	.cais-single-cta-floating-mobile .content-apply-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		margin: 0;
		border-radius: 0;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
	}

	/* Reserva espaço para a barra fixa nunca tapar o resto do conteúdo. */
	.cais-single-cta-floating-mobile .job-content {
		padding-bottom: 100px;
	}
}

/* ---------------- Motor Global de Embelezamento UI — Bordas (v1.91.0) ---------------- */
/*
 * Substitui por completo o Controlo Avançado de Bordas local desta
 * página (v1.89.0, cais_single_job_custom_border/.cais-single-custom-border)
 * — migrado para o motor global (body.cais-global-ui-active), reaproveitando
 * as MESMAS 3 variáveis brutas já emitidas por cais_get_colors_inline_css()
 * (--cais-global-border-width/-color/-opacity, sempre em :root quando o
 * motor está ativo) — nunca duplicadas. Token próprio a este ficheiro
 * (--cais-global-border-final, replicado de jobs-listing.css — cada
 * ficheiro é um contexto de enqueue distinto, nunca partilhado via um
 * terceiro ficheiro CSS).
 *
 * Geometria por Estilo, corrigida face à v1.89.0 (que aplicava a mesma
 * borda uniforme aos 3 blocos independentemente do Estilo): SaaS/Bento/
 * Clássico recebem borda completa nos 3 blocos estruturais; Editorial
 * preserva a sua identidade "painel sem borda" — só o cabeçalho ganha um
 * border-bottom (a MESMA direção já usada pela sua regra base, 2px solid
 * var(--color-text), acima), .job-content e .sidebar-card ficam de fora
 * de propósito (já são background:transparent/border:none por desenho do
 * Estilo — uma caixa completa aqui quebraria essa identidade). Seletores
 * compostos (body.cais-global-ui-active.cais-single-editorial, 2 classes)
 * garantem especificidade sempre maior do que a regra geral (1 classe),
 * sem depender de ordem no ficheiro. Nunca precisou de proteção de
 * border-left aqui: confirmado por auditoria que esta página não tem
 * nenhum indicador de "destaque" análogo ao das listagens.
 */
body.cais-global-ui-active {
	--cais-global-border-final: var(--cais-global-border-width, 1px) solid color-mix(in srgb, var(--cais-global-border-color, #E1E5E8) var(--cais-global-border-opacity, 100%), transparent);
}

body.cais-global-ui-active .job-header-inner,
body.cais-global-ui-active .job-content,
body.cais-global-ui-active .sidebar-card {
	border: var(--cais-global-border-final) !important;
}

body.cais-global-ui-active.cais-single-editorial .job-header-inner {
	border: none !important;
	border-bottom: var(--cais-global-border-final) !important;
}

body.cais-global-ui-active.cais-single-editorial .job-content,
body.cais-global-ui-active.cais-single-editorial .sidebar-card {
	border: none !important;
}