/* ═══════════════════════════════════════════════════════
   BEBOB GLOBAL HEADER  ·  nav.css
   Include on every page.
   Do not override .app-header layout here — extend only.
═══════════════════════════════════════════════════════ */

/* ── HEADER SHELL ── */
.app-header{
  position:fixed;
  top:0; left:0; right:0;
  height:56px;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.07);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 10px;
  z-index:200;
}

/* ── LEFT COLUMN: back button ── */
.nav-left{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.nav-back{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  background:none;
  border:none;
  border-radius:10px;
  cursor:pointer;
  color:#1a1a1a;
  transition:background .15s;
  text-decoration:none;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.nav-back:hover{ background:#FEF0EF; }
.nav-back:active{ background:#f4a9a5; transform:scale(.94); }
.nav-back svg{ display:block; }
.nav-back-hidden{
  visibility:hidden;
  pointer-events:none;
}

/* ── CENTER COLUMN: logo ── */
.nav-center{
  display:flex;
  align-items:center;
  justify-content:center;
}

.nav-logo-link{
  display:flex;
  align-items:center;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.nav-logo-link:active{ opacity:.75; }

.header-logo{
  height:40px;
  width:auto;
  display:block;
}

/* ── RIGHT COLUMN: page-specific actions ── */
.nav-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

/* ── STREAK CHIP (app pages) ── */
.streak-chip{
  font-size:13px;
  font-weight:800;
  color:#E8635A;
  background:#FEF0EF;
  padding:4px 10px;
  border-radius:999px;
  letter-spacing:.2px;
  display:none;
  white-space:nowrap;
}

/* ── HAMBURGER MENU BUTTON (app pages) ── */
.menu-btn{
  width:36px;
  height:36px;
  background:none;
  border:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:6px;
  border-radius:10px;
  transition:background .15s;
  -webkit-tap-highlight-color:transparent;
  flex-shrink:0;
}
.menu-btn:hover{ background:#FEF0EF; }
.menu-btn span{
  display:block;
  width:18px;
  height:2px;
  background:#1a1a1a;
  border-radius:2px;
}

/* ── LANG TOGGLE (index only) ── */
.lang-toggle{
  font-family:'Nunito',sans-serif;
  font-size:13px;
  font-weight:800;
  color:#6b6b6b;
  background:none;
  border:2px solid rgba(0,0,0,.08);
  padding:6px 12px;
  border-radius:10px;
  cursor:pointer;
  transition:border-color .15s, color .15s;
  -webkit-tap-highlight-color:transparent;
}
.lang-toggle:hover{ border-color:#E8635A; color:#E8635A; }

/* ── PAGE BODY OFFSET ── */
.app-main,
.page-content{
  padding-top:56px;
}