/* =========================================================
   GoldPriceBD - Navigation System
   =========================================================
   Desktop:
   - Desktop navigation visible
   - Mobile navigation hidden

   Mobile:
   - Desktop navigation hidden
   - Hamburger controlled mobile navigation
   - Vertical menu
   - Smooth open/close animation
   - Overlay
   - Body scroll lock support
   - Dark mode compatible
   ========================================================= */


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

.site-nav {
    display: flex;

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

    gap: 4px;

    margin-left: auto;

    flex: 0 0 auto;
}


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

.site-nav > a {
    position: relative;

    display: inline-flex;

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

    min-height: 42px;

    padding: 8px 14px;

    border-radius: 9px;

    color: var(--color-text-secondary);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-medium);

    line-height: 1.2;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast);
}


.site-nav > a:hover {
    color: var(--color-text);

    background:
        var(--color-bg-soft);
}


.site-nav > a.active {
    color:
        var(--color-primary);

    background:
        var(--color-primary-light);
}


/* =========================================================
   DESKTOP ACTIVE INDICATOR
   ========================================================= */

.site-nav > a.active::after {
    content: "";

    position: absolute;

    left: 14px;
    right: 14px;

    bottom: 4px;

    height: 2px;

    border-radius: 999px;

    background:
        var(--color-primary);
}


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

   IMPORTANT:
   This is the navigation used by:

   #mobile-navigation
   .mobile-navigation-wrapper

   Desktop এ সম্পূর্ণ hidden.
   ========================================================= */

.mobile-navigation-wrapper {
    display: none;
}


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

.mobile-navigation {
    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 6px;
}


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

.mobile-navigation-link {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 48px;

    padding: 12px 14px;

    border: 1px solid transparent;

    border-radius: 11px;

    background:
        transparent;

    color:
        var(--color-text-secondary);

    font-size: 14px;

    font-weight: 600;

    line-height: 1.3;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}


/* =========================================================
   MOBILE LINK HOVER
   ========================================================= */

.mobile-navigation-link:hover {
    color:
        var(--color-primary);

    background:
        var(--color-bg-soft);

    border-color:
        var(--color-border);

    transform:
        translateX(2px);
}


/* =========================================================
   MOBILE ACTIVE LINK
   ========================================================= */

.mobile-navigation-link.active {
    color:
        var(--color-primary);

    background:
        var(--color-primary-light);

    border-color:
        color-mix(
            in srgb,
            var(--color-primary) 18%,
            transparent
        );
}


/* =========================================================
   ACTIVE INDICATOR
   ========================================================= */

.mobile-navigation-link.active::before {
    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    width: 4px;

    height: 24px;

    border-radius: 999px;

    background:
        var(--color-primary);

    transform:
        translateY(-50%);
}


/* =========================================================
   MOBILE NAV LABEL
   ========================================================= */

.mobile-nav-label {
    display: block;

    width: 100%;
}


/* =========================================================
   MOBILE OVERLAY
   =========================================================

   Overlay only exists visually when menu is open.
   ========================================================= */

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

    position: fixed;

    inset: 0;

    z-index: -1;

    background:
        rgba(15, 23, 42, 0.22);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 180ms ease,
        visibility 180ms ease;
}


/* =========================================================
   MOBILE BREAKPOINT
   ========================================================= */

@media (max-width: 760px) {

    /* -----------------------------------------------------
       DESKTOP NAV HIDDEN
       ----------------------------------------------------- */

    .site-header .site-nav {
        display: none !important;
    }


    /* -----------------------------------------------------
       MOBILE NAV WRAPPER
       ----------------------------------------------------- */

    .mobile-navigation-wrapper {
        position: absolute;

        top: calc(100% + 8px);

        left: 10px;
        right: 10px;

        width: auto;

        display: block;

        padding: 8px;

        background:
            color-mix(
                in srgb,
                var(--color-bg-elevated) 98%,
                transparent
            );

        border:
            1px solid
            var(--color-border);

        border-radius: 16px;

        box-shadow:
            0 18px 45px
            rgba(0, 0, 0, 0.16);

        backdrop-filter:
            blur(18px);

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

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(-10px)
            scale(0.98);

        transform-origin:
            top center;

        transition:
            opacity 180ms ease,
            transform 180ms ease,
            visibility 180ms ease;

        z-index: 1000;
    }


    /* -----------------------------------------------------
       OPEN MOBILE MENU
       ----------------------------------------------------- */

    .site-header.menu-open
    .mobile-navigation-wrapper {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

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


    /* -----------------------------------------------------
       OPEN OVERLAY
       ----------------------------------------------------- */

    .site-header.menu-open::after {

        opacity: 1;

        visibility: visible;
    }


    /* -----------------------------------------------------
       MOBILE NAV LINKS
       ----------------------------------------------------- */

    .mobile-navigation-link {

        min-height: 48px;

        padding:
            12px 15px
            12px 17px;

        font-size: 14px;
    }


    /* -----------------------------------------------------
       ACTIVE LINK
       ----------------------------------------------------- */

    .mobile-navigation-link.active {

        padding-left: 20px;
    }


    /* -----------------------------------------------------
       FOCUS
       ----------------------------------------------------- */

    .mobile-navigation-link:focus-visible {

        outline:
            2px solid
            var(--color-primary);

        outline-offset:
            2px;
    }

}


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

@media (max-width: 480px) {

    .mobile-navigation-wrapper {

        top: calc(100% + 7px);

        left: 8px;
        right: 8px;

        padding: 7px;

        border-radius: 14px;
    }


    .mobile-navigation {

        gap: 5px;
    }


    .mobile-navigation-link {

        min-height: 45px;

        padding:
            10px 13px
            10px 15px;

        border-radius: 10px;

        font-size: 13px;
    }


    .mobile-navigation-link.active {

        padding-left: 18px;
    }


    .mobile-navigation-link.active::before {

        width: 3px;

        height: 21px;
    }

}


/* =========================================================
   BODY SCROLL LOCK
   ========================================================= */

body.mobile-menu-open {

    overflow: hidden;

    touch-action: none;
}


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

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

    .mobile-navigation-wrapper,
    .mobile-navigation-link,
    .site-header::after {

        transition:
            none !important;
    }

}