/* ==========================================================================
   CURVE COLOR SWAP
   When #curve is visible behind the fixed navbar/band, the body gets
   class "curve-overlap". These rules swap the colours for contrast.
   ========================================================================== */

/* ── Smooth transitions on the affected elements ── */
.navbar.fixed-top,
.navbar .nav-link,
.navbar .navbar-brand-text,
.navbar .navbar-button,
#products-band,
.prod-band-link {
  transition: background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease !important;
}

/* === APPLY ONLY TO DESKTOP (>= 992px) === */
@media (min-width: 992px) {

  /* === NAVBAR: white → dark #23374d === */
  
  body.curve-overlap .navbar.fixed-top {
    background-color: #23374d !important;
  }
  
  /* Lock logo size so the white variant stays consistent */
  body.curve-overlap .navbar #brand {
    height: 80px !important;
    width: auto !important;
    max-height: 80px !important;
    object-fit: contain;
  }
  
  body.curve-overlap .navbar .nav-link {
    color: #ffffff !important;
  }
  
  body.curve-overlap .navbar .navbar-brand-text {
    color: #ffffff !important;
  }
  
  /* Contact button in navbar */
  body.curve-overlap .navbar .dropdown-item.navbar-button {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    background-color: transparent !important;
  }
  
  body.curve-overlap .navbar .dropdown-item.navbar-button:hover {
    background-color: #ffffff !important;
    color: #23374d !important;
  }
  
  /* Dropdown arrows — override inline style="color:#243957;" */
  body.curve-overlap .navbar .nav-link i.fa-angle-down,
  body.curve-overlap .navbar .nav-link i[style*="color:#243957"],
  body.curve-overlap .navbar .nav-link i[style*="color: lightgray"] {
    color: #ffffff !important;
  }
  
  /* Hamburger / close icons on mobile */
  body.curve-overlap #sandwich,
  body.curve-overlap #cross {
    color: #ffffff !important;
  }
  
  /* Active nav-link underline colour → white
     Must use real #id selectors to beat specificity of body#page-* a.nav-link#nav-* rules */
  body.curve-overlap#page-home a.nav-link#nav-home,
  body.curve-overlap#page-about a.nav-link#nav-about,
  body.curve-overlap#page-testimonials a.nav-link#nav-testimonials,
  body.curve-overlap#page-qsquare a.nav-link#nav-qsquare,
  body.curve-overlap#page-logistics a.nav-link#nav-logistics,
  body.curve-overlap#page-contractors a.nav-link#nav-contractors,
  body.curve-overlap#page-construction a.nav-link#nav-contractors,
  body.curve-overlap#page-manufacturing a.nav-link#nav-manufacturing,
 body.curve-overlap#page-blog a.nav-link#nav-blog,
body.curve-overlap#page-frameworks a.nav-link#nav-frameworks {
  text-decoration-color: white !important;
}
  
  body.curve-overlap#page-perspective a.nav-link#nav-perspective {
    text-decoration-color: #5eaaff !important;
  }
  
  /* Generic nav-link underline for non-active links */
  body.curve-overlap .navbar .nav-link {
    text-decoration-color: white !important;
  }
  
  /* Perspective link stays blue-ish but lighter for contrast */
  body.curve-overlap .navbar a.nav-link[style*="color:#007AFF"],
  body.curve-overlap .navbar a.nav-link[style*="color: #007AFF"] {
    color: #5eaaff !important;
    text-decoration-color: #5eaaff !important;
  }
  
  /* Dropdown menus stay normal (they overlay, not affected) */
  body.curve-overlap .navbar .dropdown-menu {
    background-color: #ffffff !important;
  }
  
  body.curve-overlap .navbar .dropdown-item {
    color: #333 !important;
  }
  
  body.curve-overlap .navbar .dropdown-item:hover {
    color: #ffffff !important;
    background: #23374d !important;
  }
  
  /* === PRODUCTS BAND: #253858 → white === */
  
  body.curve-overlap #products-band {
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  
  body.curve-overlap .prod-band-link {
    color: #253858 !important;
  }
  
  body.curve-overlap .prod-band-link:hover,
  body.curve-overlap .prod-band-link:focus {
    color: #253858 !important;
    background: #C8D9FF !important;
  }
  
  body.curve-overlap .prod-band-link.active {
    color: #253858 !important;
    background: #C8D9FF !important;
  }
  
  /* Tooltip stays dark regardless */
  body.curve-overlap .prod-band-item::after {
    background: #111827;
    color: #fff;
  }

  /* Beta badge */
  body.curve-overlap .band-beta-badge {
    color: #F00 !important;
    border-color: #F00 !important;
  }

}

.mleft{
  margin-left: 50px;
}

/* ==========================================================================
   PRODUCTS BAND – Active Link Coloring
   ========================================================================== */

/* Standard state */
body#page-frameworks a.prod-band-link[href="/frameworks/landing-cards.html"],
body#page-blog a.prod-band-link[href="/html/all/blog.html"],
body#page-perspective a.prod-band-link[href="/html/all/perspective.html"],
body#page-salesforce a.prod-band-link[href="/html/salesforce/salesf.html"] {
  background: #738AAF;
  color: #ffffff;
}

/* curve-overlap swap (when scrolled) */
body.curve-overlap#page-frameworks a.prod-band-link[href="/frameworks/landing-cards.html"],
body.curve-overlap#page-blog a.prod-band-link[href="/html/all/blog.html"],
body.curve-overlap#page-perspective a.prod-band-link[href="/html/all/perspective.html"],
body.curve-overlap#page-salesforce a.prod-band-link[href="/html/salesforce/salesf.html"] {
  background: #C8D9FF !important;
  color: #253858 !important;
}