/* ==========================================================================
   Direct Homes – Design Tokens
   Change a value here and it updates across the whole site.
   ========================================================================== */

:root {
  /* Brand colors (from the brief) */
  --dh-primary: #134B3E;        /* Forest green – main actions, navigation, headings */
  --dh-sand: #E9DFCE;           /* Sand – secondary buttons, tags, borders */
  --dh-bg: #F6F4EE;             /* Warm background – page / section surfaces */
  --dh-accent: #A8803F;         /* Gold – accents and highlights */

  /* RGB versions for transparent overlays: rgba(var(--dh-primary-rgb), .6) */
  --dh-primary-rgb: 19, 75, 62;
  --dh-sand-rgb: 233, 223, 206;
  --dh-bg-rgb: 246, 244, 238;
  --dh-accent-rgb: 168, 128, 63;

  /* Typography – headings: DM Serif Display (classic, confident property
     feel; chosen from 3 options), body: Inter */
  --dh-font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --dh-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */
body {
  font-family: var(--dh-font-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--dh-font-heading);
  letter-spacing: -0.01em;
}

/* DM Serif Display has one weight (400). Many components ask for 600/700 –
   stop the browser from faking a bold version so headings stay crisp.
   Inter has real weights, so body text is not affected. */
html {
  font-synthesis: none;
}

/* --------------------------------------------------------------------------
   Bootstrap 4 color overrides (Bootstrap hardcodes its colors)
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--dh-primary);
  border-color: var(--dh-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--dh-primary);
  border-color: var(--dh-primary);
  color: #fff;
  opacity: .9;
}
.btn-outline-primary {
  color: var(--dh-primary);
  border-color: var(--dh-primary);
}
.btn-outline-primary:hover {
  background-color: var(--dh-primary);
  color: #fff;
}
/* Bootstrap's default link blue (#007bff) -> brand green */
a { color: var(--dh-primary); }
a:hover { color: var(--dh-accent); }

.text-primary { color: var(--dh-primary) !important; }
.bg-primary { background-color: var(--dh-primary) !important; }
.border-primary { border-color: var(--dh-primary) !important; }

/* --------------------------------------------------------------------------
   Vendor plugins: replace their hardcoded Arial with the brand body font
   (jQuery UI, Magnific Popup, Lightcase)
   -------------------------------------------------------------------------- */
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button,
.mfp-container,
.mfp-close,
.mfp-counter,
.mfp-title,
#lightcase-case,
#lightcase-info,
#lightcase-sequenceInfo,
#lightcase-title,
#lightcase-caption {
  font-family: var(--dh-font-body);
}

::selection {
  background: var(--dh-sand);
  color: var(--dh-primary);
}

/* --------------------------------------------------------------------------
   Text logo
   -------------------------------------------------------------------------- */
.dh-wordmark {
  display: inline-block;
  font-family: var(--dh-font-heading);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.dh-wordmark span {
  color: var(--dh-sand);
  font-weight: 500;
  font-style: italic;
}

.dh-wordmark:hover,
.dh-wordmark:focus {
  color: #fff;
  text-decoration: none;
}

/* On light backgrounds (e.g. sticky header) */
.dh-wordmark--dark,
#header.cloned.sticky .dh-wordmark {
  color: var(--dh-primary);
}

.dh-wordmark--dark span,
#header.cloned.sticky .dh-wordmark span {
  color: var(--dh-accent);
}

/* --------------------------------------------------------------------------
   Scroll-to-top button: round
   -------------------------------------------------------------------------- */
.go-up {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid var(--dh-accent);
  border-radius: 50%;
  background: #fff;
  color: var(--dh-accent);
  line-height: 48px;
  text-align: center;
  box-shadow: none;
}

.go-up i {
  line-height: 48px;
  font-size: 22px;
}

/* Hover: fill with the secondary (gold) colour */
.go-up:hover,
.go-up:focus {
  background: var(--dh-accent);
  color: #fff;
}

/* Small screens: the button is fixed bottom right. Leave free space under the
   footer social icons, so at the end of the page the icons sit above it. */
@media (max-width: 991px) {
  .go-up {
    right: 16px !important;
    bottom: 90px !important;
    width: 46px;
    height: 46px;
    line-height: 42px;
  }

  .go-up i {
    line-height: 42px;
    font-size: 20px;
  }

}


@media (max-width: 991px) {
  .cs_footer_bottom {
    padding-bottom: 35px !important;
  }
}

/* Gold last word of a heading – global (sections may refine it) */
.dh-hl {
  color: var(--dh-accent);
}