/* Immersify – Site header
   Sticky, translucent black, a violet hairline under it. The links show from
   992px; below that the toggle opens a full-screen menu. */

.site-header {
    position:        sticky;
    top:             0;
    z-index:         50;
    border-bottom:   1px solid var(--color-violet-18);
    background:      rgb(0 0 0 / 92%);
    backdrop-filter: blur(12px);
}

.site-header__bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-lg);
    height:          var(--header-height);
    padding-inline:  var(--gutter);
}

.site-header__logo {
    position:    relative;
    z-index:     2;
    display:     flex;
    align-items: center;
    gap:         10px;
    flex:        none;
}

.site-header__wordmark {
    font:           var(--text-16ob);
    letter-spacing: 0.08em;
}

.site-header__links {
    display: none;
    gap:     28px;

    a {
        font:           var(--text-13or);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color:          var(--color-grey);

        &:hover,
        &:focus-visible,
        &[aria-current] {
            color:       var(--color-cyan);
            text-shadow: 0 0 10px rgb(0 191 255 / 60%);
        }
    }

    @media (min-width: 992px) {
        display: flex;
    }
}

.site-header__actions {
    position:    relative;
    z-index:     2;
    display:     flex;
    align-items: center;
    gap:         var(--space-md);
}

.site-header__hire {
    @media (max-width: 575px) {
        display: none;
    }
}

/* Hamburger → cross */
.site-header__toggle {
    position: relative;
    width:    30px;
    height:   22px;

    i {
        position:   absolute;
        left:       0;
        width:      100%;
        height:     3px;
        background: var(--color-snow);
        transition: transform var(--transition-base), opacity var(--transition-base), top var(--transition-base);

        &:nth-of-type(1) { top: 0; }
        &:nth-of-type(2) { top: 9.5px; }
        &:nth-of-type(3) { top: 19px; }
    }

    &[aria-expanded="true"] i {
        &:nth-of-type(1) { top: 9.5px; transform: rotate(45deg); }
        &:nth-of-type(2) { opacity: 0; }
        &:nth-of-type(3) { top: 9.5px; transform: rotate(-45deg); }
    }

    @media (min-width: 992px) {
        display: none;
    }
}

/* Full-screen mobile menu – a sibling of the header, layered just under it so
   the header (and its close button) stays on top */
.mobile-menu {
    position:       fixed;
    inset:          0;
    z-index:        49;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-lg);
    padding:        calc(var(--header-height) + var(--space-xl)) var(--gutter) var(--space-xl);
    overflow-y:     auto;
    background:     var(--color-black);

    &[hidden] {
        display: none;
    }
}

.mobile-menu__links {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-md);

    a {
        display:        flex;
        align-items:    baseline;
        gap:            var(--space-md);
        font:           var(--text-34ok);
        text-transform: uppercase;
        color:          var(--color-snow);

        &:hover,
        &:focus-visible {
            color:       var(--color-cyan);
            text-shadow: 0 0 14px rgb(0 191 255 / 55%);
        }
    }
}

.mobile-menu__number {
    font:  var(--text-10pr);
    color: var(--color-violet);
}

.has-mobile-menu {
    overflow: hidden;
}