/* Site top bar + header (all pages). Same items and colours as before; small UI/UX polish only. Loaded after the theme bundle. */

/* ---------- Top bar ---------- */
#top-bar .cm-top-icon { margin-right: 6px; color: #ffca05; font-size: 12px; }
#top-bar .top-links a.cm-lang { min-width: 34px; text-align: center; }
#top-bar .top-links a.cm-lang.is-current { color: #ffca05; }
#top-bar .top-links a.cm-lang:not(.is-current):hover { color: #fff; }
#top-bar .top-links li a.cm-top-login { display: inline-flex; align-items: center; gap: 7px; height: 28px; margin: 8px 0 0; padding: 0 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; line-height: 26px; color: #ddd; transition: border-color .2s, color .2s, background .2s; }
#top-bar .top-links li a.cm-top-login i { margin: 0; font-size: 12px; }
#top-bar .top-links li a.cm-top-login:hover { border-color: #ffca05; color: #ffca05; background: rgba(255,202,5,.06); }

/* ---------- Header: soft divider under the white bar ----------
   Drawn as a shadow, not a border: a border makes #header-wrap 1px taller than the theme's fixed #header
   height, and the floated menu then pushes into the next section (the home banner shrank to ~990px). */
#header.cm-header:not(.sticky-header) #header-wrap { box-shadow: 0 1px 0 #e9eef5; }

/* ---------- Desktop menu ---------- */
@media (min-width: 992px) {
    /* Sticky header: left to the theme on purpose (smooth 0.4s shrink from 100px to 60px). Do not add height or
       transition overrides here; they made scrolling feel abrupt or left a gap under the bar. */

    /* hover / current underline */
    #header.cm-header #primary-menu > ul > li > a > div { position: relative; }
    #header.cm-header #primary-menu > ul > li > a > div:after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: #ffca05; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
    #header.cm-header #primary-menu > ul > li:hover > a > div:after,
    #header.cm-header #primary-menu > ul > li.cm-active > a > div:after { transform: scaleX(1); }
    #header.cm-header #primary-menu > ul > li.cm-active > a { color: #225AA9; }

    /* "Our Services" caret */
    #header.cm-header .cm-nav-caret { display: inline-block; margin: 0 0 0 5px; font-size: 13px; transition: transform .25s; }
    #header.cm-header #primary-menu > ul > li.cm-has-sub:hover .cm-nav-caret { transform: rotate(180deg); }

    /* dropdown */
    #header.cm-header #primary-menu ul ul { width: 270px; padding: 8px 0; border: 1px solid #e6edf6; border-top: 3px solid #225AA9; border-radius: 0 0 12px 12px; box-shadow: 0 18px 40px rgba(13,42,87,.14); }
    #header.cm-header #primary-menu ul ul li > a { position: relative; padding: 10px 22px; border: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .4px; color: #3a4658; transition: background .15s, color .15s, padding .15s; }
    #header.cm-header #primary-menu ul ul li > a:before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #ffca05; opacity: 0; transition: opacity .15s; }
    #header.cm-header #primary-menu ul ul li:hover > a { background: #f0f5fd; color: #225AA9; padding-left: 26px; }
    #header.cm-header #primary-menu ul ul li:hover > a:before { opacity: 1; }

    /* "Domains" as an outlined button (external domain registration) */
    #header.cm-header #primary-menu > ul > li.cm-nav-cta > a { padding-right: 0; }
    /* negative margins = padding + border, so the button adds no height to the menu row (extra height pushes into the next section) */
    #header.cm-header #primary-menu > ul > li.cm-nav-cta > a > div { margin-top: -9px; margin-bottom: -9px; padding: 7px 16px; border: 2px solid #225AA9; border-radius: 6px; color: #225AA9; transition: background .2s, color .2s; }
    #header.cm-header #primary-menu > ul > li.cm-nav-cta > a > div:after { display: none; }
    #header.cm-header #primary-menu > ul > li.cm-nav-cta:hover > a > div { background: #225AA9; color: #fff; }
}

/* ---------- Mobile menu ---------- */
@media (max-width: 991px) {
    #header.cm-header .cm-nav-caret { display: none; }
    #header.cm-header #primary-menu > ul > li.cm-active > a { color: #225AA9; }
    #header.cm-header #primary-menu > ul > li.cm-active > a > div { box-shadow: inset 3px 0 0 #ffca05; padding-left: 12px; }
    #header.cm-header #primary-menu > ul > li.cm-nav-cta > a { color: #225AA9; }
}