/* ═══════════════════════════════════════════════════════════════
   Thiper Studio — Botão flutuante de alternar tema (claro/escuro)
   Configurável em /admin/components (habilitar + posição).
   ═══════════════════════════════════════════════════════════════ */

/* NOTA: os tamanhos (44/36px, 40/32px mobile) também estão espelhados no
   <style> crítico do cabeçalho de src/Frontend/Views/layout.php — atualize ambos. */
.thi-theme-toggle {
    position: fixed;
    bottom: 84px;                 /* acima do botão de alto contraste (left) */
    left: 24px;
    z-index: 9998;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); /* contraste sem fundo */
    transition: transform .22s ease, color .3s ease, filter .3s ease;
}
.thi-theme-toggle:hover {
    transform: scale(1.12);
    color: var(--th-color-gold);
}
.thi-theme-toggle:focus-visible {
    outline: 2px solid var(--th-color-gold);
    outline-offset: 3px;
}
.thi-theme-toggle svg {
    display: block;
    width: 20px;
    height: 20px;
}
/* ícone exibido no tema escuro (sol = clique para claro) */
.thi-theme-toggle .thi-theme-icon-moon { display: none; }
/* ícone exibido no tema claro (lua = clique para escuro) */
body.site-light .thi-theme-toggle .thi-theme-icon-sun { display: none; }
body.site-light .thi-theme-toggle .thi-theme-icon-moon { display: block; }

/* posição à direita (acima do chat widget) */
.thi-theme-toggle--right {
    left: auto;
    right: 24px;
    bottom: 88px;
}

/* aparência do botão quando o site está em tema claro (apenas ícone) */
body.site-light .thi-theme-toggle {
    color: var(--th-light-heading, #0f172a);
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .55));
}
body.site-light .thi-theme-toggle:hover {
    color: var(--th-color-gold);
}

@media (max-width: 768px) {
    .thi-theme-toggle { bottom: 76px; left: 16px; width: 40px; height: 40px; }
    .thi-theme-toggle--right { left: auto; right: 16px; bottom: 84px; }
    .thi-theme-toggle svg { width: 18px; height: 18px; }
}

/* ═══ Botão no header (site + blog, desktop e mobile) ═══ */
.thi-hdr-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    padding: 0;
    transition: all .22s ease;
}
.thi-hdr-theme-toggle:hover {
    color: var(--th-color-gold);
    transform: translateY(-1px);
}
.thi-hdr-theme-toggle:focus-visible {
    outline: 2px solid var(--th-color-gold);
    outline-offset: 2px;
}
.thi-hdr-theme-toggle svg {
    display: block;
    width: 18px;
    height: 18px;
}
.thi-hdr-theme-toggle .thi-theme-icon-moon { display: none; }
body.site-light .thi-hdr-theme-toggle .thi-theme-icon-sun { display: none; }
body.site-light .thi-hdr-theme-toggle .thi-theme-icon-moon { display: block; }

/* tema claro */
body.site-light .thi-hdr-theme-toggle {
    background: transparent;
    color: var(--th-light-heading, #0f172a);
}
body.site-light .thi-hdr-theme-toggle:hover {
    color: var(--th-color-gold);
}

/* pill do blog: um pouco menor para caber ao lado dos ícones */
.blog-hdr .thi-hdr-theme-toggle {
    width: 32px;
    height: 32px;
}
.blog-hdr .thi-hdr-theme-toggle svg { width: 15px; height: 15px; }
body.site-light .blog-hdr .thi-hdr-theme-toggle {
    color: var(--th-light-heading, #0f172a);
}

/* landing SIPAT: nav própria sobre o hero escuro */
.sipat-landing-nav .thi-hdr-theme-toggle {
    width: 36px;
    height: 36px;
    color: #fff;
}
.sipat-landing-nav .thi-hdr-theme-toggle:hover {
    color: var(--sipat-accent, #c9a84c);
}
.sipat-landing-nav.scrolled .thi-hdr-theme-toggle {
    color: #1e293b;
}
.sipat-landing-nav.scrolled .thi-hdr-theme-toggle:hover {
    color: var(--sipat-accent, #c9a84c);
}

/* mobile: mesmo visual dos chips das redes sociais */
@media (max-width: 768px) {
    /* aproxima redes sociais + botão de tema + hambúrguer no mobile */
    .header-inner { gap: 10px; }
    .header-inner .thi-hdr-theme-toggle { margin: 0; }
    .thi-hdr-theme-toggle {
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, .6);
        opacity: .85;
    }
    .thi-hdr-theme-toggle:hover { opacity: 1; color: var(--th-color-gold); }
    body.site-light .thi-hdr-theme-toggle {
        background: transparent;
        color: var(--th-light-heading, #0f172a);
        opacity: 1;
    }
    body.site-light .thi-hdr-theme-toggle:hover { color: var(--th-color-gold); }
    .thi-hdr-theme-toggle svg { width: 15px; height: 15px; }
}