/* ============================================================
   SerraTalhada.Net — identidade visual recriada
   Fiel ao original (grade 780px, cores, fontes Verdana/Arial)
   + modo mobile (reempilha colunas mantendo cores/tipografia)
   ============================================================ */

/* ---- Reset leve ---- */
* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    background: #FFFFFF;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    color: #000000;
}
img { border: 0; max-width: 100%; height: auto; }
table { border-collapse: collapse; }

/* ---- Paleta original ---- */
:root {
    --azul:      #092869;   /* bordas dos blocos */
    --azul2:     #333399;
    --vermelho:  #9a2c28;   /* menu e títulos */
    --vermelho2: #990000;
    --amarelo:   #FFCC00;   /* barra de data */
    --amarelo2:  #FFFF00;
    --verde:     #009933;
    --cinza:     #C0C0C0;
    --cinza-hover:#DEDEDE;
    --fundo-bloco:#f9f9f9;
}

/* ---- Links (como no original) ---- */
a           { font-family: Verdana; color: #000000; text-decoration: none; font-size: 9px; }
a:hover     { color: #FF0000; }
a:visited   { color: #333333; }

/* ---- Classes de texto do site original (topo.asp) ---- */
.vermelho, a.vermelho { color: var(--vermelho); font-family: Verdana, Arial; font-size: 11px; font-weight: bold; }
.laranja,  a.laranja  { color: #ff9933; font-family: Verdana, Arial; font-size: 11px; font-weight: bold; }
.preto,    a.preto    { color: #000; font-family: Verdana, Arial; font-size: 10px; }
.negro,    a.negro    { color: #000; font-family: Verdana, Arial; font-size: 10px; }
.negro2,   a.negro2   { color: #000; font-family: Helvetica, Verdana, Arial; font-size: 10px; }
.negro3,   a.negro3   { color: #808080; font-family: Arial; font-size: 9px; font-weight: bold; }
.branco,   a.branco   { color: #fff; font-family: Verdana, Arial; font-size: 9px; }
.branco2,  a.branco2  { color: #fff; font-family: Verdana, Arial; font-size: 18px; }
.azul,     a.azul     { color: blue; font-family: Arial, Verdana; font-size: 10px; font-weight: bold; }
.bege,     a.bege     { color: #999; font-family: Verdana; font-size: 10px; font-weight: bold; }
.titulo,   a.titulo   { color: #777; font-family: Arial, Verdana; font-size: 14px; font-weight: bold; }

/* ============================================================
   Estrutura da página (grade fixa de 780px)
   ============================================================ */
.pagina {
    width: 780px;
    margin: 0 auto;
    background: #FFFFFF;
}

/* Barra superior de data/hora (amarela) */
.barra-data {
    background: var(--amarelo);
    color: #000;
    text-align: right;
    font-size: 10px;
    height: 15px;
    line-height: 15px;
    padding: 0 6px;
    font-family: Verdana, Arial;
}

/* Cabeçalho com logo + banner animado (como no topo original) */
.cabecalho { padding: 5px 0; display: flex; align-items: center; gap: 2px; }
.cabecalho .logo { flex: 0 0 auto; }
.cabecalho .logo img { display: block; }

/* Slideshow horizontal do topo (reproduz o "Left-Right slideshow" original) */
.topo-slideshow {
    width: 350px; height: 65px; overflow: hidden;
    border: 1px solid var(--azul); background: #fff; flex: 0 0 auto;
}
.topo-slide-track {
    display: flex; height: 100%; width: max-content;
    animation: topo-scroll 18s linear infinite;
}
.topo-slide-track img { height: 65px; width: auto; display: block; }
.topo-slideshow:hover .topo-slide-track { animation-play-state: paused; }
@keyframes topo-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Linha divisória azul (como no original) */
.linha-azul { background: var(--azul2); height: 15px; }

/* Corpo em 3 colunas: menu (esq) | conteúdo (centro) | lateral (dir) */
.corpo {
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.col-menu     { width: 162px; flex: 0 0 162px; }
.col-conteudo { width: 468px; flex: 0 0 468px; padding: 0 4px; overflow: hidden; }
.col-lateral  { width: 150px; flex: 0 0 150px; }

/* ---- Menu lateral esquerdo ---- */
.menu-item {
    width: 160px;
    border-bottom: 1px dashed var(--cinza);
    min-height: 17px;
    line-height: 14px;
    padding: 1px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.menu-item:first-child { border-top: 1px dashed var(--cinza); }
/* Itens principais: preto 9px NEGRITO (como o original: a:link preto + negrito herdado de .vermelho) */
.menu-item a { color: #000; font-family: Verdana; font-size: 9px; font-weight: bold; text-decoration: none; }
.menu-item a:hover { color: #FF0000; }            /* vermelho só no hover, como no original */
.menu-item:hover { background: var(--cinza-hover); }
.menu-titulo {
    background: var(--amarelo);
    height: 17px; line-height: 17px;
    font-weight: bold; color: #000; font-size: 10px;
    padding-left: 8px;
}
.menu-sites .menu-item a { color: #000; font-size: 9px; font-weight: normal; }
.menu-sites .menu-item { min-height: 15px; line-height: 13px; }

/* Campo de busca no fim do menu */
.menu-busca { width: 160px; padding: 5px 2px 0; }
.menu-busca input {
    width: 100%; box-sizing: border-box; padding: 4px 6px; margin-bottom: 4px;
    border: 1px solid var(--cinza); font-family: Verdana, Arial; font-size: 10px;
}
.menu-busca button {
    width: 100%; padding: 4px; background: var(--azul); color: #fff; border: 0;
    font-family: Verdana, Arial; font-size: 10px; font-weight: bold; cursor: pointer;
}
.menu-busca button:hover { background: var(--vermelho2); }

/* ---- Blocos da home (fragmentos originais migrados) ---- */
/* Sem margem extra: o espaçamento vem dos <br> internos do próprio fragmento (como no original) */
.home-bloco { margin-bottom: 0; }
.home-bloco table { max-width: 100%; }
.home-bloco img { max-width: 100%; height: auto; }
/* Respiro entre a foto (float à esquerda) e o texto da matéria */
.home-bloco img[align="left"] { margin: 0 10px 5px 0; }

/* ---- Blocos de conteúdo (cabeçalho de canal) ---- */
.bloco { width: 100%; background: var(--fundo-bloco); margin-bottom: 12px; }
.bloco-titulo {
    border: 1px solid var(--azul);
    background: #f9f9f9 url('../img/fundo-canais.gif') repeat-x;
    color: #000; font-weight: bold;
    font-family: Verdana, Arial; font-size: 10px;
    padding: 2px 6px;
}
.bloco-titulo big { font-size: 12px; }
.bloco-corpo {
    border-bottom: 1px solid var(--cinza);
    padding: 6px;
    font-family: Verdana, Arial; font-size: 10px; color: #000;
}
.bloco-corpo img { float: left; margin: 0 8px 4px 0; }
.bloco-corpo a { font-size: 10px; color: #000; font-weight: bold; }
.bloco-corpo a:hover { color: #FF0000; }

/* Título de matéria (barra vermelha, como noticiaN.asp) */
.materia-titulo {
    background: var(--vermelho2);
    color: #FFFFFF; font-family: Verdana; font-size: 12px; font-weight: bold;
    padding: 4px 8px;
}
.materia-corpo {
    padding: 10px 6px; text-align: justify;
    font-family: Tahoma, Verdana, Arial; font-size: 14px; color: #000;
}
.materia-corpo hr { border: 0; border-top: 1px solid var(--cinza); }
.materia-fonte { font-size: 10px; color: #333; margin-bottom: 6px; }

/* ---- Lista de notícias por categoria (data - título), como no original ---- */
.lista-noticias { margin: 6px 0; padding: 0 0 0 20px; list-style: square; }
.lista-noticias li {
    font-family: Tahoma, Arial, Verdana; font-size: 11px; color: #000;
    border-bottom: 1px solid #C0C0C0; padding: 3px 0;
}
.lista-noticias li .data { color: #000; font-weight: normal; }
.lista-noticias li a {
    font-family: Tahoma, Arial, Verdana; font-size: 11px; color: #000;
    text-decoration: underline;
}
.lista-noticias li a:hover { color: #FF0000; }

/* Acessível a leitores de tela e buscadores, invisível na tela */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Menu mobile (hambúrguer, drawer, overlay) — escondido no desktop */
.menu-hamburguer, .menu-overlay, .menu-drawer-topo { display: none; }

/* ---- Imagem de destaque no topo da matéria ---- */
.materia-imagem { margin-bottom: 10px; text-align: center; }
.materia-imagem img { max-width: 100%; height: auto; border: 1px solid var(--cinza); }

/* ---- Notícia migrada (fragmento HTML original) ---- */
.materia-legado { font-family: Tahoma, Verdana, Arial; font-size: 10px; color: #000; }
.materia-legado table { max-width: 100%; }
.materia-legado img { max-width: 100%; height: auto; }
.materia-legado td { word-break: break-word; }

/* ---- Coluna lateral (banners de anunciantes) ---- */
/* Banners colados (sem espaço vertical), alinhados à esquerda.
   padding-left: 2px deixa o vão direito (conteúdo→parceiros) = 6px, igual ao vão esquerdo (menu→conteúdo) */
.col-lateral { padding-left: 2px; }
.col-lateral .banner { text-align: left; margin-bottom: 0; font-size: 0; }
.col-lateral .banner img { display: block; margin: 0; }

/* ---- Rodapé / créditos ---- */
.creditos {
    text-align: center; margin: 12px auto; width: 100%;
}
.creditos .caixa {
    background: #006699; display: inline-block; padding: 2px;
}
.creditos .caixa-interna {
    background: #fff; padding: 8px 16px;
    font-family: Verdana, Arial; font-size: 10px; color: #000;
}
.creditos a { color: #000; font-size: 10px; }
.faixa-dourada { background: #CC9900; height: 5px; }

/* Formulários (fale conosco, busca, classificados) */
.form-campo { width: 100%; padding: 4px; margin: 3px 0; border: 1px solid var(--cinza);
    font-family: Verdana, Arial; font-size: 12px; }
.btn {
    background: var(--azul); color: #fff; border: 0; padding: 6px 14px;
    font-family: Verdana, Arial; font-size: 11px; font-weight: bold; cursor: pointer;
}
.btn:hover { background: var(--vermelho2); }

/* Paginação */
.paginacao { text-align: center; margin: 12px 0; }
.paginacao a, .paginacao span {
    display: inline-block; padding: 3px 8px; margin: 0 2px;
    border: 1px solid var(--cinza); font-size: 11px;
}
.paginacao .atual { background: var(--azul); color: #fff; }

/* ============================================================
   MODO MOBILE — reempilha as colunas mantendo cores e fontes
   ============================================================ */
@media (max-width: 800px) {
    html, body { overflow-x: hidden; }              /* nunca rola na horizontal */
    .pagina { width: 100%; max-width: 100%; }
    .cabecalho { flex-wrap: wrap; justify-content: center; gap: 0; }
    .cabecalho .logo { flex: 1 1 auto; min-width: 0; text-align: center; }
    .cabecalho .logo img { max-width: 100%; height: auto; }
    .topo-slideshow { display: none; }   /* banner do topo só no desktop */
    .barra-data { text-align: center; height: auto; line-height: 1.4; white-space: normal; }

    .corpo { flex-direction: column; }
    .col-menu, .col-conteudo, .col-lateral {
        width: 100%; flex: 1 1 100%; padding: 0;
    }
    /* margem lateral de leitura no conteúdo (texto não encosta na borda) */
    .col-conteudo { order: 1; overflow: hidden; padding: 0 12px; }
    .menu-item, .menu-titulo { width: 100%; }
    /* Menu vira um DRAWER que desliza da esquerda (estilo app) */
    .col-menu {
        display: block; position: fixed; top: 0; left: 0; height: 100%;
        width: 270px; max-width: 82%; margin: 0; padding: 0 0 24px;
        background: #fff; z-index: 1000; overflow-y: auto;
        transform: translateX(-100%); transition: transform .25s ease;
        box-shadow: 2px 0 14px rgba(0,0,0,.35);
    }
    body.menu-aberto .col-menu { transform: translateX(0); }
    body.menu-aberto { overflow: hidden; }              /* trava a rolagem do fundo */
    .menu-overlay {
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5);
        z-index: 999; opacity: 0; pointer-events: none; transition: opacity .25s ease;
    }
    body.menu-aberto .menu-overlay { opacity: 1; pointer-events: auto; }
    /* Topo do drawer: nome do site + botão fechar */
    .menu-drawer-topo {
        display: flex; align-items: center; justify-content: space-between;
        background: var(--azul); color: #fff; padding: 10px 8px 10px 14px;
        position: sticky; top: 0; z-index: 1;
    }
    .menu-drawer-titulo { font-family: Verdana, Arial; font-size: 13px; font-weight: bold; }
    .menu-fechar { display: block; background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 8px; }
    .col-lateral { order: 3; margin-top: 14px; text-align: center; padding: 0 12px; }
    .materia-corpo { font-size: 15px; }
    body { font-size: 13px; }

    /* Parceiros centralizados na tela */
    .col-lateral .banner { text-align: center; }
    .col-lateral .banner img { margin: 0 auto !important; }

    /* Conteúdo legado (blocos da home e corpo de notícia) — força responsividade:
       as tabelas antigas tinham larguras fixas (460/455px) que estouravam a tela. */
    .home-bloco, .home-bloco td,
    .materia-legado, .materia-legado td {
        width: auto !important; max-width: 100% !important; height: auto !important;
    }
    /* Todas as tabelas de bloco em 100% — assim as barras de título ficam TODAS
       do mesmo tamanho (antes algumas encolhiam para o conteúdo). */
    .home-bloco table, .materia-legado table {
        width: 100% !important; max-width: 100% !important; table-layout: fixed;
    }
    /* Capas dos blocos: SEMPRE largura total (proporcionais, sem corte) — todas iguais */
    .home-bloco img {
        float: none !important; display: block; width: 100% !important; height: auto !important;
        margin: 0 0 8px !important;
    }
    /* Imagens dentro do corpo da matéria: no máximo a largura, centralizadas */
    .materia-legado img {
        float: none !important; display: block; max-width: 100% !important; height: auto !important;
        margin: 0 auto 8px !important;
    }
    .lista-noticias { padding-left: 18px; }

    /* Ícone hambúrguer — discreto (3 traços), como no site de referência */
    .menu-hamburguer {
        display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
        width: 38px; height: 32px; padding: 6px 8px; margin: 6px 0 0 10px;
        background: transparent; border: 0; cursor: pointer;
    }
    .menu-hamburguer span {
        display: block; width: 22px; height: 3px; border-radius: 2px; background: var(--azul);
    }
}