/* =========================================================
   Social profile links -- the shared icon row
   Prefix: uq-social-links
   Markup and data: inc/social-links.php (uq_social_links_html())
   Used by: the footer's bottom bar (placed by css/site-footer.css) and the
   Contact page's "Connect with us" block (module-social.php)

   Six Bootstrap Icons brand marks on one 16-unit grid, drawn at 20px in ROD
   navy. Each link is a 40px circle -- a comfortable touch target -- so
   neighbouring marks sit 20px apart with no extra gap. Hover tints that
   circle; it does not move or recolour the mark. Keyboard focus gets the
   site's blue ring. Only enqueued when at least one profile URL is filled.
   ========================================================= */

.uq-social-links {
    --uq-social-color: var(--uq-theme-primary, #104E8B);
    --uq-social-hover-bg: rgba(16, 78, 139, 0.08);
    --uq-social-focus: #1A6EFF;
    --uq-social-icon: 20px;
    --uq-social-box: 40px;
    /* Pull the row out by half the circle's padding so the first or last
       mark's ink, not its invisible circle, lines up with the text edge. */
    --uq-social-inset: calc((var(--uq-social-icon) - var(--uq-social-box)) / 2);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.uq-social-links__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.uq-social-links__item::before,
.uq-social-links__item::after {
    content: none;
}

/* The global `a` is ROD yellow at 600 with a 0.3s `transition: all`; the
   class beats it at (0,1,0). */
.uq-social-links__link {
    display: flex;
    width: var(--uq-social-box);
    height: var(--uq-social-box);
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--uq-social-color);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

/* (0,2,0) and later: style.css's `a:hover` (0,1,1) would otherwise turn the
   mark yellow, and its `a:focus { outline: 0 }` would remove the ring. */
.uq-social-links .uq-social-links__link:hover,
.uq-social-links .uq-social-links__link:focus-visible {
    color: var(--uq-social-color);
    background-color: var(--uq-social-hover-bg);
}

.uq-social-links .uq-social-links__link:focus-visible {
    outline: 2px solid var(--uq-social-focus);
    outline-offset: 2px;
}

.uq-social-links__icon {
    display: block;
    flex: none;
    width: var(--uq-social-icon);
    height: var(--uq-social-icon);
    fill: currentColor;
}

/* ---------- Contact page ("Connect with us", template-contact.php) ----------
   Left-aligned under the heading, the first mark on the text edge. */

.social-wrap .uq-social-links {
    margin-left: var(--uq-social-inset);
}

@media (prefers-reduced-motion: reduce) {
    .uq-social-links__link {
        transition: none;
    }
}