/* The Donate page and the Donor Hall of Fame. Colours come from the theme
   tokens only; build.js fails on a colour literal outside themes/. */

.hof-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2 220px;
    column-gap: 24px;
}

.hof-list li {
    break-inside: avoid;
    padding: 4px 0;
    font-size: 17px;
}

.hof-anon { color: var(--text-secondary); font-style: italic; }

.founder-star {
    color: var(--theme-primary);
    cursor: help;
    position: relative;
}

/* The native title tooltip is the hover popup on a desktop. Touch screens
   never show it, so there a tap (which focuses the star) draws this one. */
@media (hover: none) {
.founder-star[title]:focus::after {
    content: 'Founder';
    position: absolute;
    left: 50%;
    bottom: 130%;
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--bg-button);
    color: var(--text-primary);
    font-size: 12px;
    font-style: normal;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}
}

/* Amount picker. Outlined, never a filled red: black text on the theme red
   was hard to read (Arthur, 2026-09-28). The chosen amount gets a heavier
   border and the hover fill. */
.donate-amounts {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.donate-amount input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.donate-amount span {
    display: inline-block;
    min-width: 72px;
    padding: 10px 18px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    border: 2px solid var(--theme-primary);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
}

.donate-amount input:checked + span {
    border-width: 4px;
    padding: 8px 16px;
    background: var(--bg-hover);
}

.donate-amount input:focus-visible + span {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

.donate-monthly {
    display: block;
    margin-bottom: 14px;
    cursor: pointer;
}

/* Three across on a phone, rather than $10 wrapping onto a line of its own. */
@media screen and (max-width: 480px) {
    .donate-amounts { gap: 8px; flex-wrap: nowrap; }
    .donate-amount { flex: 1; }
    .donate-amount span { display: block; min-width: 0; padding: 10px 0; }
    .donate-amount input:checked + span { padding: 8px 0; }
}