/* ==========================================================================
   Direct Homes – Footer
   Markup:  includes/footer.php
   Colors/fonts come from css/directhomes-theme.css (--dh-* variables).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Footer-scoped helper classes
   -------------------------------------------------------------------------- */
.cs_footer .cs_mb_17 { margin-bottom: 17px; }
.cs_footer .cs_mb_37 { margin-bottom: 37px; }
.cs_footer .cs_fs_20 { font-size: 20px; line-height: 1.25em; }
.cs_footer .cs_semibold { font-weight: 600; }
.cs_footer .cs_white_color { color: #fff; }
.cs_footer .cs_gray_color { color: var(--dh-sand); }
.cs_footer .cs_radius_100 { border-radius: 50%; }
.cs_footer .cs_mp_0 { list-style: none; margin: 0; padding: 0; }
.cs_footer .cs_center { display: flex; align-items: center; justify-content: center; }
.cs_footer .cs_gap_y_30 { row-gap: 30px; }

@media screen and (max-width: 991px) {
  .cs_footer .cs_mb_lg_20 { margin-bottom: 20px; }
}

/* --------------------------------------------------------------------------
   2. Footer wrapper + background image
   -------------------------------------------------------------------------- */
.cs_footer.cs_style_1 {
  background-color: var(--dh-primary);
  background-image: url("../assets/img/footer-bg-directhomes.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-family: var(--dh-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--dh-sand);
}

.cs_footer.cs_style_1 h3,
.cs_footer.cs_style_1 .cs_footer_widget_title,
.cs_footer.cs_style_1 .cs_newsletter_heading {
  font-family: var(--dh-font-heading);
  color: #fff;
  text-transform: none;
}

.cs_footer.cs_style_1 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.cs_footer.cs_style_1 p {
  color: inherit;
  line-height: 1.6;
}

.cs_footer.cs_style_1 .cs_footer_main {
  padding: 80px 0 100px;
}

/* --------------------------------------------------------------------------
   3. Logo + newsletter
   -------------------------------------------------------------------------- */
.cs_footer.cs_style_1 .cs_text_widget {
  max-width: 400px;
}

.cs_footer.cs_style_1 .cs_logo {
  margin-bottom: 20px;
}

.cs_footer.cs_style_1 .cs_logo img {
  width: auto;
  height: 40px;
  filter: brightness(0) invert(1);
}

.cs_newsletter_form.cs_style_1::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--dh-sand);
  opacity: 0.3;
  position: absolute;
  left: 0;
  bottom: 0;
}

.cs_newsletter_form.cs_style_1 input {
  width: 100%;
  height: auto;
  padding: 0 30px 15px 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--dh-sand);
  background-color: transparent;
  font-family: var(--dh-font-body);
}

.cs_newsletter_form.cs_style_1 input::placeholder {
  color: var(--dh-sand);
  opacity: 0.8;
}

.cs_newsletter_form.cs_style_1 .cs_send_icon {
  top: 0;
  right: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.3s ease, color 0.3s ease;
}

.cs_newsletter_form.cs_style_1 .cs_send_icon:hover {
  color: var(--dh-accent);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   4. Menu columns
   -------------------------------------------------------------------------- */
.cs_footer.cs_style_1 .cs_footer_menu li:not(:last-child) {
  margin-bottom: 8px;
}

.cs_footer.cs_style_1 .cs_footer_menu a {
  padding-left: 20px;
  position: relative;
  display: inline-block;
}

/* Chevron drawn with CSS (no icon font needed) */
.cs_footer.cs_style_1 .cs_footer_menu a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.cs_footer.cs_style_1 .cs_footer_menu a:hover,
.cs_footer.cs_style_1 .cs_contact_list a:hover,
.cs_footer.cs_style_1 .cs_footer_bottom .cs_social_links a:hover {
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. Contact column
   -------------------------------------------------------------------------- */
.cs_footer.cs_style_1 .cs_contact_widget {
  padding-left: 40px;
}

.cs_footer.cs_style_1 .cs_contact_list li {
  display: flex;
  align-items: center;
  gap: 15px;
}

.cs_footer.cs_style_1 .cs_contact_list li:not(:last-child) {
  margin-bottom: 25px;
}

.cs_footer.cs_style_1 .cs_contact_list .cs_contact_icon {
  width: 35px;
  height: 35px;
  flex: none;
  border: 1px solid var(--dh-accent);
  color: var(--dh-accent);
}

/* --------------------------------------------------------------------------
   6. Bottom bar
   -------------------------------------------------------------------------- */
.cs_footer.cs_style_1 .cs_footer_bottom {
  padding: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 30px;
  flex-wrap: wrap;
}

.cs_footer.cs_style_1 .cs_footer_bottom .cs_footer_bottom_menu,
.cs_footer.cs_style_1 .cs_footer_bottom .cs_social_links {
  display: flex;
  align-items: center;
  gap: 10px 30px;
  flex-wrap: wrap;
}

.cs_footer.cs_style_1 .cs_footer_bottom .cs_currency {
  padding-right: 30px;
  position: relative;
}

.cs_footer.cs_style_1 .cs_footer_bottom .cs_currency::after {
  content: "";
  width: 1px;
  height: 16px;
  background-color: currentColor;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .cs_footer.cs_style_1 .cs_contact_widget {
    padding-left: 0;
  }
}

@media (max-width: 600px) {
  .cs_footer.cs_style_1 .cs_footer_main {
    padding: 50px 0 60px;
  }
}
@media (min-width: 600px) and (max-width: 991px) {
  .cs_footer.cs_style_1 .cs_footer_main {
    padding: 80px 0 60px;
  }
}
@media (max-width: 991px) {
  /* .cs_footer.cs_style_1 .cs_footer_main {
    padding: 80px 0 60px;
  } */
  .cs_footer.cs_style_1 .cs_logo {
    margin-bottom: 20px;
  }
  .cs_footer.cs_style_1 .cs_text_widget {
    max-width: 100%;
  }
  .cs_footer.cs_style_1 .cs_contact_list li:not(:last-child) {
    margin-bottom: 15px;
  }
  .cs_footer.cs_style_1 .cs_footer_bottom {
    padding: 0 0 22px;
  }
}

@media (max-width: 575px) {
  .cs_footer.cs_style_1 .cs_footer_bottom .cs_currency {
    padding-right: 0;
  }
  .cs_footer.cs_style_1 .cs_footer_bottom .cs_currency::after {
    display: none;
  }
}

/* Text logo in the footer (beats the generic ".cs_footer a { color: inherit }") */
.cs_footer.cs_style_1 .dh-wordmark {
  color: #fff;
  font-size: 30px;
}

.cs_footer.cs_style_1 .dh-wordmark span {
  color: var(--dh-accent); /* gold "Homes", same as the header logo */
}

/* Social links: round icon buttons (replaces the text links + currency) */
.cs_footer.cs_style_1 .cs_footer_bottom .dh-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cs_footer.cs_style_1 .dh-social svg {
  display: block;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.cs_footer.cs_style_1 .dh-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(var(--dh-sand-rgb), 0.45);
  border-radius: 50%;
  color: var(--dh-sand);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.cs_footer.cs_style_1 .dh-social a:hover,
.cs_footer.cs_style_1 .dh-social a:focus-visible {
  border-color: var(--dh-accent);
  background: var(--dh-accent);
  color: #fff;
  transform: translateY(-2px);
  outline: none;
}

/* Short description under the logo */
.cs_footer.cs_style_1 .dh-footer-about {
  /* max-width: 340px; */
  margin: 0 0 36px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--dh-sand);
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   8. Small screens
   -------------------------------------------------------------------------- */
/* social icons in white */
.cs_footer.cs_style_1 .dh-social a {
  color: #fff;
}

/* 600–991px: "Popular cities" and "Quick links" side by side */
@media (min-width: 600px) and (max-width: 991px) {
  .cs_footer.cs_style_1 .dh-footer-col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* keep the bottom bar clear of the "back to top" button (bottom right) */
@media (max-width: 991px) {
  .cs_footer.cs_style_1 .cs_footer_bottom {
    /* padding-right: 72px; */
  }
}

/* contact icons (mail, phone) in white */
.cs_footer.cs_style_1 .cs_contact_list .cs_contact_icon {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}