/* Navbar: computer (768px and up) */

.navbar {
    --navbar-bg: #fffdf8;
    --navbar-text: #3a2e26;
    --navbar-muted: #75685e;
    --navbar-accent: #9a3412;
    --navbar-accent-dark: #7c2a0e;
    --navbar-tint: #f6eee6;
    --navbar-hover: #f7f2eb;
    --navbar-line: #efe9df;

    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    padding: 0 40px;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--navbar-bg);
    border-bottom: 1px solid var(--navbar-line);
    box-shadow: 0 2px 14px rgba(58, 46, 38, 0.04);
}

/* Valley picture: softened to a light creamy white (less yellow).
   Cream fades on the left (logo) and right (links) keep text easy to read */
.navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(255, 253, 248, 0.7) 0%,
            rgba(255, 253, 248, 0.15) 24%,
            rgba(255, 253, 248, 0.15) 36%,
            rgba(255, 253, 248, 0.88) 50%,
            rgba(255, 253, 248, 0.94) 100%),
        url("../../img/navbar-bg.jpg") center 72% / cover no-repeat;
    filter: saturate(0.6) brightness(1.06);
    pointer-events: none;
}

/* Keep logo and links above the picture */
.navbar > * {
    position: relative;
    z-index: 1;
}

/* Logo: leaf badge + name */
.navbar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.navbar-logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--navbar-accent);
    background: var(--navbar-tint);
    border-radius: 50%;
}

.navbar-logo-icon {
    width: 18px;
    height: 18px;
}

.navbar-logo-text {
    letter-spacing: -0.02em;
    font-size: 20px;
    font-weight: 800;
    color: var(--navbar-text);
    white-space: nowrap;
}

/* Links + Book Now */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 14px;
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each link: icon + text in a soft pill */
.navbar-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    color: var(--navbar-muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.navbar-link:hover {
    color: var(--navbar-text);
    background: var(--navbar-hover);
}

/* Current page: tinted pill in the accent colour */
.navbar-link.is-active {
    color: var(--navbar-accent);
    background: var(--navbar-tint);
}

.navbar-icon {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}

/* Book Now: main button */
.navbar-book {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 17px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    background: var(--navbar-accent);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(154, 52, 18, 0.28);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.navbar-book:hover {
    background: var(--navbar-accent-dark);
    box-shadow: 0 6px 18px rgba(154, 52, 18, 0.35);
    transform: translateY(-1px);
}

/* Keyboard focus ring */
.navbar a:focus-visible {
    outline: 3px solid var(--navbar-accent);
    outline-offset: 3px;
}

/* Opening animation (first visit in a session)
   1. Logo slides in smoothly from the left
   2. Menu options fade in one after another */
@keyframes navbar-slide-in {
    from {
        opacity: 0;
        transform: translateX(-90px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes navbar-fade-in {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.navbar-logo {
    animation: navbar-slide-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.navbar-links li,
.navbar-book,
.navbar-login {
    animation: navbar-fade-in 1.1s ease-out backwards;
}

.navbar-links li:nth-child(1) { animation-delay: 0.8s; }
.navbar-links li:nth-child(2) { animation-delay: 1.05s; }
.navbar-links li:nth-child(3) { animation-delay: 1.3s; }
.navbar-links li:nth-child(4) { animation-delay: 1.55s; }
.navbar-links li:nth-child(5) { animation-delay: 1.8s; }
.navbar-book                  { animation-delay: 2.05s; }
.navbar-login                 { animation-delay: 2.25s; }

/* Already seen this session: no animation when moving between pages */
.menu-no-intro .navbar-logo,
.menu-no-intro .navbar-links li,
.menu-no-intro .navbar-book,
.menu-no-intro .navbar-login {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .navbar-link,
    .navbar-book {
        transition: none;
    }

    .navbar-book:hover {
        transform: none;
    }

    .navbar-logo,
    .navbar-links li,
    .navbar-book {
        animation: none;
    }
}

/* Small star-flower between "Ba Kuti" and "Aama Kuti" */
.navbar-logo-sep {
    display: inline-flex;
    align-items: center;
    margin: 0 3px;
    color: var(--navbar-accent);
    vertical-align: middle;
    transform: translateY(-2px);
}

.navbar-logo-sep-icon {
    width: 11px;
    height: 11px;
    fill: currentColor;
    stroke: none;
}

/* Login: soft outline button at the end */
.navbar-login {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    color: var(--navbar-text);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px solid #e2d8ca;
    border-radius: 999px;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.navbar-login:hover,
.navbar-login.is-active {
    color: var(--navbar-accent);
    border-color: var(--navbar-accent);
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .navbar-login {
        animation: none;
        transition: none;
    }
}