/* =========================================================================
   Shared Dark-Mode Overrides
   =========================================================================
   Loaded site-wide via WPCode:
     <link ... href=".../dark-theme.css" media="(prefers-color-scheme: dark)">

   Pages that manage their own dark theme add data-hg-dark to their root
   wrapper (e.g. <div class="mc-page" data-hg-dark>). All page-content
   rules below exclude those regions via :not([data-hg-dark] *).
   ========================================================================= */
@media (prefers-color-scheme: dark) {

  /* ── Shared dark custom properties ────────────────────────────────────── */
  :root {
    --hg-dark-bg: #161a1f;
    --hg-dark-surface: #22272f;
    --hg-dark-text: #e8ecf0;
    --hg-dark-text-secondary: #a0a8b4;
    --hg-dark-border: #3a4150;
    --hg-dark-elevated: #444;
    --hg-dark-border-strong: #555;
  }

  /* =====================================================================
     LAYER A — WP Chrome
     Always applies regardless of page type. These elements live outside
     any page-content wrapper.
     ===================================================================== */

  /* Logo */
  img.header-image.is-logo-image {
    content: url('https://site.housegrade.org/wp-content/uploads/2025/05/housegrade-dark-logo-60h.webp') !important;
    box-shadow: none !important;
  }

  /* Page background & inherited text color */
  html, body {
    background: var(--hg-dark-bg);
    color: var(--hg-dark-text);
  }

  /* WP / GeneratePress structural wrappers (may have explicit light bg) */
  #page,
  .site-header,
  .inside-header {
    background: var(--hg-dark-bg);
  }

  .site-content,
  .inside-article,
  .entry-content {
    background: var(--hg-dark-bg);
  }

  /* wp-block-cover: preserve background images */
  .wp-block-cover,
  [class*="wp-block-cover"],
  #search-area {
    background-color: unset !important;
  }

  .wp-block-cover__background.has-background-dim {
    background-color: #000000 !important;
  }

  /* Overlays */
  .overlay-content,
  [class*="overlay"] {
    background: var(--hg-dark-elevated) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
  }

  /* Match "More Data Layers" panel to base dark background */
  #moreFiltersOverlay .overlay-content,
  #moreDataLayersOverlay .overlay-content {
    background: var(--hg-dark-bg) !important;
  }

  .overlay-content p,
  [class*="overlay"] p {
    color: white !important;
  }

  /* Hamburger / mobile menu */
  .menu-toggle,
  [class*="hamburger"] {
    background: var(--hg-dark-surface) !important;
    border: none;
  }

  .gp-icon.icon-menu-bars {
    background: transparent !important;
  }

  .menu-toggle span,
  .menu-toggle::before,
  .menu-toggle::after,
  [class*="hamburger"] span,
  [class*="hamburger"]::before,
  [class*="hamburger"]::after {
    background: white;
    color: white;
    border: none;
  }

  .menu-toggle:hover,
  [class*="hamburger"]:hover {
    background: var(--hg-dark-elevated) !important;
  }

  /* Keep submenu caret wrappers clean (avoid white block on Historical) */
  .dropdown-menu-toggle,
  .dropdown-menu-toggle .gp-icon,
  .dropdown-menu-toggle svg {
    background: transparent !important;
  }

  /* Nav links */
  #primary-menu a {
    color: white !important;
  }

  /* WordPress header / navigation (targeted hardening) */
  .site-header,
  .inside-header,
  #site-navigation,
  #site-navigation .inside-navigation,
  #mobile-menu-control-wrapper {
    background: var(--hg-dark-bg);
  }

  #site-navigation .main-nav,
  #site-navigation .main-nav > ul,
  #site-navigation .sub-menu {
    background: var(--hg-dark-bg);
  }

  #site-navigation .main-nav .menu-item > a {
    color: #e8ecf0 !important;
  }

  #site-navigation .main-nav .menu-item > a:hover,
  #site-navigation .main-nav .menu-item > a:focus {
    color: #ffffff !important;
    background: var(--hg-dark-elevated);
  }

  #site-navigation .sub-menu {
    border: 1px solid var(--hg-dark-border);
  }

  #mobile-menu-control-wrapper .menu-toggle,
  #site-navigation .menu-toggle {
    border: 1px solid var(--hg-dark-border);
  }

  .gp-icon.icon-menu-bars svg {
    color: #ffffff;
    fill: currentColor;
  }

  /* Customize HouseGrade overlay */
  a[onclick*="toggleCustomizeOverlay"] {
    color: white !important;
  }

  a[onclick*="toggleCustomizeOverlay"]:hover {
    color: #ccc !important;
  }

  #customizeOverlay .hg-custom-scrollbar {
    background: #5c5c5c !important;
  }

  #customizeOverlay .hg-custom-scrollbar-thumb {
    background: #9aa0a6 !important;
  }

  /* B&W icon inversion */
  .iconBW img {
    filter: invert(1);
    background-color: var(--hg-dark-surface) !important;
    padding: 2px;
    border-radius: 2px;
    mix-blend-mode: screen;
  }

  /* =====================================================================
     LAYER B — Page Content
     Guarded by :not([data-hg-dark] *) so self-managed pages are excluded.
     ===================================================================== */

  /* ── Borders — make light-theme borders visible on dark backgrounds ── */
  *:not([data-hg-dark] *) {
    border-color: var(--hg-dark-border-strong);
  }

  /* ── Text color ───────────────────────────────────────────────────────
     Targets text-bearing elements rather than *. Body inheritance handles
     generic text; these catch elements where the WP theme or page CSS
     sets an explicit light-mode color.
     ──────────────────────────────────────────────────────────────────── */
  h1:not([data-hg-dark] *), h2:not([data-hg-dark] *), h3:not([data-hg-dark] *),
  h4:not([data-hg-dark] *), h5:not([data-hg-dark] *), h6:not([data-hg-dark] *),
  p:not([data-hg-dark] *), li:not([data-hg-dark] *),
  td:not([data-hg-dark] *), th:not([data-hg-dark] *),
  dt:not([data-hg-dark] *), dd:not([data-hg-dark] *),
  label:not([data-hg-dark] *), legend:not([data-hg-dark] *),
  figcaption:not([data-hg-dark] *), blockquote:not([data-hg-dark] *),
  a:not([data-hg-dark] *), span:not([data-hg-dark] *),
  small:not([data-hg-dark] *), strong:not([data-hg-dark] *),
  em:not([data-hg-dark] *), code:not([data-hg-dark] *),
  pre:not([data-hg-dark] *), cite:not([data-hg-dark] *),
  address:not([data-hg-dark] *), summary:not([data-hg-dark] *) {
    color: white;
  }

  /* ── Container backgrounds — targeted instead of blanket div rule ──── */
  .secondary-header:not([data-hg-dark] *),
  .listing-header:not([data-hg-dark] *),
  .dropdown-toggle:not([data-hg-dark] *),
  .dropdown-menu:not([data-hg-dark] *) {
    background: var(--hg-dark-bg);
  }

  .map-legend:not([data-hg-dark] *) {
    background: var(--hg-dark-surface);
  }

  .dropdown-menu:not([data-hg-dark] *) {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
  }

  /* Preserve map legend indicator colors */
  .legend-color[data-level="high"]   { background-color: #3182bd !important; }
  .legend-color[data-level="medium"] { background-color: #9ecae1 !important; }
  .legend-color[data-level="low"]    { background-color: #deebf7 !important; }

  /* ── Form elements ──────────────────────────────────────────────────── */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([data-hg-dark] *),
  select:not([data-hg-dark] *),
  textarea:not([data-hg-dark] *) {
    background: var(--hg-dark-elevated) !important;
    color: white;
    border: 1px solid #666;
  }

  input::placeholder, textarea::placeholder {
    color: #ccc;
  }

  input[type="checkbox"]:not([data-hg-dark] *),
  input[type="radio"]:not([data-hg-dark] *) {
    filter: invert(1);
  }

  #layer-select-form input[type="radio"],
  #propertyTypeGroup input[type="checkbox"] {
    filter: none;
    accent-color: #0052D5;
  }

  /* ── Buttons ────────────────────────────────────────────────────────── */
  button:not([data-hg-dark] *),
  .cta2,
  [class*="btn"]:not([data-hg-dark] *) {
    background: #0052D5 !important;
    color: white !important;
    border: 1px solid #0052D5;
  }

  button:not([data-hg-dark] *):hover,
  .cta2:hover,
  [class*="btn"]:not([data-hg-dark] *):hover {
    background: #2679FC !important;
  }

  .reset-filters {
    background: transparent !important;
    border: none;
  }

  .reset-filters:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #2679FC;
  }

  [class*="close"]:not([data-hg-dark] *) {
    background: #0052D5 !important;
    color: white;
  }

  [class*="close"]:not([data-hg-dark] *):hover {
    background: #212121 !important;
  }

  /* Info icon */
  .info-icon {
    background-color: #0052D5 !important;
    color: white !important;
  }

  /* ── Search / dropdown borders ──────────────────────────────────────── */
  .search-box:not([data-hg-dark] *),
  .dropdown-toggle:not([data-hg-dark] *) {
    border-color: white !important;
  }

  /* ── Specific text overrides ────────────────────────────────────────── */
  .moreFiltersButton,
  .moreFiltersButton *,
  #layer-dropdown,
  .reset-filters {
    color: white !important;
  }

  /* Data layers helper link ("More Layers") on dark background */
  #data-layers a[onclick*="toggleDataLayersOverlay"] {
    color: var(--hg-dark-text) !important;
  }

  #data-layers a[onclick*="toggleDataLayersOverlay"]:hover {
    color: #ffffff !important;
  }

  /* ── Cards and listings ─────────────────────────────────────────────── */
  [class*="card"]:not([data-hg-dark] *),
  [class*="listing"]:not([data-hg-dark] *) {
    background: var(--hg-dark-surface) !important;
    border: 1px solid var(--hg-dark-border-strong);
  }

  /* ── Tooltips ───────────────────────────────────────────────────────── */
  [class*="tooltip"]:not([data-hg-dark] *) {
    background: #222 !important;
    border: 1px solid var(--hg-dark-border-strong);
  }

  [class*="tooltip"]:not([data-hg-dark] *)::after {
    border-top-color: #222;
    border-bottom-color: #222;
  }

  /* ── Inline style overrides ─────────────────────────────────────────── */
  [style*="background: white"]:not([data-hg-dark] *),
  [style*="background-color: white"]:not([data-hg-dark] *),
  [style*="background: #fff"]:not([data-hg-dark] *),
  [style*="background-color: #fff"]:not([data-hg-dark] *) {
    background: var(--hg-dark-surface) !important;
  }

  [style*="color: black"]:not([data-hg-dark] *),
  [style*="color: #000"]:not([data-hg-dark] *) {
    color: white !important;
  }
}