/* ==========================================================================
   Direct Homes – Page layout rhythm (loaded last in includes/headlinks.php)
   One place for the horizontal and vertical spacing of every homepage
   section and the footer, so they all line up.
   The header and the hero are not touched.
   ========================================================================== */

:root {
  --dh-container: 1560px;                          /* content width */
  --dh-gutter: clamp(16px, 4vw, 64px);              /* left/right space: 16px mobile → 64px desktop */
  --dh-section-y: clamp(56px, 4vw + 24px, 96px);    /* top/bottom space */
}

/* --------------------------------------------------------------------------
   1. Same left/right space (x axis) for all sections + footer
   -------------------------------------------------------------------------- */
body section.rec-pro > .container-fluid,
body footer.cs_footer > .container {
  width: 100%;
  max-width: var(--dh-container);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--dh-gutter);
  padding-left: var(--dh-gutter);
}

/* --------------------------------------------------------------------------
   2. Same top/bottom space (y axis) for every section between hero and footer
      (doubled class = wins over the per-section files without !important)
   -------------------------------------------------------------------------- */
body section.rec-pro.rec-pro {
  padding-top: var(--dh-section-y);
  padding-bottom: var(--dh-section-y);
}

/* Remove extra space at the bottom of the sliders, so the visible gap
   under each section matches the others */
body .dh-card-slider .slick-list,
body .dh-discover .slick-lancers .slick-list {
  padding-bottom: 12px;
}

body .dh-featured .slick-dots,
body .dh-discover .slick-dots {
  margin-top: 20px;
}

body .dh-testi-slider .owl-item {
  padding-bottom: 12px;
}

body .dh-pricing__row {
  padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   3. Header (normal + sticky) – same width and left/right space as the
      sections, so logo and Login line up with the content below
   -------------------------------------------------------------------------- */
body #header .container.dh-header {
  width: 100%;
  max-width: var(--dh-container);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--dh-gutter);
  padding-left: var(--dh-gutter);
}

/* 993–1199px: the full desktop menu needs the room – slightly smaller side space */
@media (min-width: 993px) and (max-width: 1199px) {
  body #header .container.dh-header {
    padding-right: 24px;
    padding-left: 24px;
  }
}