/* ─────────────────────────────────────────────────────────────
   NAVBAR (fixed + auto-hide on mobile)
   ──────────────────────────────────────────────────────────── */

/* Reserve space for the fixed bar so content doesn't slide under it */
:root {
    --nav-h: 64px;
    /* JS will update this to the real height */
}

/* Keep page content below the fixed bar */
body {
    padding-top: var(--nav-h);
}

.navbar {
    position: fixed;
    /* fixed to viewport */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 1rem 1.5rem;
    z-index: 10000;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
    transition: transform .22s ease-in;
    /* used for hide/reveal */
    will-change: transform;
    transform: translateY(0);
    /* baseline visible */
}

/* auto-hide only on small screens */
@media (max-width: 768px) {
    .navbar--hidden {
        transform: translateY(-100%);
    }

    .navbar--revealing {
        transition-duration: .10s;
        transition-timing-function: ease-out;
    }
}

/* brand / logo */
.nav-logo {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
}

.logo-img {
    width: 2.5rem;
    height: 2.5rem;
    vertical-align: bottom;
}

.footer-logo {
    color: #fff;
}

.nav-title {
    font-weight: 720;
    font-size: 1.2rem;
    margin-bottom: -.3rem;
    margin-left: -10px;
}

/* burger */
.nav-button {
    font: 900 2rem/1 'Prompt', sans-serif;
    background: none;
    border: none;
    cursor: pointer;
    color: #000;
}

/* logo link */
a.nav-logo:link,
a.nav-logo:visited {
    text-decoration: none;
    color: inherit;
}

a.nav-logo:hover,
a.nav-logo:focus {
    text-decoration: none;
}

/* language links */
.lang-link {
    font-weight: 700;
    text-decoration: none;
    color: #888;
}

.lang-link.current {
    color: #000;
    pointer-events: none;
}

.lang-link:not(.current):hover {
    color: var(--webpage-main-color);
}

/* desktop language switch in top bar */
.lang-switch {
    display: flex;
    gap: .75rem;
    margin-left: auto;
    margin-right: 1rem;
    align-items: center;
}

/* hide desktop switch on mobile */
@media (max-width: 768px) {
    .lang-switch {
        display: none;
    }
}

/* mobile language switch (inside slide-in menu) */
.mobile-lang {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem;
    font-weight: 700;
    justify-content: flex-start;
}

/* hide mobile switch on desktop */
@media (min-width: 768px) {
    .mobile-lang {
        display: none;
    }
}

/* responsive tweaks */
@media (min-width: 768px) {
    .logo-img {
        width: 3rem;
        height: 3rem;
    }

    .nav-title {
        font-size: 1.5rem;
    }

    .nav-button {
        font-size: 2.5rem;
    }
}

/* Anchor sections account for fixed bar height */
#what,
#demo,
#steps,
#pricing-section,
#contact,
#faq {
    scroll-margin-top: calc(var(--nav-h) + 12px);
}