/*
 * Cinema Atlas — shared global design tokens.
 *
 * These are the tokens whose value is identical on every page (the brand
 * palette). They were previously copy-pasted into the inline <style> :root of
 * all ~13 templates; centralizing them here makes a palette change a one-file
 * edit. Loaded from base.html before each page's inline styles.
 *
 * NOTE: per-page theme tokens (--gray-mid, --border, --bone-*, --cream-*,
 * --hairline*, --black-card, --black-soft, --border-strong) deliberately differ
 * between the dark pages (index/film/director) and the light pages, so they stay
 * in each template's :root and are NOT defined here.
 */
:root {
  --color-primary: #0F0F0F;
  --color-base: #E3DAC9;
  --color-accent: #C0392B;

  /* Aliases used interchangeably across templates — same resolved values. */
  --black: #0F0F0F;
  --off-white: #E3DAC9;
  --red: #C0392B;
}

/*
 * Shared site nav (rendered from base.html on every page).
 * Tokens from the approved mockup (cinema_atlas_inline_nav_search.html,
 * search-right variant): raised #141414, line #2A2A2A, dim #8F897D.
 * Namespaced .site-nav-* to avoid colliding with the per-page .top-nav /
 * .nav-links classes that existed before the nav was centralized.
 */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(15, 15, 15, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #2A2A2A;
}
.site-nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center;
  height: 64px; gap: 36px;
}
.site-nav-wordmark {
  font-family: 'Playfair Display', serif; font-weight: 600;
  font-size: 16px; letter-spacing: 3px; text-transform: uppercase;
  color: #E3DAC9; white-space: nowrap;
  text-decoration: none; cursor: pointer;
}
.site-nav-wordmark span { color: #C0392B; }
.site-nav-links {
  display: flex; align-items: center; gap: 28px;
  margin-left: auto; /* search-right: links push to the right, search after them */
  font-family: 'Inter', sans-serif; font-size: 0.72rem;
  font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap;
}
.site-nav-links a {
  color: #8F897D; text-decoration: none;
  transition: color 0.15s;
}
.site-nav-links a:hover { color: #E3DAC9; }
.site-nav-links a.active {
  color: #E3DAC9;
  border-bottom: 2px solid #C0392B;
  padding-bottom: 4px;
}
.site-nav-search {
  position: relative;
  display: flex; align-items: center;
}
.site-nav-search input {
  width: 200px;
  background: #141414;
  border: 1px solid #2A2A2A;
  border-radius: 0;
  color: #E3DAC9;
  font-family: 'Inter', sans-serif; font-size: 0.78rem;
  padding: 8px 34px 8px 12px;
  outline: none;
  transition: width 0.25s ease, border-color 0.15s ease;
}
.site-nav-search input::placeholder { color: #8F897D; }
.site-nav-search input:focus {
  width: 300px;
  border-color: #8F897D;
}
.site-nav-search button {
  position: absolute; right: 1px; top: 1px; bottom: 1px;
  width: 30px;
  background: none; border: none;
  color: #C0392B; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}
.site-nav-search button:hover { background: #C0392B; color: #FDF6EC; }

/* Autocomplete dropdown — right-aligned under the field, wider than it for
   readable titles. Nav is z-index 100; dropdown sits above page content. */
.site-nav-dropdown {
  position: absolute;
  top: calc(100% + 4px); right: 0;
  width: 360px; max-width: calc(100vw - 44px);
  max-height: 380px; overflow-y: auto;
  background: #141414;
  border: 1px solid #2A2A2A;
  z-index: 110;
}
.nav-ac-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid #1E1E1E;
  transition: background 0.15s;
}
.nav-ac-item:last-child { border-bottom: none; }
.nav-ac-item.selected, .nav-ac-item:hover { background: #1a1a1a; }
.nav-ac-thumb {
  width: 28px; height: 40px; flex-shrink: 0;
  object-fit: cover; background: #181818;
}
.nav-ac-text { flex: 1; min-width: 0; }
.nav-ac-title {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 14px; color: #E3DAC9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-ac-meta {
  font-family: 'Inter', sans-serif; font-size: 11px; color: #8F897D;
}
/* Empty state: the example titles that no longer fit in the placeholder. */
.nav-ac-empty {
  padding: 12px 14px;
  font-family: 'Inter', sans-serif; font-size: 0.74rem; color: #8F897D;
}
.nav-ac-empty .nav-ac-example { color: #8F897D; cursor: pointer; transition: color 0.15s; }
.nav-ac-empty .nav-ac-example:hover { color: #E3DAC9; }

/* Watchlist badge in the shared nav (populated by watchlist.js where loaded). */
.site-nav .wl-nav-badge {
  display: none;
  align-items: center; justify-content: center;
  background: #C0392B; color: #E3DAC9;
  font-size: 9px; font-family: 'Inter', sans-serif; font-weight: 600;
  min-width: 16px; height: 16px; border-radius: 8px;
  padding: 0 4px; margin-left: 5px;
  vertical-align: middle; line-height: 1;
}

@media (max-width: 1080px) {
  .site-nav-links { gap: 20px; font-size: 0.66rem; }
  .site-nav-search input { width: 160px; }
  .site-nav-search input:focus { width: 220px; }
}
@media (max-width: 900px) {
  .site-nav-inner {
    flex-wrap: wrap; height: auto;
    padding: 14px 22px; row-gap: 12px; gap: 20px;
  }
  .site-nav-links { flex-wrap: wrap; row-gap: 10px; }
  /* Search drops to its own full-width row under the links. */
  .site-nav-search { order: 4; flex-basis: 100%; }
  .site-nav-search input, .site-nav-search input:focus { width: 100%; }
}