/* ==================================================================
   Header Mega Menu Enhancement
   Standalone stylesheet — does not modify style.css / custom.css
   Brand colours reused from existing theme:
   Gold accent: #fdbe33 | Navy: #030f27 | Light bg: #f8f9fa
   ================================================================== */

/* Remove Bootstrap's default dropdown-toggle caret (::after) so only our own chevron shows */
.mega-dropdown > .nav-link.dropdown-toggle::after {
    display: none;
    content: none;
}

/* ---------- Shared caret ---------- */
.mega-dropdown > .nav-link .mega-caret {
    font-size: 11px;
    margin-left: 6px;
    transition: transform .25s ease;
    vertical-align: 1px;
}

/* ==================================================================
   DESKTOP (≥ 992px)
   ================================================================== */
@media (min-width: 992px) {

    .mega-dropdown {
        position: static;
    }

    .mega-menu {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        margin: 0 75px;
        background: #ffffff;
        border-top: 3px solid #fdbe33;
        box-shadow: 0 18px 40px rgba(3, 15, 39, .18);
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
        z-index: 1000;
    }

    /* Open on hover */
    .mega-dropdown:hover .mega-menu,
    .mega-dropdown.mega-open .mega-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .mega-dropdown:hover > .nav-link .mega-caret,
    .mega-dropdown.mega-open > .nav-link .mega-caret {
        transform: rotate(180deg);
    }

    .mega-menu-inner {
        display: flex;
        flex-wrap: nowrap;
        padding: 40px 50px;
        gap: 50px;
    }

    .mega-col {
        flex: 1 1 0;
        min-width: 0;
    }

    .mega-col-title {
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #030f27;
        margin: 0 0 18px 0;
        padding-bottom: 12px;
        border-bottom: 2px solid #f1f1f1;
    }

    .mega-col-title i {
        color: #fdbe33;
        margin-right: 8px;
        font-size: 16px;
    }

    .mega-col ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mega-col ul li {
        margin: 0;
    }

    .mega-col ul li a {
        display: block;
        padding: 9px 0;
        color: #4a4f5c;
        font-size: 14.5px;
        text-decoration: none;
        transition: color .2s ease, padding-left .2s ease;
        position: relative;
    }

    .mega-col ul li a::before {
        content: "";
        position: absolute;
        left: -14px;
        top: 50%;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #fdbe33;
        opacity: 0;
        transform: translateY(-50%);
        transition: opacity .2s ease, left .2s ease;
    }

    .mega-col ul li a:hover,
    .mega-col ul li a:focus {
        color: #030f27;
        padding-left: 14px;
    }

    .mega-col ul li a:hover::before,
    .mega-col ul li a:focus::before {
        opacity: 1;
        left: 0;
    }

    .mega-menu-footer {
        background: #f8f9fa;
        padding: 16px 50px;
        text-align: right;
        border-top: 1px solid #eee;
    }

    .mega-view-all {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #030f27;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: .5px;
        text-decoration: none;
        transition: color .2s ease, gap .2s ease;
    }

    .mega-view-all i {
        font-size: 12px;
        transition: transform .2s ease;
    }

    .mega-view-all:hover {
        color: #fdbe33;
    }

    .mega-view-all:hover i {
        transform: translateX(4px);
    }
}

/* ==================================================================
   MOBILE / TABLET (≤ 991.98px) — accordion style inside collapsed nav
   ================================================================== */
@media (max-width: 991.98px) {

    /* Custom animated hamburger icon */
    .navbar-toggler {
        border: 0;
        padding: 6px;
        width: 38px;
        height: 38px;
        z-index: 1101;
    }

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

    .hamburger-box {
        position: relative;
        display: block;
        width: 24px;
        height: 18px;
        margin: 0 auto;
    }

    .hamburger-bar {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: #ffffff;
        border-radius: 2px;
        transition: transform .3s ease, opacity .3s ease, top .3s ease;
    }

    .bar-top {
        top: 0;
    }

    .bar-mid {
        top: 8px;
    }

    .bar-bottom {
        top: 16px;
    }

    /* When menu is open, morph the bars into an X */
    .navbar-toggler[aria-expanded="true"] .bar-top {
        top: 8px;
        transform: rotate(45deg);
    }

    .navbar-toggler[aria-expanded="true"] .bar-mid {
        opacity: 0;
    }

    .navbar-toggler[aria-expanded="true"] .bar-bottom {
        top: 8px;
        transform: rotate(-45deg);
    }

    /* Smooth open animation for the collapsed nav panel */
    #navbarCollapse {
        transition: max-height .35s ease;
    }

    #navbarCollapse.collapsing {
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease;
    }

    .navbar-nav {
        width: 100%;
    }

    .navbar-nav .nav-item {
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        animation: mega-fade-in .35s ease both;
    }

    @keyframes mega-fade-in {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Services toggle row */
    .mega-dropdown > .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mega-dropdown > .nav-link .mega-caret {
        transition: transform .25s ease;
    }

    .mega-dropdown.mega-open > .nav-link .mega-caret {
        transform: rotate(180deg);
    }

    /* Mega menu collapses into a stacked accordion panel */
    .mega-menu {
        max-height: 0;
        overflow: hidden;
        background: rgba(0, 0, 0, .15);
        transition: max-height .35s ease;
    }

    .mega-dropdown.mega-open .mega-menu {
        max-height: 1400px;
    }

    .mega-menu-inner {
        display: block;
        padding: 6px 10px 10px 10px;
    }

    .mega-col {
        padding: 10px 8px;
    }

    .mega-col-title {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #fdbe33;
        margin: 0 0 8px 0;
    }

    .mega-col-title i {
        margin-right: 8px;
    }

    .mega-col ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mega-col ul li a {
        display: block;
        padding: 8px 6px 8px 14px;
        color: #f1f1f1;
        font-size: 14px;
        text-decoration: none;
        border-left: 2px solid rgba(255, 255, 255, .15);
    }

    .mega-col ul li a:active,
    .mega-col ul li a:hover {
        color: #fdbe33;
        border-left-color: #fdbe33;
    }

    .mega-menu-footer {
        padding: 4px 14px 14px 14px;
        text-align: left;
    }

    .mega-view-all {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #ffffff;
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
        text-decoration: none;
    }

    .mega-view-all i {
        font-size: 11px;
    }
}