/* =========================================================================
   Rodapé do site (templates/layout/site.php)
   Usa a classe .rp para não depender das regras antigas de "footer" do site.css.
   ========================================================================= */

footer.rp {
  --rp-green: var(--theme-primary-color, #84be64);
  --rp-navy: var(--theme-secondary-color, #1b1e3a);
  --rp-text: rgba(255, 255, 255, .78);
  --rp-line: rgba(255, 255, 255, .12);

  position: relative;
  background: var(--rp-navy);
  color: var(--rp-text);
  min-height: 0;
  border: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Faixa de papelão ondulado no topo, a mesma dos topos das páginas */
footer.rp::before {
  content: ""; display: block; height: 22px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='22' fill='none' stroke='%2384BE64' stroke-width='1.4'%3E%3Cpath d='M0 2.5H40M0 19.5H40'/%3E%3Cpath d='M0 11C5 0 15 0 20 11S35 22 40 11'/%3E%3C/svg%3E") repeat-x 0 0 / 40px 22px;
}

/* Neutraliza as regras antigas de footer e as globais de "a" do site.css */
footer.rp a { display: inline; justify-content: normal; color: inherit; font-size: inherit; font-weight: inherit; text-decoration: none; }
/* :where() deixa esta regra fraca: anula o negrito antigo do site.css (footer a:hover)
   sem tirar o negrito dos links que já são em negrito, como o do Instagram */
footer.rp a:where(:hover) { font-weight: inherit; }
footer.rp h2, footer.rp p, footer.rp ul { margin: 0; }
footer.rp ul { padding: 0; list-style: none; }
footer.rp :focus-visible { outline: 3px solid var(--rp-green); outline-offset: 3px; border-radius: 4px; }

footer.rp .rp-wrap { max-width: calc(1240px + clamp(16px, 4vw, 40px) * 2); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

footer.rp .rp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: 40px clamp(24px, 4vw, 56px);
  padding-block: clamp(44px, 6vw, 72px) clamp(36px, 5vw, 56px);
}

/* Marca */
footer.rp .rp-logo { display: inline-block; }
footer.rp .rp-logo img { width: 190px; height: auto; display: block; }
footer.rp .rp-marca p { margin-top: 16px; max-width: 32ch; }
footer.rp .rp-social {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  padding: .55em 1em; border-radius: 999px; font-weight: 700; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
  transition: box-shadow .2s, background-color .2s;
}
footer.rp .rp-social:hover { box-shadow: inset 0 0 0 1.5px var(--rp-green); background: rgba(132, 190, 100, .12); }
footer.rp .rp-social i { font-size: 1.1rem; }

/* Colunas */
footer.rp .rp-col h2 { font-size: .95rem; font-weight: 800; color: #fff; margin-bottom: 14px; }
footer.rp .rp-col li + li { margin-top: 10px; }
footer.rp .rp-col a { transition: color .2s; }
footer.rp .rp-col a:hover { color: var(--rp-green); }

footer.rp .rp-contato li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
footer.rp .rp-contato i { color: var(--rp-green); font-size: 1.05rem; line-height: 1.5; }
footer.rp .rp-contato a { color: #fff; font-weight: 700; }
footer.rp .rp-contato a:hover { color: var(--rp-green); }

/* Faixa final */
footer.rp .rp-base { border-top: 1px solid var(--rp-line); }
footer.rp .rp-base .rp-wrap { padding-block: 20px; font-size: .88rem; color: rgba(255, 255, 255, .55); }

/* Responsivo */
@media (max-width: 991.98px) {
  footer.rp .rp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  footer.rp .rp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  footer.rp .rp-marca, footer.rp .rp-contato { grid-column: 1 / -1; }
  footer.rp .rp-base .rp-wrap { padding-bottom: 88px; } /* espaço para a barra do orçamento no celular */
}