// resources/scss/layouts/_header.scss
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: $bg-white;
    box-shadow: $shadow-sm;
    z-index: 1000;

    .header-container {
        max-width: $container-max-width;
        margin: 0 auto;
        padding: 0 1rem;

        .header-content {
            @include flex-between;
            padding: 1rem 0;

            .logo {
                img {
                    height: 3rem;
                    width: auto;
                }
            }

            .desktop-nav {
                @include flex-between;
                gap: 2rem;

                @include respond-to(lg) {
                    display: flex;
                }

                display: none;
            }

            .mobile-menu-button {
                @include respond-to(lg) {
                    display: none;
                }

                display: flex;
                flex-direction: column;
                padding: 0.5rem;
                cursor: pointer;

                .bar {
                    width: 1.5rem;
                    height: 2px;
                    background-color: $text-dark;
                    margin: 2px 0;
                    transition: all 0.3s ease;
                }

                &.active {
                    .bar:nth-child(1) {
                        transform: rotate(45deg) translate(5px, 5px);
                    }

                    .bar:nth-child(2) {
                        opacity: 0;
                    }

                    .bar:nth-child(3) {
                        transform: rotate(-45deg) translate(7px, -6px);
                    }
                }
            }
        }

        .mobile-nav {
            @include respond-to(lg) {
                display: none;
            }

            display: none;
            padding: 1rem 0;
            border-top: 1px solid $bg-gray;

            &.active {
                display: block;
            }
        }
    }
}