/*
 * CTA pill — renders in two placements:
 *   .stickybar--fixed : pinned to viewport bottom on every page except
 *                       when the hero variant is on-screen.
 *   .stickybar--hero  : absolute, sits at the bottom of the homepage hero
 *                       as its primary CTA block.
 *
 * Matches the Figma "Sticky Bottom Bar" component (11522:22472 and the
 * hero variant 11644:3733).
 */

.redesign .stickybar {
    pointer-events: none;
    will-change: opacity, transform;
}

/* ── Fixed variant ──────────────────────────────────────────────────── *
 * Transitions are declared directly on the base + `.is-hidden` rules.
 * CSS transitions only fire on *property changes*, so the initial
 * paint (which has `.is-hidden` applied by the server and therefore
 * starts in the hidden state) does NOT trigger any animation — no
 * flash. Only subsequent class toggles trigger a transition.
 *
 * Explicit `translateY(0) scale(1)` on the visible state so the
 * browser interpolates each transform component cleanly between the
 * two states (same shape, different values), instead of relying on
 * the browser padding missing functions with identity values.
 */
.redesign .stickybar--fixed {
    position: fixed;
    left: 50%;
    bottom: 24px;
    width: calc(100% - 48px);
    max-width: 1312px;
    z-index: 40;
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    transition:
        opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.redesign .stickybar--fixed.is-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(100%) scale(0.9);
    pointer-events: none;
    transition:
        opacity 240ms cubic-bezier(0.4, 0, 1, 1),
        transform 240ms cubic-bezier(0.4, 0, 1, 1);
}

/* ── Hero variant ───────────────────────────────────────────────────── */
.redesign .stickybar--hero {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    width: calc(100% - 160px);   /* ~80 px margin each side */
    max-width: 1120px;            /* 85 % of the Figma 1312 px */
    z-index: 2;      /* above scrim (-1) and video (-2), below nav (50) */
    opacity: 1;
}

/* All four chips in the hero pill share the same vertical footprint.
 * Padding 14 × 20 px → ~48 px tall with 16 px Manrope line-height. */
.redesign .stickybar--hero .stickybar__pill {
    gap: 12px;
}

.redesign .stickybar--hero .stickybar__helpline,
.redesign .stickybar--hero .stickybar__search {
    padding: 14px 20px;
    font-size: 15px;             /* match button font so all chips line up */
}

.redesign .stickybar--hero .stickybar__search { min-width: 260px; }

.redesign .stickybar--hero .stickybar__helpline svg,
.redesign .stickybar--hero .stickybar__search svg {
    width: 18px;
    height: 18px;
}

.redesign .stickybar--hero .stickybar__search input {
    font-size: 15px;
}

/* Hero-pill buttons: match chip height exactly */
.redesign .stickybar--hero .btn {
    padding: 14px 24px;
    font-size: 15px;
}

/* ── Shared pill styling ───────────────────────────────────────────── */
/* Figma node 11372:34768 structure — 3 equal-ish columns:
 *   [1] helpline chip (flex 1, left-aligned)
 *   [2] action buttons (shrink-0, centered)
 *   [3] search pill (flex 1, right-aligned)
 * The hero variant has no outer pill bg; each chip has its own glass fill.
 * The fixed variant (other pages) uses a solid sea-green wrapper. */
.redesign .stickybar__pill {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-radius: var(--radius-full);
    pointer-events: auto;
}

.redesign .stickybar__col {
    display: flex;
    align-items: center;
}

.redesign .stickybar__col--left  { flex: 1 0 0; justify-content: flex-start; min-width: 0; }
.redesign .stickybar__col--center{ flex: 0 0 auto; justify-content: center; }
.redesign .stickybar__col--right { flex: 1 0 0; justify-content: flex-end; min-width: 0; }

.redesign .stickybar--fixed .stickybar__pill {
    padding: 8px 12px;
    background: var(--brand-sea-green);
    border: 1px solid var(--opacity-white-15);
    box-shadow: 0 12px 40px rgba(32, 52, 60, 0.24);
}

/* Sticky-bar button overrides — Figma node 11336:36684.
 * Start Learning (.btn--primary)  → SOLID WHITE pill with dark slate
 *   text — pops against the dark slate sticky-bar background.
 * Explore Resources (.btn--hero-ghost) → 24% offwhite-slate glass
 *   pill — sits just behind the white "Start Learning" CTA. */
.redesign .stickybar--fixed .stickybar__actions .btn--primary,
.redesign .stickybar--inline .stickybar__actions .btn--primary {
    background: var(--neutral-white);
    color: var(--brand-dark-slate);
    border-color: var(--neutral-white);
    padding: 8px 24px;
    font-size: 16px;
}

.redesign .stickybar--fixed .stickybar__actions .btn--primary:hover,
.redesign .stickybar--inline .stickybar__actions .btn--primary:hover {
    /* Slight tint so hover state reads against pure white. */
    background: var(--brand-offwhite-peach);
    border-color: var(--brand-offwhite-peach);
    color: var(--brand-dark-slate-darker);
}

.redesign .stickybar--fixed .stickybar__actions .btn--hero-ghost,
.redesign .stickybar--inline .stickybar__actions .btn--hero-ghost {
    background: var(--hero-pill-search);   /* rgba(194,210,216,0.24) per Figma */
    padding: 8px 24px;
    font-size: 16px;
}

.redesign .stickybar--fixed .stickybar__actions .btn--hero-ghost:hover,
.redesign .stickybar--inline .stickybar__actions .btn--hero-ghost:hover {
    background: rgba(194, 210, 216, 0.36);
}

/* Helpline chip — blue-tinted glass pill from Figma */
.redesign .stickybar__helpline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--hero-pill-helpline);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: var(--neutral-white);
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-full);
}

/* On the fixed-variant pill the helpline doesn't need its own fill —
 * the pill container already has sea-green bg. */
.redesign .stickybar--fixed .stickybar__helpline {
    background: transparent;
    backdrop-filter: none;
    padding: 12px 16px;
}

.redesign .stickybar__helpline svg {
    width: 20px;
    height: 20px;
    color: currentColor;
    flex-shrink: 0;
}

.redesign .stickybar__helpline:hover {
    color: var(--neutral-white);
    text-decoration: underline;
}

.redesign .stickybar__divider {
    width: 1px;
    height: 16px;
    background: var(--opacity-white-32);
    flex-shrink: 0;
}

.redesign .stickybar__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.redesign .stickybar__search {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    min-width: 323px;
    background: var(--hero-pill-search);
    border-radius: var(--radius-full);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Fixed-variant search fills the entire right column so the magnifying
 * glass sits adjacent to the Education button — no dead space between
 * the action cluster and the search field. Background steps up from
 * 10% → 18% white over the dark sea-green pill so the input reads as a
 * distinct, tappable field even though Figma blends it into the bar. */
.redesign .stickybar--fixed .stickybar__search {
    padding: 10px 16px;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-left: 0;
    background: rgba(255, 255, 255, 0.18);
}

.redesign .stickybar__search svg {
    width: 20px;
    height: 20px;
    color: var(--neutral-white);
    flex-shrink: 0;
    opacity: 0.85;
}

.redesign .stickybar__search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 0;          /* kill browser default input padding */
    margin: 0;
    height: auto;
    line-height: 1.5;
    color: var(--neutral-white);
    font-family: var(--font-body);
    font-size: 15px;
    outline: none;
    box-shadow: none;
}

.redesign .stickybar__search input::placeholder {
    color: var(--neutral-white);
    opacity: 0.7;
}

/* Fixed variant on desktop (≥1101 px) shows the full helpline chip:
 * icon + "PURE Helpline" + divider + "833-4MIKVAH". The 3-col
 * layout has comfortable slack at this width range, so no chrome
 * stripping is needed before the no-helpline compact mode kicks in
 * at ≤1100 px. The hero variant has its own continuous-shrink
 * cascade further down. */

/* ─────────────────────────────────────────────────────────────────
 * HERO variant — responsive shrink chain.
 *
 * The default 3-column layout (helpline far-left via col--left
 * `flex: 1`, buttons centered via col--center `flex: 0 0 auto`,
 * search far-right via col--right `flex: 1`) holds at every width.
 * Helpline stays anchored left and search stays anchored right —
 * never centered, never reordered. As the viewport narrows the
 * outer slack shrinks naturally; we only strip chrome once the
 * helpline pill is about to touch the action buttons.
 *
 * Collision math (measured against live render): helpline (≈ 289)
 * + buttons (≈ 256) + search (≈ 260) + 2× pill gap (16) = ~837.
 * With pill width = `calc(100vw - 160px)`, outer slack hits zero
 * around viewport 997 — that's where step 1 fires. After step 1
 * helpline is ≈ 156 so the next collision is ~903 (step 2); after
 * step 2 collision lands much lower because the hero variant
 * switches to mobile static (full-width minus 32 px) at ≤768 px —
 * the pill abruptly *gains* width across that boundary. With step 2
 * helpline ≈ 151 + buttons ≈ 207 + search ≈ 153 + 24 px gaps = 535,
 * and pill width = viewport − 32. Slack hits zero at viewport ≈ 567,
 * so step 3 is gated just above that (≤ 600 px) — the side chips
 * approach the centered buttons before collapsing to icon circles.
 * ───────────────────────────────────────────────────────────────── */

/* Step 1 — Mirror shrink (≤999 px). Helpline drops the phone number +
 * divider, leaving the phone icon + "PURE Helpline" label. Search
 * shrinks to match: drop the placeholder text and narrow the input
 * to ~95 px so the search chip's outer width tracks the helpline's.
 * Both chips stay visually balanced as outer-anchored siblings. */
@media (max-width: 999px) {
    .redesign .stickybar--hero .stickybar__helpline span:last-of-type,
    .redesign .stickybar--hero .stickybar__helpline .stickybar__divider {
        display: none;
    }

    .redesign .stickybar--hero .stickybar__search { min-width: 0; }
    .redesign .stickybar--hero .stickybar__search input {
        flex: 0 0 95px;
        width: 95px;
    }
    .redesign .stickybar--hero .stickybar__search input::placeholder {
        color: transparent;
    }
}

/* Step 2 — Tighten chrome (≤899 px). Both chips drop chip padding by
 * the same amount (16/24 → 12/14), shrinking helpline + search in
 * lockstep. Same content on each side; just smaller padding. */
@media (max-width: 899px) {
    .redesign .stickybar--hero .stickybar__helpline,
    .redesign .stickybar--hero .stickybar__search {
        padding: 12px 14px;
        font-size: 14px;
    }
    .redesign .stickybar--hero .stickybar__search input {
        font-size: 14px;
    }
    .redesign .stickybar--hero .stickybar__actions .btn {
        padding: 10px 14px;
        font-size: 14px;
    }
}

/* Step 3 — Both icon-only (≤600 px). Helpline drops the phone number;
 * search drops its input. Tapping the helpline still opens /helpline.
 * Tapping the search icon focuses the input → :focus-within fires →
 * :has() on the pill propagates so col--left and col--center fade out
 * and the search expands to overlay the pill width. The svg-tap →
 * input.focus() bridge lives in redesign.js (gated on this same
 * breakpoint).
 *
 * Both chips collapse to ~44 px wide here so the row stays balanced
 * (helpline icon + buttons + search icon, all symmetric). The trigger
 * sits at ≤600 px (not the earlier ~715) because the hero pill jumps
 * to full-width mobile mode at ≤768 — collapsing to circles before
 * the side chips get close to the centered buttons looked premature
 * (~98 px of slack at 715). At 600 px the per-gap slack is ~16 px. */
@media (max-width: 600px) {
    .redesign .stickybar--hero .stickybar__pill {
        position: relative;
    }
    .redesign .stickybar--hero .stickybar__actions .btn {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Helpline icon-only */
    .redesign .stickybar--hero .stickybar__helpline span { display: none; }
    .redesign .stickybar--hero .stickybar__helpline {
        padding: 12px;
        gap: 0;
    }

    /* Search icon-only — collapsed by default */
    .redesign .stickybar--hero .stickybar__search {
        padding: 12px;
        gap: 0;
        cursor: pointer;
        transition:
            padding   240ms cubic-bezier(0.22, 1, 0.36, 1),
            gap       240ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .redesign .stickybar--hero .stickybar__search input {
        width: 0;
        flex: 0 0 0;
        min-width: 0;
        padding: 0;
        opacity: 0;
        pointer-events: none;
        transition:
            width   240ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 180ms ease;
    }

    /* Expanded — input focused → search overlays the pill, helpline
     * and buttons fade out behind. */
    .redesign .stickybar--hero
        .stickybar__pill:has(.stickybar__search:focus-within)
        .stickybar__col--left,
    .redesign .stickybar--hero
        .stickybar__pill:has(.stickybar__search:focus-within)
        .stickybar__col--center {
        opacity: 0;
        pointer-events: none;
        transition: opacity 160ms ease;
    }
    .redesign .stickybar--hero
        .stickybar__pill:has(.stickybar__search:focus-within)
        .stickybar__col--right {
        position: absolute;
        inset: 0;
        flex: 1 1 100%;
        justify-content: stretch;
    }
    .redesign .stickybar--hero .stickybar__search:focus-within {
        width: 100%;
        padding: 14px 20px;
        gap: 12px;
        cursor: text;
    }
    .redesign .stickybar--hero .stickybar__search:focus-within input {
        width: auto;
        flex: 1 1 auto;
        opacity: 1;
        pointer-events: auto;
    }
}

/* Smallest phones — keep the four icons in a single row by trimming
 * button padding further. */
@media (max-width: 379px) {
    .redesign .stickybar--hero .stickybar__actions .btn {
        padding: 8px 10px;
        font-size: 12px;
    }
    .redesign .stickybar--hero .stickybar__helpline,
    .redesign .stickybar--hero .stickybar__search {
        padding: 10px;
    }
}

/* Floating fixed pill — compact helpline at ≤900 px: drop the divider
 * + phone number, leaving icon + "PURE Helpline" only. Above 900 px
 * both side columns are symmetric (flex: 1 0 0 from the base rule), so
 * the action buttons sit dead-center; we only collapse the helpline
 * once the symmetric side-col share would actually crowd it. */
@media (max-width: 900px) {
    .redesign .stickybar--fixed .stickybar__helpline span:last-of-type,
    .redesign .stickybar--fixed .stickybar__helpline .stickybar__divider {
        display: none;
    }
    .redesign .stickybar--fixed .stickybar__helpline {
        padding: 8px 12px;
        gap: 8px;
    }
}

/* Mobile (≤550 px) — hide the helpline column, left-align Resources +
 * Education, and let the search field expand to fill the remaining
 * width. Below this the action cluster + a real search input is more
 * useful than holding onto the helpline pill, and centered buttons
 * waste space the search needs. The existing ≤520 px rule drops the
 * search entirely once even this layout gets too tight.
 *
 * Scoped with :not(.stickybar--filter) because the filter-variant pill
 * uses the left column for the category dropdown (not a helpline) and
 * has no centre column — dropping the left col there leaves an empty
 * pill. The filter variant has its own ≤600px mobile rules earlier in
 * this file. */
@media (max-width: 550px) {
    .redesign .stickybar--fixed:not(.stickybar--filter) .stickybar__col--left { display: none; }

    .redesign .stickybar--fixed:not(.stickybar--filter) .stickybar__col--center {
        flex: 0 0 auto;
        justify-content: flex-start;
    }

    .redesign .stickybar--fixed:not(.stickybar--filter) .stickybar__col--right {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (max-width: 900px) {
    /* Keep the floating fixed pill visible on mobile too (user
     * preference). The ≤1100 px rule above already collapses the
     * helpline to its compact form (icon + "PURE Helpline"). We
     * still need to cancel the hero-variant mobile rules further
     * below (the ones that stack `.stickybar__actions` into a column
     * and flip column order) because those are written unscoped —
     * otherwise on ≤900 px the fixed pill's buttons wrap onto two
     * lines and the search flips to the left. */

    /* Reset col ordering — hero-variant rule below sets left:3,
     * center:1, right:none, which would mirror the whole pill. */
    .redesign .stickybar--fixed .stickybar__col--left,
    .redesign .stickybar--fixed .stickybar__col--center,
    .redesign .stickybar--fixed .stickybar__col--right { order: 0; }

    /* Keep the action buttons side-by-side in a row, natural width. */
    .redesign .stickybar--fixed .stickybar__actions {
        width: auto;
        max-width: none;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .redesign .stickybar--fixed {
        width: calc(100% - 24px);      /* 12 px gap each side */
        bottom: 12px;
    }
    .redesign .stickybar--fixed .stickybar__pill {
        padding: 8px;
        gap: 8px;
    }
    .redesign .stickybar--fixed .stickybar__actions .btn {
        padding: 10px 14px;
        font-size: 14px;
        white-space: nowrap;
    }
    .redesign .stickybar--fixed .stickybar__search {
        padding: 10px 14px;
        font-size: 14px;
    }
}

/* Getting tight — drop the search placeholder so the magnifying glass
 * stops sharing space with truncated copy that no longer reads cleanly
 * at this width. Input still works on focus; user can type immediately. */
@media (max-width: 680px) {
    .redesign .stickybar--fixed .stickybar__search input::placeholder {
        color: transparent;
    }
}

/* Getting tight — shrink button font further so buttons still fit
 * alongside a squished search pill. */
@media (max-width: 600px) {
    .redesign .stickybar--fixed .stickybar__actions .btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* Very narrow phones — drop the search entirely on the homepage CTA
 * pill; just the two action buttons side-by-side, each taking 50% of
 * the pill minus the gap. Filter variant excluded — its right column
 * IS the search field, and dropping it would leave the bar empty
 * (the left column has the category chip but nothing actionable). */
@media (max-width: 520px) {
    .redesign .stickybar--fixed:not(.stickybar--filter) .stickybar__col--right { display: none; }
    .redesign .stickybar--fixed:not(.stickybar--filter) .stickybar__col--center {
        flex: 1 1 auto;
        justify-content: stretch;
    }
    .redesign .stickybar--fixed:not(.stickybar--filter) .stickybar__actions {
        width: 100%;
        justify-content: space-between;
    }
    .redesign .stickybar--fixed:not(.stickybar--filter) .stickybar__actions .btn {
        flex: 1 1 0;                   /* equal-share → each button is 50% */
        min-width: 0;
    }
}

/* Extra-narrow phones — buttons with yet smaller fonts so both still
 * fit horizontally without their labels wrapping or being clipped. */
@media (max-width: 360px) {
    .redesign .stickybar--fixed .stickybar__actions .btn {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* Tiny viewports — hide the floating pill entirely. At this size
 * even two compact buttons can't render meaningfully. */
@media (max-width: 280px) {
    .redesign .stickybar--fixed { display: none; }
}

/* Mega-menu trigger buttons inside the sticky bar — match button text
 * styling, plus a small chev that rotates when the panel is open. The
 * chev points UP because the panel pops upward from the bar. */
.redesign .stickybar__megamenu-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border-style: solid;
    line-height: 1.5;
}

.redesign .stickybar__megamenu-chev {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 180ms ease;
}

.redesign .stickybar__megamenu-chev::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    margin: 4px auto 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    /* default: pointing UP (panel pops upward, chev hints at it) */
    transform: rotate(225deg);
}

.redesign .stickybar__megamenu-btn[aria-expanded="true"] .stickybar__megamenu-chev {
    /* spin to point DOWN when panel is open — toward the button */
    transform: rotate(180deg);
}

/* Mobile — hero collapses to auto-height (see hero.css), so flow the
 * sticky-bar pill in-document under the subtext rather than absolute-
 * positioning it at the bottom (which would let it overflow / overlap
 * the next section). The pill itself stays a single row across this
 * range; the responsive cascade above handles chip shrinking. */
@media (max-width: 768px) {
    .redesign .stickybar--hero {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        max-width: none;
        transform: none;
        margin-top: 24px;
        padding-inline: 16px;
        box-sizing: border-box;
    }
}

/* ── Filter-bar variant ──────────────────────────────────────────── *
 * Used on listing pages (media, articles, search, kallah-teachers,
 * referrals) where the bar's job is "switch category + search this
 * page" rather than the homepage's "phone helpline + CTAs + global
 * search". Shares the .stickybar shell + .stickybar--fixed animation
 * verbatim so the in/out feel matches the homepage CTA pill.
 *
 * Placement variants (rendered three times per page):
 *   .stickybar--inline-top    — flows above the listing surface
 *   .stickybar--fixed         — floats at viewport bottom (shared rules)
 *   .stickybar--inline-bottom — flows at the bottom of the listing
 * Visibility logic in redesign.js hides the fixed copy whenever either
 * inline copy is on-screen. */

.redesign .stickybar--filter {
    /* One knob for the bar background — flip to var(--brand-sea-green)
     * to match the homepage, or to var(--brand-peach-darker) for a peach
     * variant (also requires light → dark text adjustments). Default is
     * lighter slate so listing pages are visibly distinct from home. */
    --filterbar-bg: var(--brand-dark-slate-lighter);
}

/* Pill background — override the sea-green default on the fixed variant
 * AND seed it on the inline copies. */
.redesign .stickybar--fixed.stickybar--filter .stickybar__pill,
.redesign .stickybar--inline-top .stickybar__pill,
.redesign .stickybar--inline-bottom .stickybar__pill {
    background: var(--filterbar-bg);
    padding: 8px 12px;
    border: 1px solid var(--opacity-white-15);
    border-radius: var(--radius-full);
    box-shadow: 0 12px 40px rgba(32, 52, 60, 0.24);
}

/* Inline placements share the fixed variant's width math so the bar
 * holds the same horizontal footprint whether floating or docked.
 *
 * z-index lifts the bar above the next-sibling listing section so the
 * category dropdown (z-index:60 inside the bar's stacking context —
 * .stickybar has `will-change: opacity, transform` which creates its
 * own context) can paint over the video thumbnails below. Without
 * this, the cards in the following .section--peach paint on top of
 * the open dropdown. Same z applied to inline-bottom for symmetry
 * when its dropdown opens upward over the last row of cards. */
.redesign .stickybar--inline-top,
.redesign .stickybar--inline-bottom {
    position: relative;
    z-index: 30;
    width: calc(100% - 48px);
    max-width: 1312px;
    margin-inline: auto;
}

.redesign .stickybar--inline-top {
    margin-top: 16px;
    margin-bottom: 16px;
}

.redesign .stickybar--inline-bottom {
    margin-top: 24px;
    margin-bottom: 8px;
}

/* The filter-bar's right column is a single full-width search pill.
 * Match the fixed-variant search styling from above so all three
 * placements look identical. */
.redesign .stickybar--filter .stickybar__search {
    padding: 10px 16px;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-left: 0;
    background: rgba(255, 255, 255, 0.18);
}

/* ── Active-category pill (left column) ──────────────────────────── */
.redesign .filterbar__menu-wrap {
    position: relative;
    display: inline-flex;
}

.redesign .filterbar__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.18);
    border: 0;
    border-radius: var(--radius-full);
    color: var(--neutral-white);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--hover-dur) var(--hover-ease);
}

.redesign .filterbar__pill:hover {
    background: rgba(255, 255, 255, 0.28);
}

.redesign .filterbar__pill[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.32);
}

.redesign .filterbar__pill-label {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron — defaults to DOWN here (the base .stickybar__megamenu-chev
 * rule points up, which is right for the homepage CTA mega-menu pop-up
 * but wrong for the filter-bar where the chevron reads as "more options
 * below"). Override and flip on expanded. */
.redesign .filterbar__pill .stickybar__megamenu-chev::before {
    margin: 2px auto 0;
    transform: rotate(45deg);
}

.redesign .filterbar__pill[aria-expanded="true"] .stickybar__megamenu-chev {
    transform: none;
}

.redesign .filterbar__pill[aria-expanded="true"] .stickybar__megamenu-chev::before {
    transform: rotate(-135deg);
}

/* ── Dropdown menu ───────────────────────────────────────────────── */
.redesign .filterbar__menu {
    position: absolute;
    left: 0;
    z-index: 60;              /* above sticky-bar (40) and nav (50) */
    min-width: 260px;
    max-width: 320px;
    max-height: min(70vh, 480px);
    overflow-y: auto;
    padding: 8px;
    background: var(--neutral-white);
    color: var(--text-heading);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(32, 52, 60, 0.28);
}

.redesign .filterbar__menu[hidden] {
    display: none;
}

/* Open DOWN — used by inline-top (pill sits above the listing) */
.redesign .filterbar__menu-wrap--down .filterbar__menu {
    top: calc(100% + 8px);
    bottom: auto;
}

/* Open UP — used by fixed + inline-bottom (pill is near page bottom) */
.redesign .filterbar__menu-wrap--up .filterbar__menu {
    bottom: calc(100% + 8px);
    top: auto;
}

/* Non-clickable group label between menu links (e.g. "United States" /
 * "International" on the kallah-teacher location switcher). */
.redesign .filterbar__menu-heading {
    padding: 12px 14px 4px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--brand-sea-green-darker);
    cursor: default;
}

.redesign .filterbar__menu-heading:not(:first-child) {
    margin-top: 6px;
    border-top: 1px solid var(--brand-border-peach);
}

.redesign .filterbar__menu-item {
    display: block;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-heading);
    text-decoration: none;
    border-radius: 10px;
    transition: background var(--hover-dur) var(--hover-ease);
}

.redesign .filterbar__menu-item:hover,
.redesign .filterbar__menu-item:focus-visible {
    background: var(--brand-offwhite-peach);
    color: var(--text-heading);
    text-decoration: none;
}

.redesign .filterbar__menu-item.is-active {
    background: var(--brand-sea-green);
    color: var(--neutral-white);
    font-weight: 600;
}

.redesign .filterbar__menu-item.is-active:hover {
    background: var(--brand-sea-green-darker);
    color: var(--neutral-white);
}

/* Mobile (≤768 px) — at this breakpoint the card-grid collapses to a
 * single horizontal-snap row (see card.css), so the inline-bottom bar
 * lands directly below the cards with the inline-top still in view at
 * the same time. Two filter bars on one screen reads as duplication;
 * hide the bottom copy and let the fixed floating pill take over when
 * the user scrolls past the inline-top. Display:none elements never
 * intersect, so the visibility observer ignores it cleanly. */
@media (max-width: 768px) {
    .redesign .stickybar--inline-bottom { display: none; }
}

/* Mobile (≤600 px) — keep category + search in a single row instead of
 * stacking them. Category chip stays its natural width (label +
 * chevron); the search column flexes to fill the remaining space so
 * the placeholder reads as long as possible before truncation. */
@media (max-width: 600px) {
    .redesign .stickybar--filter .stickybar__pill {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 8px;
    }
    .redesign .stickybar--filter .stickybar__col--left {
        flex: 0 0 auto;
        min-width: 0;
        justify-content: flex-start;
    }
    .redesign .stickybar--filter .stickybar__col--right {
        flex: 1 1 auto;
        min-width: 0;
    }
    .redesign .stickybar--filter .filterbar__menu-wrap {
        width: auto;
    }
    .redesign .filterbar__pill {
        width: auto;
        justify-content: center;
        padding: 10px 14px;
    }
    /* Cap the active-category label so longer names ("Halachos for the
     * Jewish Home") don't push the search field off the row. The menu
     * itself shows the full title. */
    .redesign .filterbar__pill-label {
        max-width: 140px;
    }
    /* Dropdown spans the full pill so the menu reads at usable width
     * regardless of how narrow the category chip is. */
    .redesign .stickybar--filter .filterbar__menu {
        left: 0;
        right: 0;
        min-width: 0;
        max-width: none;
        width: calc(100vw - 64px);
    }
    .redesign .stickybar--filter .stickybar__search {
        padding: 10px 14px;
    }
    .redesign .stickybar--inline-top {
        margin-top: 16px;
        margin-bottom: 16px;
    }
    .redesign .stickybar--fixed.stickybar--filter {
        width: calc(100% - 24px);
        bottom: 12px;
    }
}

/* Very narrow phones — drop the search placeholder so the magnifying
 * glass + (eventually-typed) text have room next to a real category
 * chip. Input still focuses and accepts input on tap. */
@media (max-width: 420px) {
    .redesign .stickybar--filter .stickybar__search input::placeholder {
        color: transparent;
    }
    .redesign .filterbar__pill-label {
        max-width: 110px;
    }
}