/* =========================
   Geysa.log — base (Paleta A)
   ========================= */

:root{
  /* Base roxa */
  --bg: #24163B;
  --bg2: #120A22;

  /* Texto */
  --text: #F2EFFF;
  --muted: #C9C3E6;

  /* Acentos 2000s */
  --pink: #FF4FD8;     /* chiclete */
  --magenta: #E91E63;  /* quente */
  --cyan: #7DF9FF;     /* neon */
  --terminal: #00FF9A; /* verde terminal */

  /* Temas */
  --paper: #F7F1E1;    /* jornal/livro */
  --ink: #1A1426;
  --coffee: #6B3F2A;

  /* Cores por seção */
  --music: #FF2D55;    /* vermelho música */
  --etcblue: #4EDCFF;  /* azul etc */

  /* UI */
  --panel: rgba(0,0,0,0.28);
  --panel2: rgba(0,0,0,0.42);
  --shadow: 0 14px 35px rgba(0,0,0,0.38);
}

/* ===== Reset e base ===== */
*{ box-sizing: border-box; }

body{
  margin: 0;
  text-align: center;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

img{
  max-width: 100%;
  height: auto;
}

/* Tipografia */
h1{
  font-size: 60px;
  font-weight: 300;
  margin: 22px 0 6px;
}

h2{
  font-size: 40px;
  margin: 22px 0 10px;
  color: var(--cyan);
  letter-spacing: 0.3px;
}

h3{
  font-size: 22px;
  font-style: italic;
  margin: 0 0 6px;
}

.post h4{
  margin: 12px 0 8px;
  font-size: 18px;
  color: var(--muted);
}

.post ul{
  margin: 10px 0 12px;
  padding-left: 20px;
}

.post li{
  margin: 8px 0;
}

p{
  line-height: 1.55;
  font-size: 20px;
  margin: 10px 0;
}

a{
  text-decoration: none;
  color: var(--cyan);
  font-weight: 700;
}
a:hover{
  color: var(--terminal);
  text-decoration: underline;
}

/* ===== Layout ===== */
.site-header,
main{
  width: min(980px, 92%);
  margin: 0 auto;
}

section{
  width: 100%;
  margin: 0 auto 28px;
}

/* ===== Header ===== */
.site-header{
  padding: 18px 14px 12px;
  background: var(--panel);
  border: 2px dotted rgba(255,79,216,0.50);
  box-shadow: var(--shadow);
  border-radius: 18px;
}

/* ===== STATUS NEON (NOVO!) ===== */
/* Cria a animação de piscar */
@keyframes neon-blink {
  0%, 100% { 
    opacity: 1; 
    text-shadow: 0 0 5px var(--terminal), 0 0 10px var(--terminal), 0 0 20px var(--terminal);
  }
  50% { 
    opacity: 0.7; 
    text-shadow: 0 0 2px var(--terminal), 0 0 5px var(--terminal);
  }
}

/* Aplica a animação no subtítulo do card de Status */
.subtitulo{
  color: var(--muted);
  font-style: italic;
  margin: 0 0 12px;
}

/* Especificamente dentro do container de mood (Home) ou card (Etc) */
#mood-container .subtitulo, 
#mood-do-dia .subtitulo {
  color: var(--terminal); /* Cor verde neon */
  font-family: "Courier New", Courier, monospace; /* Fonte mais 'hacker' */
  font-weight: bold;
  animation: neon-blink 1.5s infinite alternate; /* Pisca infinitamente */
}

/* ===== Menu (CORRIGIDO ALINHAMENTO) ===== */
.principal{
  background: var(--pink);
  height: 44px; /* Altura fixa no desktop */
  width: min(980px, 92%);
  margin: 14px auto 0;
  border-radius: 10px;
  box-shadow: var(--shadow);
  border: 2px solid rgba(255,255,255,0.20);
  
  /* Flexbox para centralizar tudo verticalmente */
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.principal ul{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex; /* Flex também na lista */
  align-items: center;
}

.principal li{
  display: inline-block;
  margin: 0 16px;
}

.principal a{
  color: white;
  text-decoration: none; /* Remove sublinhado padrão */
  font-weight: 600;
  
  /* TRUQUE PARA ALINHAR O RISCO: */
  display: inline-flex; /* Faz o link se comportar como uma caixinha flex */
  align-items: center;  /* Centraliza o texto/span dentro do link */
  vertical-align: middle;
  height: 30px; /* Altura consistente para o hover/border */
  line-height: 1; /* Reseta altura de linha para não bugar */
}

.principal a:hover {
  text-decoration: underline;
}

.principal a[aria-current="page"]{
  text-decoration: none;
  border-bottom: 2px solid rgba(255,255,255,0.85);
  padding-bottom: 2px;
}

/* ===== Posts (cards) ===== */
.post{
  text-align: left;
  padding: 16px 16px;
  background: var(--panel2);
  border: 2px dashed rgba(125,249,255,0.30);
  border-radius: 18px;
  box-shadow: var(--shadow);
  margin: 14px 0;
}

.post header{ margin-bottom: 10px; }

.post-cta{ margin-top: 12px; }
.post-cta a{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,79,216,0.18);
  border: 2px outset rgba(255,255,255,0.20);
}
.post-cta a:hover{ background: rgba(125,249,255,0.18); }

/* ===== Cores por seção ===== */
.cat-music h2{ color: #ffd6df; }
.cat-music .post{ border-color: rgba(255,45,85,0.55); }
.cat-music a{ color: var(--music); }

.cat-reading h2{ color: var(--coffee); }
.cat-reading .post{
  background: rgba(247,241,225,0.94);
  color: var(--ink);
  border-color: rgba(107,63,42,0.55);
}
.cat-reading .subtitulo{ color: rgba(26,20,38,0.70); }
.cat-reading a{ color: #7a2d1b; }

.cat-etc h2{ color: #d9fbff; }
.cat-etc .post{ border-color: rgba(78,220,255,0.55); }
.cat-etc a{ color: var(--etcblue); }

/* ===== GIFs ===== */
.gif-welcome, .gif-tech, .gif-playlist, .gif-artist, .head-bop-good-vibes {
  display: block;
  margin: 10px auto;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.35);
}
.gif-welcome{ width: min(360px, 100%); border: 2px dotted rgba(255,255,255,0.22); }
.gif-tech{ width: min(280px, 100%); border: 2px dashed rgba(0,255,154,0.35); }
.gif-playlist, .gif-artist, .head-bop-good-vibes { width: min(460px, 100%); border: 2px solid rgba(125,249,255,0.25); }

.gif-divider{ text-align: center; margin: 14px 0 18px; }
.gif-divider img{ width: min(420px, 100%); opacity: 0.9; }

/* ===== UI Elements ===== */
button{
  background-color: #41f341;
  border: 1px solid transparent;
  padding: 6px 20px;
  border-radius: 6px;
  cursor: pointer;
}
button:hover{ filter: brightness(0.95); }

.spotify-embed{
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 12px auto 0;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.35);
}

.now-playing{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.30);
  border: 1px dotted rgba(255,255,255,0.22);
  font-family: "Courier New", Courier, monospace;
}
.now-playing .np-title{ margin: 0 0 4px; font-size: 14px; color: var(--text); }
.now-playing .np-meta{ margin: 0; font-size: 13px; color: var(--muted); }

.post-meta{
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.badge{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color: var(--muted);
}
.badge-etc{ border-color: rgba(78,220,255,.55); }
.badge-tag{ border-color: rgba(255,79,216,.45); }
.badge-mood{ border-color: rgba(0,255,154,.45); }
.badge-energy{ border-color: rgba(125,249,255,.35); }
.badge-now{ border-color: rgba(255,45,85,.45); }

.mood-card{ border-style: dotted; }

.foto-do-dia{
  margin: 12px 0 0;
  padding: 10px;
  border-radius: 14px;
  border: 2px inset rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.22);
}
.foto-do-dia img{
  display: block;
  width: min(640px, 100%);
  margin: 0 auto;
  border-radius: 12px;
  border: 2px solid rgba(125,249,255,0.25);
}
.foto-do-dia figcaption{
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
}

/* ===== HOME - MOOD (Full Width) ===== */
#mood-titulo { font-size: 24px; margin-top: 20px; margin-bottom: 10px; text-align: center; }
#mood { width: min(980px, 92%); margin: 0 auto; }

#mood-container .mood-mini{
  width: 100%;
  max-width: 100%;
  margin: 10px auto 20px;
  padding: 16px;
  box-sizing: border-box;
}

#mood-container .mood-mini h3,
#mood-container .mood-mini > p,
#mood-container .mood-mini .foto-do-dia { display: none; }

#mood-container .mood-mini .subtitulo{
  font-size: 14px;
  margin: 0 0 10px;
  /* Herda o neon definido lá em cima */
}

#mood-container .mood-mini .post-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  margin: 0;
}

#mood-container .mood-mini .badge{ font-size: 11px; padding: 1px 7px; white-space: nowrap; }

.nav-short { display: none; }

/* ===== MOBILE ===== */
@media (max-width: 520px){
  .principal{
    height: auto !important;
    padding: 8px 4px !important;
  }
  .principal ul{
    gap: 8px !important;
    width: 100%;
    justify-content: center !important;
  }
  .principal li{
    margin: 0 !important;
    flex: 0 0 auto;
  }
  .principal a{
    padding: 6px 4px !important;
    font-size: 13px !important;
    white-space: nowrap;
    letter-spacing: -0.3px;
    height: auto !important; /* Altura auto no mobile para caber padding */
  }
  
  .nav-long { display: none !important; }
  .nav-short { display: inline !important; }

  #mood-titulo{ font-size: 20px !important; margin: 10px 0 8px !important; }
  #mood-container .mood-mini{ padding: 10px 12px !important; }
  #mood-container .mood-mini .subtitulo{ font-size: 12px !important; }
  #mood-container .mood-mini .post-meta{ font-size: 10px !important; }
}
/* --- GERAL --- */
body {
    font-family: Arial, sans-serif; /* Sua fonte padrão do site */
}

/* --- LINKS (RESOLVENDO O DIÁRIO) --- */
/* Isso garante que TODOS os links fiquem sem o risco, mesmo os já clicados */
a, a:visited, a:hover, a:active {
    text-decoration: none; 
    color: inherit; /* Mantém a cor original do texto, ou coloque uma cor específica aqui */
    cursor: pointer;
}

/* --- MOOD DO DIA (ESTILO MÁQUINA DE ESCREVER) --- */
.mood {
    font-family: 'Courier New', Courier, monospace; /* Fonte estilo máquina/código */
    font-style: italic;  /* Deixa a letra "caída" */
    font-weight: normal; /* Tira o negrito se tiver */
    font-size: 1.1em;    /* Um pouquinho maior para ler melhor */
}

/* --- EFEITO PISCAR (CURSOR) --- */
/* Use essa classe no tracinho | que fica piscando */
.cursor-piscar {
    animation: piscar 1s infinite step-end;
    font-weight: bold;
}

@keyframes piscar {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* =========================
   BADGES NEON (piscando)
   Cole no FINAL do CSS
   ========================= */

:root{
  --neon-pink: #ff4fd8;
  --neon-cyan: #7df9ff;
  --neon-green: #00ff9a;
  --neon-red: #ff2d55;
  --neon-purple: #b388ff;
}

/* base neon pra todas */
.badge{
  background: rgba(0,0,0,.45);
  color: #f2efff;
  border: 1px solid rgba(255,255,255,.18);

  /* glow */
  box-shadow:
    0 0 10px rgba(125,249,255,.25),
    0 0 18px rgba(255,79,216,.18);

  /* “pixel vibe” */
  letter-spacing: .2px;
  text-shadow: 0 0 6px rgba(255,255,255,.22);
}

/* cada tipo com cor neon + brilho */
.badge-mood{
  border-color: rgba(0,255,154,.55);
  box-shadow:
    0 0 10px rgba(0,255,154,.35),
    0 0 22px rgba(0,255,154,.18);
}

.badge-energy{
  border-color: rgba(125,249,255,.55);
  box-shadow:
    0 0 10px rgba(125,249,255,.35),
    0 0 22px rgba(125,249,255,.18);
}

.badge-now{
  border-color: rgba(255,45,85,.55);
  box-shadow:
    0 0 10px rgba(255,45,85,.35),
    0 0 22px rgba(255,45,85,.18);
}

.badge-tag{
  border-color: rgba(255,79,216,.55);
  box-shadow:
    0 0 10px rgba(255,79,216,.35),
    0 0 22px rgba(255,79,216,.18);
}

.badge-etc{
  border-color: rgba(78,220,255,.55);
  box-shadow:
    0 0 10px rgba(78,220,255,.35),
    0 0 22px rgba(78,220,255,.18);
}

/* animação: pisca suave + pulsar no glow */
@keyframes neonPulse {
  0%, 100% {
    filter: brightness(1);
    transform: translateZ(0);
  }
  50% {
    filter: brightness(1.35);
  }
}
@keyframes neonFlicker {
  0% { opacity: 1; }
  6% { opacity: .85; }
  7% { opacity: 1; }
  60% { opacity: 1; }
  61% { opacity: .8; }
  62% { opacity: 1; }
  100% { opacity: 1; }
}

/* liga o “pisca cool” */
.badge{
  animation: neonPulse 1.6s ease-in-out infinite;
}

/* dá um “flicker” diferente por tipo (menos repetitivo) */
.badge-mood{ animation: neonPulse 1.5s ease-in-out infinite, neonFlicker 5.5s linear infinite; }
.badge-energy{ animation: neonPulse 1.7s ease-in-out infinite, neonFlicker 6.2s linear infinite; }
.badge-now{ animation: neonPulse 1.4s ease-in-out infinite, neonFlicker 4.8s linear infinite; }
.badge-tag{ animation: neonPulse 1.8s ease-in-out infinite, neonFlicker 6.8s linear infinite; }
.badge-etc{ animation: neonPulse 1.6s ease-in-out infinite, neonFlicker 7.1s linear infinite; }

/* hover: “acende” mais */
.badge:hover{
  filter: brightness(1.6);
  box-shadow:
    0 0 12px rgba(255,255,255,.25),
    0 0 26px rgba(125,249,255,.35),
    0 0 30px rgba(255,79,216,.25);
}

/* acessibilidade: respeita quem desliga animação */
@media (prefers-reduced-motion: reduce){
  .badge{ animation: none !important; }
}
/* ===== Layout com lateral (estilo pin: feed + sidebar) ===== */
.page{
  width: min(1100px, 92%);
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}

.content{ min-width: 0; } /* evita overflow */
.sidebar{
  position: sticky;
  top: 16px;
  align-self: start;
}

/* widgets da lateral */
.widget{
  text-align: left;
  padding: 14px 14px;
  background: var(--panel2);
  border: 2px dotted rgba(255,79,216,0.35);
  border-radius: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}

.widget h3{
  margin: 0 0 10px;
  font-size: 18px;
  font-style: italic;
  color: var(--cyan);
}

.mini-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.mini-list li{
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.12);
}
.mini-list li:last-child{ border-bottom: 0; }

.mini-list a{
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.mini-list a:hover{
  color: var(--terminal);
  text-decoration: underline;
}

.mini-date{
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.mini-cta{
  margin: 10px 0 0;
}
.mini-cta a{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255,79,216,0.14);
  border: 2px outset rgba(255,255,255,0.16);
}

/* tag cloud */
.tag-cloud{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Responsivo: no celular vira 1 coluna */
@media (max-width: 900px){
  .page{
    grid-template-columns: 1fr;
  }
  .sidebar{
    position: static;
  }
}
/* ===== Layout com sidebar: não limitar a largura do <main> dentro do grid ===== */
.page > .content{
  width: 100%;
  margin: 0;
}
/* =========================
   FIX: alinhamento geral (header + grid + footer)
   Cole no FINAL do CSS
   ========================= */

/* deixa header, grid e footer com a MESMA largura */
.site-header,
.page,
.site-footer,
body > main{
  width: min(1100px, 92%);
  margin-left: auto;
  margin-right: auto;
}

/* a barra rosa ocupa 100% do header (para alinhar certinho) */
.principal{
  width: 100%;
}

/* mood não fica com largura “diferente” do resto */
#mood{
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
/* ===== Neon utilities (cole no FINAL do CSS) ===== */
.neon{
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  letter-spacing: .2px;
  text-shadow: 0 0 8px rgba(255,255,255,.10);
}

.neon-green{
  color: var(--terminal);
  text-shadow:
    0 0 6px rgba(0,255,154,.45),
    0 0 14px rgba(0,255,154,.25),
    0 0 28px rgba(0,255,154,.18);
}

.neon-cyan{
  color: var(--cyan);
  text-shadow:
    0 0 6px rgba(125,249,255,.45),
    0 0 14px rgba(125,249,255,.25),
    0 0 28px rgba(125,249,255,.18);
}

.neon-pink{
  color: var(--pink);
  text-shadow:
    0 0 6px rgba(255,79,216,.45),
    0 0 14px rgba(255,79,216,.25),
    0 0 28px rgba(255,79,216,.18);
}

/* pisca/pulsa */
@keyframes neonPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

@keyframes neonFlicker {
  0% { opacity: 1; }
  6% { opacity: .85; }
  7% { opacity: 1; }
  60% { opacity: 1; }
  61% { opacity: .8; }
  62% { opacity: 1; }
  100% { opacity: 1; }
}

.neon-anim{
  animation: neonPulse 1.6s ease-in-out infinite, neonFlicker 6.5s linear infinite;
}

/* “neon andando” (efeito varredura) */
@keyframes neonScan {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.neon-scan{
  background: linear-gradient(90deg, rgba(0,255,154,1), rgba(125,249,255,1), rgba(255,79,216,1));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: neonScan 2.4s linear infinite;
  text-shadow: none; /* o gradiente já “brilha” */
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .neon-anim, .neon-scan { animation: none !important; }
}
/* ===== Neon reutilizável (classes) ===== */

/* animação (a mesma lógica do seu neon-blink) */
@keyframes neon-blink {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 20px currentColor;
  }
  50% {
    opacity: .7;
    text-shadow: 0 0 2px currentColor, 0 0 5px currentColor;
  }
}

/* base neon (fonte/estilo “hacker”) */
.neon {
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
}

/* liga o blink */
.neon-blink {
  animation: neon-blink 1.5s infinite alternate;
}

/* cores neon */
.neon-green { color: var(--terminal); }   /* verde */
.neon-blue  { color: var(--etcblue); }    /* azul */
.neon-purple{ color: #b388ff; }           /* roxo (pode ajustar) */
.neon-red   { color: var(--music); }      /* vermelho */

/* opcional: versões mais “fortes” (mais glow) */
.neon-strong {
  text-shadow: 0 0 6px currentColor, 0 0 14px currentColor, 0 0 26px currentColor;
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .neon-blink { animation: none !important; }
}
@keyframes neon-blink {
  0%, 100% { 
    opacity: 1;
    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 20px currentColor;
  }
  50% {
    opacity: .7;
    text-shadow: 0 0 2px currentColor, 0 0 5px currentColor;
  }
}

.neon {
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
}

.neon-blink {
  animation: neon-blink 1.5s infinite alternate;
}

.neon-green  { color: var(--terminal); }
.neon-blue   { color: var(--etcblue); }
.neon-purple { color: #b388ff; }
.neon-red    { color: var(--music); }