/* ==========================================================================
   Component: Navigation
   Spec: components/navigation.md
   ========================================================================== */


/* ==========================================================================
   Navigation shell
   ========================================================================== */

.nav {
    position: sticky;
    top: 0;
    z-index: var(--z-header);

    background-color: var(--nav-bg);
    border-bottom: var(--border-width-sm) solid transparent;

    transition:
            border-color 0.15s ease,
            box-shadow 0.15s ease;
}


/* Sticky state */

.nav.is-scrolled {
    border-bottom-color: var(--nav-border-bottom-sticky);
    box-shadow: var(--shadow-sm);
}


.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    min-height: var(--nav-height);
}


/* ==========================================================================
   Brand
   ========================================================================== */

.nav__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}


.nav__logo {
    display: block;
    height: 100px;
    width: auto;
}


/* ==========================================================================
   Desktop navigation
   ========================================================================== */

.nav__menu {
    display: flex;
    align-items: center;

    /*
     * Gap giữa:
     * menu links | search | CTA
     */
    gap: var(--space-2);
}


.nav__list {
    display: flex;
    align-items: center;

    gap: var(--space-4);

    margin-right: var(--space-2);

    list-style: none;
}


.nav__link {
    display: inline-block;

    padding-block: var(--space-2);

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

    color: var(--nav-link-text);

    text-decoration: none;

    border-bottom:
            var(--border-width-md)
            solid
            transparent;

    transition:
            color 0.15s ease,
            border-color 0.15s ease;
}


.nav__link:hover {
    color: var(--nav-link-text-active);
}


.nav__link[aria-current="page"] {
    color: var(--nav-link-text-active);

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

    border-bottom-color:
            var(--nav-link-text-active);
}


/* ==========================================================================
   Navigation CTA
   ========================================================================== */

.nav__cta {
    height: 40px;

    padding: 0 var(--space-4);

    font-size: var(--font-size-sm);
    line-height: 1;

    flex-shrink: 0;
}


/* ==========================================================================
   Mobile menu toggle
   Hidden on desktop
   ========================================================================== */

.nav__toggle {
    display: none;

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

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    border-radius: var(--radius-md);
}


.nav__toggle:hover {
    background-color: var(--color-surface-alt);
}


.nav__toggle-icon {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);

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


.nav__overlay {
    display: none;
}

/* ==========================================================================
   Search — compact version
   ========================================================================== */

.nav-search {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-search__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;
    padding: 0;

    flex-shrink: 0;

    color: var(--nav-link-text);
    background-color: transparent;
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--radius-md);

    transition:
            color 0.15s ease,
            background-color 0.15s ease,
            border-color 0.15s ease;
}

.nav-search__toggle:hover {
    color: var(--color-action-primary);
    background-color: var(--color-action-secondary-hover-bg);
    border-color: var(--color-action-secondary-border);
}

.nav-search__toggle[aria-expanded="true"] {
    color: var(--color-text-on-brand);
    background-color: var(--color-action-primary);
    border-color: var(--color-action-primary);
}

.nav-search__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}


/* Panel nhỏ gọn hơn */
.nav-search__panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;

    width: min(340px, calc(100vw - (var(--container-padding-inline) * 2)));
    padding: var(--space-2);

    background-color: var(--color-surface);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-drawer);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);

    transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            visibility 0s linear 0.2s;
}

.nav-search.is-open .nav-search__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);

    transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            visibility 0s;
}

.nav-search__form {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}


/* Input nhỏ hơn + bỏ double border */
.nav-search__input {
    flex: 1;
    min-width: 0;

    height: 36px;
    padding: 0 var(--space-3);

    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    background-color: var(--input-bg);

    border: var(--border-width-sm) solid var(--input-border);
    border-radius: var(--input-radius);

    outline: none;
    box-shadow: none;
}

.nav-search__input::placeholder {
    color: var(--color-text-muted);
}

.nav-search__input:focus,
.nav-search__input:focus-visible {
    border-color: var(--input-border-focus);
    outline: none;
    box-shadow: none;
}


/* Nút Tìm nhỏ hơn, không bị kế thừa size quá to từ .button */
.nav-search__submit {
    height: 36px;
    padding: 0 var(--space-4);

    font-size: var(--font-size-sm);
    line-height: 1;
    white-space: nowrap;
}


/* Mobile */
@media (max-width: 1023.98px) {
    .nav-search {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-search__panel {
        position: static;

        width: 100%;
        max-height: 0;

        margin-top: 0;
        padding: 0;

        overflow: hidden;

        border-width: 0;
        box-shadow: none;

        opacity: 0;
        visibility: hidden;

        transform: translateY(-8px);

        transition:
                max-height 0.25s ease,
                margin-top 0.25s ease,
                padding 0.25s ease,
                opacity 0.2s ease,
                transform 0.25s ease,
                visibility 0s linear 0.25s;
    }

    .nav-search.is-open .nav-search__panel {
        max-height: 100px;

        margin-top: var(--space-2);
        padding: var(--space-2);

        border-width: var(--border-width-sm);

        opacity: 1;
        visibility: visible;

        transform: translateY(0);

        transition:
                max-height 0.25s ease,
                margin-top 0.25s ease,
                padding 0.25s ease,
                opacity 0.2s ease,
                transform 0.25s ease,
                visibility 0s;
    }

    .nav-search__form {
        width: 100%;
    }

    .nav__menu {
        position: fixed;
        inset-block: 0;
        right: 0;
        width: var(--nav-drawer-width);
        max-width: 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--space-8);
        padding: var(--space-20) var(--space-6) var(--space-6);
        background-color: var(--nav-drawer-bg);
        box-shadow: var(--nav-drawer-shadow);
        transform: translateX(100%);
        transition: transform 0.2s ease;
        overflow-y: auto;
        z-index: var(--z-drawer);
    }

    .nav__toggle {
        display: inline-flex;
    }
}

@media (max-width: 480px) {
    .nav-search__form {
        flex-direction: column;
    }

    .nav-search__input,
    .nav-search__submit {
        width: 100%;
    }

    .nav-search.is-open .nav-search__panel {
        max-height: 140px;
    }
}
/* ==========================================================================
   No-JS fallback
   ========================================================================== */

.nav__toggle:not([data-enhanced]) {
    display: none;
}


@media (max-width: 1023.98px) {

    .nav:not([data-js-ready]) .nav__menu {
        position: static;

        width: auto;

        padding: var(--space-4) 0 0;

        box-shadow: none;

        transform: none;
    }


    .nav:not([data-js-ready]) .nav__list {
        gap: var(--space-1);
    }
}