<!-- footer.css -->

/* Default link icon */
.copy-link::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'%3E%3Cpath d='M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244'%3E%3C/path%3E%3C/svg%3E");
}

/* Success checkmark icon when copied */
.copied::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'%3E%3Cpath d='M4.5 12.75l6 6 9-13.5'%3E%3C/path%3E%3C/svg%3E") !important;
}

.copy-link {
    background-color: var(--surface);
    color: var(--accent-1);
    border: 1px solid var(--border);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.copy-link:hover {
    background-color: var(--surface-hover);
    border-color: var(--accent-1);
    box-shadow: 0 0 8px rgba(190, 242, 100, 0.3);
}

/* Animation for copied state */
.copied {
    background-color: var(--accent-1) !important;
    color: var(--background) !important;
    position: relative;
}

/* Accessibility focus styles */
.copy-link:focus {
    outline: 2px solid var(--accent-1);
    outline-offset: 2px;
}

/* Animation for button press */
.copy-link:active {
    transform: translateY(1px);
}

/* Base Button Style */
.social-button {
    display: inline-flex;
    align-items: center;
    background-color: var(--surface);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--border);
    min-width: 160px;
    justify-content: center;
    height: 100%;
}

.social-button:hover {
    background-color: var(--surface-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: var(--border-hover);
}

.social-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Icon Base Styles */
.social-button::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Twitter Icon */
.social-button[href*="twitter.com"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'%3E%3C/path%3E%3C/svg%3E");
}

/* Reddit Icon */
.social-button[href*="reddit.com"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249z'/%3E%3C/svg%3E");
}

/* Facebook Icon */
.social-button[href*="facebook.com"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E");
}

/* BlueSky */
.social-button[href*="bsky.app"]::before {
    background-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 64 57' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z'/%3E%3C/svg%3E");
}

/* Email Icon */
.social-button[href^="mailto:"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z'/%3E%3Cpath d='M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z'/%3E%3C/svg%3E");
}

/* Platform-specific hover colors */
.social-button[href*="twitter.com"]:hover {
    background-color: #1DA1F2;
    color: var(--text-primary);
}

.social-button[href*="reddit.com"]:hover {
    background-color: #FF4500;
    color: var(--text-primary);
}

.social-button[href*="facebook.com"]:hover {
    background-color: #1877F2;
    color: var(--text-primary);
}

.social-button[href*="bsky.app"]:hover {
    background-color: #0085ff;
    color: var(--text-primary);
}

.social-button[href^="mailto:"]:hover {
    background-color: #EA4335;
    color: var(--text-primary);
}