/**
 * Header de 3 níveis para as LPs estáticas de /public.
 *
 * Autocontido de propósito: classes com prefixo `onh-` e cores literais, sem
 * depender do bootstrap/style.css de cada LP — assim o header fica igual em
 * todas e nenhuma regra local o afeta.
 * Comportamento e conteúdo ficam em /assets/js/nested-header.js.
 */

/*
 * IMPORTANTE — por que as cores são declaradas também nos descendentes:
 * o style.css das LPs tem `*, html { color: #001E27 }`. O seletor universal
 * casa diretamente em cada span/svg do header, e herança sempre perde para uma
 * regra que casa. Sem repetir a cor nos filhos, os rótulos e chevrons ficam
 * petroleo sobre a barra petroleo — ou seja, invisíveis.
 */

:root {
  --onh-petroleo: #001e27;
  --onh-ciano: #00e2f4;
  --onh-cinza-claro: #f7f7f7;
  --onh-texto-desc: #677489;
  --onh-hover: #e2fdff;
  --onh-borda: rgba(0, 0, 0, 0.15);
  --onh-desktop: 1100px;
}

/* Esconde o header legado assim que o CSS carrega, evitando piscar dois
   headers antes do JS montar o novo. O placeholder reserva a altura. */
nav.nav-desktop,
nav[data-nav='menu'] {
  display: none !important;
}

.onh-placeholder {
  min-height: 72px;
  background: var(--onh-petroleo);
}

.onh-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  display: flex;
  width: 100%;
  min-height: 72px;
  flex-direction: column;
  background: var(--onh-petroleo);
  font-family: inherit;
}

.onh-bar {
  display: flex;
  min-height: 72px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.onh-logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.onh-logo img {
  width: auto;
  min-width: 134px;
  height: 46px;
  object-fit: contain;
}

.onh-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- nav desktop ---------- */

.onh-nav {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-left: 16px;
}

.onh-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.onh-trigger {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  opacity: 0.7;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s, color 0.2s;
}

.onh-trigger:hover,
.onh-item[data-open='true'] .onh-trigger {
  color: var(--onh-ciano);
  opacity: 1;
}

.onh-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.onh-item[data-open='true'] .onh-chevron {
  transform: rotate(180deg);
}

/* ---------- painel ---------- */

.onh-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1200;
  padding-top: 9px;
}

.onh-panel::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 0;
  right: 0;
  height: 9px;
}

.onh-card {
  display: grid;
  width: max-content;
  max-width: 1040px;
  border: 1px solid var(--onh-borda);
  border-top: 0;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 30, 39, 0.12);
}

.onh-card[data-detail='true'] {
  grid-template-columns: minmax(240px, 290px) minmax(440px, 1fr);
}

.onh-subitems {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 12px;
  list-style: none;
}

.onh-card[data-detail='true'] .onh-subitems {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.onh-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--onh-petroleo);
  font-size: 16px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.onh-row:hover,
.onh-row[data-active='true'] {
  background: var(--onh-hover);
}

.onh-row-icon {
  display: flex;
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--onh-hover);
}

.onh-row-icon img,
.onh-row-icon svg {
  height: 16px;
  width: 16px;
}

.onh-row-text {
  min-width: 0;
  flex: 1;
}

.onh-row-label {
  display: block;
  font-size: 16px;
}

.onh-row-desc {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--onh-texto-desc);
}

.onh-row-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(0, 30, 39, 0.4);
}

.onh-row[data-active='true'] .onh-row-arrow {
  color: var(--onh-ciano);
}

/* ---------- coluna de detalhe (nível 3) ---------- */

/*
 * Os painéis de nível 3 ficam empilhados na mesma célula do grid: a coluna
 * dimensiona pelo maior deles e nada se move quando o hover troca o visível.
 * `visibility` (e não `display`) preserva o tamanho e tira o painel oculto do
 * foco e da árvore de acessibilidade.
 */
.onh-detail {
  display: grid;
  min-height: 260px;
  padding: 20px;
  background: rgba(247, 247, 247, 0.4);
}

.onh-detail-pane {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  visibility: hidden;
}

.onh-detail-pane[data-visible='true'] {
  visibility: visible;
}

.onh-detail-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(0, 30, 39, 0.6);
}

.onh-detail-desc {
  margin: 0;
  font-size: 14px;
  color: var(--onh-texto-desc);
}

.onh-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.onh-option {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  color: var(--onh-petroleo);
  text-decoration: none;
  transition: background-color 0.2s;
}

.onh-option:hover {
  background: #fff;
}

.onh-option-icon {
  display: flex;
  height: 24px;
  width: 24px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.onh-option-icon img,
.onh-option-icon svg {
  height: 20px;
  width: 20px;
}

.onh-see-all {
  margin-top: auto;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--onh-ciano);
  text-decoration: none;
}

.onh-see-all:hover {
  color: var(--onh-petroleo);
}

/* ---------- destaque de novidade ---------- */

.onh-highlight {
  border: 1px solid rgba(0, 226, 244, 0.3);
  border-radius: 12px;
  background: linear-gradient(to bottom right, #f2fdfe, #c9f3f9);
}

.onh-highlight:hover {
  background: linear-gradient(to bottom right, #f2fdfe, #c9f3f9);
  box-shadow: 0 2px 10px rgba(0, 226, 244, 0.28);
}

.onh-highlight .onh-row-label,
.onh-highlight .onh-option-label {
  font-weight: 700;
}

.onh-highlight .onh-row-icon,
.onh-highlight .onh-option-icon {
  height: 32px;
  width: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
}

/* ---------- CTAs ---------- */

.onh-right {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

.onh-ctas {
  display: none;
  align-items: center;
  gap: 12px;
}

.onh-cta {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 8px 24px;
  font-size: 16px;
  text-decoration: none;
  transition: box-shadow 0.2s, color 0.2s;
}

.onh-cta svg {
  height: 24px;
  width: 24px;
  margin-right: 4px;
}

.onh-cta--standard-color {
  border: 0;
  background: var(--onh-ciano);
  color: var(--onh-petroleo);
  font-weight: 700;
}

.onh-cta--standard-color:hover {
  box-shadow: 0 6px 0 0 rgba(0, 226, 244, 0.6);
}

.onh-cta--transparent {
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
  font-weight: 700;
}

.onh-cta--transparent:hover {
  box-shadow: 0 6px 0 0 hsla(0, 0%, 100%, 0.4);
}

.onh-cta--no-background {
  background: transparent;
  color: var(--onh-cinza-claro);
  font-weight: 500;
}

.onh-cta--no-background:hover {
  color: var(--onh-ciano);
}

/* "Teste grátis" só a partir de 1300px, igual ao site */
.onh-cta--trial {
  display: none;
}

/* ---------- hambúrguer e drawer ---------- */

.onh-burger {
  display: inline-flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

.onh-burger svg {
  height: 24px;
  width: 24px;
}

.onh-drawer {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 30, 39, 0.95);
}

.onh-drawer[data-open='true'] {
  display: flex;
}

.onh-drawer-panel {
  display: flex;
  width: 100%;
  max-width: 28rem;
  max-height: calc(100vh - 4rem);
  flex-direction: column;
  overflow-y: auto;
  border-radius: 8px;
  background: #fff;
}

.onh-drawer-close {
  margin-bottom: 12px;
  display: flex;
  width: 100%;
  max-width: 28rem;
  justify-content: flex-end;
}

.onh-m-list,
.onh-m-sublist,
.onh-m-options {
  margin: 0;
  padding: 0;
  list-style: none;
}

.onh-m-item {
  border-bottom: 1px solid rgba(0, 30, 39, 0.1);
}

.onh-m-head {
  display: flex;
  align-items: center;
  padding: 16px 20px;
}

.onh-m-label {
  color: var(--onh-petroleo);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.onh-m-toggle {
  margin-left: 8px;
  display: flex;
  min-height: 36px;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  border: 0;
  background: none;
  color: rgba(0, 30, 39, 0.7);
  cursor: pointer;
}

.onh-m-toggle svg {
  height: 24px;
  width: 24px;
  transition: transform 0.2s;
}

.onh-m-item[data-open='true'] > .onh-m-head .onh-m-toggle svg,
.onh-m-sub[data-open='true'] > .onh-m-subhead .onh-m-toggle svg {
  transform: rotate(180deg);
}

.onh-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease-out;
}

.onh-m-item[data-open='true'] > .onh-collapse,
.onh-m-sub[data-open='true'] > .onh-collapse {
  grid-template-rows: 1fr;
}

.onh-collapse > div {
  overflow: hidden;
}

.onh-m-subhead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 20px;
}

.onh-m-options {
  margin-left: 32px;
  border-left: 1px solid rgba(0, 30, 39, 0.1);
  padding-left: 12px;
}

.onh-m-option {
  display: block;
  padding: 10px 20px;
  color: var(--onh-petroleo);
  text-decoration: none;
}

.onh-m-ctas {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 20px;
}

.onh-m-ctas .onh-cta {
  width: 100%;
}

/* ---------- blindagem de cor contra `*, html { color }` ---------- */

.onh-trigger,
.onh-trigger *,
.onh-burger,
.onh-burger * {
  color: #fff;
}

.onh-trigger:hover,
.onh-trigger:hover *,
.onh-item[data-open='true'] .onh-trigger,
.onh-item[data-open='true'] .onh-trigger * {
  color: var(--onh-ciano);
}

.onh-cta--standard-color,
.onh-cta--standard-color * {
  color: var(--onh-petroleo);
}

.onh-cta--transparent,
.onh-cta--transparent * {
  color: #fff;
}

.onh-cta--no-background,
.onh-cta--no-background * {
  color: var(--onh-cinza-claro);
}

.onh-cta--no-background:hover,
.onh-cta--no-background:hover * {
  color: var(--onh-ciano);
}

.onh-row,
.onh-row .onh-row-label,
.onh-option,
.onh-option .onh-row-label,
.onh-m-label,
.onh-m-option,
.onh-m-option * {
  color: var(--onh-petroleo);
}

.onh-row .onh-row-desc,
.onh-option .onh-row-desc,
.onh-detail-desc,
.onh-m-subhead .onh-row-desc {
  color: var(--onh-texto-desc);
}

.onh-detail-title {
  color: rgba(0, 30, 39, 0.6);
}

.onh-see-all,
.onh-see-all * {
  color: var(--onh-ciano);
}

.onh-see-all:hover,
.onh-see-all:hover * {
  color: var(--onh-petroleo);
}

.onh-row-arrow {
  color: rgba(0, 30, 39, 0.4);
}

.onh-row[data-active='true'] .onh-row-arrow {
  color: var(--onh-ciano);
}

.onh-m-toggle,
.onh-m-toggle * {
  color: rgba(0, 30, 39, 0.7);
}

/* ---------- breakpoints ---------- */

@media (min-width: 1100px) {
  .onh-nav,
  .onh-ctas {
    display: flex;
  }

  .onh-burger,
  .onh-drawer {
    display: none !important;
  }

  .onh-bar {
    padding: 0 15px;
  }
}

@media (min-width: 1300px) {
  .onh-cta--trial {
    display: inline-flex;
  }
}