/* ==========================================================================
   CCL Design header/footer support for the Brochure Request app
   Generated from the uploaded CCL header/footer controls.

   Load order:
   1. bootstrap.min.css
   2. default.css
   3. ccl-brochure-nav-footer.css

   Notes:
   - This file contains only CCL-specific styles needed by the header/footer.
   - Bootstrap layout/dropdown/collapse classes still come from Bootstrap 5 CSS.
   - Bootstrap Icons are separate and still need bootstrap-icons.css if you want icons.
   ========================================================================== */

:root {
    --ccl-blue: #0076ce;
    --ccl-blue-hover: #0064af;
    --ccl-black: #050505;
    --ccl-white: #ffffff;
    --ccl-grey: #ebf0f0;
    --ccl-footer-muted: #a7adb3;
    --ccl-page-margin-top: 0;
}

/* Brand / colour utilities used by the CCL header and footer */
.ccl-bg-black {
    background-color: var(--ccl-black) !important;
}

.ccl-text-white {
    color: var(--ccl-white) !important;
}

.ccl-text-black {
    color: var(--ccl-black) !important;
}

.ccl-text-blue {
    color: var(--ccl-blue) !important;
}

.ccl-text-grey {
    color: #4f595f !important;
}

.ccl-font-light {
    font-weight: 300 !important;
}

.ccl-navbar-logo {
    max-width: 100%;
    height: 38px;
}

.ccl-block-shape {
    border-top-right-radius: clamp(8px, 2vw, 40px) !important;
    border-top-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
}

.ccl-topNav-botton {
    background-color: var(--ccl-blue);
    border-color: var(--ccl-blue);
    color: var(--ccl-white);
}

.ccl-topNav-botton:hover,
.ccl-topNav-botton:focus {
    background-color: var(--ccl-blue-hover);
    border-color: var(--ccl-blue-hover);
    color: var(--ccl-white);
}

/* Footer link handling */
.ccl-bg-black a,
.ccl-bg-black .nav-link {
    color: var(--ccl-footer-muted);
}

.ccl-bg-black a:hover,
.ccl-bg-black a:focus,
.ccl-bg-black .nav-link:hover,
.ccl-bg-black .nav-link:focus {
    color: var(--ccl-white);
}

.ccl-bg-black .border-top {
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Keep Bootstrap Icons aligned if bootstrap-icons.css is available */
.bi {
    line-height: 1;
    vertical-align: -0.125em;
}

/* ==========================================================================
   Header mega-menu styles extracted from uc_masterHeader_Mega_Current.ascx
   ========================================================================== */

/** {
  font-family: "Source Sans Pro", "Roboto", Arial, sans-serif;
}*/
    :root {
    --ccl-page-margin-top:0;
    /*--ccl-page-margin-top:0;*/
}
    .ccl-video-bg-hero
    {

    }
    .navbar-megamenu.navbar .card {
        border: 0;
    }

    .navbar-megamenu.navbar .list-group .list-group-item {
        border: 0;
    }

    .navbar-megamenu.navbar {
        font-size: 16px;
        height:78px;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .navbar-megamenu .dropdown-menu.show {
        -webkit-animation: fadeIn 0.3s alternate;
        /* Safari 4.0 - 8.0 */
        animation: fadeIn 0.3s alternate;
    }

    .navbar-megamenu .nav-item.dropdown.dropdown-mega {
        position: static;
    }

        .navbar-megamenu .nav-item.dropdown.dropdown-mega .dropdown-menu {
            width: 90%;
            top: auto;
            left: 5%;
        }

    .navbar-megamenu .navbar-toggler {
        border: none;
        padding: 0;
        outline: none;
    }

        .navbar-megamenu .navbar-toggler:focus {
            box-shadow: none;
        }

        .navbar-megamenu .navbar-toggler .hamburger-toggle {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 50px;
            z-index: 11;
            float: right;
        }

            .navbar-megamenu .navbar-toggler .hamburger-toggle .hamburger {
                position: absolute;
                transform: translate(-50%, -50%) rotate(0deg);
                left: 50%;
                top: 50%;
                width: 50%;
                height: 50%;
                pointer-events: none;
            }

                .navbar-megamenu .navbar-toggler .hamburger-toggle .hamburger span {
                    width: 100%;
                    height: 4px;
                    position: absolute;
                    background: #333;
                    border-radius: 2px;
                    z-index: 1;
                    transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), all 0.2s ease-in-out;
                    left: 0px;
                }

                    .navbar-megamenu .navbar-toggler .hamburger-toggle .hamburger span:first-child {
                        top: 10%;
                        transform-origin: 50% 50%;
                        transform: translate(0% -50%) !important;
                    }

                    .navbar-megamenu .navbar-toggler .hamburger-toggle .hamburger span:nth-child(2) {
                        top: 50%;
                        transform: translate(0, -50%);
                    }

                    .navbar-megamenu .navbar-toggler .hamburger-toggle .hamburger span:last-child {
                        left: 0px;
                        top: auto;
                        bottom: 10%;
                        transform-origin: 50% 50%;
                    }

                .navbar-megamenu .navbar-toggler .hamburger-toggle .hamburger.active span {
                    position: absolute;
                    margin: 0;
                }

                    .navbar-megamenu .navbar-toggler .hamburger-toggle .hamburger.active span:first-child {
                        top: 45%;
                        transform: rotate(45deg);
                    }

                    .navbar-megamenu .navbar-toggler .hamburger-toggle .hamburger.active span:nth-child(2) {
                        left: 50%;
                        width: 0px;
                    }

                    .navbar-megamenu .navbar-toggler .hamburger-toggle .hamburger.active span:last-child {
                        top: 45%;
                        transform: rotate(-45deg);
                    }

    .navbar-megamenu .icons {
        display: inline-flex;
        margin-left: auto;
    }

        .navbar-megamenu .icons a {
            transition: all 0.2s ease-in-out;
            padding: 0.2rem 0.4rem;
            color: #ccc !important;
            text-decoration: none;
        }

            .navbar-megamenu .icons a:hover {
                color: white;
                text-shadow: 0 0 30px white;
            }

    .navbar-megamenu .dropdown-menu {
        max-height: 800px;
        overflow-y: auto;
        overflow-x: hidden;
        /*height:fit-content;*/
    }

    /* Ensure perfect square thumbnails and consistent sizing */
    .navbar-megamenu .country-thumb {
        width: 28px;
        height: 28px;
        object-fit: cover; /* keeps images square even if source isn't */
        border-radius: 4px; /* slight rounding; remove if you want sharp corners */
    }
    /* Optional: tighter spacing on smaller screens */
    .navbar-megamenu .country-item {
        /*padding-top: .6rem;
        padding-bottom: .6rem;*/
         padding-top: .3rem;
        padding-bottom: .3rem;
    }


    
    .navbar-megamenu .sectors-section 
    {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }

    /* Scope to a specific link type to avoid affecting all anchors */
    .navbar-megamenu a {
        text-decoration: none; /* optional, you already have a class for this */
        color: inherit; /* keep text colors controlled by your classes */
    }

    .navbar-megamenu .btn-sm
    {
        font-size:16px;
    }

    /* Smooth animation for the icon */
    .navbar-megamenu .bi, .country-thumb,.navbar-megamenu .list-group-item {
        display: inline-block; /* allows transform to work properly */
        transition: transform 0.25s ease; /* smooth movement */
    }

    /* Move icon to the right when the link is hovered or focused (keyboard users) */
    .navbar-megamenu a:hover .bi,
    .navbar-megamenu a:focus-visible .bi,
    .navbar-megamenu a:hover .country-thumb,
    .navbar-megamenu a:focus-visible .country-thumb,.navbar-megamenu .list-group-item:hover {
        transform: translateX(6px);
    }

    /* (Optional) Respect users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .navbar-megamenu a .bi, .navbar-megamenu a .country-thumb {
            transition: none;
        }
    }

    .navbar-megamenu.navbar {
        font-size: 16px;
    }

    .navbar-megamenu .dropdown-menu
    {
        font-size:1em;
        max-height:900px;
    }

    .navbar-megamenu .dropdown-menu::-webkit-scrollbar {
    width: 6px;
}
.navbar-megamenu .dropdown-menu::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}
.navbar-megamenu .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #555;
}

    .navbar-megamenu .list-group-item:hover
    {
        /*background-color:#0076ce;*/
        color:#0076ce;
    }

    
.navbar-megamenu .megamenu-scroll-box {
    max-height: 200px;
    overflow-y: auto;
}

/* Optional scrollbar styling */
.navbar-megamenu .megamenu-scroll-box::-webkit-scrollbar {
    width: 6px;
}
.navbar-megamenu .megamenu-scroll-box::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}
.navbar-megamenu .megamenu-scroll-box::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.navbar-megamenu a:hover{
    cursor:pointer;
}

body {
    margin-top: 0;
}

/* Small safety additions for the brochure app */
.navbar-megamenu {
    width: 100%;
    z-index: 1030;
}

.navbar-megamenu .dropdown-menu {
    z-index: 1035;
}

.navbar-megamenu .card img,
.navbar-megamenu img.img-fluid {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {
    .ccl-navbar-logo {
        width: 112px;
    }

    .navbar-megamenu .nav-link {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .navbar-megamenu .nav-item.dropdown.dropdown-mega .dropdown-menu {
        width: 100%;
        left: 0;
    }
}