/* ==========================================================================
   Site header (Training.Master, #ShopifyMainNav) - clean white menu bar
   Applies to the header state every page except the home hero uses (.header-bg).
   Markup and scripts (hamburger, My Account dropdown, cart count) are unchanged;
   this file only restyles them.
   Colours: navy #184b71, dark navy #123654, ink #12263a, body #374151,
            lines #e4e9f0, orange #ee6331
   ========================================================================== */

#ShopifyMainNav.header-bg {
    border-bottom: 1px solid #e4e9f0 !important;
    background: #fff !important;
    box-shadow: 0 6px 20px rgba(18, 38, 58, 0.07) !important;
    padding: 0 28px !important;
}

    #ShopifyMainNav.header-bg .menu-header a.marketing-nav__item--primary,
    #ShopifyMainNav.header-bg .marketing-nav__user a.marketing-button,
    #ShopifyMainNav.header-bg .myaccount_hold_head a.myaccount_head_btn,
    #ShopifyMainNav.header-bg .your_account_hold_head a {
        font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important;
    }

/* Logo: text wordmark "Compliance" + orange "IQ", "GRC SIMPLIFIED" under it, instead of the image */
.marketing-nav__logo__shopify .ciq-wordmark,
.marketing-nav__logo__shopify .ciq-tagline {
    display: none;
}

#ShopifyMainNav.header-bg .marketing-nav__logo {
    margin-right: 28px;
}

#ShopifyMainNav.header-bg .marketing-nav__logo__shopify {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    width: auto !important;
    height: 80px !important;
    margin-top: 0 !important;
    background-image: none !important;
    text-decoration: none !important;
}

    #ShopifyMainNav.header-bg .marketing-nav__logo__shopify .ciq-wordmark {
        display: block;
        color: #184b71;
        font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
        font-size: 27px;
        font-weight: 800;
        letter-spacing: -0.5px;
        line-height: 1;
    }

        #ShopifyMainNav.header-bg .marketing-nav__logo__shopify .ciq-wordmark span {
            color: #ee6331;
        }

    #ShopifyMainNav.header-bg .marketing-nav__logo__shopify .ciq-tagline {
        display: block;
        align-self: flex-end;
        margin-top: 3px;
        color: #184b71;
        font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 1.2px;
        line-height: 1;
        text-transform: uppercase;
        opacity: 0.7;
    }

/* Main links: Live Webinars, Rec. Webinars, Instant Transcripts, Support */
/* Each item is a full-height flex cell so the link inside can be a compact, vertically centred pill */
#ShopifyMainNav.header-bg .menu-header .submenu-item {
    display: flex;
    align-items: center;
    height: 80px;
    padding-left: 2px !important;
}

/* style.css gives desktop menu links height: 80px (full bar); reset to a compact pill */
#ShopifyMainNav.header-bg .menu-header a.marketing-nav__item--primary {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    height: auto !important;
    margin: 0 2px;
    padding: 9px 14px !important;
    line-height: 1.3 !important;
    border: 0 !important;
    border-radius: 8px;
    color: #374151;
    font-size: 17px !important;
    font-weight: 600;
    letter-spacing: 0.1px;
    transition: background 0.2s ease, color 0.2s ease;
}

    #ShopifyMainNav.header-bg .menu-header a.marketing-nav__item--primary:hover,
    #ShopifyMainNav.header-bg .menu-header a.marketing-nav__item--primary:focus {
        background: #f1f5f9;
        color: #184b71 !important;
    }

    /* Current page: the master marks it with an inline orange colour; show it as a light-blue navy pill */
    #ShopifyMainNav.header-bg .menu-header a.marketing-nav__item--primary[style*="ff9f00"] {
        background: #e8f0f7;
        color: #184b71 !important;
    }

/* Right side: search, All Recordings Pass, Sign In / Sign Up, My Account, cart */
#ShopifyMainNav.header-bg .marketing-nav__user {
    display: flex;
    align-items: center;
    gap: 16px;
}

    /* style.css forces .display--desktop { display: block !important } from 1080px up (and hides it below),
       which drops the gap; switch it to flex only where it is shown */
    @media screen and (min-width: 67.5em) {
        #ShopifyMainNav.header-bg .marketing-nav__user > li.display--desktop {
            display: flex !important;
            align-items: center;
            gap: 14px;
        }
    }

/* Search: round soft button */
#ShopifyMainNav.header-bg .header-search-label a.fa-search {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f5f9 !important;
    color: #184b71 !important;
    font-size: 17px;
    line-height: 1;
    transition: background 0.2s ease;
}

    #ShopifyMainNav.header-bg .header-search-label a.fa-search:hover,
    #ShopifyMainNav.header-bg .header-search-label a.fa-search:focus {
        background: #e2e8f0 !important;
    }

/* Shared pill shape for the header buttons; the old animated fill (::after) is turned off */
#ShopifyMainNav.header-bg .marketing-nav__user a.marketing-button,
#ShopifyMainNav.header-bg .myaccount_hold_head a.myaccount_head_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    line-height: 1 !important;
    text-transform: none !important;
    text-decoration: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

    #ShopifyMainNav.header-bg .marketing-nav__user a.marketing-button::after,
    #ShopifyMainNav.header-bg .marketing-nav__user a.marketing-button::before {
        display: none !important;
    }

/* All Recordings Pass: brand orange */
#ShopifyMainNav.header-bg a.marketing-button.pricing-btn {
    border: 0 !important;
    background: linear-gradient(135deg, #f47a45 0%, #e2531f 100%) !important;
    box-shadow: 0 6px 16px rgba(238, 99, 49, 0.3);
    color: #fff !important;
}

    #ShopifyMainNav.header-bg a.marketing-button.pricing-btn:hover,
    #ShopifyMainNav.header-bg a.marketing-button.pricing-btn:focus {
        box-shadow: 0 8px 20px rgba(238, 99, 49, 0.4);
        transform: translateY(-1px);
    }

/* Sign In: outlined */
#ShopifyMainNav.header-bg a.marketing-button.sign-up-btn[href="/members"] {
    border: 1px solid #cbd5e1 !important;
    background: #fff !important;
    color: #184b71 !important;
}

    #ShopifyMainNav.header-bg a.marketing-button.sign-up-btn[href="/members"]:hover,
    #ShopifyMainNav.header-bg a.marketing-button.sign-up-btn[href="/members"]:focus {
        border-color: #184b71 !important;
        background: #f3f7fb !important;
    }

/* Sign Up: solid navy */
#ShopifyMainNav.header-bg a.marketing-button.sign-up-btn[href="/sign-up"] {
    border: 1px solid #184b71 !important;
    background: #184b71 !important;
    color: #fff !important;
}

    #ShopifyMainNav.header-bg a.marketing-button.sign-up-btn[href="/sign-up"]:hover,
    #ShopifyMainNav.header-bg a.marketing-button.sign-up-btn[href="/sign-up"]:focus {
        border-color: #123654 !important;
        background: #123654 !important;
        transform: translateY(-1px);
    }

/* My Account (signed in): outlined pill with a chevron instead of the old dark box and arrow image */
#ShopifyMainNav.header-bg .myaccount_hold_head {
    margin-left: 0 !important;
}

    #ShopifyMainNav.header-bg .myaccount_hold_head a.myaccount_head_btn {
        border: 1px solid #cbd5e1 !important;
        background: #fff none !important;
        color: #184b71 !important;
    }

        #ShopifyMainNav.header-bg .myaccount_hold_head a.myaccount_head_btn::after {
            content: "\f107"; /* fa-angle-down */
            margin-left: 2px;
            font-family: FontAwesome;
            font-size: 15px;
            font-weight: 400;
        }

        #ShopifyMainNav.header-bg .myaccount_hold_head a.myaccount_head_btn:hover,
        #ShopifyMainNav.header-bg .myaccount_hold_head a.myaccount_head_btn:focus {
            border-color: #184b71 !important;
            background: #f3f7fb none !important;
        }

        #ShopifyMainNav.header-bg .myaccount_hold_head a.myaccount_head_btn .drop-down-icon {
            margin: 0 !important;
            color: #184b71 !important;
        }

/* My Account dropdown: white card under the button, icon tiles, Logout set apart.
   Opened/closed by the master's slideToggle (inline display), so display is not set here.
   custom.css makes it a dark 210px box; the header's 80px line-height made each row tall. */
#ShopifyMainNav.header-bg .myaccount_hold_head {
    position: relative;
}

#ShopifyMainNav.header-bg .myaccount_hold_head .your_account_hold_head {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    z-index: 1100;
    width: 290px;
    padding: 8px;
    border: 1px solid #e4e9f0 !important;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 18px 40px rgba(18, 38, 58, 0.18);
    line-height: 1.4;
}

    /* Small pointer towards the My Account button */
    #ShopifyMainNav.header-bg .myaccount_hold_head .your_account_hold_head::before {
        content: "";
        position: absolute;
        top: -7px;
        right: 28px;
        width: 12px;
        height: 12px;
        border-top: 1px solid #e4e9f0;
        border-left: 1px solid #e4e9f0;
        background: #fff;
        transform: rotate(45deg);
    }

    #ShopifyMainNav.header-bg .myaccount_hold_head .your_account_hold_head ul {
        display: grid;
        gap: 2px;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        #ShopifyMainNav.header-bg .myaccount_hold_head .your_account_hold_head ul li {
            float: none !important;
            width: auto !important;
            margin: 0;
            padding: 0 !important;
            line-height: 1.4 !important;
        }

            #ShopifyMainNav.header-bg .myaccount_hold_head .your_account_hold_head ul li a {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 8px 10px;
                border-radius: 10px;
                background: transparent;
                color: #374151;
                font-size: 14px;
                font-weight: 600;
                line-height: 1.35;
                text-decoration: none !important;
                transition: background 0.15s ease, color 0.15s ease;
            }

                #ShopifyMainNav.header-bg .myaccount_hold_head .your_account_hold_head ul li a:hover,
                #ShopifyMainNav.header-bg .myaccount_hold_head .your_account_hold_head ul li a:focus {
                    background: #f3f7fb;
                    color: #184b71;
                    outline: none;
                }

                /* Icon tile */
                #ShopifyMainNav.header-bg .myaccount_hold_head .your_account_hold_head ul li a .drop-down-icon {
                    display: inline-flex !important;
                    flex: 0 0 30px;
                    align-items: center;
                    justify-content: center;
                    width: 30px !important;
                    height: 30px !important;
                    margin: 0 !important;
                    border-radius: 8px;
                    background: #f1f5f9;
                    color: #184b71 !important;
                    font-size: 14px;
                    transition: background 0.15s ease;
                }

                #ShopifyMainNav.header-bg .myaccount_hold_head .your_account_hold_head ul li a:hover .drop-down-icon {
                    background: #e2ebf5;
                }

            /* Logout: separated, in red */
            #ShopifyMainNav.header-bg .myaccount_hold_head .your_account_hold_head ul li:last-child {
                margin-top: 6px;
                padding-top: 6px !important;
                border-top: 1px solid #e4e9f0;
            }

                #ShopifyMainNav.header-bg .myaccount_hold_head .your_account_hold_head ul li:last-child a {
                    color: #c53030;
                }

                    #ShopifyMainNav.header-bg .myaccount_hold_head .your_account_hold_head ul li:last-child a .drop-down-icon {
                        background: #fdecec;
                        color: #c53030 !important;
                    }

                    #ShopifyMainNav.header-bg .myaccount_hold_head .your_account_hold_head ul li:last-child a:hover {
                        background: #fdf2f2;
                    }

/* Cart and wishlist: round soft button with an orange count badge */
#ShopifyMainNav.header-bg .marketing-nav__items li.cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 6px 0 4px !important;
    border-radius: 50%;
    background: #f1f5f9;
    line-height: 1 !important;
    transition: background 0.2s ease;
}

    #ShopifyMainNav.header-bg .marketing-nav__items li.cart:hover {
        background: #e2e8f0;
    }

    /* The wishlist item is shown/hidden with an inline display style; keep it centred when shown */
    #ShopifyMainNav.header-bg .marketing-nav__items li.cart:not([style*="none"]) {
        display: inline-flex !important;
    }

    /* style.css positions the icon absolutely (top: -30px, left: -5px, 30px size); put it back in the circle */
    #ShopifyMainNav.header-bg .marketing-nav__items li.cart::before {
        position: static !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        color: #184b71 !important;
        font-size: 19px !important;
        line-height: 1 !important;
    }

    #ShopifyMainNav.header-bg .marketing-nav__items li.cart.heart::before {
        color: #d64545 !important;
    }

    #ShopifyMainNav.header-bg .marketing-nav__items li.cart > span {
        position: absolute;
        top: -7px;
        right: -8px;
        line-height: 1;
    }

        /* Only the count badge is a link in the markup; the badge's ::after below stretches its click
           area over the whole round button so clicking the icon opens the cart / wishlist too */
        #ShopifyMainNav.header-bg .marketing-nav__items li.cart > span > a {
            position: relative !important;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            top: auto !important;
            right: auto !important;
            min-width: 23px;
            height: 23px !important;
            width: auto !important;
            padding: 0 5px !important;
            border: 2px solid #fff;
            border-radius: 999px;
            background: #ee6331 !important;
            color: #fff !important;
            font-family: inherit;
            font-size: 13px;
            font-weight: 700;
            line-height: 1;
            text-decoration: none !important;
        }

            /* Badge sits 7px above and 8px right of the 42px button: cover the button from there */
            #ShopifyMainNav.header-bg .marketing-nav__items li.cart > span > a::after {
                content: "";
                position: absolute;
                top: 7px;
                right: 8px;
                width: 42px;
                height: 42px;
                border-radius: 50%;
            }

            #ShopifyMainNav.header-bg .marketing-nav__items li.cart > span > a > span {
                position: static !important;
                top: auto !important;
                left: auto !important;
            }

/* Tighter spacing on laptop widths so everything fits on one row */
@media only screen and (max-width: 1280px) {
    #ShopifyMainNav.header-bg .menu-header a.marketing-nav__item--primary {
        padding: 8px 10px !important;
        font-size: 16px !important;
    }

    #ShopifyMainNav.header-bg .marketing-nav__user a.marketing-button,
    #ShopifyMainNav.header-bg .myaccount_hold_head a.myaccount_head_btn {
        padding: 0 14px !important;
    }
}

/* AI sparkle on the wordmark: small gradient star at the top right of "IQ", with a gentle twinkle */
#ShopifyMainNav.header-bg .marketing-nav__logo__shopify .ciq-wordmark {
    position: relative;
    padding-right: 16px;
}

.ciq-ai-spark {
    position: absolute;
    top: -6px;
    right: -2px;
    width: 18px;
    height: 18px;
    animation: ciq-ai-twinkle 3.2s ease-in-out infinite;
}

@keyframes ciq-ai-twinkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    50% {
        opacity: 0.75;
        transform: scale(0.85) rotate(12deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ciq-ai-spark {
        animation: none;
    }
}

/* Even more AI: slow shimmer across the "IQ" gradient, stronger glow on the sparkle cluster */
#ShopifyMainNav.header-bg .marketing-nav__logo__shopify .ciq-wordmark span {
    background: linear-gradient(105deg, #f168ad 0%, #ae55e8 30%, #6a5ef0 50%, #ae55e8 70%, #f168ad 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: ciq-ai-shimmer 6s ease-in-out infinite;
}

@keyframes ciq-ai-shimmer {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.ciq-ai-spark {
    width: 23px;
    height: 23px;
    top: -9px;
    right: -4px;
    filter: drop-shadow(0 0 3px rgba(241, 104, 173, 0.55)) drop-shadow(0 0 7px rgba(106, 94, 240, 0.4));
}

#ShopifyMainNav.header-bg .marketing-nav__logo__shopify .ciq-wordmark {
    padding-right: 22px;
}

@media (prefers-reduced-motion: reduce) {
    #ShopifyMainNav.header-bg .marketing-nav__logo__shopify .ciq-wordmark span {
        animation: none;
    }
}

/* Tablets / phones (hamburger menu): keep search + cart inside the 80px bar, just left of the
   hamburger, instead of wrapping onto a second line over the page content */
@media screen and (max-width: 67.49em) {
    #ShopifyMainNav.header-bg .marketing-nav__user {
        position: absolute;
        top: 0;
        right: 64px;
        float: none;
        height: 80px;
        margin: 0;
        padding: 0;
        gap: 8px;
    }

        #ShopifyMainNav.header-bg .marketing-nav__user > li {
            line-height: 1 !important;
        }

    #ShopifyMainNav.header-bg .header-search-label a.fa-search {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    #ShopifyMainNav.header-bg .marketing-nav__items li.cart {
        width: 38px;
        height: 38px;
        margin: 0 !important;
    }
}

/* Small phones: tuck the pair a little closer to the hamburger */
@media screen and (max-width: 400px) {
    #ShopifyMainNav.header-bg .marketing-nav__user {
        right: 56px;
        gap: 6px;
    }
}