/* ============================================
   HEADER FAIR BADGE (desktop only)
   ============================================ */
.fair-badge {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 176px;
    height: 44px;
    border-radius: 6px;
    overflow: visible;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}

.fair-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

/* shine sweep across the image every 2s */
.fair-badge__shine {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.fair-badge__shine::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -40%;
    width: 46%;
    height: 220%;
    transform: translateX(-120%) rotate(22deg);
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .35) 45%,
            rgba(255, 240, 200, .75) 50%,
            rgba(255, 255, 255, .35) 55%,
            rgba(255, 255, 255, 0) 100%);
    animation: fairShine 2s ease-in-out infinite;
}

@keyframes fairShine {
    0% {
        transform: translateX(-120%) rotate(22deg);
    }

    55%,
    100% {
        transform: translateX(420%) rotate(22deg);
    }
}

/* subtle glow breathing on the frame, in sync with the sweep */
.fair-badge::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 7px;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(184, 148, 47, 0);
    animation: fairGlow 2s ease-in-out infinite;
}

@keyframes fairGlow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(184, 148, 47, 0);
    }

    30% {
        box-shadow: 0 0 14px 2px rgba(184, 148, 47, .55);
    }
}

a.fair-badge:hover {
    transform: translateY(-1px);
}

a.fair-badge:hover img {
    box-shadow: 0 6px 18px rgba(184, 148, 47, .35);
    border-color: rgba(184, 148, 47, .6);
}

/* countdown pill sitting on the top edge of the image */
.fair-badge__pill {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--color-primary, #b8942f);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: .04em;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    font-variant-numeric: tabular-nums;
}

.fair-badge__time {
    font-variant-numeric: tabular-nums;
}

/* live: pulsing dot */
.fair-badge.is-live .fair-badge__pill {
    background: #111;
    color: var(--color-primary, #b8942f);
    border: 1px solid var(--color-primary, #b8942f);
    text-transform: uppercase;
}

.fair-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary, #b8942f);
    box-shadow: 0 0 0 0 rgba(184, 148, 47, .7);
    animation: fairPulse 1.6s ease-out infinite;
}

@keyframes fairPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(184, 148, 47, .7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(184, 148, 47, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(184, 148, 47, 0);
    }
}

/* scrolled (light) header: keep the pill readable */
.site-header.scrolled .fair-badge img {
    border-color: rgba(0, 0, 0, .1);
}

/* laptops (1366-1439): compact so the menu keeps its spacing */
@media (max-width: 1439.98px) {
    .fair-badge {
        width: 144px;
        height: 36px;
    }

    .fair-badge__pill {
        top: -9px;
        font-size: 9px;
        line-height: 12px;
        padding: 2px 7px;
    }
}

/* below this the header row has no room: hidden (mobile included) */
@media (max-width: 1365.98px) {
    .fair-badge {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .fair-badge__dot,
    .fair-badge__shine::before,
    .fair-badge::after {
        animation: none;
    }
}