/* ==========================================================================
   Direct Homes – Global buttons with "fill from the mouse" hover

   Usage – add the classes to any <a> or <button>:
     class="dh-btn dh-btn--primary"   green button  -> gold fill on hover
     class="dh-btn dh-btn--outline"   green outline -> gold fill + white text

   js/directhomes-buttons.js adds the circle (<span class="dh-btn__fx">)
   and moves it to the point where the mouse enters / leaves the button.
   To change the hover colour for every button, edit --dh-btn-fill below.
   ========================================================================== */

.dh-btn {
  --dh-btn-fill: var(--dh-accent);      /* hover fill colour      */
  --dh-btn-fill-text: #fff;             /* text colour on hover   */
  --dh-btn-fx-size: 400px;              /* set by JS from the size */

  position: relative;
  isolation: isolate;                   /* circle stays behind the text */
  overflow: hidden;
  transition: color 0.35s ease, border-color 0.35s ease, transform 0.3s ease;
}

/* The growing circle */
.dh-btn__fx {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--dh-btn-fill);
  transform: translate(-50%, -50%);
  transition: width 0.45s ease-in-out, height 0.45s ease-in-out;
  pointer-events: none;
}

.dh-btn:hover .dh-btn__fx,
.dh-btn:focus-visible .dh-btn__fx {
  width: var(--dh-btn-fx-size);
  height: var(--dh-btn-fx-size);
}

/* Primary: green background, white text */
.dh-btn.dh-btn--primary {
  border-color: var(--dh-primary);
  background-color: var(--dh-primary);
  color: #fff;
}

/* Outline: transparent with green border + text */
.dh-btn.dh-btn--outline {
  border-color: var(--dh-primary);
  background-color: transparent;
  color: var(--dh-primary);
}

/* Hover (both): gold circle fills the button, text turns white.
   The background itself stays the same – only the circle changes it,
   so it can shrink back to the point where the mouse leaves. */
.dh-btn.dh-btn--primary:hover,
.dh-btn.dh-btn--primary:focus-visible,
.dh-btn.dh-btn--outline:hover,
.dh-btn.dh-btn--outline:focus-visible {
  border-color: var(--dh-btn-fill);
  color: var(--dh-btn-fill-text);
  text-decoration: none;
  opacity: 1;
}

.dh-btn.dh-btn--primary:hover {
  background-color: var(--dh-primary);
}

.dh-btn.dh-btn--outline:hover {
  background-color: transparent;
}

.dh-btn:hover svg,
.dh-btn:hover span:not(.dh-btn__fx) {
  color: inherit !important;
}

@media (prefers-reduced-motion: reduce) {
  .dh-btn__fx {
    transition: none;
  }
}

/* No underline on any button, in any state */
.dh-btn,
.dh-btn:hover,
.dh-btn:focus,
.dh-btn:focus-visible,
.dh-btn:active,
.dh-btn span,
.dh-btn:hover span {
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   Button shape: slightly rounded corners, not pills.
   Change --dh-btn-radius to adjust every text button on the site.
   Round icon buttons (search, arrows, share, favourite) stay round.
   -------------------------------------------------------------------------- */
:root {
  --dh-btn-radius: 6px;
}

.dh-btn,
.dh-btn.dh-btn--primary,
.dh-btn.dh-btn--outline,
a.dh-btn,
button.dh-btn,
.h2-btn,
.dh-btn-outline,
.dh-btn-primary,
.dh-plan__btn,
.cs_pricing_btn,
.btn-yellow.dh-btn,
.dh-advanced-btn:not(.dh-search-btn),
#header .dh-header__cta a.dh-btn-login,
#header .dh-header__cta a.dh-btn-login:hover,
#header .dh-header__cta a.dh-btn-login:focus,
.dh-offcanvas .dh-offcanvas__btn,
.dh-filter-modal .modal-footer .dh-btn {
  border-radius: var(--dh-btn-radius) !important;
}

/* the hover fill circle is clipped by the button, so it follows the shape */
.dh-btn {
  overflow: hidden;
}