/* ============================================================
   sala.video — shared brand wordmark
   Change the logo font for the whole site HERE, in one place.
   Each page keeps its own size/colour; only the typeface +
   letter-spacing are centralised.
   ============================================================ */

.nav-logo,
.topbar-logo,
.logo-text,
#wordmark,
.brand {
  font-family: 'Major Mono Display', monospace;
  letter-spacing: 0.06em;
}

/* ============================================================
   Shared top navigation (the fixed bar on the standard pages).
   Change menu COLOURS here; labels/links live in includes/nav.php.
   Scoped to .site-nav so it never collides with other pages'
   own .nav (e.g. the checkout bar on buy.php).
   ============================================================ */

.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; flex-direction: column;
  padding: 0 48px;
  background: #070a0b;
  border-bottom: 1px solid #182028;
}
/* Two rows: [logo … lang] on top, [message … menu] below. */
.site-nav .nav-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.site-nav .nav-row-top    { height: 40px; }
.site-nav .nav-row-bottom { height: 42px; border-top: 1px solid #101a12; }
.site-nav .nav-logo { font-size: 20px; color: #ffffff; }
.site-nav #timecode {
  font-family: 'Space Mono', monospace; font-size: 11px;
  color: #3d5a40; letter-spacing: 0.08em;
}
.site-nav .nav-right { display: flex; gap: 16px; align-items: center; }
.site-nav .nav-link {
  font-family: 'Space Mono', monospace; font-size: 12px;
  letter-spacing: 0.08em; color: #fff; text-transform: uppercase;
  padding: 7px 16px; text-decoration: none;
  transition: opacity 0.2s;
}
.site-nav .nav-link:hover { opacity: 0.85; }

/* Per-item colours — one place for the whole site */
.site-nav .nav-link.nl-films      { background: #0a9411; }
.site-nav .nav-link.nl-collection { background: #0057b8; }
.site-nav .nav-link.nl-credits    { background: #e80000; }
.site-nav .nav-link.nl-profile    { background: #6b3fa0; }
.site-nav .nav-link.nl-signin     { background: #0057b8; }
.site-nav .nav-link.nl-signout    { background: #fa9702; }
.site-nav .nav-link.nl-admin      { background: #a8791a; }

/* Language toggle (EN · ES) */
.site-nav .nav-lang { display: inline-flex; align-items: center; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.08em; }
.site-nav .nav-lang a { color: #3d5a40; text-decoration: none; padding: 4px 4px; transition: color 0.2s; }
.site-nav .nav-lang a.on { color: #d8e4d8; }
.site-nav .nav-lang a:hover { color: #8ab890; }
.site-nav .nav-lang a + a::before { content: '·'; color: #243028; margin: 0 4px; }

@media (max-width: 640px) {
  /* In-flow (not fixed) so the two-row bar never hides page content.
     Top row: logo + language. Bottom row: the wrapping menu. */
  .site-nav { position: static; padding: 10px 16px; }
  .site-nav .nav-row { height: auto; }
  .site-nav .nav-row-bottom { border-top: none; margin-top: 6px; }
  .site-nav #timecode { display: none; }
  .site-nav .nav-right {
    width: 100%; gap: 8px;
    flex-wrap: wrap; justify-content: flex-end;
  }
  .site-nav .nav-link { font-size: 10px; padding: 6px 10px; }
}

/* ============================================================
   "Why sala" badge — one-line ethos statement linking to /why.php.
   Markup lives in includes/why-badge.php; edit the sentence there.
   ============================================================ */

/* "Why sala" statement — sits in the nav (in place of the timecode) on browsing
   pages, linking to /why.php. Fills the centre; truncates if the bar gets tight. */
.site-nav .nav-statement {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 0 24px 0 0;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #a7c3a7;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}
.site-nav .nav-statement:hover { color: #eaf2ea; }
.nav-statement-seal { color: #3db87a; }
.nav-statement strong { color: #ffffff; font-weight: 700; }

@media (max-width: 640px) {
  .site-nav .nav-statement { display: none; }
}