/* Descrição da vaga com a identidade da plataforma. Usada na página pública da vaga,
 * no detalhe da vaga do candidato logado, no detalhe da vaga do recrutador e no editor
 * (CKEditor) das telas de descrição, para o recrutador ver o mesmo que o candidato vê.
 * No editor, envolver o {{ form.briefing }} num elemento .jd-editor. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:is(.jd-description, .jd-editor) {
  --jd-green-800: #1F3A2E;
  --jd-green-700: #2a4d3d;
  --jd-lime: #C9F26B;
  --jd-cream: #F5F2EC;
  --jd-ink: #1a1f1c;
  --jd-muted: #6b7269;
}

:is(.jd-description, .jd-editor .ck-editor__editable) {
  font-family: 'Manrope', sans-serif;
  line-height: 1.75;
  color: var(--jd-ink);
  font-size: 15px;
}

:is(.jd-description, .jd-editor .ck-editor__editable) p {
  margin-bottom: 1rem;
}

:is(.jd-description, .jd-editor .ck-editor__editable) p:last-child {
  margin-bottom: 0;
}

:is(.jd-description, .jd-editor .ck-editor__editable) strong {
  font-weight: 700;
  color: var(--jd-green-800);
}

:is(.jd-description, .jd-editor .ck-editor__editable) ul {
  list-style: none;
  margin: 0 0 1rem 0;
  padding: 0 0 0 1rem;
}

:is(.jd-description, .jd-editor .ck-editor__editable) ul > li {
  padding-left: 22px;
  position: relative;
  margin-bottom: 6px;
}

:is(.jd-description, .jd-editor .ck-editor__editable) ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 2px;
  background: var(--jd-lime);
  border-radius: 1px;
}

:is(.jd-description, .jd-editor .ck-editor__editable) ol {
  list-style: none !important;
  counter-reset: jd-ol;
  padding-left: 1rem;
  margin-bottom: 1rem;
}

:is(.jd-description, .jd-editor .ck-editor__editable) ol > li {
  counter-increment: jd-ol;
  padding-left: 2.5rem;
  position: relative;
  margin-bottom: 6px;
}

:is(.jd-description, .jd-editor .ck-editor__editable) ol > li::before {
  content: counter(jd-ol, decimal);
  position: absolute;
  left: 0;
  top: 2px;
  min-width: 22px;
  height: 22px;
  background: var(--jd-lime);
  color: var(--jd-green-800);
  font-size: 11px;
  font-weight: 700;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-sizing: border-box;
  line-height: 1;
}

:is(.jd-description, .jd-editor .ck-editor__editable) h1,
:is(.jd-description, .jd-editor .ck-editor__editable) h2,
:is(.jd-description, .jd-editor .ck-editor__editable) h3,
:is(.jd-description, .jd-editor .ck-editor__editable) h4,
:is(.jd-description, .jd-editor .ck-editor__editable) h5,
:is(.jd-description, .jd-editor .ck-editor__editable) h6 {
  font-weight: 700;
  color: var(--jd-green-800);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

:is(.jd-description, .jd-editor .ck-editor__editable) h1 { font-size: 1.4rem; }
:is(.jd-description, .jd-editor .ck-editor__editable) h2 { font-size: 1.2rem; }
:is(.jd-description, .jd-editor .ck-editor__editable) h3 { font-size: 1.1rem; }
:is(.jd-description, .jd-editor .ck-editor__editable) h4 { font-size: 1rem; }
:is(.jd-description, .jd-editor .ck-editor__editable) > :first-child { margin-top: 0; }

:is(.jd-description, .jd-editor .ck-editor__editable) a {
  color: var(--jd-green-700);
  text-decoration: underline;
}

/* UL com list-style-type explícito: esconde o marcador nativo, mantém ::before customizado */
:is(.jd-description, .jd-editor .ck-editor__editable) ul[style*="list-style-type"] {
  list-style: none !important;
}

/* UL disc: círculo preenchido */
:is(.jd-description, .jd-editor .ck-editor__editable) ul[style*="list-style-type:disc"] > li::before,
:is(.jd-description, .jd-editor .ck-editor__editable) ul[style*="list-style-type: disc"] > li::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jd-lime);
  top: 0.6em;
  transform: none;
}

/* UL circle: círculo vazado */
:is(.jd-description, .jd-editor .ck-editor__editable) ul[style*="list-style-type:circle"] > li::before,
:is(.jd-description, .jd-editor .ck-editor__editable) ul[style*="list-style-type: circle"] > li::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--jd-lime);
  top: 0.6em;
  transform: none;
}

/* UL square: quadrado */
:is(.jd-description, .jd-editor .ck-editor__editable) ul[style*="list-style-type:square"] > li::before,
:is(.jd-description, .jd-editor .ck-editor__editable) ul[style*="list-style-type: square"] > li::before {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--jd-lime);
  top: 0.6em;
  transform: none;
}

/* OL: counter format por tipo de lista */
:is(.jd-description, .jd-editor .ck-editor__editable) ol[style*="list-style-type:decimal-leading-zero"] > li::before,
:is(.jd-description, .jd-editor .ck-editor__editable) ol[style*="list-style-type: decimal-leading-zero"] > li::before {
  content: counter(jd-ol, decimal-leading-zero);
}

:is(.jd-description, .jd-editor .ck-editor__editable) ol[style*="list-style-type:lower-roman"] > li::before,
:is(.jd-description, .jd-editor .ck-editor__editable) ol[style*="list-style-type: lower-roman"] > li::before {
  content: counter(jd-ol, lower-roman);
}

:is(.jd-description, .jd-editor .ck-editor__editable) ol[style*="list-style-type:upper-roman"] > li::before,
:is(.jd-description, .jd-editor .ck-editor__editable) ol[style*="list-style-type: upper-roman"] > li::before {
  content: counter(jd-ol, upper-roman);
}

:is(.jd-description, .jd-editor .ck-editor__editable) ol[style*="list-style-type:lower-latin"] > li::before,
:is(.jd-description, .jd-editor .ck-editor__editable) ol[style*="list-style-type: lower-latin"] > li::before,
:is(.jd-description, .jd-editor .ck-editor__editable) ol[style*="list-style-type:lower-alpha"] > li::before,
:is(.jd-description, .jd-editor .ck-editor__editable) ol[style*="list-style-type: lower-alpha"] > li::before {
  content: counter(jd-ol, lower-latin);
}

:is(.jd-description, .jd-editor .ck-editor__editable) ol[style*="list-style-type:upper-latin"] > li::before,
:is(.jd-description, .jd-editor .ck-editor__editable) ol[style*="list-style-type: upper-latin"] > li::before,
:is(.jd-description, .jd-editor .ck-editor__editable) ol[style*="list-style-type:upper-alpha"] > li::before,
:is(.jd-description, .jd-editor .ck-editor__editable) ol[style*="list-style-type: upper-alpha"] > li::before {
  content: counter(jd-ol, upper-latin);
}

/* Blockquote */
:is(.jd-description, .jd-editor .ck-editor__editable) blockquote {
  margin: 1.25rem 0;
  padding: 12px 20px;
  background: var(--jd-cream);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--jd-muted);
  quotes: "\201C" "\201D";
}

:is(.jd-description, .jd-editor .ck-editor__editable) blockquote p:first-child::before { content: open-quote; color: var(--jd-green-700); font-size: 1.4em; font-weight: 700; line-height: 0; vertical-align: -0.3em; margin-right: 3px; }
:is(.jd-description, .jd-editor .ck-editor__editable) blockquote p:last-child::after   { content: close-quote; color: var(--jd-green-700); font-size: 1.4em; font-weight: 700; line-height: 0; vertical-align: -0.3em; margin-left: 3px; }

:is(.jd-description, .jd-editor .ck-editor__editable) blockquote p {
  margin-bottom: 0;
}

/* p dentro de li: evita espaçamento duplo */
:is(.jd-description, .jd-editor .ck-editor__editable) li p {
  margin-bottom: 0.25rem;
}

:is(.jd-description, .jd-editor .ck-editor__editable) li p:last-child {
  margin-bottom: 0;
}