/* LanDynamix sitewide hero, CTA + footer backgrounds.
   Navy + twirl line pattern (hero, page banners, footer); brand blue + cta-bg lines (CTA band).
   Load this LAST in <head> on every page. Image paths are relative to /css/. */

:root {
  --ldx-hero-navy: #0d2f5a;
  --ldx-about-navy: #012549;
  --ldx-cta-blue: #3466d6;
  --ldx-twirl: url("../images/twirl-pattern.png");
  --ldx-cta-lines: url("../images/cta-bg.png");
}

/* Hero (home), inner-page title banners (contact etc.) and shared footer: navy + twirl */
.ldx-home section.ldx-hero.ldx-hero-pathway,
div.ttm-page-title-row,
footer.ldx-footer {
  background-color: var(--ldx-hero-navy);
  background-image: var(--ldx-twirl);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* About hero uses the darker navy from the design */
section.ldx-about-hero {
  background-color: var(--ldx-about-navy);
  background-image: var(--ldx-twirl);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* CTA band: brand blue with the cta-bg lines anchored to the bottom */
section.ldx-cta-band,
section.ldx-cta-band.ldx-pattern {
  background-color: var(--ldx-cta-blue);
  background-image: var(--ldx-cta-lines);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

/* Remove old overlays / decorations so only the new backgrounds show */
div.ttm-page-title-row > .ttm-bg-layer,
.ldx-about-hero.ldx-pattern::before,
.ldx-cta-band.ldx-pattern::before,
.ldx-about-hero .ldx-diamond,
.ldx-cta-band .ldx-diamond {
  background: transparent;
  display: none;
}

/* Keep footer content above the pattern */
footer.ldx-footer > .container {
  position: relative;
  z-index: 1;
}

/* Breadcrumb contrast on navy */
.ttm-page-title-row .breadcrumb-wrapper,
.ttm-page-title-row .breadcrumb-wrapper a,
.ttm-page-title-row .breadcrumb-wrapper span {
  color: #b9cff7;
}

/* Mobile: keep the knot of the pattern in view on tall, narrow blocks */
@media (max-width: 767px) {
  .ldx-home section.ldx-hero.ldx-hero-pathway,
  div.ttm-page-title-row,
  section.ldx-about-hero,
  footer.ldx-footer {
    background-position: 62% 50%;
  }
  section.ldx-cta-band { background-position: 62% bottom; }
}