/* Social links bar under the front-page banner (templates/components/social-bar.php). */
.social-bar{background:#2b3448;position:relative;z-index:2}
.social-bar__list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 48px;margin:0;padding:16px 0;list-style:none}
.social-bar__item{margin:0;padding:0;list-style:none}
.social-bar__link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:#b3b8c3;transition:color .2s ease}
.social-bar__link:hover,.social-bar__link:focus{color:#fff}
.social-bar__icon{display:block;height:28px;width:auto;fill:currentColor}
/* Visually hidden label for screen readers and text-only clients. */
.social-bar__text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap}
@media (max-width:767px){.social-bar__list{gap:8px 28px;padding:12px 0}.social-bar__icon{height:24px}}
/* On small screens main becomes a flex column and .banner gets order:1 (it moves after the other
   components); give the bar the same order so it stays right after the banner. No effect on
   desktop, where main is not a flex container. */
.social-bar{order:1}