/**
 * GP Social Share v2.0.0
 * @author Geertsen Photograpghy
 */

/* ── Container ──────────────────────────────────────── */
.gp-social-share {
    --gp-ss-gap: 8px;
    --gp-ss-btn-size: 40px;
    --gp-ss-icon-size: 20px;
    --gp-ss-radius: 6px;
    --gp-ss-transition: 0.2s ease;
    --gp-ss-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --gp-ss-color: #555;
    --gp-ss-bg: #f0f0f0;
    --gp-ss-hover-color: #fff;
    --gp-ss-hover-bg: #444;
    --gp-ss-focus-ring: #0066cc;
    margin: 1.5em 0 0.5em;
    padding: 0;
    font-family: var(--gp-ss-font);
}

/* ── Separator line ─────────────────────────────────── */
.gp-social-share--separator {
    padding-top: 1.2em;
    border-top: 1px solid #ddd;
}

/* ── Title ──────────────────────────────────────────── */
.gp-social-share__title {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--gp-ss-color);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

/* ── Alignment ──────────────────────────────────────── */
.gp-social-share--align-left   .gp-social-share__buttons { justify-content: flex-start; }
.gp-social-share--align-center .gp-social-share__buttons { justify-content: center; }
.gp-social-share--align-right  .gp-social-share__buttons { justify-content: flex-end; }
.gp-social-share--align-center .gp-social-share__title   { text-align: center; }
.gp-social-share--align-right  .gp-social-share__title   { text-align: right; }

/* ── Button row ─────────────────────────────────────── */
.gp-social-share__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-ss-gap);
    align-items: center;
    margin: 0;
    padding: 0;
}

/* ── Single button ──────────────────────────────────── */
.gp-social-share__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: var(--gp-ss-btn-size);
    min-height: var(--gp-ss-btn-size);
    padding: 0 12px;
    border: none;
    border-radius: var(--gp-ss-radius);
    background: var(--gp-ss-bg);
    color: var(--gp-ss-color);
    text-decoration: none;
    font-family: inherit;
    font-size: 0.82em;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background var(--gp-ss-transition), color var(--gp-ss-transition), transform var(--gp-ss-transition);
    -webkit-user-select: none;
    user-select: none;
    box-sizing: border-box;
}

.gp-social-share__button:hover,
.gp-social-share__button:active {
    background: var(--gp-ss-hover-bg);
    color: var(--gp-ss-hover-color);
    text-decoration: none;
    transform: translateY(-1px);
}

.gp-social-share__button:focus-visible {
    outline: 2px solid var(--gp-ss-focus-ring);
    outline-offset: 2px;
}

/* Icon-only: square buttons */
.gp-social-share--icon .gp-social-share__button { padding: 0; width: var(--gp-ss-btn-size); }

/* ── Size variants ──────────────────────────────────── */
.gp-social-share--small  { --gp-ss-btn-size: 32px; --gp-ss-icon-size: 16px; --gp-ss-gap: 6px; }
.gp-social-share--small  .gp-social-share__button { font-size: 0.75em; padding: 0 8px; }
.gp-social-share--small  .gp-social-share__title  { font-size: 0.78em; }
.gp-social-share--small.gp-social-share--icon .gp-social-share__button { padding: 0; }

.gp-social-share--large  { --gp-ss-btn-size: 48px; --gp-ss-icon-size: 24px; --gp-ss-gap: 10px; }
.gp-social-share--large  .gp-social-share__button { font-size: 0.9em; padding: 0 16px; }
.gp-social-share--large  .gp-social-share__title  { font-size: 0.95em; }
.gp-social-share--large.gp-social-share--icon .gp-social-share__button { padding: 0; }

/* ── Icon ───────────────────────────────────────────── */
.gp-social-share__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gp-social-share__icon svg {
    width: var(--gp-ss-icon-size);
    height: var(--gp-ss-icon-size);
    fill: currentColor;
}

/* ── Label / SR-only ────────────────────────────────── */
.gp-social-share__label { white-space: nowrap; }

.gp-social-share__sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Brand colors (hover) ───────────────────────────── */
.gp-social-share--brand .gp-social-share__button--facebook  { --gp-ss-hover-bg: #1877F2; }
.gp-social-share--brand .gp-social-share__button--x         { --gp-ss-hover-bg: #000; }
.gp-social-share--brand .gp-social-share__button--whatsapp   { --gp-ss-hover-bg: #25D366; --gp-ss-hover-color: #fff; }
.gp-social-share--brand .gp-social-share__button--linkedin   { --gp-ss-hover-bg: #0A66C2; }
.gp-social-share--brand .gp-social-share__button--reddit     { --gp-ss-hover-bg: #FF4500; }
.gp-social-share--brand .gp-social-share__button--telegram   { --gp-ss-hover-bg: #26A5E4; }
.gp-social-share--brand .gp-social-share__button--email      { --gp-ss-hover-bg: #555; }
.gp-social-share--brand .gp-social-share__button--copylink   { --gp-ss-hover-bg: #555; }
.gp-social-share--brand .gp-social-share__button--pinterest  { --gp-ss-hover-bg: #BD081C; }
.gp-social-share--brand .gp-social-share__button--native     { --gp-ss-hover-bg: #333; }

/* ── Copy feedback ──────────────────────────────────── */
.gp-social-share__button--copylink.gp-social-share__button--copied {
    background: #2e7d32; color: #fff; position: relative;
}

.gp-social-share__button--copylink.gp-social-share__button--copied::after {
    content: attr(data-copy-text);
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    padding: 4px 10px; background: #2e7d32; color: #fff;
    font-size: 0.75em; font-weight: 600; line-height: 1.4;
    white-space: nowrap; border-radius: 4px; pointer-events: none;
    animation: gp-ss-fade-in 0.15s ease;
}

.gp-social-share__button--copylink.gp-social-share__button--copied::before {
    content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
    border: 4px solid transparent; border-top-color: #2e7d32;
    pointer-events: none; animation: gp-ss-fade-in 0.15s ease;
}

@keyframes gp-ss-fade-in {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Native share (hidden by default) ───────────────── */
.gp-social-share__button--native[hidden] { display: none; }

@media (max-width: 767px) {
    .gp-social-share.gp-social-share--native-active .gp-social-share__button:not(.gp-social-share__button--native) {
        display: none;
    }
}

/* ── Floating / sticky sidebar ──────────────────────── */
.gp-social-share--floating-left,
.gp-social-share--floating-right {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    margin: 0;
    padding: 0;
    border: none;
}

.gp-social-share--floating-left  { left: 12px; }
.gp-social-share--floating-right { right: 12px; }

.gp-social-share--floating-left .gp-social-share__buttons,
.gp-social-share--floating-right .gp-social-share__buttons {
    flex-direction: column;
}

/* Floating: no separator, no alignment override */
.gp-social-share--floating-left.gp-social-share--separator,
.gp-social-share--floating-right.gp-social-share--separator {
    border-top: none;
    padding-top: 0;
}

/* ── Dark mode ──────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .gp-social-share {
        --gp-ss-color: #ccc;
        --gp-ss-bg: #2a2a2a;
        --gp-ss-hover-color: #fff;
        --gp-ss-hover-bg: #555;
        --gp-ss-focus-ring: #4da6ff;
    }

    .gp-social-share--separator {
        border-top-color: #444;
    }
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 480px) {
    .gp-social-share { --gp-ss-gap: 6px; --gp-ss-btn-size: 36px; --gp-ss-icon-size: 18px; }
    .gp-social-share__button { padding: 0 10px; font-size: 0.78em; }
    .gp-social-share--icon .gp-social-share__button { padding: 0; width: var(--gp-ss-btn-size); }
}

/* Floating → inline on mobile */
@media (max-width: 767px) {
    .gp-social-share--floating-left,
    .gp-social-share--floating-right {
        position: static;
        transform: none;
        margin: 1.5em 0 0.5em;
    }

    .gp-social-share--floating-left .gp-social-share__buttons,
    .gp-social-share--floating-right .gp-social-share__buttons {
        flex-direction: row;
    }
}

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .gp-social-share__button { transition: none; }
    .gp-social-share__button:hover { transform: none; }
}

/* ── Print: hide ────────────────────────────────────── */
@media print { .gp-social-share { display: none; } }