/* ======================================================================
   style.css — ajustes customizados sobre Tailwind
   ==================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* Paleta ------------------------------------------------------------- */
:root {
  --color-primary:   #4fa585;  /* verde principal */
  --color-primary-dk:#356a55;  /* verde mais escuro (destaque) */
  --color-secondary: #ffd85c;  /* amarelo margarida */
  --color-accent:    #9c83b5;  /* lilás */
  --color-dark:      #2f2f2f;  /* texto/nav */
  --color-paper:     #f8faf7;  /* fundo claro */
}

/* Base --------------------------------------------------------------- */
body {
  font-family: 'Inter', sans-serif;
  background: var(--color-paper);
  color: var(--color-dark);
}
h1, h2, h3 { font-weight: 700; color: var(--color-dark); }

/* NAV ---------------------------------------------------------------- */
nav {
  background: var(--color-primary);
  position: relative;  /* garante camada própria */
  z-index: 50;         /* fica acima do overlay do hero */
}
nav a:hover {
  color: var(--color-secondary);
  transition: color 0.2s;
}

/* HERO --------------------------------------------------------------- */
.hero {
  background: url('../assets/images/capa.png') center / cover no-repeat;
  position: relative;
}
.hero::after {                /* overlay escurecedor */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.hero-content {
  position: relative;
  z-index: 1;
}

/* Botões ------------------------------------------------------------- */
.btn-primary {
  background: var(--color-secondary);
  color: var(--color-dark);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.22);
}

/* Cards -------------------------------------------------------------- */
.card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Rodapé ------------------------------------------------------------- */
footer {
  background: var(--color-primary);
  color: #ecf6f2;
}
footer a:hover { color: var(--color-secondary); }

/* Utilidades adicionais --------------------------------------------- */
.bg-primary-dark { background: var(--color-primary-dk); }
.text-white      { color: #fff; }

/* Botão secundário (Cancelar) */
.btn-secondary {
  background: #e5e7eb;            /* cinza claro */
  color: var(--color-dark);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-secondary:hover {
  background: #d1d5db;            /* cinza médio */
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .22);
}

/* ------------------------------------------------------------------
   HERO da página de doações
   ------------------------------------------------------------------ */
.hero-doacao{
  @apply relative bg-[url('/assets/images/hero-doacao.jpg')] bg-cover bg-center;
}

/* Camada de cor por cima da imagem  (contraste p/ texto branco) */
.hero-doacao::before{
  content:"";
  position:absolute;            /* ocupa toda a div */
  inset:0;                      /* top:0; right:0; bottom:0; left:0 */
  background:rgba(88, 68, 197, 0.55); /* azul-escuro (#003366) 55 % opacidade */
  z-index:0;                    /* fica atrás do conteúdo */
}

/* Garante que o conteúdo (texto, botões) fique acima do overlay */
.hero-doacao > *{
  position:relative;
  z-index:1;
}