/* ================================================================
   Homepage Typography & micro-interactions
   ----------------------------------------------------------------
   Cross-widget typographic + small UI details that don't belong to
   any single widget's CSS file. Loaded after design-system.css and
   home-rhythm.css so we can rely on their tokens and section styles.

   Also intentionally overrides earlier `.bn-cat-navbtn-item` rules
   in style.css (filled chip) with the pill + hairline pattern.
   ================================================================ */

/* ── Category nav buttons (pill chips) ────────────────────────────
   Used by home-last-posts.php to switch between "Latest" and a few
   featured categories. We want them to read as quiet tabs, not loud
   filled chips, so the resting state is just a hairline outline. */
.bn-cat-navbtn {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bn-space-xs, 8px);
    margin-bottom: var(--bn-space-lg, 24px);
}

.bn-cat-navbtn-item {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 var(--bn-space-sm, 14px);
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: var(--bn-fs-body-sm, 13px);
    font-weight: 500;
    line-height: 1;
    color: var(--bn-muted, #5e5d59);
    background: transparent;
    border: 1px solid var(--bn-hairline-on-light, #f0eee6);
    border-radius: var(--bn-radius-pill, 9999px);
    text-decoration: none;
    transition: background 0.2s var(--bn-ease-out, ease),
                border-color 0.2s var(--bn-ease-out, ease),
                color 0.2s var(--bn-ease-out, ease);
}

.bn-cat-navbtn-item:hover,
.bn-cat-navbtn-item:focus-visible {
    background: var(--bn-surface-strong-light, #e8e6dc);
    border-color: var(--bn-border-strong, #d1cfc5);
    color: var(--bn-ink, #141413);
    text-decoration: none;
}

.bn-cat-navbtn-item.active {
    background: var(--bn-primary, #c96442);
    border-color: var(--bn-primary, #c96442);
    color: var(--bn-on-primary, #faf9f5);
}

.bn-cat-navbtn-item.active:hover,
.bn-cat-navbtn-item.active:focus-visible {
    background: var(--bn-primary-active, #d97757);
    border-color: var(--bn-primary-active, #d97757);
    color: var(--bn-on-primary, #faf9f5);
}

[data-bs-theme="dark"] .bn-cat-navbtn-item {
    color: var(--bn-muted-strong, #929aa5);
    border-color: var(--bn-hairline-on-dark, #2b3139);
}

[data-bs-theme="dark"] .bn-cat-navbtn-item:hover,
[data-bs-theme="dark"] .bn-cat-navbtn-item:focus-visible {
    background: var(--bn-surface-elevated-dark, #2b3139);
    border-color: var(--bn-muted, #707a8a);
    color: var(--bn-on-dark, #ffffff);
}

[data-bs-theme="dark"] .bn-cat-navbtn-item.active {
    background: var(--bn-primary, #fcd535);
    border-color: var(--bn-primary, #fcd535);
    color: var(--bn-on-primary, #181a20);
}

[data-bs-theme="dark"] .bn-cat-navbtn-item.active:hover,
[data-bs-theme="dark"] .bn-cat-navbtn-item.active:focus-visible {
    background: var(--bn-primary-active, #f0b90b);
    border-color: var(--bn-primary-active, #f0b90b);
    color: var(--bn-on-primary, #181a20);
}

/* ── Posts grid: row spacing ──────────────────────────────────────
   The parent theme renders `.posts-warp` with Bootstrap's default
   row utility — its `--bs-gutter-x/y` ends up around 1.5rem. We give
   it an explicit token-based row gap so the rhythm of the cards
   matches the section spacing of the surrounding layout. */
.posts-warp {
    row-gap: var(--bn-space-lg, 24px);
}

/* ── Loop item card (parent-theme `.post-item`) ───────────────────
   Most cards on the homepage come from the parent theme's
   template-parts/loop/item.php. We don't change the markup, only the
   visual chrome: matched corner radius, gentle hover lift, and a
   shadow token that matches our other cards. The selectors stay
   defensive (`.posts-warp .post-item`) so they don't escape to other
   pages where the same class may appear inside heavier layouts. */
.posts-warp .post-item,
.bn-scroll-card-wrap .post-item {
    border-radius: var(--bn-radius-xl, 12px);
    overflow: hidden;
    transition: transform 0.2s var(--bn-ease-out, ease),
                box-shadow 0.2s var(--bn-ease-out, ease);
    /* Wave 7.3.16: will-change moved to :hover (see catbox-card pattern). */
}

.posts-warp .post-item:hover,
.bn-scroll-card-wrap .post-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--bn-shadow-subtle, 0 4px 24px rgba(0,0,0,0.05));
    will-change: transform;
}

/* ── More-link arrow micro-interaction ────────────────────────────
   Mirrored from home-rhythm.css so this rule is self-contained when
   inspected as a typography concern. The two declarations are
   identical and idempotent — last-write-wins, no specificity battle. */
.bn-section-more {
    text-decoration: none;
}

.bn-section-more svg {
    transition: transform 0.2s var(--bn-ease-out, ease);
}

.bn-section-more:hover svg,
.bn-section-more:focus-visible svg {
    transform: translateX(3px);
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .posts-warp .post-item,
    .bn-scroll-card-wrap .post-item {
        transition: none;
        transform: none !important;
    }
    .bn-cat-navbtn-item {
        transition: none;
    }
    .bn-section-more svg {
        transition: none;
    }
}

/* ── Mobile tightening ──────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .bn-cat-navbtn {
        gap: 6px;
        margin-bottom: var(--bn-space-md, 16px);
    }
    .bn-cat-navbtn-item {
        height: 28px;
        font-size: 12px;
        padding: 0 12px;
    }
    .posts-warp {
        row-gap: var(--bn-space-md, 16px);
    }
}