/* like.css — Like-Button in der Kopfzeile (henrywenk / williamwenk)
   Liegt in www/css/like.css. Der Button sitzt im .logo-Container neben
   der Social-Bar und uebernimmt deren Farbe, damit der Light/Dark-Toggle
   ihn ohne Zusatzregel mitnimmt. */

.wm-like {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    padding: 4px 9px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .18s ease, color .18s ease;
}

.wm-like:hover,
.wm-like:focus-visible {
    background: rgba(255, 255, 255, .14);
}

html.light .wm-like:hover,
html.light .wm-like:focus-visible {
    background: rgba(0, 0, 0, .08);
}

.wm-like:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.wm-like.is-busy {
    opacity: .6;
    cursor: default;
}

.wm-like__icon {
    width: 17px;
    height: 17px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
    transition: fill .18s ease, stroke .18s ease, transform .18s ease;
}

.wm-like.is-liked {
    color: #e0245e;
}

html.light .wm-like.is-liked {
    color: #c81e50 !important;
}

.wm-like.is-liked .wm-like__icon {
    fill: currentColor;
    stroke: currentColor;
}

.wm-like__count {
    font-variant-numeric: tabular-nums;
    min-width: 1.1em;
    text-align: left;
    font-size: 13px;
    opacity: .9;
}

/* Einziger Moment mit Bewegung: die Bestaetigung des Klicks */
.wm-like.is-pop .wm-like__icon {
    animation: wm-like-pop .34s ease;
}

@keyframes wm-like-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.32); }
    100% { transform: scale(1); }
}

@media (max-width: 768px) {
    .wm-like { padding: 4px 7px; font-size: 13px; }
    .wm-like__icon { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .wm-like,
    .wm-like__icon { transition: none; }
    .wm-like.is-pop .wm-like__icon { animation: none; }
}