/* ============================================================
   JBM Business — ajustes cirúrgicos de header + mapa
   Não modifica css/style.css (build compilado) nem js/main.js.
   Carregado depois de style.css para ter precedência.
   ============================================================ */

/* ---------- BARRA DE ROLAGEM: escura, combinando com o site ----------
   Por padrão o navegador desenha a barra de rolagem em branco/cinza claro
   (tema do sistema), o que destoa do visual escuro do site. Fundo (trilho)
   preto e o "polegar" (a parte que se arrasta) em cinza. */
html {
  scrollbar-color: #6b6b6b #0a0b0d; /* Firefox: polegar trilho */
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #0a0b0d;
}
::-webkit-scrollbar-thumb {
  background-color: #6b6b6b;
  border-radius: 6px;
  border: 2px solid #0a0b0d;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #8a8a8a;
}

/* ---------- SELETOR DE IDIOMA (BR): bandeira real em vez de emoji ----------
   O botão "BR" do cabeçalho usa o emoji de bandeira 🇧🇷 (span aria-hidden
   dentro do botão). Em alguns ambientes Windows/Chrome esse emoji cai
   para uma renderização em texto ("BR") em vez do desenho da bandeira.
   Aqui a bandeira vira uma imagem de verdade (SVG em img/flags/brazil.svg)
   como background do próprio botão, recortada em círculo perfeito pelo
   border-radius:50% que o botão já tem (classe rounded-full). O emoji
   original só fica invisível (opacity:0) — nada na estrutura/DOM muda.
   Escopo restrito ao grupo de idiomas do cabeçalho (o mesmo componente
   de bandeiras também é usado dentro do menu mobile/gaveta, que não deve
   ser alterado). */
header.header-shadow div[class*="border-l border-white/15 pl-5"] button[aria-label="Português"] {
  background-image: url("../img/flags/brazil.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
header.header-shadow div[class*="border-l border-white/15 pl-5"] button[aria-label="Português"] span {
  opacity: 0;
}

/* ---------- SELETOR DE IDIOMA (US): bandeira real em vez de emoji ----------
   Mesma técnica e mesmo escopo (só o cabeçalho) usados na bandeira do
   Brasil acima — consistência entre os dois seletores. */
header.header-shadow div[class*="border-l border-white/15 pl-5"] button[aria-label="English"] {
  background-image: url("../img/flags/usa.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
header.header-shadow div[class*="border-l border-white/15 pl-5"] button[aria-label="English"] span {
  opacity: 0;
}

/* ---------- SELETOR DE IDIOMA (ES): bandeira real em vez de emoji ----------
   Mesma técnica e mesmo escopo (só o cabeçalho) usados nas bandeiras do
   Brasil e dos EUA acima — completa o conjunto uniforme dos três. */
header.header-shadow div[class*="border-l border-white/15 pl-5"] button[aria-label="Español"] {
  background-image: url("../img/flags/spain.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
header.header-shadow div[class*="border-l border-white/15 pl-5"] button[aria-label="Español"] span {
  opacity: 0;
}

/* ---------- HEADER: aproveitar mais a largura ----------
   O container original (max-w-7xl mx-auto) trava o conteúdo em 1280px e
   centraliza, criando margens vazias enormes e simétricas em telas largas.
   Aqui ele passa a ocupar a largura real do header. O padding horizontal
   original (px-5 md:px-8 = 20px/32px) também é reduzido aqui para a logo
   e os ícones ficarem praticamente colados nas bordas da viewport. */
header.header-shadow .max-w-7xl {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 10px;
}
@media (min-width: 768px) {
  header.header-shadow .max-w-7xl {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---------- HEADER: bloco logo+ícones compacto ----------
   O build original tem "h-24 md:h-28" nesse bloco, mas o utilitário
   "md:h-28" nem existe no CSS compilado — na prática o bloco ficava com
   ~136px de altura (bem mais que a logo), sobrando folga vazia em
   cima/embaixo. Altura automática (do tamanho do conteúdo) com um
   respiro pequeno e fixo — barra fina, sem espaço sobrando, igual à
   referência enviada. */
header.header-shadow div.flex.items-center.justify-between.h-24 {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 8px;
  padding-bottom: 6px;
}

/* ---------- HEADER: logo — tamanho proporcional à referência ---------- */
header.header-shadow div.flex.items-center.justify-between.h-24 > button.shrink-0 img {
  height: 4rem;
}
@media (min-width: 768px) {
  header.header-shadow div.flex.items-center.justify-between.h-24 > button.shrink-0 img {
    height: 5.25rem;
  }
}

/* ---------- HEADER: menu de navegação — colado, sem folga extra ----------
   A <nav> (Início/Vendas/Aluguel/...) fica logo abaixo do bloco
   logo+ícones, com uma caixa enxuta e uma folga mínima antes do vídeo —
   barra fina de ponta a ponta, como na referência. */
header.header-shadow nav[class*="h-[52px]"] {
  height: 30px;
  border-top: none;
  border-bottom: none;
  margin-top: -10px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}
/* Os botões do menu herdam um padding vertical de .5rem (8px) definido
   em "header nav button" (style.css) — isso os deixava com ~35px de
   altura, mais alto que a caixa da nav (26px), e a metade de baixo
   "vazava" para fora do header, por cima do vídeo. Reduzindo o padding,
   o botão passa a caber inteiro dentro da caixa mais fina. */
header.header-shadow nav[class*="h-[52px]"] button {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ---------- HEADER MOBILE: WhatsApp + idiomas visíveis junto do menu ----------
   O grupo de ícones (busca/favoritos/whats/idiomas) só aparecia em telas
   ≥1024px ("hidden lg:flex"); no celular só sobrava o botão de menu
   (hambúrguer). Aqui o grupo passa a aparecer também no mobile, mas só
   com WhatsApp + idiomas (busca e favoritos continuam escondidos, como
   pedido) — reposicionado para colar ao lado do hambúrguer, à direita. */
@media (max-width: 1023px) {
  header.header-shadow div.flex.items-center.justify-between.h-24 {
    justify-content: flex-start;
  }
  header.header-shadow div[class*="hidden lg:flex items-center gap-6"] {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    margin-right: 14px;
  }
  header.header-shadow div[class*="hidden lg:flex items-center gap-6"] > button:nth-child(1),
  header.header-shadow div[class*="hidden lg:flex items-center gap-6"] > button:nth-child(2) {
    display: none !important;
  }
}

/* ---------- HEADER: opaco no corpo, com um leve degradê só na ponta ---------- */
/* position:fixed tira o header do fluxo para flutuar sobre o vídeo do
   hero (que ocupa 100vh). O fundo é opaco na maior parte da barra (para
   não deixar o vídeo aparecer "por trás" do texto/ícones); só nos
   últimos ~35% da altura ele esmaece, terminando em 45% de opacidade
   (não 0%) — um degradê bem sutil, "um pouquinho transparente" na
   ponta, sem deixar tudo escancarado. */
header.header-shadow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background-color: #0a0b0d !important;
  background-image: linear-gradient(
    to bottom,
    #0a0b0d 0%,
    #0a0b0d 65%,
    rgba(10, 11, 13, 0.45) 100%
  ) !important;
}

/* Hero: como o header saiu do fluxo do documento, o vídeo passa a
   ocupar a viewport inteira (o header flutua translúcido por cima).
   A segunda declaração (100dvh) sobrescreve a primeira em navegadores
   que suportam viewport dinâmica — no celular, "100vh" conta a área
   escondida atrás da barra de endereço retrátil, então o bloco de busca
   centralizado por porcentagem (ver mais abaixo) ficava mais baixo do
   que o meio da tela realmente visível. "100dvh" acompanha a barra de
   endereço abrindo/fechando e mantém a centralização correta. */
.h-\[calc\(100vh-96px\)\],
.md\:h-\[calc\(100vh-164px\)\] {
  height: 100vh !important;
  height: 100dvh !important;
}

/* O container do vídeo do hero tem um max-h-[900px] no build original
   (pensado para um header não-fixed). Em telas com bastante altura
   (monitores grandes, notebooks com pouca escala) isso sobrava um vão
   branco embaixo do vídeo, do tamanho do fundo da página. Removendo o
   teto, o vídeo sempre preenche 100% da viewport, sem espaço vazio. */
div[class*="max-h-[900px]"] {
  max-height: none !important;
}

/* Demais páginas (Vendas, Aluguel, Quem Somos, etc.) não têm o vídeo
   de fundo do hero e, como o header virou fixed, precisam de um
   respiro no topo equivalente à altura do header para o título não
   ficar escondido atrás dele. */
main.page-transition {
  padding-top: 96px;
}
@media (min-width: 768px) {
  main.page-transition {
    padding-top: 112px;
  }
}
@media (min-width: 1024px) {
  main.page-transition {
    padding-top: 144px;
  }
}
/* Home (tem o vídeo do hero): sem respiro, o vídeo fica rente ao topo. */
main.page-transition:has(section.relative.bg-black) {
  padding-top: 0 !important;
}

/* ---------- Banner de cookies: removido a pedido ----------
   O componente calculava sua própria visibilidade via localStorage e não
   empurrava o header (que é fixed) — ao aparecer, ele ficava sobreposto
   ao topo do header (mesmo z-index de camada, "por cima" dele) cobrindo
   parte da logo. Como o pedido é remover o aviso por completo, ele fica
   oculto em vez de corrigido. */
div[class*="relative z-40 bg-black border-b border-white/10"] {
  display: none !important;
}

/* ---------- QUEM SOMOS: reorganizar em pilha vertical ----------
   DOM original: grid de 2 colunas com [div.max-w-xl (eyebrow+título+texto)] e
   [div.card-img (imagem)] lado a lado — título gigante de um lado, bloco de
   texto enorme do outro. Sem alterar o React, usamos display:contents no
   wrapper para "desembrulhar" seus filhos e reordená-los com `order` dentro
   de um único fluxo vertical: QUEM SOMOS -> título -> imagem -> texto.
   Escopo pelo alt da foto dos sócios para não afetar nenhum outro bloco
   grid+max-w-xl reutilizado em outras páginas. */
main.page-transition div.grid:has(img[alt="Sócios da JBM Business"]) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  gap: 0;
}

main.page-transition div.grid:has(img[alt="Sócios da JBM Business"]) > div.max-w-xl {
  display: contents;
}

main.page-transition div.grid:has(img[alt="Sócios da JBM Business"]) p.text-xs {
  order: 1;
  width: 100%;
  text-align: center;
}

main.page-transition div.grid:has(img[alt="Sócios da JBM Business"]) h1 {
  order: 2;
  width: 100%;
  text-align: center;
  margin-bottom: 2.5rem !important;
}

main.page-transition div.grid:has(img[alt="Sócios da JBM Business"]) > div.card-img {
  order: 3;
  width: 100%;
  margin-bottom: 2.75rem;
}

main.page-transition div.grid:has(img[alt="Sócios da JBM Business"]) div.space-y-6 {
  order: 4;
  width: 100%;
  max-width: 760px;
}

/* ---------- HERO MOBILE: bloco de busca centralizado e mais "dinâmico" ----------
   No mobile, o wrapper do formulário de busca é `absolute inset-x-0
   bottom-0`, ou seja, sempre colado no rodapé do vídeo — por isso ficava
   baixo/apertado. Ele é reposicionado para o centro vertical do vídeo só
   no mobile (o desktop não foi tocado).
   O elemento também tem a classe "reveal", uma animação de entrada
   (fadeUp) que define transform:translateY(...) via @keyframes — uma
   animação CSS tem prioridade sobre uma declaração normal no cascade,
   então o "transform: translateY(-50%)" sozinho era ignorado. Por isso
   o !important aqui: é o que faz a centralização realmente vencer.
   O cartão do formulário também fica mais transparente (deixa o vídeo
   aparecer atrás, como na referência) e com cantos arredondados + sombra
   para uma cara mais moderna (sem adicionar aba de "Temporada" nem
   nenhum campo novo — só reposição + estilo). */
@media (max-width: 767px) {
  section.relative.bg-black div[class*="inset-x-0 bottom-0 pl-4"] {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    /* O wrapper original tem padding assimétrico (pl-4=16px / pr-20=80px
       — pensado pra abrir espaço pros ícones do header no desktop). No
       mobile isso empurrava o cartão pra esquerda, parecendo "torto".
       Com o padding igual dos dois lados, o cartão fica realmente
       centralizado. */
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  section.relative.bg-black div[class*="bg-black/85 backdrop-blur"] {
    background-color: rgba(0, 0, 0, 0.55) !important;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
  }
}

/* ---------- FORMULÁRIO DE BUSCA: remover a aba "Código ou nome" ----------
   As 3 abas (Vendas/Aluguel/Código ou nome) são geradas num único map();
   a 3ª (Código ou nome) é sempre o 3º botão dentro dessa linha de abas.
   Afeta o formulário em qualquer página onde ele aparece (home, vendas,
   aluguel), que é o mesmo componente reaproveitado. */
div[class*="flex text-[11px] sm:text-xs uppercase tracking-wide overflow-x-auto"] > button:nth-child(3) {
  display: none !important;
}

/* ---------- "ONDE ESTAMOS" + Google Maps: retângulo horizontal ----------
   Existe uma regra mais específica em style.css ("footer a[class*=
   'aspect-square']"), de um ajuste anterior, fixando a largura em
   15rem/17rem/19rem (pensada para o mapa quadrado original). Ela vencia
   a nossa "width:100%" na especificidade — por isso !important aqui
   também, não só no aspect-ratio/max-width. */
a[href*="Nereu%20Ramos"] {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ---------- RODAPÉ MOBILE: blocos lado a lado em vez de empilhados ----------
   O grid do rodapé só vira grade (md:grid-cols-12) a partir de 768px; no
   celular ele é "grid" sem colunas definidas, então os 4 blocos (Logo,
   Links, Contato, Instagram) ficavam um embaixo do outro. Aqui ele vira
   uma grade de 2 colunas: Logo ocupa a linha toda, Links e Contato ficam
   lado a lado, Instagram ocupa a linha seguinte. */
@media (max-width: 767px) {
  footer.bg-black div[class*="grid md:grid-cols-12"] {
    display: grid;
    /* minmax(0,1fr) — não "1fr" puro — porque por padrão uma coluna de
       grid não encolhe abaixo do min-content do que está dentro dela;
       "Empreendimentos" (uma palavra só, sem quebra) fazia a coluna dos
       links "engordar" e empurrar a de contato para ~90px. Com min 0,
       as duas colunas ficam realmente iguais e o texto quebra a linha
       se precisar. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 28px;
  }
  footer.bg-black div[class*="grid md:grid-cols-12"] > div:nth-child(1),
  footer.bg-black div[class*="grid md:grid-cols-12"] > div:nth-child(4),
  footer.bg-black div[class*="grid md:grid-cols-12"] > div:nth-child(5) {
    grid-column: 1 / -1;
  }

  /* Bloco "Onde Estamos" + mapa: o grid interno (md:grid-cols-2) também
     só vira colunas a partir de 768px; sem isso, o item com aspect-ratio
     (o mapa) fica dentro de uma coluna implícita "auto" e o algoritmo de
     grid encolhia a largura dele para bem menos que o container — o
     mapa ficava pequeno/deslocado. Definir a coluna explicitamente
     (1fr) resolve o encolhimento e o mapa preenche a largura toda. */
  footer.bg-black div[class*="pt-9 border-t border-white/10 grid md:grid-cols-2"] {
    grid-template-columns: 1fr;
  }
}

/* No desktop (≥768px) esse mesmo grid vira 2 colunas (texto | mapa) pelo
   "md:grid-cols-2" do Tailwind. Só que o mapa tem "aspect-ratio" +
   "width:100% !important" (regra acima) e nenhum tamanho intrínseco
   próprio — isso faz o algoritmo de grid entrar num loop de cálculo e
   encolher a coluna do mapa para ~3px (mapa some por completo). Fixar as
   colunas com minmax(0,1fr) resolve o mesmo jeito que no mobile. */
@media (min-width: 768px) {
  footer.bg-black div[class*="pt-9 border-t border-white/10 grid md:grid-cols-2"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}