/* ConstrXerp site overrides — loaded after the Sitejet theme CSS on every page.
   Keep hand-made style fixes here rather than editing custom.*.css. */

/* Readable headings: the theme set all headings to light grey (#cdcfd0) on white. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: #2f3437 !important; }
/* Headings that sit on dark backgrounds stay white. */
.cx-demo-strip h2 { color: #fff !important; }

/* "Ready to Elevate…" banner on the home page: white text needs a dark background. */
#ed-1624835957.bg-primary { background: #575757 !important; }
#ed-1624835957 .button { background: #fff; color: #2c2c2c; }
#ed-1624835957 .button:hover { background: #e6e7e8; color: #2c2c2c; }

/* Keep anchored sections clear of the fixed header. */
#home-2, #services-2, #cta-1, #contact-us-1, #about { scroll-margin-top: 110px; }

/* About Us section (home page) */
.cx-about { padding: 64px 16px; background: #fff; }
.cx-about-inner { max-width: 1000px; margin: 0 auto; }
.cx-about h2 { text-align: center; margin: 0 0 24px; }
.cx-about p { font-size: 17px; line-height: 1.7; margin: 0 0 16px; }
.cx-about-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0; }
.cx-about-fact { background: #f1f2f2; border-radius: 6px; padding: 24px 20px; text-align: center; }
.cx-about-fact h3 { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.cx-about-fact p { font-size: 15px; line-height: 1.5; margin: 0; }
.cx-about-cta { text-align: center; margin-top: 8px; }
.cx-about-cta .button { display: inline-block; background: #575757; color: #fff; padding: 14px 32px; font-weight: 700; }
.cx-about-cta .button:hover { background: #2f3437; color: #fff; }
@media (max-width: 767px) {
  .cx-about { padding: 48px 16px; }
  .cx-about-facts { grid-template-columns: 1fr; }
}

/* Legal pages (Privacy Policy, Terms of Use) */
.cx-legal { max-width: 860px; margin: 0 auto; padding: 32px 16px 48px; }
.cx-legal h1 { font-size: 32px; font-weight: 700; margin: 0 0 8px; }
.cx-legal h2 { font-size: 22px; font-weight: 700; margin: 32px 0 10px; }
.cx-legal p, .cx-legal li { font-size: 16px; line-height: 1.7; }
.cx-legal p { margin: 0 0 12px; }
.cx-legal ul { margin: 0 0 12px; padding-left: 22px; }
.cx-legal ul > li::before { content: none; }
.cx-legal ul > li { list-style: disc; margin-bottom: 6px; }
.cx-legal .cx-updated { color: #5f6368; font-size: 14px; margin-bottom: 24px; }
.cx-legal address { font-style: normal; font-size: 16px; line-height: 1.7; margin: 0 0 12px; }

/* Hero photo: phones and tablets get a 1280px version instead of the 1920px one.
   (!important beats the inline style Sitejet's script sets from data-background.) */
@media (max-width: 1024px) {
  [data-background*="22657811"] {
    background-image: url("/images/1280/22657811/aerial-glance-at-a-cable-stayed-bridge-under-construction-showcasing-yellow-crane-work-over-a-river-Ke5xg5QMf70dxl-ot_t5mw.webp") !important;
  }
}

/* Product photos: keep proportions now that the img tags carry width/height. */
.ed-image picture img { height: auto; }

/* =====================================================================
   Colour scheme "steel and blue" (2026-11-11)
   navy #1f3a5f  - headings, hero panel, banners, footer
   blue #1d5fd0  - logo mark, buttons, links (the one accent colour)
   steel #f4f6f9 - light boxes and section tints
   ===================================================================== */
:root { --ebs-navy: #1f3a5f; --ebs-navy-dark: #162b47; --ebs-blue: #1d5fd0; --ebs-blue-dark: #174ba6; --ebs-steel: #f4f6f9; --ebs-line: #dfe4ea; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--ebs-navy) !important; }
#ed-1624835945 h1, #ed-1624835945 .h2, .cx-demo-strip h2, #ed-1624835957 h2 { color: #fff !important; }

/* Body links */
.ed-text a:not(.button), .cx-legal a, .cx-about a:not(.button) { color: var(--ebs-blue); }
.ed-text a:not(.button):hover, .cx-legal a:hover, .cx-about a:not(.button):hover { color: var(--ebs-blue-dark); }

/* Header: white bar, navy menu, blue for the current page (beats the inline grey style) */
.menu-wrapper { background-color: #fff !important; border-bottom: 1px solid var(--ebs-line); }
.menu-wrapper ul.sub { background-color: #fff !important; box-shadow: 0 8px 20px rgba(31, 58, 95, .12); }
.menu-wrapper a { color: var(--ebs-navy) !important; text-shadow: none !important; }
.menu-wrapper li.active > a, .menu-wrapper a:hover { color: var(--ebs-blue) !important; }
.menu-wrapper .ed-text, .menu-wrapper .ed-menu { text-shadow: none !important; }
.menu-trigger { color: var(--ebs-navy) !important; }

/* Logo: new blue-mark logo, about 50% larger; shrinks on phones to leave room for the menu button */
#ed-1624835924 img, #ed-1624835999 img {
  width: 360px !important; max-width: calc(100vw - 110px) !important;
  max-height: none !important; height: auto !important; object-fit: contain !important;
}

/* Home hero text panel */
#ed-1624835945 { background-color: rgba(31, 58, 95, .85) !important; }

/* Buttons: one blue everywhere */
.button, #cx-contact-form button[type="submit"] { background-color: var(--ebs-blue) !important; color: #fff !important; border-color: var(--ebs-blue) !important; }
.button:hover, #cx-contact-form button[type="submit"]:hover { background-color: var(--ebs-blue-dark) !important; color: #fff !important; }
/* ...except on navy bands, where they are white */
#ed-1624835957 .button, .cx-demo-strip .button, .ed-reference.back-button .button { background-color: #fff !important; color: var(--ebs-navy) !important; border-color: #fff !important; }
#ed-1624835957 .button:hover, .cx-demo-strip .button:hover, .ed-reference.back-button .button:hover { background-color: #e6ecf5 !important; color: var(--ebs-navy) !important; }

/* Software Solutions boxes and About tiles */
.boxes-box, .cx-about-fact { background-color: var(--ebs-steel) !important; }
.boxes-icon { background-color: var(--ebs-blue) !important; color: #fff !important; }
.boxes-icon a, .boxes-icon svg, .boxes-icon i { color: #fff !important; }
.boxes-icon svg, .boxes-icon svg path { fill: #fff !important; }

/* Navy bands: "Ready to elevate" banner and the demo strip */
#ed-1624835957.bg-primary, #ed-1624835957 { background-color: var(--ebs-navy) !important; }
.cx-demo-strip { background-color: var(--ebs-navy) !important; }

/* Product page accordion bars */
.accordion-trigger a.wv-link-elm { background-color: var(--ebs-steel) !important; color: var(--ebs-navy) !important; border-left: 4px solid var(--ebs-blue); }
.accordion-trigger a.wv-link-elm.active, .accordion-trigger a.wv-link-elm:hover { background-color: var(--ebs-blue) !important; color: #fff !important; }

/* Footers (home and inner pages) */
[class*="footer-heimdall"], .ed-reference.back-button { background-color: var(--ebs-navy) !important; color: #dbe3ee; }
[class*="footer-heimdall"] .footer-heimdall-box, [class*="footer-heimdall"] [class*="-box"] { background-color: transparent !important; }
[class*="footer-heimdall"] p, [class*="footer-heimdall"] span, .ed-reference.back-button p { color: #dbe3ee !important; }
[class*="footer-heimdall"] a:not(.button), .ed-reference.back-button a:not(.button) { color: #fff !important; text-decoration: underline; }
[class*="footer-heimdall"] h2, [class*="footer-heimdall"] h3, [class*="footer-heimdall"] h4 { color: #fff !important; }
/* Keep logo and menu on one row on desktop now that the logo is larger */
@media (min-width: 976px) {
  .menu-wrapper .ed-menu { flex: 1 1 0 !important; min-width: 0 !important; }
}

/* Menu fixes for the white header (2026-11-11):
   - the theme's hover/active box behind each item was dark grey: make it a pale blue tint
   - keep each item on one line (no "Get / Started" wrapping) and tighten the spacing
   - hamburger lines were white when the header sticks on scroll: make them navy */
.menu-wrapper .ed-menu a::before { background: #e8eef8 !important; }
@media (min-width: 976px) {
  .menu-wrapper .ed-menu .menu-level-0 > li { margin-right: 6px !important; }
  .menu-wrapper .ed-menu .menu-level-0 > li:last-child { margin-right: 0 !important; }
  .menu-wrapper .ed-menu .menu-level-0 > li > a { white-space: nowrap; padding-left: 12px !important; padding-right: 12px !important; }
}
@media (min-width: 976px) and (max-width: 1099px) {
  #ed-1624835924 img, #ed-1624835999 img { width: 300px !important; }
}
.menu-trigger .menu-trigger-inner,
.menu-trigger .menu-trigger-inner::before,
.menu-trigger .menu-trigger-inner::after { background-color: var(--ebs-navy) !important; }
.menu-trigger .menu-trigger-box::before { color: var(--ebs-navy) !important; }
/* Phone/tablet: the full-screen menu panel was the old grey */
@media (max-width: 975px) {
  .menu-wrapper .ed-menu { background-color: #fff !important; }
}
/* One menu style on every page (home used Open Sans 12px; product pages used
   Montserrat 17.6px capitals with Open Sans capitals in the drop-down) */
.menu-wrapper .ed-menu a {
  font-family: Montserrat, "Open Sans", Arial, sans-serif !important;
  font-size: 14px !important; font-weight: 400 !important;
  text-transform: none !important; letter-spacing: .2px !important;
}
@media (min-width: 976px) {
  .menu-wrapper .ed-menu .menu-level-0 > li > a { padding-left: 10px !important; padding-right: 10px !important; }
}
@media (max-width: 975px) {
  .menu-wrapper .ed-menu a { font-size: 18px !important; }
  .menu-wrapper .ed-menu .menu-level-1 a { font-size: 16px !important; }
}
@media (min-width: 976px) {
  .menu-wrapper .ed-menu ul.menu-level-1 { min-width: 230px !important; width: auto !important; }
  .menu-wrapper .ed-menu .menu-level-1 > li { width: 100% !important; }
  .menu-wrapper .ed-menu .menu-level-1 a { white-space: nowrap; }
}
/* One highlight style for the menu item you are on (or hovering): blue text, no box.
   The theme marks it two ways - li.active (page) and a.active (home-page section in view). */
.menu-wrapper .ed-menu a::before,
.menu-wrapper .ed-menu a::after { display: none !important; }
.menu-wrapper .ed-menu .menu-level-1 a:hover { background-color: #e8eef8 !important; color: var(--ebs-blue) !important; }
.menu-wrapper .ed-menu .menu-level-0 > li > a.active,
.menu-wrapper .ed-menu .menu-level-0 > li.active > a,
.menu-wrapper .ed-menu .menu-level-0 > li > a:hover { color: var(--ebs-blue) !important; background: transparent !important; }
.menu-wrapper .ed-menu .menu-level-1 a.active { color: var(--ebs-blue) !important; }

/* ===== ConstrXerp logo: "powered by Enhanced Business Systems Inc." (2026-11-11) ===== */
.cx-brand { text-align: center; margin: 0 auto 28px; }
.cx-brand img { display: block; width: 296px; max-width: 80vw; height: auto; margin: 0 auto 6px; }
.cx-brand p { margin: 0; color: var(--ebs-navy); font-family: Montserrat, sans-serif; font-size: 16px; letter-spacing: .3px; }
.cx-powered { display: flex; width: fit-content; max-width: 100%; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 6px 12px; margin: 0 auto 18px; padding: 8px 16px; background: #fff; border-radius: 6px; }
.cx-powered img { display: block; width: 148px; height: auto; }
.cx-powered span { color: var(--ebs-navy) !important; font-family: Montserrat, sans-serif; font-size: 13px; line-height: 1.3; }
.cx-copy { text-align: center; margin: 0 0 12px; color: #fff; }
.cx-legal-footer { background: var(--ebs-navy); color: #e8edf3; text-align: center; padding: 32px 16px 24px; margin-top: 40px; }
.cx-legal-footer p { margin: 0 0 8px; color: #e8edf3; }
.cx-legal-footer a { color: #fff; text-decoration: underline; }
#ed-1624836422 > .inner { flex-direction: column; align-items: center; }
@media (max-width: 480px) { .cx-brand p { font-size: 14px; } }

/* ===== Header option C: light steel-blue with a blue line (2026-11-11) ===== */
.menu-wrapper { background-color: #e8eef8 !important; border-bottom: 3px solid var(--ebs-blue) !important; }
.menu-wrapper > .inner, .menu-wrapper .ed-container > .inner { background-color: transparent !important; }