/* WinRed Directory Module — base reset for the module container */
#wr-directory-root,
#wr-directory-root * {
  box-sizing: border-box;
}
#wr-directory-root img {
  max-width: 100%;
}

/* Header & footer width alignment */
.header__container.content-wrapper {
  max-width: 1900px;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.footer,
.footer .container-fluid,
.footer__container,
.footer .content-wrapper {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* Strip theme padding from wrapper elements */
#main-content .container-fluid,
#main-content .row-fluid-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Offset hero for header height */
#main-content.default-page-template #wr-directory-root {
  padding-top: calc(51px + 1rem) !important;
}

@media (max-width: 900px) {
  #main-content.default-page-template #wr-directory-root,
  #wr-directory-root {
    padding-top: 56px !important; /* Mobile nav height; banner script adds banner height on top */
  }
}

/* Normalize inconsistent candidate name casing from the data feed.
   text-transform: capitalize uppercases the first letter of each word,
   fixing lowercase names like "Don tracy" → "Don Tracy".
   All-caps names (e.g. "FL SENATE...") are handled by a JS normalizer
   in module.html that converts them to title case. */
#wr-directory-root .wr-row.wr-section-px > span {
  text-transform: capitalize;
}

/* ── Consistent 1600px max-width for ultra-wide monitors ──────────────────────
   The candidate list was capped at 1200px while the hero/header used 1900px.
   This aligns all sections at 1600px — full-width on laptops, capped on wide. */
.header__container.content-wrapper {
  max-width: 1600px !important;
}

#wr-directory-root .wr-hero-row,
#wr-directory-root [style*="max-width: 1900px"] {
  max-width: 1600px !important;
}

#wr-directory-root .wr-list-container {
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Push sticky filter bar below fixed support banner (37px) */
#wr-directory-root div[style*="sticky"] {
  top: 37px !important;
}

/* Hide PAC filter tab */
#wr-directory-root button[style*="linear-gradient"]:last-of-type,
  #wr-directory-root { min-height: 100svh; }
#wr-directory-root button {
  /* targeted via JS below */
}

/* Space between bottom of directory list and blog section */
#wr-directory-root {
  padding-bottom: 60px;
}

/* Bottom border on candidate list — matches row separator color */
#wr-directory-root .wr-list-container {
  border-bottom: 1px solid rgb(226, 232, 240);
}


  /* Shrink avatar */
  #wr-directory-root .wr-row.wr-section-px > div:first-child,
  #wr-directory-root .wr-row.wr-section-px img { width: 36px !important; height: 36px !important; }

  /* Name column: allow it to shrink, tighten font */
  #wr-directory-root .wr-row.wr-section-px > div[style*="flex:"] {
    min-width: 0 !important;
    flex: 1 1 80px !important;
  }
  #wr-directory-root .wr-row.wr-section-px > div[style*="flex:"] > span:first-child {
    font-size: 14px !important;
  }
  #wr-directory-root .wr-row.wr-section-px > div[style*="flex:"] > span:last-child {
    font-size: 12px !important;
  }

  /* Action buttons: auto-width, compact */
  #wr-directory-root .wr-col-actions {
    width: auto !important;
    min-width: 0 !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  /* Smaller buttons on mobile */
  #wr-directory-root .wr-col-actions a {
    padding: 0 10px !important;
    height: 32px !important;
    font-size: 13px !important;
  }
}

/* ── Name column: desktop truncates, mobile wraps ─────────────────────── */
#wr-directory-root .wr-name-col > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#wr-directory-root .wr-name-col > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Stats: always center on the copy side ──────────────────────────────── */
#wr-directory-root .wr-stats-row {
  justify-content: flex-start;
}

/* ── Mobile optimisations ──────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* Stats: center */
  #wr-directory-root .wr-stats-row {
    justify-content: center !important;
  }

  /* Map: cap height */
  #wr-directory-root .wr-hero-map {
    max-height: 220px !important;
    overflow: hidden !important;
  }

  /* Rows */
  #wr-directory-root .wr-row.wr-section-px {
    gap: 10px !important;
    padding: 12px 14px !important;
    flex-wrap: nowrap !important;
  }

  /* Hide state and tag */
  #wr-directory-root .wr-col-state,
  #wr-directory-root .wr-col-tag { display: none !important; }

  /* Name: wrap on mobile instead of ellipsis */
  #wr-directory-root .wr-name-col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  #wr-directory-root .wr-name-col > span:first-child,
  #wr-directory-root .wr-name-col > span:last-child {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word !important;
  }
  #wr-directory-root .wr-name-col > span:first-child { font-size: 14px !important; }
  #wr-directory-root .wr-name-col > span:last-child  { font-size: 12px !important; }

  /* Buttons: right-aligned, compact, side by side */
  #wr-directory-root .wr-col-actions {
    width: auto !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }
  #wr-directory-root .wr-col-actions a {
    padding: 0 10px !important;
    height: 32px !important;
    font-size: 13px !important;
  }
}

/* ── Action buttons: outline by default, fill on row hover ── */
.wr-row .wr-col-actions a[style*="123, 26, 42"] {
  background: transparent !important;
  color: rgb(123, 26, 42) !important;
  border: 2px solid rgb(123, 26, 42) !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.wr-row .wr-col-actions a[style*="0, 128, 87"] {
  background: transparent !important;
  color: rgb(0, 128, 87) !important;
  border: 2px solid rgb(0, 128, 87) !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.wr-row:hover .wr-col-actions a[style*="123, 26, 42"] {
  background: rgb(123, 26, 42) !important;
  color: rgb(255, 255, 255) !important;
}
.wr-row:hover .wr-col-actions a[style*="0, 128, 87"] {
  background: rgb(0, 128, 87) !important;
  color: rgb(255, 255, 255) !important;
}


/* Hide filter toggle on desktop */
#wr-directory-root #wr-filter-toggle {
  display: none !important;
}

/* — Mobile filter chips collapse — */
@media (max-width: 900px) {
  #wr-directory-root .wr-topbar-scroll > div > div {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease;
  }
  #wr-directory-root .wr-topbar-scroll > div > div.wr-filters-expanded {
    max-height: 300px !important;
  }
  #wr-directory-root #wr-filter-toggle {
    display: flex !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgb(55, 65, 81) !important;
    cursor: pointer !important;
    background: #ffffff !important;
    border: 1px solid rgb(209, 213, 219) !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
  }
}
/* Mobile: two-button reserve - hold candidate title column to a uniform width whether the row has 1 or 2 action buttons (prevents long titles overlapping the button area). Sloane 2026-06-12 */
@media (max-width: 900px) {
  #wr-directory-root .wr-col-actions { min-width: 140px !important; justify-content: flex-end !important; }
}

/* NAV_TABLET_HERO_FIX (768-900): clear fixed nav (React pads only 56px, misses 36px banner offset) + stack hero like <=767. Sloane 2026-06-15 */
@media (min-width: 768px) and (max-width: 900px) {
  #wr-directory-root { margin-top: 50px !important; }
  #wr-directory-root .wr-hero-row { flex-direction: column !important; align-items: stretch !important; }
  #wr-directory-root .wr-hero-map { order: 2 !important; width: 100% !important; padding: 32px 20px !important; }
}