/* mevlog.rs docs theme overlay
   1. Retint Ayu's blue accent to the mevlog brand orange (navy bg kept as-is).
   2. Style the injected app top-nav (self-contained — app CSS is not loaded here).
   3. Offset mdbook's fixed sidebar + sticky menu-bar below the nav. */

/* ---- 1. Accent harmonization (keep Ayu navy background) ---- */
html.ayu,
:root {
    --links: #f5ae2e;            /* was Ayu blue #0096cf */
    --sidebar-active: #f5ae2e;   /* brand orange */
    --inline-code-color: #f5ae2e;
}

/* ---- 2. Top nav — pixel-matched to the app's .sticky-nav (styles.css) ---- */
:root {
    --mevlog-nav-h: 86px;                  /* app bar height: 60px logo + 10px/10px pad + border */
    --mevlog-nav-bg: hsl(210, 25%, 8%);    /* app --background (navy) */
    --mevlog-nav-border: #675f54;          /* app --bright-black */
}

.mevlog-topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mevlog-nav-h);
    z-index: 1100;               /* above the fixed sidebar + sticky menu-bar */
    background: var(--mevlog-nav-bg);
    border-bottom: 1px solid var(--mevlog-nav-border);
    box-sizing: border-box;
}

.mevlog-topnav-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 20px;             /* match app body's 20px horizontal inset */
    overflow-x: auto;            /* don't wrap on narrow viewports — scroll instead */
}

.mevlog-logo-link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 15px;          /* app .sticky-nav-logo margin-right */
}

.mevlog-logo {
    height: 60px;                /* app .sticky-nav-logo height */
    width: auto;
    transform: translateY(4px);  /* app .sticky-nav-logo */
    transition: opacity 0.2s ease;
}

.mevlog-logo-link:hover .mevlog-logo {
    opacity: 0.8;
}

/* Matches the app's .btn.btn-ghost (terminal.css): 1em / .65em 2em padding */
.mevlog-btn {
    flex: 0 0 auto;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;            /* app --global-font-size */
    font-weight: 700;
    line-height: 1.4;
    padding: 0.65em 2em;
    border: 1px solid var(--foreground, #c5c5c5);
    border-radius: 0;
    color: var(--foreground, #c5c5c5);
    background: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Per-route accent colors, matching the app menu (Explore=green, Search=yellow) */
.mevlog-btn[data-route="explore"] { border-color: #84f088; color: #84f088; }
.mevlog-btn[data-route="explore"]:hover { background: #84f088; color: var(--mevlog-nav-bg); }

.mevlog-btn[data-route="search"]  { border-color: #f5ae2e; color: #f5ae2e; }
.mevlog-btn[data-route="search"]:hover { background: #f5ae2e; color: var(--mevlog-nav-bg); }

/* Docs button: ghost gray, identical to the app (no per-route color there) */
.mevlog-btn[data-route="docs"]:hover { border-color: #727578; color: #727578; }

.mevlog-stars {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.mevlog-stars img {
    height: 20px;
    width: auto;
}

/* ---- 3. Push mdbook's chrome below the fixed nav ---- */
.sidebar {
    top: var(--mevlog-nav-h) !important;
}

#mdbook-menu-bar.sticky,
#mdbook-menu-bar-hover-placeholder:hover + #mdbook-menu-bar,
#mdbook-menu-bar:hover,
html.sidebar-visible #mdbook-menu-bar {
    top: var(--mevlog-nav-h) !important;
}

#mdbook-body-container {
    padding-top: var(--mevlog-nav-h);
}

/* Keep in-page anchor jumps clear of both bars */
html {
    scroll-padding-top: calc(var(--mevlog-nav-h) + var(--menu-bar-height, 50px));
}