/**
 * Página Inteligente de Candidatura, Fase 1 (v1.64.0) + variante interna
 * (v1.65.0, Pontos 2+5).
 * Tokens mapeados para variables.css real (nunca os valores de exemplo do
 * próprio mockup aprovado) — mesmo princípio já usado no resto do projeto
 * (candidate-resume.css, kanban.css, etc.). .related-grid/.related-card/
 * .content-section/.content-section-title/.btn-apply reaproveitados
 * diretamente de single-job.css (dependência deste ficheiro), nunca
 * duplicados aqui.
 */

/* ============ LAYOUT (Regra 9: padding-top: var(--space-xl) no primeiro
   wrapper a seguir a get_header() — forma simples, nunca a soma em dois
   elementos usada como exceção documentada em single-job_listing.php) ============ */
.application-page-layout {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: var(--space-xl) var(--space-lg) var(--space-xl);
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: var(--space-xl);
	align-items: start;
}

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

.application-page-content {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-xl) 0;
}

.page-wrap {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 var(--space-lg);
}

/* ============ CABEÇALHO DA PÁGINA ============ */
.job-mini-header {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md) var(--space-lg);
	margin-bottom: var(--space-lg);
}

.job-mini-logo {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 800;
	flex-shrink: 0;
}

.job-mini-logo-img {
	object-fit: contain;
	background: var(--color-background);
	border: 1px solid var(--color-border);
}

/* Modo Escuro (v1.93.2) — .job-mini-title/.page-title nunca tiveram
   "color" próprio (mesmo bug já corrigido em .job-title/.sidebar-title/
   etc., v1.93.0/v1.93.1) — herdavam preto absoluto do browser, confirmado
   ao vivo na página real "Como Candidatar-se" (um dos 3 alvos da
   auditoria "Candidatar-me"). */
.job-mini-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-base);
	color: var(--color-heading, #0f172a);
}

.job-mini-company {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.page-title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--text-2xl);
	color: var(--color-heading, #0f172a);
	margin-bottom: 0.3rem;
}

.page-subtitle {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-lg);
	line-height: 1.6;
}

/* ============ CARDS DE INFORMAÇÃO ============ */
.info-card {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	margin-bottom: var(--space-md);
}

.info-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-secondary);
	margin-bottom: 0.4rem;
}

.info-value-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.info-value {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-lg);
	word-break: break-word;
}

.info-note {
	font-size: 0.83rem;
	color: var(--color-text-secondary);
	margin-top: 0.6rem;
}

/* ============ BOTÃO COPIAR ============ */
.copy-btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.82rem;
	cursor: pointer;
	position: relative;
}

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

.copy-btn svg {
	width: 14px;
	height: 14px;
}

.copy-tooltip {
	position: absolute;
	top: -28px;
	right: 0;
	background: var(--color-text);
	color: #fff;
	font-size: 0.7rem;
	padding: 0.2rem 0.5rem;
	border-radius: var(--radius-sm);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s;
}

.copy-tooltip.is-visible {
	opacity: 1;
}

/* ============ PASSO-A-PASSO ============ */
.steps-list {
	counter-reset: step;
	list-style: none;
}

/* Modo Escuro (v1.93.2) — mesmo bug/correção de .job-mini-title acima
   (texto de corpo, nunca título — var(--color-text), não
   var(--color-heading)). */
.steps-list li {
	counter-increment: step;
	display: flex;
	gap: 0.8rem;
	padding: 0.6rem 0;
	font-size: var(--text-sm);
	color: var(--color-text);
	line-height: 1.6;
}

.steps-list li::before {
	content: counter(step);
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============ SUGESTÃO DE MENSAGEM ============ */
.suggestion-box {
	background: var(--color-primary-light);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-md);
	margin-top: var(--space-md);
}

.suggestion-label {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.5rem;
}

.suggestion-text {
	font-size: 0.85rem;
	line-height: 1.7;
	color: var(--color-text-secondary);
	font-family: 'Courier New', monospace;
	white-space: pre-line;
}

.suggestion-disclaimer {
	font-size: 0.78rem;
	color: var(--color-text-secondary);
	margin-top: 0.7rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--color-border);
}

/* ============ CHECKLIST INFORMATIVO ============ */
.checklist-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0;
	font-size: var(--text-sm);
}

.checklist-item input {
	width: 17px;
	height: 17px;
	accent-color: var(--color-primary);
}

/* ============ AVISO DE TRANSPARÊNCIA ============
   Mesma paleta de aviso já usada no resto do projeto (.job-badge-c2 em
   jobs-listing.css, dashboards) — valores literais, nunca uma classe
   partilhada (nenhuma existe; confirmado por grep antes de escrever). */
.transparency-note {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	background: #FBF0DC;
	color: #8A5F16;
	border-radius: var(--radius-sm);
	padding: var(--space-md);
	font-size: 0.85rem;
	line-height: 1.5;
	margin-bottom: var(--space-lg);
}

.transparency-note svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 2px;
}

/* ============ BOTÃO FINAL ============
   Mesma cor/tipografia de .btn-apply (single-job.css) — só o layout muda
   (bloco, largura total), por ser o CTA final de uma página-guia, não um
   botão inline dentro de um cartão de candidatura. */
.btn-continue {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	padding: 1rem;
	margin-bottom: var(--space-xl);
}

.btn-continue svg {
	width: 16px;
	height: 16px;
}

/* ============ VARIANTE INTERNA — FORMULÁRIO NATIVO [job_apply] ============
   v1.65.0 (Ponto 2) — estilo leve para o formulário nativo do WPJM core +
   addon Applications (job-manager-application-form), NUNCA tocado via PHP
   override — só CSS, escopado às classes nativas reais confirmadas por
   inspeção ao vivo (job-manager-application-form/job-manager-form,
   fieldset-{key}, .field.required-field, .input-text). Texto já traduzido
   via gettext (cais_translate_submit_job_strings(), functions.php); esta
   secção só cobre a aparência. */
.job-manager-application-form fieldset {
	border: none;
	padding: 0;
	margin: 0 0 var(--space-md);
}

.job-manager-application-form label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-secondary);
	margin-bottom: 0.4rem;
}

.job-manager-application-form label small {
	text-transform: none;
	font-weight: 400;
	letter-spacing: normal;
}

.job-manager-application-form .input-text,
.job-manager-application-form select,
.job-manager-application-form textarea {
	width: 100%;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-text);
	background: var(--color-background);
}

.job-manager-application-form .input-text:focus,
.job-manager-application-form select:focus,
.job-manager-application-form textarea:focus {
	outline: none;
	border-color: var(--color-primary);
}

.job-manager-application-form input[type="file"] {
	font-size: var(--text-sm);
}

.job-manager-application-form .wp_job_manager_send_application_button {
	display: block;
	width: 100%;
	padding: 1rem;
	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;
}

.job-manager-application-form .wp_job_manager_send_application_button:hover {
	background: var(--color-primary-dark);
}

/* ============ VARIANTE INTERNA — SEM CURRÍCULO ============ */
.resume-required-card {
	background: var(--color-primary-light);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	margin-bottom: var(--space-md);
	text-align: center;
}

.resume-required-card p {
	font-size: var(--text-sm);
	color: var(--color-text);
	margin-bottom: var(--space-md);
}

/* ============ SECÇÕES DE DESCOBERTA ============ */
.discovery-section {
	margin-top: var(--space-xl);
}

.discovery-link {
	display: inline-block;
	margin-top: var(--space-sm);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-primary);
}

.discovery-link:hover {
	text-decoration: underline;
}

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

@media (max-width: 560px) {
	.page-wrap {
		padding: 0 var(--space-md);
	}

	.info-value-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.copy-btn {
		align-self: stretch;
		justify-content: center;
	}
}