/* ==========================================================
   Smart Use shared navbar
   Same design as the index.html navbar (style.css + i18n.css),
   for the pages that do not load Bootstrap:
   gawi.html, EngineeringVR.html, profile.html.
   State classes come from each page's own script:
   .scrolled / .is-solid, .open / body.menu-open, .active / .is-active
   ========================================================== */
.su-navbar {
    --su-navbar-accent: #8c6fa6;
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    max-height: 80px;
    padding: 0 3rem;
    background: rgba(5, 9, 24, .24);
    border-bottom: 1px solid rgba(134, 226, 255, .12);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

    .su-navbar.scrolled,
    .su-navbar.is-solid {
        background: rgba(6, 10, 26, .86);
        box-shadow: 0 18px 50px rgba(0, 0, 0, .34), 0 0 0 1px rgba(134, 226, 255, .14) inset;
    }

/* profile.html: its header sat in the page flow, keep the same 80px reserved */
.su-navbar + main {
    padding-top: 80px;
}

/* ---------- Brand ---------- */
.su-navbar__brand {
    display: block;
    flex-shrink: 0;
    margin-right: 1rem;
}

    .su-navbar__brand img {
        display: block;
        height: 60px;
        width: auto;
        max-width: none;
        filter: drop-shadow(0 0 14px rgba(0, 229, 255, .42));
    }

/* ---------- Links ---------- */
.su-navbar__links {
    display: flex;
    margin-left: auto;
}

html[dir="rtl"] .su-navbar__links {
    margin-left: 0;
    margin-right: auto;
}

.su-navbar__links a {
    position: relative;
    display: block;
    margin-left: 25px;
    padding: 35px .15rem;
    color: rgba(235, 245, 255, .82);
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    transition: .5s;
}

.su-navbar.scrolled .su-navbar__links a,
.su-navbar.is-solid .su-navbar__links a {
    color: rgba(235, 245, 255, .86);
}

.su-navbar .su-navbar__links a:hover,
.su-navbar .su-navbar__links a.active,
.su-navbar .su-navbar__links a.is-active {
    color: var(--su-navbar-accent) !important;
    text-shadow: 0 0 16px rgba(0, 229, 255, .55);
}

/* ---------- Language button ---------- */
.su-navbar__lang {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    margin-inline-start: 1rem;
    padding: .4rem 1rem;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

    .su-navbar__lang:hover,
    .su-navbar__lang:focus-visible {
        background: rgba(255, 255, 255, .15);
        border-color: #fff;
        outline: none;
    }

html[dir="rtl"] .su-navbar__lang {
    font-family: 'Cairo', 'Nunito', 'Rubik', sans-serif;
}

/* ---------- Mobile menu button ---------- */
.su-navbar__toggle {
    display: none;
    padding: .25rem .75rem;
    background: transparent;
    color: var(--su-navbar-accent);
    border: 1px solid var(--su-navbar-accent);
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(0, 229, 255, .18);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Desktop ---------- */
@media (min-width: 992px) {
    .su-navbar.scrolled .su-navbar__links a,
    .su-navbar.is-solid .su-navbar__links a {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .su-navbar__links a::before {
        content: "";
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -1px;
        left: 50%;
        background: var(--su-navbar-accent);
        transition: .5s;
    }

    .su-navbar__links a:hover::before {
        width: 100%;
        left: 0;
    }
}

/* gawi.html has 8 links: tighten them on small laptops so the language button stays on screen */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .su-navbar--compact {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

        .su-navbar--compact .su-navbar__links a {
            margin-left: 14px;
            font-size: 16px;
        }
}

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
    .su-navbar {
        padding: 16px 3rem 3px;
        background: rgba(6, 10, 26, .92);
    }

    .su-navbar__lang {
        order: 1;
        margin-inline-start: auto;
        margin-inline-end: .75rem;
    }

    .su-navbar__toggle {
        display: block;
        order: 2;
    }

    .su-navbar__links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        padding: 0 3rem .75rem;
        background: rgba(6, 10, 26, .96);
        border-bottom: 1px solid rgba(134, 226, 255, .12);
    }

        .su-navbar__links.open,
        .su-navbar.open .su-navbar__links,
        body.menu-open .su-navbar__links {
            display: flex;
        }

        .su-navbar__links a {
            margin-left: 0;
            padding: 12px 0;
        }
}

@media (max-width: 576px) {
    .su-navbar {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .su-navbar__links {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ==========================================================
   Bootstrap pages (about, service, blog, ...)
   style.css already gives them the design; this only sets the
   same bar height index.html has.
   ========================================================== */
@media (min-width: 992px) {
    .navbar.navbar-dark {
        max-height: 80px;
    }
}

@media (max-width: 991.98px) {
    .navbar.navbar-dark {
        padding-top: 16px !important;
        padding-bottom: 3px !important;
    }
}