/* ==========================================================================
   CANAL RAPRJ — TEMA CLARO (opcional, ativado por html.crj-light)
   Carregado DEPOIS de todo o resto (Design System escuro, Elementor, plugins).
   Todo seletor prefixado por html.crj-light; toda declaração com !important
   porque o tema escuro atual já usa !important em quase tudo, e os
   breadcrumbs/badge "min de leitura" são inline (author !important > inline
   normal, então isso é seguro e funciona).

   DECISÃO DE DESIGN: o rodapé continua ESCURO nos dois temas (âncora de
   marca, reduz risco, resolve o logo do rodapé de graça — ver seção 3).
   O player do Spotify também continua escuro (o iframe já é escuro por
   dentro; só suavizamos a sombra).
   ========================================================================== */

html.crj-light {
    /* Fundos */
    --crj-l-bg: #faf9f7;
    --crj-l-bg-alt: #f2efe6;
    --crj-l-surface: #ffffff;
    --crj-l-surface-2: #f5f3ee;
    --crj-l-surface-3: #ece8dd;

    /* Textos */
    --crj-l-text: #191919;
    --crj-l-text-2: #454545;
    --crj-l-text-3: #6b665c;

    /* Bordas */
    --crj-l-border: #e6e2d8;
    --crj-l-border-2: #d3cdbf;

    /* Dourado */
    --crj-l-gold: #f0c000;
    --crj-l-gold-text: #876800;
    --crj-l-gold-hover: #6e5500;
    --crj-l-gold-border: #b28f00;
    --crj-l-gold-tint: rgba(240, 192, 0, 0.14);

    /* Sombras */
    --crj-l-shadow: 0 2px 10px rgba(30, 25, 10, 0.07);
    --crj-l-shadow-hover: 0 6px 18px rgba(30, 25, 10, 0.12);
}

/* Transição suave só durante a troca de tema (ligada via JS por ~350ms) */
html.crj-theme-anim,
html.crj-theme-anim * {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease !important;
}

/* --------------------------------------------------------------------
   1. BASE GLOBAL
   -------------------------------------------------------------------- */
html.crj-light body,
html.crj-light html {
    background: var(--crj-l-bg) !important;
    color: var(--crj-l-text) !important;
}

/* Todas as seções/containers viram transparentes por padrão (revela o body) */
html.crj-light .elementor-section,
html.crj-light .e-con,
html.crj-light .elementor-top-section,
html.crj-light .elementor-inner-section {
    background-color: transparent !important;
}

/* Rodapé re-afirmado ESCURO por cima da regra genérica acima (mais específico) */
html.crj-light .elementor-location-footer,
html.crj-light .elementor-location-footer .e-con,
html.crj-light .elementor-176 .elementor-element-4e4d042,
html.crj-light .elementor-176 .elementor-element-ab1cb0d {
    background-color: #050505 !important;
}
html.crj-light .elementor-location-footer > .e-con:last-child {
    background-color: #040404 !important;
}

html.crj-light h1,
html.crj-light h2,
html.crj-light h3,
html.crj-light h4,
html.crj-light h5,
html.crj-light h6,
html.crj-light .elementor-heading-title {
    color: var(--crj-l-text) !important;
}
/* Rodapé mantém headings claros (fundo escuro não muda) */
html.crj-light .elementor-location-footer .elementor-heading-title {
    color: #ffffff !important;
}

html.crj-light .elementor :where(p, span) {
    color: var(--crj-l-text-2) !important;
}
html.crj-light .elementor-location-footer .elementor-widget-text-editor,
html.crj-light .elementor-location-footer .elementor-widget-text-editor p {
    color: #999 !important;
}

/* Vence a regra "AGGRESSIVE TEXT VISIBILITY" (força branco em quase todo link do miolo).
   Exclui também .premium-blog-entry-title a (achado real 2026-08-01): cards
   skin "banner" têm fundo escuro fixo (foto + overlay), então o título
   precisa continuar claro mesmo com o tema claro ativo — do contrário fica
   texto quase-preto sobre fundo quase-preto, ilegível. */
html.crj-light .elementor a:not(.elementor-button):not(.premium-blog-cat-link):not(.elementor-item):not(.premium-post-ticker__post-title a):not(.premium-blog-entry-title a) {
    color: var(--crj-l-text) !important;
}

html.crj-light a,
html.crj-light a:visited {
    color: var(--crj-l-gold-text) !important;
}
html.crj-light a:hover {
    color: var(--crj-l-gold-hover) !important;
}
/* Links do rodapé continuam claros (fundo escuro) */
html.crj-light .elementor-location-footer a,
html.crj-light .elementor-location-footer a:visited {
    color: #C9C9C9 !important;
}
html.crj-light .elementor-location-footer a:hover {
    color: #f0c000 !important;
}

html.crj-light ::selection {
    background: rgba(240, 192, 0, 0.35) !important;
    color: #191919 !important;
}
html.crj-light :focus-visible {
    outline: 2px solid var(--crj-l-gold-border) !important;
}
html.crj-light ::-webkit-scrollbar-track {
    background: var(--crj-l-bg-alt) !important;
}
/* thumb do scrollbar mantém o gradiente dourado — funciona nos dois temas */

/* --------------------------------------------------------------------
   2. HEADER / NAV / OFF-CANVAS
   -------------------------------------------------------------------- */
html.crj-light .elementor-location-header > .e-con {
    background: rgba(250, 249, 247, 0.93) !important;
    border-bottom: 1px solid var(--crj-l-border-2) !important;
    box-shadow: 0 1px 12px rgba(30, 25, 10, 0.08) !important;
}
html.crj-light .elementor-location-header > .e-con.elementor-sticky--active {
    background: rgba(250, 249, 247, 0.97) !important;
}
html.crj-light .elementor-83 .elementor-element-20748d8 {
    background-color: transparent !important;
}

html.crj-light .elementor-location-header .elementor-nav-menu a,
html.crj-light .elementor-83 .elementor-element-0c809b3 .elementor-item {
    color: var(--crj-l-text) !important;
}
html.crj-light .elementor-location-header .elementor-nav-menu a:hover,
html.crj-light .elementor-location-header .elementor-nav-menu a.elementor-item-active,
html.crj-light .elementor-83 .elementor-element-0c809b3 .elementor-item:hover,
html.crj-light .elementor-83 .elementor-element-0c809b3 .elementor-item.elementor-item-active {
    color: var(--crj-l-gold-text) !important;
}

/* Hambúrguer mobile: o desenho é um PNG branco embutido (não responde a fill/color) */
html.crj-light .elementor-83 .elementor-element-0c809b3 div.elementor-menu-toggle,
html.crj-light .elementor-menu-toggle {
    color: #191919 !important;
}
html.crj-light .elementor-element-95d8021 .elementor-icon svg,
html.crj-light .elementor-83 .elementor-element-0c809b3 div.elementor-menu-toggle svg {
    filter: invert(1) brightness(0.15) !important;
}
/* Ícone de fechar (fundo dourado sólido) continua funcionando sem mudança */

html.crj-light .e-off-canvas__content,
html.crj-light .elementor-83 .elementor-element-f410c11 .e-off-canvas__content {
    background: rgba(250, 249, 247, 0.98) !important;
}
html.crj-light .e-off-canvas__overlay {
    background: rgba(20, 15, 5, 0.45) !important;
}
html.crj-light .e-off-canvas__content a,
html.crj-light .elementor-83 .elementor-element-341fa86 .elementor-item {
    color: #333333 !important;
    border-bottom-color: var(--crj-l-border) !important;
}
html.crj-light .e-off-canvas__content a:hover,
html.crj-light .elementor-83 .elementor-element-341fa86 .elementor-item:hover {
    color: var(--crj-l-gold-text) !important;
}

/* Logo — imagem real (canalraprjlogohorizontal.webp), o lockup em SVG/JS foi
   desativado (snippet 18). Só no header: o rodapé fica escuro nos dois temas,
   então a imagem (feita pra fundo escuro) continua legível lá sem ajuste. */
html.crj-light .elementor-location-header .elementor-widget-theme-site-logo img,
html.crj-light .elementor-location-header .elementor-widget-image img {
    filter: brightness(0.55) saturate(1.4) !important;
}

/* --------------------------------------------------------------------
   3. TICKER / BUSCA / BOTÕES GLOBAIS
   -------------------------------------------------------------------- */
html.crj-light .premium-post-ticker__content,
html.crj-light .premium-post-ticker__posts-wrapper,
html.crj-light .premium-post-ticker .slick-track,
html.crj-light .premium-post-ticker .slick-list,
html.crj-light .premium-post-ticker__post-wrapper,
html.crj-light .elementor-20 .elementor-element-e1b6113 {
    background-color: var(--crj-l-bg-alt) !important;
}
html.crj-light .premium-post-ticker__post-title a {
    color: var(--crj-l-text) !important;
}
html.crj-light .premium-post-ticker__post-title a:hover {
    color: var(--crj-l-gold-text) !important;
}
/* Wrapper do título do ticker (fundo dourado, texto escuro) — sem mudança */

html.crj-light .elementor-button,
html.crj-light .elementor-button .elementor-button-text {
    background: transparent !important;
    border-color: var(--crj-l-gold-border) !important;
    color: var(--crj-l-gold-text) !important;
}
html.crj-light .elementor-button:hover {
    background: #F0C000 !important;
    color: #191919 !important;
    border-color: #F0C000 !important;
}

html.crj-light .elementor-search-form__input,
html.crj-light .elementor-element-affa388 input[type="search"],
html.crj-light .elementor-widget-search input[type="search"] {
    background: var(--crj-l-surface) !important;
    border-color: var(--crj-l-border-2) !important;
    color: var(--crj-l-text) !important;
}
html.crj-light .elementor-search-form__input::placeholder,
html.crj-light .elementor-widget-search input[type="search"]::placeholder {
    color: var(--crj-l-text-3) !important;
}
html.crj-light .elementor-search-form__input:focus,
html.crj-light .elementor-widget-search input[type="search"]:focus {
    border-color: var(--crj-l-gold-border) !important;
    box-shadow: 0 0 0 3px var(--crj-l-gold-tint) !important;
}
/* Botão de busca (fundo dourado, texto escuro) — sem mudança */

html.crj-light .searchwp-live-search-results a,
html.crj-light .searchwp-live-search-result a {
    color: var(--crj-l-text) !important;
}
html.crj-light .searchwp-live-search-results a:hover {
    color: var(--crj-l-gold-text) !important;
}

/* --------------------------------------------------------------------
   4. CARDS / GRIDS (home, arquivo, busca, autor)
   -------------------------------------------------------------------- */
html.crj-light .premium-blog-post-outer-container,
html.crj-light .elementor-post,
html.crj-light article.elementor-post,
html.crj-light .premium-blog-post-container,
html.crj-light .crj-textcard .premium-blog-post-container {
    background: var(--crj-l-surface) !important;
    border-color: var(--crj-l-border) !important;
    box-shadow: var(--crj-l-shadow) !important;
}
html.crj-light .premium-blog-post-outer-container:hover,
html.crj-light .elementor-post:hover,
html.crj-light .crj-textcard .premium-blog-post-container:hover {
    border-color: var(--crj-l-gold-border) !important;
    box-shadow: var(--crj-l-shadow-hover) !important;
}

html.crj-light .premium-blog-entry-title,
html.crj-light .premium-blog-entry-title a,
html.crj-light .elementor-post__title,
html.crj-light .elementor-post__title a,
html.crj-light .elementor-post__title a:link,
html.crj-light .elementor-post__title a:visited,
html.crj-light .crj-yt-title {
    color: var(--crj-l-text) !important;
}
html.crj-light .premium-blog-entry-title a:hover,
html.crj-light .elementor-post__title a:hover {
    color: var(--crj-l-gold-text) !important;
}

html.crj-light .premium-blog-entry-excerpt,
html.crj-light .elementor-post__excerpt,
html.crj-light .elementor-post__excerpt p {
    color: var(--crj-l-text-2) !important;
}
html.crj-light .premium-blog-meta-container,
html.crj-light .elementor-post__meta-data,
html.crj-light .elementor-post-date,
html.crj-light .elementor-post-author {
    color: var(--crj-l-text-3) !important;
}
html.crj-light .elementor-post__read-more,
html.crj-light .elementor-widget-archive-posts .elementor-post__read-more {
    color: var(--crj-l-gold-text) !important;
}

/* Paginação (sem estilo próprio hoje — regra nova) */
html.crj-light nav.elementor-pagination .page-numbers {
    color: var(--crj-l-text) !important;
}
html.crj-light nav.elementor-pagination .page-numbers.current {
    color: var(--crj-l-gold-text) !important;
    border-bottom: 2px solid var(--crj-l-gold) !important;
}
html.crj-light nav.elementor-pagination .page-numbers.dots {
    color: var(--crj-l-text-3) !important;
}

/* EXCEÇÃO: os 4 cards hero da home têm texto sobre foto com overlay escuro —
   mantém o overlay e o título claro (não aplicar fundo/texto claro aqui).
   Reafirma DEPOIS da regra genérica, com seletor mais específico. */
html.crj-light .elementor-20 .elementor-element-983b9e7 .premium-blog-post-container,
html.crj-light .elementor-20 .elementor-element-c26f406 .premium-blog-post-container,
html.crj-light .elementor-20 .elementor-element-2001640 .premium-blog-post-container,
html.crj-light .elementor-20 .elementor-element-1f19450 .premium-blog-post-container {
    background: linear-gradient(145deg, #111111 0%, #0d0d0d 100%) !important;
    box-shadow: none !important;
}
html.crj-light .elementor-20 .elementor-element-983b9e7 .premium-blog-entry-title a,
html.crj-light .elementor-20 .elementor-element-c26f406 .premium-blog-entry-title a,
html.crj-light .elementor-20 .elementor-element-2001640 .premium-blog-entry-title a,
html.crj-light .elementor-20 .elementor-element-1f19450 .premium-blog-entry-title a {
    color: #FFD800 !important;
}

/* EXCEÇÃO GENÉRICA (achado real 2026-08-01): a exceção acima só cobre 4 IDs
   de widget específicos, mas QUALQUER card com skin "banner" (foto + texto
   sobreposto, overlay escuro fixo do próprio widget Premium Blog) tem o
   mesmo problema — existiam ~7 cards na grade da home (fora da lista de 4
   IDs) com título quase-preto sobre overlay escuro, ilegível no tema claro.
   Corrige por CLASSE em vez de ID, cobrindo todos os cards banner atuais e
   futuros. Reafirma DEPOIS, com mesmos valores — não conflita com a exceção
   específica acima (ambas aplicam o mesmo resultado nos 4 cards já cobertos). */
html.crj-light .premium-blog-skin-banner {
    background: linear-gradient(145deg, #111111 0%, #0d0d0d 100%) !important;
    box-shadow: none !important;
}
html.crj-light .premium-blog-skin-banner .premium-blog-entry-title a {
    color: #FFD800 !important;
}

/* Sidebar "Últimos posts" + aside genérico */
html.crj-light .elementor-20 .elementor-element-3578652,
html.crj-light aside {
    background: var(--crj-l-surface) !important;
    border-color: var(--crj-l-border) !important;
}
html.crj-light aside h3.widget-title {
    color: var(--crj-l-text) !important;
    border-bottom-color: rgba(143, 110, 0, 0.25) !important;
}
html.crj-light aside li a,
html.crj-light .elementor-20 .elementor-element-3578652 .elementor-post__title a {
    color: var(--crj-l-text-2) !important;
}
html.crj-light aside li a:hover,
html.crj-light .elementor-20 .elementor-element-3578652 .elementor-post__title a:hover {
    color: var(--crj-l-gold-text) !important;
}

/* Seção Clipes (bg #000 explícito) */
html.crj-light .elementor-20 .elementor-element-e93f930 {
    background-color: var(--crj-l-bg-alt) !important;
}
html.crj-light .elementor-element-0e92015 .premium-blog-content-wrapper {
    background: var(--crj-l-surface) !important;
}

/* Selos de categoria — sem mudança (dourado+texto escuro funciona nos dois temas) */

/* --------------------------------------------------------------------
   5. SINGLE POST
   -------------------------------------------------------------------- */
html.crj-light nav.raprj-breadcrumbs {
    background: var(--crj-l-bg-alt) !important;
}
html.crj-light nav.raprj-breadcrumbs span {
    color: var(--crj-l-text-3) !important;
}
html.crj-light nav.raprj-breadcrumbs a {
    color: var(--crj-l-gold-text) !important;
}

/* Selo "X min de leitura" (inline, sem classe — mirado pelo estilo inline exato) */
html.crj-light .elementor-widget-theme-post-content div[style*="margin-bottom:20px"] {
    color: var(--crj-l-text-3) !important;
}
html.crj-light .elementor-widget-theme-post-content div[style*="margin-bottom:20px"] span {
    color: var(--crj-l-gold-text) !important;
}

html.crj-light .elementor-181 .elementor-element-affb27f .elementor-icon-list-icon i {
    color: var(--crj-l-gold-text) !important;
}

html.crj-light .single .entry-content,
html.crj-light .single .entry-content p {
    color: var(--crj-l-text-2) !important;
}
html.crj-light .single .entry-content a {
    color: var(--crj-l-gold-text) !important;
}

/* Barra de compartilhar */
html.crj-light .raprj-share-bar {
    background: var(--crj-l-surface) !important;
    border-color: var(--crj-l-border) !important;
}
html.crj-light .raprj-share-label {
    color: var(--crj-l-gold-text) !important;
}
html.crj-light .raprj-share-btn {
    background: var(--crj-l-surface-2) !important;
}
html.crj-light .raprj-share-btn:hover {
    background: #f0c000 !important;
}
html.crj-light .raprj-share-btn svg {
    fill: #454545 !important;
}
html.crj-light .raprj-share-btn:hover svg {
    fill: #191919 !important;
}
html.crj-light .raprj-share-count {
    color: var(--crj-l-text-3) !important;
}

/* Reações */
html.crj-light .raprj-reactions {
    background: var(--crj-l-surface) !important;
    border-color: var(--crj-l-border) !important;
}
html.crj-light .raprj-reactions-label,
html.crj-light .raprj-reaction-label {
    color: var(--crj-l-text-3) !important;
}
html.crj-light .raprj-reaction-btn {
    background: var(--crj-l-surface-2) !important;
}
html.crj-light .raprj-reaction-btn:hover {
    background: var(--crj-l-gold-tint) !important;
}
html.crj-light .raprj-reaction-btn.active {
    background: rgba(240, 192, 0, 0.22) !important;
    border-color: var(--crj-l-gold-border) !important;
}
html.crj-light .raprj-reaction-count {
    color: var(--crj-l-gold-text) !important;
}

/* FAQ (SEO & GEO) */
html.crj-light .raprj-seo-faq {
    background: var(--crj-l-surface) !important;
    border-color: var(--crj-l-border) !important;
}
html.crj-light .raprj-seo-faq h3 {
    color: var(--crj-l-gold-text) !important;
}
html.crj-light .raprj-seo-faq-item {
    border-bottom-color: var(--crj-l-border) !important;
}
html.crj-light .raprj-seo-faq-item summary {
    color: var(--crj-l-text) !important;
}
html.crj-light .raprj-seo-faq-item summary::after {
    color: var(--crj-l-gold-text) !important;
}
html.crj-light .raprj-seo-faq-item p {
    color: var(--crj-l-text-2) !important;
}

/* "Leia Também" (crj-related, design system) + "Leia também" do Radar (parágrafo simples) */
html.crj-light .crj-related {
    border-top-color: var(--crj-l-border-2) !important;
}
html.crj-light .crj-related h3 {
    color: var(--crj-l-gold-text) !important;
}
html.crj-light .crj-related-card {
    background: var(--crj-l-surface) !important;
    border-color: var(--crj-l-border) !important;
    color: var(--crj-l-text) !important;
}
html.crj-light .crj-related-card:hover {
    border-color: var(--crj-l-gold-border) !important;
}
html.crj-light .raprj-radar-relacionadas {
    color: var(--crj-l-text-2) !important;
}
html.crj-light .raprj-radar-relacionadas a {
    color: var(--crj-l-gold-text) !important;
}

/* Navegação entre posts (anterior/próximo) */
html.crj-light .crj-post-nav a {
    border-color: var(--crj-l-border-2) !important;
}
html.crj-light .crj-post-nav a:hover {
    border-color: var(--crj-l-gold-border) !important;
}
html.crj-light .crj-nav-label {
    color: var(--crj-l-gold-text) !important;
}
html.crj-light .crj-nav-title {
    color: var(--crj-l-text-2) !important;
}

/* Grid de clipes YouTube */
html.crj-light .crj-yt-card {
    background: var(--crj-l-surface) !important;
    border-color: var(--crj-l-border) !important;
}
html.crj-light .crj-yt-card:hover {
    border-color: var(--crj-l-gold-border) !important;
}
/* .crj-yt-play (dourado + seta escura) — sem mudança */

/* Posts relacionados (widget Elementor posts.classic no single) */
html.crj-light .elementor-181 .elementor-element-c061f6a .elementor-post {
    background: var(--crj-l-surface) !important;
    border-color: var(--crj-l-border) !important;
}
html.crj-light .elementor-181 .elementor-element-c061f6a .elementor-post__read-more-wrapper {
    background: transparent !important;
}
html.crj-light .elementor-181 .elementor-element-c061f6a .elementor-post__read-more {
    color: var(--crj-l-gold-text) !important;
}

/* --------------------------------------------------------------------
   6. COMPONENTES INJETADOS POR JS
   -------------------------------------------------------------------- */

/* Newsletter (v1 e v2) */
html.crj-light .crj-newsletter {
    background: linear-gradient(150deg, #ffffff, #faf6e8, #ffffff) !important;
    border-color: rgba(143, 110, 0, 0.25) !important;
}
html.crj-light .crj-newsletter h3 {
    color: var(--crj-l-text) !important;
}
html.crj-light .crj-nl-eyebrow {
    color: var(--crj-l-gold-text) !important;
}
html.crj-light .crj-newsletter p {
    color: var(--crj-l-text-2) !important;
}
html.crj-light .crj-nl-form input[type="email"] {
    background: var(--crj-l-surface) !important;
    border-color: var(--crj-l-border-2) !important;
    color: var(--crj-l-text) !important;
}
html.crj-light .crj-nl-form input[type="email"]:focus {
    border-color: var(--crj-l-gold-border) !important;
}
/* Botão da newsletter (fundo dourado, texto escuro) — sem mudança */
html.crj-light .crj-nl-msg.info {
    color: var(--crj-l-gold-text) !important;
}
html.crj-light .crj-nl-msg.success {
    color: #2e7d32 !important;
}
html.crj-light .crj-nl-msg.error {
    color: #c62828 !important;
}

/* Banner ANUNCIE (ad-strip) */
html.crj-light .crj-ad-strip {
    background:
        radial-gradient(120% 180% at 85% 0%, rgba(240, 192, 0, 0.10) 0%, rgba(240, 192, 0, 0) 45%),
        linear-gradient(100deg, #ffffff 0%, #faf4dd 55%, #ffffff 100%) !important;
    border-color: rgba(143, 110, 0, 0.3) !important;
}
html.crj-light .crj-ad-eyebrow {
    color: var(--crj-l-gold-text) !important;
}
html.crj-light .crj-ad-title {
    color: var(--crj-l-text) !important;
}
html.crj-light .crj-ad-sub {
    color: var(--crj-l-text-2) !important;
}
/* .crj-ad-btn (fundo dourado, texto escuro) — sem mudança */

/* CTA divulgação */
html.crj-light .canalrap-divulgacao-cta {
    background: var(--crj-l-surface) !important;
    border-color: rgba(143, 110, 0, 0.2) !important;
}
html.crj-light .canalrap-divulgacao-cta h2,
html.crj-light .canalrap-divulgacao-cta h3 {
    color: var(--crj-l-text) !important;
}
html.crj-light .canalrap-divulgacao-cta p {
    color: var(--crj-l-text-2) !important;
}
html.crj-light .canalrap-divulgacao-cta a:last-of-type {
    border-color: var(--crj-l-border-2) !important;
    color: var(--crj-l-text-2) !important;
}
html.crj-light .canalrap-divulgacao-cta a:last-of-type:hover {
    color: var(--crj-l-gold-text) !important;
}

/* Barra social flutuante */
html.crj-light #crj-social-bar a {
    background: var(--crj-l-surface-3) !important;
    border: 1px solid var(--crj-l-border-2) !important;
}
html.crj-light #crj-social-bar a:hover {
    background: #f0c000 !important;
}
html.crj-light #crj-social-bar a svg {
    fill: #191919 !important;
}

/* Player Spotify: continua ESCURO de propósito (iframe já é escuro por dentro) —
   só suaviza a sombra pra não ficar pesada sobre o fundo claro. */
html.crj-light #crj-spotify-player {
    box-shadow: 0 -2px 12px rgba(30, 25, 10, 0.15) !important;
}

/* Botão voltar ao topo — sem mudança de cor (dourado + texto escuro já funciona) */

/* --------------------------------------------------------------------
   7. INPUTS (padrão único)
   -------------------------------------------------------------------- */
html.crj-light input[type="text"],
html.crj-light input[type="email"],
html.crj-light input[type="search"],
html.crj-light textarea {
    background: var(--crj-l-surface) !important;
    border-color: var(--crj-l-border-2) !important;
    color: var(--crj-l-text) !important;
}
html.crj-light input::placeholder,
html.crj-light textarea::placeholder {
    color: var(--crj-l-text-3) !important;
}

/* --------------------------------------------------------------------
   8. BOTÃO DE ALTERNÂNCIA DE TEMA (sol/lua)
   -------------------------------------------------------------------- */
#crj-theme-toggle {
    position: fixed;
    left: 20px;
    bottom: 95px; /* acima do player do Spotify (mesma folga usada pelo banner de cookies) */
    z-index: 9998;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid rgba(240, 192, 0, 0.55);
    background: rgba(8, 8, 8, 0.95);
    color: #f0c000;
    cursor: pointer;
    /* Sombra dupla: a externa escura separa o botão de fundos claros, o anel
       dourado sutil separa de fundos escuros (ex: thumbnail de vídeo) — sem
       isso o botão "some" contra imagens escuras (achado real, auditoria
       visual 2026-08-01). */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(0, 0, 0, 0.35);
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
#crj-theme-toggle:hover {
    transform: translateY(-2px);
    border-color: rgba(240, 192, 0, 0.85);
}
#crj-theme-toggle svg {
    width: 20px;
    height: 20px;
}
#crj-theme-toggle .crj-tt-moon {
    display: none;
}
#crj-theme-toggle[aria-pressed="true"] .crj-tt-sun {
    display: none;
}
#crj-theme-toggle[aria-pressed="true"] .crj-tt-moon {
    display: block;
}
#crj-theme-toggle.crj-tt-covered {
    visibility: hidden;
    pointer-events: none;
}

html.crj-light #crj-theme-toggle {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--crj-l-gold-border);
    color: var(--crj-l-gold-text);
    box-shadow: var(--crj-l-shadow);
}

@media (max-width: 767px) {
    #crj-theme-toggle {
        left: 14px;
        bottom: 90px;
        width: 40px;
        height: 40px;
    }
}

/* --------------------------------------------------------------------
   9. PÁGINA 404 (standalone — não carrega header/footer/snippets globais;
      a classe crj-light e este CSS são injetados diretamente nesse
      template, ver snippet 12D)
   -------------------------------------------------------------------- */
html.crj-light .crj-404-sub {
    color: var(--crj-l-text-2) !important;
}
html.crj-light .crj-404-code {
    color: var(--crj-l-gold-text) !important;
}
html.crj-light .crj-404-search input {
    background: var(--crj-l-surface) !important;
    border-color: var(--crj-l-border-2) !important;
    color: var(--crj-l-text) !important;
}
html.crj-light .crj-404-search input:focus {
    border-color: var(--crj-l-gold-border) !important;
}
/* .crj-404-search button (fundo dourado, texto escuro) — sem mudança */
html.crj-light .crj-404-grid a {
    background: var(--crj-l-surface) !important;
    border-color: var(--crj-l-border) !important;
    color: var(--crj-l-text) !important;
}
html.crj-light .crj-404-grid a:hover {
    border-color: var(--crj-l-gold-border) !important;
}
html.crj-light .crj-404-recent h3 {
    color: var(--crj-l-gold-text) !important;
}
html.crj-light .crj-404-home {
    border-color: var(--crj-l-gold-border) !important;
    color: var(--crj-l-gold-text) !important;
}
html.crj-light .crj-404-home:hover {
    background: #f0c000 !important;
    color: #191919 !important;
}

/* --------------------------------------------------------------------
   10. COOKIEADMIN — já é claro nos dois temas, sem mudança necessária
   -------------------------------------------------------------------- */