/* ==========================================================================
   13 — FILTER RAIL
   --------------------------------------------------------------------------
   The archive filter sidebar from `05-components.md` §Filter sidebar, as
   rendered by inc/filter-rail.php. Two filter groups — Department and Price —
   drawn the way `prototype.html` draws them: a titled group per filter, a
   checkbox row per option, the option count aligned to the end of the row.

   Every value is a var() from 00-tokens.css. Logical properties throughout, so
   the whole rail mirrors in RTL with no extra sheet.

   Loaded only in shop/product contexts (see aly_enqueue_assets()).
   ========================================================================== */

.aly-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   Group — <details>, so "collapsed/expanded (chevron rotates)" from the spec
   works with no JavaScript and keyboard support comes for free.
   -------------------------------------------------------------------------- */
.aly-filters__group {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-hairline);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.aly-filters__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-1);
}

/* Hide the native disclosure marker in both engines, then draw our own. */
.aly-filters__title::-webkit-details-marker { display: none; }

.aly-filters__title::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--duration-fast) var(--ease-standard);
  flex: none;
  margin-block-start: -0.2rem;
}

.aly-filters__group[open] > .aly-filters__title::after {
  transform: rotate(-135deg);
  margin-block-start: 0.15rem;
}

.aly-filters__title:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.aly-filters__list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Row — a link that behaves like a checkbox. It is an anchor, not an <input>,
   because every filter state here is a real URL: that is what makes a filtered
   grid bookmarkable and back-button-correct, which `06-pages.md` §2 argues for
   explicitly when it chooses pagination over "Load more".

   aria-pressed on the anchor carries the checked state to assistive tech; the
   box is decorative and marked aria-hidden in the markup.
   -------------------------------------------------------------------------- */
.aly-filters__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-xs);
  font-size: var(--fs-sm);
  color: var(--color-text-body);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.aly-filters__row:hover {
  background-color: var(--cream-100); /* spec: "checkbox row hover (--cream-100)" */
  color: var(--color-text);
}

.aly-filters__row:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 1px;
}

.aly-filters__row.is-checked { color: var(--color-text); font-weight: var(--fw-medium); }

.aly-filters__box {
  width: 1rem;
  height: 1rem;
  flex: none;
  border-radius: var(--radius-xs);
  box-shadow: var(--elevation-hairline);
  background-color: var(--color-surface);
  display: grid;
  place-items: center;
}

.aly-filters__row.is-checked .aly-filters__box {
  background-color: var(--gold-500);
  box-shadow: none;
  color: var(--ink-900); /* ink on gold, 8.08:1 — the rule from 00-tokens.css */
}

.aly-filters__box svg { width: 0.625rem; height: 0.625rem; display: block; }

.aly-filters__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aly-filters__count {
  margin-inline-start: auto;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  flex: none;
}

/* --------------------------------------------------------------------------
   Active-filter chips. `.aly-chip` itself is the kit's component from
   10-utilities.css; only the row wrapper and the "Clear all" link are new.
   -------------------------------------------------------------------------- */
.aly-filters .aly-chip-row {
  margin-block-end: var(--space-1);
}

.aly-filters .aly-chip { text-decoration: none; }

.aly-filters__clear {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--gold-text-on-cream);
  text-decoration: underline;
  align-self: center;
}

.aly-filters__clear:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* --------------------------------------------------------------------------
   Mobile

   `05-components.md` asks for a full-height popup behind a "Filter" button
   with a sticky "Apply (12)" footer. That needs the live result count before
   the query commits — i.e. AJAX — so it is NOT built, and this is not a
   substitute for it: what mobile gets is the same rail, stacked above the
   grid, with each group collapsible by tap. Every option is reachable and the
   rail can be folded away in two taps. The popup remains outstanding work.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .aly-filters { flex-direction: row; flex-wrap: wrap; }
  .aly-filters__group { flex: 1 1 14rem; padding-block-end: var(--space-3); }
  .aly-filters .aly-chip-row { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   The two-column archive row

   `06-pages.md` §2 draws the archive as "Filter rail (desktop: sticky aside)"
   beside the grid, and the Product Archive template really is built that way:
   the inner container is already `flex-direction: row` with two children, the
   filter column and the products column.

   Neither child was ever given a width, so both resolved to 100% and the row
   wrapped into a stack — which looked correct only for as long as the filter
   widget rendered nothing and collapsed to a thin strip. With a rail that has
   real content in it, the stack is obvious: a full-width block of filters
   sitting on top of the grid.

   Selected through :has() on the widget each column contains, rather than by
   Elementor element id, so re-saving or rebuilding the template does not
   silently detach these rules.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .elementor-location-archive .e-con-inner > .e-con:has(.elementor-widget-yith_wcan_filters) {
    flex: 0 0 16rem;
    align-self: flex-start;
    position: sticky;
    /* Clears the sticky header, which is 64px per --nav-height. */
    inset-block-start: calc(var(--nav-height) + var(--space-3));
  }

  .elementor-location-archive .e-con-inner > .e-con:has(.elementor-widget-wc-archive-products) {
    flex: 1 1 0;
    min-width: 0; /* without this the grid refuses to shrink below its content */
  }
}