/* 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:absolute;top:4px;left:4px;right:4px;display:flex;align-items:center;gap:4px;padding:4px 12px 4px 4px;background:var(--bg-secondary);border:none;border-radius:var(--radius-sm);z-index:100}
.nav-logo{align-self:flex-end;margin-right:auto;line-height:0;display:flex;align-items:flex-end;gap:8px;text-decoration:none}
/* Action group order: CTA · account · language (account sits next to the locale switcher) */
nav > .nav-cta{order:1}
.nav-signout{order:2}
.locale-wrap,.nav-group{order:3}
.nav-burger{order:5}
.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-secondary);padding:3px 10px;line-height:16px;background:var(--bg-button);border:1px solid transparent;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);background:var(--bg-tertiary)}
.nav-links a.active{color:var(--accent-active);background:var(--accent-dim)}

/* ── 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{order:2;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}
/* Account icon — round, borderless (avatar fills it, or the person glyph) */
.nav-user-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;flex-shrink:0;display:block;border:none}
.nav-user.has-menu{position:relative;cursor:pointer;width:24px;height:24px;padding:0;border:none;border-radius:50%;justify-content:center;align-items:center;gap:0;background:var(--bg-button);overflow:visible}
.nav-user.has-menu:hover{background:var(--bg-tertiary);border:none}
.nav-user.has-menu svg{width:15px;height:15px}
/* Notification badge (unread quotes) on the account icon */
.nav-user-badge{position:absolute;top:-7px;right:-5px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:var(--info);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;border:1.5px solid var(--bg-primary);pointer-events:none}
/* Transparent PNG logo → no circle/background, show the logo clean */
.nav-user.has-menu.logo-png{background:transparent}
.nav-user.has-menu.logo-png:hover{background:transparent}
.nav-user.logo-png .nav-user-avatar{object-fit:contain;border-radius:0;border:none}
/* Account dropdown menu (email + actions) */
.nav-account-menu{display:none;flex-direction:column;gap:2px;position:absolute;top:calc(100% + 4px);right:0;min-width:190px;background:var(--bg-secondary);border:1px solid var(--border-hover);border-radius:var(--radius-sm);padding:4px;z-index:200;box-shadow:0 6px 18px rgba(0,0,0,0.5)}
.nav-user.menu-open .nav-account-menu{display:flex}
.nam-email{font-size:10px;color:var(--accent-active);padding:7px 10px 8px;border-bottom:1px solid var(--border);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;letter-spacing:normal;font-weight:600}
.nam-item{font-size:11px;font-weight:500;color:var(--text-secondary);padding:6px 10px;border-radius:4px;text-decoration:none;cursor:pointer;background:none;border:none;font-family:inherit;text-align:left;width:100%;transition:all .12s;display:block}
.nam-item:hover{background:var(--bg-button);color:var(--text-primary)}
.nam-signout:hover{color:var(--red)}
.nam-sep{height:1px;background:var(--border);margin:4px 6px}
.nam-section{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:4px 10px 2px;font-weight:600}
.nam-lang{display:flex;align-items:center;gap:7px;text-transform:none;letter-spacing:normal;font-weight:500}
.nam-lang.sel{color:var(--accent-active);background:var(--accent-dim)}
.nam-lang .locale-flag{flex-shrink:0}
.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-secondary);text-decoration:none;padding:3px 10px;line-height:16px;background:var(--bg-button);border:1px solid transparent;border-radius:var(--radius-sm);transition:all .15s;display:inline-flex;align-items:center}
.nav-signout:hover{color:var(--text-primary);background:var(--bg-tertiary)}

/* ── 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-secondary);background:transparent;border:1px solid transparent;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);background:var(--bg-tertiary)}
.locale-btn.open{color:var(--accent-active);background:var(--accent-dim)}
.locale-menu{display:none;flex-direction:column;gap:4px;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:flex}
.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}

/* ── Mobile hamburger (button injected by footer.js; hidden on desktop) ── */
.nav-burger{display:none;flex:0 0 auto;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:34px;height:30px;padding:0;background:none;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .15s}
.nav-burger:hover{border-color:var(--border-hover)}
.nav-burger span{display:block;width:16px;height:1.5px;background:var(--text-secondary);border-radius:1px;transition:transform .2s ease,opacity .2s ease}
nav.menu-open .nav-burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
nav.menu-open .nav-burger span:nth-child(2){opacity:0}
nav.menu-open .nav-burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ── Responsive ── */
@media(max-width:640px){
  nav{padding:8px 12px;gap:6px}
  .nav-logo img{height:32px}
  .nav-logo span{display:none}                 /* icon-only on mobile keeps the bar single-row */
  .nav-burger{display:flex}

  /* Center links collapse into a full-width drop-down drawer */
  .nav-links{
    position:absolute;top:100%;left:0;right:0;transform:none;
    display:flex;flex-direction:column;align-items:stretch;gap:6px;
    background:var(--bg-secondary);border-bottom:1px solid var(--border);
    margin:0;padding:0 12px;
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;visibility:hidden;
    box-shadow:0 14px 28px rgba(0,0,0,0.45);
    transition:max-height .25s ease,opacity .2s ease,padding .2s ease,visibility .25s;
  }
  nav.menu-open .nav-links{max-height:calc(100vh - 54px);overflow-y:auto;opacity:1;pointer-events:auto;visibility:visible;padding:12px}
  .nav-links a{font-size:12px;justify-content:center;padding:10px 12px;line-height:1.3}

  /* Bar actions — readable (no 8px), compact */
  .nav-cta{font-size:11px;padding:5px 10px}
  .nav-user{padding:4px 8px}
  .nav-user-label{display:none}
  .nav-signout{font-size:11px;padding:4px 8px}
  .locale-btn{font-size:11px;padding:4px 8px}
}