/*
 * SodaStream Theme — brands.css
 *
 * Per-brand button styling. Each social/service link gets a button class
 * named `button-{brand}` (e.g., `button-github`, `button-twitter`).
 *
 * If you set 'use_default_buttons' => 'true' in config.php, this file is
 * ignored — LinkStack uses its own default brand styles instead. That's
 * useful for theme reskins that only want layout changes.
 *
 * The base `.button` class provides shared structure (padding, border,
 * width). Per-brand classes override colors, hover effects, and icons.
 *
 * Replace this stub with your theme's per-brand styling, or set
 * use_default_buttons=true in config.php to skip entirely.
 */

/* === Base button === */
.button {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important; /* Forces full width within padded container */
    max-width: 600px !important;
    margin: 0 auto 15px auto !important;
    padding: 15px 20px;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* Removes iOS Safari's default blue/grey tap overlay */

    background: transparent;
    border: 2px solid rgba(0, 150, 199, 0.4);
    
    /* Base theme colors */
    color: #cbf8de; /* Minty marble soda green tint */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); /* Slightly darker small shadow for crispness */
}

/* Glassmorphism Background Pseudo-element */
.button::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 23px; /* Matches inner radius to prevent spilling */
    background: rgba(0, 150, 199, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.3s ease;
}

/* Internal glare effect for glass look */
.button::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    border-radius: 23px 23px 0 0;
    z-index: -1;
}

.button:hover,
.button:active {
    box-shadow: 0 8px 15px rgba(0, 150, 199, 0.3);
    border-color: rgba(0, 150, 199, 0.6);
    color: #84fab0; 
}

.button:hover::after,
.button:active::after {
    background: rgba(0, 150, 199, 0.5);
}

/* Dynamic Hover Bubbles */
.hover-bubble {
    position: absolute;
    bottom: 20%;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.8);
    pointer-events: none;
    z-index: 0; /* Behind button text, in front of glass */
    animation: shootUp forwards ease-out;
}

@keyframes shootUp {
    0% {
        transform: translate3d(0, 0, 0) scale(0.2);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translate3d(calc(15px - 30px * var(--drift-dir, 0.5)), -60px, 0) scale(1.2);
        opacity: 0;
    }
}

@keyframes separator-float {
    from { transform: translateY(-2px); }
    to { transform: translateY(2px); }
}

@keyframes link-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
}

.icon-hover {
    transform: scale(1.1);
}

/* === Per-brand variants === */
/* We maintain the glass look but tint the border and text on hover */

.button-github:hover { border-color: #181717; color: #181717; animation: none; }
.button-twitter:hover { border-color: #1da1f2; color: #1da1f2; animation: none; }
.button-instagram:hover { border-color: #e1306c; color: #e1306c; animation: none; }
.button-linkedin:hover { border-color: #0077b5; color: #0077b5; animation: none; }
.button-mastodon:hover { border-color: #563acc; color: #563acc; animation: none; }
.button-discord:hover { border-color: #5865F2; color: #5865F2; animation: none; }
.button-coffee:hover { border-color: #FFDD00; color: #000000; animation: none; }
.button-patreon:hover { border-color: #FF424D; color: #FF424D; animation: none; }

.button i {
    font-size: 1.2rem;
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.button img.icon {
    max-height: 24px;
    max-width: 24px;
    margin-right: 10px;
    border-radius: 4px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Recolor LinkStack's default white SVGs to match the minty text (#cbf8de) */
.button img.icon[src*="assets/linkstack/icons"] {
    filter: brightness(0) invert(92%) sepia(16%) saturate(601%) hue-rotate(85deg) brightness(105%) contrast(96%);
}