/* ==========================================================================
   RODAPÉ — componente compartilhado (index.html + cardapio.html)
   Extraído de style.css sem alteração visual. Injetado via footer.js em
   ambas as páginas dentro de #site-footer-mount, para não duplicar HTML.
   ========================================================================== */
.site-footer{
  position:relative;
  z-index:3;
  isolation:isolate;
  background-color:#F1E6DA; /* creme — mesmo tom do header rolado */
  scroll-margin-top:var(--header-h);
}
.site-footer__inner{
  max-width:1180px;
  margin:0 auto;
  padding:80px 24px 56px;
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.3fr;
  gap:48px;
}
.site-footer__col{
  min-width:0;
}
.site-footer__logo{
  height:72px;
  width:auto;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
}
.site-footer__tag{
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(2,56,31,.72);
  margin-top:16px;
}
.site-footer__social{
  display:flex;
  gap:22px;
  margin-top:24px;
}
.site-footer__social a{
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  color:var(--navy);
  text-decoration:none;
  position:relative;
  transition:color .25s ease;
}
.site-footer__social a::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:-5px;
  height:1px;
  background:var(--accent-warm);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .3s ease;
}
.site-footer__social a:hover{color:var(--navy)}
.site-footer__social a:hover::after{transform:scaleX(1)}
.site-footer__social a:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:2px;
}

.site-footer__title{
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(2,56,31,.72);
  margin-bottom:20px;
}
.site-footer__links{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.site-footer__links a{
  font-family:var(--sans);
  font-size:15px;
  color:var(--navy);
  text-decoration:none;
  width:fit-content;
  position:relative;
  transition:color .25s ease;
}
.site-footer__links a::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:-4px;
  height:1px;
  background:var(--accent-warm);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .3s ease;
}
.site-footer__links a:hover{color:var(--navy)}
.site-footer__links a:hover::after{transform:scaleX(1)}
.site-footer__links a:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:2px;
}

.site-footer__hours-block + .site-footer__hours-block{
  margin-top:18px;
}
.site-footer__day{
  font-family:var(--sans);
  font-size:15px;
  font-weight:700;
  color:var(--navy);
}
.site-footer__time{
  font-family:var(--sans);
  font-size:14px;
  color:rgba(2,56,31,.72);
  margin-top:4px;
}

.site-footer__address{
  display:block;
  margin-top:14px;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65;
  color:var(--navy);
  text-decoration:none;
  text-underline-offset:3px;
  transition:color .25s ease;
}
/* Indicação discreta de que o endereço é clicável — sem virar botão: só um
   leve sublinhado + cor de destaque no hover/foco, mesmo padrão usado nos
   outros links de texto do rodapé (.site-footer__links/.site-footer__social). */
.site-footer__address:hover{color:var(--navy);text-decoration:underline}
.site-footer__address:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:2px;
  text-decoration:underline;
}
.site-footer__email{
  display:inline-block;
  margin-top:16px;
  font-family:var(--sans);
  font-size:14px;
  color:rgba(2,56,31,.72);
  text-decoration:none;
  transition:color .25s ease;
}
.site-footer__email:hover{color:var(--navy)}
.site-footer__email:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:2px;
}

.btn-review{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:26px;
  background:var(--navy);
  color:var(--white);
  border-color:var(--navy);
  transform-origin:center;
  transition:transform .25s ease,box-shadow .25s ease;
}
.btn-review__star{
  color:var(--accent-warm);
  font-size:14px;
  line-height:1;
}
.btn-review:hover{
  transform:scale(1.05);
  box-shadow:0 10px 26px rgba(1,32,18,.28);
}
.btn-review:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:4px;
  box-shadow:0 0 0 4px rgba(1,32,18,.4);
}

/* Mapa do rodapé — mesma incorporação usada no convite dos currys
   (cardapio.js/cardapio.css .invite-modal__map-wrap), junto do endereço.
   Tamanho controlado por CSS (aspect-ratio), nunca por width/height fixos
   no <iframe>. */
.site-footer__map-wrap{
  position:relative;
  width:100%;
  max-width:340px;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  margin-top:14px;
  /* Placeholder leve — mesma cor de fundo do rodapé (navy), reserva o
     espaço final do mapa desde o primeiro paint, antes do iframe existir. */
  background:rgba(2,56,31,.06);
}
.site-footer__map-wrap iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
  opacity:0;
  transition:opacity .4s ease;
}
/* Depois do evento `load` do iframe (ver footer.js), esmaece o placeholder
   num fade suave em vez de trocar abruptamente. */
.site-footer__map-wrap iframe.is-loaded{opacity:1}
@media (prefers-reduced-motion: reduce){
  .site-footer__map-wrap iframe{transition-duration:.01ms}
}

.site-footer__bottom{
  border-top:1px solid rgba(2,56,31,.12);
}
.site-footer__bottom p{
  max-width:1180px;
  margin:0 auto;
  padding:24px 24px;
  font-family:var(--sans);
  font-size:13px;
  color:rgba(2,56,31,.65);
  text-align:center;
}

@media (max-width:1023px){
  .site-footer__inner{
    grid-template-columns:1fr 1fr;
    row-gap:48px;
  }
}
@media (max-width:767px){
  .site-footer__inner{
    grid-template-columns:1fr;
    row-gap:36px;
    padding:56px 20px 40px;
  }
  /* Proporção mais baixa (menos altura) no celular — evita que o mapa
     infle demais o rodapé numa coluna já empilhada. */
  .site-footer__map-wrap{max-width:100%;aspect-ratio:16/10}
}

@media (prefers-reduced-motion: reduce){
  .site-footer__links a::after,.site-footer__social a::after{
    transition-duration:.01ms !important;
  }
}