/**
 * Social icons: a row of icon links to the site's social media profiles.
 *
 * globalClass: social-icons   (a GB container holding GB buttons with an icon)
 *
 * Variants:
 *   (none)                  round buttons, inverted palette colors
 *   social-icons--plain     icon only, link color, no background
 *   social-icons--labels    pill buttons with the icon and the service name
 *   social-icons--large     48px buttons (default 40px)
 *   social-icons--center    row centered
 *
 * Structure:
 *   .social-icons.gb-container [.social-icons--plain|--labels|--large|--center]
 *     a.gb-button[aria-label] > span.gb-icon > svg (+ span.gb-button-text)
 *   Each button is a GB button with "Icon" set and "Remove text" on (except
 *   --labels). The href is an ACF Options placeholder, e.g.
 *   {{options.link_to_instagram}} (group "Yrityksen tiedot"); a button whose
 *   option is empty is dropped on the front end (includes/blocks/social-icons.php).
 *
 * Placements: header (GP hook element after the navigation) and the footer
 * contact column override the colors below in header.css and footer.css.
 *
 * Tuning: --social-icons-size (40px), --social-icons-gap (8px),
 *   --social-icons-bg, --social-icons-clr, --social-icons-hover-bg,
 *   --social-icons-hover-clr
 *
 * Chain animations: the row animates as one element; order it after the
 * heading and text in the section.
 */

:root {
    --social-icons-size: 40px;
    --social-icons-gap: 8px;
}

.social-icons {
    --social-icons-bg: var(--font-clr);
    --social-icons-clr: var(--bg-clr);
    --social-icons-hover-bg: var(--accent-clr);
    --social-icons-hover-clr: var(--bg-clr);
}

.social-icons,
.social-icons > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--social-icons-gap);
}

.social-icons > .block-editor-inner-blocks {
    width: 100%;
}

.social-icons .gb-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    box-sizing: border-box;
    min-width: var(--social-icons-size);
    height: var(--social-icons-size);
    padding: 0;
    border-radius: 50%;
    background-color: var(--social-icons-bg);
    color: var(--social-icons-clr);
    font-size: calc(var(--social-icons-size) * 0.45);
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--transition-speed) var(--transition-timing-function),
                color var(--transition-speed) var(--transition-timing-function);
}

.social-icons .gb-button:hover,
.social-icons .gb-button:focus-visible {
    background-color: var(--social-icons-hover-bg);
    color: var(--social-icons-hover-clr);
}

.social-icons .gb-icon {
    display: inline-flex;
    line-height: 0;
}

.social-icons .gb-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* Plain: icon only in the link color */
.social-icons--plain {
    --social-icons-bg: transparent;
    --social-icons-clr: var(--link-clr);
    --social-icons-hover-bg: transparent;
    --social-icons-hover-clr: var(--link-hover-clr);
}

.social-icons--plain {
    gap: 16px;
}

.social-icons--plain .gb-button {
    min-width: 0;
    height: auto;
    font-size: calc(var(--social-icons-size) * 0.55);
}

/* Labels: pill with the icon and the service name */
.social-icons--labels .gb-button {
    padding: 0 18px 0 14px;
    border-radius: calc(var(--social-icons-size) / 2);
    font-size: calc(var(--social-icons-size) * 0.4);
}

.social-icons--labels .gb-button-text {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
}

.social-icons--large {
    --social-icons-size: 48px;
    --social-icons-gap: 12px;
}

.social-icons--center,
.social-icons--center > .block-editor-inner-blocks > .block-editor-block-list__layout {
    justify-content: center;
}