/* ==========================================================================
   TSF LISTING ARCHIVE TOOLBAR
   Companion to listing-toolbar.php and js/tsf-listing-toolbar.js.

   Replaces the Elementor archive template's sticky facet stack, which styled
   FacetWP from two copies of the same custom_css blob (one on the desktop
   container, one on the mobile accordion) using `!important` on `#000`
   backgrounds and hardcoded 225px control widths. Everything here is token-
   driven and sized in fractions of the space available.

   SPECIFICITY NOTE: `.tsf-lt .facetwp-*` (0,2,0) already outranks FacetWP's own
   `.facetwp-*` (0,1,0), so nothing below needs !important. The one exception is
   flagged where it appears. If a rule here stops winning, the cause is almost
   certainly leftover Elementor custom_css still in the database — delete the
   widget, don't escalate the selector.
   ========================================================================== */

/* ==========================================================================
   NOTHING HERE IS STICKY. Read this before making anything sticky again.

   This bar and the site header were both trying to own the top of the viewport,
   and the bar's sticky offset tracked the header's live bottom edge, so every
   header slide dragged the bar around with it. Worst right at the top of the
   page — where the header transitions most, and where it costs the reader most.

   Four attempts, each of which removed one mechanism and left another:
     1. hysteresis on the compact state, so it stopped flip-flopping;
     2. measuring the header's painted rect instead of modelling its class;
     3. a single-row compact state, to cut the bar's stuck height;
     4. a claim protocol handing the top to whichever bar was stuck.

   The last one suppressed the header's scroll-up REVEAL but not its scroll-down
   HIDE, and the hide fires as `y` crosses the header's height — the same ~100px
   band where the bar crosses its own resting position. Two elements negotiating
   over one piece of screen; the negotiation was the bug, not any single rule.

   So both are static, at every width. Removed with the sticky: --tsf-lt-top,
   .tsf-lt-host.is-stuck and everything it restyled, the compact-state size
   transitions, and the shortcode's `offset` attribute. The header lost its
   fixed positioning, spacer, scroll listener and --tsf-hdr-top to match.

   .tsf-lt-host itself is KEPT — the JS still adds it to the nearest
   .elementor-widget ancestor, and the chips/badge/heading wiring hangs off it.
   It just no longer positions anything.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    #tsf-dynamic-heading.tsf-archive-heading { transition: none; }
}

/* --------------------------------------------------------------------------
   SHELL
   -------------------------------------------------------------------------- */
.tsf-lt {
    --tsf-lt-ctl: 42px;   /* control height — shrinks when stuck */
    --tsf-lt-pad: 18px;

    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--tsf-lt-pad) 0;
    background: var(--tsf-bg, #131313);
    color: var(--tsf-text, #CBCBCB);
    font-family: var(--tsf-font-body, "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    transition: padding 200ms ease-in-out;
}

.tsf-lt *,
.tsf-lt *::before,
.tsf-lt *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   HEAD — row 1 is the heading + result count with the Filters button pushed to
   the right edge (the button only exists below 1024px); row 2 is the
   listing-type tab strip.
   -------------------------------------------------------------------------- */
.tsf-lt-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

/* flex-basis 0, not auto. With `auto` the basis is the heading's max-content
   width — far wider than a phone — so the Filters button never fits beside it
   and wraps to a row of its own, which in the stuck state costs more height than
   the heading itself. Basis 0 + min-width 0 lets the heading take whatever is
   left after the button and wrap inside it. */
.tsf-lt-headline {
    flex: 1 1 0;
    min-width: 0;
}

/* Scoped on the id because the Elementor heading widget's own custom_css
   (`selector h1.tsf-archive-heading { font-size: 3vw }`, plus four media
   queries) is (0,2,1) and would otherwise win for as long as that widget still
   exists in the template. Deleting the widget takes its CSS with it. */
#tsf-dynamic-heading.tsf-archive-heading {
    margin: 0;
    font-family: var(--tsf-font-display, "Scare Factor Custom", "Bebas Neue", sans-serif);
    font-weight: 400;
    /* Replaces a flat 3vw / 4.7vw: viewport-proportional type has no floor on a
       phone and no ceiling on a 34" monitor. */
    font-size: clamp(1.45rem, 3.2vw, 2.75rem);
    line-height: var(--tsf-leading-tight, 1.2);
    letter-spacing: 1px;
    color: var(--tsf-nav-text, #F3F3F3);
}

.tsf-lt-count {
    margin: 5px 0 0;
    font-size: var(--tsf-size-xs, 0.82rem);
    color: var(--tsf-text-muted, #8A8A8A);
}
.tsf-lt-count b { color: var(--tsf-text-strong, #F2F2F2); font-weight: 700; }
.tsf-lt-count[hidden] { display: none; }

/* --------------------------------------------------------------------------
   LISTING-TYPE TABS
   -------------------------------------------------------------------------- */
/* Full width on its own line at every size, rather than tucked beside the
   heading on desktop. Sharing the row cost the H1 about half its width, which
   wrapped "Find Haunted Houses in Ohio Near You!" onto two lines for the sake of
   a row that ended up the same height anyway. Same layout everywhere is also one
   less thing to keep working at two breakpoints. */
.tsf-lt-types {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    order: 3;
}

/* --------------------------------------------------------------------------
   FILTERS TOGGLE (below 1024px only)
   -------------------------------------------------------------------------- */
.tsf-lt-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--tsf-lt-ctl);
    padding: 0 16px;
    background: var(--tsf-surface-panel, #1A1A1A);
    border: 1px solid var(--tsf-line-strong, #333333);
    border-radius: var(--tsf-radius-xl, 31px);
    color: var(--tsf-text-strong, #F2F2F2);
    font: inherit;
    font-size: var(--tsf-size-xs, 0.82rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tsf-tracking-wide, 0.5px);
    cursor: pointer;
}
.tsf-lt-toggle:hover { border-color: var(--tsf-red, #FF0000); }
.tsf-lt-toggle:focus-visible { outline: 2px solid var(--tsf-red, #FF0000); outline-offset: 2px; }

.tsf-lt-toggle svg {
    width: 18px; height: 18px; flex: 0 0 auto;
    fill: none; stroke: var(--tsf-red, #FF0000);
    stroke-width: 2; stroke-linecap: round;
}

.tsf-lt-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px;
    background: var(--tsf-red, #FF0000);
    color: var(--tsf-text-bright, #FFFFFF);
    font-size: 11px; letter-spacing: 0;
}
.tsf-lt-badge[hidden] { display: none; }

/* --------------------------------------------------------------------------
   FILTER PANEL
   Below 1024px the panel is capped and scrolls internally. That cap is what
   makes a sticky bar safe on a phone: an accordion that can grow past the
   viewport would pin the entire screen once it is stuck.
   -------------------------------------------------------------------------- */
.tsf-lt-panel { display: none; }

.tsf-lt.is-open .tsf-lt-panel {
    display: block;
    max-height: min(68vh, 520px);
    overflow-y: auto;
    padding: 2px 2px 4px;
}

/* The whole responsive story, in one declaration: as many 220px-or-wider columns
   as fit, each field one column, Name two.

   auto-FILL, not auto-fit. auto-fit collapses the leftover empty tracks and
   redistributes their width, so a row holding a single wrapped field stretches
   it edge to edge — a lone 750px-wide <select> on a tablet. auto-fill keeps the
   empty tracks, so a wrapped field stays the same width as the ones above it.
   (This is also why it isn't flexbox: flex-grow has the same orphan-stretch
   problem and no way to opt out per row.) */
.tsf-lt-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-items: end;
    gap: 10px 12px;
}

.tsf-lt-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
}
.tsf-lt-field--name { grid-column: span 2; }

.tsf-lt-label {
    font-size: var(--tsf-size-3xs, 0.72rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tsf-tracking-caps, 0.12em);
    color: var(--tsf-red, #FF0000);
}

/* Subtype facets: exactly one is relevant per directory. The server sets
   data-tsf-lt-type from the URL; the JS re-sets it from the checked
   listing_type boxes after every refresh. */
.tsf-lt-field--sub { display: none; }
.tsf-lt[data-tsf-lt-type="haunted-houses"] .tsf-lt-field--sub[data-sub="haunted-houses"],
.tsf-lt[data-tsf-lt-type="haunted-places"] .tsf-lt-field--sub[data-sub="haunted-places"],
.tsf-lt[data-tsf-lt-type="spooky-spots"]   .tsf-lt-field--sub[data-sub="spooky-spots"] {
    display: flex;
}

/* A subtype facet set to CHECKBOXES takes the whole row rather than one 220px
   grid track — haunt_type alone has 22 terms, and stacking those into a single
   column would make the panel taller than the viewport. Keyed off the facet type
   with :has() rather than off the field, so ghost_type and category are
   unaffected while they remain dropdowns, and pick this up automatically if they
   are ever switched too.

   NOT scoped to .tsf-lt-field--sub, which is what it read at first. That worked
   only because the directory bar happens to tag its checkbox facets as subtypes.
   [tsf_holiday_toolbar] renders haunt_type as a plain field, so the rule missed
   it, and twenty-two pills wrapped inside a single 220px grid track — one pill
   per line, a filter panel taller than the results. Any checkbox facet in the
   panel takes the row; that is a property of the CONTROL, not of which bar it
   happens to be sitting in. */
.tsf-lt-field:has(.facetwp-type-checkboxes) {
    grid-column: 1 / -1;
}

/* Slightly tighter than the listing_type / holiday tab strip: those are pills
   that want presence, this is a set of twenty that wants to fit. */
.tsf-lt-panel .facetwp-checkbox { padding: 0 11px; }

/* ==========================================================================
   FACETWP CONTROL SKIN
   ========================================================================== */

.tsf-lt .facetwp-facet { margin: 0; }

.tsf-lt .facetwp-search,
.tsf-lt .facetwp-location,
.tsf-lt select.facetwp-dropdown,
.tsf-lt select.facetwp-radius {
    width: 100%;
    height: var(--tsf-lt-ctl);
    padding: 0 12px;
    background-color: var(--tsf-surface-raised, #151515);
    color: var(--tsf-text-strong, #F2F2F2);
    border: 1px solid var(--tsf-line-soft, #2A2A2A);
    border-radius: var(--tsf-radius-sm, 8px);
    font: inherit;
    font-size: var(--tsf-size-xs, 0.82rem);
    line-height: normal;
    transition: border-color var(--tsf-transition, 180ms ease-in-out);
}

.tsf-lt .facetwp-search::placeholder,
.tsf-lt .facetwp-location::placeholder { color: var(--tsf-text-muted, #8A8A8A); }

.tsf-lt .facetwp-search:hover,
.tsf-lt .facetwp-location:hover,
.tsf-lt select.facetwp-dropdown:hover,
.tsf-lt select.facetwp-radius:hover { border-color: var(--ha-line-hover, #666666); }

.tsf-lt .facetwp-search:focus,
.tsf-lt .facetwp-location:focus,
.tsf-lt select.facetwp-dropdown:focus,
.tsf-lt select.facetwp-radius:focus {
    outline: 2px solid var(--tsf-red, #FF0000);
    outline-offset: 1px;
    border-color: var(--tsf-red, #FF0000);
}

/* Native select chrome is light-on-light in a dark bar, so it is replaced with
   a drawn caret. The `#` in the fill colour must stay percent-encoded (%23) —
   an unescaped one truncates the data URI at the fragment. */
.tsf-lt select.facetwp-dropdown,
.tsf-lt select.facetwp-radius {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23FF3B3B' d='M0 0h12L6 8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 7px;
    cursor: pointer;
}

/* Windows and Linux render the popup list from the element's own colours, not
   the page's, so an unstyled option list comes back white. */
.tsf-lt select option {
    background-color: var(--tsf-surface-raised, #151515);
    color: var(--tsf-text-strong, #F2F2F2);
}

/* Search + proximity both wrap their input so FacetWP can absolutely position
   its magnifier / locate-me icon over it. */
.tsf-lt .facetwp-input-wrap {
    position: relative;
    display: block;
    width: 100%;
}
.tsf-lt .facetwp-input-wrap .facetwp-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    margin: 0;
    cursor: pointer;
}
.tsf-lt .facetwp-search,
.tsf-lt .facetwp-location { padding-right: 34px; }

/* Proximity is two controls on one line: place, then radius. */
.tsf-lt .facetwp-type-proximity {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tsf-lt .facetwp-type-proximity .facetwp-input-wrap { flex: 1 1 auto; min-width: 0; }
.tsf-lt select.facetwp-radius { flex: 0 0 96px; width: 96px; }

/* -----------------------------------------------------------------------
   CHECKBOXES -> PILLS
   FacetWP ships checkboxes as a stacked list with a background-image tick and
   a left indent. In a toolbar that is both tall and visually noisy, so the
   background shorthand resets the glyph and the indent goes back to normal.
   ----------------------------------------------------------------------- */
.tsf-lt .facetwp-type-checkboxes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.tsf-lt .facetwp-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 14px;
    height: var(--tsf-lt-ctl);
    background: var(--tsf-surface-panel, #1A1A1A);
    border: 1px solid var(--tsf-line-strong, #333333);
    border-radius: var(--tsf-radius-xl, 31px);
    color: var(--tsf-text, #CBCBCB);
    font-size: var(--tsf-size-2xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tsf-tracking-wide, 0.5px);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--tsf-transition, 180ms ease-in-out),
                border-color var(--tsf-transition, 180ms ease-in-out),
                color var(--tsf-transition, 180ms ease-in-out);
}

.tsf-lt .facetwp-checkbox:hover {
    border-color: var(--tsf-red, #FF0000);
    color: var(--tsf-text-bright, #FFFFFF);
}

.tsf-lt .facetwp-checkbox.checked {
    background: var(--tsf-red, #FF0000);
    border-color: var(--tsf-red, #FF0000);
    color: var(--tsf-text-bright, #FFFFFF);
}

.tsf-lt .facetwp-checkbox.disabled {
    opacity: 0.4;
    cursor: default;
}

.tsf-lt .facetwp-counter { font-weight: 400; opacity: 0.6; }
.tsf-lt .facetwp-checkbox.checked .facetwp-counter { opacity: 0.75; }

.tsf-lt .facetwp-toggle,
.tsf-lt .facetwp-hidden + .facetwp-toggle {
    display: inline-block;
    color: var(--ha-link, #FF6B6B);
    font-size: var(--tsf-size-2xs, 0.75rem);
    cursor: pointer;
}

/* A facet whose name no longer exists in FacetWP renders an empty wrapper;
   without this its label would sit above nothing. :has() is live, so the field
   reappears the moment a refresh fills the facet in. */
.tsf-lt .tsf-lt-field:has(> .facetwp-facet:empty) { display: none; }

/* ==========================================================================
   ACTIVE FILTER CHIPS
   Built client-side from the rendered facets — no "Selections" facet to create
   in the FacetWP UI, and nothing to keep in sync when a facet is added.
   ========================================================================== */
.tsf-lt-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--tsf-line-soft, #2A2A2A);
}
.tsf-lt-chips[hidden] { display: none; }

.tsf-lt-chips-label {
    font-size: var(--tsf-size-3xs, 0.72rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tsf-tracking-caps, 0.12em);
    color: var(--tsf-text-muted, #8A8A8A);
}

.tsf-lt-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px 5px 12px;
    background: var(--tsf-surface-panel, #1A1A1A);
    border: 1px solid var(--tsf-line-strong, #333333);
    border-radius: var(--tsf-radius-xl, 31px);
    color: var(--tsf-text, #CBCBCB);
    font: inherit;
    font-size: var(--tsf-size-2xs, 0.75rem);
    line-height: 1.4;
    cursor: pointer;
}
.tsf-lt-chip:hover { border-color: var(--tsf-red, #FF0000); color: var(--tsf-text-bright, #FFFFFF); }
.tsf-lt-chip:focus-visible { outline: 2px solid var(--tsf-red, #FF0000); outline-offset: 2px; }
.tsf-lt-chip .x { font-size: 14px; line-height: 1; color: var(--tsf-red, #FF0000); }

.tsf-lt-clear {
    padding: 4px 6px;
    background: none;
    border: 0;
    color: var(--tsf-text-muted, #8A8A8A);
    font: inherit;
    font-size: var(--tsf-size-2xs, 0.75rem);
    text-decoration: underline;
    cursor: pointer;
}
.tsf-lt-clear:hover { color: var(--tsf-red, #FF0000); }
.tsf-lt-clear:focus-visible { outline: 2px solid var(--tsf-red, #FF0000); outline-offset: 2px; }

/* ==========================================================================
   BREAKPOINTS
   1024px is the pivot the rest of the archive already uses (the card grid drops
   to two columns there, and HA_Filter_Sidebar docks/undocks on the same line).
   ========================================================================== */

/* --- Desktop: panel is always open, no toggle --- */
@media (min-width: 1024px) {
    .tsf-lt-toggle { display: none; }

    .tsf-lt-panel {
        display: block;
        max-height: none;
        overflow: visible;
        padding: 0;
    }

    .tsf-lt-head { align-items: flex-start; }
}

/* --- Below 1024px: heading + toggle share row 1, type tabs get row 2 --- */
@media (max-width: 1023px) {
    /* Three pills can outgrow a narrow phone; let them scroll sideways rather
       than wrap into a second and third line inside a sticky bar. */
    .tsf-lt-types {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .tsf-lt-types::-webkit-scrollbar { display: none; }

    /* Scoped to the TYPE STRIP, and it has to stay that way. This used to read
       `.tsf-lt .facetwp-type-checkboxes`, which was harmless only while
       listing_type was the sole checkbox facet on the page. The moment a subtype
       facet is switched to checkboxes, that selector laid its 20-plus pills out
       in a single unwrappable line — and the horizontal scroller above is on
       .tsf-lt-types, so nothing inside the panel could scroll to reach them. */
    .tsf-lt-types .facetwp-type-checkboxes { flex-wrap: nowrap; }

}

@media (max-width: 600px) {
    .tsf-lt { --tsf-lt-ctl: 40px; --tsf-lt-pad: 14px; }
    .tsf-lt-toggle { padding: 0 12px; }

    /* One column, and Name has to stop spanning two — a span wider than the
       explicit grid would create an implicit second column and reintroduce the
       horizontal overflow this whole layout exists to avoid. */
    .tsf-lt-fields { grid-template-columns: 1fr; }
    .tsf-lt-field--name { grid-column: auto; }

    /* Insurance, not the primary control. Twenty-two pills two-per-row is ~11
       rows, which would own the panel on a phone. FacetWP's own "Show more"
       limit is the better fix and is already skinned (.facetwp-toggle below) —
       this just guarantees the panel stays usable if that is left unset. */
    .tsf-lt-field:has(.facetwp-type-checkboxes) .facetwp-type-checkboxes {
        max-height: 168px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}