/* Site chrome shared by every page: one slim sticky header, one footer.
   Self-contained (fallback colors inline) so it works over site.css, pages.css
   and admin.css alike without depending on any one page's :root variables. */

.sitebar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 26px;
  padding: 10px 26px;
  background: rgba(5, 5, 8, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(38, 38, 46, .7);
}
.sitebar .sbrand {
  font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 700;
  color: var(--text, #eceae4); text-decoration: none; white-space: nowrap;
  display: flex; align-items: center; gap: 9px;
}
/* the owl rides slightly larger than the cap height so it reads as a mark, not a bullet */
.sitebar .sbrand .sbmark { width: 26px; height: 26px; display: block; }
.sitebar .sbrand em { font-style: normal; color: var(--blue, #3d6cf5); }
.sitebar nav { display: flex; gap: 20px; }
.sitebar nav a {
  color: var(--dim, #8b8a94); font-family: 'Inter', sans-serif; font-size: 13px;
  text-decoration: none; padding: 5px 0; letter-spacing: .03em; transition: color .2s;
}
.sitebar nav a:hover { color: var(--text, #eceae4); }
.sitebar nav a[aria-current="page"] {
  color: var(--gold, #d4af5a);
  border-bottom: 1px solid rgba(212, 175, 90, .55);
}
.sitebar .sbright { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* the app page parks its account/admin/gear cluster here — undo its absolute placement */
.sitebar .headtools { position: static; top: auto; right: auto; }
.appcta {
  border: 1px solid rgba(212, 175, 90, .5); border-radius: 999px; padding: 6px 15px;
  color: var(--gold, #d4af5a); font-family: 'Inter', sans-serif; font-size: 12.5px;
  text-decoration: none; white-space: nowrap; transition: all .2s;
}
.appcta:hover { background: rgba(212, 175, 90, .12); }

.sitefoot {
  border-top: 1px solid rgba(38, 38, 46, .7); margin-top: 64px;
  padding: 26px 20px 38px; text-align: center;
  color: #55555f; font-family: 'Inter', sans-serif; font-size: 11.5px; line-height: 1.9;
}
.sitefoot a { color: var(--dim, #8b8a94); text-decoration: none; }
.sitefoot a:hover { color: var(--gold, #d4af5a); }
.sitefoot .fnav { margin-bottom: 8px; font-size: 12.5px; }
.sitefoot .fnav a { margin: 0 11px; }
/* required by TMDB's terms: their logo, displayed less prominently than our own brand —
   a 13px footer mark under a 19px header wordmark satisfies exactly that */
.sitefoot .tmdblogo { height: 13px; vertical-align: middle; opacity: .8; margin: 4px 0 6px; }

@media (max-width: 640px) {
  .sitebar { padding: 8px 12px; gap: 14px; }
  .sitebar nav { gap: 13px; }
  .sitebar nav a { font-size: 12px; }
}
/* Below 700px the bar carries the APP — Discover, For you, Your list — and the
   read-once pages step aside; they're still one tap away in every footer. */
@media (max-width: 700px) { .sitebar nav a.navdoc { display: none; } }
/* the brand yields last, on the tightest screens */
@media (max-width: 430px) { .sitebar .sbrand { display: none; } }