/* ── Shared persistent top bar for every /fanpages/* page ────────────────────
   Injected by fanpages-nav.js into <div id="fanpages-topbar-root">. Loaded
   independently of each page's own styling so it looks and behaves
   identically on the hub, author profiles, and every story page. */

/* Cinzel is what makes the "Fanpages" brand text look right. Not every page
   that includes this stylesheet also loads style.css/fanpages.css (which is
   where Cinzel is normally imported), so it's imported here too — this file
   is the one thing every /fanpages/* page always includes. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Fredoka:wght@500;600;700&display=swap');

/* #fanpages-topbar-root is exactly as tall as .fpnav-bar (its only child),
   which gives position:sticky zero room to actually stick — the moment you
   scroll past the bar's own height, its containing block has fully
   scrolled by too, so it un-sticks and disappears. Fixed positioning avoids
   that trap entirely; the root div keeps a matching height so page content
   below it isn't yanked up when the bar leaves the flow. */
#fanpages-topbar-root { height: 76px; }

.fpnav-bar {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  height: 76px;
  padding: 0 1.35rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #141414;
  z-index: 200;
  font-family: 'Lato', Arial, sans-serif;
}
.fpnav-bar a { text-decoration: none; }

.fpnav-brand {
  display: flex; align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 0.6rem;
}
.fpnav-brand-logo { height: 50px; width: auto; display: block; flex-shrink: 0; }
.fpnav-link {
  position: relative;
  font-family: 'Fredoka', 'Lato', Arial, sans-serif;
  color: #ccc;
  font-size: 1.06rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  padding-bottom: 4px;
}
.fpnav-link:hover { color: #7fa8d9; }
/* Clubs is the only nav link left now that Browse is gone -- no more
   underline (it was the "which nav item is active" indicator from when
   there were several links to distinguish between), and sized up further
   so it reads as a real primary button next to the logo. */
.fpnav-link--clubs { font-size: 1.22rem; margin-right: 0.6rem; }

/* Right next to Clubs instead of centered in the leftover space --
   sized to hug the icon+"Search" content (Wattpad-style), not a wide
   280px box. That width used to leave a big stretch of clickable-but-
   visually-empty input to the right of the visible label, which read
   as being able to "interact with the search bar" well past where
   anything was actually shown. .fpnav-right's own margin-left:auto is
   what keeps Create/Login/avatar pinned to the far right now that this
   isn't the thing doing that job anymore. */
.fpnav-search { position: relative; width: 230px; flex-shrink: 0; }
.fpnav-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; color: #ccc; pointer-events: none;
}
.fpnav-search input {
  width: 100%;
  padding: 0.7rem 0.9rem 0.7rem 2.7rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 1.15rem;
  font-weight: 400;
  font-family: 'Fredoka', 'Lato', Arial, sans-serif;
  background: transparent;
  color: #f0f0f0;
}
.fpnav-search input::placeholder { color: #aaa; font-weight: 400; }
/* No visible box on focus at all -- matches Wattpad's search, which
   stays flat/borderless whether you're focused in it or not, instead of
   an outline/background box popping in. */
.fpnav-search input:focus { outline: none; }

.fpnav-right { display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; margin-left: auto; }

.fpnav-home-btn {
  display: inline-block;
  font-family: 'Fredoka', 'Lato', Arial, sans-serif;
  background: linear-gradient(135deg, #3d3a52, #5a4f78);
  color: #f0f0f0;
  font-size: 1.02rem;
  font-weight: 700;
  padding: 0.82rem 1.5rem;
  border-radius: 22px;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(61,58,82,0.35);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.fpnav-home-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #47435f, #665887);
  box-shadow: 0 5px 18px rgba(61,58,82,0.5);
}

.fpnav-login-btn {
  display: inline-block;
  background: #7fa8d9;
  color: #0a0a0a;
  font-size: 1.02rem;
  font-weight: 700;
  padding: 0.82rem 1.5rem;
  border-radius: 22px;
  white-space: nowrap;
}

/* Generic dropdown-trigger button */
.fpnav-dropdown-wrap { position: relative; }
.fpnav-trigger-btn {
  display: flex; align-items: center; gap: 0.4rem;
  background: none; border: 1px solid rgba(255,255,255,0.2); cursor: pointer;
  color: #f0f0f0; font-family: 'Fredoka', 'Lato', Arial, sans-serif; font-size: 1.05rem; font-weight: 600;
  padding: 0.78rem 1.25rem; border-radius: 22px; white-space: nowrap;
}
.fpnav-trigger-btn:hover { border-color: #7fa8d9; color: #7fa8d9; }
.fpnav-caret { font-size: 0.72rem; opacity: 0.7; }

/* "Browse" — a .fpnav-link that's a <button> (opens a dropdown) instead of
   an <a>, so it needs its own reset on top of the shared link styling.
   `font: inherit` here was a mistake — button font doesn't inherit the
   *class's* font-family, it inherits from the parent element (the plain
   .fpnav-dropdown-wrap div), which falls through to body's base Lato/Arial
   font rather than .fpnav-link's Fredoka. Declaring the font explicitly
   is what actually fixes it. */
.fpnav-trigger-link {
  display: flex; align-items: center; gap: 0.35rem; background: none; border: none; cursor: pointer;
  font-family: 'Fredoka', 'Lato', Arial, sans-serif; font-size: 1.22rem; font-weight: 600; color: #ccc;
}
.fpnav-trigger-link:hover { color: #7fa8d9; }
.fpnav-trigger-link.active { color: #7fa8d9; }
/* Extra breathing room after Browse, same idea as Clubs's own
   margin-right — before Search instead of before Browse now that Browse
   sits between the two. */
.fpnav-left-dropdown-wrap { margin-right: 0.6rem; }

/* Admin dropdown trigger — visually distinct from the generic pill */
.fpnav-admin-btn { border-color: rgba(217,90,90,0.45); color: #e07a7a; }
.fpnav-admin-btn:hover { border-color: #e07a7a; color: #e07a7a; background: rgba(217,90,90,0.1); }

.fpnav-avatar-btn {
  display: flex; align-items: center; gap: 0.55rem;
  background: none; border: none; cursor: pointer;
  color: #f0f0f0; font-family: 'Fredoka', 'Lato', Arial, sans-serif; font-size: 1.05rem; font-weight: 600;
  padding: 0.35rem 0.7rem 0.35rem 0.35rem; border-radius: 22px;
}
.fpnav-avatar-btn:hover { background: rgba(255,255,255,0.08); }
.fpnav-avatar-btn img, .fpnav-avatar-fallback {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0;
}
.fpnav-avatar-fallback {
  background: linear-gradient(135deg, #7fa8d9, #d97a72);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700;
}

.fpnav-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 210;
  background: #1a1a1a; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5); min-width: 180px; overflow: hidden; padding: 0.4rem;
}
/* Community/Browse sit on the LEFT side of the nav -- right:0 above was
   pinning the dropdown's right edge to the button's right edge, which
   (since the button is narrower than the menu) shoved the whole menu off
   to the left instead of centering it under the button. */
.fpnav-left-dropdown-wrap .fpnav-dropdown {
  right: auto; left: 50%; transform: translateX(-50%);
}
.fpnav-dropdown a, .fpnav-dropdown button {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  color: #f0f0f0; font-family: inherit; font-size: 1rem;
  padding: 0.65rem 0.8rem; border-radius: 8px;
}
.fpnav-dropdown a:hover, .fpnav-dropdown button:hover { background: rgba(127,168,217,0.12); color: #7fa8d9; }

.fpnav-plus-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-right: 0.4rem;
  border: 1px solid currentColor; border-radius: 4px;
  font-size: 0.8rem; font-weight: 700; line-height: 1;
  vertical-align: middle;
}
.fpnav-dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 0.35rem -0.4rem;
}

/* Notification bell — plain icon button, sits right of the avatar */
.fpnav-icon-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0;
  background: none; border: none; cursor: pointer; border-radius: 50%;
  color: #ccc;
}
.fpnav-icon-btn svg { width: 25px; height: 25px; flex-shrink: 0; }
.fpnav-icon-btn:hover { background: rgba(255,255,255,0.08); color: #f0f0f0; }

/* Bell with the "Updates" label to its left — wider pill instead of a circle */
.fpnav-icon-btn--labeled {
  width: auto; height: auto; border-radius: 20px; gap: 0.45rem;
  padding: 0.6rem 0.9rem 0.6rem 1.1rem;
  font-family: 'Fredoka', 'Lato', Arial, sans-serif; font-size: 0.95rem; font-weight: 600;
}
.fpnav-icon-btn-label { white-space: nowrap; }

/* "Updates" dropdown item — text on the left, unread-count pill on the
   right, instead of the badge that used to sit pinned to the corner of a
   standalone bell icon in the topbar. */
.fpnav-dropdown a#fpnav-notif-link { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.fpnav-notif-badge {
  display: inline-block; min-width: 20px; height: 20px; padding: 0 5px; flex-shrink: 0;
  border-radius: 10px; background: #d97a72; color: #fff;
  font-size: 0.72rem; font-weight: 700; line-height: 20px; text-align: center;
}

/* ── Login/register gate modal (Wattpad-style) ── */
/* :not([hidden]) so the `hidden` attribute (display:none) isn't overridden
   by this rule's own display:flex — author CSS otherwise beats the
   browser's default [hidden] styling and the modal would show on load. */
.fpnav-modal-overlay:not([hidden]) {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.fpnav-modal-card {
  position: relative;
  background: #161616; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
  max-width: 380px; width: 100%; padding: 2.5rem 2rem 2rem; text-align: center;
}
.fpnav-modal-close {
  position: absolute; top: 0.9rem; right: 0.9rem;
  background: none; border: none; color: #999; font-size: 1.1rem; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
}
.fpnav-modal-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.fpnav-modal-title {
  font-family: 'Cinzel', Georgia, serif; font-size: 1.3rem; color: #f0f0f0; margin-bottom: 0.6rem;
}
.fpnav-modal-text { color: #999; font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.5rem; }
.fpnav-modal-cta {
  display: inline-block; width: 100%; box-sizing: border-box;
  background: #7fa8d9; color: #0a0a0a; font-weight: 700; font-size: 0.95rem;
  padding: 0.8rem 1rem; border-radius: 10px; text-decoration: none;
}
.fpnav-modal-cta:hover { background: #93b8e2; }

@media (max-width: 720px) {
  .fpnav-bar { gap: 0.7rem; padding: 0 0.85rem; }
  .fpnav-search { display: none; }
  .fpnav-link { display: none; }
  .fpnav-brand-logo { height: 36px; }
  .fpnav-home-btn, .fpnav-login-btn, .fpnav-trigger-btn { padding: 0.6rem 0.9rem; font-size: 0.88rem; }
  .fpnav-icon-btn-label { display: none; }
  .fpnav-icon-btn--labeled { padding: 0.6rem; border-radius: 50%; }
}

@media (max-width: 420px) {
  .fpnav-bar { gap: 0.45rem; }
  .fpnav-home-btn span, .fpnav-login-btn span { display: none; }
  .fpnav-right { gap: 0.5rem; }
  .fpnav-avatar-btn { padding: 0.35rem; }
  .fpnav-avatar-btn img, .fpnav-avatar-fallback { width: 32px; height: 32px; }
}