/*
=========================================
          SOCIAL MEDIA OPTIONS
=========================================
*/

/* Base styles for all social icons */
.social-icon-base {
    display: inline-flex; /* Allows width/height to be applied and for vertical/horizontal centering */
    align-items: center; /* Vertically centers the Font Awesome icon */
    justify-content: center; /* Horizontally centers the Font Awesome icon */
    text-decoration: none; /* Already on your <a>, but good to ensure here too if you move the style */
    vertical-align: middle; /* Helps with alignment in a line of text */
    /* Add any other default, non-dynamic styles here */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transitions for hover */
}

/* Shape-specific styles */
.rw-square-icon,
.rw-square-outline-icon {
    /* No specific border-radius, it will be square by default */
}

.rw-circle-icon,
.rw-circle-outline-icon {
    border-radius: 50%;
}

/* The rw-rounded-edge class will receive its border-radius dynamically via PHP
   because the radius value itself is pulled from an ACF field.
   If you had a fixed radius for 'rounded_edge', you'd put it here:
.rw-rounded-edge {
    border-radius: 8px; // Example fixed value
}
*/

.rw-no-shape-icon {
    /* No specific shape styles */
}


/* Hover effect */
.fa:hover {
    opacity: 0.7; /* Removed !important as it's less likely to be needed now */
    transform: scale(1.05); /* Optional: subtle zoom effect on hover */
}


/* You can add specific styles for individual social icon links if needed */
/*
.social-icon-link {
    margin-right: 10px; // Example spacing between icons
}

.social-icon-link.social-icon-facebook i {
    // Specific styles for Facebook icon if needed
}
*/

/*
=========================================

=========================================
*/