/* Shared chrome (header + footer) styles. Imported by every template via
   <link rel="stylesheet" href="{{ url_for('static', filename='css/chrome.css') }}">.
   Body reserves space at top/bottom so content scrolls under fixed bars. */

body {
    padding-top: 56px;
    padding-bottom: 44px;
}

/* Top navigation bar */
.top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    /* aiinfo/mindfulness style.css carry display:flex + padding from their
       old stripped header; those rules leak onto the shared markup and turn
       .navbar-inner into a content-width flex child, so the menu stops
       hugging the right edge. Pin the properties the shared layout relies
       on — chrome.css loads last, so explicit values always win. */
    display: block;
    padding: 0;
    z-index: 100;
    /* Default: only the 1px green line at the very top of the viewport is
       visible — the dark surface + glow + blur fade in on hover/focus so
       the canvas behind can fill the full viewport. */
    background-color: transparent;
    border-top: 1px solid #0a0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

.top-navbar:hover,
.top-navbar:focus-within {
    background-color: rgba(0, 16, 0, 0.88);
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.navbar-inner {
    height: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-brand {
    color: #0f0;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.7);
    transition: text-shadow 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.navbar-brand img.navbar-logo {
    height: 40px;
    width: auto;
    filter: drop-shadow(0 0 6px rgba(0, 255, 0, 0.6));
    transition: filter 0.2s ease;
}

.navbar-brand:hover img.navbar-logo {
    filter: drop-shadow(0 0 10px rgba(0, 255, 0, 0.95));
}

.navbar-brand:hover {
    text-shadow: 0 0 14px rgba(0, 255, 0, 1), 0 0 22px rgba(0, 255, 0, 0.5);
}

.navbar-menu {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar-menu a {
    color: #33cc33;
    text-decoration: none;
    padding: 8px 14px;
    font-size: 15px;
    border-radius: 3px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.navbar-menu a:hover {
    color: #0f0;
    border-color: #0a0;
    background-color: rgba(0, 255, 0, 0.08);
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
}

.navbar-menu a.cta {
    color: #0f0;
    border-color: #0a0;
}

.navbar-menu a.cta:hover {
    background-color: rgba(0, 255, 0, 0.18);
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.5);
}

.navbar-menu a.navbar-login {
    color: #0f0;
    background-color: rgba(0, 80, 0, 0.6);
    border-color: #0f0;
    font-weight: bold;
    margin-left: 4px;
}

.navbar-menu a.navbar-login:hover {
    background-color: rgba(0, 128, 0, 0.7);
    box-shadow: 0 0 14px rgba(0, 255, 0, 0.7);
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.8);
}

.navbar-menu .navbar-user {
    color: #88ff88;
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid #0a0;
    border-radius: 3px;
    background-color: rgba(0, 24, 0, 0.5);
    font-family: monospace;
}

/* Bottom toolbar with page-view counter */
.bottom-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 44px;
    z-index: 100;
    /* Same overlay behavior as .top-navbar — surface fades in on hover.
       The 1px green line is on the bottom edge so it sits flush with the
       very bottom of the viewport. */
    background-color: transparent;
    border-bottom: 1px solid #0a0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    font-family: Arial, sans-serif;
    font-size: 13px;
}

.bottom-toolbar:hover,
.bottom-toolbar:focus-within {
    background-color: rgba(0, 16, 0, 0.88);
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ---- Collapsed chrome (default) ---------------------------------------
   By default only the 1px green line at the top/bottom edge is visible.
   The full bar slides in on :hover (mouse near the edge) or :focus-within
   (keyboard focus inside the bar). The bar's full 56px/44px box stays in
   place — only the inner content is translated out — so the hit area stays
   generous and no layout reflow happens on reveal. */
.top-navbar { overflow: hidden; }
.bottom-toolbar { overflow: hidden; }

.top-navbar > .navbar-inner {
    transform: translateY(-100%);
    transition: transform 0.22s ease;
}
.top-navbar:hover > .navbar-inner,
.top-navbar:focus-within > .navbar-inner {
    transform: translateY(0);
}

.bottom-toolbar > .view-counter,
.bottom-toolbar > .bottom-meta {
    transform: translateY(100%);
    transition: transform 0.22s ease;
}
.bottom-toolbar:hover > .view-counter,
.bottom-toolbar:hover > .bottom-meta,
.bottom-toolbar:focus-within > .view-counter,
.bottom-toolbar:focus-within > .bottom-meta {
    transform: translateY(0);
}

.view-counter {
    color: #88ff88;
    letter-spacing: 1px;
}

.view-counter .label {
    color: #33cc33;
}

.view-counter .count {
    color: #0f0;
    font-weight: bold;
    font-family: monospace;
    margin-left: 6px;
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.6);
}

.bottom-meta {
    color: #336633;
    font-size: 12px;
}

/* On a book chapter page the book title is a link back to that book's
   index, since the page's own toolbar was removed. It sits inside an
   <h1> that already carries the page's colour and glow, so it has to
   take those over rather than pick up the browser's default link
   styling. chrome.css loads last, so this wins over the page styles. */
.book-title-link {
    color: inherit;
    text-decoration: none;
}

.book-title-link:hover {
    text-decoration: underline;
}