/* =====================================================
   Blockscout Frontend – Custom Logo Overrides
   =====================================================
   O frontend Blockscout (Next.js) define tamanhos fixos
   nos componentes React via Chakra UI:
     - NetworkLogo: h="24px" (navbar expandida)
     - NetworkIcon: w="30px" h="30px" (navbar colapsada)
     - Header container: h=10 (40px)
   Estes overrides permitem aumentar as dimensões.
   ===================================================== */

/* --------------------------------------------------
   Container do header (aumentar altura para caber o logo)
   NavigationDesktop.tsx → <Box as="header" h={10} ...>
   -------------------------------------------------- */
a[aria-label="Link to main page"] {
  height: auto !important;
  min-height: 40px !important;
}

header:has(> a[aria-label="Link to main page"]) {
  height: auto !important;
  min-height: 40px !important;
}

/* --------------------------------------------------
   Logo completo (navbar expandida)
   Componente: NetworkLogo.tsx  →  <Image h="24px" ...>
   Seletor: atributo alt que termina com "network logo"
   -------------------------------------------------- */
img[alt$="network logo"] {
  height: 96px !important;
  max-height: none !important;
}

/* --------------------------------------------------
   Ícone (navbar colapsada ou mobile)
   Componente: NetworkIcon.tsx  →  <Image w="30px" h="30px" ...>
   Seletor: atributo alt que termina com "network icon"
   -------------------------------------------------- */
img[alt$="network icon"] {
  width: 64px !important;
  height: 64px !important;
}


/* --------------------------------------------------
   Hero banner: substituir texto do título
   Seletor: h1.chakra-heading dentro do banner
   -------------------------------------------------- */
h1.chakra-heading {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

h1.chakra-heading::after {
  content: "Explorador de blocos da RBB. Rede: Mainnet";
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: white;
}


/* --------------------------------------------------
   Hero banner: cores (paleta RBB)
   Gradiente verde escuro → verde médio
   main > div:first-child é o Flex do HeroBanner.tsx
   -------------------------------------------------- */
/* Versão toda verde
main > div:first-child {
  background: linear-gradient(135deg, #1E4620 0%, #2D6A2E 40%, #5A8F4A 100%) !important;
  border: none !important;
}
*/

/* --------------------------------------------------
   Hero banner: barra de busca
   -------------------------------------------------- */
/* Versão toda verde   
form[data-scope="popover"] .chakra-input {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #8CB87A !important;
}

form[data-scope="popover"] .chakra-input::placeholder {
  color: #2D6A2E !important;
}
*/

/* --------------------------------------------------
   Hero banner: cores (paleta RBB)
   Gradiente verde claro → amarelo/dourado
   main > div:first-child é o Flex do HeroBanner.tsx
   -------------------------------------------------- */
main > div:first-child {
  background: linear-gradient(135deg, #2D6A2E 0%, #5A8F4A 35%, #8CB87A 65%, #C8B44A 100%) !important;
  border: none !important;
}

/* --------------------------------------------------
   Hero banner: barra de busca
   -------------------------------------------------- */
form[data-scope="popover"] .chakra-input {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #8CB87A !important;
}

form[data-scope="popover"] .chakra-input::placeholder {
  color: #2D6A2E !important;
}