/* ============================================================
   WRITERS HUB — ADVANCED HEADER / NAV ENHANCEMENTS
   Loaded after app.css + mobile-enhancements.css.
   Adds: scroll progress bar, mega "Browse" menu, search with
   icon, notification bells, account chip, animated burger and
   the member-hub (user dashboard) navigation bar.
   ============================================================ */

/* ---- Scroll progress bar ---- */
.nav-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:220;pointer-events:none;background:transparent}
.nav-progress span{display:block;height:100%;width:0;border-radius:0 2px 2px 0;
    background:linear-gradient(90deg,var(--color-primary),var(--color-secondary),var(--color-accent));
    box-shadow:0 0 12px rgba(139,92,246,.55);transition:width .08s linear}

/* ---- Header glass + elevated state ---- */
.site-header{transition:box-shadow .25s,border-color .25s}
.site-header.scrolled{
    border-bottom-color:rgba(99,102,241,.22);
    box-shadow:0 14px 34px -22px rgba(30,27,75,.55);
}
.site-logo{position:relative;overflow:hidden;border-radius:12px}
.logo-shine{
    position:absolute;inset:0;pointer-events:none;transform:translateX(-130%) skewX(-18deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    animation:logoShine 6s ease-in-out infinite;
}
@keyframes logoShine{0%,55%{transform:translateX(-130%) skewX(-18deg)}85%,100%{transform:translateX(180%) skewX(-18deg)}}

/* ---- Nav links with icons ---- */
.main-nav{gap:6px}
.nav-link{
    display:inline-flex;align-items:center;gap:7px;position:relative;
    padding:8px 14px;border-radius:12px;font-weight:600;font-size:.92rem;
    color:var(--ink-soft);letter-spacing:.01em;transition:color .2s,background .2s,transform .2s;
}
.nav-link .nl-ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.nav-link:hover{background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(236,72,153,.10));color:var(--color-primary);transform:translateY(-1px)}
.nav-link:hover .nl-ic{transform:translateY(-1px) scale(1.08)}
.nav-link::after{
    content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;
    background:var(--grad-brand);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link.active{color:var(--color-primary)}
.nav-link.active .nl-ic{color:var(--color-secondary)}

/* "New" pill on Books */
.nav-pill{
    margin-left:1px;padding:2px 7px;border-radius:999px;font-size:.6rem;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:#fff;background:var(--grad-brand);box-shadow:0 2px 8px rgba(236,72,153,.45);
    animation:navPill 2.4s ease-in-out infinite;
}
@keyframes navPill{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px);box-shadow:0 4px 14px rgba(236,72,153,.65)}}

/* ===== Browse mega menu ===== */
.nav-group{position:relative}
.nav-drop-trigger{
    display:inline-flex;align-items:center;gap:7px;position:relative;
    padding:8px 14px;border-radius:12px;border:none;cursor:pointer;
    font-family:var(--font-body);font-weight:600;font-size:.92rem;color:var(--ink-soft);
    background:transparent;transition:color .2s,background .2s,transform .2s;
}
.nav-drop-trigger .nl-ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-caret,.nl-caret{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.nav-group:hover .nav-drop-trigger,.nav-group.open .nav-drop-trigger{color:var(--color-primary);background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(236,72,153,.10))}
.nav-group.open .nl-caret,.nav-group:hover .nl-caret{transform:rotate(180deg)}
.nav-drop{
    position:absolute;top:calc(100% + 12px);left:0;min-width:560px;
    display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:14px;
    background:rgba(255,255,255,.9);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
    border:1px solid var(--glass-brd);border-radius:20px;box-shadow:var(--shadow-lg);
    opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:top left;
    transition:opacity .22s,transform .22s,visibility .22s;z-index:180;
}
.nav-group:hover .nav-drop,.nav-group.open .nav-drop,.nav-drop:hover{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.nav-drop-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.nav-drop-cats{border-left:1px solid var(--hairline);padding-left:14px}
.nav-drop-title{font-family:var(--font-display);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:2px 10px 6px}
.nav-drop a[role="menuitem"]{
    display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;
    color:var(--ink-soft);font-size:.9rem;font-weight:600;transition:background .16s,color .16s,transform .16s;
}
.nav-drop a[role="menuitem"]:hover{background:rgba(99,102,241,.09);color:var(--color-primary);transform:translateX(3px)}
.nav-drop a[role="menuitem"] small{display:block;font-size:.72rem;font-weight:500;color:var(--faint)}
.nd-ic{
    width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
    border-radius:9px;color:#fff;font-size:.86rem;box-shadow:var(--shadow-sm);
}
.nd-ic-a{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.nd-ic-b{background:linear-gradient(135deg,#ec4899,#f43f5e)}
.nd-ic-c{background:linear-gradient(135deg,#06b6d4,#3b82f6)}
.nd-ic-d{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.nd-chips i{display:block;width:10px;height:10px;border-radius:50%}
.nd-count{margin-left:auto;font-size:.7rem;font-weight:700;color:var(--muted);background:rgba(99,102,241,.09);padding:2px 8px;border-radius:999px}
.nav-drop-cta{
    grid-column:1/-1;margin-top:8px;display:block;text-align:center;padding:11px;border-radius:13px;
    font-size:.88rem;font-weight:700;color:#fff;background:var(--grad-brand);box-shadow:var(--shadow-sm);
    transition:transform .18s,box-shadow .18s;
}
.nav-drop-cta:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(139,92,246,.8);color:#fff}

/* ===== Search field with icon ===== */
.search-field{
    display:flex;align-items:center;gap:8px;position:relative;
    background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:13px;
    padding:0 13px;transition:border-color .2s,box-shadow .2s,width .2s;
}
.search-field .search-icon{width:15px;height:15px;flex-shrink:0;stroke:var(--faint);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.search-field input.search-input{width:210px;padding:9px 0;border:none;background:transparent;font-size:.9rem}
.search-field:focus-within{border-color:var(--color-primary);box-shadow:var(--ring)}
.search-field:focus-within .search-icon{stroke:var(--color-primary)}
.search-wrap .search-field input:focus{box-shadow:none}

/* ===== Notification bells ===== */
.bell-stack{display:flex;align-items:center;gap:6px}
.bell-btn{
    position:relative;display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:12px;color:var(--ink-soft);
    background:rgba(99,102,241,.08);border:1px solid transparent;
    transition:background .2s,color .2s,transform .2s,border-color .2s;
}
.bell-btn:hover{background:rgba(99,102,241,.16);color:var(--color-primary);transform:translateY(-1px)}
.bell-ic{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bell-dot{
    position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800;line-height:1;
    color:#fff;background:linear-gradient(135deg,#f43f5e,#ec4899);border:2px solid var(--header-bg,#fff);
}
.bell-btn .bell-dot::before{
    content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,#f43f5e,#ec4899);
    animation:bellPing 1.6s ease-out infinite;z-index:-1;
}
@keyframes bellPing{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(1.9);opacity:0}}

/* ===== Account chip + dropdown ===== */
.account-chip-drop{position:relative}
.account-chip{
    display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;border-radius:999px;
    background:rgba(99,102,241,.08);border:1px solid var(--hairline);cursor:pointer;
    font-family:var(--font-body);min-width:0;transition:background .2s,border-color .2s,box-shadow .2s;
}
.account-chip:hover{background:rgba(99,102,241,.14);border-color:rgba(99,102,241,.35);box-shadow:0 6px 16px -10px rgba(99,102,241,.5)}
.chip-avatar{
    width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
    background:var(--grad-brand);color:#fff;font-weight:800;font-size:.86rem;font-family:var(--font-display);
    overflow:hidden;box-shadow:0 2px 8px rgba(99,102,241,.4);
}
.chip-avatar img{width:100%;height:100%;object-fit:cover}
.chip-meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0}
.chip-name{font-size:.85rem;font-weight:700;color:var(--ink);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-role{font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-primary)}
.account-chip .nl-caret{width:13px;height:13px;color:var(--muted);flex-shrink:0}
.account-dropdown.account-chip-ddown{top:calc(100% + 10px);min-width:248px;padding:8px;border-radius:18px}
.account-dropdown a{gap:10px;font-weight:600}
.dd-ic{width:16px;height:16px;flex-shrink:0;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.account-dropdown a:hover .dd-ic{stroke:var(--color-primary)}
.dd-sep{height:1px;background:var(--hairline);margin:6px 10px}
.dd-danger{color:#e11d48!important}
.dd-danger:hover .dd-ic{stroke:#e11d48!important}

/* Auth CTA */
.nav-cta{
    border-radius:999px;padding:9px 20px;position:relative;overflow:hidden;
}
.nav-cta::after{
    content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
    transform:translateX(-120%);transition:transform .6s;
}
.nav-cta:hover::after{transform:translateX(120%)}
.nav-signin .nl-ic{width:15px;height:15px}

/* ===== Animated burger ===== */
.nav-toggle{
    display:none;width:42px;height:42px;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    border:none;border-radius:12px;background:rgba(99,102,241,.09);cursor:pointer;padding:0;
    transition:background .2s;
}
.nav-toggle:hover{background:rgba(99,102,241,.16)}
.nav-toggle .tb{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .28s,opacity .28s,width .28s}
.nav-toggle.is-open .tb:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.is-open .tb:nth-child(2){opacity:0;transform:scaleX(.4)}
.nav-toggle.is-open .tb:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Drawer section header (mobile) */
.drawer-sep{
    display:none;margin:14px 6px 4px;padding:0 10px;font-size:.66rem;font-weight:800;letter-spacing:.16em;
    text-transform:uppercase;color:var(--faint);
}

/* ============================================================
   MEMBER HUB — user dashboard navigation bar
   ============================================================ */
.hub-bar{
    position:sticky;top:66px;z-index:90;
    background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
    border-bottom:1px solid var(--hairline);
}
.hub-inner{padding:9px 20px}
.hub-nav{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hub-nav::-webkit-scrollbar{display:none}
.hub-link{
    display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex-shrink:0;
    padding:8px 14px;border-radius:999px;font-size:.86rem;font-weight:600;color:var(--ink-soft);
    border:1px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s;
}
.hub-link:hover{background:rgba(99,102,241,.09);color:var(--color-primary);transform:translateY(-1px)}
.hub-ic{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hub-link.active{
    background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:0 8px 20px -8px rgba(99,102,241,.65);
}
.hub-link.active .hub-ic{stroke:#fff}
.hub-count{
    min-width:17px;height:17px;padding:0 5px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
    font-size:.64rem;font-weight:800;line-height:1;color:#fff;background:linear-gradient(135deg,#f43f5e,#ec4899);
}
.hub-link.active .hub-count{background:rgba(255,255,255,.22)}
.hub-link-ghost{margin-left:auto;border-color:var(--hairline);background:rgba(255,255,255,.5)}
.hub-link-ghost:hover{border-color:rgba(99,102,241,.4);background:rgba(99,102,241,.08)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
    .nav-drop{min-width:0;width:max-content;max-width:460px}
    .chip-meta{display:none}
    .account-chip{padding:5px}
    .search-field input.search-input{width:170px}
}
@media(max-width:1024px){
    /* Collapse the header nav into the slide-in drawer on tablets + phones */
    .nav-toggle{display:flex}
    .main-nav{
        display:flex;position:fixed;top:66px;left:0;right:0;bottom:0;max-height:none;height:auto;
        width:100%;max-width:340px;align-items:stretch;gap:3px;padding:14px 18px 40px;
        background:rgba(255,255,255,.96);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
        border-right:1px solid var(--hairline);border-bottom:none;box-shadow:var(--shadow-lg);
        transform:translateX(-104%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;
    }
    .main-nav.show{display:flex;transform:translateX(0)}
    .main-nav .nav-link{justify-content:flex-start;width:100%;padding:11px 14px;border-radius:13px;font-size:.95rem}
    .main-nav .nav-link::after{display:none}
    .main-nav .nav-link.active{background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(236,72,153,.08));color:var(--color-primary)}
    .drawer-sep{display:block}

    /* Browse group becomes inline in the drawer */
    .nav-group{display:flex;flex-direction:column;width:100%}
    .nav-drop-trigger{width:100%;justify-content:flex-start;padding:11px 14px;border-radius:13px;font-size:.95rem}
    .nav-group:hover .nav-drop-trigger{background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(236,72,153,.10))}
    .nav-drop{
        position:static;transform:none;opacity:1;visibility:visible;width:100%;min-width:0;
        display:none;grid-template-columns:1fr;gap:0;padding:4px 0 4px 8px;margin:2px 0 6px;
        background:transparent;border:none;box-shadow:none;backdrop-filter:none;
    }
    .nav-group.open .nav-drop,.nav-group:hover .nav-drop{display:grid}
    .nav-drop-cats{border-left:none;padding-left:0;margin-top:6px}
    .nav-drop-cta{grid-column:1/-1}

    .search-wrap-mobile{padding-bottom:12px;border-bottom:1px solid var(--hairline);margin-bottom:10px}
    .search-wrap-mobile .search-field input{width:100%}
    .search-wrap-mobile .search-field{width:100%}
    .header-actions .search-wrap{display:none}
}
@media(max-width:768px){
    .hub-bar{top:56px}
    .main-nav{top:56px}
    .header-actions{gap:8px}
    .bell-btn{width:38px;height:38px}
    .hub-link{padding:8px 12px;font-size:.82rem}
    .hub-link-ghost{margin-left:0}
}
@media(max-width:480px){
    .header-inner{gap:8px}
    .header-actions{flex-shrink:0;gap:6px}
    .bell-btn{width:34px;height:34px}
    .bell-ic{width:17px;height:17px}
    .account-chip{padding:4px}
    .chip-avatar{width:26px;height:26px;font-size:.72rem}
    .nav-toggle{width:36px;height:36px}
    .hub-inner{padding:8px 14px}
    .header-actions .search-field{display:none}
}