/*
 * Home valuation landing page (valuation/search.html).
 *
 * Loaded after valuation-v1.css (Foundation 5), which the footer and the
 * later valuation steps still use. Everything here is scoped to .vl-* so it
 * can't leak into those pages. Design follows CINC's seller home estimate
 * landing page.
 *
 * Served from static/* without a content hash: after editing, invalidate
 * this path on CloudFront or ship it under a new filename (see CLAUDE.md).
 */

/* button and input focus color; search.html overrides these with the
   site's theme color (valuation_brand_color tag) */
.vl-page {
  --vl-brand: #008767;
  --vl-brand-hover: #066950;
  --vl-brand-active: #07503d;
  /* button text, readable on --vl-brand */
  --vl-brand-ink: #fff;
  /* "Stay in the know." icons: the brand color plus two lighter tints */
  --vl-icon: var(--vl-brand);
  --vl-icon-mid: color-mix(in srgb, var(--vl-brand) 70%, #fff);
  --vl-icon-light: color-mix(in srgb, var(--vl-brand) 45%, #fff);
  background-color: #fff;
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Hero */

.vl-hero {
  position: relative;
  overflow: hidden;
  background-color: #2d465a;
}

/* header_image renders .hero-img-bg > .hero-img (div or <video>); Foundation
   makes it position: fixed behind the whole page, keep it inside the hero */
.vl-hero .hero-img-bg,
.vl-hero .hero-img,
.vl-hero .hero-img#video-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.vl-hero .hero-img {
  background-position: center;
  background-repeat: no-repeat;
}

.vl-hero video.hero-img {
  object-fit: cover;
}

.vl-hero__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(45, 70, 90, 0.6);
}

/* min-height is the height with the default headline, so a shorter custom
   headline keeps the same hero size, with the content centered in it */
.vl-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 60.5rem;
  min-height: 26.625rem;
  margin: 0 auto;
}

/* The headline is rich text from the admin: the first block is the title,
   anything after it is the subtitle, whatever the tags (the default is
   <h3> + <h4>, which the in-page valuation forms on other pages reuse). */
.vl-hero__headline > * {
  margin: 1.5rem 0 0;
  padding: 0 1rem;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
  color: #fff;
  text-align: left;
  text-shadow: 0 4px 4px #000;
}

.vl-hero__headline > :first-child {
  margin: 0;
  padding-top: 4.5rem;
  font-size: 3.5rem;
  line-height: 1.5;
}

.vl-hero__headline a {
  color: #fff;
  text-decoration: underline;
}

/* Address search */

.vl-hero__form {
  padding: 3rem 1rem 5.5rem;
}

.vl-search {
  display: flex;
  align-items: stretch;
  margin: 0;
}

.vl-search__address {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.vl-search__icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.625rem;
  z-index: 2;  /* above the focused input, which is raised for its focus ring */
  color: #73777d;
  pointer-events: none;
}

.vl-search input[type="text"] {
  height: 2.875rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid #bec3c8;
  border-radius: 0;
  box-shadow: none;
  background-color: #fff;
  font-family: inherit;
  font-size: 1rem;
  color: #2b2f33;
}

.vl-search input[type="text"]:hover {
  border-color: #959aa1;
}

.vl-search input[type="text"]:focus {
  position: relative;
  z-index: 1;
  border-color: var(--vl-brand);
  box-shadow: 0 0 0 1px var(--vl-brand);
  background-color: #fff;
  outline: none;
}

.vl-search input[type="text"]::placeholder {
  color: #73777d;
  opacity: 1;
}

.vl-search #raw-address {
  padding-left: 3rem;
  border-radius: 6px 0 0 6px;
}

.vl-search input.vl-search__unit {
  flex: 0 0 8rem;
  width: 8rem;
  margin-left: -1px;
}

.vl-search .vl-search__button {
  flex: 0 0 auto;
  margin: 0 0 0 -1px;
  padding: 0 3rem;
  border: 1px solid var(--vl-brand);
  border-radius: 0 6px 6px 0;
  background: var(--vl-brand);
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  color: var(--vl-brand-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.vl-search .vl-search__button:hover,
.vl-search .vl-search__button:focus {
  background-color: var(--vl-brand-hover);
  border-color: var(--vl-brand-hover);
}

.vl-search .vl-search__button:active {
  background-color: var(--vl-brand-active);
  border-color: var(--vl-brand-active);
}

/* Loading overlay: the search JS adds .loading to the button on submit,
   which shows a white overlay with a spinner over the whole hero */

.vl-search .vl-search__button.loading {
  cursor: wait;
}

.vl-hero__loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.vl-hero:has(.vl-search__button.loading) .vl-hero__loading {
  display: flex;
}

.vl-hero__loading-text {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
}

.vl-spinner {
  width: 4rem;
  height: 4rem;
  animation: vl-spinner-rotate 2s linear infinite;
}

.vl-spinner__circle {
  fill: none;
  stroke: var(--vl-brand);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 89, 200;
  stroke-dashoffset: 0;
  animation: vl-spinner-dash 1.5s ease-in-out infinite,
             vl-spinner-color 6s ease-in-out infinite;
}

@keyframes vl-spinner-rotate {
  100% { transform: rotate(360deg); }
}

@keyframes vl-spinner-dash {
  0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; }
  100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; }
}

/* cycles through tints of the brand color, like CINC's spinner */
@keyframes vl-spinner-color {
  0%, 100% { stroke: var(--vl-brand); }
  40% { stroke: var(--vl-icon-light); }
  66% { stroke: var(--vl-icon-mid); }
  80%, 90% { stroke: var(--vl-icon-light); }
}

/* "Stay in the know." */

.vl-features {
  max-width: 60.5rem;
  margin: 0 auto;
  padding: 3rem 0.5rem;
  text-align: center;
  color: #000;
}

.vl-features__title {
  margin: 0 0 1rem;
  font-family: inherit;
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}

.vl-features__subtitle {
  margin: 0 0 3rem;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.vl-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.vl-feature__icon {
  display: block;
  width: 6.625rem;
  height: auto;
  margin: 0 auto;
}

.vl-feature__title {
  margin: 0;
  padding-top: 1.5rem;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}

.vl-feature__body {
  margin: 0;
  padding-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* Footer: Foundation's translucent bar was meant to sit over the
   full-page background image; here it follows the white features section */
.vl-page #container {
  padding-bottom: 0;
}

.vl-page #normal-footer {
  position: static;
  margin-top: 0;
  padding: 0.75rem 0;
  background-color: #1d232f;
}

.vl-page #custom-footer {
  background-color: #1d232f;
}

@media only screen and (max-width: 767.98px) {
  .vl-hero__content {
    min-height: 26.3125rem;
  }

  .vl-hero__headline > * {
    font-size: 1.125rem;
    text-align: center;
  }

  .vl-hero__headline > :first-child {
    font-size: 2.375rem;
  }

  .vl-hero__form {
    padding: 2rem 1rem 4rem;
  }

  .vl-search {
    flex-wrap: wrap;
  }

  /* line break so the unit field drops below address + button */
  .vl-search::after {
    content: "";
    order: 2;
    flex-basis: 100%;
    height: 0;
  }

  .vl-search__address {
    flex: 1 1 0;
  }

  .vl-search .vl-search__button {
    order: 1;
    padding: 0 1rem;
  }

  .vl-search input.vl-search__unit {
    order: 3;
    flex: 0 0 7rem;
    width: 7rem;
    margin: 1rem 0 0;
    border-radius: 6px;
  }

  .vl-features__title {
    font-size: 2rem;
  }

  .vl-features__subtitle {
    font-size: 1.25rem;
  }

  .vl-features__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media only screen and (max-width: 479.98px) {
  .vl-hero__content {
    min-height: 31.875rem;
  }
}