/**
 * Home page social icon buttons — scales with viewport.
 */
.home-socials {
    --social-btn: clamp(36px, 2.2vw + 20px, 52px);
    --social-icon: clamp(17px, 1vw + 12px, 24px);
    --social-gap: clamp(10px, 1vw, 16px);
    --social-radius: clamp(8px, 0.5vw + 6px, 12px);
    margin: 36px auto 0;
    padding: 0 24px 36px;
    text-align: center;
}

.home-socials-grid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--social-gap);
}

.home-socials-grid a.home-social-card {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--social-btn) !important;
    height: var(--social-btn) !important;
    min-width: var(--social-btn) !important;
    min-height: var(--social-btn) !important;
    max-width: var(--social-btn) !important;
    max-height: var(--social-btn) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--social-radius) !important;
    text-decoration: none !important;
    color: #1a1a1a !important;
    background: #fff !important;
    border: 1.5px solid rgba(26, 26, 26, 0.2) !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.home-socials-grid a.home-social-card:hover {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
}

.home-socials-grid a.home-social-card svg {
    display: block !important;
    width: var(--social-icon) !important;
    height: var(--social-icon) !important;
    min-width: var(--social-icon) !important;
    min-height: var(--social-icon) !important;
    max-width: var(--social-icon) !important;
    max-height: var(--social-icon) !important;
    flex-shrink: 0 !important;
    pointer-events: none;
}

.home-socials-grid a.home-social-card:hover svg path,
.home-socials-grid a.home-social-card:hover svg circle,
.home-socials-grid a.home-social-card:hover svg rect {
    fill: #f5f5f0 !important;
    stroke: #f5f5f0 !important;
}

@media (max-width: 600px) {
    .home-socials {
        margin-top: 28px;
        padding: 0 16px 28px;
    }
}

/* Shell pages: show socials only when logged in (e.g. About). */
.home-socials.vibbs-authed-only {
    display: none !important;
}

body.vibbs-shell-authed .home-socials.vibbs-authed-only {
    display: block !important;
}