/* ==========================================================
   ✺ PETSLANDIA ✺  —  ESTILO DE TODAS AS PAGINAS

   ★★★ ESTE ARQUIVO E COMPARTILHADO ★★★

   index.html, sobre.html e registros.html leem TODOS
   este mesmo arquivo. Voce muda uma cor aqui e ela muda
   nas tres paginas de uma vez.

   COMO ESTE ARQUIVO ESTA ORGANIZADO:
     PARTE 1 ... PAINEL DE CONTROLE (cores, tamanhos, fundo)
     PARTE 2 ... ESTRUTURA (o que rola, o que fica fixo)
     PARTE 3 ... APARENCIA (header, posts, sidebar, footer)
     PARTE 4 ... CELULAR
   ========================================================== */


/* ==========================================================
   PARTE 1 ✺ PAINEL DE CONTROLE
   ==========================================================

   Tudo aqui embaixo e um "apelido" pra uma cor ou um tamanho.
   Voce troca o valor UMA vez aqui e o site inteiro muda sozinho.
   ========================================================== */

:root {

  /* ---------- CORES ---------- */

  --cor-fundo-pagina:  #4A4541;   /* fundo atras do site (caso a imagem nao carregue) */
  --cor-do-papel:      #eeeae4;   /* o "papel" bege da coluna dos posts */
  --cor-do-texto:      #4A4541;   /* texto normal */
  --cor-da-borda:      #4a4541;   /* as linhinhas de contorno */

  --cor-header:        #292525;   /* faixa escura de cima */
  --cor-texto-header:  #eeeae4;   /* nome do blog + frase */

  --cor-titulos:       #4A4541;   /* titulos dos posts e da sidebar */
  --cor-detalhes:      #292525;   /* datas, setinhas, separador */

  --cor-link:          #A3644D;
  --cor-link-hover:    #305573;

  --cor-sidebar:       #F0E8DF;   /* fundo da coluna da direita */
  --cor-footer:        #e6e0d9;   /* fundo do rodape */

  --cor-botao-menu:        #DBBDA9;
  --cor-botao-menu-hover:  #6AACBA;
  --cor-texto-botao-menu:  #eeeae4;
  --cor-borda-botao-menu:  #eeeae4;


  /* ---------- IMAGEM DE FUNDO ---------- */
  /*
     Essa imagem se repete (tipo azulejo) atras do site.

     PRA TROCAR: e so colar outro link entre as aspas.
     PRA VOLTAR PRA COR SOLIDA: troque a linha inteira por:
     --imagem-de-fundo: none;
  */

  --imagem-de-fundo: url("https://file.garden/aqnZAs9iLHY0tMxj/bg.png");


  /* ---------- TAMANHOS ---------- */

  --largura-do-site:    850px;   /* mais estreito: 700px  |  mais largo: 850px */

  --altura-do-site:     1100px;   /* ★ A ALTURA DA CAIXA DO SITE ★
                                    E ESTE numero que define o tamanho da
                                    "janelinha". O conteudo que nao couber
                                    vira scroll DENTRO das colunas.
                                    Mais baixinho: 500px | mais alto: 750px */

  --largura-da-sidebar: 215px;   /* largura da coluna da direita.
                                    ATENCAO: se diminuir muito, os buttons
                                    88x31 param de caber 2 por linha. */
}



/* ==========================================================
   PARTE 2 ✺ ESTRUTURA
   ==========================================================

   Esta parte e o "esqueleto" do site: ela e quem faz o header
   e o footer ficarem parados enquanto as colunas rolam.

   ⚠ SE VOCE NAO QUER MEXER NO FUNCIONAMENTO, PULE ESTA PARTE.
   ========================================================== */


/* ---------- A PAGINA ---------- */

body {
  background-color: var(--cor-fundo-pagina);
  background-image: var(--imagem-de-fundo);
  background-repeat: repeat;      /* repete a imagem tipo azulejo */

  color: var(--cor-do-texto);

  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;

  margin: 0;
  padding: 0;
}


/* ---------- A CAIXA DO SITE ---------- */
/*
   display:flex + flex-direction:column empilha as 3 partes
   (header / miolo / footer) uma embaixo da outra.

   overflow:hidden e o que impede o site de "vazar" pra fora
   da caixa: o que sobra vira scroll la dentro.
*/

#site {
  width: var(--largura-do-site);
  max-width: 95%;

  height: var(--altura-do-site);

  margin: 25px auto;              /* 25px em cima/embaixo, centralizado */

  background: var(--cor-do-papel);
  border: 1px solid var(--cor-da-borda);

  display: flex;
  flex-direction: column;
  overflow: hidden;
}


/* ---------- HEADER E FOOTER: SEMPRE VISIVEIS ---------- */
/* flex-shrink:0 = "nunca encolha, nunca role" */

header,
footer {
  flex-shrink: 0;
}


/* ---------- O MIOLO (as duas colunas) ---------- */
/*
   flex:1      = "ocupe todo o espaco que sobrar entre header e footer"
   min-height:0 = truque necessario pro scroll funcionar dentro do flex
*/

#content {
  flex: 1;
  min-height: 0;

  display: grid;
  grid-template-columns: 1fr var(--largura-da-sidebar);
}


/* ---------- AS DUAS COLUNAS QUE ROLAM ---------- */

main,
aside,
footer {
  overflow-y: auto;      /* ★ e ISTO que cria a barrinha de scroll ★ */
  min-height: 0;
}



/* ==========================================================
   ✺ APARENCIA DAS BARRINHAS DE SCROLL ✺
   (funciona no Chrome, Edge e Safari)
   ========================================================== */

main::-webkit-scrollbar,
aside::-webkit-scrollbar,
.footer-linha::-webkit-scrollbar {
  width: 10px;
  height: 8px;
}

main::-webkit-scrollbar-track,
aside::-webkit-scrollbar-track,
.footer-linha::-webkit-scrollbar-track {
  background: var(--cor-sidebar);
}

main::-webkit-scrollbar-thumb,
aside::-webkit-scrollbar-thumb,
.footer-linha::-webkit-scrollbar-thumb {
  background: var(--cor-detalhes);
  border: 1px solid var(--cor-da-borda);
}

::selection {
    background-color: #6AACBA;
    color: #eeeae4;
}


/* ==========================================================
   PARTE 3 ✺ APARENCIA
   ========================================================== */


/* ---------- LINKS ---------- */

a {
  color: var(--cor-link);
  text-decoration: underline;
}

a:hover {
  color: var(--cor-link-hover);
}


/* ---------- HEADER ---------- */

header {
  padding: 12px 15px 10px;
  background: var(--cor-header);
  border-bottom: 1px solid var(--cor-da-borda);
  text-align: center;
}

/* NOME DO BLOG */
#logo {
  font-family: Georgia, serif;
  font-size: 28px;
  color: var(--cor-texto-header);
  margin: 0;
}

/* FRASE ABAIXO DO NOME */
#tagline {
  font-size: 12px;
  margin-top: -3px;
  color: var(--cor-texto-header);
}


/* ---------- MENU ---------- */

nav {
  margin-top: 8px;
  font-size: 12px;
}

nav a {
  display: inline-block;

  margin: 0 2px;
  padding: 2px 8px;

  text-decoration: none;

  background: var(--cor-botao-menu);
  color: var(--cor-texto-botao-menu);
  border: 2px outset var(--cor-borda-botao-menu);
}

nav a:hover {
  background: var(--cor-botao-menu-hover);
  color: var(--cor-texto-botao-menu);
}

/*
   O BOTAO DA PAGINA EM QUE VOCE ESTA

   Cada pagina marca o seu proprio botao com class="ativo",
   pro visitante saber onde esta. Fica afundadinho (inset).
*/
nav a.ativo {
  background: var(--cor-botao-menu-hover);
  border-style: inset;
}


/* ---------- COLUNA PRINCIPAL ---------- */

main {
  padding: 15px 18px;
  border-right: 1px solid var(--cor-da-borda);
}


/* ---------- TITULO DE PAGINA (sobre / registros) ---------- */

.titulo-pagina {
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: normal;
  color: var(--cor-titulos);

  margin: 0 0 12px;
  padding-bottom: 5px;

  border-bottom: 1px dotted var(--cor-detalhes);
}


/* ---------- CADA POST ---------- */

.post {
  margin-bottom: 35px;
}

/* DATA */
.date {
  font-size: 11px;
  color: var(--cor-detalhes);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* TITULO */
.post h2 {
  font-family: Didot, serif;
  font-size: 24px;
  font-weight: normal;
  color: var(--cor-titulos);
  margin: 2px 0 10px;
}

/* TEXTO */
.post p {
  margin: 8px 0;
}

/* IMAGENS DOS POSTS */
.post img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 12px auto;
}


/* ==========================================================
   ✺ TAGS ✺
   ========================================================== */


/* ---------- OS BOTOEZINHOS NO FIM DE CADA POST ---------- */
/*
   VOCE NAO PRECISA ESCREVER ESSES BOTOEZINHOS NO HTML.
   Eles aparecem sozinhos, lendo o data-tags="..." do post.
*/

.post-tags {
  font-size: 11px;
  color: #777;
  margin-top: 12px;
}

.tag {
  display: inline-block;

  margin: 2px 2px 2px 0;
  padding: 1px 6px;

  font-size: 11px;
  text-decoration: none;

  background: var(--cor-sidebar);
  color: var(--cor-titulos);
  border: 1px solid var(--cor-detalhes);
}

.tag:hover {
  background: var(--cor-detalhes);
  color: var(--cor-do-papel);
}

/* a tag que esta ativa no momento */
.tag.ativa {
  background: var(--cor-titulos);
  color: var(--cor-do-papel);
}


/* ---------- A BARRA DE FILTRO (so no registros.html) ---------- */

.barra-tags {
  margin-bottom: 12px;
  padding-bottom: 8px;

  font-size: 11px;

  border-bottom: 1px dotted var(--cor-detalhes);
}

.barra-tags .contagem {
  font-size: 10px;
  opacity: 0.7;
}


/* ---------- AVISO DE FILTRO ---------- */

#aviso-filtro {
  margin-bottom: 15px;
  padding: 5px 8px;

  font-size: 11px;

  background: var(--cor-sidebar);
  border: 1px dashed var(--cor-detalhes);
}


/* ---------- SEPARADOR ~ ~ ~ ★ ~ ~ ~ ---------- */

.separator {
  text-align: center;
  color: var(--cor-detalhes);
  margin: 18px 0;
  font-size: 14px;
}


/* ---------- SIDEBAR ---------- */

aside {
  padding: 12px;
  background: var(--cor-sidebar);
  font-size: 13px;
  box-sizing: border-box;   /* nao deixa o padding aumentar a largura */
}

/* TITULOS DA SIDEBAR */
.side-title {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: normal;
  color: var(--cor-titulos);
  border-bottom: 1px dotted #777;
  padding-bottom: 3px;
  margin: 0 0 7px;
}


/* ---------- FOTO / SOBRE MIM ---------- */

.about {
  margin-bottom: 20px;
  text-align: left;
}

.about img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  float: left;
  margin: 0 8px 4px 0;
}


/* ---------- LISTA DE LINKS ---------- */

.links {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.links li {
  margin: 3px 0;
}

.links li::before {
  content: "→ ";
  color: var(--cor-detalhes);
}


/* ---------- BUTTONS 88x31 ✺ 2 POR LINHA ---------- */
/*
   grid-template-columns: 88px 88px  =  duas colunas de 88px.

   PRA COLOCAR 3 POR LINHA (precisa aumentar a sidebar la em cima):
   troque por:  grid-template-columns: 88px 88px 88px;
*/

.buttons {
  display: grid;
  grid-template-columns: 88px 88px;
  gap: 4px;
  justify-content: center;
  margin-bottom: 20px;
}

.buttons img {
  width: 88px;
  height: 31px;
  display: block;
}

.buttons a {
  display: block;
  line-height: 0;
}


/* ---------- DETALHES PEQUENOS ---------- */

.tiny {
  font-size: 10px;
  color: #777;
}

.centro {
  text-align: center;
}


/* ---------- FOOTER ---------- */

footer {
  border-top: 1px solid var(--cor-da-borda);
  padding: 6px 8px;
  text-align: center;
  font-size: 10px;
  color: #777;
  background: var(--cor-footer);
}

.footer-linha {
  text-align: center;
  margin-bottom: 2px;
}

.footer-linha img {
  display: inline-block;
  vertical-align: middle;
}

.footer-blinkies img {
  width: 150px;
  height: 30px;
}

.footer-credito {
  padding-top: 3px;
}


/* ---------- IMAGEM FLUTUANTE ---------- */

.flutuante {
  position: fixed;
  bottom: 20px;
  left: 250px;

  width: 200px;

  z-index: 999;
  pointer-events: none;
  image-rendering: pixelated;
}

/* ---------- GALERIA  ---------- */
.galeria {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 12px 0;
}

.galeria img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  display: block;
  margin: 0;
  border: 1px solid var(--cor-da-borda);
}

.badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, 80px);
  gap: 5px;
  justify-content: center;
  margin: 12px 0;
}

.badges img {
  width: 80px;
  height: auto;
  display: block;
}

.lado-a-lado {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin: 12px 0;
}

.lado-a-lado > img {
  width: 150px;
  height: auto;
  flex-shrink: 0;
}


/* ==========================================================
   PARTE 4 ✺ CELULAR
   ==========================================================

   No celular tudo vira UMA coluna so e a pagina rola normal
   (sem caixinhas com scroll separado, que no dedo fica ruim).

   NAO PRECISA MEXER AQUI.
   ========================================================== */

@media (max-width: 800px) {

  #site {
    width: 95%;
    height: auto;          /* solta a altura fixa */
    overflow: visible;
  }

  #content {
    grid-template-columns: 1fr;   /* uma coluna so */
  }

  main,
  aside {
    overflow-y: visible;   /* desliga o scroll interno */
  }

  main {
    border-right: none;
    border-bottom: 1px solid var(--cor-da-borda);
  }

  aside {
    width: auto;
  }
}