/**
 * Header do tema Cais (v1.58.0 — redesenho completo, mockup aprovado).
 * Usa exclusivamente os tokens de variables.css (nunca os valores literais
 * de exemplo do mockup).
 */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-background);
	border-bottom: 1px solid var(--color-border);
}

.site-header.not-sticky {
	position: static;
}

.site-header.is-scrolled {
	box-shadow: var(--shadow-header);
}

.header-inner {
	max-width: var(--container-max-width, 1240px);
	margin: 0 auto;
	padding: 0 var(--space-lg);
	height: 76px;
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

/* Grupo à direita: nav + ações + hambúrguer, sempre colado ao fim */
.header-right-group {
	display: flex;
	align-items: center;
	gap: var(--space-xl);
	margin-left: auto;
}

/* Logo */
.site-logo {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	text-decoration: none;
	flex-shrink: 0;
}

.site-logo-mark {
	/* Fallback 34px replica o tamanho fixo original — --logo-height só
	   assume este elemento depois de o admin tocar num dos 3 sliders da
	   Identidade Visual/Logótipo (Customizer), nunca antes. */
	width: var(--logo-height, 34px);
	height: var(--logo-height, 34px);
	border-radius: var(--radius-sm);
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.site-logo-mark svg {
	/* Mesma proporção ícone/badge do tamanho original (18px de 34px). */
	width: calc(var(--logo-height, 34px) * 0.53);
	height: calc(var(--logo-height, 34px) * 0.53);
}

.site-logo-text {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--text-xl);
	color: var(--color-text);
	letter-spacing: -0.01em;
}

.site-logo-text span {
	color: var(--color-primary);
}

/*
 * Identidade Visual / Logótipo (Customizer, v1.70.0). --logo-height nunca
 * é definida aqui — só em variables.css (inexistente) ou via
 * cais_get_customizer_inline_css() quando o admin muda um dos 3 sliders;
 * o fallback "40px" replica o valor já usado em add_theme_support(
 * 'custom-logo' ) desde sempre, para uma instalação nova sem nenhum
 * theme_mod definido ficar idêntica ao comportamento anterior a esta
 * versão. Largura sempre "auto" — nunca configurável, para nunca
 * distorcer a proporção do ficheiro carregado.
 */
.site-logo .custom-logo {
	max-height: var(--logo-height, 40px);
	width: auto;
	display: block;
}

.site-logo.has-name {
	align-items: center;
}

.site-logo-name-block {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.site-logo-name {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--text-xl);
	color: var(--color-text);
	letter-spacing: -0.01em;
}

.site-logo-tagline {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* ==========================================================================
   Navegação principal (desktop) — submenu por CLIQUE, nunca :hover
   ========================================================================== */

.primary-nav ul {
	display: flex;
	align-items: center;
	list-style: none;
	gap: var(--space-lg);
}

.nav-item {
	position: relative;
}

.nav-item > a,
.nav-item-trigger {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	text-decoration: none;
	background: none;
	border: none;
	padding: var(--space-xs) 0;
	cursor: pointer;
	position: relative;
	transition: color 0.15s ease;
}

.nav-item > a:hover,
.nav-item-trigger:hover {
	color: var(--color-primary);
}

.primary-nav .nav-item.current-menu-item > a,
.primary-nav .nav-item.current-menu-item > .nav-item-trigger {
	color: var(--color-text);
}

.primary-nav .nav-item.current-menu-item > a::after {
	content: '';
	position: absolute;
	bottom: -22px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--color-primary);
}

/* Ícone — sempre presente na marcação (Cais_Primary_Nav_Walker), mas
   escondido no desktop por omissão: só a "vista reduzida" do Customizer
   (.is-icon-only) o mostra, e só nos itens COM submenu (<button>). Itens
   sem submenu (<a> simples) nunca mostram ícone no desktop — mantêm
   sempre o texto, mesmo âmbito exato do mockup aprovado. */
.primary-nav .item-icon {
	display: none;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.primary-nav.is-icon-only .nav-item-trigger .item-icon {
	display: block;
}

.primary-nav.is-icon-only .nav-item-trigger .label,
.primary-nav.is-icon-only .nav-item-trigger .chevron {
	display: none;
}

.nav-item-trigger .chevron {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.nav-item.has-submenu.is-open > .nav-item-trigger .chevron {
	transform: rotate(180deg);
}

/* Submenu — dropdown de desktop, aberto/fechado por header.js (.is-open no
   <li>, nunca :hover — corrige o bug de "hover escapa" ao tentar clicar
   num link do submenu). */
.submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin-top: var(--space-sm);
	padding: var(--space-xs) 0;
	list-style: none;
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	z-index: 200;
}

.nav-item.has-submenu.is-open > .submenu {
	display: block;
}

.submenu a {
	display: block;
	padding: var(--space-xs) var(--space-md);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	white-space: nowrap;
	text-decoration: none;
}

.submenu a:hover {
	background: var(--color-primary-light);
	color: var(--color-primary);
}

/* ==========================================================================
   Ações do header (logado/convidado)
   ========================================================================== */

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

/*
 * v1.80.0 — ".header-cta-wrap" (functions.php::cais_render_header_cta())
 * é sempre impresso, mesmo quando "Mostrar botão Publicar Vaga" está
 * desativado (alvo estável para o Selective Refresh) — sem esta regra,
 * um <span> vazio continua a contar como item do flex acima, somando
 * "gap" a mais dos dois lados por nada.
 */
.header-cta-wrap:empty {
	display: none;
}

/*
 * Interruptor de Modo Escuro (v1.93.0) — item de .header-actions, nunca
 * escondido por nenhuma media query existente (só .btn-login/.user-area/
 * .view-as-area/.primary-nav têm regra própria abaixo de 860px,
 * confirmado por auditoria) — fica sempre acessível em qualquer largura
 * sem precisar de nenhuma regra de visibilidade nova. Os 2 ícones
 * (sol/lua) são alternados só por CSS a partir de html[data-theme] —
 * nunca por JS a esconder/mostrar elementos, uma única fonte de verdade.
 */
.theme-toggle-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
}

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

.theme-toggle-btn svg {
	width: 18px;
	height: 18px;
}

.theme-toggle-btn .icon-sun {
	display: none;
}

.theme-toggle-btn .icon-moon {
	display: block;
}

html[data-theme="dark"] .theme-toggle-btn .icon-sun {
	display: block;
}

html[data-theme="dark"] .theme-toggle-btn .icon-moon {
	display: none;
}

.btn-ghost {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--color-text);
	text-decoration: none;
	padding: var(--space-xs) var(--space-sm);
	white-space: nowrap;
}

.btn-primary {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--color-primary-contrast, #ffffff) !important;
	background: var(--color-primary);
	text-decoration: none;
	padding: 0.65rem 1.3rem;
	border-radius: var(--radius-pill);
	white-space: nowrap;
	transition: background 0.15s ease;
	box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--color-primary) 40%, transparent);
	border: none;
	cursor: pointer;
}

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

.btn-outline {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--color-primary);
	background: transparent;
	border: 1.5px solid var(--color-primary);
	text-decoration: none;
	padding: calc(0.65rem - 1.5px) calc(1.3rem - 1.5px);
	border-radius: var(--radius-pill);
	white-space: nowrap;
	display: inline-block;
	transition: background 0.15s ease, color 0.15s ease;
}

.btn-outline:hover {
	background: var(--color-primary);
	color: var(--color-primary-contrast, #ffffff) !important;
}

/* ==========================================================================
   "Ver como Candidato/Empregador" — botão próprio e visível (duplo papel,
   v1.37.0 → redesenhado v1.58.0). Substitui o <select> nativo anterior por
   um botão com badge de ícone + dropdown rico (ícone/nome/descrição/
   check), só renderizado para contas com os dois papéis.
   ========================================================================== */

.view-as-area {
	position: relative;
}

.view-as-btn {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	background: var(--color-primary-light);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	padding: 4px var(--space-sm) 4px 4px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.view-as-btn:hover,
.view-as-area.is-open .view-as-btn {
	border-color: var(--color-primary);
}

.vla-icon-badge {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-primary-contrast, #ffffff) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.vla-icon-badge svg {
	width: 14px;
	height: 14px;
}

.vla-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.2;
}

.vla-label {
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--color-text-secondary);
}

.vla-value {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-text);
}

.view-as-btn .chevron {
	width: 12px;
	height: 12px;
	color: var(--color-text-secondary);
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.view-as-area.is-open .view-as-btn .chevron {
	transform: rotate(180deg);
}

.view-as-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: var(--space-sm);
	width: 290px;
	padding: var(--space-xs);
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	z-index: 200;
}

.view-as-area.is-open .view-as-dropdown {
	display: block;
}

.vla-option {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: background 0.15s ease;
}

.vla-option:hover {
	background: var(--color-primary-light);
}

.vla-option.is-current {
	background: var(--color-primary-light);
}

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

.vla-option.is-current .vla-option-icon {
	background: var(--color-primary);
	color: var(--color-primary-contrast, #ffffff) !important;
}

.vla-option-icon svg {
	width: 16px;
	height: 16px;
}

.vla-option-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.vla-option-name {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-text);
}

.vla-option-desc {
	font-family: var(--font-body);
	font-size: 0.75rem;
	color: var(--color-text-secondary);
}

.vla-check {
	width: 16px;
	height: 16px;
	color: var(--color-primary);
	flex-shrink: 0;
}

/* ==========================================================================
   Área de utilizador — avatar + nome + dropdown ("O Meu Painel"/"Perfil e
   Conta"/"Sair"). Substitui o antigo bloco .user-session (nome + "Sair"
   diretamente na barra).
   ========================================================================== */

.user-area {
	position: relative;
}

.user-area-btn {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--font-body);
}

.user-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.user-area-name {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
	white-space: nowrap;
}

.user-area-btn .chevron {
	width: 12px;
	height: 12px;
	color: var(--color-text-secondary);
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.user-area.is-open .user-area-btn .chevron {
	transform: rotate(180deg);
}

.user-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: var(--space-sm);
	min-width: 200px;
	padding: var(--space-xs);
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	z-index: 200;
}

.user-area.is-open .user-dropdown {
	display: block;
}

.user-dropdown a {
	display: block;
	padding: var(--space-sm);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.user-dropdown a:hover {
	background: var(--color-primary-light);
	color: var(--color-primary);
}

.user-dropdown-divider {
	height: 1px;
	background: var(--color-border);
	margin: var(--space-xs) 0;
}

.user-dropdown-logout {
	color: var(--color-error) !important;
}

.user-dropdown-logout:hover {
	background: color-mix(in srgb, var(--color-error) 10%, transparent) !important;
	color: var(--color-error) !important;
}

/* .btn-login identifica sempre o botão "Entrar" (independente do estilo
   visual escolhido no Customizer) — é ele que se esconde em mobile. */

/* ==========================================================================
   Hambúrguer (mobile only) — badge quadrado arredondado, distinto do
   antigo hambúrguer de 3 linhas desenhado só em CSS.
   ========================================================================== */

.menu-toggle {
	display: none;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: none;
	border-radius: var(--radius-md);
	background: var(--color-primary-light);
	color: var(--color-primary);
	cursor: pointer;
}

.menu-toggle svg {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   Drawer mobile premium — substitui a revelação em bloco do antigo
   .primary-nav.is-open. Técnica de deslize/overlay replicada de
   employer-dashboard.css/.dash-sidebar (transform+transition, nunca
   display/visibility), com marcação e classes exclusivas do header —
   nunca partilhadas/editadas nos ficheiros dos painéis.
   ========================================================================== */

.mobile-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 32, 30, 0.6);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 300;
}

.mobile-drawer-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.mobile-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(320px, 86vw);
	background: var(--color-background);
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	z-index: 301;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	box-shadow: var(--shadow-card);
}

.mobile-drawer.is-open {
	transform: translateX(0);
}

.mobile-drawer-close {
	position: absolute;
	top: var(--space-md);
	right: var(--space-md);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-background);
	color: var(--color-text-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1;
}

.mobile-drawer-close svg {
	width: 16px;
	height: 16px;
}

/* Cartão de perfil — gradiente subtil, avatar maior com sombra, badge de
   email verificado, toggle "Ver como" integrado (duplo papel). */
.mobile-profile-card {
	padding: var(--space-lg);
	padding-top: var(--space-xl);
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-background));
	border-bottom: 1px solid var(--color-border);
}

.mobile-profile-top {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.mobile-profile-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	color: #fff;
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.mobile-profile-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
}

.mobile-profile-name {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mobile-profile-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	width: fit-content;
	padding: 2px var(--space-xs);
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--color-success) 12%, transparent);
	color: var(--color-success);
	font-size: 0.7rem;
	font-weight: 700;
}

.mobile-profile-badge svg {
	width: 11px;
	height: 11px;
}

.mobile-view-toggle {
	display: flex;
	margin-top: var(--space-md);
	padding: 3px;
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
}

.mvt-option {
	flex: 1;
	text-align: center;
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text-secondary);
	text-decoration: none;
}

.mvt-option.is-current {
	background: var(--color-primary);
	color: var(--color-primary-contrast, #ffffff) !important;
}

/* O botão "Entrar" é um <a class="btn-primary"> em bloco a toda a largura
   (ver regra abaixo) — ao contrário do cartão de perfil (avatar só à
   esquerda, nunca chega ao canto superior direito), este botão passa
   mesmo por baixo do .mobile-drawer-close (topo: var(--space-md),
   altura 32px). Por isso precisa de mais folga do que var(--space-xl)
   sozinho (o mesmo padding-top do cartão de perfil) — soma-se
   var(--space-md) extra, ambas variáveis já usadas no resto do design
   system, para limpar claramente o botão fechar sem ficar só "encostado". */
.mobile-guest-card {
	padding: var(--space-lg);
	padding-top: calc(var(--space-xl) + var(--space-md));
	border-bottom: 1px solid var(--color-border);
}

.mobile-guest-card .btn-primary {
	display: block;
	text-align: center;
}

/* Navegação agrupada */
.mobile-nav-groups {
	flex: 1;
	padding: var(--space-md);
}

.mobile-nav-group + .mobile-nav-group {
	margin-top: var(--space-lg);
}

.mobile-nav-group-label {
	display: block;
	padding: 0 var(--space-sm);
	margin-bottom: var(--space-xs);
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.mobile-nav-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
}

.mobile-nav-list .nav-item > a,
.mobile-nav-list .nav-item-trigger {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	width: 100%;
	padding: var(--space-sm);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text-secondary);
	text-decoration: none;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.mobile-nav-list .nav-item > a:hover,
.mobile-nav-list .nav-item-trigger:hover {
	background: var(--color-primary-light);
	color: var(--color-primary);
}

.mobile-nav-list .item-icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 7px;
	box-sizing: border-box;
	background: var(--color-primary-light);
	color: var(--color-primary);
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}

.mobile-nav-list .nav-item.current-menu-item > a,
.mobile-nav-list .nav-item.current-menu-item > .nav-item-trigger {
	background: var(--color-primary);
	color: var(--color-primary-contrast, #ffffff) !important;
	box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.mobile-nav-list .nav-item.current-menu-item > a .item-icon,
.mobile-nav-list .nav-item.current-menu-item > .nav-item-trigger .item-icon {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.mobile-nav-list .nav-item.current-menu-item > .nav-item-trigger .chevron {
	color: #fff;
}

.mobile-nav-list .nav-item-trigger .label {
	flex: 1;
}

.mobile-nav-list .nav-item-trigger .chevron {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--color-text-secondary);
	transform: rotate(-90deg);
	transition: transform 0.15s ease;
}

.mobile-nav-list .nav-item.has-submenu.is-open > .nav-item-trigger .chevron {
	transform: rotate(0deg);
}

/* Submenu dentro do drawer — accordion inline (indentado), nunca o
   dropdown flutuante absoluto de desktop. */
.mobile-nav-list .submenu {
	display: none;
	position: static;
	margin: 2px 0 2px 40px;
	padding: 0;
	border: none;
	box-shadow: none;
	background: none;
	border-radius: 0;
}

.mobile-nav-list .nav-item.has-submenu.is-open > .submenu {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mobile-nav-list .submenu a {
	padding: var(--space-xs) var(--space-sm);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text-secondary);
	border-radius: var(--radius-sm);
}

.mobile-nav-list .submenu a:hover {
	background: var(--color-primary-light);
	color: var(--color-primary);
}

/* Rodapé fixo — separado da navegação por um divisor. */
.mobile-drawer-footer {
	margin-top: auto;
	padding: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.mobile-signout {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-error);
	text-decoration: none;
	transition: background 0.15s ease;
}

.mobile-signout:hover {
	background: color-mix(in srgb, var(--color-error) 10%, transparent);
}

.mobile-signout svg {
	width: 16px;
	height: 16px;
}

/* Impede o scroll do body por trás do drawer aberto. */
body.cais-drawer-open {
	overflow: hidden;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
	.primary-nav,
	.view-as-area,
	.user-area {
		display: none;
	}

	.btn-login {
		display: none;
	}

	.menu-toggle {
		display: flex;
	}

	.header-inner {
		height: 64px;
		padding: 0 var(--space-md);
	}

	.site-logo-text,
	.site-logo-name {
		font-size: var(--text-lg);
	}

	/* Reduz o padding do botão "Publicar Vaga" em mobile, qualquer que seja
	   o estilo visual escolhido (preenchido ou contornado). */
	.btn-publicar.btn-primary,
	.btn-publicar.btn-outline {
		padding: 0.55rem 1rem;
		font-size: var(--text-sm);
	}
}