/* =========================================================
   Site header / top menu — loaded from Views/Shared/_Layout (all pages)
   ========================================================= */

:root {
    --sh-primary-dark: #1e88e5;
    --sh-accent: #fb9017;
    --sh-primary: #64b5f6;
    --sh-radius: 14px;
    --sh-shadow: 0 18px 45px -12px rgba(15, 35, 70, .25);
    --sh-ease: cubic-bezier(.22, .61, .36, 1);
}

   --------------------------------------------------------- */
header.header-static {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 4px 24px -10px rgba(15, 35, 70, .18) !important;
    transition: box-shadow .3s var(--sh-ease), background .3s var(--sh-ease);
}

header .header-logo {
    transition: transform .4s var(--sh-ease);
}

header .navbar-brand:hover .header-logo {
    transform: scale(1.05) rotate(-1deg);
}

.navbar-top a {
    transition: color .25s ease;
}

    .navbar-top a:hover {
        color: var(--sh-primary-dark);
    }

@media (min-width: 992px) {
    header .navbar-nav > .nav-item > .nav-link {
        position: relative;
        z-index: 1;
        color: #4b5563;
        font-size: .92rem;
        font-weight: 600;
        margin: 0 .15rem;
        text-decoration: none !important;
        transition: color .3s var(--sh-ease);
    }

        /* animated gradient underline that grows from the center */
        header .navbar-nav > .nav-item > .nav-link::before {
            content: "";
            position: absolute;
            right: 50%;
            left: 50%;
            top: calc(50% + 1.05em); /* follows the text, whatever the header line-height */
            height: 3px;
            border-radius: 3px;
            background: linear-gradient(90deg, var(--sh-accent), var(--sh-primary));
            opacity: 0;
            transition: right .35s var(--sh-ease), left .35s var(--sh-ease), opacity .35s var(--sh-ease);
        }

        /* soft pill glow behind the item */
        header .navbar-nav > .nav-item > .nav-link::after {
            content: "";
            position: absolute;
            top: calc(50% - 1.2em);
            bottom: calc(50% - 1.45em);
            right: 0;
            left: 0;
            border-radius: 10px;
            background: rgba(100, 181, 246, .10);
            transform: scale(.85);
            opacity: 0;
            z-index: -1;
            transition: transform .35s var(--sh-ease), opacity .35s var(--sh-ease);
        }

        header .navbar-nav > .nav-item > .nav-link:hover,
        header .navbar-nav > .nav-item > .nav-link:focus,
        header .navbar-nav > .nav-item.show > .nav-link {
            color: var(--sh-primary-dark);
        }

            header .navbar-nav > .nav-item > .nav-link:hover::before,
            header .navbar-nav > .nav-item > .nav-link:focus::before,
            header .navbar-nav > .nav-item.show > .nav-link::before {
                right: 1rem;
                left: 1rem;
                opacity: 1;
            }

            header .navbar-nav > .nav-item > .nav-link:hover::after,
            header .navbar-nav > .nav-item > .nav-link:focus::after,
            header .navbar-nav > .nav-item.show > .nav-link::after {
                transform: scale(1);
                opacity: 1;
            }

        /* the menu item of the current page (set by _Layout script) */
        header .navbar-nav > .nav-item > .nav-link.is-current {
            color: var(--sh-primary-dark);
        }

            header .navbar-nav > .nav-item > .nav-link.is-current::before {
                right: 1rem;
                left: 1rem;
                opacity: 1;
            }

    /* dropdown: fade + slide in, also opens on hover */
    header .navbar-nav .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(12px);
        margin-top: 0;
        border: 0;
        border-radius: var(--sh-radius);
        padding: .6rem;
        box-shadow: var(--sh-shadow);
        transition: opacity .28s var(--sh-ease), transform .28s var(--sh-ease), visibility .28s;
    }

    header .navbar-nav .dropdown:hover > .dropdown-menu,
    header .navbar-nav .dropdown-menu.show {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    header .navbar-nav .dropdown-menu::before {
        content: "";
        position: absolute;
        top: -6px;
        right: 28px;
        width: 14px;
        height: 14px;
        background: #fff;
        transform: rotate(45deg);
        border-radius: 3px 0 0 0;
    }
}

header .navbar-nav .dropdown-item {
    border-radius: 9px;
    padding: .55rem 1rem;
    color: #374151;
    font-size: .88rem;
    transition: background .25s ease, color .25s ease, padding .25s var(--sh-ease);
}

    header .navbar-nav .dropdown-item:hover,
    header .navbar-nav .dropdown-item:focus {
        background: linear-gradient(90deg, rgba(100, 181, 246, .08), rgba(100, 181, 246, .18));
        color: var(--sh-primary-dark);
        padding-right: 1.4rem;
    }


/* ---------------------------------------------------------
   Mobile collapsed menu (navbar-toggler / #navbarCollapse)
   --------------------------------------------------------- */
@media (max-width: 991.98px) {
    #navbarCollapse {
        margin-top: 14px;
        padding: 10px;
        background: #fff;
        border-radius: var(--sh-radius);
        box-shadow: var(--sh-shadow);
        border: 1px solid #eef1f6;
    }

    #navbarCollapse .navbar-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    #navbarCollapse .nav-item {
        border: 0 !important;
    }

    #navbarCollapse .nav-link,
    #navbarCollapse .about-us-nav-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 14px !important;
        border-radius: 10px;
        color: #374151 !important;
        font-weight: 600;
        font-size: .92rem;
        text-decoration: none !important;
        transition: background .2s var(--sh-ease), color .2s var(--sh-ease);
    }

        #navbarCollapse .nav-link i,
        #navbarCollapse .about-us-nav-link i {
            width: 18px;
            margin: 0 !important;
            text-align: center;
            color: #9aa5b6;
            font-size: .9rem;
        }

        #navbarCollapse .nav-link:hover,
        #navbarCollapse .nav-link:active,
        #navbarCollapse .about-us-nav-link:hover,
        #navbarCollapse .about-us-nav-link:active {
            background: rgba(100, 181, 246, .12);
            color: var(--sh-primary-dark) !important;
        }

            #navbarCollapse .nav-link:hover i,
            #navbarCollapse .about-us-nav-link:hover i {
                color: var(--sh-primary-dark);
            }

        #navbarCollapse .nav-link.dropdown-toggle.show,
        #navbarCollapse .nav-link[aria-expanded="true"] {
            background: linear-gradient(90deg, rgba(251, 144, 23, .14), rgba(251, 144, 23, .05));
            color: var(--sh-accent) !important;
        }

    /* icons for the links that don't already carry one in the markup */
    #navbarCollapse .about-us-nav-link::before,
    #navbarCollapse .dropdown-toggle::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        width: 18px;
        text-align: center;
        color: #9aa5b6;
        font-size: .82rem;
        transition: color .2s var(--sh-ease);
    }

    #navbarCollapse a[href="/Home/Index"]::before {
        content: "\f015";
    }

    #navbarCollapse a[href="/Mag/MagListCategory"]::before {
        content: "\f1ea";
    }

    #navbarCollapse a[href*="atabat"]::before {
        content: "\f3c5";
    }

    #navbarCollapse a[href="/Home/ContactUs"]::before {
        content: "\f095";
    }

    #navbarCollapse a[href="/Home/AboutUs"]::before {
        content: "\f05a";
    }

    #navbarCollapse .dropdown-toggle::before {
        content: "\f5c1";
    }

    #navbarCollapse .nav-link:hover::before,
    #navbarCollapse .about-us-nav-link:hover::before {
        color: var(--sh-primary-dark);
    }

    #navbarCollapse .nav-link[aria-expanded="true"]::before {
        color: var(--sh-accent);
    }

    /* nested "tours" dropdown, opened in place instead of floating */
    #navbarCollapse .dropdown-menu {
        position: static !important;
        float: none;
        margin: 2px 0 6px 26px !important;
        padding: 4px;
        border: 0;
        background: #f8fafc;
        border-radius: 10px;
        box-shadow: none;
        max-height: 230px;
        overflow-y: auto;
    }

        #navbarCollapse .dropdown-menu .dropdown-item {
            padding: 9px 12px;
            border-radius: 8px;
            font-size: .84rem;
            color: #55617a;
        }

            #navbarCollapse .dropdown-menu .dropdown-item:hover {
                background: #eef2f8;
                color: var(--sh-primary-dark);
            }
}

@media (prefers-reduced-motion: reduce) {
    header .navbar-nav .dropdown-menu,
    header .navbar-nav .nav-link,
    header .navbar-nav .nav-link::before,
    header .navbar-nav .nav-link::after,
    #navbarCollapse .nav-link,
    #navbarCollapse .about-us-nav-link,
    #navbarCollapse .nav-link::before,
    #navbarCollapse .about-us-nav-link::before {
        transition: none !important;
    }
}