/*
 * feed.css — shared styling for the modern News + Blog feeds.
 * Rendered markup comes from views/feed.twig; behavior from js/feed-search.js.
 *
 * Tokens mirror css/job-openings.css so the feeds match the jobs pages (and the
 * header-and-menu-revision navy/cyan palette). Keep these in sync with that file.
 * NOTE: style.css sets html { font-size: 62.5% } so 1rem = 10px — always use px here.
 *
 * Design convention (see project plan): a filter/toolbar-above-a-results-list page
 * always sizes its toolbar to exactly the width of its results, left-aligned with
 * the page's <h1> — never narrower, never wider, never centered. `.feed-page`
 * mirrors `.job-openings-page`'s own inset (padding: 24px 20px 48px) so News/Blog
 * match the Jobs page's effective content width too.
 */

:root {
    --feed-navy:         #002b5c;
    --feed-cyan:         #00ADEF;
    --feed-page-bg:      #F8FAFC;
    --feed-card-bg:      #ffffff;
    --feed-border:       #e2e8f0;
    --feed-border-hover: #00ADEF;
    --feed-text:         #1e293b;
    --feed-text-muted:   #64748b;
    --feed-text-light:   #94a3b8;
}

.feed-page {
    padding: 24px 20px 48px;
}

/* Bare heading inside .feed-page has no theme class, so without this it falls back
   to the site-wide generic <h1> style (31px/400/lighter blue) instead of matching
   .job-openings-header-left h1 — which made the description below it read as
   undersized by comparison, even though the description itself already matches
   the Jobs page's paragraph size exactly. */
.feed-page > h1 {
    font-size: 36px;
    font-weight: 800;
    color: var(--feed-navy);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 12px;
}

/* Matches .job-openings-header-left p exactly. No max-width: on the Jobs page
   the paragraph is naturally capped by sharing a flex row with the badges next
   to it, but here it's the only thing on its line, so a fixed max-width just
   forced an early wrap that read as too narrow. */
.feed-page-description {
    color: var(--feed-text-muted);
    font-size: 17px;
    font-weight: 500;
    margin: 0 0 24px;
}

.feed-wrap {
    color: var(--feed-text);
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────────
   Structure mirrors the jobs page exactly: `.feed-toolbar` is a spacing-only
   wrapper (like `.job-filter-section`) — the header row sits unboxed above the
   card, and only `.feed-toolbar-bar` (like `.job-filter-bar`) carries the actual
   border/background/shadow. ── */
.feed-toolbar {
    margin-bottom: 20px;
}

.feed-toolbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 2px;
    min-height: 24px;
}

/* Sized to match .feed-count ("Showing N items") rather than the smaller/bolder
   .job-filter-section-label it was cloned from — the two sit far apart on the
   page (top of the toolbar vs. above the list) so matching them reads as one
   consistent "section label" style, unlike on the Jobs page where the two
   labels sit close enough together that their size difference doesn't stand out. */
.feed-toolbar-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0, 43, 92, 0.6);
}

.feed-toolbar-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    padding: 20px 24px;
    background: var(--feed-card-bg);
    border: 1px solid var(--feed-border);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Groups Software + Fonts together so they can share a row independently of
   Search at intermediate widths — see the responsive rules below. */
.feed-toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* basis 460px = 2×220px min-width dropdowns + gap, so both fit on one line
       before this is asked to shrink — see .feed-search-field for why basis:0%
       (the shorthand default) wasn't enough. */
    flex: 1 1 460px;
}

.feed-field {
    display: flex;
    flex-direction: column;
}

/* JS hides a filter field (label + control) when it has <2 sources. The display:flex
   above would otherwise beat the browser's default [hidden]{display:none}. */
.feed-field[hidden] {
    display: none;
}

.feed-field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--feed-text-muted);
    margin-bottom: 6px;
}

.feed-search-field {
    /* Explicit flex-basis (not the shorthand's implied 0%) so this and
       .feed-toolbar-filters each reserve real space before growing — with
       basis:0% the 2:1 ratio alone left .feed-toolbar-filters only ~300px on a
       1280px screen, not enough for two 220px-min-width dropdowns side by side,
       so they wrapped onto separate lines even at full desktop width. */
    flex: 2 1 300px;
    min-width: 200px;
}

.feed-search-inner {
    position: relative;
}

.feed-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--feed-text-light);
    font-size: 14px;
    pointer-events: none;
}

.feed-search {
    width: 100%;
    padding: 9px 12px 9px 36px;
    border: 1px solid var(--feed-border);
    border-radius: 10px;
    font-size: 15px;
    color: var(--feed-text);
    background: var(--feed-card-bg);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.feed-search:focus {
    outline: none;
    border-color: var(--feed-cyan);
    box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}

/* Software / Fonts filters (multi-select dropdowns, JS-built) */
.feed-filter {
    position: relative;
    min-width: 220px;
    flex: 1;
}

.feed-filter-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    background: var(--feed-card-bg);
    border: 1px solid var(--feed-border);
    border-radius: 10px;
    font-size: 15px;
    color: var(--feed-text);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.feed-filter-btn:hover,
.feed-filter-btn:focus-visible,
.feed-filter.is-open .feed-filter-btn {
    border-color: var(--feed-cyan);
}

.feed-filter.is-open .feed-filter-btn {
    box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}

.feed-filter-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}

.feed-filter-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-filter-chevron {
    flex: 0 0 auto;
    border: solid var(--feed-text-muted);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    margin-top: -3px;
}

.feed-filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    /* Without a cap, a long option name (e.g. "Audio Project Manager") can grow
       the panel wide enough to spill over the neighboring Software/Fonts field —
       long names wrap onto a second line instead. */
    max-width: 320px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--feed-card-bg);
    border: 1px solid var(--feed-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 100;
    padding: 6px;
}

.feed-filter.is-open .feed-filter-panel {
    display: block;
    animation: feedPanelIn 0.12s ease;
}

@keyframes feedPanelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.feed-filter-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--feed-text-muted);
    transition: background 0.1s;
}

.feed-filter-option:hover {
    background: var(--feed-page-bg);
}

.feed-filter-option.is-selected {
    color: var(--feed-navy);
    font-weight: 600;
}

.feed-filter-check {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 4px;
    border: 1.5px solid var(--feed-border);
    background: var(--feed-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: transparent;
}

.feed-filter-option.is-selected .feed-filter-check {
    background: var(--feed-cyan);
    border-color: var(--feed-cyan);
    color: #fff;
}

/* ── Results bar (count + view toggle) — sits above the list, like the jobs page ── */
.feed-resultsbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 2px;
    margin-bottom: 16px;
}

.feed-count {
    /* Matches .job-results-count exactly: "SHOWING N ITEMS" via text-transform,
       not typed uppercase, so the noun/plural can stay normal case in markup. */
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--feed-text-muted);
}

.feed-count-num {
    color: var(--feed-navy);
}

.feed-view {
    display: flex;
    align-items: center;
    gap: 10px;
}

.feed-view-label {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0, 43, 92, 0.6);
}

/* View toggle — segmented control with icon + text */
.feed-view-toggle {
    display: inline-flex;
    border: 1px solid var(--feed-border);
    border-radius: 10px;
    overflow: hidden;
}

.feed-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 0;
    background: var(--feed-card-bg);
    color: var(--feed-text-muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

/* Custom SVG icons (not a Font Awesome glyph) — two thick, spaced bars for
   "Comfortable" (roomy rows), four thin, tight bars for "Compact" (dense rows);
   mirrors the row density itself. SVG rather than CSS div bars: a 1-2px div at a
   fractional size can't land cleanly on a device pixel at every zoom level and
   rendered blurry/uneven; an SVG's vector coordinates re-rasterize cleanly at any
   zoom, so this doesn't distort. */
.feed-view-icon {
    width: 15px;
    height: 14px;
    flex-shrink: 0;
}

/* Hidden below 759px (see responsive block) — the SVG icon alone identifies the
   button there; aria-label on the button keeps it accessible either way. */
.feed-view-btn-label {
    white-space: nowrap;
}

.feed-view-btn + .feed-view-btn {
    border-left: 1px solid var(--feed-border);
}

.feed-view-btn:hover,
.feed-view-btn:focus-visible {
    color: var(--feed-navy);
}

.feed-view-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}

.feed-view-btn.is-active {
    background: var(--feed-navy);
    color: #fff;
}

/* Clear button — matches .job-clear-all-btn exactly */
.feed-clear {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    color: var(--feed-cyan);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}

.feed-clear[hidden] {
    display: none;
}

.feed-clear:hover,
.feed-clear:focus-visible {
    text-decoration: underline;
}

.feed-clear:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}

/* ── Feed list ───────────────────────────────────────────────────────────── */
.feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.feed-month {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--feed-text-muted);
    margin: 18px 0 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--feed-border);
}

.feed-month:first-child {
    margin-top: 0;
}

.feed-item {
    position: relative; /* anchor for the stretched-link overlay below */
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 20px 22px;
    background: var(--feed-card-bg);
    border: 1px solid var(--feed-border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
}

.feed-item:hover {
    border-color: var(--feed-border-hover);
    box-shadow: 0 8px 28px rgba(0, 43, 92, 0.1);
    transform: translateY(-2px);
}

.feed-logo {
    flex: 0 0 auto;
}

.feed-logo img,
.feed-logo .custom-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    object-position: left center;
}

.feed-body {
    flex: 1 1 auto;
    min-width: 0;
}

.feed-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 4px;
}

/* Stretched-link pattern (same idea as .job-card-btn::after): a dedicated
   invisible overlay link covers the whole card so anywhere on the row
   navigates to the article — the primary action, like clicking a job card.
   It's a real sibling element rather than a pseudo-element on the title link
   because compact view puts `overflow: hidden` on .feed-title (for the
   ellipsis truncation), which would otherwise clip an inset:0 overlay down to
   just the title's own box. aria-hidden + tabindex="-1": the title link below
   already provides the accessible/keyboard route to the same destination, so
   this stays out of the tab order and screen-reader tree.
   The logo link and source name link to a different destination (the
   subsite), and the title/read-more links are worth keeping directly
   clickable too, so all four sit above the overlay via z-index — same trick
   job-card.css uses to keep its title/tags clickable over its own stretched
   link. */
.feed-item-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.feed-logo a,
.feed-source,
.feed-title a,
.feed-more {
    position: relative;
    z-index: 2;
}

.feed-source {
    font-size: 13px;
    font-weight: 700;
    color: var(--feed-navy);
    text-decoration: none;
}

.feed-source:hover {
    color: var(--feed-cyan);
}

.feed-date {
    font-size: 12px;
    color: var(--feed-text-light);
}

.feed-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
}

.feed-title a {
    color: var(--feed-navy);
    text-decoration: none;
}

.feed-title a:hover {
    color: var(--feed-cyan);
}

.feed-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: var(--feed-text-muted);
    margin: 0;
}

.feed-more {
    color: var(--feed-cyan);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.feed-more:hover {
    text-decoration: underline;
}

/* ── Compact view ────────────────────────────────────────────────────────── */
/* One scannable line per post: [logo] Title …………… Source · Date.
   No excerpt (that's what Normal is for), no card chrome — a dense list.
   Per-row bottom borders (not an outer container border) so a filtered-to-empty
   list leaves nothing behind. */
.feed[data-view="compact"] {
    gap: 0;
}

.feed[data-view="compact"] .feed-item {
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--feed-border);
    border-radius: 0;
    box-shadow: none;
    gap: 12px;
    align-items: center;
}

.feed[data-view="compact"] .feed-item:hover {
    transform: none;
    box-shadow: none;
    background: var(--feed-page-bg);
}

.feed[data-view="compact"] .feed-logo img,
.feed[data-view="compact"] .feed-logo .custom-logo {
    width: 26px;
    height: 26px;
}

/* Body becomes a single baseline-aligned row: title grows and truncates,
   the meta (source + date) sits at the right. */
.feed[data-view="compact"] .feed-body {
    display: flex;
    align-items: baseline;
    gap: 16px;
    min-width: 0;
}

.feed[data-view="compact"] .feed-title {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed[data-view="compact"] .feed-meta {
    order: 2;
    flex: 0 0 auto;
    margin: 0;
    gap: 10px;
    font-size: 12px;
}

.feed[data-view="compact"] .feed-source {
    font-size: 12px;
}

.feed[data-view="compact"] .feed-excerpt {
    display: none;
}

/* Compact month headers act as light section dividers within the dense list.
   margin-top (not padding) opens clear air above a new month — enough to read as
   "new section" without eating too much space in a view whose point is density;
   the label itself stays snug against its border-bottom. */
.feed[data-view="compact"] .feed-month {
    margin: 24px 0 0;
    padding: 6px 12px;
    font-size: 12px;
    border-bottom: 1px solid var(--feed-border);
}

.feed[data-view="compact"] .feed-month:first-child {
    margin-top: 0;
}

/* ── State: window-hidden (older) + filtering ────────────────────────────── */
.feed-item.feed-hidden,
.feed-month.feed-hidden {
    display: none;
}

.feed.is-filtering .feed-item,
.feed.is-filtering .feed-month {
    display: none;
}

.feed.is-filtering .feed-item.is-match {
    display: flex;
}

.feed-load-older-wrap {
    text-align: center;
    margin-top: 20px;
}

.feed-load-older {
    padding: 12px 32px;
    border: 1px solid var(--feed-border);
    border-radius: 12px;
    background: var(--feed-card-bg);
    color: var(--feed-navy);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.feed-load-older:hover,
.feed-load-older:focus-visible {
    border-color: var(--feed-cyan);
    box-shadow: 0 8px 28px rgba(0, 43, 92, 0.1);
    transform: translateY(-2px);
}

.feed-load-older:focus-visible {
    outline: none;
}

.feed-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--feed-text-muted);
    font-size: 16px;
}

/* ── Responsive — mirrors job-openings.css's breakpoints and rules exactly ──── */

/* Tablet (760px–991px): Search full-width on row 1; Software + Fonts share row 2,
   same as Jobs' three dropdowns sharing one row while Keywords sits alone above. */
@media (min-width: 760px) and (max-width: 991px) {
    .feed-toolbar-bar {
        flex-wrap: wrap;
        gap: 14px;
    }

    .feed-search-field {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .feed-toolbar-filters {
        flex: none;
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        gap: 14px;
    }

    .feed-filter {
        flex: 1;
        min-width: 0;
    }
}

/* Mobile (theme's custom xs breakpoint is 759px): everything stacks in one column. */
@media (max-width: 759px) {
    .feed-page {
        padding: 32px 20px 48px;
    }

    .feed-toolbar {
        margin-bottom: 32px;
    }

    .feed-toolbar-bar {
        flex-direction: column;
        gap: 14px;
    }

    .feed-search-field,
    .feed-toolbar-filters {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .feed-toolbar-filters {
        flex-direction: column;
        gap: 14px;
    }

    .feed-filter {
        min-width: 0;
        width: 100%;
    }

    .feed-item {
        padding: 16px;
        gap: 14px;
    }

    .feed-logo img,
    .feed-logo .custom-logo {
        width: 44px;
        height: 44px;
    }

    .feed-title {
        font-size: 16px;
    }

    /* View toggle reduces to icon-only — aria-label on the button (in feed.twig)
       keeps it accessible once the visible text label is hidden. */
    .feed-view-btn-label {
        display: none;
    }

    .feed-view-btn {
        padding: 9px 12px;
    }
}