/**
 * Sticky Social Icons — floating LINE / WhatsApp / Facebook column.
 *
 * Placed in the Footer region but pinned to the viewport, so it stays put as
 * the page scrolls. The fade-in delay comes from the block (--ss-delay, set
 * inline by the template) rather than being hardcoded here.
 */

.sticky-social {
    --ss-size: 44px;
    --ss-radius: 10px;
    --ss-delay: 3s;

    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    /* Above page content, below the mega menu and any modal. */
    z-index: 900;

    /* Hidden until the delay elapses. animation-fill-mode: both keeps the 0%
       frame applied during the delay, so it cannot flash in on first paint. */
    opacity: 0;
    animation: ss-fade-in 0.6s ease-out var(--ss-delay) both;
}

/* Slides OUTWARD to its resting position rather than inward from off-screen.
   The obvious version starts at translateX(12px), but the column is pinned to
   right:0 and animation-fill-mode:both holds that first frame for the whole
   delay — so it sat 12px past the viewport edge and put a horizontal scrollbar
   on every page for three seconds. Starting inside and settling out looks the
   same and can never overflow. */
@keyframes ss-fade-in {
    from { opacity: 0; transform: translateY(-50%) translateX(-10px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.sticky-social__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    /* Rounded on the left only — the column sits flush against the edge. */
    border-radius: var(--ss-radius) 0 0 var(--ss-radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.sticky-social__item {
    margin: 0;
    list-style: none;
}

.sticky-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-size);
    height: var(--ss-size);
    color: #fff;
    /* The theme underlines links in content regions. */
    border-bottom: none;
    text-decoration: none;
    transition: filter 0.2s ease;
}

.sticky-social__link:hover,
.sticky-social__link:focus {
    color: #fff;
    filter: brightness(1.12);
}

.sticky-social__link svg {
    width: 55%;
    height: 55%;
    display: block;
}

/* Brand colours. */
.sticky-social__link--line { background: #06c755; }
.sticky-social__link--whatsapp { background: #25d366; }
.sticky-social__link--facebook { background: #1877f2; }

/* --- Tablet ------------------------------------------------------------- */

@media (max-width: 992px) {
    .sticky-social { --ss-size: 38px; }
}

/* --- Phone: smaller, and clear of the viewport edges -------------------- */

@media (max-width: 650px) {
    .sticky-social {
        --ss-size: 32px;
        --ss-radius: 8px;
        /* Sits lower than centre so it does not cover body copy mid-screen. */
        top: auto;
        bottom: 90px;
        transform: none;
        animation-name: ss-fade-in-mobile;
    }

    /* Same inward start as the desktop keyframes, and for the same reason. */
    @keyframes ss-fade-in-mobile {
        from { opacity: 0; transform: translateX(-10px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    .sticky-social__link svg { width: 52%; height: 52%; }
}

/* Someone who has asked for less motion still gets the icons — just without
   the slide, and without waiting. Last in the file on purpose: it has to
   outrank the mobile block above, which re-declares animation-name. */
@media (prefers-reduced-motion: reduce) {
    .sticky-social {
        animation: none;
        opacity: 1;
    }
}