/* ==========================================================================
   TSF HOLIDAY ARCHIVE — /year-round-haunted-houses/
   Companion to holiday-archive.php and js/tsf-holiday.js.

   Only two things live here:

     1. .ha-card-event — the holiday block injected into a Haunt Advisor card
        by tsf_holiday_event_block(). Everything else about the card (shell,
        logo, Save/Bucket icons, reactions, footer) comes from ha-styles.css and
        listing-card.css, because it IS the directory card.
     2. The few toolbar deltas the holiday page needs on top of
        listing-toolbar.css, whose classes [tsf_holiday_toolbar] reuses wholesale.

   No holiday colour VALUE is written in this file. The hexes live once, as
   --tsf-hol-* custom properties in holiday-events.css, shared with the single
   Listing's events section; the rules here only point at those variables, so
   the card pill, the filter-strip dot and the single Listing can never drift on
   what colour Christmas is.

   This replaces the .holiday-event-snippet block, which was a bordered, fully
   centred panel sitting inside another bordered card. It read as a second card
   glued to the first. This version is a section of the card: left aligned like
   the rest of the body, separated by one hairline rather than a full border.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE CARD'S EVENT BLOCK
   -------------------------------------------------------------------------- */
.ha-card-event {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--tsf-line-soft, #2A2A2A);
    font-size: var(--tsf-size-sm, 0.9rem);
}

.ha-card-event-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* .event-pill carries a 10px bottom margin for the single-Listing layout; the
   flex gap above does that job here, so take it back. */
.ha-card-event-head .event-pill { margin-bottom: 0; }

/* The status chip is the whole reason the default ordering is legible: it says
   in three words why this card is where it is. Colour-coded by urgency, NOT by
   holiday — that is the pill's job right next to it. */
.ha-card-event-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--tsf-size-3xs, 0.72rem);
    font-weight: var(--tsf-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: var(--tsf-tracking-wide, 0.5px);
    color: var(--tsf-text-muted, #8A8A8A);
    white-space: nowrap;
}

.ha-card-event-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.ha-card-event-status.is-now       { color: #35C759; }
.ha-card-event-status.is-soon      { color: #FFB703; }
.ha-card-event-status.is-evergreen { color: #A78BFA; }

/* A live event gets a slow pulse. Small enough to read as a status light rather
   than an animation, and switched off entirely for reduced-motion. */
.ha-card-event-status.is-now::before { animation: tsf-holiday-pulse 2s ease-in-out infinite; }

@keyframes tsf-holiday-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .ha-card-event-status.is-now::before { animation: none; }
}

/* --- Dates: the same muted-key / strong-value idiom as .tsf-event-date on the
       single Listing and .tsf-row in the hero, so the three read as one system. */
.ha-card-event-dates {
    display: flex;
    background: var(--tsf-surface-sunken, #0C0C0C);
    border: 1px solid var(--tsf-line-soft, #2A2A2A);
    border-radius: var(--tsf-radius-md, 10px);
    overflow: hidden;
}

.ha-card-event-date {
    flex: 1 1 50%;
    min-width: 0;
    padding: 7px 10px;
}
.ha-card-event-date + .ha-card-event-date { border-left: 1px solid var(--tsf-line-soft, #2A2A2A); }

.ha-card-event-date .k {
    display: block;
    color: var(--tsf-text-muted, #8A8A8A);
    font-size: 0.63rem;
    font-weight: var(--tsf-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: var(--tsf-tracking-caps, 0.13em);
}
.ha-card-event-date .v {
    display: block;
    margin-top: 2px;
    color: var(--tsf-text-strong, #F2F2F2);
    font-size: var(--tsf-size-xs, 0.82rem);
    font-weight: var(--tsf-weight-bold, 700);
    line-height: 1.3;
}

/* --- Description + see more / see less --- */
.ha-card-event-desc {
    color: var(--tsf-text, #CBCBCB);
    font-size: var(--tsf-size-xs, 0.82rem);
    line-height: var(--tsf-leading-body, 1.6);
}
.ha-card-event-desc p { margin: 0 0 0.7em; }
.ha-card-event-desc p:last-child { margin-bottom: 0; }

/* [hidden] would already do this, but the wysiwyg branch can emit block children
   whose own display wins over the attribute's UA rule. */
.ha-card-event-desc .event-full-text[hidden] { display: none; }

.event-see-more-toggle,
.event-see-less-toggle {
    cursor: pointer;
    text-decoration: underline;
    font-size: var(--tsf-size-2xs, 0.75rem);
}
.event-see-more-toggle { color: var(--ha-bucket, #FFB703); }
.event-see-less-toggle { color: var(--tsf-text-muted, #8A8A8A); margin-left: 4px; }
.event-see-more-toggle:hover,
.event-see-less-toggle:hover { color: var(--tsf-red, #FF0000); }

/* --- "Also here for" — the other holidays this haunt has coming up. Rendered
       as neutral ghost pills so they read as secondary next to the solid,
       colour-filled primary pill above; the point is the NAMES, not a second
       burst of colour competing with the one that matters. */
.ha-card-event-also {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.ha-card-event-also .k {
    color: var(--tsf-text-muted, #8A8A8A);
    font-size: var(--tsf-size-3xs, 0.72rem);
    font-weight: var(--tsf-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: var(--tsf-tracking-caps, 0.12em);
}

/* These carry .holiday-pill.slug-* too — the markup is shared with the primary
   pill — so the fill has to be overridden back to neutral. !important because
   both selectors are (0,2,0): equal specificity, and source order between two
   separate stylesheets is not something to rely on. The slug class is kept on
   the element so a future variant can opt back into the colour. */
.ha-card-event-also .ha-mini-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--tsf-radius-xl, 31px);
    background: var(--tsf-surface-panel, #1A1A1A) !important; /* beats .holiday-pill.slug-* (0,2,0) at equal weight */
    color: var(--tsf-text, #CBCBCB) !important;
    border: 1px solid var(--tsf-line-strong, #333333);
    font-size: var(--tsf-size-3xs, 0.72rem);
    font-weight: var(--tsf-weight-bold, 700);
    white-space: nowrap;
}

/* --- View all events --- */
.ha-card-event-all {
    align-self: flex-start;
    padding: 5px 12px;
    border: 1px solid var(--tsf-line-strong, #333333);
    border-radius: var(--tsf-radius-xl, 31px);
    background: var(--tsf-surface-panel, #1A1A1A);
    color: var(--tsf-text, #CBCBCB);
    font-size: var(--tsf-size-2xs, 0.75rem);
    font-weight: var(--tsf-weight-bold, 700);
    text-decoration: none;
}
.ha-card-event-all:hover {
    border-color: var(--tsf-red, #FF0000);
    color: var(--tsf-text-bright, #FFFFFF);
}

/* --------------------------------------------------------------------------
   LIST VIEW

   The grid/list toggle puts .tsf-layout-list on #tsf-listing-grid, and
   listing-card.css then sets .ha-card-body to `display: contents` so the card's
   children become direct flex items of .ha-card, ordered 1-6 left to right.

   That has a consequence this block MUST handle: .ha-card-event is one of those
   children now, and a flex item with no `order` defaults to 0 — which would put
   the event block ahead of the logo. Everything below follows from that.
   -------------------------------------------------------------------------- */

/* ---- Desktop + tablet: one line ---- */
@media (min-width: 768px) {
    #tsf-listing-grid.tsf-layout-list .ha-card-event {
        /* 4 is shared with .ha-card-review. Ties keep document order, and the
           event block is the earlier of the two — which is the sequence we want:
           logo · title · location · EVENT · review · subtype/thumbs · save. */
        order: 4;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
        border-top: 0;
    }

    /* Only the pill and the status survive. A row this dense cannot carry a
       description, two date cells and two more pill rows; the point of list view
       is to scan many haunts, and "which holiday, is it on now" is the whole
       answer at that altitude. Everything else is one click away in grid view or
       on the listing itself. */
    #tsf-listing-grid.tsf-layout-list .ha-card-event-dates,
    #tsf-listing-grid.tsf-layout-list .ha-card-event-desc,
    #tsf-listing-grid.tsf-layout-list .ha-card-event-also,
    #tsf-listing-grid.tsf-layout-list .ha-card-event-all { display: none; }
}

/* ---- Mobile: not at all ----
   listing-card.css holds the mobile list row to AT MOST two lines. Even the
   pill-and-status pair would make it three, so the block sits this one out
   rather than quietly breaking that contract. Grid view still has it. */
@media (max-width: 767px) {
    #tsf-listing-grid.tsf-layout-list .ha-card-event { display: none; }
}

/* --------------------------------------------------------------------------
   TOOLBAR DELTAS

   [tsf_holiday_toolbar] renders the .tsf-lt shell from listing-toolbar.css
   verbatim; what follows is only what this page needs on top of it. The order
   the shortcode emits is:

     head (heading + count + Filters button) - panel (Name/Near/State) -
     .tsf-lt-types (holiday pills) - .tsf-lt-quiet (Haunt Type as text) - chips

   The strip and the quiet row are siblings of the panel, not children, so the
   Filters button collapses the three text fields and leaves the holiday choice
   on screen at every width. See the shortcode's docblock for why.
   -------------------------------------------------------------------------- */

/* --- The holiday strip, in its own full-width row --- */
.tsf-lt--holiday .tsf-lt-types {
    display: block;
    margin-top: 14px;
}

/* Wrap at EVERY width, overriding the nowrap horizontal scroller
   listing-toolbar.css applies below 1024px. That scroller is right for three
   listing-type tabs; with eleven holidays it would park eight of them off the
   right edge of a phone - on the one control this page exists for. Three rows of
   pills is the better trade. */
.tsf-lt--holiday .tsf-lt-types,
.tsf-lt--holiday .tsf-lt-types .facetwp-facet {
    overflow-x: visible;
}
.tsf-lt--holiday .tsf-lt-types .facetwp-type-checkboxes {
    flex-wrap: wrap;
    gap: 8px;
}

/* Counters ARE shown now. tsf_holiday_facet_html() computes them against every
   other active facet the same way FacetWP does, from live event data rather than
   a date-blind index, so the number is one the results will keep. A holiday with
   nothing left carries FacetWP's own `disabled` class and greys out. */
.tsf-lt--holiday .tsf-lt-types .facetwp-checkbox.disabled {
    opacity: 0.35;
    cursor: default;
}
.tsf-lt--holiday .tsf-lt-types .facetwp-checkbox.disabled:hover {
    border-color: var(--tsf-line-strong, #333333);
    color: var(--tsf-text, #CBCBCB);
}

/* A colour dot per holiday, so the filter strip is scannable at a glance and
   matches the pill on the cards below it.

   FacetWP renders its own checkbox markup, so the only hook is the data-value
   it writes - which is the term slug, the same slug .holiday-pill.slug-* keys
   off. Each rule below only POINTS at the shared --tsf-hol-* variable declared
   in holiday-events.css; no hex is repeated, so the strip and the pills cannot
   drift. A holiday with no entry here falls back to the grey default and the
   strip still works. */
.tsf-lt--holiday .tsf-lt-types .facetwp-checkbox { padding: 0 13px; }

.tsf-lt--holiday .tsf-lt-types .facetwp-checkbox::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--tsf-hol-dot, var(--tsf-text-muted, #8A8A8A));
}

/* Checked, the pill fills solid red; a coloured dot on red just muddies it. */
.tsf-lt--holiday .tsf-lt-types .facetwp-checkbox.checked::before { background: currentColor; }

.tsf-lt--holiday .facetwp-checkbox[data-value="valentines-day-haunts"]             { --tsf-hol-dot: var(--tsf-hol-valentines-day-haunts); }
.tsf-lt--holiday .facetwp-checkbox[data-value="christmas-haunts"]                  { --tsf-hol-dot: var(--tsf-hol-christmas-haunts); }
.tsf-lt--holiday .facetwp-checkbox[data-value="st-patricks-day-haunts"]            { --tsf-hol-dot: var(--tsf-hol-st-patricks-day-haunts); }
.tsf-lt--holiday .facetwp-checkbox[data-value="easter-haunts"]                     { --tsf-hol-dot: var(--tsf-hol-easter-haunts); }
.tsf-lt--holiday .facetwp-checkbox[data-value="spring-break-haunts"]               { --tsf-hol-dot: var(--tsf-hol-spring-break-haunts); }
.tsf-lt--holiday .facetwp-checkbox[data-value="summer-haunts"]                     { --tsf-hol-dot: var(--tsf-hol-summer-haunts); }
.tsf-lt--holiday .facetwp-checkbox[data-value="halfway-to-halloween-haunt-events"] { --tsf-hol-dot: var(--tsf-hol-halfway-to-halloween-haunt-events); }
.tsf-lt--holiday .facetwp-checkbox[data-value="friday-the-13th-haunts"]            { --tsf-hol-dot: var(--tsf-hol-friday-the-13th-haunts); }
.tsf-lt--holiday .facetwp-checkbox[data-value="year-round"]                        { --tsf-hol-dot: var(--tsf-hol-year-round); }
.tsf-lt--holiday .facetwp-checkbox[data-value="thanksgiving"]                      { --tsf-hol-dot: var(--tsf-hol-thanksgiving); }
.tsf-lt--holiday .facetwp-checkbox[data-value="new-years"]                         { --tsf-hol-dot: var(--tsf-hol-new-years); }

/* --------------------------------------------------------------------------
   QUIET FACETS - checkboxes as plain clickable text

   A pill row reads as a primary control. Haunt Type is not one on this page: it
   refines a holiday you have already chosen. Same facet, same markup, same
   FacetWP behaviour - the chrome comes off, and it stops competing with the
   holiday strip directly above it.

   Selectors are (0,3,0) so they beat the pill skin in listing-toolbar.css
   (0,2,0) on specificity rather than on load order. That matters: this file is
   enqueued from holiday-archive.php, whose hook was registered at plugin load,
   so it PRINTS BEFORE listing-toolbar.css and would lose every tie.
   -------------------------------------------------------------------------- */
.tsf-lt-quiet { margin-top: 12px; }

.tsf-lt .tsf-lt-field--quiet .facetwp-type-checkboxes {
    gap: 4px 18px;
    align-items: baseline;
}

.tsf-lt .tsf-lt-field--quiet .facetwp-checkbox {
    height: auto;
    padding: 2px 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--tsf-text-muted, #8A8A8A);
    font-size: var(--tsf-size-2xs, 0.75rem);
    font-weight: var(--tsf-weight-bold, 700);
    text-transform: none;
    letter-spacing: normal;
}

.tsf-lt .tsf-lt-field--quiet .facetwp-checkbox:hover {
    background: none;
    border: 0;
    color: var(--tsf-text-bright, #FFFFFF);
    text-decoration: underline;
}

/* Checked has to read without a filled box behind it, so it takes the brand red
   and an underline - two signals, since colour alone is not one. */
.tsf-lt .tsf-lt-field--quiet .facetwp-checkbox.checked {
    background: none;
    border: 0;
    color: var(--tsf-red, #FF0000);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tsf-lt .tsf-lt-field--quiet .facetwp-checkbox.disabled {
    opacity: 0.35;
    text-decoration: none;
}

.tsf-lt .tsf-lt-field--quiet .facetwp-counter { opacity: 0.5; font-weight: 400; }

/* The field label goes quiet too - it is a lead-in, not a section heading. */
.tsf-lt .tsf-lt-field--quiet .tsf-lt-label { color: var(--tsf-text-muted, #8A8A8A); }

/* --------------------------------------------------------------------------
   ADMIN WIRING NOTICE
   From tsf_holiday_facet_strip(). Shipped `hidden` and revealed by
   syncFacetWarning() in tsf-listing-toolbar.js only when the strip is genuinely
   empty AFTER FacetWP has hydrated - the server cannot tell. Never rendered for
   visitors.
   -------------------------------------------------------------------------- */
.tsf-lt-facet-missing {
    margin: 10px 0 0;
    padding: 10px 14px;
    border: 1px dashed var(--tsf-red, #FF0000);
    border-radius: var(--tsf-radius-sm, 8px);
    background: rgba(255, 0, 0, 0.06);
    color: var(--tsf-text, #CBCBCB);
    font-size: var(--tsf-size-2xs, 0.75rem);
    line-height: 1.5;
}
.tsf-lt-facet-missing[hidden] { display: none; }