/* colors.css imported globally via style.css */

/* ==========================================================================
   _navigation.css – Main, Dropdown, and Mobile Navigation
   ========================================================================== */

/* Theme tokens for dark mode text contrast */
:root[data-theme='dark'],
body.dark {
  --idx-light-text: var(--text-primary-dark);
  --idx-mid-text: var(--text-secondary-dark);
}

/* Main navigation bar background and link color for strong contrast */
.navbar,
.header-nav,
.main-nav {
  background-color: var(--kaplon-blue-dark) !important;
  color: var(--idx-light-text, var(--nav-link-light, var(--neutral-light))) !important;
}

/* Ensure mobile menu has proper background when expanded */
.navbar-collapse {
  background-color: var(--kaplon-blue-dark) !important;
}

/* Override homepage transparent background for mobile menu */
body.home .navbar-collapse {
  background-color: var(--kaplon-blue-dark) !important;
}

/* Ensure mobile menu links are visible */
.navbar-collapse .navbar-nav>li>a,
.navbar-collapse .navbar-nav .nav-link {
  background-color: transparent !important;
  color: var(--white) !important;
}

/* Dropdown toggle caret: make it red and visible */
.navbar-collapse .navbar-nav .dropdown-toggle::after {
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: var(--kaplon-red) !important;
}

/* Houzez offcanvas mobile menu: panel background */
.offcanvas-mobile-menu {
  background-color: var(--kaplon-blue-dark) !important;
}

/* Primary nav links */
.offcanvas-mobile-menu .mobile-navbar-nav .nav-link {
  background-color: transparent !important;
  color: var(--white) !important;
}

/* Bootstrap caret on offcanvas triggers: white, larger than default */
.offcanvas-mobile-menu .mobile-navbar-nav .dropdown-toggle::after {
  display: block !important;
  margin: 0 !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-left-width: 0.45em !important;
  border-right-color: transparent !important;
  border-right-width: 0.45em !important;
  border-top-color: var(--white) !important;
  border-top-width: 0.45em !important;
}

/* Parent items: flex row — nav-link label left, chevron trigger right, sub-menu wraps below */
.offcanvas-mobile-menu .menu-item-has-children,
.offcanvas-mobile-menu .menu-item.dropdown {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.offcanvas-mobile-menu .menu-item-has-children>.nav-link,
.offcanvas-mobile-menu .menu-item.dropdown>.nav-link {
  flex: 1 1 auto !important;
}

/* Chevron trigger: flex container so ::after caret centers inside it */
.offcanvas-mobile-menu .nav-mobile-trigger {
  display: flex !important;
  flex: 0 0 auto !important;
  justify-content: center;
  align-items: center;
  padding: 0 1.25rem !important;
  cursor: pointer;
}

/* Sub-menu: hidden until Bootstrap adds .show; flex-basis:100% wraps it below the nav-link row */
.offcanvas-mobile-menu .dropdown-menu {
  position: static !important;
  display: none !important;
  flex-basis: 100%;
  width: 100%;
  padding: 0 0 0.5rem 1.25rem;
  overflow: visible !important;
  background: var(--kaplon-blue-dark) !important;
  border: none !important;
  box-shadow: none !important;
}

.offcanvas-mobile-menu .dropdown-menu.show {
  position: static !important;
  display: block !important;
}

/* Override Houzez white background on individual <li> items */
.offcanvas-mobile-menu .mobile-navbar-nav li,
.offcanvas-mobile-menu .sub-menu li,
.offcanvas-mobile-menu .dropdown-menu li {
  background-color: var(--kaplon-blue-dark) !important;
}

/* Sub-menu links (.dropdown-item is the actual class on these <a> tags) */
.offcanvas-mobile-menu .dropdown-item {
  padding: 0.5rem 1rem;
  background-color: transparent !important;
  border-bottom: 1px solid color-mix(in oklab, var(--white) 10%, transparent);
  color: var(--white-85) !important;
  font-size: 0.92rem;
}

.offcanvas-mobile-menu .dropdown-item:hover {
  background-color: color-mix(in oklab, var(--white) 10%, transparent) !important;
  color: var(--white) !important;
}

/* Dark mode mobile menu overrides */

/* Ensure IDX containers inherit readable body text in dark mode */
:root[data-theme='dark'] .IDX-wrapper,
:root[data-theme='dark'] .idx-results,
:root[data-theme='dark'] [id*="IDX"],
:root[data-theme='dark'] .IDX-resultsWrapper,
:root[data-theme='dark'] .IDX-pageContainer,
:root[data-theme='dark'] .idx-listing,
body.dark .IDX-wrapper,
body.dark .idx-results,
body.dark [id*="IDX"],
body.dark .IDX-resultsWrapper,
body.dark .IDX-pageContainer,
body.dark .idx-listing {
  color: var(--idx-light-text, var(--neutral-light)) !important;
}

:root[data-theme='dark'] .IDX-listingPrice,
:root[data-theme='dark'] .IDX-field,
:root[data-theme='dark'] .IDX-propertyAddress,
:root[data-theme='dark'] .IDX-mlsNumber,
:root[data-theme='dark'] .IDX-listingInfo,
:root[data-theme='dark'] .IDX-metaData,
:root[data-theme='dark'] .IDX-text,
body.dark .IDX-listingPrice,
body.dark .IDX-field,
body.dark .IDX-propertyAddress,
body.dark .IDX-mlsNumber,
body.dark .IDX-listingInfo,
body.dark .IDX-metaData,
body.dark .IDX-text,
body.dark .IDX-wrapper .idx-price,
body.dark .IDX-wrapper .listing-price,
body.dark .IDX-wrapper .property-address,
body.dark .IDX-wrapper .property-details,
body.dark .IDX-wrapper .listingCourtesy {
  color: var(--idx-light-text, var(--neutral-light)) !important;
}

.navbar a,
.main-nav a,
.header-nav .navbar-nav>li>a,
.navbar-collapse .navbar-nav>li>a {
  color: var(--white) !important;
  /* strong contrast for dark navbar */
}

.site-footer {
  padding: var(--space-5) 0 var(--space-4) 0;
  background: var(--kaplon-footer-bg);
  border-top: 4px solid var(--kaplon-red);
}

.site-footer .footer-panels {
  background: var(--kaplon-footer-bg);
}

.site-footer .footer-panels :where(.widget, .widget_nav_menu, .footer-widget, .wp-block-group) {
  background: var(--kaplon-footer-bg);
  box-shadow: none;
  color: var(--kaplon-footer-text);
}

.site-footer .footer-panels :where(p, li, span, a) {
  color: var(--kaplon-footer-text);
}

.site-footer .footer-panels a {
  color: var(--kaplon-footer-text);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
  text-decoration-color: color-mix(in oklab, var(--kaplon-footer-text) 65%, transparent);
}

.site-footer .footer-panels a:hover,
.site-footer .footer-panels a:focus-visible {
  color: var(--kaplon-footer-text);
  text-decoration-color: var(--kaplon-red);
}

/* Footer block-group widgets (Elementor/Gutenberg) */
.site-footer .wp-block-group {
  padding: 0;
  background: var(--kaplon-footer-bg);
  box-shadow: none;
  color: var(--kaplon-footer-text);
}

.site-footer .wp-block-group :where(p, li, a, span) {
  color: var(--kaplon-footer-text);
}

.site-footer .footer-panels h2,
.site-footer .footer-panels h3,
.site-footer .footer-panels h4 {
  color: var(--white);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.site-footer .footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.site-footer .footer-copyright {
  margin-bottom: var(--space-2);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.site-footer .footer-social {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-2);
  gap: var(--space-4);
}

.site-footer .footer-social a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: var(--kaplon-blue-light);
  border-radius: var(--radius-full, 50%);
  box-shadow: var(--shadow-xs);
  color: var(--white);
  font-size: 1.7rem;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.site-footer .footer-social a:hover {
  background: var(--kaplon-red-dark);
  box-shadow: var(--shadow-md);
  color: var(--color-on-secondary);
}

.site-footer .footer-logo {
  max-width: 120px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

/* ==========================================================================
   Table of Contents
   ========================================================================== */
/**
 * 1.0 Main Navigation Container
 * 2.0 Menu Links & States
 * 3.0 Dropdown Menus
 * 4.0 Mobile / Toggle Navigation
 * 5.0 Dark Mode Overrides
 * 6.0 IDX Precision Navbar & Search Tabs (moved from base/buttons)
 * 7.0 Map Search Navigation & Filter Pills (moved from base/buttons)
 */

/* ==========================================================================
   1.0 Main Navigation Container
========================================================================== */

/* Main navigation container */

/* IDX Omnibar width constraint (desktop only) */
@media screen and (min-width: 768px) {
  .top-banner-wrap .banner-caption .idx-omnibar-wrapper {
    width: min(100%, clamp(560px, 62vw, 980px));
    max-width: clamp(560px, 62vw, 980px);
    margin-right: auto;
    margin-left: auto;
  }

  .top-banner-wrap .banner-caption .idx-omnibar-wrapper .idx-omnibar-form {
    display: flex;
    flex-wrap: nowrap;
    width: 100% !important;
    gap: var(--space-1);
  }

  .top-banner-wrap .banner-caption .idx-omnibar-wrapper .idx-omnibar-form>input.idx-omnibar-input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .top-banner-wrap .banner-caption .idx-omnibar-wrapper .idx-omnibar-form>button[type="submit"] {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.idx-nav {
  /* 20px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(var(--space-2) + var(--space-1));
  background-color: var(--color-background);
}

/* Menu links readable */
.header-nav a,
.navbar-nav>li>a,
.header-bottom a,
.header-nav .navbar-nav>li>a,
.navbar-collapse .navbar-nav>li>a {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-color: transparent !important;
}

header nav a,
.main-navigation a {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: none !important;
  text-decoration: none;
}

header nav a:hover,
.main-navigation a:hover {
  border-bottom: 1px solid var(--kaplon-red);
}

/* Houzez desktop header alignment: keep the theme shell and inner nav on one panel. */
@media (min-width: 992px) {

  .header-main-wrap,
  header.site-header,
  .header-navbar,
  .header-nav,
  .navbar,
  .navbar-collapse,
  .main-nav,
  .navigation {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: var(--kaplon-blue-dark) !important;
    background-color: var(--kaplon-blue-dark) !important;
  }

  .header-nav,
  .navbar,
  .navbar-collapse,
  .main-nav {
    align-items: center;
  }
}

/* Ensure navigation containers don't clip dropdown menus */
.navbar,
.navbar-nav,
.navbar-collapse,
.main-nav,
.header-nav {
  overflow: visible !important;
}

/* Dropdown menu positioning and visibility */
.navbar-nav .dropdown {
  position: relative;
}

.navbar-nav .dropdown-menu {
  position: absolute !important;
  top: 100%;
  left: 0;
  z-index: 1000 !important;
  min-width: max-content;
  overflow: visible !important;
}

/* Dropdowns follow same theme */
.dropdown-menu {
  overflow: visible !important;
  background: var(--white);
  border-color: var(--kaplon-blue-dark);
  box-shadow: var(--shadow-md);
  color: var(--neutral-dark);
}

.dropdown-menu a {
  background: transparent;
  color: var(--kaplon-blue-dark) !important;
}

.dropdown-menu a:hover {
  background: var(--kaplon-blue) !important;
  color: var(--white) !important;
}

/* Solid background when scrolling */

/* Dark Mode Nav: switches panels to --dark-surface tokens */
/* Nav links */

/* Ensure nav row uses dark surfaces */

/* Dropdown menu background and borders in dark mode */

/* Ensure dropdown and top-level nav links use dark text tokens */

/* Active state: solid brand blue with light text */

/* Hover state: branded highlight on dark surface */

/* Dropdown link colors and hover */

/* Optional contrast boost for icons in nav */

/* ==========================================================================
   Nav wrap fix (all modes): when menu row drops below header, keep blue panel
   Applies on mid-desktop widths where Houzez pushes the nav off the top bar
   ========================================================================== */
/* Layout-only: keep the margin/padding adjustments outside color-mode so
   prefers-color-scheme media queries remain colors-only. This applies the
   layout fix at the same width range for all modes. */
@media (max-width: 1280px) and (min-width: 900px) {

  .header-main-wrap,
  header.site-header,
  .header-navbar,
  .header-nav,
  .navbar-collapse,
  .navbar,
  .navbar-nav,
  .main-nav,
  .navigation {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Compress nav items on smaller screens to reduce wrapping */
@media (max-width: 1200px) {

  .navbar-nav>li>a,
  .navbar-nav .nav-link,
  .navbar-collapse .navbar-nav>li>a {
    padding: 0.5rem 0.75rem !important;
    font-size: clamp(0.85rem, 2vw, 1rem);
  }

  .navbar-nav .dropdown-toggle::after {
    margin-left: 0.25rem;
  }
}

/* Further compress on tablets */
@media (max-width: 991px) {

  .navbar-nav>li>a,
  .navbar-nav .nav-link {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.9rem;
  }

  .navbar-nav {
    gap: 0 !important;
  }
}

/* Color + visual theme overrides for light mode remain scoped to prefers-color-scheme */
@media (prefers-color-scheme: light) and (max-width: 1280px) and (min-width: 900px) {

  .header-main-wrap,
  header.site-header,
  .header-navbar,
  .header-nav,
  .navbar-collapse,
  .navbar,
  .navbar-nav,
  .main-nav,
  .navigation {
    background: var(--kaplon-blue);
    background-color: var(--kaplon-blue-dark) !important;
    /* deep navy to match logo */
    box-shadow: var(--shadow-md);
    color: var(--color-nav-link);
    transition: background 0.25s ease, color 0.25s ease;
  }

  /* strong contrast for dark navbar */
  .header-nav .navbar-nav>li>a,
  .navbar-collapse .navbar-nav>li>a,
  .navbar .navbar-nav>li>a,
  .header-bottom a {
    background: transparent;
    color: var(--white) !important;
  }

  /* Hover/active states on blue */
  .header-nav .navbar-nav>li>a:hover,
  .navbar-collapse .navbar-nav>li>a:hover {
    background: var(--color-nav-link-bg-hover);
    color: var(--color-nav-link-hover);
  }

  .header-nav .navbar-nav>li.active>a {
    background: var(--color-nav-link-bg-active);
    color: var(--color-nav-link-active);
  }

  /* Dropdown panels and items match */
  .header-nav .dropdown-menu,
  .navbar-nav .dropdown-menu,
  .dropdown-menu {
    background: var(--kaplon-blue);
    border-color: var(--kaplon-blue-dark);
  }

  .header-nav .dropdown-menu a,
  .navbar-nav .dropdown-menu a,
  .dropdown-menu a {
    background: transparent;
    color: var(--color-nav-link);
  }

  .header-nav .dropdown-menu a:hover,
  .navbar-nav .dropdown-menu a:hover,
  .dropdown-menu a:hover {
    background: var(--color-nav-link-bg-hover);
    color: var(--color-nav-link-hover);
  }
}

/* ========================================================================
   Kadence Theme: recover light header and nav readability rules
   ======================================================================== */

/* Premium light header shell for consistent readability across templates */
.header-main-wrap,
header.site-header,
.header-navbar,
.header-nav,
.navbar,
.navbar-collapse,
.main-nav,
.navigation {
  background: var(--white) !important;
  border-bottom: 1px solid var(--gray-border);
  box-shadow: var(--shadow-xs);
  color: var(--kaplon-blue-dark) !important;
}

/* Site title text */
.site-branding .site-title,
.site-title a {
  color: var(--global-palette3, var(--kaplon-blue-dark)) !important;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: color var(--anim-duration-normal) ease;
}

.site-branding .site-title:hover,
.site-title a:hover {
  color: var(--kaplon-red) !important;
}

/* Primary nav top-level links */
#primary-navigation a,
.primary-navigation a,
.header-nav .navbar-nav>li>a,
.navbar .navbar-nav>li>a,
.navbar-collapse .navbar-nav>li>a {
  color: var(--kaplon-blue-dark) !important;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--anim-duration-normal) ease, background-color var(--anim-duration-normal) ease;
}

#primary-navigation a:hover,
.primary-navigation a:hover,
.header-nav .navbar-nav>li>a:hover,
.navbar-collapse .navbar-nav>li>a:hover {
  background-color: color-mix(in oklab, var(--kaplon-red) 8%, var(--white));
  color: var(--kaplon-red) !important;
}

#primary-navigation a:focus-visible,
.primary-navigation a:focus-visible {
  color: var(--kaplon-red) !important;
  outline: 2px solid var(--kaplon-red);
}

/* Sub-menus: light panel, dark text */
#primary-navigation .sub-menu,
.primary-navigation .sub-menu,
.header-nav .dropdown-menu,
.navbar-nav .dropdown-menu,
.dropdown-menu {
  background: var(--white) !important;
  border: 1px solid var(--gray-border);
  box-shadow: var(--shadow-md);
}

#primary-navigation .sub-menu a,
.primary-navigation .sub-menu a,
.header-nav .dropdown-menu a,
.navbar-nav .dropdown-menu a,
.dropdown-menu a {
  color: var(--kaplon-blue-dark) !important;
}

#primary-navigation .sub-menu a:hover,
.primary-navigation .sub-menu a:hover,
.header-nav .dropdown-menu a:hover,
.navbar-nav .dropdown-menu a:hover,
.dropdown-menu a:hover {
  background: color-mix(in oklab, var(--kaplon-red) 10%, var(--white));
  color: var(--kaplon-red) !important;
}

/* Keep homepage header aligned with interior pages (no dark/transparent variant) */
body.home .header-main-wrap,
body.home header.site-header,
body.home .header-navbar,
body.home .header-nav,
body.home .header-bottom,
body.home .navbar,
body.home .navbar-collapse,
body.home .main-nav,
body.home .navigation {
  background: var(--white) !important;
  box-shadow: var(--shadow-xs) !important;
  border-bottom-color: var(--gray-border) !important;
}

body.home .header-nav .navbar-nav>li>a,
body.home .navbar-collapse .navbar-nav>li>a,
body.home #primary-navigation a,
body.home .primary-navigation a {
  color: var(--kaplon-blue-dark) !important;
}

/* ==========================================================================
   6.0 IDX Precision Navbar & Search Tabs (authoritative)
   Centralized from base.css & buttons.css to avoid duplication.
   ========================================================================== */

/* Precision navbar row */
.IDX-wrapper-standard .IDX-precision-navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1rem;
  padding: clamp(0.5rem, 1vw, 0.75rem) 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  gap: var(--space-2, clamp(0.5rem, 1vw, 0.75rem));
}

/* Nav list & container layout */
.IDX-wrapper-standard :where(.IDX-precision-navbar) .IDX-searchNav,
.IDX-wrapper-standard :where(.IDX-searchNav) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: var(--space-2, 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: var(--space-2, clamp(0.5rem, 1vw, 0.75rem));
}

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

/* Map search nav button container layout */
#navigation-container :where(.idx-nav-button-container) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, clamp(0.5rem, 1vw, 0.75rem));
}

/* ==========================================================================
   7.0 Map Search Navigation & Filter Pills
   Styling consolidated from buttons.css
   ========================================================================== */

/* Map nav buttons */
.idx-nav-button-container .idx-nav-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.55rem 1.2rem;
  background-color: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill, 999px);
  box-shadow: var(--shadow-xs);
  color: var(--gray-700);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide, 0.04em);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.idx-nav-button-container .idx-nav-button:where(:hover, :focus-within) {
  background-color: var(--gray-200);
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
  color: var(--gray-800);
}

.idx-nav-button-container .idx-nav-button.idx-nav-button__active {
  background-color: var(--button-red-bg);
  border-color: var(--button-red-border);
  box-shadow: var(--shadow-md);
  color: var(--color-on-secondary);
}

.idx-nav-button-container .idx-nav-button:focus-visible {
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-lift-md), var(--shadow-focus);
  outline: none;
}

/* --- Kaplon Realty IDX Pagination & Navigation Buttons (Dark Theme, Tokenized) --- */

/* --- Kaplon Realty IDX Pagination & Navigation Buttons (Dark Theme) --- */

/* Map filter pills */
:where(#prime-map-search--filter-bar) :where(.idx-filter-button) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0.9rem;
  background-color: var(--white);
  border: 1px solid var(--kaplon-blue);
  border-radius: var(--radius-pill, 999px);
  box-shadow: var(--shadow-xs);
  color: var(--kaplon-blue);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide, 0.04em);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

:where(#prime-map-search--filter-bar) :where(.idx-filter-button) * {
  color: inherit;
}

:where(#prime-map-search--filter-bar) :where(.idx-filter-button):where(:hover, :focus-within) {
  background-color: var(--surface-alt);
  border-color: var(--kaplon-blue);
  box-shadow: var(--shadow-sm);
  color: var(--kaplon-blue);
}

@supports (background-color: color-mix(in srgb, black 0%, white 100%)) {
  :where(#prime-map-search--filter-bar) :where(.idx-filter-button):where(:hover, :focus-within) {
    background-color: color-mix(in srgb, var(--kaplon-blue) 12%, var(--white));
  }
}

:where(#prime-map-search--filter-bar) :where(.idx-filter-button):is(.is-active, .active, [aria-pressed="true"], [aria-current="true"], [aria-selected="true"], .selected) {
  background-color: var(--color-badge-yellow);
  border-color: var(--color-badge-yellow);
  box-shadow: var(--shadow-sm);
  color: var(--color-on-warning);
}

:where(#prime-map-search--filter-bar) :where(.idx-filter-button):is(.is-active, .active, [aria-pressed="true"], [aria-current="true"], [aria-selected="true"], .selected):where(:hover, :focus-within) {
  background-color: var(--color-badge-yellow);
  border-color: var(--color-badge-yellow);
  color: var(--color-on-warning);
}

:where(#prime-map-search--filter-bar) :where(.idx-filter-button):focus-visible {
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-lift-md), var(--shadow-focus);
  outline: none;
}

/* Dropdown menu polish */

/* Mobile hamburger & icon buttons */
/* Light mode: hamburger should be visible on light background */
.mobile-nav-trigger svg,
.navbar-toggle i {
  color: var(--kaplon-blue-dark) !important;
  transition: color 0.2s ease;
}

.navbar-toggle:hover i {
  color: var(--kaplon-red) !important;
}

/* Houzez mobile header toggle button (light mode) */
.header-mobile .toggle-button-left,
.header-mobile .toggle-button-right {
  background-color: transparent !important;
  color: var(--kaplon-red) !important;
}

.header-mobile .toggle-button-left:hover,
.header-mobile .toggle-button-right:hover {
  color: var(--kaplon-red-dark) !important;
}

/* Dark mode: adjust hamburger color for dark theme */

/* Icon Nav Base (shared layout) */
.icon-nav {
  position: sticky;
  top: 82px;
  z-index: 99;
  display: flex;
  flex-wrap: nowrap;
  padding: 6px 12px;
  /* compact container padding */
  overflow-x: auto;
  overflow-y: clip;
  transition: box-shadow 0.2s ease;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-padding-right: 16px;
  /* compact scroll padding */
  scrollbar-width: thin;
}

/* Subtle horizontal scrollbar styling (WebKit) */
.icon-nav::-webkit-scrollbar {
  height: 6px;
}

.icon-nav::-webkit-scrollbar-track {
  background: transparent;
}

.icon-nav::-webkit-scrollbar-thumb {
  background-color: color-mix(in oklab, var(--kaplon-blue) 25%, transparent);
  border-radius: 8px;
}

.icon-nav a {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-right: 6px;
  /* tighter gap */
  padding: 8px 12px;
  /* compact pill */
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  text-underline-offset: 3px;
}

/* Remove trailing gap after last chip */
.icon-nav a:last-child {
  margin-right: 0;
}

/* Spacer to guarantee breathing room after last chip */
.icon-nav::after {
  flex: 0 0 20px;
  content: "";
}

/* Sticky state offset (mode agnostic) */
.icon-nav.sticky {
  top: var(--header-height, 64px);
}

@media (min-width: 768px) {
  .icon-nav {
    top: 90px;
  }
}

/* Tighter chips on narrow screens to reduce total scroll distance */
@media (max-width: 480px) {
  .icon-nav a {
    padding: 6px 8px;
    font-size: 0.83rem;
  }
}

.icon-nav.is-stuck {
  box-shadow: var(--chip-nav-shadow);
}

/* OS dark mode: icon-nav colors (layout inherited from base) */

/* Light mode color/border overrides (layout inherited from base) */
@media (prefers-color-scheme: light) {
  .icon-nav {
    background-color: var(--white);
  }
}

/* Restrict red background buttons to IDX components only */
.IDX-pagination a,
.IDX-pagination button,
.IDX-search a,
.IDX-search button,
.IDX-btn,
.IDX-wrapper button {
  padding: 6px 14px;
  background-color: var(--button-red-bg) !important;
  border: none;
  border-radius: 6px;
  color: var(--color-on-secondary) !important;
  transition: background 0.2s ease-in-out;
}

.IDX-pagination a:hover,
.IDX-pagination button:hover,
.IDX-search a:hover,
.IDX-search button:hover,
.IDX-btn:hover,
.IDX-wrapper button:hover {
  background-color: var(--button-red-bg-hover, var(--kaplon-red-active)) !important;
  color: var(--color-on-secondary) !important;
}

/* Footer County Card: Racine County inner list override */
.site-footer .footer-panels .county-card.racine-county .county-list {
  background: transparent !important;
  box-shadow: none !important;
}

/* IDX Broker Listing Cards & Details — Dark Mode Contrast Fixes */

/* IDX Broker explicit dark theme overrides */
:root[data-theme='dark'] .IDX-wrapper .idx-listing,
body.dark .IDX-wrapper .idx-listing {
  color: var(--neutral-light) !important;
}

:root[data-theme='dark'] .IDX-wrapper .idx-listing a,
body.dark .IDX-wrapper .idx-listing a {
  color: var(--white) !important;
}

:root[data-theme='dark'] .IDX-wrapper .idx-price,
:root[data-theme='dark'] .IDX-wrapper .listing-price,
:root[data-theme='dark'] .IDX-wrapper .property-address,
:root[data-theme='dark'] .IDX-wrapper .property-details,
:root[data-theme='dark'] .IDX-wrapper .listingCourtesy,
:root[data-theme='dark'] .IDX-wrapper .idx-details-overview__listing-price,
:root[data-theme='dark'] .IDX-wrapper .idx-details-overview__listing-price .IDX-text,
:root[data-theme='dark'] .IDX-wrapper .idx-details-overview__listing-price [class*="IDX-field"],
:root[data-theme='dark'] .IDX-wrapper .idx-details-overview__listing-address,
:root[data-theme='dark'] .IDX-wrapper .idx-details-overview__listing-address .IDX-text,
body.dark .IDX-wrapper .idx-price,
body.dark .IDX-wrapper .listing-price,
body.dark .IDX-wrapper .property-address,
body.dark .IDX-wrapper .property-details,
body.dark .IDX-wrapper .listingCourtesy,
body.dark .IDX-wrapper .idx-details-overview__listing-price,
body.dark .IDX-wrapper .idx-details-overview__listing-price .IDX-text,
body.dark .IDX-wrapper .idx-details-overview__listing-price [class*="IDX-field"],
body.dark .IDX-wrapper .idx-details-overview__listing-address,
body.dark .IDX-wrapper .idx-details-overview__listing-address .IDX-text {
  color: var(--white) !important;
}

:root[data-theme='dark'] .IDX-wrapper .idx-listing .status,
:root[data-theme='dark'] .IDX-wrapper .IDX-status,
body.dark .IDX-wrapper .idx-listing .status,
body.dark .IDX-wrapper .IDX-status {
  background-color: var(--button-red-bg) !important;
  color: var(--color-on-secondary) !important;
}

:root[data-theme='dark'] .IDX-wrapper [style*="color:#333"],
:root[data-theme='dark'] .IDX-wrapper [style*="color:#555"],
:root[data-theme='dark'] .IDX-wrapper [style*="color: #333"],
:root[data-theme='dark'] .IDX-wrapper [style*="color: #555"],
body.dark .IDX-wrapper [style*="color:#333"],
body.dark .IDX-wrapper [style*="color:#555"],
body.dark .IDX-wrapper [style*="color: #333"],
body.dark .IDX-wrapper [style*="color: #555"],
:root[data-theme='dark'] .IDX-wrapper [style*="color:#000"],
:root[data-theme='dark'] .IDX-wrapper [style*="color: #000"],
body.dark .IDX-wrapper [style*="color:#000"],
body.dark .IDX-wrapper [style*="color: #000"] {
  color: var(--idx-light-text) !important;
}

/* Fix: Remove extra black background/shadow from Racine County block group in footer */
.site-footer .wp-block-group.is-nowrap.is-layout-flex {
  background: var(--kaplon-footer-bg) !important;
  box-shadow: none !important;
}

/* Force Racine County block group in footer to match other cards */
.site-footer .col-lg-3 .wp-block-group.is-nowrap.is-layout-flex {
  padding: 0 !important;
  background: var(--kaplon-footer-bg) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-md) !important;
}

.site-footer .col-lg-3 .wp-block-group.is-nowrap.is-layout-flex .widget_nav_menu {
  background: transparent !important;
  box-shadow: none !important;
}

/* Navigation / IDX typography defaults (mode-agnostic) ---
   Move typography/weight/letter-spacing to top-level so dark-mode blocks
   remain color-only. These provide the same visual weight across modes. */
.icon-nav a.active,
.icon-nav .current {
  font-weight: 600;
}

.listing-card_price,
.listing-card_single-item,
.listing-card_address {
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

.IDX-price,
.IDX-address,
.IDX-meta {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Additional typography kept mode-agnostic so weight is consistent across themes */
.IDX-wrapper .idx-details-overview__listing-price,
.IDX-wrapper .idx-details-overview__listing-price .IDX-text,
.IDX-wrapper .idx-details-overview__listing-price [class*="IDX-field"],
.IDX-wrapper .idx-details-overview__listing-address,
.IDX-wrapper .idx-details-overview__listing-address .IDX-text,
.IDX-wrapper .idx-price,
.IDX-wrapper .listing-price,
.IDX-wrapper .property-address,
.IDX-wrapper .property-details,
.IDX-wrapper .listingCourtesy {
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  html[data-kaplon-color-mode=system] .navbar-collapse {
    background-color: var(--dark-surface) !important;
  }

  html[data-kaplon-color-mode=system] .navbar-collapse .navbar-nav>li>a,
  html[data-kaplon-color-mode=system] .navbar-collapse .navbar-nav .nav-link {
    background-color: transparent !important;
    color: var(--dark-text-strong) !important;
  }

  /* Dark mode dropdown toggle caret - keep it red */
  html[data-kaplon-color-mode=system] .navbar-collapse .navbar-nav .dropdown-toggle::after,
  html[data-kaplon-color-mode=system] .header-nav .navbar-nav .dropdown-toggle::after {
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: var(--kaplon-red) !important;
  }

  /* Dark mode: Houzez offcanvas mobile menu - keep consistent dark theme */
  html[data-kaplon-color-mode=system] .offcanvas-mobile-menu {
    background-color: var(--dark-surface) !important;
  }

  html[data-kaplon-color-mode=system] .offcanvas-mobile-menu .mobile-navbar-nav .nav-link {
    background-color: transparent !important;
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .offcanvas-mobile-menu .mobile-navbar-nav .dropdown-toggle::after {
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: var(--kaplon-red) !important;
  }

  html[data-kaplon-color-mode=system] header.site-header,
  html[data-kaplon-color-mode=system] .header-navbar,
  html[data-kaplon-color-mode=system] .header-nav,
  html[data-kaplon-color-mode=system] .navbar,
  html[data-kaplon-color-mode=system] .navbar-collapse,
  html[data-kaplon-color-mode=system] .main-nav,
  html[data-kaplon-color-mode=system] .navigation {
    background: var(--dark-surface);
  }

  html[data-kaplon-color-mode=system] header.site-header.is-sticky {
    background: var(--kaplon-blue);
    /* solid Kaplon Blue */
    border-bottom-color: color-mix(in oklab, var(--white) 20%, transparent);
  }

  html[data-kaplon-color-mode=system] .header-nav,
  html[data-kaplon-color-mode=system] .header-nav a {
    color: var(--dark-text-strong);
  }

  html[data-kaplon-color-mode=system] .header-navbar,
  html[data-kaplon-color-mode=system] .header-nav,
  html[data-kaplon-color-mode=system] .navbar-collapse,
  html[data-kaplon-color-mode=system] .main-nav,
  html[data-kaplon-color-mode=system] .navigation,
  html[data-kaplon-color-mode=system] .header-mobile,
  html[data-kaplon-color-mode=system] .header-nav .navbar-nav {
    border-bottom: 1px solid var(--dark-border);
    box-shadow: var(--shadow-dark-sm);
    transition: background 0.25s ease;
  }

  html[data-kaplon-color-mode=system] .header-nav .dropdown-menu {
    background: var(--dark-surface-base) !important;
    border-color: var(--dark-border) !important;
    box-shadow: var(--shadow-dark-md);
  }

  html[data-kaplon-color-mode=system] .header-nav .navbar-nav>li>a,
  html[data-kaplon-color-mode=system] .navbar-collapse .navbar-nav>li>a {
    background: transparent !important;
    color: var(--dark-text-strong) !important;
  }

  html[data-kaplon-color-mode=system] .header-nav .navbar-nav>li.active>a {
    background: var(--kaplon-blue) !important;
    color: var(--neutral-light) !important;
  }

  html[data-kaplon-color-mode=system] .header-nav .navbar-nav>li>a:hover,
  html[data-kaplon-color-mode=system] .navbar-collapse .navbar-nav>li>a:hover {
    background: var(--dark-hover-bg) !important;
    color: var(--neutral-light) !important;
  }

  html[data-kaplon-color-mode=system] .header-nav .dropdown-menu a {
    background: transparent !important;
    color: var(--dark-text-strong) !important;
  }

  html[data-kaplon-color-mode=system] .header-nav .dropdown-menu a:hover {
    background: var(--dark-hover-bg);
    color: var(--neutral-light);
  }

  html[data-kaplon-color-mode=system] .header-nav i,
  html[data-kaplon-color-mode=system] .header-nav svg {
    filter: brightness(1.2);
  }

  html[data-kaplon-color-mode=system] .header-nav a:hover {
    color: var(--kaplon-blue-light);
  }

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

  html[data-kaplon-color-mode=system] .idx-nav-button-container .idx-nav-button {
    background-color: var(--dark-surface-base);
    border-color: var(--dark-border-mid);
    box-shadow: var(--shadow-dark-sm);
    color: var(--idx-light-text, var(--neutral-light));
  }

  html[data-kaplon-color-mode=system] .idx-nav-button-container .idx-nav-button:where(:hover, :focus-within) {
    background-color: var(--dark-hover-bg);
    border-color: var(--dark-border);
    color: var(--idx-light-text, var(--neutral-light));
  }

  html[data-kaplon-color-mode=system] .idx-nav-button-container .idx-nav-button.idx-nav-button__active {
    background-color: var(--button-red-bg);
    border-color: var(--button-red-border);
    color: var(--color-on-secondary);
  }

  /* Hosted IDX map nav container duplicates styles with higher specificity; override text color explicitly */
  html[data-kaplon-color-mode=system] #IDX-main #navigation-container :where(.idx-nav-button-container) .idx-nav-button {
    color: var(--idx-light-text, var(--neutral-light)) !important;
  }

  html[data-kaplon-color-mode=system] #IDX-main #navigation-container :where(.idx-nav-button-container) .idx-nav-button:where(:hover, :focus-within) {
    color: var(--idx-light-text, var(--neutral-light)) !important;
  }

  html[data-kaplon-color-mode=system] #IDX-main #navigation-container :where(.idx-nav-button-container) .idx-nav-button.idx-nav-button__active {
    color: var(--color-on-secondary) !important;
  }

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


  html[data-kaplon-color-mode=system] .IDX-pagination a,
  html[data-kaplon-color-mode=system] .IDX-pagination button,
  html[data-kaplon-color-mode=system] .IDX-listingNav a,
  html[data-kaplon-color-mode=system] .IDX-listingNav button,
  html[data-kaplon-color-mode=system] .IDX-nav a,
  html[data-kaplon-color-mode=system] .IDX-nav button,
  html[data-kaplon-color-mode=system] .pager a,
  html[data-kaplon-color-mode=system] .pager button {
    /* keep color/background in dark-mode; layout (padding, radius) managed globally */
    background: var(--button-red-bg);
    border: none;
    box-shadow: var(--shadow-dark-sm);
    color: var(--color-on-secondary);
    transition: background 0.2s ease-in-out;
  }

  html[data-kaplon-color-mode=system] .IDX-pagination a:hover,
  html[data-kaplon-color-mode=system] .IDX-pagination button:hover,
  html[data-kaplon-color-mode=system] .IDX-listingNav a:hover,
  html[data-kaplon-color-mode=system] .IDX-listingNav button:hover,
  html[data-kaplon-color-mode=system] .IDX-nav a:hover,
  html[data-kaplon-color-mode=system] .IDX-nav button:hover,
  html[data-kaplon-color-mode=system] .pager a:hover,
  html[data-kaplon-color-mode=system] .pager button:hover {
    background: var(--button-red-bg-hover, var(--kaplon-red-active));
  }

  html[data-kaplon-color-mode=system] .IDX-pagination .active,
  html[data-kaplon-color-mode=system] .IDX-pagination button[disabled],
  html[data-kaplon-color-mode=system] .IDX-listingNav .active,
  html[data-kaplon-color-mode=system] .IDX-listingNav button[disabled],
  html[data-kaplon-color-mode=system] .IDX-nav .active,
  html[data-kaplon-color-mode=system] .IDX-nav button[disabled],
  html[data-kaplon-color-mode=system] .pager .active,
  html[data-kaplon-color-mode=system] .pager button[disabled] {
    /* active/disabled keep color/visuals only; spacing handled outside dark block */
    background: var(--dark-surface);
    border: none;
    box-shadow: var(--shadow-dark-sm);
    color: var(--dark-text);
    transition: background 0.2s ease-in-out;
  }

  /* duplicate pagination/nav blocks removed; colors and visual tokens retained above */
  html[data-kaplon-color-mode=system] .sub-menu {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
  }

  html[data-kaplon-color-mode=system] .sub-menu a {
    color: var(--dark-text);
  }

  html[data-kaplon-color-mode=system] .sub-menu a:hover {
    background: var(--dark-hover-bg);
    color: var(--neutral-light);
  }

  html[data-kaplon-color-mode=system] .mobile-nav-trigger svg,
  html[data-kaplon-color-mode=system] .navbar-toggle i {
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .navbar-toggle:hover i {
    color: var(--kaplon-red);
  }

  /* Dark mode: Houzez mobile header toggle button - keep it RED in both modes */
  html[data-kaplon-color-mode=system] .header-mobile .toggle-button-left,
  html[data-kaplon-color-mode=system] .header-mobile .toggle-button-right {
    background-color: transparent !important;
    color: var(--kaplon-red) !important;
  }

  html[data-kaplon-color-mode=system] .header-mobile .toggle-button-left:hover,
  html[data-kaplon-color-mode=system] .header-mobile .toggle-button-right:hover {
    color: var(--kaplon-red-dark) !important;
  }

  html[data-kaplon-color-mode=system] .icon-nav {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    backdrop-filter: blur(12px);
  }

  html[data-kaplon-color-mode=system] .icon-nav a {
    background: var(--dark-surface-base);
    border: 1px solid var(--dark-border-mid);
    box-shadow: var(--shadow-dark-sm);
    color: var(--dark-text);
  }

  html[data-kaplon-color-mode=system] .icon-nav a:hover {
    background: var(--chip-nav-active-bg);
    border-color: var(--chip-nav-active-border);
    color: var(--chip-nav-active-text);
  }

  html[data-kaplon-color-mode=system] .icon-nav a.active,
  html[data-kaplon-color-mode=system] .icon-nav .current {
    background: var(--chip-nav-active-bg) !important;
    border-color: var(--chip-nav-active-border) !important;
    color: var(--chip-nav-active-text) !important;
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper,
  html[data-kaplon-color-mode=system] .IDX-results,
  html[data-kaplon-color-mode=system] .IDX-details,
  html[data-kaplon-color-mode=system] .IDX-meta,
  html[data-kaplon-color-mode=system] .IDX-price,
  html[data-kaplon-color-mode=system] .IDX-address,
  html[data-kaplon-color-mode=system] .IDX-resultsGrid,
  html[data-kaplon-color-mode=system] .IDX-detailsPrimary,
  html[data-kaplon-color-mode=system] .IDX-secondaryData,
  html[data-kaplon-color-mode=system] .IDX-listing {
    background: var(--dark-surface) !important;
    color: var(--neutral-light) !important;
  }

  /* Typography adjustments should be mode-agnostic; move weight out of dark-mode blocks. */
  html[data-kaplon-color-mode=system] .IDX-results a,
  html[data-kaplon-color-mode=system] .IDX-details a,
  html[data-kaplon-color-mode=system] .IDX-meta a,
  html[data-kaplon-color-mode=system] .IDX-price a,
  html[data-kaplon-color-mode=system] .IDX-wrapper :where(.listing-card_price,
    .listing-card_single-item,
    .listing-card_address,
    .listing-card_meta,
    .listing-card_core-fields,
    .listing-card_additional-info,
    .listing-card_details,
    .listing-card_single-item span,
    .listing-card_single-item label) {
    color: var(--neutral-light) !important;
  }

  html[data-kaplon-color-mode=system] .IDX-address a,
  html[data-kaplon-color-mode=system] .IDX-resultsGrid a,
  html[data-kaplon-color-mode=system] .IDX-detailsPrimary a,
  html[data-kaplon-color-mode=system] .IDX-secondaryData a,
  html[data-kaplon-color-mode=system] .IDX-listing a {
    color: var(--kaplon-red) !important;
    text-decoration: underline;
    transition: color 0.2s;
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper a:hover,
  html[data-kaplon-color-mode=system] .IDX-results a:hover,
  html[data-kaplon-color-mode=system] .IDX-details a:hover,
  html[data-kaplon-color-mode=system] .IDX-meta a:hover,
  html[data-kaplon-color-mode=system] .IDX-price a:hover,
  html[data-kaplon-color-mode=system] .IDX-address a:hover,
  html[data-kaplon-color-mode=system] .IDX-resultsGrid a:hover,
  html[data-kaplon-color-mode=system] .IDX-detailsPrimary a:hover,
  html[data-kaplon-color-mode=system] .IDX-secondaryData a:hover,
  html[data-kaplon-color-mode=system] .IDX-listing a:hover {
    color: var(--kaplon-red-light) !important;
  }

  /* Fix low-contrast spans, labels, and meta inside IDX cards */
  html[data-kaplon-color-mode=system] .IDX-wrapper span,
  html[data-kaplon-color-mode=system] .IDX-wrapper label,
  html[data-kaplon-color-mode=system] .IDX-resultsGrid span,
  html[data-kaplon-color-mode=system] .IDX-resultsGrid label,
  html[data-kaplon-color-mode=system] .IDX-detailsPrimary span,
  html[data-kaplon-color-mode=system] .IDX-detailsPrimary label,
  html[data-kaplon-color-mode=system] .IDX-secondaryData span,
  html[data-kaplon-color-mode=system] .IDX-secondaryData label,
  html[data-kaplon-color-mode=system] .IDX-listing span,
  html[data-kaplon-color-mode=system] .IDX-listing label {
    color: var(--neutral-light) !important;
  }

  /* Ensure price, address, and meta are readable */
  html[data-kaplon-color-mode=system] .listing-card_price,
  html[data-kaplon-color-mode=system] .listing-card_single-item,
  html[data-kaplon-color-mode=system] .listing-card_address {
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .IDX-price,
  html[data-kaplon-color-mode=system] .IDX-address,
  html[data-kaplon-color-mode=system] .IDX-meta {
    color: var(--white) !important;
  }

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

  /* Detail overview price/address inherit inline #1a1a1a without this override */
  html[data-kaplon-color-mode=system] .idx-details-overview__listing-price,
  html[data-kaplon-color-mode=system] .idx-details-overview__listing-price .IDX-text,
  html[data-kaplon-color-mode=system] .idx-details-overview__listing-price [class*="IDX-field"],
  html[data-kaplon-color-mode=system] .idx-details-overview__listing-address,
  html[data-kaplon-color-mode=system] .idx-details-overview__listing-address .IDX-text,
  html[data-kaplon-color-mode=system] .IDX-field-listingPrice,
  html[data-kaplon-color-mode=system] .IDX-field-listingPrice .IDX-text,
  html[data-kaplon-color-mode=system] .IDX-field-address,
  html[data-kaplon-color-mode=system] .IDX-field-address .IDX-text {
    color: var(--idx-light-text, var(--neutral-light)) !important;
  }
}

/* Dark mode dropdown toggle caret - keep it red */

/* Dark mode: Houzez offcanvas mobile menu - keep consistent dark theme */

/* Hosted IDX map nav container duplicates styles with higher specificity; override text color explicitly */

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

/* duplicate pagination/nav blocks removed; colors and visual tokens retained above */

/* Dark mode: Houzez mobile header toggle button - keep it RED in both modes */

/* Typography adjustments should be mode-agnostic; move weight out of dark-mode blocks. */

/* Fix low-contrast spans, labels, and meta inside IDX cards */

/* Ensure price, address, and meta are readable */

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

/* Detail overview price/address inherit inline #1a1a1a without this override */

html[data-kaplon-color-mode=dark] .navbar-collapse {
  background-color: var(--dark-surface) !important;
}

html[data-kaplon-color-mode=dark] .navbar-collapse .navbar-nav>li>a,
html[data-kaplon-color-mode=dark] .navbar-collapse .navbar-nav .nav-link {
  background-color: transparent !important;
  color: var(--dark-text-strong) !important;
}

/* Dark mode dropdown toggle caret - keep it red */

html[data-kaplon-color-mode=dark] .navbar-collapse .navbar-nav .dropdown-toggle::after,
html[data-kaplon-color-mode=dark] .header-nav .navbar-nav .dropdown-toggle::after {
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: var(--kaplon-red) !important;
}

/* Dark mode: Houzez offcanvas mobile menu - keep consistent dark theme */

html[data-kaplon-color-mode=dark] .offcanvas-mobile-menu {
  background-color: var(--dark-surface) !important;
}

html[data-kaplon-color-mode=dark] .offcanvas-mobile-menu .mobile-navbar-nav .nav-link {
  background-color: transparent !important;
  color: var(--white) !important;
}

html[data-kaplon-color-mode=dark] .offcanvas-mobile-menu .mobile-navbar-nav .dropdown-toggle::after {
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: var(--kaplon-red) !important;
}

html[data-kaplon-color-mode=dark] header.site-header,
html[data-kaplon-color-mode=dark] .header-navbar,
html[data-kaplon-color-mode=dark] .header-nav,
html[data-kaplon-color-mode=dark] .navbar,
html[data-kaplon-color-mode=dark] .navbar-collapse,
html[data-kaplon-color-mode=dark] .main-nav,
html[data-kaplon-color-mode=dark] .navigation {
  background: var(--dark-surface);
}

html[data-kaplon-color-mode=dark] header.site-header.is-sticky {
  background: var(--kaplon-blue);
  /* solid Kaplon Blue */
  border-bottom-color: color-mix(in oklab, var(--white) 20%, transparent);
}

html[data-kaplon-color-mode=dark] .header-nav,
html[data-kaplon-color-mode=dark] .header-nav a {
  color: var(--dark-text-strong);
}

html[data-kaplon-color-mode=dark] .header-navbar,
html[data-kaplon-color-mode=dark] .header-nav,
html[data-kaplon-color-mode=dark] .navbar-collapse,
html[data-kaplon-color-mode=dark] .main-nav,
html[data-kaplon-color-mode=dark] .navigation,
html[data-kaplon-color-mode=dark] .header-mobile,
html[data-kaplon-color-mode=dark] .header-nav .navbar-nav {
  border-bottom: 1px solid var(--dark-border);
  box-shadow: var(--shadow-dark-sm);
  transition: background 0.25s ease;
}

html[data-kaplon-color-mode=dark] .header-nav .dropdown-menu {
  background: var(--dark-surface-base) !important;
  border-color: var(--dark-border) !important;
  box-shadow: var(--shadow-dark-md);
}

html[data-kaplon-color-mode=dark] .header-nav .navbar-nav>li>a,
html[data-kaplon-color-mode=dark] .navbar-collapse .navbar-nav>li>a {
  background: transparent !important;
  color: var(--dark-text-strong) !important;
}

html[data-kaplon-color-mode=dark] .header-nav .navbar-nav>li.active>a {
  background: var(--kaplon-blue) !important;
  color: var(--neutral-light) !important;
}

html[data-kaplon-color-mode=dark] .header-nav .navbar-nav>li>a:hover,
html[data-kaplon-color-mode=dark] .navbar-collapse .navbar-nav>li>a:hover {
  background: var(--dark-hover-bg) !important;
  color: var(--neutral-light) !important;
}

html[data-kaplon-color-mode=dark] .header-nav .dropdown-menu a {
  background: transparent !important;
  color: var(--dark-text-strong) !important;
}

html[data-kaplon-color-mode=dark] .header-nav .dropdown-menu a:hover {
  background: var(--dark-hover-bg);
  color: var(--neutral-light);
}

html[data-kaplon-color-mode=dark] .header-nav i,
html[data-kaplon-color-mode=dark] .header-nav svg {
  filter: brightness(1.2);
}

html[data-kaplon-color-mode=dark] .header-nav a:hover {
  color: var(--kaplon-blue-light);
}

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

html[data-kaplon-color-mode=dark] .idx-nav-button-container .idx-nav-button {
  background-color: var(--dark-surface-base);
  border-color: var(--dark-border-mid);
  box-shadow: var(--shadow-dark-sm);
  color: var(--idx-light-text, var(--neutral-light));
}

html[data-kaplon-color-mode=dark] .idx-nav-button-container .idx-nav-button:where(:hover, :focus-within) {
  background-color: var(--dark-hover-bg);
  border-color: var(--dark-border);
  color: var(--idx-light-text, var(--neutral-light));
}

html[data-kaplon-color-mode=dark] .idx-nav-button-container .idx-nav-button.idx-nav-button__active {
  background-color: var(--button-red-bg);
  border-color: var(--button-red-border);
  color: var(--color-on-secondary);
}

/* Hosted IDX map nav container duplicates styles with higher specificity; override text color explicitly */

html[data-kaplon-color-mode=dark] #IDX-main #navigation-container :where(.idx-nav-button-container) .idx-nav-button {
  color: var(--idx-light-text, var(--neutral-light)) !important;
}

html[data-kaplon-color-mode=dark] #IDX-main #navigation-container :where(.idx-nav-button-container) .idx-nav-button:where(:hover, :focus-within) {
  color: var(--idx-light-text, var(--neutral-light)) !important;
}

html[data-kaplon-color-mode=dark] #IDX-main #navigation-container :where(.idx-nav-button-container) .idx-nav-button.idx-nav-button__active {
  color: var(--color-on-secondary) !important;
}

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

html[data-kaplon-color-mode=dark] .IDX-pagination a,
html[data-kaplon-color-mode=dark] .IDX-pagination button,
html[data-kaplon-color-mode=dark] .IDX-listingNav a,
html[data-kaplon-color-mode=dark] .IDX-listingNav button,
html[data-kaplon-color-mode=dark] .IDX-nav a,
html[data-kaplon-color-mode=dark] .IDX-nav button,
html[data-kaplon-color-mode=dark] .pager a,
html[data-kaplon-color-mode=dark] .pager button {
  /* keep color/background in dark-mode; layout (padding, radius) managed globally */
  background: var(--button-red-bg);
  border: none;
  box-shadow: var(--shadow-dark-sm);
  color: var(--color-on-secondary);
  transition: background 0.2s ease-in-out;
}

html[data-kaplon-color-mode=dark] .IDX-pagination a:hover,
html[data-kaplon-color-mode=dark] .IDX-pagination button:hover,
html[data-kaplon-color-mode=dark] .IDX-listingNav a:hover,
html[data-kaplon-color-mode=dark] .IDX-listingNav button:hover,
html[data-kaplon-color-mode=dark] .IDX-nav a:hover,
html[data-kaplon-color-mode=dark] .IDX-nav button:hover,
html[data-kaplon-color-mode=dark] .pager a:hover,
html[data-kaplon-color-mode=dark] .pager button:hover {
  background: var(--button-red-bg-hover, var(--kaplon-red-active));
}

html[data-kaplon-color-mode=dark] .IDX-pagination .active,
html[data-kaplon-color-mode=dark] .IDX-pagination button[disabled],
html[data-kaplon-color-mode=dark] .IDX-listingNav .active,
html[data-kaplon-color-mode=dark] .IDX-listingNav button[disabled],
html[data-kaplon-color-mode=dark] .IDX-nav .active,
html[data-kaplon-color-mode=dark] .IDX-nav button[disabled],
html[data-kaplon-color-mode=dark] .pager .active,
html[data-kaplon-color-mode=dark] .pager button[disabled] {
  /* active/disabled keep color/visuals only; spacing handled outside dark block */
  background: var(--dark-surface);
  border: none;
  box-shadow: var(--shadow-dark-sm);
  color: var(--dark-text);
  transition: background 0.2s ease-in-out;
}

/* duplicate pagination/nav blocks removed; colors and visual tokens retained above */

html[data-kaplon-color-mode=dark] .sub-menu {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
}

html[data-kaplon-color-mode=dark] .sub-menu a {
  color: var(--dark-text);
}

html[data-kaplon-color-mode=dark] .sub-menu a:hover {
  background: var(--dark-hover-bg);
  color: var(--neutral-light);
}

html[data-kaplon-color-mode=dark] .mobile-nav-trigger svg,
html[data-kaplon-color-mode=dark] .navbar-toggle i {
  color: var(--white);
}

html[data-kaplon-color-mode=dark] .navbar-toggle:hover i {
  color: var(--kaplon-red);
}

/* Dark mode: Houzez mobile header toggle button - keep it RED in both modes */

html[data-kaplon-color-mode=dark] .header-mobile .toggle-button-left,
html[data-kaplon-color-mode=dark] .header-mobile .toggle-button-right {
  background-color: transparent !important;
  color: var(--kaplon-red) !important;
}

html[data-kaplon-color-mode=dark] .header-mobile .toggle-button-left:hover,
html[data-kaplon-color-mode=dark] .header-mobile .toggle-button-right:hover {
  color: var(--kaplon-red-dark) !important;
}

html[data-kaplon-color-mode=dark] .icon-nav {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  backdrop-filter: blur(12px);
}

html[data-kaplon-color-mode=dark] .icon-nav a {
  background: var(--dark-surface-base);
  border: 1px solid var(--dark-border-mid);
  box-shadow: var(--shadow-dark-sm);
  color: var(--dark-text);
}

html[data-kaplon-color-mode=dark] .icon-nav a:hover {
  background: var(--chip-nav-active-bg);
  border-color: var(--chip-nav-active-border);
  color: var(--chip-nav-active-text);
}

html[data-kaplon-color-mode=dark] .icon-nav a.active,
html[data-kaplon-color-mode=dark] .icon-nav .current {
  background: var(--chip-nav-active-bg) !important;
  border-color: var(--chip-nav-active-border) !important;
  color: var(--chip-nav-active-text) !important;
}

html[data-kaplon-color-mode=dark] .IDX-wrapper,
html[data-kaplon-color-mode=dark] .IDX-results,
html[data-kaplon-color-mode=dark] .IDX-details,
html[data-kaplon-color-mode=dark] .IDX-meta,
html[data-kaplon-color-mode=dark] .IDX-price,
html[data-kaplon-color-mode=dark] .IDX-address,
html[data-kaplon-color-mode=dark] .IDX-resultsGrid,
html[data-kaplon-color-mode=dark] .IDX-detailsPrimary,
html[data-kaplon-color-mode=dark] .IDX-secondaryData,
html[data-kaplon-color-mode=dark] .IDX-listing {
  background: var(--dark-surface) !important;
  color: var(--neutral-light) !important;
}

/* Typography adjustments should be mode-agnostic; move weight out of dark-mode blocks. */

html[data-kaplon-color-mode=dark] .IDX-results a,
html[data-kaplon-color-mode=dark] .IDX-details a,
html[data-kaplon-color-mode=dark] .IDX-meta a,
html[data-kaplon-color-mode=dark] .IDX-price a,
html[data-kaplon-color-mode=dark] .IDX-wrapper :where(.listing-card_price,
  .listing-card_single-item,
  .listing-card_address,
  .listing-card_meta,
  .listing-card_core-fields,
  .listing-card_additional-info,
  .listing-card_details,
  .listing-card_single-item span,
  .listing-card_single-item label) {
  color: var(--neutral-light) !important;
}

html[data-kaplon-color-mode=dark] .IDX-address a,
html[data-kaplon-color-mode=dark] .IDX-resultsGrid a,
html[data-kaplon-color-mode=dark] .IDX-detailsPrimary a,
html[data-kaplon-color-mode=dark] .IDX-secondaryData a,
html[data-kaplon-color-mode=dark] .IDX-listing a {
  color: var(--kaplon-red) !important;
  text-decoration: underline;
  transition: color 0.2s;
}

html[data-kaplon-color-mode=dark] .IDX-wrapper a:hover,
html[data-kaplon-color-mode=dark] .IDX-results a:hover,
html[data-kaplon-color-mode=dark] .IDX-details a:hover,
html[data-kaplon-color-mode=dark] .IDX-meta a:hover,
html[data-kaplon-color-mode=dark] .IDX-price a:hover,
html[data-kaplon-color-mode=dark] .IDX-address a:hover,
html[data-kaplon-color-mode=dark] .IDX-resultsGrid a:hover,
html[data-kaplon-color-mode=dark] .IDX-detailsPrimary a:hover,
html[data-kaplon-color-mode=dark] .IDX-secondaryData a:hover,
html[data-kaplon-color-mode=dark] .IDX-listing a:hover {
  color: var(--kaplon-red-light) !important;
}

/* Fix low-contrast spans, labels, and meta inside IDX cards */

html[data-kaplon-color-mode=dark] .IDX-wrapper span,
html[data-kaplon-color-mode=dark] .IDX-wrapper label,
html[data-kaplon-color-mode=dark] .IDX-resultsGrid span,
html[data-kaplon-color-mode=dark] .IDX-resultsGrid label,
html[data-kaplon-color-mode=dark] .IDX-detailsPrimary span,
html[data-kaplon-color-mode=dark] .IDX-detailsPrimary label,
html[data-kaplon-color-mode=dark] .IDX-secondaryData span,
html[data-kaplon-color-mode=dark] .IDX-secondaryData label,
html[data-kaplon-color-mode=dark] .IDX-listing span,
html[data-kaplon-color-mode=dark] .IDX-listing label {
  color: var(--neutral-light) !important;
}

/* Ensure price, address, and meta are readable */

html[data-kaplon-color-mode=dark] .listing-card_price,
html[data-kaplon-color-mode=dark] .listing-card_single-item,
html[data-kaplon-color-mode=dark] .listing-card_address {
  color: var(--white) !important;
}

html[data-kaplon-color-mode=dark] .IDX-price,
html[data-kaplon-color-mode=dark] .IDX-address,
html[data-kaplon-color-mode=dark] .IDX-meta {
  color: var(--white) !important;
}

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

/* Detail overview price/address inherit inline #1a1a1a without this override */

html[data-kaplon-color-mode=dark] .idx-details-overview__listing-price,
html[data-kaplon-color-mode=dark] .idx-details-overview__listing-price .IDX-text,
html[data-kaplon-color-mode=dark] .idx-details-overview__listing-price [class*="IDX-field"],
html[data-kaplon-color-mode=dark] .idx-details-overview__listing-address,
html[data-kaplon-color-mode=dark] .idx-details-overview__listing-address .IDX-text,
html[data-kaplon-color-mode=dark] .IDX-field-listingPrice,
html[data-kaplon-color-mode=dark] .IDX-field-listingPrice .IDX-text,
html[data-kaplon-color-mode=dark] .IDX-field-address,
html[data-kaplon-color-mode=dark] .IDX-field-address .IDX-text {
  color: var(--idx-light-text, var(--neutral-light)) !important;
}