/**
 * MuManiacos Classic: tema para MyBB 1.8
 *
 * Estrutura e clareza no espírito dos fóruns de servidor de MU de hoje:
 * fundo claro, blocos brancos sob cabeçalhos escuros, cantos levemente
 * arredondados e sombra discreta. A paleta puxa para o dourado e o marrom do
 * site de 2008, que é o que dá identidade.
 *
 * Só CSS, de propósito. Um tema MyBB pode substituir os templates HTML, mas
 * cada versão do 1.8 mexe um pouco no markup, e tema que reescreve template
 * quebra na atualização seguinte. Mexendo só na folha de estilo, o fórum
 * continua funcionando depois de atualizar o MyBB.
 *
 * As classes são as do MyBB 1.8: tborder, thead, tcat, trow1, trow2, post,
 * navigation, pagination e companhia.
 */

/* ==================================================================
   Paleta
   ================================================================== */
:root {
    /* Neutros: o fórum é claro, então a base é cinza e branco. */
    --fundo:       #E2DED6;
    --painel:      #FFFFFF;
    --painel-alt:  #FAF8F4;
    --linha:       #DED8CC;
    --linha-suave: #EDE8DF;

    /* Escuros dos cabeçalhos de bloco. */
    --escuro:      #2A2018;
    --escuro-alto: #3A2C1E;

    /* Dourado e marrom herdados do site de 2008. */
    --ouro:        #C2A975;
    --ouro-escuro: #A88F62;
    --marrom:      #663300;
    --vinho:       #802911;

    --texto:       #3A3229;
    --texto-suave: #7C7266;
    --link:        #7A4A16;
    --link-hover:  #A8641D;

    --raio:        5px;
    /* Passo do ritmo vertical: todo espaço entre blocos sai daqui. */
    --gap:         18px;
    --sombra:      0 1px 3px rgba(0, 0, 0, .10);
    --sombra-alta: 0 2px 10px rgba(0, 0, 0, .12);
}

/* ==================================================================
   Base
   ================================================================== */
body {
    background-color: var(--fundo);
    color: var(--texto);
    font-family: "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    text-align: center;
}

a:link, a:visited { color: var(--link); text-decoration: none; }
a:hover, a:active { color: var(--link-hover); text-decoration: none; }

/* ==================================================================
   Estrutura
   ================================================================== */
#container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 14px 40px;
    text-align: left;
    color: var(--texto);
    font-size: 14px;
}

#content { padding: 0; }

/* ------------------------------------------------------------------
   Cabeçalho
   ------------------------------------------------------------------ */
#header { position: relative; padding-top: 14px; }

/*
 * A faixa escura atrás do banner e do menu.
 *
 * Era um gradiente no `body` com altura fixa de 210px, mas a altura do
 * cabeçalho depende do banner, que muda com a largura da tela: a faixa
 * cortava no meio da imagem e deixava um degrau de cor ao lado dela.
 *
 * Aqui ela é um pseudo-elemento do próprio cabeçalho, então acompanha a
 * altura dele sozinha. A largura de 100vw faz a faixa sangrar até as bordas
 * da janela, como nos fóruns que servem de referência, apesar de o container
 * ser limitado a 1180px.
 */
#header::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background: #1C1610;
    z-index: 0;
}

/* O conteúdo do cabeçalho fica acima da faixa. */
#header > * { position: relative; z-index: 1; }

/*
 * O MyBB usa `id="logo"`, não `class="logo"`, e envolve tudo num `.wrapper`.
 * As duas formas ficam declaradas porque a prévia usa a classe e o fórum de
 * verdade usa o id.
 */
#header #logo, #header .logo { line-height: 0; padding: 8px 0 0; }
#header #logo .wrapper { line-height: 0; }

/*
 * O banner acompanha a largura do container. Sem isso ele fica com a largura
 * natural do arquivo (1024px) enquanto o resto da página tem 1180, deixando
 * uma sobra vazia à direita.
 */
#header #logo img, #header .logo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--raio) var(--raio) 0 0;
}

/*
 * Menu principal: faixa escura própria, com o item marcado por um traço
 * dourado embaixo.
 *
 * O fundo é dele, não da faixa escura do body. A altura do banner varia com
 * a largura da tela, então depender da faixa deixava o menu com texto claro
 * sobre fundo claro em certas larguras.
 */
/*
 * O menu é uma `<ul class="menu top_links">`, ou seja, a classe está na
 * PRÓPRIA lista, não num `<div>` em volta. Foi por isso que os itens
 * apareceram empilhados com marcador de lista: a regra antiga mirava
 * `.menu ul`, que não existe no MyBB de verdade.
 *
 * Os dois casos ficam cobertos: a lista com a classe e a lista dentro de um
 * elemento com a classe.
 */
#header ul.menu,
#header .menu ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0 6px;
    list-style: none;
    background: var(--escuro);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

#header ul.menu li,
#header .menu ul li {
    margin: 0;
    padding: 0;
    background: none;
    list-style: none;
}

#header ul.menu li a,
#header .menu ul li a {
    display: inline-block;
    padding: 12px 15px;
    color: #E3DAC9;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s, background-color .15s;
}

#header ul.menu li a:hover,
#header .menu ul li a:hover {
    color: #FFF;
    background: rgba(255, 255, 255, .07);
    border-bottom-color: var(--ouro);
}

/*
 * Bloco de pesquisa e boas-vindas, logo abaixo do menu.
 *
 * O `#panel` do MyBB traz o formulário de busca e a linha "Olá, Visitante".
 * Sem alinhamento os dois ficam empilhados sem respiro, com o campo colado
 * no botão.
 */
/*
 * Dentro do `#panel` o MyBB aninha `.upper > .wrapper`, e a busca vem num
 * `<fieldset id="search">`. São dois detalhes que atrapalham:
 *
 *   1. o flex tem de ir no `.wrapper`, não no `#panel`, senão não alcança a
 *      busca nem a saudação, que são netos e não filhos;
 *   2. o `<fieldset>` traz a borda e o recuo padrão do navegador, e é ela
 *      que desenha aquele retângulo solto em volta do campo de busca.
 */
#panel .upper { padding: 0; }

#panel .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

#panel form { margin: 0; }

#panel fieldset#search,
#panel fieldset {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;   /* tira o retângulo padrão do fieldset */
}

#panel input.textbox { min-width: 240px; }

/* A saudação vai para a direita e ocupa a sobra da linha. */
#panel .welcome,
#panel .float_right { margin-left: auto; }

#panel {
    background: var(--painel);
    border: 1px solid var(--linha);
    border-radius: 0 0 var(--raio) var(--raio);
    box-shadow: var(--sombra);
    color: var(--texto-suave);
    padding: 11px 16px;
    font-size: 13px;
}
#panel a { font-weight: 600; }

/* Trilha de navegação. */
.navigation {
    color: var(--texto-suave);
    font-size: 13px;
    margin: var(--gap) 0;
    padding: 0 2px;
}
.navigation a:link, .navigation a:visited { color: var(--link); }
.navigation .active { color: var(--texto); font-weight: 600; }

/* ==================================================================
   Blocos
   ================================================================== */

/*
 * `tborder` é o quadro de cada bloco: corpo branco, cabeçalho escuro,
 * sombra baixa. Sem `cellspacing` visível, então as linhas se separam por
 * divisórias e não por vãos.
 */
.tborder {
    width: 100%;
    margin: 0 0 var(--gap);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--painel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    overflow: hidden;
}

/* Cabeçalho de bloco: a faixa escura que dá o ritmo da página. */
.thead {
    background: var(--escuro);
    color: #F2E9D8;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    /* Realce de 1px no topo, que dá o relevo sem precisar de imagem. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
.thead a:link, .thead a:visited { color: #FBF4E6; }
.thead a:hover { color: #FFF; }

/*
 * O botão de recolher a categoria.
 *
 * O MyBB põe um `<div class="expcolimage">` com um PNG claro dentro do
 * cabeçalho escuro, e por padrão ele fica numa linha própria, sozinho, o que
 * dá aquele quadradinho solto acima do título. Aqui ele vai para a direita,
 * na mesma linha, com opacidade baixa.
 */
.thead .expcolimage {
    float: right;
    margin-left: 12px;
    opacity: .45;
    transition: opacity .15s;
}
.thead .expcolimage:hover { opacity: .9; }
.thead .expcolimage img { display: block; }

/* Fecha o float do expander para o cabeçalho não perder a altura. */
.thead::after { content: ''; display: table; clear: both; }

/* A descrição da categoria, quando existe, fica abaixo do nome. */
.thead .smalltext { font-weight: 400; opacity: .75; }

/* Faixa de rótulos das colunas. */
.tcat {
    background: var(--painel-alt);
    border-bottom: 1px solid var(--linha);
    color: var(--texto-suave);
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
}
.tcat a:link, .tcat a:visited { color: var(--texto-suave); }

/*
 * Linhas. O MyBB alterna trow1/trow2; aqui as duas são brancas e quem separa
 * é a divisória, que polui menos que o zebrado.
 */
.trow1, .trow2 {
    background: var(--painel);
    border-bottom: 1px solid var(--linha-suave);
    padding: 14px 16px;
    transition: background-color .13s;
}
.trow1:hover, .trow2:hover { background: var(--painel-alt); }

.trow_shaded { background: #FBF1EC; }
.trow_selected td { background: #FBF4E4; }
.trow_sep {
    background: var(--painel-alt);
    border-bottom: 1px solid var(--linha);
    color: var(--texto);
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 700;
}

.tfoot {
    background: var(--painel-alt);
    border-top: 1px solid var(--linha);
    color: var(--texto-suave);
    padding: 11px 16px;
    font-size: 13px;
}
.tfoot a:link, .tfoot a:visited { color: var(--link); }

/* Nome e descrição de fórum na listagem. */
.forum_name { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.forum_name a { color: var(--link); }
.forum_name a:hover { color: var(--link-hover); }
.forum_description { color: var(--texto-suave); font-size: 13px; line-height: 1.5; }
.subforums { color: var(--texto-suave); font-size: 12px; margin-top: 7px; }

.smalltext { font-size: 12px; }
.largetext { font-size: 17px; font-weight: 600; }

/* ==================================================================
   Mensagens
   ================================================================== */
.post {
    background: var(--painel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    margin-bottom: var(--gap);
    overflow: hidden;
}
.post.classic { background: var(--painel); }

/*
 * Cabeçalho da mensagem: avatar à esquerda, nome e dados à direita.
 *
 * O MyBB põe `float: left` no avatar e deixa o bloco de informação no fluxo
 * normal, então os dois começam na mesma coluna e o texto passa por cima da
 * imagem. Aqui o cabeçalho vira flex: cada parte ganha a sua coluna e o
 * espaço entre elas é do `gap`, sem depender do float.
 */
.post .post_author {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--painel-alt);
    border-bottom: 1px solid var(--linha);
    padding: 14px 16px;
}

/* Neutraliza o float do markup: quem posiciona agora é o flex. */
.post .post_author .author_avatar { float: none; flex: 0 0 auto; line-height: 0; }
.post .post_author .author_avatar img {
    display: block;
    border-radius: var(--raio);
    border: 1px solid var(--linha);
}

.post .post_author div.author_information {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--texto-suave);
    font-size: 13px;
    line-height: 1.45;
}
.post .post_author div.author_information .largetext { line-height: 1.3; }

.post .post_author div.author_statistics {
    color: var(--texto-suave);
    font-size: 12px;
    padding-top: 4px;
}

/*
 * Linha da data e do número da mensagem.
 *
 * O recuo lateral tem de ser o mesmo do corpo e do bloco do autor (16px),
 * senão a data encosta na borda esquerda e o "#1" na direita: o MyBB não põe
 * padding nenhum aqui, e o `float: right` do número vai até o fim da caixa.
 *
 * A divisória embaixo separa a data do texto da mensagem.
 */
.post .post_head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--linha-suave);
    color: var(--texto-suave);
    font-size: 13px;
    overflow: hidden;   /* fecha o float do número */
}
.post .post_head .post_date { color: var(--texto-suave); font-size: 12px; }

.post_body { padding: 16px; font-size: 14px; line-height: 1.7; }

/* O padding é das partes de dentro, para a divisória correr de ponta a ponta. */
.post_content { padding: 0; }

.post_controls, .post_management_buttons {
    background: var(--painel-alt);
    border-top: 1px solid var(--linha);
    padding: 9px 16px;
    font-size: 12px;
}

.postbit_buttons a:link, .postbit_buttons a:visited {
    display: inline-block;
    padding: 5px 11px;
    margin-left: 4px;
    background: var(--painel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    color: var(--texto-suave);
    font-size: 12px;
    font-weight: 600;
    transition: background-color .13s, border-color .13s, color .13s;
}
.postbit_buttons a:hover {
    background: var(--escuro);
    border-color: var(--escuro);
    color: #FBF4E6;
}

.signature {
    border-top: 1px solid var(--linha-suave);
    color: var(--texto-suave);
    margin-top: 14px;
    padding-top: 11px;
    font-size: 13px;
}

/* Citação e código. */
blockquote {
    background: var(--painel-alt);
    border: 1px solid var(--linha);
    border-left: 3px solid var(--ouro);
    border-radius: var(--raio);
    margin: 12px 0;
    padding: 11px 13px;
}
blockquote cite {
    display: block;
    border-bottom: 1px solid var(--linha);
    color: var(--texto-suave);
    margin-bottom: 8px;
    padding-bottom: 6px;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
}

.codeblock {
    background: #2A2620;
    border: 1px solid #1E1B16;
    border-radius: var(--raio);
    margin: 12px 0;
    padding: 11px 13px;
    color: #DCE5CE;
}
.codeblock .title {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: #A9A192;
    margin-bottom: 8px;
    padding-bottom: 6px;
    font-weight: 700;
    font-size: 12px;
}
.codeblock code {
    display: block;
    background: none;
    border: 0;
    color: #DCE5CE;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    overflow: auto;
    padding: 0;
}

/* ==================================================================
   Formulários e botões
   ================================================================== */
input.textbox, textarea, select, input.button { font-family: inherit; font-size: 14px; }

input.textbox, textarea, select {
    background: var(--painel);
    border: 1px solid #CFC7B8;
    border-radius: var(--raio);
    color: var(--texto);
    padding: 8px 10px;
    transition: border-color .15s, box-shadow .15s;
}
input.textbox:focus, textarea:focus, select:focus {
    border-color: var(--ouro-escuro);
    box-shadow: 0 0 0 3px rgba(194, 169, 117, .22);
    outline: none;
}
textarea { line-height: 1.6; }

input.button, .button {
    background: var(--escuro);
    border: 1px solid var(--escuro);
    border-radius: var(--raio);
    color: #F5EDDD;
    cursor: pointer;
    font-weight: 600;
    padding: 9px 18px;
    transition: background-color .15s, transform .05s;
}
input.button:hover, .button:hover { background: var(--escuro-alto); }
input.button:active, .button:active { transform: translateY(1px); }

/* ==================================================================
   Paginação
   ================================================================== */
.pagination { font-size: 13px; padding: 0 0 var(--gap); color: var(--texto-suave); }
.pagination a, .pagination .pagination_current {
    display: inline-block;
    background: var(--painel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    margin-right: 4px;
    padding: 6px 11px;
    transition: background-color .13s, border-color .13s, color .13s;
}
.pagination a:hover { background: var(--painel-alt); border-color: #CFC7B8; }
.pagination .pagination_current {
    background: var(--escuro);
    border-color: var(--escuro);
    color: #FBF4E6;
    font-weight: 700;
}

/* ==================================================================
   Avisos
   ================================================================== */
.error, .inline_error, .validation_error {
    background: #FDF0EC;
    border: 1px solid #E8C3B6;
    border-left: 3px solid var(--vinho);
    border-radius: var(--raio);
    color: #7A2E17;
    padding: 13px 15px;
    margin-bottom: 16px;
}
.error ul { margin: 6px 0 0; padding-left: 18px; }

.success_message, .validation_success {
    background: #EEF7EE;
    border: 1px solid #C3DFC3;
    border-left: 3px solid #3E8E41;
    border-radius: var(--raio);
    color: #24632A;
    padding: 13px 15px;
    margin-bottom: 16px;
}

.inline_message {
    background: var(--painel-alt);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 13px 15px;
    margin-bottom: 16px;
}

/* ==================================================================
   Menus flutuantes
   ================================================================== */
.popup_menu {
    background: var(--painel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra-alta);
    overflow: hidden;
}
.popup_menu .popup_item {
    background: var(--painel);
    border-bottom: 1px solid var(--linha-suave);
    color: var(--texto);
    padding: 10px 15px;
}
.popup_menu .popup_item:hover { background: var(--painel-alt); }
.popup_menu .popup_title {
    background: var(--escuro);
    color: #F2E9D8;
    padding: 10px 15px;
    font-weight: 700;
    font-size: 12px;
}

/* ==================================================================
   Legenda dos ícones de fórum
   ==================================================================
   Uma `<dl>` com pares dt/dd. Sem estilo ela vira texto solto, indentado
   pelo recuo padrão do `<dd>`. Aqui os pares ficam lado a lado, numa linha.
*/
.forum_legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    margin: 0 0 var(--gap);
    padding: 12px 16px;
    background: var(--painel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    color: var(--texto-suave);
    font-size: 12px;
}
.forum_legend dt { margin: 0; }
.forum_legend dd { margin: 0 18px 0 0; }

/* O quadradinho de status ao lado de cada item da legenda. */
.forum_status {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--linha);
    vertical-align: middle;
}
.forum_status.forum_on    { background: var(--ouro); }
.forum_status.forum_offlock,
.forum_status.forum_onlock { background: var(--texto-suave); }
.forum_status.forum_link   { background: var(--link); }

/* ==================================================================
   Rodapé
   ================================================================== */
#footer { margin-top: var(--gap); color: var(--texto-suave); font-size: 12px; }

/*
 * A caixa de cima do rodapé é onde ficam os seletores de idioma e de tema e
 * os links. Os três blocos são irmãos dentro de um `.wrapper`, e sem flex
 * eles empilham, cada seletor com o botão "Ir" solto ao lado.
 */
#footer .upper {
    background: var(--painel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 13px 16px;
}
#footer .upper .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

/*
 * A barra de baixo traz os seletores de idioma e de tema, os links do rodapé
 * e a hora. Sem estilo os seletores ficam empilhados, cada um com o botão
 * "Ir" solto ao lado. Aqui tudo vai para uma linha só.
 */
#footer .lower {
    background: var(--painel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 12px 16px;
}
#footer .lower .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

#footer .language, #footer .theme { display: flex; align-items: center; gap: 6px; }
#footer .language form, #footer .theme form { display: flex; align-items: center; gap: 6px; margin: 0; }

/* Os botões "Ir" ficam discretos: não competem com o conteúdo. */
#footer .lower input.button {
    padding: 6px 12px;
    background: var(--painel-alt);
    border: 1px solid var(--linha);
    color: var(--texto);
    font-size: 12px;
}
#footer .lower input.button:hover { background: var(--linha-suave); }

#footer #current_time, #footer #copyright { margin-left: auto; font-size: 12px; }

#footer .bottom { padding: 16px 4px; text-align: center; }

/*
 * Links do rodapé, na mesma linha. O MyBB usa `ul.menu.bottom_links`, com a
 * classe na própria lista, igual ao menu de cima.
 */
#footer ul, #footer ul.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
    box-shadow: none;
}
#footer ul li { margin: 0; padding: 0; }
#footer ul li a { padding: 0; color: var(--link); font-size: 12px; }

.bottommenu {
    background: var(--painel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 13px 16px;
    margin-bottom: var(--gap);
}

/* ==================================================================
   Detalhes
   ================================================================== */
hr { border: 0; border-top: 1px solid var(--linha); margin: 16px 0; }

.float_left { float: left; }
.float_right { float: right; }
.clear { clear: both; }
.hidden, .hiddenrow { display: none; }

.thread_status { display: inline-block; }
.subforumicon { vertical-align: middle; }

/* ==================================================================
   Telas pequenas
   ================================================================== */
@media (max-width: 760px) {
    body { background-image: linear-gradient(180deg, #1C1610 0, #1C1610 150px, var(--fundo) 150px); }

    #container { padding: 0 8px 28px; }
    #header .menu ul { justify-content: center; }
    #header .menu ul li a { padding: 10px 11px; font-size: 12px; }

    /*
     * As tabelas do MyBB têm largura fixa em várias colunas; deixá-las rolar
     * dentro do próprio bloco evita que a página inteira role de lado.
     */
    .tborder { display: block; overflow-x: auto; }

    .post .post_author { padding: 11px; }
    .post_body { padding: 13px; }
}