/*
 * .ppw26-button appears on real <button>/<a> elements and as a wrapper
 * span around edit_post_link()/the_shortlink() output — rules below cover
 * both shapes.
 */

.ppw26-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25em;
    background-image: var(--gradient-accent);
    border-radius: 0.5em;
    box-shadow: var(--shadow-elevated);
    transition: filter var(--transition-fast), transform var(--transition-fast);
}

.ppw26-button:hover {
    filter: brightness(1.25);
}

.ppw26-button:active {
    filter: brightness(0.92);
    transform: translateY(1px);
}

/* The ring must read against the button's own accent-colored background,
   not the page background, so it borrows the button's own text color. */
.ppw26-button:focus-visible,
.ppw26-button a:focus-visible {
    outline-color: var(--crust);
}

button.ppw26-button {
    font-size: 1em;
    font-weight: 600;
    color: var(--crust);
    width: 2.5em;
    height: 2.5em;
    border: none;
}

@media (min-width: 1250px) {
    button.ppw26-button {
        width: initial;
        height: initial;
        padding: 0.75em;
    }
}

.ppw26-button a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    gap: 0.3em;
    font-size: 1.1em;
    font-weight: 600;
    text-decoration: none;
    color: var(--crust);
    padding: 0.75em 0.75em;
}

.ppw26-button i {
    color: var(--crust);
}