/*
      Este estilo foi inspirado no layout da página inicial do iLovePDF.
      Utilizamos um cabeçalho vermelho vivo e uma grade de cartões com
      sombras suaves para destacar cada ferramenta de cálculo.
      O objetivo é que o agricultor identifique rapidamente qual cálculo
      deseja fazer e, ao clicar, o formulário apareça logo abaixo.
    */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      /*
        Ajustamos o fundo para utilizar um gradiente translúcido sobre uma
        imagem de lavoura de soja com irrigação por pivô, evocando a
        temática agrícola. O gradiente branco semi‑transparente assegura
        contraste e legibilidade do conteúdo.
      */
      /* Use a translucent white gradient over a farmland background image to evoke the
         agricultural theme. The image is stored locally as background.jpg. */
      background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
                  url('background.jpg') no-repeat center center fixed;
      background-size: cover;
    }

    header {
      /* cor de destaque verde para representar a agricultura */
      background: #2E7D32;
      color: #fff;
      padding: 20px;
      text-align: center;
    }
    /* Style the clickable logo link. Center it horizontally via text-align on the header. */
    header a.logo-link {
      display: inline-block;
      text-decoration: none;
    }
    header a.logo-link img {
      height: 60px;
      width: auto;
    }

    .container {
      max-width: 1100px;
      margin: 20px auto;
      padding: 0 15px;
    }

    /* Grade de cartões (home) */
    .grid {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }

    .card {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      cursor: pointer;
      flex: 1 1 250px;
      max-width: 300px;
      padding: 20px;
      text-align: center;
      transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }

    .card .icon {
      font-size: 40px;
      margin-bottom: 10px;
      /* a cor dos ícones acompanha a paleta verde */
      color: #2E7D32;
    }

    .card h3 {
      margin: 0;
      font-size: 18px;
      color: #333;
    }

    .card p {
      margin: 8px 0 0;
      font-size: 14px;
      color: #666;
    }

    /* Seção de introdução semelhante ao iLovePDF */
    .intro {
      background: #ffffff;
      border-radius: 8px;
      padding: 20px;
      margin: 20px auto;
      max-width: 1100px;
      text-align: center;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }
    .intro h2 {
      margin: 0 0 10px;
      font-size: 24px;
      color: #2E7D32;
    }
    .intro p {
      margin: 0;
      font-size: 16px;
      color: #555;
    }

    /* Rodapé com links legais inspirado no iLovePDF */
    .bottom-links {
      background: #f5f5f5;
      padding: 20px 0;
      border-top: 1px solid #ddd;
    }
    .bottom-links .links {
      display: flex;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
    }
    .bottom-links h4 {
      margin: 0 0 10px;
      font-size: 16px;
      color: #2E7D32;
    }
    .bottom-links ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .bottom-links ul li {
      margin-bottom: 5px;
    }
    .bottom-links ul li a {
      text-decoration: none;
      color: #333;
      font-size: 14px;
    }
    .bottom-links ul li a:hover {
      text-decoration: underline;
    }

/* Footer contact styles */
.bottom-links .footer-logo {
  height: 50px;
  width: auto;
  margin-top: 10px;
}
.bottom-links .contact ul li a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
}
.bottom-links .contact ul li a:hover {
  text-decoration: underline;
}

/* Centralize the contact column content and logo within the footer */
.bottom-links .contact {
  text-align: center;
}

.bottom-links .contact ul {
  margin: 0;
  padding: 0;
}

.bottom-links .contact ul li {
  margin: 0;
}

.bottom-links .footer-logo {
  display: block;
  margin: 10px auto 0;
}

/* Copyright bar */
.copyright-bar {
  background: #1B5E20;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  padding: 10px 0;
  margin: 0;
}

/* Remove underline from cards and preserve inherited color */
a.card {
  text-decoration: none;
  color: inherit;
}

/* Disclaimer box styling */
.disclaimer {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  margin: 20px auto;
  max-width: 1100px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  font-size: 14px;
  color: #555;
}
.disclaimer strong {
  color: #2E7D32;
}

    /* Oculta apenas a lista de referências original, mantendo o aviso legal visível */
    footer:not(.bottom-links) {
      display: none;
    }

    /* Ajustes de tipografia e layout para dispositivos móveis */
    @media (max-width: 600px) {
      body {
        font-size: 18px;
      }
      header h1 {
        font-size: 26px;
      }
      .intro h2 {
        font-size: 22px;
      }
      .intro p {
        font-size: 15px;
      }
      .filters button {
        font-size: 14px;
        padding: 8px 12px;
      }
      .card {
        flex: 1 1 100%;
        max-width: none;
      }
      .card h3 {
        font-size: 20px;
      }
      .card p {
        font-size: 16px;
      }
      .section h2 {
        font-size: 22px;
      }
      .form-group label {
        font-size: 16px;
      }
      input[type="number"], input[type="text"], select, button {
        font-size: 16px;
      }
      .info h3 {
        font-size: 18px;
      }
      .info p {
        font-size: 14px;
      }

      header .logo img {
        height: 50px;
        margin-right: 10px;
      }
      header .logo h1 {
        font-size: 24px;
      }
    }

    /*
      Barra de cotações de grãos
      Exibe os preços atualizados de soja, milho e trigo em sacas (60 kg). Cada
      commodity aparece em um cartão compacto com nome, valor e data. A paleta
      segue o tema verde do site para manter a identidade visual.  O
      container utiliza flexbox para alinhar os cartões horizontalmente e
      permitir quebra de linha em telas menores.
    */
    .quote-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin: 20px auto;
      padding: 10px 0;
    }
    .quote-card {
      background: #ffffff;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 10px 20px;
      text-align: center;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
      min-width: 150px;
    }
    .quote-card h4 {
      margin: 0;
      font-size: 18px;
      color: #2E7D32;
    }
    .quote-card span {
      display: block;
      font-size: 20px;
      color: #333;
      font-weight: bold;
    }
    .quote-card small {
      display: block;
      font-size: 12px;
      color: #666;
    }

    /* Seção de filtros para categorias */
    .filters {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin: 10px 0 20px;
    }
    .filter-btn {
      background: #e0e0e0;
      border: none;
      border-radius: 20px;
      padding: 8px 16px;
      cursor: pointer;
      font-size: 14px;
      color: #2E7D32;
    }
    .filter-btn.active {
      background: #2E7D32;
      color: #fff;
    }

    /* Seção de cálculos */
    .section {
      display: none;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      margin-top: 20px;
      padding: 20px;
    }

    .section.active {
      display: block;
    }

    .section h2 {
      margin-top: 0;
      color: #2E7D32;
    }

    .form-group {
      margin-bottom: 12px;
    }

    .form-group label {
      display: block;
      margin-bottom: 4px;
      font-weight: bold;
    }

    .form-group input[type="number"],
    .form-group input[type="text"] {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }

    .form-group input[type="number"]::-webkit-inner-spin-button,
    .form-group input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    button {
      background: #2E7D32;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      margin-top: 10px;
    }

    button:hover {
      background: #1B5E20;
    }

    .result {
      margin-top: 15px;
      font-weight: bold;
      line-height: 1.5;
    }

    /* Informações adicionais sobre os cálculos */
    .info {
      margin-top: 10px;
      font-size: 14px;
      color: #333;
    }
    .info h3 {
      margin: 0 0 5px;
      color: #2E7D32;
      font-size: 16px;
    }


    /*
      A antiga estilização do aviso legal com fundo amarelo e borda laranja foi removida para
      utilizar o novo estilo definido fora da mídia query. O novo estilo deixa o aviso em
      uma caixa branca com sombra e texto neutro, permitindo melhor integração com o layout.
    */

    /* Rodapé para referências */
    footer {
      margin-top: 30px;
      font-size: 12px;
      color: #555;
    }

    footer p {
      margin: 4px 0;
    }

    /* Responsividade */
    @media (max-width: 768px) {
      .card {
        flex: 1 1 100%;
      }
    }