/**
 * page-title-aba.css
 *
 * Estilos para o título H1 de pagina_site e pagina_modular.
 *
 * Estrutura HTML:
 *   <div class="hm2-page-title-aba hm2-page-title--{estilo} hm2-page-title--{alinhamento}">
 *     <h1>Título</h1>
 *   </div>
 *
 * Estilos disponíveis: aba_fio | aba_simples | aba_arredondada |
 *   aba_arredondada_fio | sublinhado | faixa | lateral | dupla_linha
 * Alinhamentos: esquerda | centro | direita
 */

/* ── Base comum ──────────────────────────────────────────────────────────── */
body:not(.path-admin) .hm2-page-title-aba {
  display: flex;
  align-items: center;
  padding: 1.75rem 0;
  overflow: hidden;
  background: transparent;
}

body:not(.path-admin) .hm2-page-title-aba h1 {
  flex-shrink: 0;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hm2-color-primary, var(--bs-primary, #0d6efd));
  white-space: nowrap;
}

/* ── Alinhamento base ────────────────────────────────────────────────────── */
body:not(.path-admin) .hm2-page-title--esquerda { justify-content: flex-start; }
body:not(.path-admin) .hm2-page-title--centro   { justify-content: center; }
body:not(.path-admin) .hm2-page-title--direita  { justify-content: flex-end; }

/* ══════════════════════════════════════════════════════════════════════════
 * Estilo 1: aba_fio — retângulo centralizado com fio até as extremidades
 * [━━━━━━━━━━][  TÍTULO  ][━━━━━━━━━━]
 * ══════════════════════════════════════════════════════════════════════════ */
body:not(.path-admin) .hm2-page-title--aba_fio::before,
body:not(.path-admin) .hm2-page-title--aba_fio::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hm2-color-primary, var(--bs-primary, #0d6efd));
  opacity: 0.4;
}

body:not(.path-admin) .hm2-page-title--aba_fio h1 {
  padding: 0.45rem 1.75rem;
  border: 1px solid var(--hm2-color-primary, var(--bs-primary, #0d6efd));
  border-radius: 4px;
  background: #fff;
}

/* Alinhamento esquerda: oculta o fio à esquerda */
body:not(.path-admin) .hm2-page-title--aba_fio.hm2-page-title--esquerda::before { display: none; }
/* Alinhamento direita: oculta o fio à direita */
body:not(.path-admin) .hm2-page-title--aba_fio.hm2-page-title--direita::after  { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
 * Estilo 2: aba_simples — retângulo sem fio lateral
 *            [  TÍTULO  ]
 * ══════════════════════════════════════════════════════════════════════════ */
body:not(.path-admin) .hm2-page-title--aba_simples h1 {
  padding: 0.45rem 1.75rem;
  border: 1px solid var(--hm2-color-primary, var(--bs-primary, #0d6efd));
  border-radius: 4px;
  background: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Estilo 3: aba_arredondada — cápsula (cantos arredondados) sem fio
 *            (  TÍTULO  )
 * ══════════════════════════════════════════════════════════════════════════ */
body:not(.path-admin) .hm2-page-title--aba_arredondada h1 {
  padding: 0.5rem 2.25rem;
  border: 1px solid var(--hm2-color-primary, var(--bs-primary, #0d6efd));
  border-radius: 50px;
  background: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Estilo 4: aba_arredondada_fio — cápsula com fio até as extremidades
 * [━━━━━━━━](  TÍTULO  )[━━━━━━━━]
 * ══════════════════════════════════════════════════════════════════════════ */
body:not(.path-admin) .hm2-page-title--aba_arredondada_fio::before,
body:not(.path-admin) .hm2-page-title--aba_arredondada_fio::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hm2-color-primary, var(--bs-primary, #0d6efd));
  opacity: 0.4;
}

body:not(.path-admin) .hm2-page-title--aba_arredondada_fio h1 {
  padding: 0.5rem 2.25rem;
  border: 1px solid var(--hm2-color-primary, var(--bs-primary, #0d6efd));
  border-radius: 50px;
  background: #fff;
}

body:not(.path-admin) .hm2-page-title--aba_arredondada_fio.hm2-page-title--esquerda::before { display: none; }
body:not(.path-admin) .hm2-page-title--aba_arredondada_fio.hm2-page-title--direita::after  { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
 * Estilo 5: sublinhado — texto com linha de destaque abaixo
 *            TÍTULO
 *            ══════
 * ══════════════════════════════════════════════════════════════════════════ */
body:not(.path-admin) .hm2-page-title--sublinhado h1 {
  padding: 0 0 0.45rem;
  border-bottom: 2px solid var(--hm2-color-primary, var(--bs-primary, #0d6efd));
}

/* ══════════════════════════════════════════════════════════════════════════
 * Estilo 6: faixa — bloco de cor da borda à borda da página
 * ████████████  TÍTULO  ████████████
 * ══════════════════════════════════════════════════════════════════════════ */
body:not(.path-admin) .hm2-page-title--faixa {
  background: var(--hm2-color-primary, var(--bs-primary, #0d6efd));
  padding-left: 2rem;
  padding-right: 2rem;
  justify-content: center;
}

body:not(.path-admin) .hm2-page-title--faixa h1 {
  flex: 1;
  color: #fff;
  padding: 0;
  white-space: normal;
  text-align: center;
}

body:not(.path-admin) .hm2-page-title--faixa.hm2-page-title--esquerda h1 { text-align: left; }
body:not(.path-admin) .hm2-page-title--faixa.hm2-page-title--centro h1   { text-align: center; }
body:not(.path-admin) .hm2-page-title--faixa.hm2-page-title--direita h1  { text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════
 * Estilo 7: lateral — barra colorida à esquerda como marcador
 * ┃ Título da Página
 * ══════════════════════════════════════════════════════════════════════════ */
body:not(.path-admin) .hm2-page-title--lateral {
  justify-content: flex-start;
  padding-left: 0;
}

body:not(.path-admin) .hm2-page-title--lateral h1 {
  padding: 0.2rem 0 0.2rem 1.25rem;
  border-left: 4px solid var(--hm2-color-primary, var(--bs-primary, #0d6efd));
  background: none;
  color: var(--hm2-color-heading, #1a202c);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.35rem;
  font-weight: 700;
  white-space: normal;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Estilo 8: dupla_linha — separadores horizontais acima e abaixo
 * ────────────────────────────────
 *            TÍTULO
 * ────────────────────────────────
 * ══════════════════════════════════════════════════════════════════════════ */
body:not(.path-admin) .hm2-page-title--dupla_linha {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  justify-content: unset;
}

body:not(.path-admin) .hm2-page-title--dupla_linha::before,
body:not(.path-admin) .hm2-page-title--dupla_linha::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: var(--hm2-color-primary, var(--bs-primary, #0d6efd));
  opacity: 0.4;
  flex: none;
}

body:not(.path-admin) .hm2-page-title--dupla_linha h1 {
  text-align: center;
}

body:not(.path-admin) .hm2-page-title--dupla_linha.hm2-page-title--esquerda h1 { text-align: left; }
body:not(.path-admin) .hm2-page-title--dupla_linha.hm2-page-title--direita h1  { text-align: right; }