/* Escopo só desta página */
.page-meu-primeiro-job .mpj-lead {
  /* segue o ritmo do site (p ~1.05vw em general.css),
     mas limitamos a largura para legibilidade */
  max-width: 60ch;
  margin-bottom: 1.5vw; /* igual ao p padrão */
}

/* Detalhes/Resumo sem quebrar o visual existente */
.page-meu-primeiro-job details.mpj-details {
  background: #f5f7fa;
  border: 1px solid rgb(214,211,211);
  border-radius: 5px;
  padding: 0.8vw 1vw;
  margin: 1vw 0 1.5vw;
}
.page-meu-primeiro-job details.mpj-details summary {
  cursor: pointer;
  font-weight: 500;
  color: #010065;
  margin: 0 0 0.5vw;
}

/* Botão "Copiar" acoplado ao bloco .quadro */
.page-meu-primeiro-job .mpj-code {
  position: relative;
}
.page-meu-primeiro-job .mpj-copy {
  position: absolute;
  top: 0.7vw;
  right: 0.7vw;
  background: #010065;
  border: 1px solid #010065;
  color: #fff;
  padding: 0.35vw 0.8vw;
  border-radius: 3px;
  font-size: 0.85vw;
  cursor: pointer;
}
.page-meu-primeiro-job .mpj-copy:hover {
  background: transparent;
  color: #010065;
}

/* Espaços verticais coerentes com o tema */
.page-meu-primeiro-job h2 { margin-top: 2vw; }
.page-meu-primeiro-job .indice-ancora h3 a { font-weight: bold; }

/* Acessibilidade: foco visível nos links desta página, sem afetar o tema geral */
.page-meu-primeiro-job a:focus {
  outline: 2px dashed #010065;
  outline-offset: 2px;
}

.page-meu-primeiro-job .quadro.mpj-term {
  /* Herdamos a estrutura .quadro do site, mas trocamos a pele no <pre> interno */
  position: relative;         /* Para posicionar o botão de copiar */
  background: transparent;    /* Fundo externo transparente (apenas o <pre> fica escuro) */
  margin-bottom: 1.2vw;       /* Espaçamento consistente com o tema */
}

/* O general.css estiliza ".quadro span pre". Aqui sobrepomos o visual */

.page-meu-primeiro-job .quadro.mpj-term span pre {
  background: #0b1020;        /* Preto "terminal" */
  color: #e6edf3;             /* Texto claro com bom contraste */
  border: 1px solid #1f2a44;  /* Borda sutil */
  border-radius: 6px;
  /* Remove a faixa azul padrão do site nesses blocos: */
  border-left: 1px solid #1f2a44;
  /* Tipografia mono como terminal */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.95vw;          /* Coerente com p ~1.05vw do tema */
  line-height: 1.5;
  /* Espaçamento interno dá “respiro” e área para o botão no canto */
  padding: 1.4vw 2.4vw 1.4vw 1.6vw;
  /* Comportamento de terminal: não quebrar linhas automaticamente */
  white-space: pre;
  overflow-x: auto;
  /* Um leve realce interno */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* Botão Copiar (só aparece quando NÃO há data-nocopy) */
.page-meu-primeiro-job .quadro.mpj-term .mpj-copy {
  position: absolute;
  top: 1.2vw;
  right: 1.6vw;
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 4px;
  padding: 0.35vw 0.9vw;
  font-size: 0.85vw;
  cursor: pointer;
}

.page-meu-primeiro-job .quadro.mpj-term .mpj-copy:hover,
.page-meu-primeiro-job .quadro.mpj-term .mpj-copy:focus {
  background: rgba(255,255,255,0.18);
  outline: none;
}

/* Feedback visual rápido quando copiado */
.page-meu-primeiro-job .quadro.mpj-term[data-copied="1"] .mpj-copy::after {
  margin-left: 0.4vw;
  font-weight: 500;
}


/* Desliga o botão quando for "sem copiar" por atributo ou classe */
.page-meu-primeiro-job .quadro.mpj-term[data-nocopy] .mpj-copy,
.page-meu-primeiro-job .quadro.mpj-term.mpj-nocopy .mpj-copy {
  display: none !important;
}

/* Acessibilidade local (não mexe no tema global) */
.page-meu-primeiro-job a:focus,
.page-meu-primeiro-job button:focus {
  outline: 2px dashed #ffbb00;
  outline-offset: 2px;
}