/*
Theme Name: Novo Guia e Negócios
Theme URI: https://guiaenegocios.edergularte.com.br
Author: Eder Reinaldo Gularte Cordeiro
Author URI: https://edergularte.com.br
Description: Tema WordPress multiuso (institucional, portfólio, classificados, landing pages) com suporte a WooCommerce para lojas virtuais.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 26.07.300941
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: guiaenegocios
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
body.home {
  padding-top: 80px; /* ajuste conforme a altura da navbar */
}

img.icon-orange,
.list-group-item img {
  filter: invert(42%) sepia(100%) saturate(500%) hue-rotate(350deg);
}
.thumb-item {
  width: 100%;   /* ou ajuste conforme layout */
  display: none; /* controlado pelo JS */
}
.main-image-wrapper {
  aspect-ratio: 19 / 9; /* força proporção quadrada */
  overflow: hidden;
}
.main-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* corta sem distorcer */
}
#imageModal img {
  max-height: 90vh; /* nunca passa da altura da tela */
  width: auto;
  object-fit: contain;
}
.text-orange,
a.link-orange {
  color: #fd7e14 !important;
}

a.link-orange:hover {
  color: #ca6510 !important;
}

/* destaca o link ativo */
/* Ativo */
a.link-orange.active {
  color: #ca6510 !important;
}
.btn-orange {
  background-color: #ff6600; /* laranja vibrante */
  color: #fff !important;
  border-radius: 4px;
}

.btn-orange:hover {
  background-color: #e65c00; /* tom mais escuro no hover */
  color: #fff;
}

.btn-whatssapp{
  background-color: #25D366;
  color: #FFF;
}
.btn-whatssapp:hover{
  background-color: #128c7e;
}

/* Celular */
.btn-celular {
  background-color: #363636; /* cinza escuro */
  color: #fff;
}
.btn-celular:hover {
  background-color: #1a1a1a; /* tom mais escuro */
  color: #fff;
}

/* Email */
.btn-email {
  background-color: #363636; /* cinza escuro */
  color: #fff;
}
.btn-email:hover {
  background-color: #1a1a1a;
  color: #fff;
}

/* URL (laranja) */
.btn-url {
  background-color: #ff6600;
  color: #fff;
}
.btn-url:hover {
  background-color: #e65c00; /* tom mais escuro no hover */
  color: #fff;
}

/* Instagram */
.btn-instagram {
  background: linear-gradient(45deg, #FFD600, #FF7A00, #FF0069, #D300C5, #7638FA);
  color: #fff;
}
.btn-instagram:hover {
  opacity: 0.85;
}

/* YouTube */
.btn-youtube {
  background-color: #ff3333;
  color: #fff;
}
.btn-youtube:hover {
  background-color: #cc0000;
  color: #fff;
}

/* TikTok */
.btn-tiktok {
  background: linear-gradient(-45deg, #FE2C55, #000000, #25F4EE);
  color: #fff;
}
.btn-tiktok:hover {
  background-color: #25F4EE;
  color: #000;
}

/* LinkedIn */
.btn-linkedin {
  background-color: #006699;
  color: #fff;
}
.btn-linkedin:hover {
  background-color: #004466;
  color: #fff;
}

/* X (Twitter) */
.btn-x {
  background-color: #000000;
  color: #fff;
}
.btn-x:hover {
  background-color: #333333;
  color: #fff;
}

/* Facebook */
.btn-facebook {
  background-color: #3b5998;
  color: #fff;
}
.btn-facebook:hover {
  background-color: #2d4373;
  color: #fff;
}

/* Pinterest */
.btn-pinterest {
  background-color: #cb383e;
  color: #fff;
}
.btn-pinterest:hover {
  background-color: #a83238;
  color: #fff;
}

/* WhatsApp */
.btn-whatsapp {
  background-color: #25D366;
  color: #fff;
}
.btn-whatsapp:hover {
  background-color: #128c7e;
  color: #fff;
}
.slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slideshow .slide {
  position: relative;
  width: 100%;
  min-height: 350px; /* garante altura mesmo sem mídia */
}

/* camada de mídia */
.slideshow .slide img.image-background,
.slideshow .slide video.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; /* fica atrás */
}

/* camada de conteúdo */
.slideshow .slide .captions {
  position: absolute;   /* cobre toda a área do slide */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;           /* fica acima da mídia */
  display: flex;
  justify-content: center;
  align-items: center;
}



.typing-text::after {
  content: '|';          
  display: inline-block;
  margin-left: 2px;
  animation: blink 0.7s infinite;
  color: #ffc107;        
}

@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}
.custom-logo {
    max-height: 60px; /* altura máxima da logo */
    width: auto;      /* mantém proporção */
}
/* Cabeçalho do accordion */
.accordion-button {
  background-color: #ff6600;   /* laranja vibrante */
  color: #fff;                 /* texto branco */
}

.accordion-button:not(.collapsed) {
  background-color: #fd7e14;   /* tom laranja padrão */
  color: #fff;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

/* Hover e foco */
.accordion-button:hover {
  background-color: #e65c00;   /* tom mais escuro no hover */
  color: #fff;
}

.accordion-button:focus {
  border-color: #fd7e14;
  box-shadow: 0 0 0 0.25rem rgba(253,126,20,.25);
}

/* Ícone de seta */
.accordion-button::after {
  filter: invert(1); /* deixa a seta branca */
}

/* Corpo do accordion */
.accordion-body {
  background-color: #fff8f2;   /* fundo suave puxado para o laranja */
  color: #333;
}
.list-group-item a {
  color: #fd7e14; /* laranja padrão */
  text-decoration: none;
}

.list-group-item a:hover {
  color: #ca6510; /* tom mais escuro no hover */
}
.badge.bg-orange {
  background-color: #ff6600; /* laranja vibrante */
  color: #fff;
}

.badge.bg-orange:hover {
  background-color: #e65c00; /* tom mais escuro */
  color: #fff;
}
