/**
 * Contest Link Shield -- default "visited contest" treatment.
 *
 * Deliberately minimal and language-neutral (the badge is a checkmark, not text, so the
 * same stylesheet serves dailycontests.ca and prixdujour.ca). Retheme without touching
 * this file: override the custom properties below, or style the same classes from
 * Breakdance global CSS -- those rules will win on specificity or source order.
 *
 * Hooks painted by visited.js:
 *   .cls-visited                on a card (.ee-post) or a bare /r/ anchor (Enter button)
 *   .cls-visited-today          added alongside when the last click was today
 *   [data-cls-days="N"]         days since last click (0 = today) -- for advanced styling
 *   body.cls-visited-page(-today)  on a visited contest's own single page (no default
 *                                  styling; hook for a Breakdance-built notice)
 */

/* ── Cards ─────────────────────────────────────────────────────────────────── */

.ee-post.cls-visited {
    position: relative;
}

/* Corner badge. pointer-events:none keeps the whole card clickable through it.
   Two ways to change the mark itself:
     character/emoji:  --cls-visited-mark: "★";
     image or SVG:     --cls-visited-mark: "";  (empty the character)
                       --cls-visited-badge-image: url('/wp-content/uploads/check.svg');
   The image is a background (not content:url) because pseudo-element content images
   render at intrinsic size and refuse to scale; a background obeys
   --cls-visited-badge-image-size. Add --cls-visited-badge-bg: transparent to drop
   the circle behind it. */
.ee-post.cls-visited::after {
    content: var(--cls-visited-mark, "\2713");
    position: absolute;
    top: var(--cls-visited-badge-top, 10px);
    right: var(--cls-visited-badge-right, 10px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cls-visited-badge-size, 26px);
    height: var(--cls-visited-badge-size, 26px);
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
    background-color: var(--cls-visited-badge-bg, rgba(17, 17, 17, 0.78));
    background-image: var(--cls-visited-badge-image, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--cls-visited-badge-image-size, 62%);
    color: var(--cls-visited-badge-color, #fff);
    opacity: var(--cls-visited-badge-opacity, 1);
    pointer-events: none;
}

/* Mute the thumbnail, not the whole card -- an opacity on the card would dim the badge
   with it. The transition makes the instant mark-on-click feel deliberate. */
.ee-post.cls-visited img {
    filter: var(--cls-visited-img-filter, grayscale(0.55) opacity(0.85));
    transition: filter 0.2s ease;
}

/* ── Bare /r/ anchors (the single-page Enter button) ──────────────────────────
   Cards never receive the class on their anchor (it goes on the .ee-post wrapper),
   so a.cls-visited only ever matches standalone shielded links.

   Deliberately NO opacity/filter default here: the live Enter buttons carry a
   Breakdance entrance animation whose forwards-fill holds opacity, and animations
   outrank stylesheet declarations in the cascade -- a dim rule would silently lose
   (verified on the live site). The appended checkmark is the shipped signal; any
   richer "already clicked" look belongs in Breakdance, coordinated with its own
   animation presets. */

/* Breakdance buttons: append the mark inside the label span. */
a.cls-visited .button-atom__text::after {
    content: " \2713";
}