/* Blogary UI layer — footer layout. Loaded after blogary-colors.css on every page. */

.footer-2 .bl-foot {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 48px; flex-wrap: wrap;
}
.bl-foot-brand { max-width: 34ch; display: flex; flex-direction: column; gap: 14px; }
.bl-foot-brand .bl-logo { display: flex; }
.bl-foot-brand .bl-by { opacity: .55; }
.bl-foot-mail {
  display: inline-flex; align-items: center; gap: 8px; width: max-content;
  font-size: 15px; color: var(--_colors--text---text-heading); transition: color .2s;
}
.bl-foot-mail svg { width: 18px; height: 18px; flex: none; }
.bl-foot-mail:hover { color: var(--bl-indigo); }

.footer-2 .bl-foot .footer-2-menus {
  width: auto; display: flex; gap: 96px;
}
.footer-2 .bl-foot .footer-menu { min-width: 140px; }

.bl-foot-base {
  margin-top: 0; padding-top: 22px;
  border-top: 1px solid var(--_colors--border---border-default);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px 24px;
  font-size: 14px; color: var(--_colors--text---text-body-muted);
}
.bl-foot-base-links { display: flex; gap: 22px; }
.bl-foot-base-links a { transition: color .2s; }
.bl-foot-base-links a:hover { color: var(--bl-indigo); }

/* the old wrap used a 168px gap between its blocks; keep it calmer */
.footer-2 .footer-2-wrap { gap: var(--_spacing--gap---gap-9); }

@media (max-width: 767px) {
  .footer-2 .bl-foot { flex-direction: column; gap: 40px; }
  .footer-2 .bl-foot .footer-2-menus { gap: 56px; }
  .bl-foot-base { flex-direction: column; align-items: flex-start; }
}