/* ═══════════════════════════════════════════════════
   AYO THEME — Navigation
   Pill nav · Hamburger · Mobile drawer
═══════════════════════════════════════════════════ */

/* ── Fixed wrapper ── */
.ayo-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 10px var(--sp-6) 0;
}

/* ── Pill ── */
.ayo-nav__pill {
  max-width: 1280px;
  margin: 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-5);
  background: var(--gl-hv);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--gl-bdr);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md), var(--gl-in);
  transition: box-shadow var(--t-smooth);
}
.ayo-nav__pill.is-scrolled {
  box-shadow: var(--sh-lg), var(--gl-in);
}

/* Dark variant (entregador page) */
.ayo-nav__pill--dark {
  background: var(--gd-nav);
  border-color: var(--gd-bdr);
  box-shadow: var(--sh-md), var(--gd-in);
}
.ayo-nav__pill--dark.is-scrolled {
  box-shadow: 0 8px 32px rgba(0,0,0,.44), var(--gd-in);
}

/* ── Logo ── */
.ayo-nav__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* Logo em texto (fallback sem imagem) */
.ayo-nav__logo--text {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--black-900);
  letter-spacing: -0.02em;
}
.ayo-nav__logo--text em {
  font-style: normal;
  color: var(--gold-500);
}
.ayo-nav__pill--dark .ayo-nav__logo--text { color: #FFFFFF; }

/* Logo com imagem — WordPress injeta custom-logo-link > img
 *
 * Regra principal: nunca distorcer.
 * - height: 36px fixa a altura dentro da pill (56px - 10px padding × 2)
 * - width: auto preserva a proporção original da imagem
 * - Sem max-width artificial, sem object-fit (que causa distorção
 *   quando container e imagem têm proporções diferentes)
 * - overflow: visible no container para não cortar logos quadrados
 */
.ayo-nav__logo .custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0; /* remove espaço fantasma abaixo do img */
}
.ayo-nav__logo .custom-logo-link img,
.ayo-nav__logo img.custom-logo {
  display: block;
  height: 36px;       /* altura fixa dentro da pill */
  width: auto;        /* largura proporcional — nunca distorce */
  max-height: 36px;
  /* sem object-fit, sem max-width — a imagem define sua própria largura */
}

/* ── Desktop links ── */
.ayo-nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  list-style: none;
}
.ayo-nav__links a {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  /* WCAG AA: #525252 sobre #FAFAFA = 5.9:1 ✅ */
  color: var(--black-500);
  transition: color var(--t-fast);
  text-decoration: none;
}
.ayo-nav__links a:hover { color: var(--gold-700); }
.ayo-nav__pill--dark .ayo-nav__links a { color: var(--black-200); }
.ayo-nav__pill--dark .ayo-nav__links a:hover { color: var(--gold-400); }

/* ── CTA button ── */
.ayo-nav__cta {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 22px;
  background: var(--gold-500);
  color: var(--gold-dark);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-g);
  transition: all var(--t-spring);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.ayo-nav__cta:hover {
  background: var(--gold-600);
  transform: scale(1.04);
}
.ayo-nav__cta:active { transform: scale(0.97); }

/* ── Hamburger button (hidden desktop) ── */
.ayo-nav__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-2);
  flex-direction: column;
  gap: 5px;
  border-radius: var(--r-md);
  transition: background var(--t-fast);
  flex-shrink: 0;
}
.ayo-nav__hamburger:hover { background: var(--surface-mid); }
.ayo-nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--black-700);
  border-radius: 1px;
  transition: all var(--t-smooth);
  pointer-events: none;
}
.ayo-nav__pill--dark .ayo-nav__hamburger span { background: var(--black-200); }
.ayo-nav__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.ayo-nav__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.ayo-nav__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile drawer ── */
.ayo-mobile-menu {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 400;
  background: rgba(250, 250, 250, 0.97);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-24) var(--sp-8);
}
.ayo-mobile-menu.is-open {
  display: flex;
  animation: ayo-menu-in 0.22s ease;
}
@keyframes ayo-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ayo-mobile-menu a {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--black-900);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-xl);
  transition: all var(--t-spring);
  text-align: center;
  width: 100%;
  max-width: 280px;
  text-decoration: none;
}
.ayo-mobile-menu a:hover {
  background: var(--gold-50);
  color: var(--gold-700);
}

.ayo-mobile-menu__cta {
  background: var(--gold-500) !important;
  color: var(--gold-dark) !important;
  box-shadow: var(--sh-g);
  margin-top: var(--sp-3);
}
.ayo-mobile-menu__cta:hover {
  background: var(--gold-600) !important;
}

.ayo-mobile-menu__close {
  position: absolute;
  top: var(--sp-8);
  right: var(--sp-8);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--surface-high);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--black-600);
  transition: all var(--t-fast);
}
.ayo-mobile-menu__close:hover {
  background: var(--surface-mid);
  color: var(--black-900);
}

/* ─────────────────────
   RESPONSIVE
───────────────────── */
@media (max-width: 768px) {
  .ayo-nav { padding: 10px var(--sp-4) 0; }
  .ayo-nav__links { display: none; }
  .ayo-nav__cta   { display: none; } /* CTA no drawer mobile */
  .ayo-nav__hamburger { display: flex; }
}