/* 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: primary nav links */
.offcanvas-mobile-menu {
  background-color: var(--kaplon-blue-dark) !important;
}

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

.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;
}

/* 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 {

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

  border-bottom: 1px solid var(--kaplon-red);
}

/* Dropdowns follow same theme */
.dropdown-menu {
  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;
  }
}

/* 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);
  }
}

/* ==========================================================================
   Splash page hero overlay (homepage only)
   Keep the nav transparent over the splash hero until the sticky state fires.
   ========================================================================== */
body.home .header-main-wrap,
body.home .houzez-header-main,
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: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  border-bottom-color: transparent !important;
}

body.home .header-nav .navbar-nav>li>a,
body.home .navbar-collapse .navbar-nav>li>a {
  background: transparent !important;
}

/* Once the header sticks, reintroduce the solid brand panel for readability */
body.home .houzez-header-main.is-sticky,
body.home header.site-header.is-sticky,
body.home .header-navbar.is-sticky,
body.home .header-nav.is-sticky {
  background: var(--kaplon-blue-dark) !important;
  box-shadow: var(--shadow-md);
  border-bottom-color: color-mix(in oklab, var(--white) 24%, transparent) !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: visible;
  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 8px;
  /* compact end buffer */
  content: "";
}

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

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

.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) {
  .navbar-collapse {
    background-color: var(--dark-surface) !important;
  }

  .navbar-collapse .navbar-nav>li>a,
  .navbar-collapse .navbar-nav .nav-link {
    background-color: transparent !important;
    color: var(--dark-text-strong) !important;
  }

  /* Dark mode dropdown toggle caret - keep it red */
  .navbar-collapse .navbar-nav .dropdown-toggle::after,
  .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 */
  .offcanvas-mobile-menu {
    background-color: var(--dark-surface) !important;
  }

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

  .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;
  }

  .houzez-header-main,
  header.site-header,
  .header-navbar,
  .header-nav,
  .navbar,
  .navbar-collapse,
  .main-nav,
  .navigation {
    background: var(--dark-surface);
  }

  .houzez-header-main.is-sticky,
  header.site-header.is-sticky {
    background: var(--kaplon-blue);
    /* solid Kaplon Blue */
    border-bottom-color: color-mix(in oklab, var(--white) 20%, transparent);
  }

  .header-nav,
  .header-nav a {
    color: var(--dark-text-strong);
  }

  .header-navbar,
  .header-nav,
  .navbar-collapse,
  .main-nav,
  .navigation,
  .header-mobile,
  .header-nav .navbar-nav {
    border-bottom: 1px solid var(--dark-border);
    box-shadow: var(--shadow-dark-sm);
    transition: background 0.25s ease;
  }

  .header-nav .dropdown-menu {
    background: var(--dark-surface-base) !important;
    border-color: var(--dark-border) !important;
    box-shadow: var(--shadow-dark-md);
  }

  .header-nav .navbar-nav>li>a,
  .navbar-collapse .navbar-nav>li>a {
    background: transparent !important;
    color: var(--dark-text-strong) !important;
  }

  .header-nav .navbar-nav>li.active>a {
    background: var(--kaplon-blue) !important;
    color: var(--neutral-light) !important;
  }

  .header-nav .navbar-nav>li>a:hover,
  .navbar-collapse .navbar-nav>li>a:hover {
    background: var(--dark-hover-bg) !important;
    color: var(--neutral-light) !important;
  }

  .header-nav .dropdown-menu a {
    background: transparent !important;
    color: var(--dark-text-strong) !important;
  }

  .header-nav .dropdown-menu a:hover {
    background: var(--dark-hover-bg);
    color: var(--neutral-light);
  }

  .header-nav i,
  .header-nav svg {
    filter: brightness(1.2);
  }

  .header-nav a:hover {
    color: var(--kaplon-blue-light);
  }

  .no-gap-hr {
    background: var(--gradient-divider-light) !important;
  }

  .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));
  }

  .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));
  }

  .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 */
  #IDX-main #navigation-container :where(.idx-nav-button-container) .idx-nav-button {
    color: var(--idx-light-text, var(--neutral-light)) !important;
  }

  #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;
  }

  #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 */


  .IDX-pagination a,
  .IDX-pagination button,
  .IDX-listingNav a,
  .IDX-listingNav button,
  .IDX-nav a,
  .IDX-nav button,
  .pager a,
  .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;
  }

  .IDX-pagination a:hover,
  .IDX-pagination button:hover,
  .IDX-listingNav a:hover,
  .IDX-listingNav button:hover,
  .IDX-nav a:hover,
  .IDX-nav button:hover,
  .pager a:hover,
  .pager button:hover {
    background: var(--button-red-bg-hover, var(--kaplon-red-active));
  }

  .IDX-pagination .active,
  .IDX-pagination button[disabled],
  .IDX-listingNav .active,
  .IDX-listingNav button[disabled],
  .IDX-nav .active,
  .IDX-nav button[disabled],
  .pager .active,
  .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 */
  .houzez-dropdown,
  .sub-menu {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
  }

  .sub-menu a {
    color: var(--dark-text);
  }

  .sub-menu a:hover {
    background: var(--dark-hover-bg);
    color: var(--neutral-light);
  }

  .mobile-nav-trigger svg,
  .navbar-toggle i {
    color: var(--white);
  }

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

  /* Dark mode: Houzez mobile header toggle button - keep it RED in both modes */
  .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;
  }

  .icon-nav {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    backdrop-filter: blur(12px);
  }

  .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);
  }

  .icon-nav a:hover {
    background: var(--chip-nav-active-bg);
    border-color: var(--chip-nav-active-border);
    color: var(--chip-nav-active-text);
  }

  .icon-nav a.active,
  .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;
  }

  .IDX-wrapper,
  .IDX-results,
  .IDX-details,
  .IDX-meta,
  .IDX-price,
  .IDX-address,
  .IDX-resultsGrid,
  .IDX-detailsPrimary,
  .IDX-secondaryData,
  .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. */
  .IDX-results a,
  .IDX-details a,
  .IDX-meta a,
  .IDX-price a,

  .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;
  }

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

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

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

  /* Ensure price, address, and meta are readable */
  .listing-card_price,
  .listing-card_single-item,
  .listing-card_address {
    color: var(--white) !important;
  }

  .IDX-price,
  .IDX-address,
  .IDX-meta {
    color: var(--white) !important;
  }

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

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