/*
 Theme Name: Hello Child - LimpNort
 Template: hello-elementor
 Version: 1.0.0
 Description: Child theme para padronizar header/footer do blog com o site raiz.
*/

:root{ --header-height: 80px; }
body{ padding-top: var(--header-height); }
@media (max-width: 768px){ :root{ --header-height: 80px; } }

/* Garantir que o header fique acima do conteúdo do Elementor */
#site-header{ z-index: 9999; }

/* Topo: transparente e sem borda (duas âncoras: pela classe no header e no body) */
#site-header:not(.is-scrolled),
body:not(.header-scrolled) #site-header,
body:not(.header-scrolled) header#site-header{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Pequeno espaçamento extra quando admin bar estiver visível */
body.admin-bar{ padding-top: calc(var(--header-height) + 32px); }

/* ====================
   CSS de reforço (fallback) quando Tailwind não carregar
   ==================== */
/* Rolado: gradiente escuro (duas âncoras: pela classe no header e no body) */
#site-header.is-scrolled,
body.header-scrolled #site-header,
body.header-scrolled header#site-header{
  background: linear-gradient(to bottom, rgba(17,24,39,0.92), rgba(17,24,39,0.85)) !important;
  background-color: rgba(17,24,39,0.92) !important;
  border-bottom: 1px solid rgba(220,38,38,0.35) !important;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1) !important;
}
#site-header{ display: block !important; }
#site-header nav{ display: flex !important; }
#site-header .nav-link,
#site-header nav a{ color:#ffffff !important; opacity: 1 !important; visibility: visible !important; }
#site-header .nav-link:hover,
#site-header nav a:hover{ color:#e5e7eb !important; }
#site-header nav a:visited{ color:#ffffff !important; }
#site-header .mobile-link{ color:#ffffff !important; }
#site-header .bg-accent{ background-color:#DC2626 !important; color:#fff !important; display: inline-flex !important; }
#site-header .bg-accent:hover{ background-color:#B91C1C !important; }
#site-header .border-white\/20{ border-color: rgba(255,255,255,0.20) !important; }
@media (min-width: 768px) {
  #site-header button#menu-toggle{ display: none !important; }
}
@media (max-width: 767px) {
  #site-header button#menu-toggle{ display: block !important; }
  #site-header nav{ display: none !important; }
}
#mobile-panel{ background-color:#111827 !important; color:#ffffff !important; }
#mobile-panel a{ color:#ffffff !important; }
#mobile-panel a:hover{ color:#e5e7eb !important; }

footer.bg-primary{ background-color:#111827 !important; color:#ffffff !important; }
footer.bg-primary a{ color:#d1d5db !important; }
footer.bg-primary a:hover{ color:#ffffff; }
footer.bg-primary a:visited{ color:#d1d5db !important; }
footer .border-gray-700{ border-color: rgba(255,255,255,0.15) !important; }
footer.bg-primary h4{ color:#ffffff !important; }

.bg-accent{ background-color:#DC2626 !important; }
.bg-accent-hover{ background-color:#B91C1C !important; }
.text-white{ color:#ffffff !important; }
.hover\:text-white:hover{ color:#ffffff !important; }

/* Fallbacks adicionais das utilitárias mais usadas */
.bg-primary{ background-color:#111827 !important; }
.bg-secondary{ background-color:#F3F4F6 !important; }
.bg-white{ background-color:#fff !important; }
.text-primary{ color:#111827 !important; }
.text-gray-200{ color:#e5e7eb !important; }
.text-gray-300{ color:#d1d5db !important; }
.text-gray-400{ color:#9ca3af !important; }
.text-gray-600{ color:#4b5563 !important; }
.text-white\/60{ color:rgba(255,255,255,0.6) !important; }
.border{ border: 1px solid #e5e7eb !important; }
.border-white\/10{ border-color: rgba(255,255,255,0.10) !important; }
.border-white\/20{ border-color: rgba(255,255,255,0.20) !important; }
.hover\:bg-white\/10:hover{ background-color: rgba(255,255,255,0.10) !important; }
.hover\:bg-white\/20:hover{ background-color: rgba(255,255,255,0.20) !important; }
.hover\:shadow-md:hover{ box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1) !important; }
.rounded-md{ border-radius: 0.375rem !important; }
.rounded-xl{ border-radius: 0.75rem !important; }

/* Mobile menu fallback */
#mobile-backdrop{ background: rgba(0,0,0,0.5) !important; }
#mobile-panel{ transition: transform .3s ease; }
.translate-x-full{ transform: translateX(100%) !important; }

/* Z-index para garantir que o menu mobile fique acima do header */
#mobile-menu{ z-index: 100000 !important; }
#mobile-backdrop{ z-index: 1 !important; }
#mobile-panel{ z-index: 2 !important; }

/* ======= Modal CTA - apenas correções de cor ======= */
.hidden{ display: none !important; }
#cta-modal .bg-primary{ background-color: #111827 !important; }
#cta-modal .text-primary{ color: #111827 !important; }
#cta-modal button#cta-submit{ background-color: #DC2626 !important; color: #fff !important; }
#cta-modal button#cta-submit:hover{ background-color: #B91C1C !important; }

/* ======= Botão toggle (hambúrguer) ======= */
#site-header #menu-toggle{
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
#site-header #menu-toggle:hover,
#site-header #menu-toggle:focus{
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}
#site-header #menu-toggle svg{ color: currentColor !important; stroke: currentColor !important; }

/* Botão de fechar (X) do menu mobile */
#mobile-panel #menu-close,
#site-header #menu-close{
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
#mobile-panel #menu-close:hover,
#mobile-panel #menu-close:focus,
#site-header #menu-close:hover,
#site-header #menu-close:focus{
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}
#mobile-panel #menu-close svg,
#site-header #menu-close svg{ color: currentColor !important; stroke: currentColor !important; }