/* ─────────────────────────────────────────────────────────────
   JTL Blog Category Filter
   Colours: Navy #02316c  |  Sky #07b2e0
   ───────────────────────────────────────────────────────────── */

:root {
    --jtl-navy:        #02316c;
    --jtl-sky:         #07b2e0;
    --jtl-sky-light:   #e8f7fd;
    --jtl-sky-mid:     #b3e5f7;
    --jtl-white:       #ffffff;
    --jtl-grey-light:  #f4f6f9;
    --jtl-text:        #1a2a3a;
    --jtl-radius:      40px;
    --jtl-transition:  0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Wrapper ── */
.jtl-filter-wrap {
    width: 100%;
}

/* ── Filter bar ── */
.jtl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
	justify-content: center; /* add this */
}

/* ── Individual item ── */
.jtl-filter-item {
    margin: 0;
    padding: 0;
}

/* ── Button / link ── */
.jtl-filter-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 26px;
    border-radius: var(--jtl-radius);
    background: #4D6E98;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    cursor: pointer;
    transition:
        background var(--jtl-transition),
        color var(--jtl-transition),
        border-color var(--jtl-transition),
        transform var(--jtl-transition),
        box-shadow var(--jtl-transition);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

/* Subtle shimmer on hover */
.jtl-filter-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.18) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    transition: transform 0.45s ease;
}

.jtl-filter-btn:hover::after {
    transform: translateX(100%);
}

/* Hover state */
.jtl-filter-btn:hover {
    background: #00306C;
    color: var(--jtl-white);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(2, 49, 108, 0.22);
    text-decoration: none;
}

/* Active / selected state */
.jtl-filter-btn.is-active {
    background: #00306C;
    color: #fff;
}

.jtl-filter-btn.is-active:hover {
    background: var(--jtl-navy);
    box-shadow: 0 6px 18px rgba(2, 49, 108, 0.28);
}

/* Focus ring for accessibility */
.jtl-filter-btn:focus-visible {
    outline: 3px solid var(--jtl-sky);
    outline-offset: 3px;
}

/* ── Loading state (added via JS during page transition) ── */
.jtl-filter-btn.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ── Stagger-in animation on page load ── */
@keyframes jtlFilterFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.jtl-filter-item {
    opacity: 0;
    animation: jtlFilterFadeUp 0.35s ease forwards;
}

/* Stagger each pill */
.jtl-filter-item:nth-child(1)  { animation-delay: 0.05s; }
.jtl-filter-item:nth-child(2)  { animation-delay: 0.10s; }
.jtl-filter-item:nth-child(3)  { animation-delay: 0.15s; }
.jtl-filter-item:nth-child(4)  { animation-delay: 0.20s; }
.jtl-filter-item:nth-child(5)  { animation-delay: 0.25s; }
.jtl-filter-item:nth-child(6)  { animation-delay: 0.30s; }
.jtl-filter-item:nth-child(7)  { animation-delay: 0.35s; }
.jtl-filter-item:nth-child(8)  { animation-delay: 0.40s; }
.jtl-filter-item:nth-child(9)  { animation-delay: 0.45s; }
.jtl-filter-item:nth-child(10) { animation-delay: 0.50s; }

/* ── Responsive ── */
@media ( max-width: 768px ) {
    .jtl-filter-btn {
        padding: 8px 16px;
        font-size: 0.8125rem;
    }

    .jtl-filter-bar {
        gap: 8px;
    }
}

@media ( max-width: 480px ) {
    .jtl-filter-bar {
        gap: 6px;
    }

    .jtl-filter-btn {
        padding: 7px 13px;
        font-size: 0.75rem;
    }
}