/* ═══════════════════════════════════════════════
   HEADER + NAV DRAWER — Anigami
   ═══════════════════════════════════════════════ */

/* ── Header fix ── */
.anigami-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none; /* deixa passar clics al canvas del hero */
}

/* ── Logo — WordPress genera <a class="custom-logo-link"> ── */
.anigami-header .custom-logo-link {
  pointer-events: auto;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.anigami-header .custom-logo-link img {
  height: 36px;
  width: auto;
  display: block;
  max-width: 160px;
}

/* ── Hamburger ── */
.hamburger {
  width: 34px; height: 34px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  background: none;
  border: none;
  padding: 3px;
  transition: opacity var(--transition);
}
.anigami-header .hamburger { pointer-events: auto; }
.hamburger:hover { opacity: 0.7; }

/* Fila doble (part superior) */
.hamburger-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
}
.hamburger-row span {
  display: block;
  width: 42%; height: 2px;
  background: #fff;
  transition: all var(--transition);
}

/* Línies simples (part inferior) */
.hamburger-line {
  display: block;
  width: 100%; height: 2px;
  background: #fff;
  margin-bottom: 3px;
  transition: all var(--transition);
}
.hamburger-line:last-child { margin-bottom: 0; }

/* Estat obert: rows desapareixen, línies formen X */
.hamburger.open .hamburger-row {
  opacity: 0; height: 0; margin: 0; overflow: hidden;
}
/* nth-child 4/5/6 perquè les rows ocupen les posicions 1/2/3 */
.hamburger.open span:nth-child(4) {
  transform: rotate(0deg) translate(2px, 5px);
}
.hamburger.open span:nth-child(5) { 
    transform: rotate(0deg) translate(2px, 5px);
}
.hamburger.open span:nth-child(6) {
  transform: rotate(0deg) translate(2px, -10px);
}

/* ── Nav drawer (sidebar dreta) ── */
.anigami-nav-drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 200;
  width: 280px;
  height: 100vh;
  background: rgba(30, 30, 28, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid var(--color-border);
  padding: 90px 36px 40px;
  transform: translateX(100%);
  transition: transform var(--transition-menu);
  box-shadow: var(--shadow-menu);
  overflow-y: auto;
}
.anigami-nav-drawer.open { transform: translateX(0); }

/* Botó tancar dins el drawer */
.nav-drawer-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.nav-drawer-close:hover {
  color: #fff;
}


/* Llista del menú de WordPress */
.anigami-nav-drawer .nav-menu-list {
  list-style: none;
  margin: 0; padding: 0;
}
.anigami-nav-drawer .nav-menu-list li { display: block; }
.anigami-nav-drawer .nav-menu-list a {
  display: block;
  padding: 14px 0;
  font-size: var(--text-nav);
  font-weight: 500;
  letter-spacing: var(--ls-nav);
  color: var(--color-text-muted);
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border-soft);
  transition: color var(--transition);
}
.anigami-nav-drawer .nav-menu-list a:hover,
.anigami-nav-drawer .nav-menu-list .current-menu-item > a,
.anigami-nav-drawer .nav-menu-list .current-page-ancestor > a {
  color: #fff;
}

/* ── Overlay ── */
.anigami-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility 0s var(--transition);
  cursor: pointer;
}
.anigami-nav-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition);
}

/* ── Tanca al press ESC (focus visible) ── */
.anigami-nav-drawer:focus-within { outline: none; }