/* ════════════════════════════════════════════════════════════════════
   KHIO MARKETING TOP BAR — the site-wide header, in plain CSS.
   Loaded by recipes.html (/add-ons), recipe.html (/add-ons/:slug) and
   connections.html (/connections). James 2026-07-31.

   Those three are the marketing pages that are ALSO in-app destinations, so
   they were built standalone and each grew its own compact bar — brand, one
   text link, one dark pill, inside a 1120px column. On desktop they were the
   only pages on khio.ai whose top did not match landing.html / feature.html /
   study-landing.html, which James spotted side by side.

   ⚠ DESKTOP ONLY, DELIBERATELY (≥769px). Below that these three pages have a
   dedicated iOS-style header — compact brand row under the status bar, 44px
   hit targets, its own dark treatment — built 2026-07-30 in each page's
   `@media (max-width: 768px)` block. That is the app's phone chrome, not a
   marketing bar, and it stays. So each page carries BOTH tops and shows one:
   the page's own below 769px, this one above. Don't "simplify" that into one
   bar without reading those mobile blocks first.

   On the big pages the canonical bar is Tailwind utility classes plus an
   inline <style> block. This file is that same bar rewritten in plain CSS,
   because these three do not load /css/shared/tw-marketing.css and must not:
   it ships Tailwind preflight, which would reset their bespoke cream design
   out from under them. Every value here is the compiled one from
   tw-marketing.css (px-6 = 1.5rem, py-5 = 1.25rem, text-lg = 1.125rem/1.75rem
   …) so the two render identically — verified by measuring both.

   The .khio-navx / .nx-* block is copied verbatim from feature.html, markup
   included, so a nav item added there can be pasted into these three
   unchanged. The one deliberate difference: feature.html needs `!important`
   to hide the dropdowns below 768px because Tailwind's `hidden md:flex` is
   fighting it. There is no Tailwind here, so it doesn't.

   Because the bar never renders in-app (hidden when shelled, hidden on
   phones) it needs no dark-theme block — the pages' dark rules never have it
   to paint.
   ════════════════════════════════════════════════════════════════════ */

/* ── Bar ──────────────────────────────────────────────────────────── */
/* Full-bleed, not the pages' centred 1120px column: the wordmark sits at the
   far left on every other page. */
.mnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.5rem 2.5rem 1.5rem 145px;   /* md:py-6 md:px-10 lg:pl-[145px] */
    background: transparent;
}
/* Below the lg breakpoint the brand comes back to the normal page gutter. */
@media (max-width: 1023px) {
    .mnav { padding-left: 2.5rem; }
}
/* Phones keep the page's own header — see the note at the top of this file. */
@media (max-width: 768px) {
    .mnav { display: none; }
}
/* In-app the Life rail carries the brand and the nav, so this is duplication.
   Each page hides its own bar the same way; life-shell.css hands that one back
   below 1024px, which is why this stays hidden at every width. */
html.khio-shelled .mnav { display: none; }

/* ── Brand ────────────────────────────────────────────────────────── */
.mnav-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; white-space: nowrap; }
/* flex:none so the logo can never be squeezed by a crowded bar. Without it the
   brand shrinks and the nowrap wordmark spills out of its own box — which is
   exactly what the Tailwind version of this bar does at ~769-840px, where
   Tailwind preflight's `img { max-width: 100% }` lets the logo give way and
   "Khio AI" ends up printed over the Khio AI dropdown. */
.mnav-brand img { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 0.5rem; object-fit: contain; }
.mnav-brand span { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 2rem; letter-spacing: -0.012em; color: #0f172a; line-height: 1; }

/* ── Dropdown nav (verbatim from feature.html) ────────────────────── */
.khio-navx { display: flex; align-items: center; gap: 30px; }
.khio-navx > a, .khio-navx .nx-trigger { font-family: 'Epilogue','Plus Jakarta Sans',sans-serif; font-weight: 700; font-size: 1.05rem; color: #4a4540; letter-spacing: -0.01em; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: color 0.18s; white-space: nowrap; }
.khio-navx > a:hover, .khio-navx .nx-dd:hover .nx-trigger { color: #1a1a1a; }
.khio-navx .nx-dd { position: relative; }
.khio-navx .nx-chev { width: 13px; height: 13px; transition: transform 0.22s ease; opacity: 0.55; }
.khio-navx .nx-dd:hover .nx-chev { transform: rotate(180deg); }
.khio-navx .nx-panel { position: absolute; top: 100%; left: 50%; margin-top: 12px; min-width: 250px; background: #ffffff; border: 1px solid rgba(28,25,23,0.07); border-radius: 16px; box-shadow: 0 16px 44px -14px rgba(28,25,23,0.24); padding: 8px; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 60; }
.khio-navx .nx-dd:hover .nx-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* Bridges the 12px gap so the panel survives the trip from trigger to panel. */
.khio-navx .nx-panel::before { content: ''; position: absolute; bottom: 100%; left: 0; right: 0; height: 16px; }
.khio-navx .nx-item { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 11px; text-decoration: none; transition: background 0.14s; }
.khio-navx .nx-item:hover { background: #f5f2ed; }
.khio-navx .nx-ico { flex: none; width: 22px; color: #3a352f; display: flex; align-items: center; justify-content: center; }
.khio-navx .nx-ico .material-symbols-outlined { font-size: 21px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.khio-navx .nx-tt { display: flex; flex-direction: column; gap: 1px; }
.khio-navx .nx-tt b { font-family: 'Epilogue','Plus Jakarta Sans',sans-serif; font-size: 0.93rem; font-weight: 700; color: #1f1b16; line-height: 1.25; }
.khio-navx .nx-tt span { font-size: 0.8rem; color: #8b857b; line-height: 1.3; }
/* Brand (168) + dropdowns (336) + Login and the pill (259) + the 80px gutters
   need 843px, so below 900 the dropdowns go and the bar is brand + actions —
   the same shape the big pages fall back to on a phone. Measured, not guessed:
   at 769px the full row overflowed the viewport by 36px and put a horizontal
   scrollbar on the whole page. (The Tailwind original fails differently at that
   width — see the .mnav-brand img note above.) */
@media (max-width: 899px) {
    .khio-navx { display: none; }
}

/* ── Login + Get Started ──────────────────────────────────────────── */
.mnav-actions { display: flex; align-items: center; gap: 0.75rem; }
.mnav-login {
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: rgb(84 67 60);
    text-decoration: none;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.mnav-login:hover { background-color: rgb(235 232 227); }
.mnav-cta {
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: #ffffff;
    text-decoration: none;
    padding: 0.625rem 1.75rem;
    border-radius: 9999px;
    white-space: nowrap;
    background: linear-gradient(180deg, #3a3633 0%, #232120 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 3px 8px rgba(28,25,23,0.22), 0 1px 2px rgba(28,25,23,0.18);
    transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.mnav-cta:hover {
    background: linear-gradient(180deg, #46413c 0%, #2c2926 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 7px 16px rgba(28,25,23,0.26), 0 1px 2px rgba(28,25,23,0.2);
    transform: translateY(-1px);
}