/* ==========================================================================
   SHARED SITE NAV — makes the interior (app.css) header pixel/font-identical
   to the homepage (home.css) header on EVERY page.
   Self-contained: every value is a resolved literal copied from home.css's nav
   block, so it renders the same whether the page loads app.css or home.css.
   Loaded AFTER app.css; every rule is scoped under .nav-shell so it out-weighs
   (or ties-and-post-dates) app.css's nav rules — including its adaptive
   `.on-light` theme, which is forced back to the dark homepage look here so the
   header never changes tone as you scroll (matching index.html).
   ========================================================================== */

/* shell — dark, translucent, always (overrides app.css base AND .on-light) */
.nav-shell,
.nav-shell.on-light {
  position: fixed; inset: 0 0 auto; z-index: 70; height: 64px;
  background: rgba(3, 3, 4, .72);
  color: #f5f5f6;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* inner bar — flex, space-between, centred to 1240 with the homepage gutter */
.nav-shell .nav {
  height: 64px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; max-width: 1240px; margin-inline: auto;
  padding-inline: clamp(24px, 6vw, 56px); grid-template-columns: none;
}

.nav-shell .brand { display: flex; align-items: center; gap: 10px; min-width: max-content; }
.nav-shell .brand-logo { height: 42px; width: auto; display: block; }

/* page links */
.nav-shell .nav-links { display: flex; align-items: center; justify-content: flex-start; gap: 22px; }
.nav-shell .nav-links a {
  color: rgba(255, 255, 255, .82); font-size: 14px; font-weight: 600;
  letter-spacing: -.01em; white-space: nowrap; transition: color .2s;
}
.nav-shell .nav-links a:hover,
.nav-shell .nav-links a.active,
.nav-shell .nav-links a[aria-current] { color: #d4a64a; }

/* right-side actions */
.nav-shell .nav-actions { display: flex; align-items: center; gap: 12px; }

/* language pill */
.nav-shell .lang {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  background: rgba(255, 255, 255, .06); border: 0; border-radius: 999px;
}
.nav-shell .lang-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; min-height: 32px; height: auto; padding: 4px 10px; border: 0;
  background: transparent; color: rgba(255, 255, 255, .70); line-height: 1;
  font-size: 12px; font-weight: 800; border-radius: 999px; cursor: pointer;
  transition: background .2s, color .2s;
}
.nav-shell .lang-btn.active { background: #fff; color: #030304; }

/* CTA — green WhatsApp button, exactly like the homepage */
.nav-shell .nav-cta { min-height: 40px; padding: 8px 16px; font-size: 13px; font-weight: 800; border-radius: 999px; }
.nav-shell .btn.wa {
  background: #25d366; color: #04210f; border: 1px solid #25d366;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .24);
}
.nav-shell .btn.wa:hover { background: #1fbf57; border-color: #1fbf57; color: #04210f; }

/* hamburger — homepage box + bars (interior renders .nav-toggle-bar spans) */
.nav-shell .nav-toggle {
  display: none; width: 44px; height: 44px; position: static;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: transparent; border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; cursor: pointer;
}
.nav-shell .nav-toggle-bar {
  position: static; left: auto; right: auto; top: auto;
  display: block; width: 20px; height: 2px; border-radius: 2px; background: #f5f5f6;
  transition: transform .2s, opacity .2s;
}
.nav-shell .nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-shell .nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-shell .nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile — hamburger dropdown panel, exactly like the homepage (<=1040px) */
@media (max-width: 1040px) {
  .nav-shell .nav-toggle { display: inline-flex; }
  .nav-shell .nav-cta { display: none; }
  .nav-shell .nav-links {
    position: fixed; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(10, 10, 12, .98);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    padding: 6px max(20px, env(safe-area-inset-left)) 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    transform: translateY(-135%); transition: transform .28s cubic-bezier(.22, .61, .36, 1);
    box-shadow: 0 24px 44px rgba(0, 0, 0, .55);
  }
  .nav-shell .nav-links.open { transform: translateY(0); }
  .nav-shell .nav-links a { padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, .10); font-size: 16px; }
  .nav-shell .nav-links a:last-child { border-bottom: 0; }
  /* neutralize app.css's light mobile panel */
  .nav-shell .nav-links.open::before { background: transparent; }
}