/* ── Datapol shared nav ─────────────────────────────────────────────────────
   Loaded by all electoral pages. Uses CSS variables defined per-page (:root).
   ────────────────────────────────────────────────────────────────────────── */

/* ── Nav bar ─────────────────────────────────────────────────────────────── */
.nav {
  background: var(--text, #1a1209);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  height: 32px;
  gap: 0;
  flex-shrink: 0;
  position: relative;
}
.nav-brand {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 14px;
  color: var(--sand, #d9c9b4);
  letter-spacing: 0.05em;
  margin-right: 0.5rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-sep { width: 1px; height: 14px; background: #333; margin: 0 0.4rem; flex-shrink: 0; }
.nav-item {
  font-size: 9px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #555; padding: 0 0.5rem;
  cursor: pointer; text-decoration: none; transition: color 0.15s;
  white-space: nowrap; flex-shrink: 0;
}
.nav-item.active { color: var(--terra, #c4603a); }
.nav-item:hover:not(.active) { color: #999; }
.nav-pill { font-size: 8px; background: #333; color: #666; border-radius: 2px; padding: 1px 5px; margin-left: 4px; }

/* ── Generic dropdown (country + process share this) ─────────────────────── */
.nav-dropdown-wrap { position: relative; display: flex; align-items: center; flex-shrink: 0; }

.nav-dropdown-btn {
  display: flex; align-items: center; gap: 0.3rem;
  background: none; border: none; cursor: pointer;
  color: var(--sand, #d9c9b4);
  padding: 0 0.4rem; height: 32px;
  font-family: 'Bebas Neue', Arial Black, Arial, sans-serif;
  font-size: 13px; letter-spacing: 0.07em;
  transition: color .15s; flex-shrink: 0;
}
.nav-dropdown-btn:hover { color: #fff; }
.nav-chevron { margin-left: 2px; opacity: 0.5; transition: transform .2s; flex-shrink: 0; }
.nav-dropdown-wrap.open .nav-chevron { transform: rotate(180deg); opacity: 1; }

.nav-dropdown {
  display: none; position: fixed; top: 32px; z-index: 1999;
  background: #1a1209; border: 1px solid #2d2010; border-top: none;
  border-radius: 0 0 5px 5px; box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  flex-direction: column; min-width: 160px; overflow: hidden;
}
.nav-dropdown.open { display: flex; }

.nav-dropdown-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: #666;
  text-decoration: none; transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-dropdown-item:not(:last-child) { border-bottom: 1px solid #211508; }
.nav-dropdown-item.active { color: var(--terra, #c4603a); }
.nav-dropdown-item:not(.active):hover { color: var(--sand, #d9c9b4); background: #221309; }

/* ── Social icons ────────────────────────────────────────────────────────── */
.nav-social { display:flex; align-items:center; gap:0.5rem; margin-left:auto; }
.nav-social-link { color:#666; background:none; border:none; cursor:pointer; padding:0; display:flex; align-items:center; text-decoration:none; transition:color .15s; }
.nav-social-link:hover { color:#ccc; }
.nav-yape-label { font-family:'Bebas Neue',Arial Black,Arial,sans-serif; font-weight:900; font-size:14px; letter-spacing:.1em; color:var(--sand,#d9c9b4); transition:color .15s; }
.nav-yape-btn:hover .nav-yape-label { color:#ffffff; }
.nav-author { font-family:'Bebas Neue',Arial Black,Arial,sans-serif; font-size:14px; letter-spacing:.08em; color:var(--sand,#d9c9b4); white-space:nowrap; }

/* ── Mobile nav ──────────────────────────────────────────────────────────── */
.nav-hamburger { display:none; align-items:center; color:var(--sand,#d9c9b4); background:none; border:none; cursor:pointer; padding:0; margin-right:0.5rem; flex-shrink:0; }
.nav-mobile-menu { display:none; position:fixed; top:32px; left:0; right:0; z-index:1998; background:#1a1209; border-bottom:2px solid #2d2010; flex-direction:column; box-shadow:0 8px 24px rgba(0,0,0,0.55); overflow-y:auto; max-height:calc(100vh - 32px); }
.nav-mobile-menu.open { display:flex; }

/* Section headers — sand color so they're visible on dark background */
.nav-mob-section { font-size:8px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--sand,#d9c9b4); opacity:0.45; padding:0.6rem 1.25rem 0.2rem; }
.nav-mob-divider { height:1px; background:#251810; margin:0.3rem 0; }
.nav-mob-item { font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:#555; padding:0.65rem 1.25rem; cursor:default; border-bottom:1px solid #1e1208; transition:color .15s; }
.nav-mob-item:last-child { border-bottom:none; }
.nav-mob-item.active { color:var(--terra,#c4603a); }
.nav-mob-item.clickable { cursor:pointer; }
.nav-mob-item.clickable:hover { color:#999; }
.nav-mob-country { font-size:12px; padding:0.6rem 1.25rem; display:flex; align-items:center; gap:0.5rem; }
.nav-mob-country.active { color:var(--sand,#d9c9b4); }

@media (max-width: 640px) {
  html { overflow-x: hidden; }
  .nav-item, .nav > .nav-sep { display: none !important; }
  .nav-dropdown-wrap { display: none; }
  .nav-hamburger { display: flex; }
  .nav-social-link:not(.nav-yape-btn) { display: none; }
}