/*
Theme Name:   Parque dos Ipês — 30 Anos
Theme URI:    https://ipes.com.br
Description:  Tema filho de blocos (FSE) do Parque dos Ipês para o site de 30 anos (1996→2026). Todos os design tokens (cor, tipografia, espaçamento, sombra, motion) vivem no theme.json e são derivados do design system do cliente em claude.ai/design (projeto 059e289a). Estende o Twenty Twenty-Five.
Author:       Evolutiva Negócios Digitais
Template:     twentytwentyfive
Version:      0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Text Domain:  ipes30
*/

/* As regras de estilo do site vivem no theme.json (Global Styles).
   Aqui ficam apenas os comportamentos que o theme.json não cobre. */

/* ── Motion: o design system observou 0.3s ease em TODA transição de cor,
   borda e sombra na produção atual. Nada de bounce, spring ou entrada
   dramática — a contenção é intencional (público em luto). ── */
a,
.wp-block-button__link,
.wp-element-button {
  transition: background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease,
    color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  a,
  .wp-block-button__link,
  .wp-element-button {
    transition: none;
  }
}

/* ── Link hover: âmbar. É o único acento quente documentado em qualquer
   folha de estilo do cliente (cor real de :hover do tema legado). ── */
.wp-block-post-content a:where(:not(.wp-element-button)):hover,
.entry-content a:where(:not(.wp-element-button)):hover {
  color: var(--wp--preset--color--accent-warm);
}

/* ── Botão de WhatsApp: verde real da marca WhatsApp (#25D366).
   O design system é explícito: nunca recolorir para o verde do site. ── */
.ipes-whatsapp .wp-block-button__link,
.wp-block-button.ipes-whatsapp > .wp-block-button__link {
  background-color: #25d366;
  color: #ffffff;
  border: 0;
}

.ipes-whatsapp .wp-block-button__link:hover,
.wp-block-button.ipes-whatsapp > .wp-block-button__link:hover {
  background-color: #1da851;
}

/* ── Barra fixa de contato no mobile. O brief é taxativo: o CTA de
   WhatsApp nunca pode ficar a mais de 1 toque, e nunca escondido atrás
   de hambúrguer. Só existe abaixo de 48rem. ── */
/* `!important` é necessário, não preguiça: o bloco de grupo do WordPress
   gera `.wp-block-group.is-layout-flex{display:flex}`, que tem especificidade
   maior que uma classe só e vencia este `display:none` — a barra aparecia no
   desktop. Mesmo padrão de override responsivo já conhecido em temas FSE. */
.ipes-sticky-mobile {
  display: none !important;
}

@media (max-width: 47.99rem) {
  .ipes-sticky-mobile {
    display: flex !important;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
  }

  /* Impede que a barra fixa cubra o fim do conteúdo. */
  body {
    padding-bottom: 4.5rem;
  }
}

/* ── FAQ accordion: o <details> nativo cobre o requisito sem JS.
   Menos JS = melhor CWV, que é requisito não-funcional da spec. ── */
.ipes-faq details {
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.ipes-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  padding-block: var(--wp--preset--spacing--md);
  font-weight: 600;
  color: var(--wp--preset--color--ink);
}

.ipes-faq summary::-webkit-details-marker {
  display: none;
}

.ipes-faq summary::after {
  content: "+";
  font-size: var(--wp--preset--font-size--xl);
  line-height: 1;
  color: var(--wp--preset--color--brand);
  transition: transform 0.3s ease;
}

.ipes-faq details[open] summary::after {
  content: "−";
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT E LEGIBILIDADE — a camada que faz o site parecer construído,
   não montado. Tudo aqui é global de propósito: conserta as 12 páginas
   de uma vez, em vez de remendar cada pattern.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Largura de leitura ──
   O contentSize do theme.json governa o LAYOUT (72rem). Prosa longa em
   72rem seria ilegível — a linha confortável tem 60-75 caracteres. Então
   a prosa se limita sozinha, sem precisar de wrapper em cada pattern. */
main :where(p, li):not([class*="has-text-align-center"]):not(.ipes-numero-rotulo) {
  max-width: 68ch;
}

main .has-text-align-center {
  margin-inline: auto;
}

/* ── Texto sobre fotografia ──
   O design system manda véu BRANCO com texto ESCURO. O bloco de capa do
   WordPress, porém, assume fundo escuro e pinta o texto de branco — o
   resultado era branco sobre branco, ilegível. `is-light` é a classe que
   o próprio core aplica quando a capa é clara: aqui ela recupera a cor
   de texto correta da marca. */
.wp-block-cover.is-light,
.wp-block-cover.is-light :where(h1, h2, h3, h4, p, li, .ipes-eyebrow) {
  color: var(--wp--preset--color--ink);
}

.wp-block-cover.is-light .ipes-eyebrow {
  color: var(--wp--preset--color--brand);
}

/* Sombra de texto sutil: a foto tem áreas claras e escuras, e o véu não
   uniformiza tudo. Isto garante contraste sem escurecer a imagem. */
.wp-block-cover.is-light :where(h1, h2) {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* ── Ritmo vertical ──
   Seções com respiro consistente. Sem isto cada pattern inventa o próprio
   espaçamento e a página vira uma pilha de faixas desalinhadas. */
main > :where(.wp-block-group, .wp-block-columns) {
  padding-block: var(--wp--preset--spacing--section);
}

main > .wp-block-cover {
  padding-block: 0;
}

/* ── Sangria total do hero ──
   A liberação vem do `align:full` no wp:post-content do template (ver
   templates/page.html): sem ele, o contêiner .entry-content herdava a largura
   de conteúdo e travava tudo dentro, inclusive blocos marcados alignfull.
   Diagnóstico que levou até aqui: o hero já tinha `max-width: none`, mas o
   PAI estava em 1152px — medir a cadeia de pais resolveu o que inspecionar só
   o elemento não resolvia.
   Aqui resta apenas devolver a largura de leitura ao conteúdo DENTRO do hero. */
.wp-block-cover.alignfull > .wp-block-cover__inner-container {
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--lg);
}

/* ── Faixas de seção sangram; o conteúdo delas não ──
   Uma seção com cor de fundo travada na largura de conteúdo vira um retângulo
   flutuando com margens brancas dos dois lados — parece adesivo colado na
   página, não seção. Faixa colorida vai de borda a borda; o texto dentro
   continua na largura de leitura, que o layout "constrained" do próprio bloco
   já garante. */
.entry-content > .wp-block-group.has-background {
  max-width: none;
  /* A margem negativa cancela o respiro global do <main>; sem ela a faixa
     parava a 24px de cada borda e a "sangria" ficava pela metade.
     `!important` não é preguiça: o core do WordPress aplica
     `margin-left/right: auto !important` em todo filho de layout
     "constrained", e sem empatar a especificidade a margem era ignorada —
     o max-width pegava, a margem não. Confirmado medindo o valor computado. */
  margin-inline: calc(-1 * var(--wp--preset--spacing--lg)) !important;
  padding-inline: var(--wp--preset--spacing--lg);
}

@media (max-width: 47.99rem) {
  main > :where(.wp-block-group, .wp-block-columns) {
    padding-block: var(--wp--preset--spacing--xxl);
  }
}

/* ── Cartões de altura igual ──
   As colunas já esticavam; o cartão DENTRO delas é que não ocupava a
   altura toda, e por isso os botões terminavam em alturas diferentes —
   o detalhe que mais faz um layout parecer amador. Agora o cartão estica
   e o botão é empurrado para o rodapé. */
.wp-block-column > .wp-block-group {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.wp-block-column > .wp-block-group > .wp-block-buttons {
  margin-top: auto;
  padding-top: var(--wp--preset--spacing--md);
}

/* ── Botões ──
   "Saiba mais" estava quebrando em três linhas dentro de uma caixa de
   132px. Rótulo curto não quebra; o alvo tem altura mínima confortável
   para o polegar (71% do tráfego é mobile). */
.wp-block-button__link,
.wp-element-button {
  white-space: nowrap;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Botão fantasma sobre fundo claro: contorno da marca, não cinza do core. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  border: 2px solid var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand);
  background: transparent;
  box-shadow: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--wp--preset--color--brand);
  color: #ffffff;
}

/* ── Cabeçalho ──
   Estava com 263px de altura porque marca, navegação e CTA quebravam em
   três linhas. Uma linha só, com a navegação empurrada para a direita. */
/* O cabeçalho respira na largura larga (84rem), não na de conteúdo (72rem):
   com marca + 6 itens de menu + CTA, 72rem forçava "Contato" para uma
   segunda linha. É o layout que cede, não o conteúdo. */
header > .wp-block-group,
header > .wp-block-group.is-layout-flex {
  max-width: var(--wp--style--global--wide-size);
}

header .wp-block-group.is-layout-flex {
  gap: var(--wp--preset--spacing--md);
}

header .wp-block-navigation {
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* A navegação tem 6 itens e rótulos longos ("Central do concessionário").
   Sem apertar levemente a escala e o espaçamento, ela quebra em três
   linhas em telas médias e leva o cabeçalho junto. */
header .wp-block-navigation .wp-block-navigation__container {
  gap: clamp(0.75rem, 1.4vw, 1.5rem);
}

header .wp-block-navigation .wp-block-navigation-item__content {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
}

/* Abaixo de 64rem a navegação inteira vira menu sobreposto; o botão de
   WhatsApp fica FORA dela e por isso nunca some — requisito do brief. */
@media (max-width: 63.99rem) {
  header .wp-block-navigation__responsive-container-open {
    display: flex;
  }
  header .wp-block-navigation:not(.has-modal-open)
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
}

header .wp-block-site-title {
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
  /* Sem isto "Parque dos Ipês" quebrava em três linhas e empurrava a
     altura do cabeçalho para 263px. */
  white-space: nowrap;
}

/* ── Links sobre fundo escuro ──
   Na faixa verde, o link herdava o verde da marca e sumia no fundo.
   Em qualquer superfície escura o link vira claro e sublinhado. */
:where(.has-brand-background-color, .has-brand-deep-background-color) a:not(.wp-element-button) {
  color: #ffffff;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:where(.has-brand-background-color, .has-brand-deep-background-color)
  a:not(.wp-element-button):hover {
  color: var(--wp--preset--color--grove-lime);
}

header figure.wp-block-image {
  margin: 0;
  flex: 0 0 auto;
}

@media (min-width: 48rem) {
  header .wp-block-group.is-layout-flex {
    flex-wrap: nowrap;
  }
}

/* ── Imagem de seção ──
   A sombra da marca é forte por decisão do design system, mas numa foto
   grande ela pesa. Mantém a dimensionalidade sem virar borrão. */
.ipes-foto-cartao img {
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.28);
}

/* Colunas: esticam por padrão, para grades de cartão ficarem alinhadas.
   Centralizar tudo (o que eu tentei antes) desalinhava os cartões do hero —
   um começava mais alto que o outro. Quem precisa de centro é o caso
   específico de imagem ao lado de texto, e esse pede a classe abaixo. */
.wp-block-columns > .wp-block-column {
  align-self: stretch;
}

.ipes-colunas-centro > .wp-block-column {
  align-self: center;
}

/* Os dois caminhos do hero precisam parecer um par: mesmo raio, mesma
   sombra, mesma altura. A peça de urgência é mais sóbria no fundo, não na
   forma. */
.wp-block-cover .wp-block-column > .wp-block-group {
  border-radius: 10px;
  box-shadow: var(--wp--preset--shadow--soft);
}

/* ═══════════════════════════════════════════════════════════════════
   ÁTOMOS — as primitivas que as moléculas e organismos compõem.
   Nada aqui conhece uma página específica. Se um estilo só serve a uma
   página, ele não é átomo e não pertence a este bloco.
   ═══════════════════════════════════════════════════════════════════ */

/* Rótulo de seção (eyebrow). O design system registra tracking 0.06em
   para rótulo em caixa alta — é o único lugar onde a marca usa caixa
   alta, então fica restrito a este átomo. */
.ipes-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--brand);
  margin-bottom: var(--wp--preset--spacing--xs);
}

/* Número institucional grande. `tabular-nums` alinha as colunas quando
   vários números aparecem lado a lado — sem isso, "17.864" e "18.720"
   ficam com larguras diferentes e a linha treme. */
.ipes-numero {
  font-size: var(--wp--preset--font-size--xxxl);
  font-weight: 900;
  line-height: 1.05;
  color: var(--wp--preset--color--brand);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.ipes-numero-rotulo {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--body);
  line-height: 1.35;
}

/* Selo comemorativo.
   Versão padrão discreta: o gradiente "bosque" é vibrante e, repetido em
   vários selos na mesma tela, vira ruído — o design system trata essa
   paleta como decorativa de marca, não como cor de interface. Então o
   selo comum é sóbrio, e o gradiente fica reservado a UM momento por
   página (`.ipes-selo--marca`). */
.ipes-selo {
  display: inline-block;
  padding: 0.35rem var(--wp--preset--spacing--md);
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-size: var(--wp--preset--font-size--sm);
  font-variant-numeric: tabular-nums;
}

/* Sobre fundo escuro (a faixa verde), o contorno claro basta e fica
   elegante — sem a pastilha lima gritando no meio da frase. */
.has-brand-deep-background-color .ipes-selo,
.has-brand-background-color .ipes-selo {
  color: #ffffff;
}

/* O único selo com o gradiente da marca: use no hero dos 30 anos. */
.ipes-selo--marca {
  background: var(--wp--preset--gradient--grove);
  border-color: transparent;
  color: #14324a;
  padding: 0.45rem var(--wp--preset--spacing--lg);
}

/* Hero fotográfico. O véu branco é o ÚNICO efeito que o design system
   permite sobre fotografia — e o valor não é inventado: é o real medido
   na produção (#FFFFFF de ~13% a ~82%). Serve para o texto ficar legível
   sem escurecer nem colorir a foto. */
.ipes-hero-foto {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ipes-hero-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.82) 100%
  );
}

/* Variante para quando o texto fica na metade de baixo: o véu inverte,
   deixando o topo da foto limpo. */
.ipes-hero-foto.is-veu-invertido::before {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.82) 100%
  );
}

/* Imagem de seção com cantos do sistema e sombra real da marca.
   O design system pede sombra "dimensional", mais forte que o flat
   design atual — manter, não suavizar. */
.ipes-foto-cartao img {
  border-radius: 10px;
  box-shadow: var(--wp--preset--shadow--card);
  display: block;
  width: 100%;
  height: auto;
}

/* Foto no topo do cartão de produto.
   As margens negativas cancelam o respiro do cartão para a imagem encostar
   nas bordas — foto flutuando dentro de uma caixa parece slide, não cartão.
   O recorte fixo em 4:3 garante que 4 fotos de proporções diferentes formem
   uma grade regular. */
.ipes-card-foto {
  margin: calc(-1 * var(--wp--preset--spacing--md))
    calc(-1 * var(--wp--preset--spacing--md)) var(--wp--preset--spacing--md);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.ipes-card-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Movimento contido, coerente com a marca: a foto aproxima de leve, sem
   bounce nem escala dramática. */
.wp-block-column:hover .ipes-card-foto img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .ipes-card-foto img,
  .wp-block-column:hover .ipes-card-foto img {
    transition: none;
    transform: none;
  }
}

/* Citação editorial em serifa. Bitter é a voz literária da marca,
   reservada a homenagem e reflexão — nunca em UI. */
.ipes-citacao {
  font-family: var(--wp--preset--font-family--editorial);
  font-size: var(--wp--preset--font-size--xl);
  line-height: 1.45;
  color: var(--wp--preset--color--ink);
}

/* ── Acessibilidade: foco visível em tudo que recebe teclado.
   Público inclui pessoas em luto, em dispositivos e conexões variadas. ── */
:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 3px solid var(--wp--preset--color--cta);
  outline-offset: 2px;
}