/* Panelario — Shared nav bar styles
   Single source of truth for all web pages.
   Tokens (:root) stay in each page's own <style> — only nav-specific rules here. */

/* ── Nav bar ── */
nav{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:4px;padding:3px 32px;background:rgba(26,25,22,0.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:100}
.nav-logo{align-self:flex-end;line-height:0;display:flex;align-items:flex-end;gap:8px;text-decoration:none}
.nav-logo img{height:40px}
.nav-logo span{font-size:18px;font-weight:700;color:var(--text-primary);letter-spacing:.5px;line-height:1;translate:-10px -1px}

/* ── Center links ── */
.nav-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px}
.nav-links a{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:3px 10px;line-height:16px;border:1px solid var(--border);border-radius:var(--radius-sm);display:inline-flex;align-items:center;text-decoration:none;transition:all .15s}
.nav-links a:hover{color:var(--text-primary);border-color:var(--border-hover)}
.nav-links a.active{color:var(--accent-active)}

/* ── CTA button (filled gold) ── */
.nav-cta{font-size:9px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:3px 10px;line-height:16px;background:var(--accent-active);color:var(--bg-primary);border:1px solid var(--accent-active);border-radius:var(--radius-sm);transition:all .15s;display:inline-flex;align-items:center;text-decoration:none}
.nav-cta:hover,.nav-links a.nav-cta:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--bg-primary)}
.nav-links a.nav-cta{background:var(--accent-active);color:var(--bg-primary);border-color:var(--accent-active)}

/* ── User pill ── */
.nav-user{margin-left:auto;display:flex;align-items:center;gap:6px;text-decoration:none;padding:3px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);transition:all .15s}
.nav-user svg{width:16px;height:16px;stroke:var(--text-muted);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s}
.nav-user-label{font-size:9px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--text-muted);transition:color .15s;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;visibility:hidden}
.nav-user:hover{border-color:var(--border-hover)}
.nav-user:hover svg{stroke:var(--text-primary)}
.nav-user:hover .nav-user-label{color:var(--text-primary)}
.nav-user.logged-in{border-color:rgba(201,165,90,0.3)}
.nav-user.logged-in svg{stroke:var(--accent-active)}
.nav-user.logged-in .nav-user-label{color:var(--accent-active)}
.nav-user.logged-in:hover svg{stroke:var(--accent-hover)}
.nav-user.logged-in:hover .nav-user-label{color:var(--accent-hover)}

/* ── Sign Out ── */
.nav-signout{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);text-decoration:none;padding:3px 10px;line-height:16px;border:1px solid var(--border);border-radius:var(--radius-sm);transition:all .15s;display:inline-flex;align-items:center}
.nav-signout:hover{color:var(--text-primary);border-color:var(--border-hover)}

/* ── Nav group (locale wrapper) ── */
.nav-group{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:visible}
.nav-group a{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:3px 10px;text-decoration:none;transition:color .15s;border-right:1px solid var(--border)}
.nav-group a:hover{color:var(--text-secondary)}

/* ── Locale switcher ── */
.locale-wrap{display:flex;align-items:center;gap:6px}
.locale-btn{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);background:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px 10px;line-height:16px;cursor:pointer;transition:all .15s;position:relative;display:inline-flex;align-items:center;gap:3px}
.locale-btn:hover{color:var(--text-primary);border-color:var(--border-hover)}
.locale-btn.open{color:var(--text-secondary)}
.locale-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;background:var(--bg-secondary);border:1px solid var(--border-hover);border-radius:var(--radius-sm);padding:3px;z-index:200;min-width:100px;box-shadow:0 6px 16px rgba(0,0,0,0.45)}
.locale-btn.open .locale-menu{display:block}
.locale-menu button{padding:4px 10px;font-size:11px;color:var(--text-secondary);border-radius:4px;cursor:pointer;white-space:nowrap;transition:all .1s;display:flex;align-items:center;gap:5px;background:none;border:none;font-family:inherit;width:100%}
.locale-menu button:hover{background:var(--bg-button);color:var(--text-primary)}
.locale-menu button.sel{color:var(--accent-active);background:var(--accent-dim)}
.locale-flag{width:14px;height:10px;object-fit:cover;border-radius:1px;vertical-align:middle;flex-shrink:0;position:relative;top:-1px}

/* ── Responsive ── */
@media(max-width:640px){
  nav{padding:8px 12px;gap:6px}
  .nav-logo img{height:32px}
  .nav-logo span{font-size:15px}
  .nav-links{display:none}
  .nav-cta{font-size:8px;padding:3px 8px}
  .nav-user-label{display:none}
  .nav-user{padding:3px 6px}
  .nav-signout{font-size:8px;padding:3px 6px}
.locale-btn{padding:3px 6px;font-size:9px}
}