/**
 * follow-archetype.css — floating Follow/Following toggle rendered by
 * assets/js/follow-archetype.js on archetype pages.
 *
 * Positioned top-right to mirror each page's own top-left home button
 * without colliding with it; nudged down from the very corner (top: 80px
 * rather than 20px) so it also clears the rare page-specific button that
 * already claims top-right (e.g. Angelechy's theme toggle).
 */

.follow-archetype-btn {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 950;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 999px;
    color: #fbbf24;
    font-weight: 600;
    font-size: 0.85rem;
    font-family: inherit;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: all 0.25s ease;
}

.follow-archetype-btn:hover {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(251, 191, 36, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.follow-archetype-btn.is-following {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(217, 119, 6, 0.25));
    border-color: rgba(251, 191, 36, 0.8);
    color: #fde68a;
}

.follow-archetype-btn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

@media (max-width: 640px) {
    .follow-archetype-btn {
        top: auto;
        bottom: 4.75rem;
        right: 12px;
        padding: 0.5rem 0.7rem;
        font-size: 0.8rem;
    }

    .follow-archetype-btn span {
        display: none;
    }
}