/**
 * DWP Social Links Styles
 *
 * @author    Desarrollo Web Profesional
 * @copyright 2024 Desarrollo Web Profesional
 * @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

/* Main container */
#dwp-social-links-block {
    margin-top: 40px;
    margin-bottom: 1.5rem;
    padding: 0;
    background-color: transparent;
}

#dwp-social-links-block .block-title {
    font-size: 16px;
    color: #f00;
    font-family: 'Special Elite', cursive;
    margin-bottom: 20px;
    font-weight: normal;
    text-transform: none;
    border: none;
    padding: 0;
}

/* Social links list */
.dwp-social-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dwp-social-link {
    margin: 0;
    padding: 0;
}

/* Social link anchor */
.dwp-social-link-anchor {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background-color: transparent;
    border: none;
    text-decoration: none;
    color: #fff;
    transition: opacity 0.3s ease;
}

.dwp-social-link-anchor:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* Icons - Font Awesome */
.dwp-social-icon {
    width: 30px;
    font-size: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icon specific colors */
.dwp-icon-facebook {
    color: #1877F2;
}

.dwp-icon-instagram {
    color: #E1306C;
}

.dwp-icon-twitter {
    color: #000000;
}

.dwp-icon-youtube {
    color: #FF0000;
}

.dwp-icon-tiktok {
    color: #000000;
}

/* Text */
.dwp-social-text {
    font-size: 14px;
    color: #fff;
}

/* Social links below slider on mobile */
#dwp-social-links-block.dwp-social-mobile-below-slider {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 10px 15px;
}

/* Responsive design */
@media (max-width: 767px) {
    .dwp-social-icon {
        width: 28px;
        font-size: 28px;
    }
    
    .dwp-social-text {
        font-size: 13px;
    }
}

/* Accessibility */
.dwp-social-link-anchor:focus {
    outline: 2px solid #f00;
    outline-offset: 2px;
}