/* WANDR global app header (see head.php).
 *
 * Desktop: a fixed top bar with centred, app-style tabs, plus the For You
 * sidebar docked below it on the left (utl/foryou.css).
 *
 * Mobile (<=768px): this bar relocates to the BOTTOM of the screen (tabs
 * only — its own logo hides below), and a separate, slimmer .wandr-topbar
 * takes its place at the top (hamburger -> For You popup, centred logo,
 * space reserved for the profile FAB). --wandr-nav-h always means "the
 * current top bar's height" at whatever breakpoint is active, so every
 * existing top-offset rule below keeps working unchanged; --wandr-nav-bottom-h
 * is the new mobile bottom bar's height, added only where needed.
 *
 * Both bars only render on wandr app pages (allow-listed in head.php) — never
 * on public site pages. The vars fall back to 0px so nothing shifts on pages
 * without this chrome. */

body { box-sizing: border-box; padding-left: var(--wandr-sidebar-w, 0px); transition: padding-left .22s ease; }

.wandr-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--wandr-nav-h, 60px);
    z-index: 150;                         /* above content, below modals (200) */
    background:
        linear-gradient(135deg, rgba(99,102,241,.22), rgba(139,92,246,.16) 52%, rgba(20,161,154,.20)),
        rgba(17, 16, 26, .90);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid rgba(139, 92, 246, .24);
    box-shadow: 0 2px 20px rgba(99, 102, 241, .16);
    box-sizing: border-box;
    transition: none;
}
@media (max-width: 768px) {
    .wandr-nav {
        top: auto; bottom: 0;
        height: var(--wandr-nav-bottom-h, 60px);
        border-bottom: none;
        border-top: 1px solid rgba(139, 92, 246, .24);
        box-shadow: 0 -2px 20px rgba(99, 102, 241, .16);
    }
}

/* ── Mobile-only top bar ── */
.wandr-topbar { display: none; }
@media (max-width: 768px) {
    .wandr-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: var(--wandr-nav-h, 56px);
        z-index: 150;
        padding: 0 12px;
        background:
            linear-gradient(135deg, rgba(99,102,241,.22), rgba(139,92,246,.16) 52%, rgba(20,161,154,.20)),
            rgba(17, 16, 26, .90);
        backdrop-filter: blur(18px) saturate(150%);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        border-bottom: 1px solid rgba(139, 92, 246, .24);
        box-shadow: 0 2px 20px rgba(99, 102, 241, .16);
        box-sizing: border-box;
    }
}
.wtb-menu-btn {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: none; border: none;
    color: rgba(226, 228, 248, .85);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.wtb-menu-btn:hover { color: #fff; background: rgba(139, 92, 246, .16); }
.wtb-menu-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.wtb-menu-btn img { width: 22px; height: 22px; object-fit: contain; display: block; }
.wtb-menu-btn--spacer { pointer-events: none; }
.wtb-logo-link { flex: 0 0 auto; display: flex; align-items: center; }
.wtb-logo { display: block; height: 22px; width: auto; }
/* Reserves the same width as the menu button so the logo stays visually
   centred; the real profile FAB (mainstyle.css, fixed, z-index 950) floats
   independently at top-right and already lines up with this bar's height. */
.wtb-profile-slot { flex: 0 0 auto; width: 40px; height: 40px; }
/* Three tracks so the tab group stays truly centred in the bar regardless of
   the logo's width — the logo lives in the left track, the tabs in the middle
   one, and the (empty) right track is what balances the centering. */
.wandr-nav-inner {
    height: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 4px 18px;
    box-sizing: border-box;
}
.wnav-left {
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.wnav-logo-link {
    display: flex;
    align-items: center;
    min-width: 0;
    opacity: .92;
    transition: opacity .15s ease;
}
.wnav-logo-link:hover { opacity: 1; }
.wnav-logo {
    display: block;
    height: 24px;
    width: auto;
}
.wnav-tabs {
    grid-column: 2;
    display: flex;
    align-items: stretch;
    gap: 6px;
}
/* Narrow viewports: the tab row alone is ~365px wide, so the logo is dropped
   rather than risk colliding with the tabs or squeezing them off-centre. */
@media (max-width: 767px) {
    .wnav-left { display: none; }
    .wandr-nav-inner { grid-template-columns: 1fr; }
    .wnav-tabs { grid-column: 1; justify-content: center; }
}

.wnav-tab {
    flex: 0 0 auto;
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: rgba(226, 228, 248, .66);
    border-radius: 12px;
    transition: color .15s ease, background .15s ease;
    /* New Post is a <button>, not an <a> like the rest of the tabs - strip the
       browser's button chrome so it matches them exactly. */
    background: none;
    border: none;
    font: inherit;
    padding: 0;
    cursor: pointer;
}
/* It's an action, not a destination, so it never gets the .active treatment -
   give it its own always-on accent instead, so it doesn't read as a dead tab. */
.wnav-tab--action .wnav-ico {
    background: linear-gradient(135deg, rgba(109,111,246,.28), rgba(155,118,248,.22));
}
.wnav-tab--action:hover .wnav-ico {
    background: linear-gradient(135deg, #6d6ff6, #9b76f8 55%, #b57bf0);
    box-shadow: 0 4px 16px rgba(124, 92, 246, .5);
    color: #fff;
}
.wnav-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 34px;
    border-radius: 11px;                  /* almost-square app-style icon tile */
    transition: background .15s ease, box-shadow .15s ease;
}
.wnav-ico svg {
    width: 21px; height: 21px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.wnav-lbl { font-size: 10px; font-weight: 600; letter-spacing: .2px; }

.wnav-tab:hover { color: #fff; }
.wnav-tab:hover .wnav-ico { background: rgba(139, 92, 246, .16); }

/* Selected effect */
.wnav-tab.active { color: #fff; }
.wnav-tab.active .wnav-ico {
    background: linear-gradient(135deg, #6d6ff6, #9b76f8 55%, #b57bf0);
    box-shadow: 0 4px 16px rgba(124, 92, 246, .5);
    color: #fff;
}

/* ── Reserve space for the header on each app page ──
   `body .x` beats the single-class originals regardless of stylesheet order.
   Vars fall back to 0px, so pages that don't show this chrome are untouched.
   The `- var(--wandr-nav-bottom-h,0px)` term only ever subtracts something on
   mobile, where the relocated tab bar needs its own space reserved too. */
body .dash-layout       { margin-top: var(--wandr-nav-h, 0px); height: calc(100vh - var(--wandr-nav-h, 0px) - var(--wandr-nav-bottom-h, 0px)); }
body .studio-page       { margin-top: var(--wandr-nav-h, 0px); height: calc(100vh - var(--wandr-nav-h, 0px) - var(--wandr-nav-bottom-h, 0px)); }
body .profile-page-wrap { margin-top: var(--wandr-nav-h, 0px); min-height: calc(100vh - var(--wandr-nav-h, 0px)); padding-bottom: var(--wandr-nav-bottom-h, 0px); box-sizing: border-box; }
body .pe-page            { margin-top: var(--wandr-nav-h, 0px); min-height: calc(100vh - var(--wandr-nav-h, 0px)); padding-bottom: var(--wandr-nav-bottom-h, 0px); box-sizing: border-box; }
body .la-page            { margin-top: var(--wandr-nav-h, 0px); min-height: calc(100vh - var(--wandr-nav-h, 0px)); padding-bottom: var(--wandr-nav-bottom-h, 0px); box-sizing: border-box; }
body .cl-page            { margin-top: var(--wandr-nav-h, 0px); padding-bottom: var(--wandr-nav-bottom-h, 0px); box-sizing: border-box; }

/* Builder is full-height with fixed side panels — push everything below the
   bar. It has no For You sidebar (head.php excludes it), so --wandr-sidebar-w
   is always 0px here regardless of breakpoint. */
body.builder-body { padding-top: var(--wandr-nav-h, 0px); padding-bottom: var(--wandr-nav-bottom-h, 0px); box-sizing: border-box; }
.builder-body buildercontent.toolbox,
.builder-body buildercontent.properties {
    top: calc(var(--wandr-nav-h, 0px) + 10px);
    height: calc(100vh - var(--wandr-nav-h, 0px) - var(--wandr-nav-bottom-h, 0px) - 20px);
}

/* ── Placeholder pages (Explore / Sites / Messages) ── */
.app-placeholder {
    margin-top: var(--wandr-nav-h, 0px);
    min-height: calc(100vh - var(--wandr-nav-h, 0px));
    padding-bottom: var(--wandr-nav-bottom-h, 0px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding-left: 20px; padding-right: 20px; padding-top: 40px;
    box-sizing: border-box;
}
.app-placeholder-inner { max-width: 420px; }
.app-placeholder-inner .aph-icon {
    width: 60px; height: 60px;
    margin: 0 auto 16px;
    color: #8b5cf6;
    display: flex; align-items: center; justify-content: center;
    border-radius: 18px;
    background: rgba(139, 92, 246, .14);
    border: 1px solid rgba(139, 92, 246, .3);
}
.app-placeholder-inner .aph-icon svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-placeholder-inner h1 { font-size: 1.7rem; margin: 0 0 8px; }
.app-placeholder-inner p { opacity: .55; margin: 0; line-height: 1.5; }