/* ============================================================
   ÔXI — COZINHA NORDESTINA
   Componentes · Navbar
   ============================================================ */

/* ── NAVBAR ─────────────────────────────────────────────── */
.navbar {
  background-color: var(--cor-areia) !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-navbar);
  padding: var(--space-5) 0;
  transition: padding var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.navbar.scrolled {
  background: var(--areia);
  padding: var(--space-4) 0;
  box-shadow: 0 2px 20px rgba(15, 15, 13, 0.08);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Logo */
.navbar__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  z-index: calc(var(--z-navbar) + 1);
}
.navbar__logo svg {
  height: 44px;
  width: auto;
  transition: opacity var(--duration-base) var(--ease-out);
}
.navbar__logo:hover svg { opacity: 0.8; }

/* Nav Links */
.navbar__links,
.navbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.navbar__link {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde-musgo);
  position: relative;
  padding-bottom: var(--space-1);
  transition: color var(--duration-fast) var(--ease-out);
}

.navbar__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--ferrugem);
  transition: width var(--duration-base) var(--ease-out);
}

.navbar__link:hover,
.navbar__link.active {
  color: var(--ferrugem);
}

.navbar__link:hover::after,
.navbar__link.active::after {
  width: 100%;
}

/* Active dot indicator */
.navbar__link.active::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ferrugem);
}

/* CTA reservar */
.navbar__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--areia);
  background: var(--verde-musgo);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  transition: background var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}
.navbar__cta:hover {
  background: var(--ferrugem);
  transform: translateY(-1px);
}

/* Hamburger */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  z-index: calc(var(--z-navbar) + 1);
  padding: var(--space-2);
}
.navbar__hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--verde-musgo);
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out),
              width var(--duration-base) var(--ease-out);
  transform-origin: center;
}

/* Hamburger estado aberto */
.navbar__hamburger.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
  background: var(--areia);
}
.navbar__hamburger.open span:nth-child(2) {
  opacity: 0;
  width: 0;
}
.navbar__hamburger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
  background: var(--areia);
}

/* ── MENU MOBILE FULLSCREEN ─────────────────────────────── */
.mobile-menu,
.navbar__fullmenu {
  position: fixed;
  inset: 0;
  background: var(--verde-musgo);
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-24) var(--container-padding);
  clip-path: circle(0% at calc(100% - 2.5rem) 2.5rem);
  transition: clip-path 0.7s var(--ease-out);
  pointer-events: none;
}

.mobile-menu.open,
.navbar__fullmenu.open {
  clip-path: circle(150% at calc(100% - 2.5rem) 2.5rem);
  pointer-events: all;
}

.fullmenu__bg-text {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(4rem, 15vw, 12rem);
  font-weight: 400;
  color: rgba(245, 237, 214, 0.06);
  pointer-events: none;
  user-select: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.fullmenu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
  position: relative;
  z-index: 1;
}

.fullmenu__link {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 400;
  color: var(--areia);
  line-height: 1;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.navbar__fullmenu.open .fullmenu__link {
  opacity: 1;
  transform: translateY(0);
}

.navbar__fullmenu.open .fullmenu__link:nth-child(1) { transition-delay: 0.15s; }
.navbar__fullmenu.open .fullmenu__link:nth-child(2) { transition-delay: 0.20s; }
.navbar__fullmenu.open .fullmenu__link:nth-child(3) { transition-delay: 0.25s; }
.navbar__fullmenu.open .fullmenu__link:nth-child(4) { transition-delay: 0.30s; }
.navbar__fullmenu.open .fullmenu__link:nth-child(5) { transition-delay: 0.35s; }
.navbar__fullmenu.open .fullmenu__link:nth-child(6) { transition-delay: 0.40s; }
.navbar__fullmenu.open .fullmenu__link:nth-child(7) { transition-delay: 0.45s; }

.fullmenu__link:hover { color: var(--ferrugem-claro); }

.fullmenu__footer {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out) 0.5s;
}
.navbar__fullmenu.open .fullmenu__footer {
  opacity: 0.6;
}
.fullmenu__footer p {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--areia-escuro);
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.mobile-menu__link {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 400;
  color: var(--areia);
  line-height: 1;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.mobile-menu.open .mobile-menu__link {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu.open .mobile-menu__link:nth-child(1) { transition-delay: 0.15s; }
.mobile-menu.open .mobile-menu__link:nth-child(2) { transition-delay: 0.20s; }
.mobile-menu.open .mobile-menu__link:nth-child(3) { transition-delay: 0.25s; }
.mobile-menu.open .mobile-menu__link:nth-child(4) { transition-delay: 0.30s; }
.mobile-menu.open .mobile-menu__link:nth-child(5) { transition-delay: 0.35s; }
.mobile-menu.open .mobile-menu__link:nth-child(6) { transition-delay: 0.40s; }

.mobile-menu__link:hover { color: var(--ferrugem-claro); }

.mobile-menu__footer {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out) 0.5s;
}
.mobile-menu.open .mobile-menu__footer {
  opacity: 0.5;
}
.mobile-menu__footer p {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--areia-escuro);
}

/* ── NAVBAR HERO (apenas index.html: transparente no topo, sólida ao scroll) ── */
.navbar--hero {
  background: transparent !important;
}
.navbar--hero .navbar__link,
.navbar--hero .navbar__hamburger span {
  color: var(--areia);
}
.navbar--hero.scrolled {
  background: var(--areia) !important;
}
.navbar--hero.scrolled .navbar__link {
  color: var(--verde-musgo);
}
.navbar--hero.scrolled .navbar__hamburger span {
  background: var(--verde-musgo);
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .navbar__links,
  .navbar__nav { display: none; }
  .navbar__cta.desktop-only { display: none; }
  .navbar__hamburger { display: flex; }
}