/**
 * HMVIP BuddyX Header Fixes
 *
 * Estilos de suporte para as correções do header BuddyX Pro.
 *
 * @package   HMVIP\Core
 * @since     4.3.1
 * @license   Proprietary
 */

/* ==========================================================================
   1. Botão light/dark dentro do header (somente ícone, sem círculo)
   ========================================================================== */

.buddypress-icons-wrapper .switch-mode,
.buddypress-icons-wrapper .hmvip-header-theme-toggle {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    margin: 0 4px !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.buddypress-icons-wrapper .switch-mode .buddyx-switch-mode,
.buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 32px;
    height: 32px;
    padding: 4px;
    border: 0;
    border-radius: 0 !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer;
    line-height: 1;
    -webkit-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
}

.buddypress-icons-wrapper .switch-mode .buddyx-switch-mode:hover,
.buddypress-icons-wrapper .switch-mode .buddyx-switch-mode:focus,
.buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode:hover,
.buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode:focus {
    opacity: 0.7;
    background: transparent !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
}

/* Garante fundo transparente no modo claro (o BuddyX usa fundo colorido
   por padrão, o que cria um círculo indesejado ao lado dos ícones nativos). */
html.light-mode .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode,
html.light-mode .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode,
html.buddyx-light-mode .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode,
html.buddyx-light-mode .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode,
.light-mode .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode,
.light-mode .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode,
.buddyx-light-mode .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode,
.buddyx-light-mode .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode,
body.light-mode .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode,
body.light-mode .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode,
body.buddyx-light-mode .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode,
body.buddyx-light-mode .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode,
[data-theme="light"] .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode,
[data-theme="light"] .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode {
    background: transparent !important;
    background-color: transparent !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.buddypress-icons-wrapper .switch-mode .buddyx-switch-mode .color-mode,
.buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode .color-mode {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    background-color: transparent !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* O BuddyX aplica filter: invert(1) em .color-mode globalmente. No tema claro,
   isso torna o SVG da lua (já escuro) branco e invisível em fundo claro.
   Resetamos o filtro para invert(0) em todos os ancestrais possíveis do modo
   claro, garantindo ícone escuro e legível sem círculo de fundo. */
html.light-mode .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode .color-mode,
html.light-mode .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode .color-mode,
html.buddyx-light-mode .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode .color-mode,
html.buddyx-light-mode .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode .color-mode,
.light-mode .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode .color-mode,
.light-mode .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode .color-mode,
.buddyx-light-mode .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode .color-mode,
.buddyx-light-mode .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode .color-mode,
body.light-mode .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode .color-mode,
body.light-mode .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode .color-mode,
body.buddyx-light-mode .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode .color-mode,
body.buddyx-light-mode .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode .color-mode,
[data-theme="light"] .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode .color-mode,
[data-theme="light"] .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode .color-mode {
    -webkit-filter: invert(0) !important;
    filter: invert(0) !important;
}

/* Feedback de hover/focus sem círculo, quadrado ou sombra. O ícone é um SVG
   monocromático carregado via background-image pelo tema; mantemos essa imagem
   e apenas suavizamos a opacidade, igual aos ícones nativos do menu BuddyBoss. */
.buddypress-icons-wrapper .switch-mode .buddyx-switch-mode:hover .color-mode,
.buddypress-icons-wrapper .switch-mode .buddyx-switch-mode:focus .color-mode,
.buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode:hover .color-mode,
.buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode:focus .color-mode {
    background-color: transparent !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
}

/* Dark mode: força ícone claro (o SVG do BuddyX é monocromático escuro).
   O tema aplica filter:invert() globalmente; no header reposicionado mantemos
   a inversão para garantir contraste em fundo escuro. */
.bb-dark-theme .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode .color-mode,
.bb-dark-theme .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode .color-mode,
.buddyx-dark-mode .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode .color-mode,
.buddyx-dark-mode .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode .color-mode,
.dark-mode .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode .color-mode,
.dark-mode .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode .color-mode,
[data-theme="dark"] .buddypress-icons-wrapper .switch-mode .buddyx-switch-mode .color-mode,
[data-theme="dark"] .buddypress-icons-wrapper .hmvip-header-theme-toggle .buddyx-switch-mode .color-mode {
    -webkit-filter: invert(1) brightness(2) !important;
    filter: invert(1) brightness(2) !important;
}

/* ==========================================================================
   2. Logo light/dark sem quebrar src/srcset
   ========================================================================== */

.site-branding .hmvip-logo-link {
    display: inline-block;
    vertical-align: middle;
}

.site-branding .hmvip-logo-link img {
    display: block;
    max-width: 100%;
    height: auto;
}

.site-branding .hmvip-logo-dark {
    display: none !important;
}

.dark-mode .site-branding .hmvip-logo-light,
.buddyx-dark-mode .site-branding .hmvip-logo-light,
[data-theme="dark"] .site-branding .hmvip-logo-light {
    display: none !important;
}

.dark-mode .site-branding .hmvip-logo-dark,
.buddyx-dark-mode .site-branding .hmvip-logo-dark,
[data-theme="dark"] .site-branding .hmvip-logo-dark {
    display: block !important;
}

/* ==========================================================================
   3. Menu mobile (hamburger) — contraste em dark/light mode
   ========================================================================== */

/* Light mode: ícone escuro visível em fundo claro. */
.buddyx-light-mode .site-header .menu-toggle,
.buddyx-light-mode .site-header .navbar-toggle,
.buddyx-light-mode .site-header .bb-mobile-menu-button,
.light-mode .site-header .menu-toggle,
.light-mode .site-header .navbar-toggle,
.light-mode .site-header .bb-mobile-menu-button,
[data-theme="light"] .site-header .menu-toggle,
[data-theme="light"] .site-header .navbar-toggle,
[data-theme="light"] .site-header .bb-mobile-menu-button {
    color: #111111 !important;
}

/* Dark mode: ícone claro sobre fundo escuro. */
.bb-dark-theme .site-header .menu-toggle,
.bb-dark-theme .site-header .navbar-toggle,
.bb-dark-theme .site-header .bb-mobile-menu-button,
.buddyx-dark-mode .site-header .menu-toggle,
.buddyx-dark-mode .site-header .navbar-toggle,
.buddyx-dark-mode .site-header .bb-mobile-menu-button,
.dark-mode .site-header .menu-toggle,
.dark-mode .site-header .navbar-toggle,
.dark-mode .site-header .bb-mobile-menu-button,
[data-theme="dark"] .site-header .menu-toggle,
[data-theme="dark"] .site-header .navbar-toggle,
[data-theme="dark"] .site-header .bb-mobile-menu-button {
    color: #ffffff !important;
}

/* Ícone interno (SVG ou fonte-icon) — dark mode. */
.bb-dark-theme .site-header .menu-toggle svg,
.bb-dark-theme .site-header .navbar-toggle svg,
.bb-dark-theme .site-header .bb-mobile-menu-button svg,
.buddyx-dark-mode .site-header .menu-toggle svg,
.buddyx-dark-mode .site-header .navbar-toggle svg,
.buddyx-dark-mode .site-header .bb-mobile-menu-button svg,
.dark-mode .site-header .menu-toggle svg,
.dark-mode .site-header .navbar-toggle svg,
.dark-mode .site-header .bb-mobile-menu-button svg,
[data-theme="dark"] .site-header .menu-toggle svg,
[data-theme="dark"] .site-header .navbar-toggle svg,
[data-theme="dark"] .site-header .bb-mobile-menu-button svg,
.bb-dark-theme .site-header .menu-toggle path,
.bb-dark-theme .site-header .navbar-toggle path,
.bb-dark-theme .site-header .bb-mobile-menu-button path,
.buddyx-dark-mode .site-header .menu-toggle path,
.buddyx-dark-mode .site-header .navbar-toggle path,
.buddyx-dark-mode .site-header .bb-mobile-menu-button path,
.dark-mode .site-header .menu-toggle path,
.dark-mode .site-header .navbar-toggle path,
.dark-mode .site-header .bb-mobile-menu-button path,
[data-theme="dark"] .site-header .menu-toggle path,
[data-theme="dark"] .site-header .navbar-toggle path,
[data-theme="dark"] .site-header .bb-mobile-menu-button path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Fonte-icon / pseudo-elemento do BuddyBoss (ex: bb-icon-menu). */
.bb-dark-theme .site-header .menu-toggle .bb-icon-menu,
.bb-dark-theme .site-header .navbar-toggle .bb-icon-menu,
.bb-dark-theme .site-header .bb-mobile-menu-button .bb-icon-menu,
.buddyx-dark-mode .site-header .menu-toggle .bb-icon-menu,
.buddyx-dark-mode .site-header .navbar-toggle .bb-icon-menu,
.buddyx-dark-mode .site-header .bb-mobile-menu-button .bb-icon-menu,
.dark-mode .site-header .menu-toggle .bb-icon-menu,
.dark-mode .site-header .navbar-toggle .bb-icon-menu,
.dark-mode .site-header .bb-mobile-menu-button .bb-icon-menu,
[data-theme="dark"] .site-header .menu-toggle .bb-icon-menu,
[data-theme="dark"] .site-header .navbar-toggle .bb-icon-menu,
[data-theme="dark"] .site-header .bb-mobile-menu-button .bb-icon-menu,
.bb-dark-theme .site-header .menu-toggle i,
.bb-dark-theme .site-header .navbar-toggle i,
.bb-dark-theme .site-header .bb-mobile-menu-button i,
.buddyx-dark-mode .site-header .menu-toggle i,
.buddyx-dark-mode .site-header .navbar-toggle i,
.buddyx-dark-mode .site-header .bb-mobile-menu-button i,
.dark-mode .site-header .menu-toggle i,
.dark-mode .site-header .navbar-toggle i,
.dark-mode .site-header .bb-mobile-menu-button i,
[data-theme="dark"] .site-header .menu-toggle i,
[data-theme="dark"] .site-header .navbar-toggle i,
[data-theme="dark"] .site-header .bb-mobile-menu-button i {
    color: #ffffff !important;
}

/* ==========================================================================
   4. Botão "voltar ao topo" nativo do BuddyX Pro (#scrollUp)
   ========================================================================== */

/*
 * O tema posiciona o botão em bottom:20px; right:20px. Em telas pequenas a
 * barra de rolagem do sistema sobrepõe essa área e o botão sai cortado pela
 * metade direita. Afastamos o botão da borda em mobile e respeitamos a safe
 * area, sem alterar o comportamento em desktop.
 */
#scrollUp {
    right: calc(20px + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 480px) {
    #scrollUp {
        right: calc(36px + env(safe-area-inset-right, 0px)) !important;
    }
}

@media (max-width: 360px) {
    #scrollUp {
        right: calc(44px + env(safe-area-inset-right, 0px)) !important;
    }
}

/* ==========================================================================
   5. Cinto de segurança contra overflow horizontal do documento
   ========================================================================== */

/*
 * O widget "Recentemente ativos" do footer do tema renderiza avatares com
 * tooltips (pseudo-elementos .bp-tooltip:after com opacity:0). Esses pseudo-
 * elementos invisíveis expandem o scrollable overflow do documento em ~28px
 * no mobile, o layout viewport cresce e todos os elementos position:fixed
 * (incluindo o #scrollUp) deslocam-se para fora da área visível — a página
 * "corre para o lado". `overflow-x: clip` em html/body elimina o overflow na
 * raiz sem criar scroll container (não quebra o position:sticky do header).
 * O próprio tema já usa `clip` em #page/.site; aqui cobrimos html/body.
 */
html,
body {
    overflow-x: clip;
}