/*
 * Hashtag Code — estilo dos blocos de codigo (substitui o CSS do Enlighter).
 * Tema escuro alinhado ao blog (#0b1119 / #e6edf7), tokens hljs-* no padrao
 * Atom One Dark (legibilidade comprovada). Sem webfont (mono do sistema = 0 byte).
 * Os tokens usam !important + specificity p/ vencer o override monocromatico
 * legado do post (.post__text pre code span{color:#e6edf7!important}) ate ele ser
 * removido na limpeza. root do tema = 62.5% (1rem = 10px).
 */

.htcode {
  display: block;
  margin: 3.6rem 0;
  border: 1px solid rgba(97, 121, 153, 0.24);
  border-radius: 1.4rem;
  background: #0b1119;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.htcode__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.7rem 0.8rem 0.7rem 1.4rem;
  background: rgba(18, 26, 37, 0.96);
  border-bottom: 1px solid rgba(97, 121, 153, 0.2);
}

.htcode__lang {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fa3bd;
  user-select: none;
}

.htcode--plain .htcode__lang {
  color: #6f8198;
}

.htcode__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.5rem 0.9rem;
  border: 0;
  border-radius: 0.8rem;
  background: transparent;
  color: #9fb2cc;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.htcode__copy:hover {
  background: rgba(109, 165, 255, 0.12);
  color: #f5f7fb;
}

.htcode__copy:focus-visible {
  outline: 2px solid #6da5ff;
  outline-offset: 2px;
  color: #f5f7fb;
}

.htcode__copy.is-copied {
  color: #7ee787;
}

.htcode__copy-icon {
  display: block;
  flex: none;
}

.htcode__pre {
  margin: 0;
  padding: 1.6rem 1.8rem;
  overflow-x: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #e6edf7;
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code",
    "Fira Code", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1.4rem;
  line-height: 1.7;
  tab-size: 4;
  -moz-tab-size: 4;
  -webkit-overflow-scrolling: touch;
  /* scrollbar (firefox) */
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 140, 170, 0.45) transparent;
}

.htcode__pre:focus-visible {
  outline: 2px solid #6da5ff;
  outline-offset: -2px;
}

.htcode__pre::-webkit-scrollbar {
  height: 9px;
}
.htcode__pre::-webkit-scrollbar-track {
  background: transparent;
}
.htcode__pre::-webkit-scrollbar-thumb {
  background: rgba(120, 140, 170, 0.4);
  border-radius: 99px;
}
.htcode__pre::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 140, 170, 0.6);
}

.htcode__pre code {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.htcode__pre code::selection,
.htcode__pre code *::selection {
  background: rgba(109, 165, 255, 0.32);
}

@media (max-width: 30em) {
  .htcode__copy-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .htcode__pre {
    padding: 1.4rem 1.4rem;
    font-size: 1.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .htcode__copy {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
 * Tokens hljs (Atom One Dark) — escopados em .htcode, !important p/ vencer o
 * override monocromatico legado do post.
 * ------------------------------------------------------------------------- */
.htcode__pre.hljs .hljs-comment,
.htcode__pre.hljs .hljs-quote {
  color: #7c8aa0 !important;
  font-style: italic;
}

.htcode__pre.hljs .hljs-doctag,
.htcode__pre.hljs .hljs-keyword,
.htcode__pre.hljs .hljs-formula {
  color: #c678dd !important;
}

.htcode__pre.hljs .hljs-section,
.htcode__pre.hljs .hljs-name,
.htcode__pre.hljs .hljs-selector-tag,
.htcode__pre.hljs .hljs-deletion,
.htcode__pre.hljs .hljs-subst {
  color: #e06c75 !important;
}

.htcode__pre.hljs .hljs-literal {
  color: #56b6c2 !important;
}

.htcode__pre.hljs .hljs-string,
.htcode__pre.hljs .hljs-regexp,
.htcode__pre.hljs .hljs-addition,
.htcode__pre.hljs .hljs-attribute,
.htcode__pre.hljs .hljs-meta .hljs-string {
  color: #98c379 !important;
}

.htcode__pre.hljs .hljs-attr,
.htcode__pre.hljs .hljs-variable,
.htcode__pre.hljs .hljs-template-variable,
.htcode__pre.hljs .hljs-type,
.htcode__pre.hljs .hljs-selector-class,
.htcode__pre.hljs .hljs-selector-attr,
.htcode__pre.hljs .hljs-selector-pseudo,
.htcode__pre.hljs .hljs-number {
  color: #d19a66 !important;
}

.htcode__pre.hljs .hljs-symbol,
.htcode__pre.hljs .hljs-bullet,
.htcode__pre.hljs .hljs-link,
.htcode__pre.hljs .hljs-meta,
.htcode__pre.hljs .hljs-selector-id,
.htcode__pre.hljs .hljs-title {
  color: #61aeee !important;
}

.htcode__pre.hljs .hljs-built_in,
.htcode__pre.hljs .hljs-title.class_,
.htcode__pre.hljs .hljs-class .hljs-title {
  color: #e6c07b !important;
}

.htcode__pre.hljs .hljs-emphasis {
  font-style: italic;
}
.htcode__pre.hljs .hljs-strong {
  font-weight: 700;
}
.htcode__pre.hljs .hljs-link {
  text-decoration: underline;
}