/* The links of a site (oli-social): icons in a row (templates/social/icons.html.twig), and the list with their names in a page
   (templates/social/list.html.twig). A theme adjusts or replaces them (setting load_css). */
.social { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.social li { display: block; width: auto; margin: 0; padding: 0; list-style: none; }
.social a { display: flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; margin: 0; border-radius: 50%; color: inherit; font-size: 0.95rem; opacity: 0.75; text-decoration: none; }
.social a:hover, .social a:focus-visible { opacity: 1; background: rgba(127, 127, 127, 0.15); }

.social-list { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; margin: 0; padding: 0; list-style: none; }
.social-list li { margin: 0; padding: 0; }
.social-list + .social-list { margin-top: 0.9rem; }
.social-list a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.8rem; border: 1px solid rgba(127, 127, 127, 0.35); border-radius: 2rem; color: inherit; text-decoration: none; }
.social-list a:hover, .social-list a:focus-visible { border-color: var(--q2-accent, currentColor); }