/**
 * Paperchase Distribution design system — buttons & CTA (from distribution.paperchase.nl/style.css).
 * .info button + #artists section .info ribbon DNA.
 */

/* Mirrors .info button {} — skew, blue field, white bottom bar */
.pcs-dist-info {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 0.75rem;
}

.pcs-info-btn {
    --pcs-dist-btn-bg: var(--pcs-distribution-blue, #173cc8);
    --pcs-dist-btn-bar: #ffffff;
    display: block;
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
    margin-top: 0;
    padding: 0.62rem 0.85rem;
    box-sizing: border-box;
    background: var(--pcs-dist-btn-bg);
    color: #fff;
    text-align: center;
    border: none;
    /* 600 = leesbaar als Heavy-font niet laadt (200 was te licht op Jost) */
    font-weight: 600;
    font-family: "Heavy", "futuraheavy", var(--pcs-font-display, "Jost", sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.033em;
    font-size: clamp(0.68rem, 1.05vw, 0.78rem);
    line-height: 1.2;
    outline: none;
    transform: skew(-10deg);
    border-bottom: 5px solid var(--pcs-dist-btn-bar);
    cursor: pointer;
    transition:
        background 0.25s ease,
        border-bottom-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
}

a:hover .pcs-info-btn,
a:focus-visible .pcs-info-btn {
    background: #1e4ae0;
    color: #fff;
    border-bottom-color: var(--pcs-publishing-gold, #ffcb00);
}

/* Zelfde knop-styling als de <span> binnen tegels (o.a. ecosysteem-cards) */
a.pcs-info-btn {
    text-decoration: none;
    color: #fff;
}

a.pcs-info-btn:hover,
a.pcs-info-btn:focus-visible {
    background: #1e4ae0;
    color: #fff;
    border-bottom-color: var(--pcs-publishing-gold, #ffcb00);
}

/* Zelfde DNA op <button> (Woo single / cart) — UA-font overschrijven */
button.pcs-info-btn {
    -webkit-appearance: none;
    appearance: none;
    font-family: "Heavy", "futuraheavy", var(--pcs-font-display, "Jost", sans-serif);
}

button.pcs-info-btn:hover,
button.pcs-info-btn:focus-visible {
    background: #1e4ae0;
    color: #fff;
    border-bottom-color: var(--pcs-publishing-gold, #ffcb00);
}

/*
 * theme.json / wp-elements: .wp-element-button zet vaak een paarse preset achtergrond.
 * Winspecificiteit t.o.v. core — zelfde blauw als distribution-hub.
 */
button.pcs-info-btn.wp-element-button,
button.pcs-info-btn.wp-block-button__link {
    background: var(--pcs-dist-btn-bg, var(--pcs-distribution-blue, #173cc8)) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-bottom: 5px solid var(--pcs-dist-btn-bar, #fff) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Productpagina: zelfde win t.o.v. paarse preset als .pcs-info-btn nog niet door JS gezet is */
body.paperchase-shop-theme.pcs-woo-shop.single-product button.single_add_to_cart_button.wp-element-button,
body.paperchase-shop-theme.pcs-woo-shop.single-product button.single_add_to_cart_button.wp-block-button__link {
    background: var(--pcs-dist-btn-bg, var(--pcs-distribution-blue, #173cc8)) !important;
    background-color: var(--pcs-dist-btn-bg, var(--pcs-distribution-blue, #173cc8)) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-bottom: 5px solid var(--pcs-dist-btn-bar, #fff) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Live drops: neon pulse on CTA (accent from tile --pcs-accent) */
.pcs-info-btn--live {
    animation: pcs-info-btn-neon 2.4s ease-in-out infinite;
}

@keyframes pcs-info-btn-neon {
    0%,
    100% {
        box-shadow:
            0 0 0 0 transparent,
            0 0 0 0 color-mix(in srgb, var(--pcs-accent, #00ff41) 0%, transparent);
    }
    50% {
        box-shadow:
            0 0 22px 0 color-mix(in srgb, var(--pcs-accent) 45%, transparent),
            inset 0 0 20px -8px color-mix(in srgb, var(--pcs-accent) 35%, transparent);
    }
}

/* Tile: stronger neon rim using theme accent (live only) */
.pcs-bento-tile--live {
    animation: pcs-tile-neon-frame 3s ease-in-out infinite;
}

@keyframes pcs-tile-neon-frame {
    0%,
    100% {
        outline-color: color-mix(in srgb, var(--pcs-accent) 22%, transparent);
        box-shadow:
            0 18px 50px rgba(0, 0, 0, 0.45),
            0 0 0 1px color-mix(in srgb, var(--pcs-accent) 18%, transparent);
    }
    50% {
        outline-color: color-mix(in srgb, var(--pcs-accent) 50%, transparent);
        box-shadow:
            0 22px 56px rgba(0, 0, 0, 0.52),
            0 0 0 1px color-mix(in srgb, var(--pcs-accent) 40%, transparent),
            0 0 42px color-mix(in srgb, var(--pcs-accent) 28%, transparent);
    }
}

.pcs-bento-tile--live:hover,
.pcs-bento-tile--live:focus-visible {
    animation: none;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 0 0 1px color-mix(in srgb, var(--pcs-accent) 45%, transparent),
        0 0 52px color-mix(in srgb, var(--pcs-accent) 32%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .pcs-info-btn--live,
    .pcs-bento-tile--live {
        animation: none;
    }
}

/* Hub ecosysteem: CTA is span.pcs-hub-eco-card__btn binnen a.pcs-hub-eco-card__cta */
.pcs-hub-eco-card a.pcs-hub-eco-card__cta:hover .pcs-hub-eco-card__btn,
.pcs-hub-eco-card a.pcs-hub-eco-card__cta:focus-visible .pcs-hub-eco-card__btn {
    background: color-mix(in srgb, var(--pcs-eco-accent) 68%, #0a0a12);
    border-bottom-color: var(--pcs-publishing-gold, #ffcb00);
    filter: brightness(1.12);
    color: #fff;
    outline: none;
}

.pcs-hub-eco-card--publishing a.pcs-hub-eco-card__cta:hover .pcs-hub-eco-card__btn,
.pcs-hub-eco-card--publishing a.pcs-hub-eco-card__cta:focus-visible .pcs-hub-eco-card__btn {
    background: color-mix(in srgb, var(--pcs-eco-accent) 92%, #fff);
    color: #111;
    filter: none;
    border-bottom-color: #fff;
}