/* ==========================================================================
   _base.css – Global Styles, Typography, Layout Utilities
   ========================================================================== */

/* ==========================================================================
   Table of Contents
   ========================================================================== */
/**
 * 1.0 Headings
 * 2.0 Links
 * 3.0 Text Utilities
 * 4.0 Layout Utilities
 * 5.0 Dark Mode Overrides
 */

/* ==========================================================================
   1.0 Headings
   ========================================================================== */
/* IDX Subheader headings now centralized in typography.css */

/* ==========================================================================
   Editorial Eyebrow + Dividers (global, tokenized)
   ========================================================================== */
/* Small uppercase label used above section headings */
.kr-eyebrow {
  margin-bottom: 4px;
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Horizontal divider between major blocks */
.kr-divider {
  height: 1px;
  margin: 60px 0;
  background: var(--gradient-divider);
}

/* ==========================================================================
   12.0 Social Login Buttons polish
   Keep brand images/colors; align spacing, radius, focus, and contrast.
   ========================================================================== */

/* Container spacing */
/* Social login row: add breathing room between circular buttons */
#IDX-social-media-logins {
  display: flex;
  align-items: center;
  margin: 20px 0;
  gap: calc(var(--space-4, 20px));
}

.IDX-social-form {
  display: inline-block;
}

/* Buttons: keep brand backgrounds; add consistent radius, border, and focus */
#IDX-social-google button,
#IDX-social-facebook button {
  width: 50px;
  min-width: 50px;
  height: 50px;
  /* defeat generic fallback min-width */
  padding: 0;
  background-repeat: no-repeat;
  /* keep perfect circle */
  background-position: center;
  background-size: 60% auto;
  /* ensure logos fit nicely */
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-circle, 50%);
  box-shadow: var(--shadow-sm);
  color: var(--idx-text-primary, var(--gray-900));
  transition: transform var(--anim-duration-fast, 0.2s) ease;
}

#IDX-social-google button:hover,
#IDX-social-facebook button:hover {
  transform: scale(1.02);
}

#IDX-social-google button:focus-visible,
#IDX-social-facebook button:focus-visible {
  outline: 2px solid var(--kaplon-blue);
  outline-offset: 2px;
}

#IDX-social-google button span,
#IDX-social-facebook button span {
  color: inherit;
}

/* ==========================================================================
   IDX Visual Checklist v2.1 parity (ported from dev/dev-bundle-v2.1.css)
   Keeps production theme aligned with latest contrast & token fixes.
   ========================================================================== */

.IDX-wrapper-standard {
  --idx-accent: var(--kaplon-red);
  --idx-surface-bg: var(--kaplon-white);
  --idx-surface-card: var(--surface-soft);
  --idx-surface-1: var(--kaplon-white);
  --idx-surface-2: var(--surface-soft);
  --idx-surface-3: color-mix(in oklab, var(--surface-soft) 85%, var(--kaplon-red));
  --idx-border: var(--gray-border);
  --idx-border-strong: var(--gray-border);
  --idx-border-subtle: var(--gray-border);
  --idx-success-bg: color(srgb 0.914 0.973 0.925);
  --idx-success-text: color(srgb 0.102 0.42 0.204);
  --idx-warning-bg: color(srgb 1 0.957 0.808);
  --idx-warning-text: color(srgb 0.478 0.345 0);
  --idx-error-bg: color(srgb 0.992 0.91 0.91);
  --idx-error-text: color(srgb 0.722 0.11 0.11);
  --idx-info-bg: color(srgb 0.91 0.953 1);
  --idx-info-text: color(srgb 0.118 0.251 0.686);
  --idx-link: var(--kaplon-blue);
  --idx-link-hover: var(--kaplon-red);
  --idx-focus-ring: color(srgb 0 0 0 / 0.15);
  --idx-text-primary: var(--gray-900);
  --idx-text-secondary: var(--gray-700);
  --idx-text-muted: var(--gray-600);
  --idx-color-accent-bg: var(--idx-accent);
  --idx-color-accent-text: var(--white);
  --idx-color-accent: var(--idx-accent);
  --idx-color-accent-ring: color(srgb 0 0 0 / 0.08);
}

.IDX-wrapper-standard .IDX-leadTools {
  background: var(--idx-surface-card, var(--surface-soft));
  border: 1px solid var(--idx-border, var(--gray-border));
  box-shadow: var(--shadow-sm);
  color: var(--idx-text-primary, var(--gray-900));
}

/* ==========================================================================
   11.0 Map Popup (Leaflet) dark/light
   Theme popup wrapper and content to match site tokens.
   ========================================================================== */

.IDX-wrapper-standard .IDX-custom-map .leaflet-popup-content-wrapper {
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-1, 6px);
  box-shadow: var(--shadow-sm);
  color: var(--kaplon-blue);
}

.IDX-wrapper-standard .IDX-custom-map .leaflet-popup-content {
  color: inherit;
  line-height: 1.5;
}

.IDX-wrapper-standard .IDX-custom-map .leaflet-popup-content :where(a) {
  color: var(--kaplon-blue);
  text-decoration: underline;
}

.IDX-wrapper-standard .IDX-custom-map .leaflet-popup-content :where(a:hover, a:focus) {
  color: var(--kaplon-red);
}

/* Clarify link styling inside IDX result alerts (e.g., "New listings available") */

/* ==========================================================================
   10.0 Lead Tools Bar (light/dark)
   Vendor default: green #2e8540 with white text. Tokenize to brand surface.
   ========================================================================== */

/* Base (light) */
#IDX-leadToolsBar {
  height: 60px;
  padding: 10px 12px 0;
  background: var(--kaplon-blue);
  color: var(--white);
  line-height: 30px;
  text-align: center;
}

#IDX-leadToolsBar a {
  color: var(--white);
  text-decoration: underline;
}

/* Desktop alignment mirrors vendor */
@media only screen and (min-width: 641px) {
  #IDX-leadToolsBar {
    height: 30px;
    padding-top: 0;
    text-align: inherit;
    vertical-align: middle;
  }

  #IDX-leadInfo {
    margin-left: 10px;
  }

  #IDX-leadAccountLink {
    float: right;
    margin-right: 10px;
  }
}

/* Mobile stacking mirrors vendor */
@media only screen and (max-width: 640px) {

  #IDX-leadLogOutLink,
  #IDX-leadInfo {
    float: left;
  }

  #IDX-leadAccountLink {
    float: left;
    clear: left;
    margin-top: 5px;
  }
}

/* Dark mode */

/* IDX Subheader spacing - target multiple layers */
#IDX-Subheader-Page {
  padding-top: clamp(1.5em, 3vw, 2em) !important;
}

#IDX-Subheader-Page .kaplon-section {
  margin-top: clamp(1em, 2vw, 1.5em) !important;
  margin-bottom: 1em !important;
  padding-top: clamp(1em, 2vw, 1.25em) !important;
}

/* ==========================================================================
   2.0 Links
   ========================================================================== */
/* Links */
.IDX-wrapper-standard a {
  color: var(--kaplon-blue);
  text-decoration: none;
  transition: color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease-in-out);
}

.IDX-wrapper-standard a:hover {
  color: var(--kaplon-red);
  text-decoration: underline;
}

.IDX-wrapper-standard a:focus-visible {
  outline: 2px solid var(--kaplon-blue);
  outline-offset: 2px;
}

/* ==========================================================================
   3.0 Text Utilities
   ========================================================================== */
/* Text Utilities */
.IDX-text--muted {
  color: var(--gray-600);
}

.IDX-text--highlight {
  color: var(--kaplon-blue-dark);
  font-weight: 600;
}

/* ==========================================================================
   4.0 Layout Utilities
   ========================================================================== */
/* Layout Utilities */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.mt-1 {
  margin-top: calc(var(--space-1) / 2);
  /* 0.25rem */
}

.mt-2 {
  margin-top: var(--space-1);
  /* 0.5rem */
}

/* ==========================================================================
   5.0 Dark Mode Overrides
   ========================================================================== */

/* ==========================================================================
   6.0 IDX Global Overrides (Nav, Filters, Dividers)
   Scope: Only within IDX containers to avoid affecting WP theme
   ========================================================================== */

/* Top tabbed nav used on Advanced/Address/MLS pages */
.IDX-wrapper-standard .IDX-precision-navbar {
  padding: clamp(0.5rem, 1vw, 0.75rem) 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Ensure nav list inside precision navbar lays out horizontally */
.IDX-wrapper-standard :where(.IDX-precision-navbar) .IDX-searchNav {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: clamp(0.5rem, 1vw, 0.75rem);
}

.IDX-wrapper-standard :where(.IDX-precision-navbar) .IDX-nav-items-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 0.75rem);
}

.IDX-wrapper-standard .IDX-precision-navbar hr {
  height: 1px;
  margin: clamp(0.5rem, 1vw, 0.75rem) 0;
  background: var(--gradient-divider) !important;
  border: 0;
  border-radius: var(--radius-xs, 2px);
}

/* Fallback: Some templates render `.IDX-searchNav` without the `.IDX-precision-navbar` wrapper */
.IDX-wrapper-standard :where(.IDX-searchNav) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: clamp(0.5rem, 1vw, 0.75rem);
}

/* Map Search: top nav buttons (distinct DOM from precision navbar) */
#navigation-container :where(.idx-nav-button-container) {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1vw, 0.75rem);
}

/* Map Search: subtle divider */
.no-gap-hr {
  height: 1px;
  margin: 0 0 clamp(0.5rem, 1vw, 0.75rem);
  background: var(--gradient-divider) !important;
  border: 0;
  border-radius: var(--radius-xs, 2px);
}

/* Map Search: filter bar layout */
#prime-map-search--filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1, 0.5rem);
}

/* Map Search: give the map/results column real height + scrolling room */
@media (min-width: 768px) {

  #prime-map-search--main-content-container,
  #prime-map-search--map {
    height: auto !important;
    min-height: clamp(420px, 70vh, 780px) !important;
  }

  #prime-map-search--results {
    height: auto !important;
    min-height: clamp(360px, 55vh, 640px);
    max-height: clamp(420px, 72vh, 760px);
    padding-right: clamp(0.5rem, 1vw, 1rem);
    overflow-y: auto;
    scroll-behavior: smooth;
  }

  #prime-map-search--results--header {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
    padding-top: clamp(0.5rem, 1vw, 0.75rem);
    background: var(--surface-soft);
    backdrop-filter: blur(6px);
  }

  #prime-map-search--results::-webkit-scrollbar {
    width: 10px;
  }

  #prime-map-search--results::-webkit-scrollbar-track {
    background: var(--surface-soft);
  }

  #prime-map-search--results::-webkit-scrollbar-thumb {
    background: var(--kaplon-blue);
    border-radius: 999px;
  }
}

/* Map Search: mobile filters sheet header */
.mls-filter-container-mobile .mls-filter-container-mobile-header {
  background: var(--kaplon-blue);
  color: var(--white);
}

/* Shared: improve small badges/labels in mobile sheets */
.mls-filter-container-mobile .header-label-text-format,
.idx-filter-input-section-mobile .header-label-text-format {
  color: var(--kaplon-blue);
}

/* ==========================================================================
   7.0 Dark Mode – IDX-specific tweaks
   ========================================================================== */

/* ==========================================================================
   8.0 Results Refine Search Panel (light/dark)
   Purpose: Replace vendor #f2f2f2/#ccc with tokenized surfaces/borders and
   brand caret color. Keeps alignment with our precision nav + filter bars.
   ========================================================================== */

/* Panel shell */
.IDX-wrapper-standard .IDX-results-refine-search-wrap {
  background: var(--surface-soft);
  border-top: 1px solid var(--gray-border);
  box-shadow: var(--shadow-sm);
}

/* Toggle button: brand primary (red bg, white text) */
.IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle) {
  padding: 6px 12px;
  background: var(--button-red-bg);
  border: 1px solid var(--button-red-border);
  border-radius: var(--radius-2, 8px);
  box-shadow: var(--shadow-xs);
  color: var(--white) !important;
  line-height: 1.2;
  text-shadow: none;
  transition: background-color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease-in-out),
    border-color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease-in-out),
    color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease-in-out);
}

/* interactive states */
.IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle):hover,
.IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle):focus {
  background: var(--button-red-bg-hover);
  border-color: var(--button-red-bg-hover);
}

.IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle):active {
  background: var(--button-red-bg-hover);
  border-color: var(--button-red-bg-hover);
}

.IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle):focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Remove gradient frame from universal fallback, if applied */
.IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle)::before {
  display: none !important;
}

/* ==========================================================================
   9.0 Top Actions (non-precision) – container + items + links
   Align vendor block with tokenized surfaces, dividers, and link treatments.
   Vendor defaults used #f2f2f2, #ccc, #006899, and white dividers.
   ========================================================================== */

/* Container background */
.IDX-wrapper-standard .IDX-topActions {
  background: var(--surface-soft);
  gap: 4px 6px;
}

/* Individual items: mobile bottom divider */
.IDX-wrapper-standard .IDX-topAction {
  border-bottom: 1px solid var(--gray-border);
}

.IDX-wrapper-standard .IDX-topActions .IDX-divider {
  border-color: var(--gray-border);
}

/* Desktop inline layout: soften right divider and spacing */
@media screen and (min-width: 641px) {
  .IDX-wrapper-standard .IDX-topAction {
    padding: 0 15px;
    border: none;
    border-right: 1px solid var(--gray-border);
  }

  .IDX-wrapper-standard .IDX-topAction:last-child {
    border-right: none;
  }
}

/* Link color tokenization */
.IDX-wrapper-standard :where(.IDX-topAction) a,
.IDX-wrapper-standard :where(.IDX-topAction) .IDX-btn-link {
  color: var(--kaplon-blue);
  text-decoration: none;
  transition: color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease-in-out);
}

.IDX-wrapper-standard :where(.IDX-topAction a:hover),
.IDX-wrapper-standard :where(.IDX-topAction a:focus) {
  color: var(--kaplon-red);
}

.IDX-wrapper-standard :where(.IDX-topAction a):focus-visible,
.IDX-wrapper-standard :where(.IDX-topAction .IDX-btn-link):focus-visible {
  outline: 2px solid var(--kaplon-blue);
  outline-offset: 2px;
}

/* Caret triangle on the toggle */
.IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle)::after {
  border-top-color: var(--white) !important;
}

/* Open state flips the triangle */
.IDX-wrapper-standard :where(.IDX-results-refinement.IDX-dropdown-open .IDX-refine-search--toggle)::after {
  border-bottom-color: var(--white) !important;
}

/* Map Search: Apply buttons (desktop flyouts and mobile sheet) */
.IDX-wrapper-standard .idx-filter-apply-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 140px;
  padding: 0.55rem 1rem;
  background: var(--button-red-bg);
  border: 1px solid var(--button-red-border);
  border-radius: var(--radius-pill, 999px);
  box-shadow: var(--shadow-sm) !important;
  color: var(--white);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}

.IDX-wrapper-standard .idx-filter-apply-button:hover,
.IDX-wrapper-standard .idx-filter-apply-button:focus {
  background: var(--button-red-bg-hover);
  border-color: var(--button-red-bg-hover);
  box-shadow: var(--shadow-md) !important;
}

.IDX-wrapper-standard .idx-filter-apply-button:active {
  background: var(--button-red-bg-hover);
  border-color: var(--button-red-bg-hover);
  box-shadow: var(--shadow-sm) !important;
}

/* Secondary/clear button variant often rendered alongside Apply */
.IDX-wrapper-standard .idx-filter-apply-button-white {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 120px;
  padding: 0.55rem 1rem;
  background: var(--white);
  border-radius: var(--radius-pill, 999px);
  box-shadow: var(--shadow-xs) !important;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease-in-out),
    border-color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease-in-out),
    box-shadow var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease-in-out),
    color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease-in-out);
}

.IDX-wrapper-standard .idx-filter-apply-button-white:hover,
.IDX-wrapper-standard .idx-filter-apply-button-white:focus {
  background: color-mix(in oklab, var(--button-red-bg) 8%, var(--white));
  border-color: var(--button-red-border);
  box-shadow: var(--shadow-md) !important;
  color: var(--button-red-bg);
}

.IDX-wrapper-standard .idx-filter-apply-button-white:active {
  background: color-mix(in oklab, var(--button-red-bg) 6%, var(--white));
  box-shadow: var(--shadow-sm) !important;
}

@media (prefers-color-scheme: dark) {

  /* stylelint-disable no-duplicate-selectors */
  /* IDX dark-mode typography baseline: increase readable contrast */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard,html[data-kaplon-color-mode=system] 
  .IDX-results,html[data-kaplon-color-mode=system] 
  .IDX-pagination,html[data-kaplon-color-mode=system] 
  .IDX-tools-bar,html[data-kaplon-color-mode=system] 
  .IDX-custom-map .leaflet-popup-content {
    color: var(--text-primary-dark);
  }

  /* Secondary/muted helper text */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-help-block, small, .text-muted, .muted) {
    color: var(--text-secondary-dark);
  }

  /* Top Actions: tone non-link text to secondary for better hierarchy */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-topAction {
    color: var(--text-secondary-dark);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-topAction) a,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard :where(.IDX-topAction) .IDX-btn-link {
    color: var(--text-secondary-dark) !important;
  }

  /* Top Actions hover + focus clarity */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-topAction:where(:hover, :focus-within) {
    background-color: var(--dark-hover-bg);
    color: var(--text-primary-dark);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-topAction a:focus-visible {
    outline: 2px solid var(--kaplon-blue);
    outline-offset: 2px;
  }

  /* Links: readable and clearly interactive, with brand tint */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(a),html[data-kaplon-color-mode=system] 
  .IDX-results :where(a),html[data-kaplon-color-mode=system] 
  .IDX-pagination :where(a),html[data-kaplon-color-mode=system] 
  .IDX-tools-bar :where(a),html[data-kaplon-color-mode=system] 
  .IDX-custom-map .leaflet-popup-content :where(a) {
    color: var(--text-link-dark);
    text-decoration: underline;
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(a:hover, a:focus-visible),html[data-kaplon-color-mode=system] 
  .IDX-results :where(a:hover, a:focus-visible),html[data-kaplon-color-mode=system] 
  .IDX-pagination :where(a:hover, a:focus-visible),html[data-kaplon-color-mode=system] 
  .IDX-tools-bar :where(a:hover, a:focus-visible),html[data-kaplon-color-mode=system] 
  .IDX-custom-map .leaflet-popup-content :where(a:hover, a:focus-visible) {
    color: var(--kaplon-blue-light);
  }

  /* Select2 containers: default text color in dark */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.select2-container) {
    color: var(--text-primary-dark);
  }

  /* Tables inside IDX wrappers: ensure text contrast without layout changes */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(table),html[data-kaplon-color-mode=system] 
  .IDX-results :where(table) {
    color: var(--text-primary-dark);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(select, input, textarea) {
    color: var(--text-primary-dark);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(button, .btn, .IDX-btn, a.IDX-btn, select, input, textarea):where(:disabled, [aria-disabled="true"], .IDX-disabled) {
    color: var(--text-disabled-dark) !important;
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.idx-disclaimer, .IDX-disclaimer, .IDX-mlsDisclaimer, .IDX-mls-disclaimer, .idx-mls-logo-wrap) {
    background: var(--idx-surface-2, var(--dark-surface));
    border-top: 1px solid var(--idx-border-subtle, var(--border-subtle-dark));
    color: var(--idx-text-muted, var(--text-secondary-dark));
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.leaflet-popup-content-wrapper, .leaflet-bar) {
    background: var(--idx-surface-2, var(--dark-surface));
    border: 1px solid var(--idx-border, var(--dark-border));
    box-shadow: var(--shadow-dark-md);
    color: var(--idx-text-primary, var(--dark-text));
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.leaflet-container, .IDX-map) {
    background: var(--idx-surface-bg, var(--dark-bg));
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(a:focus-visible, button:focus-visible, .IDX-btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible) {
    box-shadow: 0 0 0 2px var(--idx-color-accent, var(--kaplon-red));
    outline: none;
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-breadcrumbs a) {
    color: var(--idx-link, var(--text-link-dark));
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-breadcrumbs .active) {
    color: var(--idx-text-primary, var(--dark-text));
  }

  /* Social login: ensure any labels/adjacent text are readable */
  html[data-kaplon-color-mode=system] #IDX-social-media-logins,html[data-kaplon-color-mode=system] 
  #IDX-social-media-logins *,html[data-kaplon-color-mode=system] 
  .IDX-social-form,html[data-kaplon-color-mode=system] 
  .IDX-social-form * {
    color: var(--text-primary-dark);
  }

  /* Social login buttons: explicit text color on button & inner span */
  html[data-kaplon-color-mode=system] #IDX-social-media-logins button,html[data-kaplon-color-mode=system] 
  #IDX-social-media-logins button span {
    color: var(--text-primary-dark);
  }

  html[data-kaplon-color-mode=system] #IDX-social-google button,html[data-kaplon-color-mode=system] 
  #IDX-social-facebook button {
    background-color: var(--dark-surface-raised);
    border-color: var(--border-subtle-dark);
    box-shadow: var(--shadow-dark-sm);
  }

  /* Generic social login pills (fallback to cover variant classnames) */
  html[data-kaplon-color-mode=system] .IDX-social-login button,html[data-kaplon-color-mode=system] 
  .social-login button {
    background-color: var(--dark-surface-raised);
    border-color: var(--border-subtle-dark);
    box-shadow: var(--shadow-dark-sm);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard {
    --idx-accent: var(--kaplon-red);
    --idx-surface-bg: var(--dark-surface);
    --idx-surface-card: var(--dark-surface);
    --idx-surface-1: var(--dark-surface);
    --idx-surface-2: var(--dark-surface-strong);
    --idx-surface-3: color-mix(in oklab, var(--dark-surface-strong) 70%, var(--kaplon-red));
    --idx-border: var(--border-subtle-dark);
    --idx-border-strong: var(--dark-border);
    --idx-border-subtle: var(--border-subtle-dark);
    --idx-success-bg: color(srgb 0.059 0.169 0.098);
    --idx-success-text: color(srgb 0.526 0.937 0.675);
    --idx-warning-bg: color(srgb 0.22 0.176 0.024);
    --idx-warning-text: color(srgb 0.988 0.827 0.302);
    --idx-error-bg: color(srgb 0.227 0.051 0.051);
    --idx-error-text: color(srgb 0.98 0.647 0.647);
    --idx-info-bg: color(srgb 0.063 0.145 0.239);
    --idx-info-text: color(srgb 0.576 0.773 0.992);
    --idx-link: var(--text-link-dark);
    --idx-link-hover: var(--kaplon-blue-light);
    --idx-focus-ring: color(srgb 1 1 1 / 0.2);
    --idx-text-primary: var(--dark-text);
    --idx-text-secondary: var(--dark-text-subtle);
    --idx-text-muted: var(--dark-text-subtle);
    --idx-color-accent-bg: var(--idx-accent);
    --idx-color-accent-text: var(--white);
    --idx-color-accent: var(--idx-accent);
    --idx-color-accent-ring: color(srgb 1 1 1 / 0.1);
  }

  /* Gutenberg block surfaces: keep cards readable on dark backgrounds */
  html[data-kaplon-color-mode=system] .site-content .wp-block-group.has-background,html[data-kaplon-color-mode=system] 
  .page-content-wrap .wp-block-group.has-background,html[data-kaplon-color-mode=system] 
  .site-content .wp-block-columns .wp-block-column.has-background,html[data-kaplon-color-mode=system] 
  .page-content-wrap .wp-block-columns .wp-block-column.has-background,html[data-kaplon-color-mode=system] 
  .site-content .wp-block-gallery figure,html[data-kaplon-color-mode=system] 
  .site-content .wp-block-gallery img,html[data-kaplon-color-mode=system] 
  .page-content-wrap .wp-block-gallery figure,html[data-kaplon-color-mode=system] 
  .page-content-wrap .wp-block-gallery img,html[data-kaplon-color-mode=system] 
  .site-content .wp-block-media-text,html[data-kaplon-color-mode=system] 
  .page-content-wrap .wp-block-media-text,html[data-kaplon-color-mode=system] 
  .site-content .wp-block-table table,html[data-kaplon-color-mode=system] 
  .page-content-wrap .wp-block-table table,html[data-kaplon-color-mode=system] 
  .site-content .wp-block-pullquote,html[data-kaplon-color-mode=system] 
  .site-content blockquote.wp-block-quote,html[data-kaplon-color-mode=system] 
  .page-content-wrap .wp-block-pullquote,html[data-kaplon-color-mode=system] 
  .page-content-wrap blockquote.wp-block-quote,html[data-kaplon-color-mode=system] 
  .site-content .wp-block-code.has-background,html[data-kaplon-color-mode=system] 
  .page-content-wrap .wp-block-code.has-background,html[data-kaplon-color-mode=system] 
  .site-content .wp-block-preformatted.has-background,html[data-kaplon-color-mode=system] 
  .page-content-wrap .wp-block-preformatted.has-background,html[data-kaplon-color-mode=system] 
  .site-content .wp-block-verse.has-background,html[data-kaplon-color-mode=system] 
  .page-content-wrap .wp-block-verse.has-background,html[data-kaplon-color-mode=system] 
  .site-content .wp-block-list.has-background,html[data-kaplon-color-mode=system] 
  .page-content-wrap .wp-block-list.has-background,html[data-kaplon-color-mode=system] 
  .site-content .is-card,html[data-kaplon-color-mode=system] 
  .page-content-wrap .is-card,html[data-kaplon-color-mode=system] 
  .site-content .is-card-sm,html[data-kaplon-color-mode=system] 
  .page-content-wrap .is-card-sm,html[data-kaplon-color-mode=system] 
  .site-content .is-card-lg,html[data-kaplon-color-mode=system] 
  .page-content-wrap .is-card-lg {
    background: var(--gray-900);
    box-shadow: var(--shadow-dark-sm);
    color: var(--white-90);
  }

  html[data-kaplon-color-mode=system] .site-content .wp-block-cover,html[data-kaplon-color-mode=system] 
  .page-content-wrap .wp-block-cover {
    box-shadow: var(--shadow-dark-md);
  }
  html[data-kaplon-color-mode=system] .wp-block-cover :is(h1, p, .btn-community) {
    text-shadow: none;
  }

  html[data-kaplon-color-mode=system] .site-content .is-card-lg,html[data-kaplon-color-mode=system] 
  .page-content-wrap .is-card-lg {
    box-shadow: var(--shadow-dark-md);
  }

  html[data-kaplon-color-mode=system] hr,html[data-kaplon-color-mode=system] 
  .site-content hr,html[data-kaplon-color-mode=system] 
  .page-content-wrap hr,html[data-kaplon-color-mode=system] 
  .post-content-wrap hr,html[data-kaplon-color-mode=system] 
  .section-divider,html[data-kaplon-color-mode=system] 
  .kaplon-search-results-header hr,html[data-kaplon-color-mode=system] 
  .kaplon-listing-header hr {
    background:
      radial-gradient(100% 70% at 50% 150%, var(--brand-red-35a), transparent 60%),
      linear-gradient(90deg,
        var(--brand-blue-0a) 0%,
        var(--brand-blue-85a) 18%,
        var(--kaplon-red) 50%,
        var(--brand-blue-85a) 82%,
        var(--brand-blue-0a) 100%);
  }

  html[data-kaplon-color-mode=system] hr.hr-fancy {
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in oklab, var(--hr-accent-1) 70%, transparent) 25%,
        color-mix(in oklab, var(--hr-accent-2) 70%, transparent) 75%,
        transparent 100%);
    filter: drop-shadow(0 0 8px color-mix(in oklab, var(--hr-accent-2) 40%, transparent)) drop-shadow(0 0 10px color-mix(in oklab, var(--hr-accent-1) 30%, transparent));
  }

  html[data-kaplon-color-mode=system] .section-divider:hover {
    filter: brightness(1.1);
  }

  html[data-kaplon-color-mode=system] .site-content hr.is-shimmer {
    background: var(--hr-shimmer-bg-dark);
  }

  html[data-kaplon-color-mode=system] .site-content hr.is-shimmer::before {
    background: var(--hr-shimmer-highlight-dark);
  }

  html[data-kaplon-color-mode=system] .page-content-wrap .wp-block-heading {
    text-shadow: var(--shadow-text-soft);
  }

  html[data-kaplon-color-mode=system] .page-content-wrap,html[data-kaplon-color-mode=system] 
  .article-wrap,html[data-kaplon-color-mode=system] 
  .post-content-wrap {
    background-color: var(--gray-darkest);
    color: var(--white-85);
  }

  html[data-kaplon-color-mode=system] .page-content-wrap :where(h1, h2, h3, h4, h5, h6, p, li, div),html[data-kaplon-color-mode=system] 
  .article-wrap :where(h1, h2, h3, h4, h5, h6, p, li, div),html[data-kaplon-color-mode=system] 
  .post-content-wrap :where(h1, h2, h3, h4, h5, h6, p, li, div) {
    color: inherit;
  }

  html[data-kaplon-color-mode=system] .page-content-wrap a {
    color: var(--color-link-hover-blue) !important;
  }

  html[data-kaplon-color-mode=system] .page-content-wrap a:hover {
    color: var(--color-header-light-blue) !important;
  }

  html[data-kaplon-color-mode=system] strong,html[data-kaplon-color-mode=system] 
  b {
    color: var(--white);
  }

  /* Pagination: readable default; active slightly brighter */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-pagination a {
    color: var(--text-primary-dark);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-pagination a.active,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .IDX-pagination .active>a {
    background-color: var(--dark-hover-bg);
    color: var(--dark-text-strong);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-pagination a:hover {
    background-color: var(--dark-hover-bg);
    color: var(--text-primary-dark);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-pagination a:focus-visible {
    outline: 2px solid var(--kaplon-blue);
    outline-offset: 2px;
  }

  /* Raw button fallback: use brand-primary family for on-brand styling */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard button {
    background-color: var(--button-red-bg);
    border-color: var(--button-red-border);
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard button:hover {
    background-color: var(--button-red-bg-hover);
    border-color: var(--button-red-bg-hover);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard button:focus-visible {
    outline: 2px solid var(--kaplon-blue);
    outline-offset: 2px;
  }

  /* Registration primary button: brand tone + shadow to match Refine */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-btn-primary {
    background-color: var(--button-red-bg);
    border-color: var(--button-red-border);
    box-shadow: var(--shadow-dark-sm);
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-btn-primary:hover {
    background-color: var(--button-red-bg-hover);
    border-color: var(--button-red-bg-hover);
  }

  /* Input placeholders: bump contrast slightly */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard input::placeholder,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard textarea::placeholder {
    color: var(--text-placeholder-dark);
  }

  /* Disabled/ghost/outline text mapping */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.btn-outline, .btn.btn-outline, .IDX-btn-link.btn-outline) {
    color: var(--text-primary-dark);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.btn-outline[aria-disabled="true"], .btn-outline:disabled, .IDX-btn-link[aria-disabled="true"]) {
    color: var(--text-disabled-dark) !important;
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-custom-map .leaflet-popup-content-wrapper {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    box-shadow: var(--shadow-dark-sm);
    color: var(--dark-text-strong);
  }

  /* Popup base text should be secondary to avoid neon */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-custom-map .leaflet-popup-content {
    color: var(--text-secondary-dark);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-custom-map .leaflet-popup-content :where(a) {
    color: var(--text-link-dark);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-custom-map .leaflet-popup-content :where(a:hover, a:focus) {
    color: var(--kaplon-blue-light);
    text-decoration: underline;
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-alert-success a,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .IDX-alert-info a,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .IDX-alert-warning a,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .IDX-alert a {
    color: var(--text-link-dark) !important;
    text-decoration: underline;
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-alert-success a:hover,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .IDX-alert-info a:hover,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .IDX-alert-warning a:hover,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .IDX-alert a:hover {
    color: var(--kaplon-blue-light) !important;
  }

  /* Lead tools banner: tint toward Kaplon navy for contrast */
  html[data-kaplon-color-mode=system] #IDX-leadToolsBar {
    background: var(--kaplon-blue-dark);
    color: var(--neutral-light);
  }

  html[data-kaplon-color-mode=system] #IDX-leadToolsBar a {
    color: var(--text-link-dark);
    text-decoration: underline;
  }

  /* IDX Subheader headings dark mode handled in typography.css */

  /* Muted text */
  html[data-kaplon-color-mode=system] .IDX-text--muted {
    color: var(--gray-400);
  }

  /* Highlight text */
  html[data-kaplon-color-mode=system] .IDX-text--highlight {
    color: var(--kaplon-blue-dark);
  }

  html[data-kaplon-color-mode=system] .no-gap-hr {
    background: var(--gradient-divider-light) !important;
  }

  /* Dark top actions: lift link contrast + keep subtle separator */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-topActions {
    background: var(--dark-surface);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-topAction {
    border-bottom: 1px solid var(--dark-border);
  }

  @media screen and (min-width: 641px) {
    html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-topAction {
      border: none;
      border-right: 1px solid var(--dark-border);
    }

    html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-topAction:last-child {
      border-right: none;
    }

    html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-results-refine-search-wrap {
      background: var(--dark-surface);
      box-shadow: var(--shadow-dark-sm);
      border-top-color: var(--dark-border);
    }

    html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle) {
      background: var(--button-red-bg);
      border-color: var(--button-red-border);
      box-shadow: var(--shadow-dark-sm);
      color: var(--white) !important;
    }

    html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle):hover,html[data-kaplon-color-mode=system] 
    .IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle):focus {
      background: var(--button-red-bg-hover);
      border-color: var(--button-red-bg-hover);
    }

    html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle):active {
      background: var(--button-red-bg-hover);
      border-color: var(--button-red-bg-hover);
    }

    html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle)::after {
      border-top-color: var(--white) !important;
    }

    html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-results-refinement.IDX-dropdown-open .IDX-refine-search--toggle)::after {
      border-bottom-color: var(--white) !important;
    }

    html[data-kaplon-color-mode=system] .IDX-wrapper-standard .idx-filter-apply-button-white {
      background: var(--gray-900);
      border-color: var(--border-subtle-dark) !important;
      color: var(--white-85) !important;
    }

    html[data-kaplon-color-mode=system] .IDX-wrapper-standard .idx-filter-apply-button-white:hover,html[data-kaplon-color-mode=system] 
    .IDX-wrapper-standard .idx-filter-apply-button-white:focus {
      background: color-mix(in oklab, var(--button-red-bg) 12%, var(--dark-surface));
      border-color: var(--button-red-border);
      box-shadow: var(--shadow-lg) !important;
      color: var(--white);
    }

    html[data-kaplon-color-mode=system] .IDX-wrapper-standard .idx-filter-apply-button-white:active {
      background: color-mix(in oklab, var(--button-red-bg) 10%, var(--dark-surface));
      box-shadow: var(--shadow-sm) !important;
    }

    /* stylelint-enable no-duplicate-selectors */
  }
}

/* IDX dark-mode typography baseline: increase readable contrast */

/* Secondary/muted helper text */

/* Top Actions: tone non-link text to secondary for better hierarchy */

/* Top Actions hover + focus clarity */

/* Links: readable and clearly interactive, with brand tint */

/* Select2 containers: default text color in dark */

/* Tables inside IDX wrappers: ensure text contrast without layout changes */

/* Social login: ensure any labels/adjacent text are readable */

/* Social login buttons: explicit text color on button & inner span */

/* Generic social login pills (fallback to cover variant classnames) */

/* Gutenberg block surfaces: keep cards readable on dark backgrounds */

/* Pagination: readable default; active slightly brighter */

/* Raw button fallback: use brand-primary family for on-brand styling */

/* Registration primary button: brand tone + shadow to match Refine */

/* Input placeholders: bump contrast slightly */

/* Disabled/ghost/outline text mapping */

/* Popup base text should be secondary to avoid neon */

/* Lead tools banner: tint toward Kaplon navy for contrast */

/* IDX Subheader headings dark mode handled in typography.css */

/* Muted text */

/* Highlight text */

/* Dark top actions: lift link contrast + keep subtle separator */

/* stylelint-disable no-duplicate-selectors */

/* IDX dark-mode typography baseline: increase readable contrast */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard,html[data-kaplon-color-mode=dark] 
  .IDX-results,html[data-kaplon-color-mode=dark] 
  .IDX-pagination,html[data-kaplon-color-mode=dark] 
  .IDX-tools-bar,html[data-kaplon-color-mode=dark] 
  .IDX-custom-map .leaflet-popup-content {
    color: var(--text-primary-dark);
  }

/* Secondary/muted helper text */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-help-block, small, .text-muted, .muted) {
    color: var(--text-secondary-dark);
  }

/* Top Actions: tone non-link text to secondary for better hierarchy */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-topAction {
    color: var(--text-secondary-dark);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-topAction) a,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard :where(.IDX-topAction) .IDX-btn-link {
    color: var(--text-secondary-dark) !important;
  }

/* Top Actions hover + focus clarity */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-topAction:where(:hover, :focus-within) {
    background-color: var(--dark-hover-bg);
    color: var(--text-primary-dark);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-topAction a:focus-visible {
    outline: 2px solid var(--kaplon-blue);
    outline-offset: 2px;
  }

/* Links: readable and clearly interactive, with brand tint */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(a),html[data-kaplon-color-mode=dark] 
  .IDX-results :where(a),html[data-kaplon-color-mode=dark] 
  .IDX-pagination :where(a),html[data-kaplon-color-mode=dark] 
  .IDX-tools-bar :where(a),html[data-kaplon-color-mode=dark] 
  .IDX-custom-map .leaflet-popup-content :where(a) {
    color: var(--text-link-dark);
    text-decoration: underline;
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(a:hover, a:focus-visible),html[data-kaplon-color-mode=dark] 
  .IDX-results :where(a:hover, a:focus-visible),html[data-kaplon-color-mode=dark] 
  .IDX-pagination :where(a:hover, a:focus-visible),html[data-kaplon-color-mode=dark] 
  .IDX-tools-bar :where(a:hover, a:focus-visible),html[data-kaplon-color-mode=dark] 
  .IDX-custom-map .leaflet-popup-content :where(a:hover, a:focus-visible) {
    color: var(--kaplon-blue-light);
  }

/* Select2 containers: default text color in dark */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.select2-container) {
    color: var(--text-primary-dark);
  }

/* Tables inside IDX wrappers: ensure text contrast without layout changes */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(table),html[data-kaplon-color-mode=dark] 
  .IDX-results :where(table) {
    color: var(--text-primary-dark);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(select, input, textarea) {
    color: var(--text-primary-dark);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(button, .btn, .IDX-btn, a.IDX-btn, select, input, textarea):where(:disabled, [aria-disabled="true"], .IDX-disabled) {
    color: var(--text-disabled-dark) !important;
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.idx-disclaimer, .IDX-disclaimer, .IDX-mlsDisclaimer, .IDX-mls-disclaimer, .idx-mls-logo-wrap) {
    background: var(--idx-surface-2, var(--dark-surface));
    border-top: 1px solid var(--idx-border-subtle, var(--border-subtle-dark));
    color: var(--idx-text-muted, var(--text-secondary-dark));
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.leaflet-popup-content-wrapper, .leaflet-bar) {
    background: var(--idx-surface-2, var(--dark-surface));
    border: 1px solid var(--idx-border, var(--dark-border));
    box-shadow: var(--shadow-dark-md);
    color: var(--idx-text-primary, var(--dark-text));
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.leaflet-container, .IDX-map) {
    background: var(--idx-surface-bg, var(--dark-bg));
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(a:focus-visible, button:focus-visible, .IDX-btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible) {
    box-shadow: 0 0 0 2px var(--idx-color-accent, var(--kaplon-red));
    outline: none;
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-breadcrumbs a) {
    color: var(--idx-link, var(--text-link-dark));
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-breadcrumbs .active) {
    color: var(--idx-text-primary, var(--dark-text));
  }

/* Social login: ensure any labels/adjacent text are readable */

html[data-kaplon-color-mode=dark] #IDX-social-media-logins,html[data-kaplon-color-mode=dark] 
  #IDX-social-media-logins *,html[data-kaplon-color-mode=dark] 
  .IDX-social-form,html[data-kaplon-color-mode=dark] 
  .IDX-social-form * {
    color: var(--text-primary-dark);
  }

/* Social login buttons: explicit text color on button & inner span */

html[data-kaplon-color-mode=dark] #IDX-social-media-logins button,html[data-kaplon-color-mode=dark] 
  #IDX-social-media-logins button span {
    color: var(--text-primary-dark);
  }

html[data-kaplon-color-mode=dark] #IDX-social-google button,html[data-kaplon-color-mode=dark] 
  #IDX-social-facebook button {
    background-color: var(--dark-surface-raised);
    border-color: var(--border-subtle-dark);
    box-shadow: var(--shadow-dark-sm);
  }

/* Generic social login pills (fallback to cover variant classnames) */

html[data-kaplon-color-mode=dark] .IDX-social-login button,html[data-kaplon-color-mode=dark] 
  .social-login button {
    background-color: var(--dark-surface-raised);
    border-color: var(--border-subtle-dark);
    box-shadow: var(--shadow-dark-sm);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard {
    --idx-accent: var(--kaplon-red);
    --idx-surface-bg: var(--dark-surface);
    --idx-surface-card: var(--dark-surface);
    --idx-surface-1: var(--dark-surface);
    --idx-surface-2: var(--dark-surface-strong);
    --idx-surface-3: color-mix(in oklab, var(--dark-surface-strong) 70%, var(--kaplon-red));
    --idx-border: var(--border-subtle-dark);
    --idx-border-strong: var(--dark-border);
    --idx-border-subtle: var(--border-subtle-dark);
    --idx-success-bg: color(srgb 0.059 0.169 0.098);
    --idx-success-text: color(srgb 0.526 0.937 0.675);
    --idx-warning-bg: color(srgb 0.22 0.176 0.024);
    --idx-warning-text: color(srgb 0.988 0.827 0.302);
    --idx-error-bg: color(srgb 0.227 0.051 0.051);
    --idx-error-text: color(srgb 0.98 0.647 0.647);
    --idx-info-bg: color(srgb 0.063 0.145 0.239);
    --idx-info-text: color(srgb 0.576 0.773 0.992);
    --idx-link: var(--text-link-dark);
    --idx-link-hover: var(--kaplon-blue-light);
    --idx-focus-ring: color(srgb 1 1 1 / 0.2);
    --idx-text-primary: var(--dark-text);
    --idx-text-secondary: var(--dark-text-subtle);
    --idx-text-muted: var(--dark-text-subtle);
    --idx-color-accent-bg: var(--idx-accent);
    --idx-color-accent-text: var(--white);
    --idx-color-accent: var(--idx-accent);
    --idx-color-accent-ring: color(srgb 1 1 1 / 0.1);
  }

/* Gutenberg block surfaces: keep cards readable on dark backgrounds */

html[data-kaplon-color-mode=dark] .site-content .wp-block-group.has-background,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .wp-block-group.has-background,html[data-kaplon-color-mode=dark] 
  .site-content .wp-block-columns .wp-block-column.has-background,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .wp-block-columns .wp-block-column.has-background,html[data-kaplon-color-mode=dark] 
  .site-content .wp-block-gallery figure,html[data-kaplon-color-mode=dark] 
  .site-content .wp-block-gallery img,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .wp-block-gallery figure,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .wp-block-gallery img,html[data-kaplon-color-mode=dark] 
  .site-content .wp-block-media-text,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .wp-block-media-text,html[data-kaplon-color-mode=dark] 
  .site-content .wp-block-table table,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .wp-block-table table,html[data-kaplon-color-mode=dark] 
  .site-content .wp-block-pullquote,html[data-kaplon-color-mode=dark] 
  .site-content blockquote.wp-block-quote,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .wp-block-pullquote,html[data-kaplon-color-mode=dark] 
  .page-content-wrap blockquote.wp-block-quote,html[data-kaplon-color-mode=dark] 
  .site-content .wp-block-code.has-background,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .wp-block-code.has-background,html[data-kaplon-color-mode=dark] 
  .site-content .wp-block-preformatted.has-background,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .wp-block-preformatted.has-background,html[data-kaplon-color-mode=dark] 
  .site-content .wp-block-verse.has-background,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .wp-block-verse.has-background,html[data-kaplon-color-mode=dark] 
  .site-content .wp-block-list.has-background,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .wp-block-list.has-background,html[data-kaplon-color-mode=dark] 
  .site-content .is-card,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .is-card,html[data-kaplon-color-mode=dark] 
  .site-content .is-card-sm,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .is-card-sm,html[data-kaplon-color-mode=dark] 
  .site-content .is-card-lg,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .is-card-lg {
    background: var(--gray-900);
    box-shadow: var(--shadow-dark-sm);
    color: var(--white-90);
  }

html[data-kaplon-color-mode=dark] .site-content .wp-block-cover,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .wp-block-cover {
    box-shadow: var(--shadow-dark-md);
  }

html[data-kaplon-color-mode=dark] .wp-block-cover :is(h1, p, .btn-community) {
    text-shadow: none;
  }

html[data-kaplon-color-mode=dark] .site-content .is-card-lg,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .is-card-lg {
    box-shadow: var(--shadow-dark-md);
  }

html[data-kaplon-color-mode=dark] hr,html[data-kaplon-color-mode=dark] 
  .site-content hr,html[data-kaplon-color-mode=dark] 
  .page-content-wrap hr,html[data-kaplon-color-mode=dark] 
  .post-content-wrap hr,html[data-kaplon-color-mode=dark] 
  .section-divider,html[data-kaplon-color-mode=dark] 
  .kaplon-search-results-header hr,html[data-kaplon-color-mode=dark] 
  .kaplon-listing-header hr {
    background:
      radial-gradient(100% 70% at 50% 150%, var(--brand-red-35a), transparent 60%),
      linear-gradient(90deg,
        var(--brand-blue-0a) 0%,
        var(--brand-blue-85a) 18%,
        var(--kaplon-red) 50%,
        var(--brand-blue-85a) 82%,
        var(--brand-blue-0a) 100%);
  }

html[data-kaplon-color-mode=dark] hr.hr-fancy {
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in oklab, var(--hr-accent-1) 70%, transparent) 25%,
        color-mix(in oklab, var(--hr-accent-2) 70%, transparent) 75%,
        transparent 100%);
    filter: drop-shadow(0 0 8px color-mix(in oklab, var(--hr-accent-2) 40%, transparent)) drop-shadow(0 0 10px color-mix(in oklab, var(--hr-accent-1) 30%, transparent));
  }

html[data-kaplon-color-mode=dark] .section-divider:hover {
    filter: brightness(1.1);
  }

html[data-kaplon-color-mode=dark] .site-content hr.is-shimmer {
    background: var(--hr-shimmer-bg-dark);
  }

html[data-kaplon-color-mode=dark] .site-content hr.is-shimmer::before {
    background: var(--hr-shimmer-highlight-dark);
  }

html[data-kaplon-color-mode=dark] .page-content-wrap .wp-block-heading {
    text-shadow: var(--shadow-text-soft);
  }

html[data-kaplon-color-mode=dark] .page-content-wrap,html[data-kaplon-color-mode=dark] 
  .article-wrap,html[data-kaplon-color-mode=dark] 
  .post-content-wrap {
    background-color: var(--gray-darkest);
    color: var(--white-85);
  }

html[data-kaplon-color-mode=dark] .page-content-wrap :where(h1, h2, h3, h4, h5, h6, p, li, div),html[data-kaplon-color-mode=dark] 
  .article-wrap :where(h1, h2, h3, h4, h5, h6, p, li, div),html[data-kaplon-color-mode=dark] 
  .post-content-wrap :where(h1, h2, h3, h4, h5, h6, p, li, div) {
    color: inherit;
  }

html[data-kaplon-color-mode=dark] .page-content-wrap a {
    color: var(--color-link-hover-blue) !important;
  }

html[data-kaplon-color-mode=dark] .page-content-wrap a:hover {
    color: var(--color-header-light-blue) !important;
  }

html[data-kaplon-color-mode=dark] strong,html[data-kaplon-color-mode=dark] 
  b {
    color: var(--white);
  }

/* Pagination: readable default; active slightly brighter */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-pagination a {
    color: var(--text-primary-dark);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-pagination a.active,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .IDX-pagination .active>a {
    background-color: var(--dark-hover-bg);
    color: var(--dark-text-strong);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-pagination a:hover {
    background-color: var(--dark-hover-bg);
    color: var(--text-primary-dark);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-pagination a:focus-visible {
    outline: 2px solid var(--kaplon-blue);
    outline-offset: 2px;
  }

/* Raw button fallback: use brand-primary family for on-brand styling */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard button {
    background-color: var(--button-red-bg);
    border-color: var(--button-red-border);
    color: var(--white);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard button:hover {
    background-color: var(--button-red-bg-hover);
    border-color: var(--button-red-bg-hover);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard button:focus-visible {
    outline: 2px solid var(--kaplon-blue);
    outline-offset: 2px;
  }

/* Registration primary button: brand tone + shadow to match Refine */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-btn-primary {
    background-color: var(--button-red-bg);
    border-color: var(--button-red-border);
    box-shadow: var(--shadow-dark-sm);
    color: var(--white) !important;
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-btn-primary:hover {
    background-color: var(--button-red-bg-hover);
    border-color: var(--button-red-bg-hover);
  }

/* Input placeholders: bump contrast slightly */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard input::placeholder,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard textarea::placeholder {
    color: var(--text-placeholder-dark);
  }

/* Disabled/ghost/outline text mapping */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.btn-outline, .btn.btn-outline, .IDX-btn-link.btn-outline) {
    color: var(--text-primary-dark);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.btn-outline[aria-disabled="true"], .btn-outline:disabled, .IDX-btn-link[aria-disabled="true"]) {
    color: var(--text-disabled-dark) !important;
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-custom-map .leaflet-popup-content-wrapper {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    box-shadow: var(--shadow-dark-sm);
    color: var(--dark-text-strong);
  }

/* Popup base text should be secondary to avoid neon */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-custom-map .leaflet-popup-content {
    color: var(--text-secondary-dark);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-custom-map .leaflet-popup-content :where(a) {
    color: var(--text-link-dark);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-custom-map .leaflet-popup-content :where(a:hover, a:focus) {
    color: var(--kaplon-blue-light);
    text-decoration: underline;
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-alert-success a,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .IDX-alert-info a,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .IDX-alert-warning a,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .IDX-alert a {
    color: var(--text-link-dark) !important;
    text-decoration: underline;
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-alert-success a:hover,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .IDX-alert-info a:hover,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .IDX-alert-warning a:hover,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .IDX-alert a:hover {
    color: var(--kaplon-blue-light) !important;
  }

/* Lead tools banner: tint toward Kaplon navy for contrast */

html[data-kaplon-color-mode=dark] #IDX-leadToolsBar {
    background: var(--kaplon-blue-dark);
    color: var(--neutral-light);
  }

html[data-kaplon-color-mode=dark] #IDX-leadToolsBar a {
    color: var(--text-link-dark);
    text-decoration: underline;
  }

/* IDX Subheader headings dark mode handled in typography.css */

/* Muted text */

html[data-kaplon-color-mode=dark] .IDX-text--muted {
    color: var(--gray-400);
  }

/* Highlight text */

html[data-kaplon-color-mode=dark] .IDX-text--highlight {
    color: var(--kaplon-blue-dark);
  }

html[data-kaplon-color-mode=dark] .no-gap-hr {
    background: var(--gradient-divider-light) !important;
  }

/* Dark top actions: lift link contrast + keep subtle separator */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-topActions {
    background: var(--dark-surface);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-topAction {
    border-bottom: 1px solid var(--dark-border);
  }

@media screen and (min-width: 641px) {
    html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-topAction {
      border: none;
      border-right: 1px solid var(--dark-border);
    }

    html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-topAction:last-child {
      border-right: none;
    }

    html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-results-refine-search-wrap {
      background: var(--dark-surface);
      box-shadow: var(--shadow-dark-sm);
      border-top-color: var(--dark-border);
    }

    html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle) {
      background: var(--button-red-bg);
      border-color: var(--button-red-border);
      box-shadow: var(--shadow-dark-sm);
      color: var(--white) !important;
    }

    html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle):hover,html[data-kaplon-color-mode=dark] 
    .IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle):focus {
      background: var(--button-red-bg-hover);
      border-color: var(--button-red-bg-hover);
    }

    html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle):active {
      background: var(--button-red-bg-hover);
      border-color: var(--button-red-bg-hover);
    }

    html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-results-refinement .IDX-refine-search--toggle)::after {
      border-top-color: var(--white) !important;
    }

    html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-results-refinement.IDX-dropdown-open .IDX-refine-search--toggle)::after {
      border-bottom-color: var(--white) !important;
    }

    html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .idx-filter-apply-button-white {
      background: var(--gray-900);
      border-color: var(--border-subtle-dark) !important;
      color: var(--white-85) !important;
    }

    html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .idx-filter-apply-button-white:hover,html[data-kaplon-color-mode=dark] 
    .IDX-wrapper-standard .idx-filter-apply-button-white:focus {
      background: color-mix(in oklab, var(--button-red-bg) 12%, var(--dark-surface));
      border-color: var(--button-red-border);
      box-shadow: var(--shadow-lg) !important;
      color: var(--white);
    }

    html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .idx-filter-apply-button-white:active {
      background: color-mix(in oklab, var(--button-red-bg) 10%, var(--dark-surface));
      box-shadow: var(--shadow-sm) !important;
    }

    /* stylelint-enable no-duplicate-selectors */
  }