/* Shared site navigation (home + features pages).
   Authoritative nav styling: base bar for desktop plus a hamburger that
   collapses the links and actions into a dropdown on mobile. Loaded after
   journey.css on the home page (so it wins) and as the only nav stylesheet on
   the features page. Relies on the palette CSS variables both pages define. */

.jnav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 243, 231, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(34, 51, 92, 0.08);
}
.jnav-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 14px 24px;
}

/* Wordmark */
.jwordmark { display: inline-flex; align-items: center; gap: 6px; text-decoration: none !important; }
.jwordmark-icon { width: 32px; height: 32px; flex-shrink: 0; }
.jwordmark-text {
    font-family: var(--font-display); font-weight: 700; font-size: 22px;
    color: var(--ink); letter-spacing: -0.01em; white-space: nowrap;
}
.jwordmark-text em { font-style: normal; color: var(--coral); }

/* Links */
.jnav-links { display: flex; gap: 22px; flex-grow: 1; justify-content: center; }
.jnav-links a {
    color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15.5px;
    padding: 4px 2px; border-bottom: 2px solid transparent; transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.jnav-links a:hover { border-bottom-color: var(--coral); }

/* Right-side actions */
.jnav-right { display: flex; align-items: center; gap: 16px; }
.jnav-lang { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.jnav-lang-select {
    border: 1px solid rgba(34, 51, 92, 0.2); border-radius: 999px; background: var(--paper);
    color: var(--ink); font-family: var(--font-body); font-size: 13.5px; padding: 4px 10px; max-width: 120px;
}
.jnav-signin { color: var(--teal-deep); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.jnav-signin:hover { color: var(--coral); }
.jnav-cta-form { margin: 0; }
.jnav-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-body); font-weight: 600; font-size: 14px; white-space: nowrap;
    border: 2px solid transparent; border-radius: 999px; padding: 8px 18px; cursor: pointer;
    background-color: var(--coral); color: #fff !important; text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(232, 96, 76, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.jnav-cta:hover { background-color: var(--coral-dark); transform: translateY(-1px); }

/* Hamburger button (hidden on desktop) */
.jnav-burger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 40px; padding: 0 10px; margin-left: auto;
    background: transparent; border: 0; cursor: pointer; border-radius: 10px;
}
.jnav-burger span { display: block; height: 2px; width: 22px; background: var(--ink); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
.jnav.open .jnav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.jnav.open .jnav-burger span:nth-child(2) { opacity: 0; }
.jnav.open .jnav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Collapse wrapper: transparent on desktop so links + actions sit in the bar */
.jnav-collapse { display: contents; }

@media (max-width: 900px) {
    .jnav-inner { justify-content: space-between; gap: 12px; }
    .jnav-burger { display: flex; }

    .jnav-collapse {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 6px;
        padding: 12px 20px 20px;
        background: var(--cream); border-bottom: 1px solid rgba(34, 51, 92, 0.10);
        box-shadow: 0 18px 40px rgba(34, 51, 92, 0.14);
    }
    .jnav.open .jnav-collapse { display: flex; }

    .jnav-links { flex-direction: column; gap: 0; }
    .jnav-links a {
        padding: 13px 4px; font-size: 17px; border-bottom: 1px solid rgba(34, 51, 92, 0.08);
    }
    .jnav-links a:hover { border-bottom-color: rgba(34, 51, 92, 0.08); color: var(--coral); }

    .jnav-right {
        flex-direction: column; align-items: stretch; gap: 14px; margin-top: 16px;
    }
    .jnav-lang { justify-content: space-between; }
    .jnav-lang-select { max-width: none; flex-grow: 1; padding: 8px 12px; font-size: 15px; }
    .jnav-signin { padding: 4px 0; font-size: 16px; }
    .jnav-cta-form { width: 100%; }
    .jnav-cta { width: 100%; padding: 12px 18px; font-size: 15px; }
}