/** Social Share Buttons **/
.social-share__container {
    display: flex;
    gap: 16px;
    flex-wrap: wrap; /* Ensures buttons wrap on smaller screens */
    justify-content: center; /* Centers the buttons */
    align-items: center; /* Vertically aligns the buttons */
}

.social-share__container a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; /* Increased size for better touch targets */
    height: 32px; /* Increased size for better touch targets */
    padding: 4px;
    border: 1px solid var(--base-12);
    border-radius: 4px;
    color: var(--base-12);
    background: var(--base); /* Added background for better contrast */
    transition: all 0.3s ease;
    text-decoration: none; /* Ensures links have no default underline */
}

.social-share__container a:hover,
.social-share__container a:focus {
    background: var(--base-12);
    color: var(--base);
    outline: none; /* Removes default outline */
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow for focus */
}

.social-share__container svg {
    width: 20px; /* Adjusted size for SVG icons */
    height: 20px; /* Adjusted size for SVG icons */
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    .social-share__container {
        gap: 12px;
    }

    .social-share__container a {
        width: 28px; /* Adjusts size on smaller screens */
        height: 28px; /* Adjusts size on smaller screens */
    }
}

@media (max-width: 480px) {
    .social-share__container {
        gap: 10px;
    }

    .social-share__container a {
        width: 24px; /* Adjusts size for very small screens */
        height: 24px; /* Adjusts size for very small screens */
    }
}