/**
 * GPRO Footer Badge
 * Shortcodes: [gpro_badge]  [gpro_badge dark="1"]
 */

@font-face {
    font-family: 'Merriweather Sans';
    font-style:  normal;
    font-weight: 300;
    font-display: swap;
    src: url('merriweather-sans-300.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                   U+FEFF, U+FFFD;
}

/* =============================================================================
   Badge wrapper
   ============================================================================= */

.gpro-footer-badge {
    display:     inline-flex;
    align-items: center;
    gap:         0.55em;
    padding:     1px 13px 1px 16px;

    background:          rgba(255, 255, 255, 0.15);
    backdrop-filter:     blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border:              1px solid rgba(255, 255, 255, 0.15);
    border-radius:       24px;

    font-family:    'Merriweather Sans', sans-serif;
    font-size:      0.75rem;
    font-weight:    300;
    letter-spacing: 0.05em;
    color:          rgba(255, 255, 255, 0.85);
    text-decoration: none;
    white-space:    nowrap;
    cursor:         pointer;

    transition: background 0.3s ease, border-color 0.3s ease;
}

.gpro-footer-badge:hover {
    color:           rgba(255, 255, 255, 0.85);
    text-decoration: none;
    background:      rgba(255, 255, 255, 0.22);
    border-color:    rgba(255, 255, 255, 0.35);
}

/* Dark variant — explicit dark pill for light backgrounds */
.gpro-footer-badge--dark {
    background:   rgba(26, 26, 24, 0.08);
    border-color: rgba(26, 26, 24, 0.12);
    color:        #1a1a18;
}

.gpro-footer-badge--dark:hover {
    background:   rgba(26, 26, 24, 0.13);
    border-color: rgba(26, 26, 24, 0.18);
    color:        #1a1a18;
}

/* =============================================================================
   Overflow container — clips the scrolling track
   ============================================================================= */

.gpro-footer-badge__overflow {
    overflow: hidden;
    width:    13.8em;
}

/* =============================================================================
   Scrolling track — JS controls play/pause and reset
   ============================================================================= */

.gpro-footer-badge__track {
    display:     inline-block;
    white-space: nowrap;
    will-change: transform;
    transform:   translateX(0);
}

@keyframes gpro-footer-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.gpro-footer-badge__track.is-scrolling {
    animation: gpro-footer-scroll 5s linear infinite;
}

/* =============================================================================
   Slash
   ============================================================================= */

.gpro-footer-badge__slash {
    font-size:   1.2rem;
    font-weight: 400;
    line-height: 1;
    opacity:     0.6;
    flex-shrink: 0;
    transition:  opacity 0.3s ease;
}

.gpro-footer-badge:hover .gpro-footer-badge__slash {
    opacity: 0.9;
}