/* Site-level additions on top of the design's jda.css (loaded after it by Views/Shared/_Layout.cshtml).
   Keep design changes here, not in jda.css, so the design files stay a verbatim copy of the static build. */

/* 1. Sticky header: the logo + menu bar stays at the top while scrolling (desktop and mobile).
      jda.css gives .jd-head position:relative; z-index:20 - the mega menu drops down from it, so keep it above. */
.jd-head{position:sticky;top:0;z-index:40}
@media (max-width:1100px){
  /* the open mobile menu lives inside the sticky header: let it scroll instead of growing past the viewport */
  .jd-head.is-open{max-height:100vh;max-height:100dvh;overflow-y:auto}
}

/* 2. The navy contact bar above the header: jda.css hides its links below 1100px, which left an empty navy strip.
      Hide the whole bar there (phone, email and client login stay reachable through the footer). */
@media (max-width:1100px){
  .jd-topbar{display:none}
}

/* 3. Steps carousel dots (merchant-banking): hover / click a dot shows that group of steps (assets/js/jda-site.js).
      The design's auto-play keyframes stay; manual mode replaces the transform while a dot is hovered. */
.mb-dots{cursor:pointer}
.mb-dots i{transition:background .25s}
.mb-vp.is-manual .mb-steps{animation:none;transition:transform .5s ease;transform:translateX(calc(-1 * var(--mb-i, 0) * (100cqw + 24px) / 3))}
.mb-dots.is-manual i{animation:none;background:rgba(18,58,94,.2)}
.mb-dots.is-manual i.on{background:var(--mustard)}

/* 4. Mega-menu column titles are paragraphs, not h4 (they came before the page h1 in every outline); same look. */
.jd-mega .col .jd-mega-h{font:600 12px/16px var(--font-body);text-transform:uppercase;letter-spacing:1.5px;color:var(--emerald);margin:0 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:2px solid var(--mustard-50)}