/* SERVISO — Footer, including its dark-background variants. */
/* ============================================================
   FOOTER
   ============================================================ */
.footer-wave {
  display: block;
  width: 100%;
  line-height: 0;
  background: #0a2540;
}
.footer-wave svg { display: block; width: 100%; height: 72px; }

.footer {
  background: #0a2540;
  padding: 3.5rem 0 0;
  position: relative;
}
.footer .container { padding-bottom: 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: 3rem;
  padding-bottom: 2rem;
}
.footer-brand .logo-img {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 1rem;
}
.footer-logo-wrap { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.footer-logo-wrap .logo-icon { filter: none; }
.footer-logo-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
}
.footer-brand p { color: rgba(255,255,255,.6); font-size: .9375rem; line-height: 1.7; }
.footer-col h4 {
  color: white;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  font-family: 'Space Grotesk', sans-serif;
}
.footer-links li { margin-bottom: .625rem; }
.footer-links a { color: rgba(255,255,255,.6); font-size: .9375rem; transition: color .3s var(--ease-smooth); }
.footer-links a:hover { color: var(--primary-light); }
.footer-contact { display: flex; flex-direction: column; gap: .75rem; }
.footer-contact-item { display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; color: rgba(255,255,255,.65); }
.footer-contact-item svg { width: 18px; height: 18px; color: var(--primary-light); stroke: var(--primary-light); flex-shrink: 0; margin-top: 3px; }
.footer-contact-item a { color: rgba(255,255,255,.65); transition: color .3s; }
.footer-contact-item a:hover { color: var(--primary-light); }
.footer-hours { display: flex; flex-direction: column; gap: .3rem; }
.footer-hours .hour-row { display: flex; justify-content: space-between; padding: .25rem 0; font-size: .875rem; }
.footer-hours .day { color: rgba(255,255,255,.5); }
.footer-hours .time { color: rgba(255,255,255,.85); font-weight: 500; }
.footer-hours .closed { color: #f87171; font-weight: 600; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom span { color: rgba(255,255,255,.45); font-size: .875rem; }
.footer-bottom a { color: rgba(255,255,255,.55); font-size: .875rem; transition: color .3s; }
.footer-bottom a:hover { color: var(--primary-light); }

/* ── Responsive ─────────────────────────────────────────────── */
/* Kept beside the component these rules modify, instead of in a single
 * block at the bottom of the stylesheet, separated from everything they
 * apply to. */

@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media (max-width: 768px) {
  .footer { padding-top: 3rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: .5rem; }
}