/* Dark companion for homepage_redesign_v2.css. */

@media (prefers-color-scheme: dark) {
  .home-hero-v2 {
    background: var(--color-page-bg, #101010);
  }

  .home-hero-v2::after {
    background:
      linear-gradient(180deg, rgb(16 16 16 / 4%) 0%, rgb(16 16 16 / 8%) 48%, rgb(16 16 16 / 76%) 84%, var(--color-page-bg, #101010) 100%);
  }

  .home-hero-v2-title {
    color: var(--color-text, #f3f4f6);
  }

  .home-hero-v2-title-accent {
    color: var(--color-primary-hover, #fbbf24);
  }

  .home-hero-v2-lead {
    color: var(--color-text-soft, #d4d4d4);
  }

  .home-hero-v2-proof {
    color: var(--color-text-muted, #a3a3a3);
  }

  .home-hero-v2 .hero-search-grid {
    border-color: rgb(255 255 255 / 8%);
    background: rgb(24 24 24 / 80%);
    box-shadow: 0 26px 70px rgb(0 0 0 / 38%);
  }

  .home-hero-v2 .hero-input {
    border-color: var(--color-border, #343434);
    background: rgb(32 32 32 / 88%);
  }

  .home-hero-v2 .hero-input:focus-within {
    border-color: rgb(245 158 11 / 70%);
    box-shadow: 0 0 0 3px rgb(245 158 11 / 14%);
  }

  .home-hero-v2 .hero-input-label {
    color: var(--color-text-muted, #a3a3a3);
  }

  .home-hero-v2 .hero-input-control {
    color: var(--color-text, #f3f4f6);
  }

  .home-hero-v2 .hero-input-control::placeholder {
    color: var(--color-text-muted, #a3a3a3);
  }

  .home-hero-v2-search-button {
    background: var(--color-primary, #f59e0b);
    color: var(--color-primary-text, #111);
    box-shadow: 0 14px 34px rgb(245 158 11 / 18%);
  }

  .home-hero-v2-search-button:hover {
    background: var(--color-primary-hover, #fbbf24);
    box-shadow: 0 17px 38px rgb(245 158 11 / 24%);
  }

  .home-hero-v2-shortcut {
    border-color: var(--color-chip-border, #3a2a12);
    background: rgb(32 32 32 / 68%);
    color: var(--color-text-soft, #d4d4d4);
  }

  .home-hero-v2-shortcut:hover {
    border-color: rgb(245 158 11 / 36%);
    background: rgb(38 38 38 / 88%);
    color: var(--color-text, #f3f4f6);
  }

  .home-hero-v2-mobile-trigger {
    border-color: var(--color-border, #343434);
    background: rgb(24 24 24 / 82%);
    color: var(--color-text, #f3f4f6);
    box-shadow: 0 20px 48px rgb(0 0 0 / 36%);
  }

  .home-hero-v2-mobile-trigger svg {
    color: var(--color-primary-hover, #fbbf24);
  }

  /* search-ui.js injects its light autocomplete CSS at runtime, after page CSS.
   * Keep these declarations important so dark mode remains authoritative. */
  .home-hero-v2 .homepage-search-command,
  .home-hero-v2 .ui-search-results {
    background: rgb(18 18 18 / 98.5%) !important;
    border-color: var(--color-border, #343434) !important;
    color: var(--color-text, #f3f4f6) !important;
    box-shadow: 0 24px 70px rgb(0 0 0 / 52%) !important;
  }

  .home-hero-v2 .homepage-search-command .autocomplete-section + .autocomplete-section,
  .home-hero-v2 .ui-search-results .autocomplete-section + .autocomplete-section {
    border-top-color: var(--color-border-soft, #2a2a2a) !important;
  }

  .home-hero-v2 .homepage-search-command .autocomplete-section-label,
  .home-hero-v2 .ui-search-results .autocomplete-section-label {
    color: var(--color-text-muted, #a3a3a3) !important;
  }

  .home-hero-v2 .homepage-search-command .autocomplete-command-item,
  .home-hero-v2 .ui-search-results .autocomplete-command-item {
    background: transparent !important;
    color: var(--color-text-soft, #d4d4d4) !important;
  }

  .home-hero-v2 .homepage-search-command .autocomplete-command-item:hover,
  .home-hero-v2 .homepage-search-command .autocomplete-command-item.is-active,
  .home-hero-v2 .ui-search-results .autocomplete-command-item:hover,
  .home-hero-v2 .ui-search-results .autocomplete-command-item.is-active {
    background: rgb(245 158 11 / 10%) !important;
    color: var(--color-text, #f3f4f6) !important;
  }

  .home-hero-v2 .homepage-search-command .autocomplete-command-title,
  .home-hero-v2 .ui-search-results .autocomplete-command-title {
    color: var(--color-text, #f3f4f6) !important;
  }

  .home-hero-v2 .homepage-search-command .autocomplete-command-subtitle,
  .home-hero-v2 .ui-search-results .autocomplete-command-subtitle {
    color: var(--color-text-muted, #a3a3a3) !important;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 767px) {
  .home-hero-v2::after {
    background:
      linear-gradient(180deg, rgb(16 16 16 / 3%) 0%, rgb(16 16 16 / 8%) 46%, rgb(16 16 16 / 76%) 82%, var(--color-page-bg, #101010) 100%);
  }
}