/* =======================================================================
   REEx Directory — scoped styles

   Every selector lives under .reex-dir. Divi ships broad element styles
   (and this runs inside a Theme Builder body layout), so nothing here is
   allowed to be a bare tag selector.
   ======================================================================= */

/* -----------------------------------------------------------------------
   The one rule in this file that reaches outside .reex-dir, and the reason
   it has to.

   Divi sets overflow-x:hidden on #page-container, which the browser computes
   as `overflow: hidden auto`. That makes the wrapper a scroll container --
   but one that never actually scrolls, because the document does. Any
   position:sticky descendant therefore resolves against a scrollport that
   never moves, and simply scrolls away. Measured on staging: the bar sat at
   top:-163px after a 400px scroll.

   `clip` is the precise fix: it still clips horizontal overflow, which is
   what Divi's rule is there for, but unlike `hidden` it does NOT create a
   scroll container, so sticky keeps resolving against the viewport.
   `overflow-y: visible` is legal alongside `clip` (it is not blockified the
   way it would be next to `hidden`).

   This is safely scoped despite the bare ID: this stylesheet is registered
   but only ENQUEUED by the shortcode, so it exists solely on pages that
   actually render a directory. Browsers without `clip` (Safari < 16) ignore
   the declaration and simply keep the old non-sticky behaviour.
   -------------------------------------------------------------------- */
/* Divi ships this in et-divi-customizer.min.css:
     body:not(.et-fb) #page-container { overflow-x: hidden !important; }
   so overriding it needs both !important and higher specificity. The leading
   `html` and the mirrored :not() do the latter; nothing less wins. */
html body:not(.et-fb) #page-container {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.reex-dir,
.reex-dir *,
.reex-dir *::before,
.reex-dir *::after {
  box-sizing: border-box;
}

.reex-dir {
  /* -- Brand palette ------------------------------------------------------
     Sampled from the live site rather than copied from reex-rankings, whose
     red (#a61b0f) is the legacy Divi accent_color and appears nowhere in the
     current design. Measured on a production company page: teal is the
     interactive colour (links, solid CTAs, borders), gold is the secondary
     CTA outline, and body text is #181c1d.

     Contrast, computed not assumed:
       #0a8289 on white ......... 4.60:1  AA (white text on a teal fill)
       #0a6a70 on white ......... 6.35:1  AA (accent text, e.g. hover)
       #0a8289 on #f5f6f6 ....... 4.25:1  AA Large only -> headings only
       #525a5c on white ......... 7.06:1  AA (muted meta line)
       #f2a30f on white ......... 2.10:1  FAILS -> border/accent, never text
     -------------------------------------------------------------------- */
  --reex-brand-teal:      #0a8289;  /* primary: fills, borders, active state */
  --reex-brand-teal-deep: #0a6a70;  /* primary as TEXT on a light background */
  --reex-brand-teal-soft: #c4ecee;  /* tint: soft borders, highlights */
  --reex-brand-gold:      #f2a30f;  /* secondary accent. Never text. */
  --reex-brand-fg:        #181c1d;
  --reex-brand-bg:        #f5f6f6;
  --reex-brand-card:      #ffffff;

  /* -- Semantic mapping --------------------------------------------------- */
  --reex-bg:            var(--reex-brand-card);
  --reex-fg:            var(--reex-brand-fg);
  --reex-muted:         #525a5c;
  --reex-muted-2:       #8b9294;
  --reex-border:        #dde1e1;
  --reex-border-strong: #c3caca;
  --reex-surface-alt:   var(--reex-brand-bg);
  --reex-accent:        var(--reex-brand-teal);
  --reex-accent-hover:  var(--reex-brand-teal-deep);
  /* Accent used as text sits one step darker than the fill, which is both
     what the site's own links do and what clears AA on white. */
  --reex-accent-text:   var(--reex-brand-teal-deep);
  --reex-accent-fg:     #ffffff;
  --reex-accent-soft:   rgba(10, 130, 137, 0.12);
  --reex-accent-shadow: rgba(10, 130, 137, 0.16);

  /* -- Typography --------------------------------------------------------- */
  --reex-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --reex-font-size-xs:   11px;
  --reex-font-size-sm:   12px;
  --reex-font-size-md:   13px;
  --reex-font-size-base: 14px;
  --reex-font-size-lg:   16px;
  --reex-font-size-xl:   20px;

  /* -- Radii + effects ---------------------------------------------------- */
  --reex-radius-sm:   4px;
  --reex-radius:      6px;
  --reex-radius-md:   8px;
  --reex-radius-pill: 999px;
  --reex-shadow:       0 4px 16px rgba(24, 28, 29, 0.08);
  --reex-shadow-hover: 0 6px 20px var(--reex-accent-shadow);
  --reex-transition:   0.18s ease;

  /* Distance from the top of the viewport at which the control bar sticks.
     The script overwrites this with the measured height of Divi's fixed
     header; the 0 fallback keeps the bar usable if that measurement fails. */
  --reex-dir-offset: 0px;

  font-family: var(--reex-font);
  font-size: var(--reex-font-size-base);
  line-height: 1.5;
  color: var(--reex-fg);
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

/* Visually hidden, still announced. */
.reex-dir .reex-dir__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------------------------
   Sticky control bar
   -------------------------------------------------------------------- */

.reex-dir .reex-dir__bar {
  position: sticky;
  top: var(--reex-dir-offset);
  z-index: 20;
  background: var(--reex-surface-alt);
  border-bottom: 1px solid var(--reex-border);
  padding: 12px 0 8px;
  margin-bottom: 8px;
}

/* A sticky bar sitting on a page background that is not the same colour
   reads as a floating slab, so bleed it edge to edge behind itself. */
.reex-dir .reex-dir__bar::before {
  content: "";
  position: absolute;
  inset: 0 -50vw;
  background: inherit;
  border-bottom: inherit;
  z-index: -1;
}

.reex-dir .reex-dir__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

/* -- Search -------------------------------------------------------------- */

.reex-dir .reex-dir__search {
  position: relative;
  /* Capped rather than greedy: left to grow, the search field pushed the
     chips and the dropdown onto their own rows, and the sticky bar grew to
     176px -- a fifth of a 900px viewport, on top of Divi's 80px header. */
  flex: 1 1 240px;
  max-width: 300px;
  min-width: 0;
  display: flex;
  align-items: center;
}

.reex-dir .reex-dir__search-icon {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  color: var(--reex-muted-2);
  pointer-events: none;
}

.reex-dir .reex-dir__input {
  width: 100%;
  /* 16px minimum: anything smaller makes iOS Safari zoom the viewport on
     focus, which throws the sticky bar and the letter anchors out of place. */
  font-size: 16px;
  font-family: inherit;
  color: var(--reex-fg);
  background: var(--reex-bg);
  border: 1px solid var(--reex-border-strong);
  border-radius: var(--reex-radius);
  padding: 9px 34px 9px 34px;
  margin: 0;
  line-height: 1.4;
  transition: border-color var(--reex-transition), box-shadow var(--reex-transition);
  -webkit-appearance: none;
  appearance: none;
}

.reex-dir .reex-dir__input:focus {
  outline: none;
  border-color: var(--reex-accent);
  box-shadow: 0 0 0 3px var(--reex-accent-soft);
}

/* The browser's own search affordance would sit on top of our clear button. */
.reex-dir .reex-dir__input::-webkit-search-decoration,
.reex-dir .reex-dir__input::-webkit-search-cancel-button,
.reex-dir .reex-dir__input::-webkit-search-results-button {
  -webkit-appearance: none;
  appearance: none;
}

.reex-dir .reex-dir__clear {
  position: absolute;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--reex-radius-pill);
  background: transparent;
  color: var(--reex-muted);
  cursor: pointer;
  transition: background var(--reex-transition), color var(--reex-transition);
}

.reex-dir .reex-dir__clear svg { width: 14px; height: 14px; }
.reex-dir .reex-dir__clear:hover { background: var(--reex-border); color: var(--reex-fg); }
.reex-dir .reex-dir__clear[hidden] { display: none; }

/* -- Chips --------------------------------------------------------------- */

.reex-dir .reex-dir__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.reex-dir .reex-dir__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: var(--reex-font-size-md);
  line-height: 1;
  color: var(--reex-fg);
  background: var(--reex-bg);
  border: 1px solid var(--reex-border-strong);
  border-radius: var(--reex-radius-pill);
  padding: 8px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--reex-transition), border-color var(--reex-transition), color var(--reex-transition);
}

.reex-dir .reex-dir__chip-count {
  font-size: var(--reex-font-size-xs);
  color: var(--reex-muted);
  font-variant-numeric: tabular-nums;
}

.reex-dir .reex-dir__chip:hover {
  border-color: var(--reex-accent);
  color: var(--reex-accent-text);
}

.reex-dir .reex-dir__chip.is-active {
  background: var(--reex-accent);
  border-color: var(--reex-accent);
  color: var(--reex-accent-fg);
}

.reex-dir .reex-dir__chip.is-active .reex-dir__chip-count {
  color: rgba(255, 255, 255, 0.75);
}

.reex-dir .reex-dir__chip:focus-visible,
.reex-dir .reex-dir__letter-link:focus-visible,
.reex-dir .reex-dir__card:focus-visible,
.reex-dir .reex-dir__reset:focus-visible,
.reex-dir .reex-dir__select:focus-visible,
.reex-dir .reex-dir__clear:focus-visible {
  outline: 2px solid var(--reex-accent);
  outline-offset: 2px;
}

/* -- Select -------------------------------------------------------------- */

.reex-dir .reex-dir__selectwrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 220px;
  min-width: 0;
}

.reex-dir .reex-dir__select {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* Same iOS zoom guard as the search input. */
  color: var(--reex-fg);
  background: var(--reex-bg);
  border: 1px solid var(--reex-border-strong);
  border-radius: var(--reex-radius);
  padding: 9px 30px 9px 12px;
  margin: 0;
  line-height: 1.4;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--reex-transition), box-shadow var(--reex-transition);
}

.reex-dir .reex-dir__select:focus {
  outline: none;
  border-color: var(--reex-accent);
  box-shadow: 0 0 0 3px var(--reex-accent-soft);
}

.reex-dir .reex-dir__select.is-active {
  border-color: var(--reex-accent);
  color: var(--reex-accent-text);
}

.reex-dir .reex-dir__caret {
  position: absolute;
  right: 10px;
  width: 14px;
  height: 14px;
  color: var(--reex-muted);
  pointer-events: none;
}

/* -- A–Z jump bar -------------------------------------------------------- */

.reex-dir .reex-dir__alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.reex-dir .reex-dir__letter-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 4px;
  font-size: var(--reex-font-size-md);
  font-weight: 600;
  line-height: 1;
  color: var(--reex-fg);
  text-decoration: none;
  background: var(--reex-bg);
  border: 1px solid var(--reex-border);
  border-radius: var(--reex-radius-sm);
  transition: background var(--reex-transition), color var(--reex-transition), border-color var(--reex-transition);
}

.reex-dir a.reex-dir__letter-link:hover {
  background: var(--reex-accent);
  border-color: var(--reex-accent);
  color: var(--reex-accent-fg);
  text-decoration: none;
}

/* Two disabled states: '.is-empty' means the letter has no rows at all;
   '.is-hidden' means the current search or filter emptied it. Both are
   kept in the bar rather than removed, so it never reflows as you type. */
.reex-dir .reex-dir__letter-link.is-empty,
.reex-dir .reex-dir__letter-link.is-hidden {
  color: var(--reex-muted-2);
  background: transparent;
  border-color: transparent;
  pointer-events: none;
  cursor: default;
}

/* -- Result count -------------------------------------------------------- */

.reex-dir .reex-dir__count {
  font-size: var(--reex-font-size-sm);
  color: var(--reex-muted);
  margin: 0 0 14px;
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------
   Letter sections and cards
   -------------------------------------------------------------------- */

.reex-dir .reex-dir__section {
  margin: 0 0 26px;
}

.reex-dir .reex-dir__section[hidden] { display: none; }

.reex-dir .reex-dir__letter {
  font-size: var(--reex-font-size-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--reex-accent);
  margin: 0 0 10px;
  padding: 0 0 6px;
  border-bottom: 2px solid var(--reex-border);
  /* Also set inline by the script from the live header + bar height; this
     value is the no-JS floor so a #anchor still clears the Divi header. */
  scroll-margin-top: 140px;
}

.reex-dir .reex-dir__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.reex-dir .reex-dir__grid > .reex-dir__item {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reex-dir .reex-dir__item[hidden] { display: none; }

.reex-dir .reex-dir__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  height: 100%;
  padding: 13px 34px 13px 15px;
  background: var(--reex-bg);
  border: 1px solid var(--reex-border);
  border-left: 3px solid var(--reex-border);
  border-radius: var(--reex-radius-md);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--reex-transition),
    box-shadow var(--reex-transition),
    transform var(--reex-transition);
}

.reex-dir .reex-dir__name {
  font-size: var(--reex-font-size-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--reex-fg);
  transition: color var(--reex-transition);
}

.reex-dir .reex-dir__meta {
  display: block;
  font-size: var(--reex-font-size-sm);
  color: var(--reex-muted);
  line-height: 1.45;
}

.reex-dir .reex-dir__sep { margin: 0 5px; color: var(--reex-muted-2); }

.reex-dir .reex-dir__fact.is-ticker,
.reex-dir .reex-dir__fact.is-code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--reex-fg);
}

.reex-dir .reex-dir__chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  color: var(--reex-muted-2);
  /* Visible at rest, not only on hover: a touch device has no hover state,
     so hiding this would leave the card with no clickable affordance. */
  opacity: 0.55;
  transition: transform var(--reex-transition), color var(--reex-transition), opacity var(--reex-transition);
}

/* Hover effects only where hover genuinely exists. On a touch screen these
   rules fire on tap and stick until the next tap, which reads as a bug. */
@media (hover: hover) {
  .reex-dir .reex-dir__card:hover {
    border-color: var(--reex-border-strong);
    border-left-color: var(--reex-accent);
    box-shadow: var(--reex-shadow-hover);
    transform: translateY(-2px);
  }
  .reex-dir .reex-dir__card:hover .reex-dir__name { color: var(--reex-accent-text); }
  .reex-dir .reex-dir__card:hover .reex-dir__chevron {
    color: var(--reex-accent-text);
    opacity: 1;
    transform: translateX(3px);
  }
}

/* Keyboard parity: focus gets the same treatment as hover. */
.reex-dir .reex-dir__card:focus-visible {
  border-left-color: var(--reex-accent);
}
.reex-dir .reex-dir__card:focus-visible .reex-dir__name { color: var(--reex-accent-text); }

.reex-dir .reex-dir__card:active { transform: translateY(0); }

/* -----------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------- */

.reex-dir .reex-dir__empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: var(--reex-font-size-base);
  color: var(--reex-muted);
  background: var(--reex-surface-alt);
  border: 1px dashed var(--reex-border-strong);
  border-radius: var(--reex-radius-md);
  padding: 22px;
  margin: 0;
}

.reex-dir .reex-dir__empty[hidden] { display: none; }

.reex-dir .reex-dir__reset {
  font-family: inherit;
  font-size: var(--reex-font-size-md);
  color: var(--reex-accent-fg);
  background: var(--reex-accent);
  border: 0;
  border-radius: var(--reex-radius);
  padding: 8px 14px;
  cursor: pointer;
  transition: background var(--reex-transition);
}

.reex-dir .reex-dir__reset:hover { background: var(--reex-accent-hover); }

.reex-dir .reex-dir__note {
  font-size: var(--reex-font-size-sm);
  color: var(--reex-muted);
  margin: 16px 0 0;
}

/* -----------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */

@media (max-width: 980px) {
  .reex-dir .reex-dir__selectwrap { flex: 1 1 180px; }
}

@media (max-width: 782px) {
  .reex-dir .reex-dir__search { flex: 1 1 100%; max-width: none; }
  .reex-dir .reex-dir__chips { width: 100%; }
  .reex-dir .reex-dir__chip { flex: 1 1 auto; justify-content: center; }
  .reex-dir .reex-dir__selectwrap { flex: 1 1 100%; }
  /* The grid deliberately does NOT collapse here. 768px fits two 260px
     columns comfortably; forcing one produced 600px-wide cards with half the
     row empty. It collapses at 600px instead, below. */
}

@media (max-width: 600px) {
  .reex-dir .reex-dir__bar { padding: 10px 0 6px; }

}

/* Once pinned, drop the filters and keep search + the A-Z index. The full bar
   is ~245px of an 812px phone and ~227px of a 1024px tablet -- a fifth to a
   third of the screen permanently spent on chrome. `.has-filter` suppresses
   the collapse whenever a filter is actually applied, so an active control is
   never hidden from the reader. */
@media (max-width: 782px) {
  .reex-dir .reex-dir__bar.is-stuck:not(.has-filter) .reex-dir__chips,
  .reex-dir .reex-dir__bar.is-stuck:not(.has-filter) .reex-dir__selectwrap {
    display: none;
  }
  .reex-dir .reex-dir__bar.is-stuck:not(.has-filter) .reex-dir__controls {
    margin-bottom: 6px;
  }
}

/* Zero-height probe the script inserts above the bar to detect pinning.
   It must not affect layout. */
.reex-dir .reex-dir__sentinel {
  height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

@media (max-width: 600px) {
  .reex-dir .reex-dir__controls { gap: 6px; margin-bottom: 8px; }

  /* 26 letters as an even grid rather than a horizontal scroller: a
     scroller hides half the alphabet behind a gesture with no affordance. */
  .reex-dir .reex-dir__alpha {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 3px;
  }
  .reex-dir .reex-dir__letter-link {
    min-width: 0;
    width: 100%;
    height: 32px;
    font-size: var(--reex-font-size-sm);
  }
  .reex-dir .reex-dir__grid { grid-template-columns: 1fr; }
  .reex-dir .reex-dir__letter { font-size: var(--reex-font-size-lg); }
  .reex-dir .reex-dir__card { padding: 12px 30px 12px 13px; }
  .reex-dir .reex-dir__section { margin-bottom: 20px; }
}

/* -----------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .reex-dir .reex-dir__card,
  .reex-dir .reex-dir__chevron,
  .reex-dir .reex-dir__name,
  .reex-dir .reex-dir__chip,
  .reex-dir .reex-dir__input,
  .reex-dir .reex-dir__select {
    transition: none;
  }
  .reex-dir .reex-dir__card:hover { transform: none; }
  .reex-dir .reex-dir__card:hover .reex-dir__chevron { transform: none; }
}