/* ============================================
   Lightli.uk — Shared Stylesheet
   Navbar + base resets used on every page
   ============================================ */


/* --- Navbar --------------------------------------------- */

.nav-wrapper {
    z-index: 6;
    position: fixed;
    height: clamp(60px, 5vw, 80px);
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    transition: all .4s ease-in;
    border-bottom: 1px solid transparent;

    @media (max-width: 1050px) and (orientation: portrait) {
        display: none;
    }
    @media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
        display: none;
    }

    &.scroll-nav-opacity-toggle {
        background: #ffffff;
    }

    & a {
        font-size: clamp(12px, 0.85vw, 24px);
        font-weight: 400;
        font-family: "montserrat", sans-serif;
        text-decoration: none;
        color: #3a3a3a;
        transition: all .1s ease;

        &::before {
            display: block;
            font-weight: 900;
            content: attr(data-text);
            overflow: hidden;
            visibility: hidden;
            height: 0px;
        }
        &:hover {
            font-weight: 600;
        }
        &:active {
            font-weight: 900;
        }

        @media (max-width: 1050px) and (orientation: portrait) {
            font-size: clamp(11px, 3vw, 14px);
        }
    }

    & .left-side {
        width: 200px;
        display: flex;
        padding-left: clamp(24px, 5vw, 80px);
        align-items: center;

        & img {
            width: clamp(18px, 1.5vw, 45px);
            margin-right: 1vw;
        }

        @media (max-width: 1050px) and (orientation: portrait) {
            width: auto;
            padding-left: 0;

            & img {
                width: 22px;
                margin-right: 6px;
            }
        }
    }

    & .middle {
        display: flex;
        width: 600px;
        align-items: center;
        justify-content: space-evenly;

        & a {
            text-align: center;
        }

        @media (max-width: 1050px) and (orientation: portrait) {
            display: none;
        }
    }

    & .right-side {
        display: flex;
        padding-right: clamp(24px, 5vw, 80px);
        align-items: center;
        justify-content: flex-end;
        width: 200px;

        @media (max-width: 1050px) and (orientation: portrait) {
            width: auto;
            padding-right: 0;
            gap: clamp(12px, 4vw, 20px);
        }
    }

    & .scroll-nav-link-active {
        font-weight: 600;
    }
}