/* Home route planner promo & hero scroll indicator (matches siphtml design) */

/* Space below the overlapping search card before the route planner section */
.home-search-below {
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .home-search-below {
    margin-bottom: 4.5rem;
  }
}

.home-hero-scroll {  animation: home-scroll-bounce 2s ease-in-out infinite;
}

@keyframes home-scroll-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

.home-route-planner-visual {
  position: relative;
  height: 480px;
}

@media (max-width: 1023px) {
  .home-route-planner-visual {
    height: 360px;
    margin-bottom: 2rem;
  }
}

.home-route-card--trail {
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 11rem;
  z-index: 10;
}

.home-route-card--ai {
  position: absolute;
  bottom: -1rem;
  left: -1rem;
  width: 13rem;
  z-index: 10;
}

@media (max-width: 640px) {
  .home-route-card--trail {
    right: 0;
    top: -0.5rem;
    width: 10rem;
  }

  .home-route-card--ai {
    left: 0;
    bottom: -0.5rem;
    width: 11.5rem;
  }
}

.home-search-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: hsl(var(--primary));
}

/* Home search location text field */
.home-search-location-input {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: hsl(var(--foreground));
  -webkit-text-fill-color: hsl(var(--foreground));
}

.home-search-location-input::placeholder {
  color: hsl(var(--muted-foreground));
  opacity: 1;
}

/* Home upcoming events — larger hero images than the old 16:9 cards */
.home-event-card {
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.home-event-card__image-wrap {
  aspect-ratio: 4 / 3;
  min-height: 14rem;
}

@media (min-width: 768px) {
  .home-event-card__image-wrap {
    min-height: 18rem;
  }
}

@media (min-width: 1024px) {
  .home-event-card__image-wrap {
    min-height: 20rem;
  }
}

.home-event-card__image {
  display: block;
}

/* Home search date: Safari needs a visible control and 16px font (avoids iOS zoom) */
.home-search-date-row {
  cursor: pointer;
}

.home-search-date-input {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  min-width: 0;
  font-size: 16px;
  line-height: 1.5;
  color: hsl(var(--foreground));
  -webkit-text-fill-color: hsl(var(--foreground));
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: auto;
}

.home-search-date-field {
  position: relative;
  min-width: 0;
}

.home-search-date-input::-webkit-date-and-time-value {
  text-align: left;
}

.home-search-date-input::-webkit-calendar-picker-indicator {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  opacity: 1;
  cursor: pointer;
}

.home-route-step-icon {
  width: 1rem;
  height: 1rem;
  color: hsl(var(--primary));
}

.home-route-step-chevron {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-left: auto;
  color: hsl(var(--primary));
}

/* Plan Your Journey column: force white copy (theme foreground can be dark on bg-secondary) */
.home-route-journey .home-route-journey-copy,
.home-route-journey .home-route-journey-copy h2,
.home-route-journey .home-route-journey-copy p,
.home-route-journey .home-route-journey-copy .font-medium {
  color: #ffffff !important;
}

.home-route-journey .home-route-journey-kicker {
  color: #ffffff !important;
}

.home-route-journey .home-route-journey-lede {
  color: rgba(255, 255, 255, 0.92) !important;
}

.home-route-journey .home-route-journey-copy .home-route-step-icon,
.home-route-journey .home-route-journey-copy .home-route-step-chevron {
  color: #ffffff !important;
  stroke: #ffffff;
}