/*
 * Pinned-post marker for Loop Grid cards.
 *
 * ".hf-sticky" lands on the loop item through post_class() — see
 * inc/elementor/queries/hf-query-sticky-first.php — and "> div" is the white
 * card inside it. The badge is a ::after pill floated over the card image,
 * where it reads as an overlay sticker rather than competing with the teal
 * category pill sitting in the white area below.
 *
 * No .sass source: edit this file directly.
 */


body:not(.single) .hf-sticky > div {
    position: relative;

    /* Brand-tinted lift, so the pinned card sits above the rest of the row.
       color-mix() keeps the tint tied to the Elementor global colour; the plain
       rgba() line above it is the fallback for browsers without it. */
    box-shadow: 0 10px 30px rgba(27, 133, 151, .18),
                0 2px 8px rgba(27, 133, 151, .10);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--e-global-color-primary, #1B8597) 22%, transparent),
                0 2px 8px color-mix(in srgb, var(--e-global-color-primary, #1B8597) 13%, transparent);
}
body:not(.single) .hf-sticky > div::after {
    content: "Vastgemaakt";
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    padding: 6px 14px 6px 34px;
    border-radius: 9999px;
    background-color: #fff;
    color: var(--e-global-color-primary, #1B8597);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%231B8597'%3E%3Cg%20transform='translate(-1.9%201.9)%20rotate(45%2012%2012)'%3E%3Crect%20x='6.5'%20y='2'%20width='11'%20height='3'%20rx='1.5'/%3E%3Cpath%20d='M9%205h6l1.5%207.5h-9z'/%3E%3Crect%20x='5.5'%20y='12.5'%20width='13'%20height='3'%20rx='1.5'/%3E%3Cpath%20d='M11.2%2015.5h1.6L12%2022.2z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 13px center;
    background-size: 15px 15px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .01em;
    white-space: nowrap;
    font-family: Roboto, serif;
    box-shadow: 0 2px 10px rgba(27, 133, 151, .28);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--e-global-color-primary, #1B8597) 32%, transparent);
    /* The whole card is usually a link — keep the badge out of the way. */
    pointer-events: none;
}