/*
Theme Name: MotoClubes BR
Theme URI: https://motoclubesbr.com.br
Author: MotoClubes BR
Author URI: https://motoclubesbr.com.br
Description: Tema para rede social de moto clubes do Brasil. Compatível com Elementor, WooCommerce, BuddyPress e bbPress. Seções: Início, Moto Clubes, Eventos, Canal, Blog, Fórum, Classificados, Loja, Contato, Mensagens e Perfil.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: motoclubesbr
Tags: dark, black, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, threaded-comments, translation-ready, woocommerce
*/

/* =========================================================
   VARIÁVEIS DE COR (Design Tokens)
   fundo:            #000000
   fundo alternativo: #0f0f0f
   títulos:          #c3ba00
   bordas:           #c3ba00
   texto:            #ffffff
   botão padrão:     #666666 (texto #ffffff)
   botão hover/ativo: #c3ba00 (texto #ffffff)
   ========================================================= */
:root{
    --mcb-bg: #000000;
    --mcb-bg-alt: #0f0f0f;
    --mcb-bg-card: #141414;
    --mcb-title: #c3ba00;
    --mcb-border: #c3ba00;
    --mcb-text: #ffffff;
    --mcb-text-muted: #b3b3b3;
    --mcb-btn-bg: #666666;
    --mcb-btn-text: #ffffff;
    --mcb-btn-hover-bg: #c3ba00;
    --mcb-btn-hover-text: #ffffff;
    --mcb-radius: 6px;
    --mcb-font-title: Verdana, Geneva, Tahoma, sans-serif;
    --mcb-font-body: Verdana, Geneva, Tahoma, sans-serif;
    --mcb-max-width: 1200px;
}

/* =========================================================
   RESET BÁSICO
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
    background-color: var(--mcb-bg);
    color: var(--mcb-text);
    font-family: var(--mcb-font-body);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--mcb-title); text-decoration: none; transition: color .2s ease; }
a:hover{ color: #ffffff; }
ul{ margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6{
    font-family: var(--mcb-font-title);
    color: var(--mcb-title);
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.25;
    margin: 0 0 .6em;
}
h1{ font-size: 2.4rem; }
h2{ font-size: 1.9rem; }
h3{ font-size: 1.5rem; }

hr{ border: none; border-top: 1px solid var(--mcb-border); margin: 2em 0; }

/* =========================================================
   LAYOUT GERAL
   ========================================================= */
.site{ min-height: 100vh; display: flex; flex-direction: column; }
.site-content{ flex: 1 0 auto; }
.mcb-container{
    max-width: var(--mcb-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================================
   HEADER / TOPO
   ========================================================= */
.site-header{
    background-color: var(--mcb-bg);
    border-bottom: 2px solid var(--mcb-border);
}
.site-header-row{
    border-bottom: 1px solid #222;
}
.site-header-row:last-child{ border-bottom: none; }

/* Linha 1: busca + ações do usuário */
.site-header-top-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 20px;
}
.site-header-top-inner .search-form{
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: 50%;
}
.site-header-top-inner .search-form label{
    margin: 0;
    flex: 1;
}
.site-header-top-inner .search-field{
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    border-radius: var(--mcb-radius);
}
.site-header-top-inner .search-submit{
    border-radius: var(--mcb-radius) !important;
    margin: 0 !important;
    padding: 12px 22px !important;
}

/* Linha 2: menu */
.site-header-menu-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 6px 20px;
}

/* Linha 3: logotipo + slogan */
.site-header-branding-row .mcb-container{
    padding: 18px 20px;
    text-align: center;
}
.site-header-branding-row .site-branding{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.site-branding .custom-logo{ width: 200px; max-width: 200px; height: auto; }
.site-title{
    font-family: var(--mcb-font-title);
    color: var(--mcb-title);
    font-size: 1.6rem;
    margin: 0;
    text-transform: uppercase;
}
.site-title a{ color: var(--mcb-title); }
.site-description{
    color: var(--mcb-text-muted);
    font-size: .8rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Menu principal */
.mcb-menu-toggle{
    display: none;
    background: var(--mcb-btn-bg);
    color: var(--mcb-btn-text);
    border: 1px solid var(--mcb-border);
    border-radius: var(--mcb-radius);
    padding: 8px 14px;
    font-size: 1rem;
    cursor: pointer;
}
.primary-menu-container ul{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.primary-menu-container li{ position: relative; }
.primary-menu-container a{
    display: block;
    padding: 10px 14px;
    color: var(--mcb-text);
    font-family: var(--mcb-font-title);
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .5px;
    background: none;
    border: none;
}
.primary-menu-container a:hover,
.primary-menu-container .current-menu-item > a,
.primary-menu-container .current_page_item > a{
    background: none;
    color: var(--mcb-title);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.primary-menu-container ul ul{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--mcb-bg-alt);
    border: 1px solid var(--mcb-border);
    min-width: 200px;
    padding: 6px;
    z-index: 99;
    border-radius: var(--mcb-radius);
}
.primary-menu-container li:hover > ul{ display: block; }
.primary-menu-container ul ul li{ width: 100%; }

/* Ícones de usuário (Mensagens / Perfil) no header */
.mcb-user-actions{ display: flex; align-items: center; gap: 10px; }
.mcb-user-actions a{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mcb-btn-bg);
    color: var(--mcb-btn-text);
    border: 1px solid var(--mcb-border);
    border-radius: var(--mcb-radius);
    padding: 8px 12px;
    font-size: .8rem;
    text-transform: uppercase;
}
.mcb-user-actions a:hover{
    background: var(--mcb-btn-hover-bg);
    color: var(--mcb-btn-hover-text);
}
.mcb-user-actions img.avatar{
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--mcb-border);
}

/* =========================================================
   BOTÕES GERAIS (inclui Elementor e formulários de plugins)
   ========================================================= */
.mcb-btn,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.bbp-button,
#buddypress a.button,
#buddypress input[type=submit]{
    background-color: var(--mcb-btn-bg) !important;
    color: var(--mcb-btn-text) !important;
    border: 1px solid var(--mcb-border) !important;
    border-radius: var(--mcb-radius) !important;
    padding: 10px 22px !important;
    font-family: var(--mcb-font-title) !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
    display: inline-block;
}
.mcb-btn:hover, .mcb-btn:focus,
button:hover, button:focus,
input[type="submit"]:hover, input[type="submit"]:focus,
input[type="button"]:hover, input[type="button"]:focus,
.wp-block-button__link:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.bbp-button:hover,
#buddypress a.button:hover,
#buddypress input[type=submit]:hover{
    background-color: var(--mcb-btn-hover-bg) !important;
    color: var(--mcb-btn-hover-text) !important;
}

/* =========================================================
   CARTÕES / GRID DE CONTEÚDO (posts, clubes, eventos, classificados)
   ========================================================= */
.mcb-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin: 24px 0;
}
.mcb-card{
    background: var(--mcb-bg-card);
    border: 1px solid var(--mcb-border);
    border-radius: var(--mcb-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.mcb-card .mcb-card-media{ overflow: hidden; }
.mcb-card .mcb-card-body{ padding: 16px; flex: 1; display: flex; flex-direction: column; }
.mcb-card h3{ font-size: 1.1rem; margin-bottom: .4em; }
.mcb-card .mcb-card-excerpt{ color: var(--mcb-text-muted); flex: 1; }
.mcb-card-meta{ color: var(--mcb-text-muted); font-size: .8rem; text-transform: uppercase; margin-bottom: 8px; }

/* =========================================================
   IMAGENS: conteúdo editorial em P&B / imagens de usuário coloridas
   ========================================================= */
.entry-content img,
.post-thumbnail img,
.mcb-card-media img,
.wp-block-image img,
.blog-content img{
    filter: grayscale(100%);
    transition: filter .3s ease;
}
.entry-content img:hover,
.mcb-card-media img:hover{
    filter: grayscale(0%);
}

/* Exceções: qualquer imagem enviada/pertencente ao usuário permanece colorida.
   Cubra classes comuns de avatar/foto de perfil usadas por BuddyPress, bbPress,
   WooCommerce (avaliações) e comentários nativos do WordPress. */
img.avatar,
.avatar img,
.bp-avatar-wrap img,
.buddypress img.avatar,
.bbp-author-avatar img,
.comment-author img,
.woocommerce-Reviews img.avatar,
.user-photo,
.mcb-user-upload,
.no-grayscale{
    filter: none !important;
}

/* =========================================================
   SIDEBAR / WIDGETS
   ========================================================= */
.widget{
    background: var(--mcb-bg-card);
    border: 1px solid var(--mcb-border);
    border-radius: var(--mcb-radius);
    padding: 18px;
    margin-bottom: 24px;
}
.widget-title{
    font-size: 1rem;
    border-bottom: 1px solid var(--mcb-border);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

/* =========================================================
   FORMULÁRIOS
   ========================================================= */
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="password"], input[type="search"],
input[type="number"], textarea, select{
    background: var(--mcb-bg-alt);
    border: 1px solid var(--mcb-border);
    color: var(--mcb-text);
    border-radius: var(--mcb-radius);
    padding: 10px 12px;
    width: 100%;
    font-family: var(--mcb-font-body);
}
label{ color: var(--mcb-title); text-transform: uppercase; font-size: .8rem; letter-spacing: .5px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
    background: var(--mcb-bg);
    border-top: 2px solid var(--mcb-border);
    padding: 40px 0 20px;
    margin-top: 40px;
    color: var(--mcb-text-muted);
}
.footer-widgets{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}
.footer-menu ul{ display: flex; flex-wrap: wrap; gap: 16px; }
.footer-menu a{ color: var(--mcb-text-muted); text-transform: uppercase; font-size: .8rem; }
.footer-menu a:hover{ color: var(--mcb-title); }
.site-info{
    text-align: center;
    border-top: 1px solid #222;
    padding-top: 16px;
    font-size: .8rem;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 880px){
    .mcb-menu-toggle{ display: inline-block; }
    .primary-menu-container{
        display: none;
        width: 100%;
        order: 3;
    }
    .primary-menu-container.is-open{ display: block; }
    .primary-menu-container ul{ flex-direction: column; }
    .primary-menu-container ul ul{ position: static; border: none; background: transparent; padding-left: 12px; }
    .site-header .mcb-container{ position: relative; }

    /* Linha da busca: centralizada, 20px do topo da página, 0px até a linha do menu */
    .site-header-top{ border-bottom: none; }
    .site-header-top-inner{
        justify-content: center;
        padding-top: 20px;
        padding-bottom: 0;
    }
    .site-header-top-inner .search-form{
        width: 90%;
        max-width: 320px;
    }

    /* Linha do menu: colada na busca, alinhada à esquerda */
    .site-header-menu-row{ padding-top: 0; }
    .site-header-menu-inner{
        justify-content: flex-start;
        padding-top: 0;
    }
}