/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--color-surface-mid); color: var(--color-text-on-dark); }
.footer a { transition: color var(--t-fast); }
.footer a:hover { color: var(--color-brand); }

.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: clamp(2rem,5vw,4rem); padding-block: var(--space-20) var(--space-12); }
.footer__logo { height: 52px; width: auto; margin-bottom: var(--space-5); }
.footer__brand p { font-size: var(--fs-sm); max-width: 36ch; }
.footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.footer__social a { width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center; background: rgba(255,255,255,0.06); }
.footer__social a:hover { background: var(--color-brand); color: #fff; }
.footer__social svg { width: 18px; height: 18px; }

.footer__title { color: #fff; font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--space-5); }
.footer__links li { margin-bottom: var(--space-3); font-size: var(--fs-sm); }

.footer__contact li { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); font-size: var(--fs-sm); }
.footer__contact svg { width: 18px; height: 18px; color: var(--color-brand); flex: none; margin-top: 2px; }
.footer__hours { font-size: var(--fs-sm); }
.footer__hours dt { color: #fff; font-weight: 600; margin-top: var(--space-4); margin-bottom: var(--space-1); }

.footer__bottom { border-top: 1px solid var(--color-border-dark); padding-block: var(--space-6); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: var(--fs-xs); }
.footer__bottom a:hover { color: var(--color-brand); }

@media (max-width: 820px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__top { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* --- Legal links row --- */
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); padding-block: var(--space-5); border-top: 1px solid var(--color-border-dark); font-size: var(--fs-sm); }
.footer__legal a { color: var(--color-text-on-dark); }
.footer__legal a:hover { color: var(--color-brand); }