/**
 * HA SNS FAB - Front-end Floating Action Buttons
 *
 * CSS-variable driven so each site can override via theme or
 * WP Customizer "Additional CSS".
 *
 * Override examples:
 *   :root {
 *     --ha-sns-fab-size: 64px;
 *     --ha-sns-fab-bottom: 24px;
 *     --ha-sns-fab-radius: 16px;
 *   }
 *
 * @package HA_WP_Plugin
 * @since   0.2.0
 */

/* ---------------------------------------------------------------
 * CSS variables (overridable per-site)
 *
 * --ha-sns-fab-size:        Button size (PC)
 * --ha-sns-fab-size-sp:     Button size (SP)
 * --ha-sns-fab-gap:         Vertical gap between buttons
 * --ha-sns-fab-bottom:      Distance from viewport bottom (PC)
 * --ha-sns-fab-bottom-sp:   Distance from viewport bottom (SP)
 * --ha-sns-fab-side:        Distance from viewport side (PC)
 * --ha-sns-fab-side-sp:     Distance from viewport side (SP)
 * --ha-sns-fab-radius:      Button corner radius
 * --ha-sns-fab-shadow:      Drop shadow
 * --ha-sns-fab-shadow-hover: Drop shadow on hover/focus
 * ------------------------------------------------------------- */
:root {
    --ha-sns-fab-size: 60px;
    --ha-sns-fab-size-sp: 52px;
    --ha-sns-fab-gap: 12px;
    --ha-sns-fab-bottom: 20px;
    --ha-sns-fab-bottom-sp: 16px;
    --ha-sns-fab-side: 20px;
    --ha-sns-fab-side-sp: 16px;
    --ha-sns-fab-radius: 14px;
    --ha-sns-fab-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    --ha-sns-fab-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.22);
    --ha-sns-fab-bg-line: #06C755;
    --ha-sns-fab-bg-instagram: transparent;
}

/* ---------------------------------------------------------------
 * Container
 * ------------------------------------------------------------- */
.ha-sns-fab {
    position: fixed;
    bottom: var(--ha-sns-fab-bottom);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--ha-sns-fab-gap);
    pointer-events: none;
}

.ha-sns-fab--right {
    right: var(--ha-sns-fab-side);
}

.ha-sns-fab--left {
    left: var(--ha-sns-fab-side);
}

/* ---------------------------------------------------------------
 * Buttons (links)
 * ------------------------------------------------------------- */
.ha-sns-fab__link {
    pointer-events: auto;
    display: block;
    width: var(--ha-sns-fab-size);
    height: var(--ha-sns-fab-size);
    border-radius: var(--ha-sns-fab-radius);
    box-shadow: var(--ha-sns-fab-shadow);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    line-height: 0;
}

.ha-sns-fab__link:hover,
.ha-sns-fab__link:focus-visible {
    transform: scale(1.05);
    box-shadow: var(--ha-sns-fab-shadow-hover);
    text-decoration: none;
}

.ha-sns-fab__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ha-sns-fab__link--line {
    background: var(--ha-sns-fab-bg-line);
}

.ha-sns-fab__link--instagram {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
    transition: transform 0.2s ease, filter 0.2s ease;
}

.ha-sns-fab__link--instagram:hover,
.ha-sns-fab__link--instagram:focus-visible {
    box-shadow: none;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.22));
}

/* ---------------------------------------------------------------
 * Icon SVG sizing
 * ------------------------------------------------------------- */
.ha-sns-fab__icon {
    width: 100%;
    height: 100%;
    display: block;
}

/* LINE icon: shave inset so icon fills naturally */
.ha-sns-fab__link--line .ha-sns-fab__icon {
    transform: scale(1.05);
    transform-origin: center;
}

/* ---------------------------------------------------------------
 * Responsive: Mobile / Tablet
 * ------------------------------------------------------------- */
@media (max-width: 767px) {
    .ha-sns-fab {
        bottom: var(--ha-sns-fab-bottom-sp);
    }

    .ha-sns-fab--right {
        right: var(--ha-sns-fab-side-sp);
    }

    .ha-sns-fab--left {
        left: var(--ha-sns-fab-side-sp);
    }

    .ha-sns-fab__link {
        width: var(--ha-sns-fab-size-sp);
        height: var(--ha-sns-fab-size-sp);
    }
}

/* ---------------------------------------------------------------
 * Reduced motion: respect user preference
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ha-sns-fab__link {
        transition: none;
    }

    .ha-sns-fab__link:hover,
    .ha-sns-fab__link:focus-visible {
        transform: none;
    }
}