/* ==========================================================================
   Direct Homes – Section headings (fluid type) + header actions
   Markup:
     <div class="dh-sec-head">
       <div class="sec-title"><h2>First words <span class="dh-hl">Last</span></h2><p>…</p></div>
       <div class="dh-sec-head__actions"> arrows (.dh-arrow) or CTA (.dh-btn-outline) </div>
     </div>
   Colors/fonts come from css/directhomes-theme.css (--dh-* variables).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fluid heading sizes
      Hero h1:         34px → 60px
      Section h2:      30px → 48px
   -------------------------------------------------------------------------- */
#hero-area .welcome-text h1,
#hero-area .welcome-text .h1 {
  font-family: var(--dh-font-heading);
  font-size: clamp(34px, calc(22px + 2.6vw), 60px) !important;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* Section headings */
body .dh-sec-head .sec-title.sec-title h2 {
  margin: 0;
  font-family: var(--dh-font-heading);
  font-size: clamp(30px, calc(20px + 2vw), 48px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--dh-primary);
  text-transform: none;
}

/* Last word in the 2nd brand color (gold, like "Homes" in the logo) */
body .dh-sec-head .sec-title.sec-title h2 .dh-hl {
  position: static;
  font-weight: inherit;
  color: var(--dh-accent);
}

body .dh-sec-head .sec-title.sec-title h2 .dh-hl::before,
body .dh-sec-head .sec-title.sec-title h2 .dh-hl::after {
  content: none;
}

body .dh-sec-head .sec-title.sec-title p {
  max-width: 680px;  /* about 2 lines on desktop */
  margin: 12px 0 0;
  font-family: var(--dh-font-body);
  font-size: clamp(15px, calc(14px + 0.2vw), 17px);
  line-height: 1.6;
  color: #666;
  text-align: left;
}

/* --------------------------------------------------------------------------
   2. Heading row: text left, arrows / CTA right
   -------------------------------------------------------------------------- */
.dh-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: clamp(28px, 2vw + 16px, 48px);
}

body .dh-sec-head .sec-title.sec-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}

.dh-sec-head__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

/* Slider arrows */
.dh-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--dh-sand);
  border-radius: 50%;
  background: #fff;
  color: var(--dh-primary);
  box-shadow: 0 6px 20px rgba(var(--dh-primary-rgb), 0.10);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.dh-arrow:hover,
.dh-arrow:focus-visible {
  border-color: var(--dh-primary);
  background: var(--dh-primary);
  color: #fff;
  outline: none;
}

/* Slick marks the end arrows as disabled */
.dh-arrow.slick-disabled,
.dh-arrow[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* Slick adds .slick-arrow – keep our buttons in the header flow */
.dh-sec-head .dh-arrow.slick-arrow {
  position: static;
  transform: none;
  font-size: 0;
}

.dh-sec-head .dh-arrow.slick-arrow::before {
  content: none;
}

/* CTA button */
.dh-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 24px;
  border: 1.5px solid var(--dh-primary);
  border-radius: 999px;
  background: transparent;
  color: var(--dh-primary);
  font-family: var(--dh-font-body);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dh-btn-outline svg {
  transition: transform 0.2s ease;
}

/* Hover = gold fill from the mouse position: css/directhomes-buttons.css */

.dh-btn-outline:hover svg {
  transform: translateX(3px);
}

/* Testimonials: arrows moved to the header, hide Owl's own nav */
.testimonials .job_clientSlide .owl-nav {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .dh-sec-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .dh-arrow {
    width: 46px;
    height: 46px;
  }

  .dh-btn-outline {
    height: 46px;
  }
}