/* EDULIDER — estilo base.
 * Depende de tokens.css, que é enfileirado antes (ver functions.php). */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  margin: 0 0 0.5em;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p { margin: 0 0 1em; }

a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--text-link-hover); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

img { max-width: 100%; height: auto; }

.edulider-container {
  width: 100%;
  max-width: var(--container-content);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ===== Botões =====
 * Preenchimento usa --color-brand-solid, não --color-brand: branco sobre o verde
 * da marca dá 3,29:1 e reprova AA. Regra herdada do projeto Next. */
.edulider-botao,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-brand-solid);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard);
}
.edulider-botao:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--color-brand-active);
  color: #fff;
}

.edulider-botao--secundario {
  background: transparent;
  color: var(--text-link);
  border: 1px solid var(--border-default);
}
.edulider-botao--secundario:hover { background: var(--color-brand-subtle); color: var(--text-link-hover); }

/* ===== Cabeçalho =====
 * Barra fixa em duas peles: transparente sobre a seção escura que abre a Home e
 * o /sobre (corpo com `.edulider-sobreposto`), e de vidro fosco assim que a
 * página rola (`--solido`). Ao descer ela sai da frente (`--oculto`) e volta ao
 * subir. Quem põe e tira as duas classes é o `js/cabecalho.js`.
 *
 * A pele sólida é a PADRÃO, e não a transparente: sem JavaScript, em tela de
 * fundo claro ou se algo falhar, o que sobra é a barra legível. */
.edulider-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  transition:
    transform var(--duration-slow) var(--ease-out-soft),
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}
.edulider-header--oculto { transform: translateY(-100%); }

.edulider-header__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--altura-cabecalho);
  transition: min-height var(--duration-base) var(--ease-standard);
}
.edulider-header--solido .edulider-header__interno { min-height: var(--altura-cabecalho-solido); }

/* A marca herda a cor por `currentColor` — é o SVG inline que permite isso. */
.edulider-header__marca {
  display: inline-flex;
  align-items: center;
  color: var(--color-brand);
  line-height: 0;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}
.edulider-header__marca svg {
  display: block;
  width: auto;
  height: 36px;
}
.edulider-header__marca:hover { color: var(--color-brand-hover); }

.edulider-nav ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Sora, e não a fonte de texto: o menu é peça de marca, e a família de título
 * dá a ele o mesmo desenho de letra dos títulos das seções. */
.edulider-nav a {
  position: relative;
  display: block;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-body);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
/* Traço que cresce da esquerda, em vez de sublinhado que aparece de uma vez. */
.edulider-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out-soft);
}
.edulider-nav a:hover { color: var(--text-link); }
.edulider-nav a:hover::after,
.edulider-nav .current-menu-item > a::after,
.edulider-nav .current-menu-ancestor > a::after { transform: scaleX(1); }
.edulider-nav .current-menu-item > a,
.edulider-nav .current-menu-ancestor > a { color: var(--text-link); }

/* Botão do menu no celular. Três riscos que viram X ao abrir — a cor vem de
 * `currentColor`, então ele acompanha as duas peles sem regra extra. */
.edulider-header__menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;  /* 44px é o alvo de toque mínimo; o desenho tem 20px */
  height: 44px;
  padding: 0 12px;
  margin-right: -12px;
  background: none;
  border: 0;
  color: var(--text-strong);
  cursor: pointer;
}
.edulider-header__risco {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform var(--duration-base) var(--ease-out-soft),
    opacity var(--duration-fast) var(--ease-standard);
}
.edulider-header--menu-aberto .edulider-header__risco:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.edulider-header--menu-aberto .edulider-header__risco:nth-child(2) { opacity: 0; }
.edulider-header--menu-aberto .edulider-header__risco:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Cabeçalho, pele transparente =====
 * Só onde a tela abre em seção escura de borda a borda. Branco sobre o véu do
 * hero (rgba(22,40,15,0.7) sobre foto) passa folgado em AA.
 *
 * A condição vai dentro de `:where()`, que não soma especificidade: assim a
 * pele sólida, que é seletor de classe simples e vem DEPOIS, vence sem precisar
 * repetir cada propriedade aqui dentro. Sem isso o `body.classe` pesava mais
 * que o `--solido` e a barra rolava sem fundo nenhum. */
:where(body.edulider-sobreposto) .edulider-header {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
:where(body.edulider-sobreposto) .edulider-header__marca { color: #fff; }
:where(body.edulider-sobreposto) .edulider-header__marca:hover { color: var(--color-green-200); }
:where(body.edulider-sobreposto) .edulider-nav a { color: rgba(255, 255, 255, 0.86); }
:where(body.edulider-sobreposto) .edulider-nav a:hover,
:where(body.edulider-sobreposto) .edulider-nav .current-menu-item > a { color: #fff; }

/* Vidro fosco. O fundo quase opaco vem primeiro porque é o que Firefox antigo e
 * qualquer navegador sem `backdrop-filter` vão mostrar — translúcido sem borrão
 * deixaria o texto da página atravessando a barra. */
.edulider-header--solido {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .edulider-header--solido {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
  }
}

/* Rolou: a pele sólida é clara de novo, e a marca e o menu voltam ao verde e à
 * tinta. Estas três regras existem porque a pele transparente pintou o texto de
 * branco — sem elas, branco sobre vidro claro. */
.edulider-header--solido .edulider-header__marca { color: var(--color-brand); }
.edulider-header--solido .edulider-nav a { color: var(--text-body); }
.edulider-header--solido .edulider-nav a:hover,
.edulider-header--solido .edulider-nav .current-menu-item > a { color: var(--text-link); }

/* Sem JavaScript nada troca de pele, então a barra volta a ser o que era: opaca
 * e grudada no topo, empurrando o conteúdo em vez de passar por cima dele. */
html.sem-js .edulider-header {
  position: sticky;
  background: var(--surface-card);
  border-bottom-color: var(--border-subtle);
}
html.sem-js .edulider-header__marca { color: var(--color-brand); }
html.sem-js .edulider-nav a { color: var(--text-body); }
html.sem-js #conteudo { padding-top: 0; }

/* A barra é fixa: sem esta folga o conteúdo nasceria debaixo dela. Onde ela
 * sobrepõe de propósito, a folga sai — e quem afasta a capa é o CSS da tela. */
#conteudo { padding-top: var(--altura-cabecalho); }
body.edulider-sobreposto #conteudo { padding-top: 0; }

/* Âncora (#quiz, o sumário das legais) não pode parar debaixo da barra. */
html { scroll-padding-top: calc(var(--altura-cabecalho) + 12px); }

/* ===== Cabeçalho no celular =====
 * Abaixo de 640px o menu vira painel: ele desce da barra, ocupa a largura toda
 * e empilha os itens em alvo de toque de verdade. O painel é sempre claro — por
 * isso as cores da pele transparente são desfeitas aqui dentro. */
@media (max-width: 639px) {
  .edulider-header__menu { display: flex; }

  .edulider-nav {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    display: none;
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
  }
  .edulider-header--menu-aberto .edulider-nav { display: block; }

  .edulider-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 20px 12px;
  }
  .edulider-nav a {
    padding: 15px 0;
    font-size: var(--text-md);
    border-bottom: 1px solid var(--border-subtle);
  }
  .edulider-nav li:last-child a { border-bottom: 0; }
  /* Empilhado, o traço que cresce da esquerda não tem o que sublinhar. */
  .edulider-nav a::after { display: none; }

  :where(body.edulider-sobreposto) .edulider-nav a { color: var(--text-body); }
  :where(body.edulider-sobreposto) .edulider-nav a:hover,
  :where(body.edulider-sobreposto) .edulider-nav .current-menu-item > a { color: var(--text-link); }

  /* Sem JavaScript o botão não abriria nada: ele some e a lista volta, quebrando
   * em duas linhas em vez de sair pela borda. */
  html.sem-js .edulider-header__menu { display: none; }
  html.sem-js .edulider-header__interno { flex-wrap: wrap; padding-block: 10px; }
  html.sem-js .edulider-nav {
    position: static;
    display: block;
    background: none;
    border: 0;
    box-shadow: none;
  }
  html.sem-js .edulider-nav ul { flex-direction: row; flex-wrap: wrap; padding: 0; }
  html.sem-js .edulider-nav a { padding: 8px 12px 8px 0; font-size: var(--text-sm); border-bottom: 0; }
}

@media (min-width: 640px) {
  .edulider-header__marca svg { height: 46px; }
  .edulider-nav ul { gap: 8px; }
  .edulider-nav a { padding: 10px 14px; font-size: var(--text-base); }
  .edulider-nav a::after { inset-inline: 14px; }
}

/* ===== Rodapé ===== */

.edulider-rodape {
  background: var(--surface-inverse);
  color: var(--color-sand-200);
  margin-top: 64px;
  padding: 48px 0;
  font-size: var(--text-sm);
}
.edulider-rodape a { color: var(--color-green-300); }

/* ===== Cartões de produto =====
 * Compartilhado: além da listagem (`loja.css` cuida da grade), estas regras
 * pintam os relacionados na página do produto e os cross-sells do carrinho —
 * todo `ul.products li.product` do site, não só o da loja. */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  border-color: var(--color-green-200);
  box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product:hover { transform: none; }
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-decoration: none;
  color: inherit;
}
.woocommerce ul.products li.product img {
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
  margin: 0 0 16px;
  border-radius: var(--radius-md);
  background: var(--color-sand-100);
  object-fit: cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-strong);
}
.woocommerce ul.products li.product .price {
  margin-top: auto;
  padding-top: 8px;
  color: var(--color-green-700);
  font-weight: 800;
  font-size: var(--text-lg);
}
.woocommerce ul.products li.product .price ins {
  color: var(--color-green-700);
  text-decoration: none;
}
.woocommerce ul.products li.product .price del { color: var(--text-faint); opacity: 0.7; }

/* ===== Aviso de pendência de conteúdo =====
 * Mesma ideia do <Pendencia> do projeto Next: vazio de conteúdo aparece na tela
 * em vez de ser preenchido com texto inventado.
 *
 * Em âmbar, o mesmo tom de "revisão pendente" do `.edulider-aviso` das páginas
 * legais — pedido do Lucas em 18/set para a EDULIDER notar e ajustar cada
 * pendência ao avaliar o site publicado. Não é o amarelo de erro de sistema
 * (isso já foi testado e descartado em 16/set): é borda sólida e âmbar
 * contínuo, não tracejado sobre areia, para chamar a atenção sem parecer tela
 * quebrada. */
.edulider-pendencia {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-subtle);
  text-align: left;
}
/* Ink-900 sobre âmbar-100: o par já usado no `.edulider-aviso`, alto
 * contraste garantido mesmo numa peça de 11px. */
.edulider-pendencia__selo {
  flex: none;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-900);
}
.edulider-pendencia__texto {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  font-weight: 600;
  color: var(--color-ink-800);
}

/* ===== Peças compartilhadas entre a Home e as páginas de conteúdo =====
 * Nasceram em home.css, quando a Home era a única tela nossa. Mudaram para cá
 * quando /sobre, /privacidade e /termos passaram a usar as mesmas peças: o
 * home.css só carrega na Home, e repetir o eyebrow em cada folha nova daria
 * divergência na primeira vez que um token mudasse. */

/* Caixa alta curta com letter-spacing largo. */
.edulider-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-green-700);
}
/* Sobre fundo escuro. */
.edulider-eyebrow--claro { color: var(--color-green-300); }
/* Sobre foto clara: 12px precisa de 4,5:1, e o verde de marca cai para 2,19:1. */
.edulider-eyebrow--escuro { color: var(--color-green-800); }

/* A hierarquia do site é feita por ESPESSURA, não por cor: o texto corrido fica
 * leve e o que importa sobe para semibold. Os títulos usam dois pesos na mesma
 * frase — a abertura em 300, a ideia principal no peso do próprio título. */
.edulider-leve { font-weight: 300; }
.edulider-destaque { font-weight: 600; color: var(--color-ink-900); }
.edulider-destaque--claro { color: #fff; }

/* Modificadores de botão. O preenchimento sólido vem das regras acima, que já
 * usam --color-brand-solid. */
.edulider-botao--grande { min-height: 48px; }
.edulider-botao--largo { width: 100%; }
/* Contorno sobre fundo escuro (hero da Home, chamada final, capa do /sobre). */
.edulider-botao--inverso {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.edulider-botao--inverso:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

/* ===== Moldura das seções ===== */
.edulider-secao { padding-block: 64px; }
.edulider-secao--rebaixada { background: var(--surface-sunken); }
.edulider-secao--inversa { background: var(--surface-inverse); color: #fff; }

.edulider-secao__titulo {
  margin: 12px 0 0;
  font-size: var(--text-xl);
  font-weight: 800;
  text-wrap: balance;
}
.edulider-secao--inversa .edulider-secao__titulo { color: #fff; }

.edulider-secao__linha {
  margin: 20px 0 0;
  font-size: var(--text-md);
  font-weight: 300;
  color: var(--color-ink-700);
}
.edulider-secao--inversa .edulider-secao__linha { color: var(--color-green-100); }

.edulider-duas-colunas { display: grid; gap: 32px; }

.edulider-cartao {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}

@media (min-width: 640px) {
  .edulider-botao--grande {
    padding: 16px 28px;
    font-size: var(--text-md);
  }

  .edulider-secao { padding-block: 80px; }
  .edulider-secao__titulo { font-size: var(--text-2xl); }
  .edulider-secao__linha { font-size: var(--text-lg); }

  .edulider-cartao { padding: 32px; }
}

@media (min-width: 1024px) {
  .edulider-secao { padding-block: 96px; }

  .edulider-duas-colunas {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .edulider-duas-colunas--centro { align-items: center; }
  /* A altura do cartão do quiz muda a cada passo; centralizar faria o texto da
   * esquerda pular junto. */
  .edulider-duas-colunas--topo { align-items: start; }
}