/* =========================================================
   SHIVA TOURS & TRAVELS
   PREMIUM HEADER
   FINAL POLISHED VERSION
   ========================================================= */


/* =========================================================
   DESIGN TOKENS
   ========================================================= */

.site-header {
    --header-bg:
        rgba(239, 235, 225, 0.95);

    --header-bg-mobile:
        rgba(239, 235, 225, 0.985);

    --header-border:
        rgba(7, 21, 18, 0.08);

    --nav-color:
        #10251f;

    --nav-hover:
        #987635;

    --gold:
        #d6b66a;

    --gold-soft:
        rgba(214, 182, 106, 0.10);

    --gold-line:
        rgba(214, 182, 106, 0.90);

    --header-shadow:
        0 4px 18px rgba(7, 21, 18, 0.07);

    --dropdown-shadow:
        0 20px 48px rgba(7, 21, 18, 0.15);
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position: sticky;

    top: 0;

    z-index: 9999;

    width: 100%;

    background:
        var(--header-bg);

    border-bottom:
        1px solid var(--header-border);

    box-shadow:
        var(--header-shadow);

    backdrop-filter:
        blur(14px)
        saturate(115%);

    -webkit-backdrop-filter:
        blur(14px)
        saturate(115%);

    isolation: isolate;
}


/* =========================================================
   SUBTLE GOLD LIGHT AT BOTTOM
   ========================================================= */

.site-header::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(214, 182, 106, 0.12) 18%,
            rgba(214, 182, 106, 0.30) 50%,
            rgba(214, 182, 106, 0.12) 82%,
            transparent 100%
        );

    pointer-events: none;
}


/* =========================================================
   HEADER CONTAINER
   ========================================================= */

.header-container {
    position: relative;

    width:
        min(
            calc(100% - 28px),
            var(--container)
        );

    min-height: 62px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;
}


/* =========================================================
   LOGO
   ========================================================= */

.site-logo {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    padding:
        2px
        6px;

    line-height: 0;

    text-decoration:
        none !important;

    isolation: isolate;
}


/* Premium halo */

.site-logo::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 138%;
    height: 138%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(214, 182, 106, 0.22) 0%,
            rgba(214, 182, 106, 0.07) 38%,
            transparent 72%
        );

    filter:
        blur(5px);

    opacity: 0.90;

    pointer-events: none;

    z-index: -1;

    transition:
        transform 0.45s cubic-bezier(.2,.8,.2,1),
        opacity 0.35s ease;
}


.site-logo img,
.site-logo .custom-logo {
    position: relative;

    z-index: 2;

    display: block;

    width: auto;
    height: auto;

    max-width: 120px;
    max-height: 47px;

    object-fit: contain;

    text-decoration: none !important;

    filter:
        brightness(1.04)
        contrast(1.08)
        saturate(1.05)
        drop-shadow(
            0 2px 5px rgba(7, 21, 18, 0.12)
        );

    transform:
        translateZ(0);

    transition:
        transform 0.35s cubic-bezier(.2,.8,.2,1),
        filter 0.35s ease;
}


.site-logo:hover::before {
    transform:
        translate(-50%, -50%)
        scale(1.08);

    opacity: 1;
}


.site-logo:hover img,
.site-logo:hover .custom-logo {
    transform:
        translateY(-1px)
        scale(1.025);

    filter:
        brightness(1.06)
        contrast(1.09)
        saturate(1.08)
        drop-shadow(
            0 4px 9px rgba(7, 21, 18, 0.15)
        );
}


.site-logo,
.site-logo:hover,
.site-logo:focus,
.site-logo:focus-visible,
.site-logo:active {
    text-decoration: none !important;
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.mobile-menu-toggle {
    position: relative;

    z-index: 10002;

    width: 38px;
    height: 38px;

    display: flex !important;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 4px;

    flex-shrink: 0;

    margin: 0;
    padding: 0;

    border:
        1px solid rgba(150, 115, 49, 0.36);

    border-radius: 8px;

    background:
        rgba(255, 255, 255, 0.58);

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    outline: none;

    box-shadow:
        0 2px 7px rgba(7, 21, 18, 0.04);

    transition:
        background-color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.16s ease;
}


.mobile-menu-toggle:hover {
    background:
        rgba(214, 182, 106, 0.13);

    border-color:
        var(--gold);

    box-shadow:
        0 4px 12px rgba(7, 21, 18, 0.08);
}


.mobile-menu-toggle:active {
    transform:
        scale(0.94);
}


.mobile-menu-toggle span {
    display: block;

    width: 17px;
    height: 2px;

    margin: 0;

    flex: 0 0 auto;

    border-radius: 20px;

    background:
        var(--nav-color);

    transform-origin:
        center;

    transition:
        transform 0.28s cubic-bezier(.2,.8,.2,1),
        opacity 0.20s ease,
        width 0.22s ease,
        background-color 0.22s ease;
}


.mobile-menu-toggle:hover span {
    background:
        var(--nav-hover);
}


/* =========================================================
   HAMBURGER → X
   ========================================================= */

.mobile-menu-toggle[aria-expanded="true"]
span:nth-child(1) {
    transform:
        translateY(6px)
        rotate(45deg);
}


.mobile-menu-toggle[aria-expanded="true"]
span:nth-child(2) {
    width: 0;
    opacity: 0;
}


.mobile-menu-toggle[aria-expanded="true"]
span:nth-child(3) {
    transform:
        translateY(-6px)
        rotate(-45deg);
}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

.main-navigation {
    position: absolute;

    top: 100%;
    left: 0;
    right: 0;

    z-index: 10001;

    display: none;

    width: 100%;

    overflow: hidden;

    background:
        var(--header-bg-mobile);

    border-bottom:
        1px solid rgba(7, 21, 18, 0.09);

    box-shadow:
        0 16px 34px rgba(7, 21, 18, 0.11);

    transform-origin:
        top center;
}


.main-navigation.is-open {
    display: block !important;

    animation:
        shivaMobileMenuOpen
        0.30s
        cubic-bezier(.2,.8,.2,1)
        both;
}


@keyframes shivaMobileMenuOpen {

    from {
        opacity: 0;

        transform:
            translateY(-7px)
            scaleY(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scaleY(1);
    }
}


/* =========================================================
   MOBILE MENU LIST
   ========================================================= */

.main-navigation .nav-list {
    display: flex;

    flex-direction: column;

    width: 100%;

    margin: 0;

    padding:
        8px
        14px
        16px;

    list-style: none;
}


.main-navigation .nav-list li {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =========================================================
   UNIVERSAL LINK RESET
   ========================================================= */

.site-header .main-navigation a,
.site-header .main-navigation a:hover,
.site-header .main-navigation a:focus,
.site-header .main-navigation a:focus-visible,
.site-header .main-navigation a:active,
.site-header .main-navigation a:visited {

    text-decoration:
        none !important;

    border:
        0 !important;

    border-top:
        0 !important;

    border-right:
        0 !important;

    border-bottom:
        0 !important;

    border-left:
        0 !important;

    box-shadow:
        none !important;
}


/* =========================================================
   MOBILE TOP LEVEL LINKS
   ========================================================= */

.main-navigation .nav-list > li > a {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 43px;

    padding:
        8px
        6px;

    color:
        var(--nav-color) !important;

    background:
        transparent !important;

    border-radius:
        7px;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1.2;

    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        padding-left 0.22s ease;
}


.main-navigation .nav-list > li > a:hover {

    color:
        var(--nav-hover) !important;

    background:
        var(--gold-soft) !important;

    padding-left:
        11px;
}


/* =========================================================
   MOBILE SUBMENU
   ========================================================= */

.main-navigation .sub-menu {

    display:
        block;

    width:
        100%;

    margin:
        0
        0
        6px;

    padding:
        3px
        0
        4px
        13px;

    list-style:
        none;

    border-left:
        2px solid rgba(214, 182, 106, 0.42);
}


.main-navigation .sub-menu a {

    display:
        flex;

    align-items:
        center;

    min-height:
        37px;

    padding:
        7px
        6px;

    color:
        rgba(7, 21, 18, 0.68) !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        5px;

    font-size:
        12px;

    font-weight:
        500;

    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        padding-left 0.22s ease;
}


.main-navigation .sub-menu a:hover {

    color:
        var(--nav-hover) !important;

    background:
        rgba(214, 182, 106, 0.08) !important;

    padding-left:
        11px;
}


/* =========================================================
   MOBILE ARROW
   ========================================================= */

.main-navigation
.menu-item-has-children
> a::after {

    content:
        "⌄";

    display:
        inline-block;

    margin-left:
        auto;

    color:
        var(--gold);

    font-size:
        11px;

    line-height:
        1;

    text-decoration:
        none !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 900px) {

    .site-header {
        background:
            rgba(239, 235, 225, 0.94);
    }


    .header-container {

        width:
            min(
                calc(100% - 52px),
                var(--container)
            );

        min-height:
            68px;
    }


    /* =====================================================
       DESKTOP LOGO
       ===================================================== */

    .site-logo {
        padding:
            3px
            7px;
    }


    .site-logo img,
    .site-logo .custom-logo {

        max-width:
            152px;

        max-height:
            54px;
    }


    /* =====================================================
       HIDE MOBILE MENU BUTTON
       ===================================================== */

    .mobile-menu-toggle {
        display:
            none !important;
    }


    /* =====================================================
       DESKTOP NAVIGATION
       ===================================================== */

    .main-navigation {

        position:
            static;

        display:
            block !important;

        width:
            auto;

        overflow:
            visible;

        background:
            transparent;

        border:
            0 !important;

        box-shadow:
            none;

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;

        animation:
            none;
    }


    .main-navigation .nav-list {

        display:
            flex;

        flex-direction:
            row;

        align-items:
            center;

        width:
            auto;

        margin:
            0;

        padding:
            0;

        gap:
            3px;
    }


    /* =====================================================
       TOP LEVEL ITEMS
       ===================================================== */

    .main-navigation
    .nav-list
    > li {

        position:
            relative;

        width:
            auto;

        margin:
            0;

        padding:
            0;
    }


    /* =====================================================
       HOVER BRIDGE
       Keeps dropdown open while moving into it.
       ===================================================== */

    .main-navigation
    .nav-list
    > li.menu-item-has-children::before {

        content:
            "";

        position:
            absolute;

        top:
            100%;

        left:
            -12px;

        right:
            -12px;

        height:
            10px;

        background:
            transparent;

        pointer-events:
            auto;

        z-index:
            10019;
    }


    /* =====================================================
       DESKTOP LINKS
       ===================================================== */

    .main-navigation
    .nav-list
    > li
    > a {

        position:
            relative;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            auto;

        min-height:
            36px;

        padding:
            7px
            12px;

        color:
            var(--nav-color) !important;

        background:
            transparent !important;

        border:
            0 !important;

        border-bottom:
            0 !important;

        border-radius:
            7px;

        box-shadow:
            none !important;

        outline:
            none;

        font-family:
            "Segoe UI",
            Arial,
            sans-serif;

        font-size:
            12.5px;

        font-weight:
            600;

        line-height:
            1.2;

        white-space:
            nowrap;

        text-decoration:
            none !important;

        transform:
            translateY(0);

        transition:
            color 0.24s ease,
            background-color 0.24s ease,
            transform 0.24s cubic-bezier(.2,.8,.2,1);
    }


    /* =====================================================
       HOVER
       ===================================================== */

    .main-navigation
    .nav-list
    > li
    > a:hover {

        color:
            var(--nav-hover) !important;

        background:
            rgba(214, 182, 106, 0.085) !important;

        border:
            0 !important;

        box-shadow:
            none !important;

        text-decoration:
            none !important;

        transform:
            translateY(-1px);
    }


    /* =====================================================
       ANIMATED HOVER UNDERLINE
       This is the ONLY underline on the main navigation.
       ===================================================== */

    .main-navigation
    .nav-list
    > li
    > a::before {

        content:
            "";

        position:
            absolute;

        left:
            12px;

        right:
            12px;

        bottom:
            2px;

        height:
            2px;

        border-radius:
            20px;

        background:
            var(--gold-line);

        transform:
            scaleX(0);

        transform-origin:
            center;

        opacity:
            0;

        pointer-events:
            none;

        transition:
            transform 0.28s cubic-bezier(.2,.8,.2,1),
            opacity 0.20s ease;
    }


    .main-navigation
    .nav-list
    > li
    > a:hover::before {

        transform:
            scaleX(1);

        opacity:
            1;
    }


    /* =====================================================
       ACTIVE ITEM
       NO PERMANENT UNDERLINE
       ===================================================== */

    .main-navigation
    .nav-list
    > li.current-menu-item
    > a,

    .main-navigation
    .nav-list
    > li.current-menu-parent
    > a,

    .main-navigation
    .nav-list
    > li.current-menu-ancestor
    > a {

        color:
            var(--nav-color) !important;

        background:
            transparent !important;

        text-decoration:
            none !important;
    }


    .main-navigation
    .nav-list
    > li.current-menu-item
    > a::before,

    .main-navigation
    .nav-list
    > li.current-menu-parent
    > a::before,

    .main-navigation
    .nav-list
    > li.current-menu-ancestor
    > a::before {

        transform:
            scaleX(0);

        opacity:
            0;
    }


    /* =====================================================
       TOUR PACKAGES ARROW
       ===================================================== */

    .main-navigation
    .nav-list
    > li.menu-item-has-children
    > a::after {

        content:
            "⌄" !important;

        position:
            static !important;

        display:
            inline-block !important;

        width:
            auto !important;

        height:
            auto !important;

        margin-left:
            7px;

        color:
            var(--gold) !important;

        background:
            none !important;

        border:
            0 !important;

        transform:
            rotate(0);

        opacity:
            1;

        font-size:
            9px;

        line-height:
            1;

        pointer-events:
            none;

        transition:
            transform 0.25s ease;
    }


    .main-navigation
    .nav-list
    > li.menu-item-has-children:hover
    > a::after {

        transform:
            rotate(180deg)
            translateY(1px);
    }


    /* =====================================================
       DESKTOP DROPDOWN
       ===================================================== */

    .main-navigation
    .nav-list
    > li
    > .sub-menu {

        position:
            absolute;

        top:
            calc(100% + 6px);

        left:
            50%;

        z-index:
            10020;

        width:
            228px;

        margin:
            0;

        padding:
            7px;

        list-style:
            none;

        background:
            rgba(239, 235, 225, 0.985);

        border:
            1px solid rgba(7, 21, 18, 0.10);

        border-radius:
            12px;

        box-shadow:
            var(--dropdown-shadow);

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);

        visibility:
            hidden;

        opacity:
            0;

        pointer-events:
            none;

        transform:
            translateX(-50%)
            translateY(-6px)
            scale(0.98);

        transform-origin:
            top center;

        transition:
            opacity 0.22s ease,
            visibility 0.22s ease,
            transform 0.25s cubic-bezier(.2,.8,.2,1);
    }


    /* =====================================================
       SHOW DROPDOWN
       ===================================================== */

    .main-navigation
    .nav-list
    > li:hover
    > .sub-menu,

    .main-navigation
    .nav-list
    > li:focus-within
    > .sub-menu {

        visibility:
            visible;

        opacity:
            1;

        pointer-events:
            auto;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }


    /* =====================================================
       DROPDOWN LINKS
       ===================================================== */

    .main-navigation
    .nav-list
    > li
    > .sub-menu
    a {

        position:
            relative;

        display:
            flex;

        align-items:
            center;

        width:
            100%;

        min-height:
            38px;

        padding:
            9px
            11px;

        color:
            var(--nav-color) !important;

        background:
            transparent !important;

        border:
            0 !important;

        border-bottom:
            0 !important;

        border-radius:
            7px;

        box-shadow:
            none !important;

        font-family:
            "Segoe UI",
            Arial,
            sans-serif;

        font-size:
            12px;

        font-weight:
            500;

        line-height:
            1.2;

        text-decoration:
            none !important;

        transition:
            color 0.22s ease,
            background-color 0.22s ease,
            padding-left 0.22s ease,
            transform 0.22s ease;
    }


    .main-navigation
    .nav-list
    > li
    > .sub-menu
    a:hover {

        padding-left:
            16px;

        color:
            var(--nav-hover) !important;

        background:
            rgba(214, 182, 106, 0.095) !important;

        text-decoration:
            none !important;

        transform:
            translateX(1px);
    }


    /* Absolutely no underline inside dropdown */

    .main-navigation
    .nav-list
    > li
    > .sub-menu
    a::before,
    .main-navigation
    .nav-list
    > li
    > .sub-menu
    a::after {

        content:
            none !important;
    }


    /* =====================================================
       SUBMENU HOVER BRIDGE
       ===================================================== */

    .main-navigation
    .nav-list
    > li
    > .sub-menu::before {

        content:
            "";

        position:
            absolute;

        top:
            -7px;

        left:
            0;

        right:
            0;

        height:
            7px;

        background:
            transparent;

        pointer-events:
            auto;
    }
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    .header-container {
        min-height:
            71px;
    }


    .site-logo img,
    .site-logo .custom-logo {
        max-width:
            160px;

        max-height:
            57px;
    }


    .main-navigation
    .nav-list {
        gap:
            4px;
    }
}


/* =========================================================
   SMALL MOBILE / TABLET
   ========================================================= */

@media (max-width: 899px) {

    .main-navigation.is-open {
        display:
            block !important;
    }


    .main-navigation .nav-list {
        padding-top:
            8px;

        padding-bottom:
            16px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .header-container {

        width:
            calc(100% - 20px);

        min-height:
            59px;
    }


    .site-logo img,
    .site-logo .custom-logo {

        max-width:
            108px;

        max-height:
            42px;
    }


    .mobile-menu-toggle {

        width:
            36px;

        height:
            36px;
    }


    .mobile-menu-toggle span {

        width:
            16px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .site-logo::before,
    .site-logo img,
    .site-logo .custom-logo,
    .mobile-menu-toggle,
    .mobile-menu-toggle span,
    .main-navigation,
    .main-navigation a {

        animation:
            none !important;

        transition:
            none !important;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.mobile-menu-toggle:focus-visible,
.site-logo:focus-visible,
.main-navigation a:focus-visible {

    outline:
        2px solid var(--gold);

    outline-offset:
        3px;
}