/**
 * ============================================================
 * CYBER TEAM - Social Icons
 *
 * Shortcode:
 * [ct_social_icons]
 * ============================================================
 */


/**
 * Root
 */
.ct-social-icons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ct-social-gap, 18px);
    margin: 0;
    padding: 0;
    line-height: 1;
}


/**
 * Alignment
 */
.ct-social-icons--align-left {
    justify-content: flex-start;
}

.ct-social-icons--align-center {
    justify-content: center;
}

.ct-social-icons--align-right {
    justify-content: flex-end;
}


/**
 * Link
 */
.ct-social-icons>.ct-social-icons__link,
.ct-social-icons>.ct-social-icons__link:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    color: var(--ct-social-icon-color,
            var(--ct-color-dark, #17233f));

    background-color: var(--ct-social-icon-background,
            transparent);

    text-decoration: none;
    line-height: 1;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;

    -webkit-tap-highlight-color: transparent;
}


/**
 * Elementor / theme zaštita.
 */
.ct-social-icons__link:hover,
.ct-social-icons__link:focus,
.ct-social-icons__link:visited {
    text-decoration: none;
}


/**
 * SVG
 */
.ct-social-icons__icon {
    display: block;

    width: var(--ct-social-icon-size,
            20px);

    height: var(--ct-social-icon-size,
            20px);

    max-width: none;
    max-height: none;

    fill: currentColor;

    pointer-events: none;
}


/**
 * ------------------------------------------------------------
 * PLAIN STYLE
 * ------------------------------------------------------------
 */

.ct-social-icons--style-plain .ct-social-icons__link {
    width: var(--ct-social-icon-size,
            20px);

    height: var(--ct-social-icon-size,
            20px);

    border-radius: 0;
    background-color: transparent;
}


/**
 * ------------------------------------------------------------
 * CIRCLE STYLE
 * ------------------------------------------------------------
 */

.ct-social-icons--style-circle .ct-social-icons__link {
    width: var(--ct-social-button-size,
            40px);

    height: var(--ct-social-button-size,
            40px);

    border-radius: 50%;
}


/**
 * ------------------------------------------------------------
 * HOVER / FOCUS
 * ------------------------------------------------------------
 */

.ct-social-icons>.ct-social-icons__link:hover,
.ct-social-icons>.ct-social-icons__link:focus-visible {
    color: var(--ct-social-icon-hover-color,
            var(--ct-color-accent, #cd9a3e));

    background-color: var(--ct-social-icon-hover-background,
            transparent);

    transform: translateY(-1px);
}


/**
 * Keyboard accessibility.
 */
.ct-social-icons__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/**
 * ------------------------------------------------------------
 * PLAIN STYLE HOVER
 * ------------------------------------------------------------
 *
 * Kod plain varijante pozadina uvek ostaje transparentna,
 * osim ako se kasnije eksplicitno ne promeni struktura.
 */

.ct-social-icons--style-plain .ct-social-icons__link:hover,
.ct-social-icons--style-plain .ct-social-icons__link:focus-visible {
    background-color: transparent;
}


/**
 * ------------------------------------------------------------
 * MOBILE
 * ------------------------------------------------------------
 *
 * Ne smanjujemo automatski touch target circle varijante.
 * 40px ostaje dovoljno praktičan za header/footer prikaz.
 */

@media (max-width: 767px) {

    .ct-social-icons {
        gap: var(--ct-social-gap,
                16px);
    }
}


/**
 * ------------------------------------------------------------
 * REDUCED MOTION
 * ------------------------------------------------------------
 */

@media (prefers-reduced-motion: reduce) {

    .ct-social-icons__link {
        transition: none;
    }

    .ct-social-icons__link:hover,
    .ct-social-icons__link:focus-visible {
        transform: none;
    }
}