/* ============================================================
   Rhino Thai Boxing Gym — Footer
   Ported from the concept-1 prototype (assets/styles.css).
   Dark footer (--atmo1) with logo + tagline, quick links, contact
   block, social icons, and a legal/copyright bottom bar. The
   Elementor Pro Theme Builder footer renders the live markup;
   these styles back the theme's fallback footer and shared classes.
   ============================================================ */

.site-footer { background: var(--atmo1); border-top: 1px solid var(--border); padding: 64px 0 28px; }

.footer-grid { max-width: 1280px; margin: 0 auto 40px; padding: 0 24px; display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 48px; }

.footer-col h4 { font-family: var(--font-display); text-transform: uppercase; font-size: 18px; margin-bottom: 18px; color: #fff; font-weight: 400; }
.footer-col p, .footer-col li { font-size: 14px; color: var(--placeholder); list-style: none; margin-bottom: 10px; }
.footer-col a { color: var(--placeholder); }
.footer-col a:hover { color: var(--brand); }

/* wp_nav_menu / fallback lists inside footer columns. */
.footer-col ul.menu { list-style: none; margin: 0 0 8px; padding: 0; }
.footer-col ul.menu li { margin-bottom: 10px; }
.footer-legal-head { margin-top: 24px; }
.footer-contact i { color: var(--brand); margin-right: 8px; }
.footer-col--contact .lang-switch { margin: 16px 0 6px; }
.footer-book { margin-top: 14px; }

.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social a { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--atmo2); display: flex; align-items: center; justify-content: center; color: var(--brand); }
.footer-social a:hover { background: var(--brand); color: #000; }

.footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; text-align: center; font-size: 13px; color: var(--disabled); max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* === Responsive ===
   Aligned to the Req 23.1 bands: tablet (≤1023) drops the footer to two
   columns, mobile (≤767, down to 320) to a single column. */
@media (max-width: 1023px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .footer-grid { grid-template-columns: 1fr; }
}