/* Shared static footer component; intentionally independent of dashboard controls. */
footer:has(.footer-social) { flex-wrap: wrap; gap: 24px; }
footer .footer-social { flex: 0 0 100%; margin: 0; text-align: center; color: #b8cbc7; }
footer .footer-social p { margin: 0 0 8px; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .7px; }
footer .footer-social-links { display: flex; justify-content: center; gap: 10px; }
footer .footer-social-links a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid currentColor; border-radius: 50%; color: #b8cbc7; text-decoration: none; }
footer .footer-social-links svg { display: block; width: 22px; height: 22px; }
footer .footer-social-links a:hover { color: #e8f2ef; background: #163b43; }
footer .footer-social-links a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; background: #163b43; color: #e8f2ef; }
[data-theme="day"] footer .footer-social, [data-theme="day"] footer .footer-social-links a { color: #315c56; }
[data-theme="day"] footer .footer-social-links a:hover, [data-theme="day"] footer .footer-social-links a:focus-visible { color: #173e39; background: #d9ebe6; }
@media (max-width: 768px) { footer .footer-social { flex-basis: auto; width: 100%; } }
/* Match the existing syncNavFit compact-menu threshold (1800px). */
#nav .social-header { display: flex; flex: 0 0 auto; margin: 0; padding: 0; }
#nav .social-menu { display: none; }
#nav .social-icon-links { display: flex; align-items: center; gap: 4px; }
#nav .social-icon-links a { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border-radius: 7px; color: var(--text-secondary, #b8cbc7); }
#nav .social-icon-links a::after { display: none; }
#nav .social-icon-links svg { width: 20px; height: 20px; display: block; }
#nav .social-icon-links a:hover { color: var(--text-primary, #e8f2ef); background: var(--toggle-bg); }
#nav .social-icon-links a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; background: var(--toggle-bg); }
@media (max-width: 1800px) {
  #nav .social-header { display: none; }
  #nav .social-menu { display: block; margin: 8px 0 0; padding: 12px 14px 4px; border-top: 1px solid var(--border-default); }
  #nav .social-menu p { margin: 0 0 8px; color: var(--text-secondary); font-size: 12px; letter-spacing: .5px; }
  #nav .social-menu .social-icon-links a { width: 44px; height: 44px; flex-basis: 44px; }
}