/* The Ko-fi button.
 *
 * Shape only, and deliberately: no font, no size, no colour beyond the two the block itself
 * decides. The background and the ink are an inline style, because they are values somebody typed
 * into a settings box and a class cannot carry one; the typeface and the weight belong to whatever
 * theme is running, and a plugin that set them would be a plugin overruling a design it has never
 * seen.
 *
 * That split matters here more than usual. This file is put in the head *after* the theme's own
 * stylesheet, so on any property both of them set, this one wins. Setting only the properties a
 * theme has no opinion about is what keeps that from being a fight.
 *
 * Loaded on the pages with a button on them and no others - see `pageAssets()`. */

.kofi-description { margin: 0 0 12px; }
/* the description is markdown, so what is inside it arrives with paragraph margins of its own */
.kofi-description > :first-child { margin-top: 0; }
.kofi-description > :last-child { margin-bottom: 0; }

.kofi-button {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 18px; border-radius: 999px;
    text-decoration: none; line-height: 1;
}
/* `color: inherit` on the visited state, or a browser's purple wins over an inline colour on a
   link somebody has already followed - and the ink was chosen to be readable on the background */
.kofi-button, .kofi-button:visited { color: inherit; }
.kofi-button:hover { filter: brightness(1.1); }

.kofi-cup { width: 22px; height: auto; display: block; }