/*! fc-grid-filter.css v1.0.0 · 2026-08-11 · fc-brands @fcv */
/* ============================================================
   FC Grid Filter  (fcbrands-api.netlify.app/fc-grid-filter.css)
   Search + filter + sort bar. Maintainer: TIDY. No container box — the controls
   just sit in a row; JS pins it to the top when data-sticky is set.
   Colours read the shared tokens if present, else fall back. Font = the site's
   condensed Helvetica Neue LT Pro (Typekit).
   ============================================================ */
@import url("https://use.typekit.net/kxm0tud.css");

.fc-gridfilter{
  --fcgf-ui:   var(--fc-ui,#6BCEE8);
  --fcgf-ink:  var(--fc-ink,#eaf6ff);
  --fcgf-bg:   rgba(10,16,24,.72);
  --fcgf-menu: #0a0f16;
  --fcgf-line: color-mix(in srgb,var(--fcgf-ink) 22%,transparent);
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:8px;
  width:fit-content;max-width:96vw;margin:0 auto clamp(16px,3vh,34px);
  padding:6px 8px;border-radius:999px;
  background:rgba(8,12,18,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--fcgf-line);
  font-family:"helvetica-neue-lt-pro-cond","helvetica-neue-lt-pro",Arial,sans-serif;
  font-size:12px;color:var(--fcgf-ink);
}
.fc-gridfilter *{box-sizing:border-box;}
/* strip the theme's global <button> chrome so nothing has boxes/borders it shouldn't */
.fc-gridfilter button{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;cursor:pointer;box-shadow:none;}
.fcgf-sentinel{width:100%;height:0;}

/* ---- search: outline circle (white icon) -> FILLS white on hover -> EXPANDS on click ---- */
.fcgf-search{display:flex;align-items:center;height:32px;width:32px;border-radius:999px;overflow:hidden;
  background:transparent;border:1.4px solid #fff;
  transition:width .34s cubic-bezier(.5,0,.15,1),background .2s ease,border-color .2s ease;}
.fcgf-search-btn{flex:none;width:28px;height:28px;display:grid;place-items:center;color:#fff;transition:color .2s ease;}
.fcgf-search-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.fcgf-search:not(.fcgf-open):hover{background:#fff;}
.fcgf-search:not(.fcgf-open):hover .fcgf-search-btn{color:#2a2f36;}
.fcgf-search.fcgf-open{width:min(260px,54vw);background:#fff;border-color:#fff;}
.fcgf-search.fcgf-open .fcgf-search-btn{color:#2a2f36;}
.fcgf-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:#0a0f16;
  font-family:"helvetica-neue-lt-pro-cond","helvetica-neue-lt-pro",Arial,sans-serif;
  font-size:13px;letter-spacing:.03em;text-transform:uppercase;outline:0;padding:0 14px 0 0;opacity:0;transition:opacity .2s;}
.fcgf-search.fcgf-open input{opacity:1;}
.fcgf-search input::placeholder{color:rgba(10,15,22,.5);text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:700;
  font-family:"helvetica-neue-lt-pro-cond","helvetica-neue-lt-pro",Arial,sans-serif;}

/* ---- branded custom dropdowns (Date / Stage / Sort) ---- */
.fcgf-dd{position:relative;}
.fcgf-dd-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 8px;border:0;background:transparent;white-space:nowrap;
  color:var(--fcgf-ink);font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:color .18s;}
.fcgf-search{flex:none;}   /* never shrink/wrap; the input inside fills the pill */
.fcgf-dd-btn:hover{color:var(--fcgf-ui);}
.fcgf-dd.fcgf-set .fcgf-dd-btn{color:var(--fcgf-ui);}
.fcgf-dd-caret{width:6px;height:6px;border-right:2px solid var(--fcgf-ui);border-bottom:2px solid var(--fcgf-ui);
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;}
.fcgf-dd.fcgf-open .fcgf-dd-caret{transform:translateY(1px) rotate(-135deg);}
.fcgf-dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:max-content;z-index:1001;
  background:rgba(6,9,14,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:10px;padding:6px 4px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;max-height:60vh;overflow-y:auto;}
.fcgf-dd.fcgf-open .fcgf-dd-menu{opacity:1;transform:none;pointer-events:auto;}
.fcgf-dd-opt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 14px;background:transparent;
  color:var(--fcgf-ink);font:inherit;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;white-space:nowrap;transition:color .12s;}
.fcgf-dd-opt:hover{color:var(--fcgf-ui);}
.fcgf-dd-opt.fcgf-cur{color:var(--fcgf-ui);}
.fcgf-sort-arrow,.fcgf-opt-arrow{display:inline-block;width:9px;text-align:center;font-size:11px;line-height:1;color:var(--fcgf-ui);}

/* ---- time range: dual slider ---- */
.fcgf-time{display:inline-flex;align-items:center;gap:12px;height:44px;border-radius:999px;
  background:var(--fcgf-bg);border:1px solid var(--fcgf-line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:0 18px;}
.fcgf-time-lab{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--fcgf-ink) 55%,transparent);}
.fcgf-time-val{font-size:12px;letter-spacing:.06em;font-weight:700;color:var(--fcgf-ui);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:118px;text-align:center;}
.fcgf-slider{position:relative;width:clamp(120px,20vw,190px);height:22px;}
.fcgf-slider .fcgf-track{position:absolute;top:50%;left:0;right:0;height:3px;transform:translateY(-50%);background:color-mix(in srgb,var(--fcgf-ink) 20%,transparent);border-radius:2px;}
.fcgf-slider .fcgf-fill{position:absolute;top:50%;height:3px;transform:translateY(-50%);background:var(--fcgf-ui);border-radius:2px;}
.fcgf-slider input[type=range]{position:absolute;top:0;left:0;width:100%;height:22px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;pointer-events:none;}
.fcgf-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:15px;height:15px;border-radius:50%;background:var(--fcgf-ui);border:2px solid #04070d;cursor:pointer;box-shadow:0 0 0 1px color-mix(in srgb,var(--fcgf-ui) 60%,transparent);}
.fcgf-slider input[type=range]::-moz-range-thumb{pointer-events:auto;width:15px;height:15px;border-radius:50%;background:var(--fcgf-ui);border:2px solid #04070d;cursor:pointer;}

/* ---- reset ---- */
.fcgf-reset{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;
  background:transparent;color:color-mix(in srgb,var(--fcgf-ink) 58%,transparent);cursor:pointer;transition:color .2s;}
.fcgf-reset:hover{color:var(--fcgf-ink);}
.fcgf-reset svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ---- filtered-out units + empty ---- */
.fcgf-hide{display:none !important;}
.fcgf-empty{width:100%;padding:6vh 0;text-align:center;letter-spacing:.16em;text-transform:uppercase;font-size:13px;
  color:color-mix(in srgb,var(--fcgf-ink) 55%,transparent);display:none;}
.fcgf-empty.fcgf-on{display:block;}

/* ---- responsive grid the filter owns (3 columns max) ---- */
.fcgf-grid{display:grid;align-items:start;grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:960px){ .fcgf-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .fcgf-grid{grid-template-columns:1fr;} }

/* ---- pinned to top (z-index set inline in JS) + scroll-shrink; hover to expand ---- */
.fc-gridfilter.fcgf-pinned{transform:translateX(-50%);transform-origin:top center;transition:transform .28s cubic-bezier(.5,0,.15,1);}
.fc-gridfilter.fcgf-pinned.fcgf-shrunk{transform:translateX(-50%) scale(.9);}

@media (max-width:640px){
  .fc-gridfilter{gap:8px;}
  .fcgf-time{order:10;width:100%;justify-content:space-between;}
}
@media (prefers-reduced-motion:reduce){ .fcgf-search,.fcgf-dd-menu{transition:none;} }

:root{--fcv-fc-grid-filter-css:"1.0.0";}