/* Footer: themed, responsive, and consistent with project brand tokens */
.tg-footer {
  background: var(--tg-navy);
  color: #ffffff;
  padding: clamp(24px, 4vw, 48px) 0;
}

.tg-footer a { color: #e8f2ff; text-decoration: none; }
.tg-footer a:hover { color: var(--tg-beer); text-decoration: underline; }

.tg-footer .container { max-width: var(--container-width, 1200px); margin: 0 auto; padding: 0 16px; }

.footer-content {
  display: grid;
  gap: clamp(16px, 2.5vw, 24px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 600px) {
  .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 977px) {
  .footer-content { grid-template-columns: 1.8fr 1fr 1fr 1.2fr; }
}

.footer-about .footer-logo { display: flex; align-items: center; gap: 10px; }
.footer-about .footer-logo img { width: 100px; height: 42px; border-radius: 10px; background: #fff; padding: 4px; }
.footer-logo-text { font-weight: 700; font-size: 1.05rem; color: #fff; }
.footer-logo-text span { color: var(--tg-beer); }
.footer-about p { color: #e5e7eb; margin: 10px 0; }

.social-links { display: flex; gap: 10px; margin-top: 10px; }
.social-links a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,0.08); }
.social-links a:hover { background: rgba(255,255,255,0.16); }

.footer-links h4 { color: #fff; margin: 0 0 8px; }
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin: 6px 0; color: #e5e7eb; }
.footer-links li i { margin-right: 8px; color: var(--tg-beer); }
.footer-links a { color: #e5f2ff; }

.hide-mobile { display: none; }
@media (min-width: 777px) { .hide-mobile { display: block; } }

.copyright { margin-top: clamp(16px, 2.5vw, 24px); padding-top: clamp(12px, 2vw, 18px); border-top: 1px solid rgba(255,255,255,0.14); text-align: center; }
.copyright p { color: #e5e7eb; margin: 6px 0 0; }
.logo-small { width: 28px; height: 28px; border-radius: 6px; background: #fff; padding: 3px; }
.flex-center-gap { display: flex; justify-content: center; gap: 10px; align-items: center; }

/* Touch targets on mobile */
@media (max-width: 480px) {
  .social-links a { width: 40px; height: 40px; }
}