/* [billfish_news] shortcode — news archive layout.
   Structure follows the "Billfish News" design (search + filter panel,
   card grid, editor's picks rail, pagination, mobile filter sheet);
   colors follow billfish.org (Oswald headings, #0075C1 accent). */

.bfn {
    --bfn-accent: #0075C1;
    --bfn-accent-dark: #005B96;
    --bfn-accent-tint: #E8F3FA;
    --bfn-accent-ink: #084C74;
    --bfn-text: #222;
    --bfn-muted: rgba(34, 34, 34, .55);
    --bfn-divider: rgba(34, 34, 34, .35);
    --bfn-divider-soft: rgba(34, 34, 34, .15);
    --bfn-card-shadow: 0 5px 12px rgba(34, 34, 34, .22);
    --bfn-surface: #f5f5f5;
    --bfn-bg: #fff;
    --bfn-heading: 'Oswald', sans-serif;
    color: var(--bfn-text);
    font-size: 15px;
    line-height: 1.55;
}

.bfn *, .bfn *::before, .bfn *::after { box-sizing: border-box; }
.bfn img { display: block; max-width: 100%; }
.bfn .bfn-muted { color: var(--bfn-muted); }
.bfn a { text-decoration: none; }
.bfn :focus-visible { outline: 2px solid var(--bfn-accent); outline-offset: 2px; }

/* ─── Filter bar ─────────────────────────────────────────────────────── */
.bfn-filterbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px 16px;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--bfn-divider);
    margin-bottom: 28px;
}
.bfn-sheet { display: contents; }
.bfn-sheet-head, .bfn-sheet-actions { display: none; }
.bfn-filters-toggle { display: none !important; }

.bfn-search { position: relative; grid-column: 1; grid-row: 1; }
.bfn-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .5;
    pointer-events: none;
}
.bfn-input {
    width: 100%;
    min-height: 42px;
    padding: 6px 12px 6px 38px;
    font: inherit;
    font-size: 14px;
    color: var(--bfn-text);
    background: var(--bfn-surface);
    border: 1px solid var(--bfn-divider);
    border-radius: 0;
}
.bfn-input:focus { border-color: var(--bfn-accent); outline: none; }

.bfn-selects { grid-column: 2; grid-row: 1; display: flex; gap: 10px; align-items: center; }
.bfn-select {
    appearance: none;
    -webkit-appearance: none;
    min-height: 42px;
    padding: 6px 34px 6px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--bfn-text);
    background: var(--bfn-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    border: 1px solid var(--bfn-divider);
    border-radius: 0;
    cursor: pointer;
}
.bfn-apply {
    min-height: 42px;
    padding: 6px 16px;
    font-family: var(--bfn-heading);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    background: var(--bfn-accent);
    border: 0;
    border-radius: 0;
    cursor: pointer;
}
.bfn-apply:hover { background: var(--bfn-accent-dark); }
.bfn-js .bfn-apply { display: none; }

/* Category segmented control */
.bfn-cats { grid-column: 1; grid-row: 2; display: inline-flex; border: 1px solid var(--bfn-divider); justify-self: start; }
.bfn-cat {
    padding: 8px 14px;
    font-size: 13px;
    color: var(--bfn-text);
    white-space: nowrap;
}
.bfn-cat + .bfn-cat { border-left: 1px solid var(--bfn-divider); }
.bfn-cat:hover { background: rgba(34, 34, 34, .07); }
.bfn-cat.is-active { background: var(--bfn-accent); color: #fff; }

/* Topic chips */
.bfn-topics { grid-column: 2; grid-row: 2; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bfn-topics-label {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.bfn-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    font-size: 11px;
    letter-spacing: .02em;
    border: 1px solid var(--bfn-accent);
    color: var(--bfn-accent);
    white-space: nowrap;
}
.bfn-chip:hover { background: var(--bfn-accent-tint); }
.bfn-chip.is-active { background: var(--bfn-accent-tint); color: var(--bfn-accent-ink); border-color: transparent; }

.bfn-clear { grid-column: 1 / -1; justify-self: end; font-family: var(--bfn-heading); font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--bfn-accent); }
.bfn-clear:hover { text-decoration: underline; }

.bfn-count { grid-column: 1 / -1; margin: 0; font-size: 12px; }
.bfn-count strong { color: var(--bfn-text); }

/* ─── Body layout: grid + rail ───────────────────────────────────────── */
.bfn-body { display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: start; scroll-margin-top: 120px; }
.bfn-body.bfn-no-rail { grid-template-columns: 1fr; }
.bfn-main { min-width: 0; }
.bfn-rail {
    border-left: 2px solid var(--bfn-divider);
    padding-left: 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ─── Article cards ──────────────────────────────────────────────────── */
.bfn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.bfn-card { display: flex; flex-direction: column; gap: 10px; }
.bfn-card-media {
    display: block;
    background: var(--bfn-surface);
    box-shadow: var(--bfn-card-shadow);
    margin-bottom: 4px;
}
.bfn-card-img { width: 100%; height: auto; max-height: 220px; object-fit: cover; border: 5px solid #fff; }
.bfn-card-meta { display: flex; gap: 8px; align-items: center; font-size: 11px; }
.bfn-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    letter-spacing: .02em;
}
.bfn-tag-accent { background: var(--bfn-accent-tint); color: var(--bfn-accent-ink); }
.bfn-card-title {
    margin: 0;
    font-family: var(--bfn-heading);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    border-top: 2px solid #EFEFEF;
    padding-top: 10px;
}
.bfn-card-title a { color: var(--bfn-text); }
.bfn-card-title a:hover { color: var(--bfn-accent); }
.bfn-card-body { margin: 0; font-size: 13px; }
.bfn-readmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 6px 4px;
    font-family: var(--bfn-heading);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bfn-accent);
}
.bfn-readmore:hover { color: var(--bfn-accent-dark); }
.bfn-readmore svg { display: block; }

.bfn-empty { padding: 40px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.bfn-empty p { margin: 0; }

/* ─── Pagination ─────────────────────────────────────────────────────── */
.bfn-hr { height: 2px; border: 0; background: var(--bfn-divider); margin: 32px 0 20px; }
.bfn-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bfn-page-status { font-size: 12px; }
.bfn-pages { display: flex; gap: 6px; align-items: center; }
.bfn-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    font-family: var(--bfn-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--bfn-text);
    border: 1px solid var(--bfn-divider);
}
.bfn-page:hover { background: rgba(34, 34, 34, .07); }
.bfn-page.is-current { background: var(--bfn-accent); border-color: var(--bfn-accent); color: #fff; }
.bfn-page.is-disabled { opacity: .45; }
.bfn-page-gap { padding: 0 4px; }

/* ─── Editor's picks rail ────────────────────────────────────────────── */
.bfn-rail-heading {
    margin: 0 0 16px;
    font-family: var(--bfn-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bfn-accent);
}
.bfn-picks-list { display: flex; flex-direction: column; gap: 18px; }
.bfn-pick { display: flex; gap: 12px; }
.bfn-pick + .bfn-pick { border-top: 1px solid var(--bfn-divider-soft); padding-top: 18px; }
.bfn-pick-media {
    flex: none;
    background: var(--bfn-surface);
    box-shadow: var(--bfn-card-shadow);
}
.bfn-pick-img { width: 84px; height: 84px; object-fit: cover; border: 5px solid #fff; }
.bfn-pick-lg { flex-direction: column; gap: 8px; }
.bfn-pick-lg .bfn-pick-img { width: 100%; height: 140px; }
.bfn-pick-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bfn-pick-meta { font-size: 11px; }
.bfn-pick-title {
    margin: 0;
    font-family: var(--bfn-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .02em;
}
.bfn-pick-title a { color: var(--bfn-text); }
.bfn-pick-title a:hover { color: var(--bfn-accent); }
.bfn-pick-body { margin: 0; font-size: 12.5px; }

/* ─── Buttons (sheet + empty state) ──────────────────────────────────── */
.bfn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 16px;
    font-family: var(--bfn-heading);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 0;
    cursor: pointer;
}
.bfn-btn-primary { background: var(--bfn-accent); border: 0; color: #fff; }
.bfn-btn-primary:hover { background: var(--bfn-accent-dark); }
.bfn-btn-secondary { background: transparent; border: 1px solid var(--bfn-divider); color: var(--bfn-text); }
.bfn-btn-secondary:hover { background: rgba(34, 34, 34, .07); }

/* ─── Defensive overrides for theme/builder globals ──────────────────
   Elementor kit rules (.elementor-kit-* button/input/a selectors) have
   higher specificity than the single-class selectors above, so the
   properties those globals commonly set are pinned here. */
.bfn-input {
    width: 100% !important;
    padding: 6px 12px 6px 38px !important;
    font-size: 14px !important;
    color: var(--bfn-text) !important;
    background: var(--bfn-surface) !important;
    border: 1px solid var(--bfn-divider) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.bfn-input:focus { border-color: var(--bfn-accent) !important; }
.bfn-select {
    padding: 6px 34px 6px 12px !important;
    font-size: 14px !important;
    color: var(--bfn-text) !important;
    background: var(--bfn-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center !important;
    border: 1px solid var(--bfn-divider) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.bfn-filters-toggle, .bfn-sheet-close {
    width: auto !important;
    background: transparent !important;
    color: var(--bfn-text) !important;
    border: 1px solid var(--bfn-divider) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-family: var(--bfn-heading) !important;
}
.bfn-apply, .bfn .bfn-btn-primary {
    width: auto !important;
    background: var(--bfn-accent) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-family: var(--bfn-heading) !important;
}
.bfn-apply:hover, .bfn .bfn-btn-primary:hover { background: var(--bfn-accent-dark) !important; }
.bfn .bfn-btn-secondary {
    background: transparent !important;
    color: var(--bfn-text) !important;
    border: 1px solid var(--bfn-divider) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--bfn-heading) !important;
}
/* Images: Elementor's ".elementor img { height: auto }" and theme
   .wp-post-image rules outrank one class; pin the card image geometry. */
.bfn .bfn-card-img {
    width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
    object-fit: cover !important;
    border: 5px solid #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.bfn .bfn-pick-img {
    width: 84px !important;
    height: 84px !important;
    object-fit: cover !important;
    border: 5px solid #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.bfn .bfn-pick-lg .bfn-pick-img {
    width: 100% !important;
    height: 140px !important;
}

/* Link colors: theme "a" rules can outrank one class; two classes win them back. */
.bfn .bfn-cat { color: var(--bfn-text); text-decoration: none; }
.bfn .bfn-cat.is-active { color: #fff; }
.bfn .bfn-chip { color: var(--bfn-accent); text-decoration: none; }
.bfn .bfn-chip.is-active { color: var(--bfn-accent-ink); }
.bfn .bfn-page { color: var(--bfn-text); text-decoration: none; }
.bfn .bfn-page.is-current { color: #fff; }
.bfn .bfn-card-title a, .bfn .bfn-pick-title a { color: var(--bfn-text); text-decoration: none; }
.bfn .bfn-card-title a:hover, .bfn .bfn-pick-title a:hover { color: var(--bfn-accent); }
.bfn .bfn-readmore, .bfn .bfn-clear { color: var(--bfn-accent); text-decoration: none; }
.bfn .bfn-readmore:hover { color: var(--bfn-accent-dark); }

/* ─── Tablet: 2-column grid ──────────────────────────────────────────── */
@media (max-width: 1280px) {
    .bfn-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Mobile: stacked layout, picks strip, filter sheet ──────────────── */
@media (max-width: 1000px) {
    .bfn-filterbar {
        grid-template-columns: 1fr auto;
        position: sticky;
        top: 0;
        z-index: 20;
        background: var(--bfn-bg);
        padding-top: 10px;
    }
    body.admin-bar .bfn-filterbar { top: 46px; }

    .bfn-filters-toggle {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        grid-column: 2;
        grid-row: 1;
        min-height: 44px;
        padding: 6px 14px;
        font-family: var(--bfn-heading);
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--bfn-text);
        background: transparent;
        border: 1px solid var(--bfn-divider);
        border-radius: 0;
        cursor: pointer;
    }
    .bfn-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        font-size: 11px;
        background: var(--bfn-accent);
        color: #fff;
    }
    .bfn-input { min-height: 44px; }

    /* Category control becomes a scrollable chip row */
    .bfn-cats {
        grid-column: 1 / -1;
        display: flex;
        border: 0;
        overflow-x: auto;
        gap: 8px;
        scrollbar-width: none;
    }
    .bfn-cats::-webkit-scrollbar { display: none; }
    .bfn-cat { flex: none; border: 1px solid var(--bfn-divider); padding: 9px 14px; }
    .bfn-cat + .bfn-cat { border-left: 1px solid var(--bfn-divider); }

    /* The rest of the panel becomes a modal sheet */
    .bfn-sheet {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 100000;
        flex-direction: column;
        justify-content: flex-end;
        background: rgba(20, 20, 20, .5);
    }
    .bfn.bfn-sheet-open .bfn-sheet { display: flex; }
    /* The sticky bar creates a stacking context; lift it above theme headers while the sheet is open. */
    .bfn.bfn-sheet-open .bfn-filterbar { z-index: 100000; }
    .bfn-sheet-head, .bfn-selects, .bfn-topics, .bfn-sheet-actions {
        background: var(--bfn-bg);
        padding: 0 16px;
    }
    .bfn-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 18px;
        padding-bottom: 4px;
    }
    .bfn-sheet-title {
        font-family: var(--bfn-heading);
        font-size: 20px;
        font-weight: 700;
        text-transform: uppercase;
    }
    .bfn-sheet-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        height: 44px;
        background: transparent;
        border: 1px solid var(--bfn-divider);
        border-radius: 0;
        cursor: pointer;
        color: var(--bfn-text);
    }
    .bfn-selects { flex-direction: column; align-items: stretch; padding-top: 14px; gap: 12px; }
    .bfn-select { min-height: 44px; width: 100%; }
    .bfn-topics { justify-content: flex-start; padding-top: 16px; }
    .bfn-topics-label { width: 100%; }
    .bfn-chip { padding: 10px 14px; font-size: 12px; }
    .bfn-clear { display: none; }
    .bfn-sheet-actions {
        display: flex;
        gap: 10px;
        padding-top: 18px;
        padding-bottom: 24px;
    }
    .bfn-sheet-actions .bfn-btn-secondary { flex: 1; }
    .bfn-sheet-actions .bfn-btn-primary { flex: 2; }

    /* Rail reflows: picks become a horizontal strip above the grid.
       The larger scroll margin keeps the sticky filter bar from covering
       the articles when pagination jumps to #bfn-articles. */
    .bfn-body { display: flex; flex-direction: column; align-items: stretch; scroll-margin-top: 200px; }
    .bfn-rail { display: contents; }
    .bfn-picks { order: -1; border-bottom: 2px solid var(--bfn-divider); padding-bottom: 16px; }
    .bfn-main { order: 0; }
    .bfn-picks-list { flex-direction: row; overflow-x: auto; gap: 12px; padding-bottom: 4px; }
    .bfn-pick, .bfn-pick-lg { flex: none; width: 240px; flex-direction: column; gap: 8px; }
    .bfn-pick + .bfn-pick { border-top: 0; padding-top: 0; }
    .bfn .bfn-pick-img, .bfn .bfn-pick-lg .bfn-pick-img { width: 240px !important; height: 120px !important; }
    .bfn-pick-body { display: none; }

    .bfn-page { min-width: 44px; height: 44px; }
}

@media (max-width: 700px) {
    .bfn-grid { grid-template-columns: 1fr; gap: 24px; }
    .bfn-pagination { flex-wrap: wrap; }
}