/* Homepage V2 iterative refinements.
 * Keep scoped to the homepage until the authored frontend source is restored.
 */

/* Homepage-owned surface token. The redesign intentionally uses the warm cream
 * canvas from the hero in light mode instead of falling back to the global
 * white page token. All V2 sections inherit this token so section boundaries
 * stay visually continuous. */
.home-page-v2 {
  --color-page-bg: #fffaf2;
  background: #fffaf2;
}

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

/* Let the hero artwork begin behind the sticky global header without changing
 * the global header itself. The padding compensates for the negative margin so
 * hero content keeps its previous visual position. */
.home-page-v2 > .home-hero-v2 {
  margin-top: -4.75rem;
  padding-top: 4.75rem;
}

/* Desktop header has a slightly taller visual shell than mobile/tablet. Pull
 * the hero a little farther upward so no page-background strip remains above
 * the artwork, while preserving the hero content position with matching
 * padding. */
@media (min-width: 1024px) {
  .home-page-v2 > .home-hero-v2 {
    margin-top: -5.35rem;
    padding-top: 5.35rem;
  }
}

@media (max-width: 639px) {
  .home-page-v2 > .home-hero-v2 {
    margin-top: -4rem;
    padding-top: 4rem;
  }
}

/* Keep the search control itself RTL on Persian pages. `dir="auto"` switches
 * an English query such as "ehsan" to LTR and Chrome then paints the native
 * search clear button on the wrong side. CSS direction keeps the control RTL;
 * unicode-bidi: plaintext still lets the typed run shape naturally. */
html[lang="fa"] .home-hero-v2 .hero-input-control[type="search"] {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: plaintext;
}

/* Persian autocomplete must stay truly RTL even though search-ui.js injects
 * a higher-specificity light-theme rule at runtime. */
html[lang="fa"] .home-hero-v2 .homepage-search-command {
  direction: rtl !important;
  text-align: right !important;
}

html[lang="fa"] .home-hero-v2 .homepage-search-command .autocomplete-section-label {
  direction: rtl !important;
  text-align: right !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[lang="fa"] .home-hero-v2 .homepage-search-command .autocomplete-command-item {
  direction: rtl !important;
  text-align: right !important;
  flex-direction: row !important;
}

html[lang="fa"] .home-hero-v2 .homepage-search-command .autocomplete-command-copy {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right !important;
}

html[lang="fa"] .home-hero-v2 .homepage-search-command .autocomplete-command-title,
html[lang="fa"] .home-hero-v2 .homepage-search-command .autocomplete-command-subtitle {
  display: block;
  width: 100%;
  text-align: right !important;
  unicode-bidi: plaintext;
}

html[lang="fa"] .home-hero-v2 .homepage-search-command .autocomplete-command-icon {
  flex: 0 0 1.5rem;
}

/* The runtime-injected autocomplete stylesheet is light-only. Keep the dark
 * panel fully opaque so the city rail cannot visually bleed through it. */
@media (prefers-color-scheme: dark) {
  .home-hero-v2 .homepage-search-command,
  .home-hero-v2 .ui-search-results {
    background: #121212 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Preserve native progressive enhancement and visible keyboard focus. */
.home-hero-v2 [hidden] {
  display: none !important;
}

.home-page-v2 :where(a, button, summary):focus-visible {
  outline: 2px solid #b45309;
  outline-offset: 3px;
}

.home-hero-v2 .hero-input-label,
.home-hero-v2 .hero-input-control::placeholder {
  color: #64748b;
}

.home-page-v2 :is(.business-cta-v2-eyebrow, .latest-businesses-v2-eyebrow, .guides-v2-eyebrow, .faq-v2-eyebrow) {
  color: #a16207;
}

@media (prefers-color-scheme: dark) {
  .home-page-v2 :where(a, button, summary):focus-visible {
    outline-color: #fbbf24;
  }

  .home-hero-v2 .hero-input-label,
  .home-hero-v2 .hero-input-control::placeholder {
    color: #a3a3a3;
  }

  .home-page-v2 :is(.business-cta-v2-eyebrow, .latest-businesses-v2-eyebrow, .guides-v2-eyebrow, .faq-v2-eyebrow) {
    color: #fbbf24;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page-v2 .homepage-search-command * {
    transition: none !important;
    scroll-behavior: auto;
  }
}