/* =========================================================
   FOOTER STYLES - FutstatsBR
   Responsivo sem quebrar o desktop
   Atualizado em 2025-10-25
   ========================================================= */

/* =========================================
   Paleta de cores (gradiente dark)
   ========================================= */
:root{
  --bg-grad-start:#0d0d0d; 
  --bg-grad-end: rgb(20,20,20);
  --text: #e0e0e0;
  --heading: #f0f0f0;
  --muted: #aaa;
  --link: #ccc;
  --link-hover: #ffffff;
  --border: #333;

  /* Cookie banner */
  --cookie-bg: #111;
  --cookie-text: #f1c40f;
  --cookie-link: #ffdd57;
  --cookie-btn: #f1c40f;
  --cookie-btn-text: #111;
}

/* =========================================
   Footer base (desktop)
   ========================================= */
.futstats-footer{
  width: 100%;
  background: transparent;
  color: var(--text);
  border-top: 1px solid var(--border);

  font-family: Arial, sans-serif;
  position: relative;
}

/* Camada de fundo em gradiente ocupando toda a largura */
.futstats-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: -1;
  border-radius: 0;

  background: linear-gradient(to top, var(--bg-grad-start) 0%, var(--bg-grad-end) 100%);
}

/* Inner wrapper em grid */
.futstats-footer .footer-inner{
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
}

/* Colunas (compatível com footer antigo e novo) */
.futstats-footer .footer-col,
.futstats-footer .footer-section,
.futstats-footer .footer-section-sm{
  grid-column: span 4;
  min-width: 220px;
}

/* Títulos / textos */
.footer-title,
.footer-subtitle{
  margin: 0 0 15px;
  color: var(--heading);
  font-size: 1.15rem;
  font-weight: 700;
}

.footer-text{ 
  color: var(--muted); 
  line-height: 1.6; 
}

.footer-text-sm{ 
  color: var(--muted); 
  line-height: 1; 
}

/* Listas de links */
.footer-list{ 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}

.footer-list li,
.footer-list-item{ 
  margin: 8px 0; 
}

.footer-link{
  color: var(--link);
  text-decoration: none;
  transition: color .25s;
}

.footer-link:hover,
footer a:hover{
  color: var(--link-hover) !important;
  text-decoration: underline !important;
}

/* Linha de baixo (direitos autorais etc.) */
.futstats-footer .footer-bottom{
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding-top: 20px;
  text-align: center;
  color: #888;
}

.footer-bottom-text{ 
  margin: 0; 
  font-size: .9rem; 
}

.footer-copy {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================
   RESPONSIVO - TABLETS (<=900px e >=601px)
   Mantém 2 colunas lado a lado, centraliza última
   ========================================= */
@media (max-width: 900px) and (min-width: 601px){
  .futstats-footer .footer-inner{ 
    grid-template-columns: repeat(2, 1fr); 
    gap: 32px; 
  }

  .futstats-footer .footer-col,
  .futstats-footer .footer-section,
  .futstats-footer .footer-section-sm{ 
    grid-column: span 1; 
    min-width: 0;                /* evita overflow horizontal */
  }

  /* Última coluna ocupa 2 colunas pra ficar centralizada */
  .futstats-footer .footer-col:last-child{
    grid-column: span 2;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* =========================================
   RESPONSIVO - MOBILE (<=600px)
   Vira 1 coluna empilhada, textos centralizados
   ========================================= */
@media (max-width: 600px){
  .futstats-footer .footer-inner{ 
    grid-template-columns: 1fr; 
    gap: 28px;
    padding: 30px 20px;
  }

    .footer-copy {
    font-size: 0.8rem;      /* menor que o desktop */
    line-height: 1.4;
  }

  .futstats-footer .footer-col,
  .futstats-footer .footer-section,
  .futstats-footer .footer-section-sm{ 
    grid-column: span 1;
    text-align: center;
    min-width: 0;                /* garante que não force largura > viewport */
  }

  .footer-title,
  .footer-subtitle{
    font-size: 1.1rem;
    margin-bottom: 12px;
  }

  .footer-list{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-list li,
  .footer-list-item{
    margin: 3px 0;              /* antes 6px 0 -> diminui o vão vertical */
  }

  .footer-link{
    font-size: 0.95rem;
    padding: 2px 8px;            
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;            
    line-height: 1.4;            
  }
}

  .futstats-footer .footer-bottom{
    margin-top: 30px;
    padding-top: 15px;
    padding-bottom: 20px;
  }

  .footer-bottom-text{
    font-size: 0.85rem;
  }


/* =========================================
   RESPONSIVO - MOBILE MUITO PEQUENO (<=400px)
   Padding menor e fonte ainda mais compacta
   ========================================= */
@media (max-width: 400px){
  .futstats-footer .footer-inner{
    padding: 25px 15px;
    gap: 24px;
  }

  .footer-title,
  .footer-subtitle{
    font-size: 1rem;
  }

  .footer-link{
    font-size: 0.9rem;
  }

  .footer-bottom-text{
    font-size: 0.8rem;
  }

    .footer-copy {
    font-size: 0.75rem;     /* ainda menor */
    line-height: 1.4;
  }
  
  .futstats-footer .footer-col,
  .futstats-footer .footer-section,
  .futstats-footer .footer-section-sm{
    min-width: 0;               /* remove min-width pra telas muito estreitas */
  }
}




/* =========================================
   Cookie Banner — paleta amarela
   ========================================= */
.cookie-banner{
  position: fixed;
  left: 0; 
  right: 0; 
  bottom: 0;
  z-index: 9999;
  display: none;
  background-color: var(--cookie-bg);
  color: var(--cookie-text);
  padding: 12px 20px;
  font-size: 15px;
  text-align: center;
  box-shadow: 0 -2px 10px rgba(0,0,0,.5);
  font-family: Arial, sans-serif;
}

.cookie-banner .cookie-link{
  color: var(--cookie-link);
  text-decoration: underline;
  font-weight: bold;
}

.cookie-banner .cookie-button{
  margin-left: 15px;
  padding: 6px 14px;
  background-color: var(--cookie-btn);
  color: var(--cookie-btn-text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: opacity .3s;
}

.cookie-banner .cookie-button:hover{ 
  opacity: .85; 
}

.cookie-banner .cookie-button:not(:hover){ 
  opacity: 1; 
}

/* Mostrar/animar */
@keyframes cookie-slide-up{
  from{ 
    transform: translateY(100%); 
    opacity: 0; 
  }
  to{ 
    transform: translateY(0);    
    opacity: 1; 
  }
}

.cookie-banner.is-visible{
  display: block;
  animation: cookie-slide-up .25s ease-out;
}

/* Cookie - Mobile (<=600px) */
@media (max-width: 600px){
  .cookie-banner{
    padding: 12px 15px;
    font-size: 13px;
    text-align: left;
  }

  .cookie-banner .cookie-container{
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .cookie-banner .cookie-button{
    margin-left: 0;
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* Cookie - Tablets (<=900px e >=601px) */
@media (max-width: 900px) and (min-width: 601px){
  .cookie-banner{
    padding: 12px 20px;
    font-size: 14px;
  }

  .cookie-banner .cookie-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
  }

  .cookie-banner .cookie-button{
    margin-left: 0;
    white-space: nowrap;
    padding: 8px 16px;
  }
}

/* =========================================
   Layout geral da página para empurrar o footer
   ========================================= */
html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;           /* altura mínima da viewport */
  display: flex;
  flex-direction: column;
}

/* melhora em mobile (barra de endereço variável) */
@supports (min-height: 100dvh) {
  body { min-height: 100dvh; }
}

/* área principal do site expande e empurra o footer pra baixo */
main, #app, .content, .page { 
  flex: 1 0 auto;
}

/* footer sempre depois do conteúdo */
footer { margin-top: auto; }