/* ==========================================================================
   FAE Nav
   --------------------------------------------------------------------------
   Ported from Base44 source: src/components/landing/Nav.jsx + Logo.jsx.
   Structural/positioning styles specific to the nav — color/pill/link
   treatments live in fae-components.css (.fae-nav-link, .fae-lime-button,
   .fae-nav-shell) and are reused here, not duplicated.
   ========================================================================== */

/* Fixed wrapper — Base44: <header className="fixed inset-x-0 top-0 z-50 px-4 pt-4 sm:px-6"> */
.fae-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  padding: 1rem 1rem 0; /* pt-4 px-4 */
}
@media (min-width: 640px) {
  .fae-header {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem;
  }
}

/* Pill nav bar — Base44:
   className="mx-auto flex max-w-[1180px] items-center justify-between
   rounded-full border border-white/[0.08] bg-[#0f0f10]/80 px-3 py-1.5 backdrop-blur-xl"
   .fae-nav-shell (box-shadow) already ported in fae-components.css — combined here. */
.fae-nav {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 1180px;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--fae-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(15, 15, 16, 0.8); /* #0f0f10 at 80% */
  padding: 0.375rem 0.75rem; /* py-1.5 px-3 */
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

/* Logo — Base44:
   className="inline-flex min-h-11 items-center text-[13px] font-black
   tracking-[-0.03em] text-white", wrapped in a `pl-3` div in Nav.jsx */
.fae-nav__logo {
  padding-left: 0.75rem; /* pl-3 */
}
.fae-logo {
  display: inline-flex;
  min-height: 2.75rem; /* min-h-11 */
  align-items: center;
  font-size: 13px;
  font-weight: 900; /* font-black */
  letter-spacing: -0.03em;
  color: var(--fae-color-white);
  text-decoration: none;
}
.fae-logo__muted {
  color: #8a8a8f;
}
.fae-logo__mark {
  margin-left: 0.125rem; /* ml-0.5 */
  font-size: 7px;
}

/* Desktop link/CTA group — Base44: "hidden items-center gap-1 md:flex" */
.fae-nav__links {
  display: none;
  align-items: center;
  gap: 0.25rem; /* gap-1 */
}
@media (min-width: 768px) {
  .fae-nav__links {
    display: flex;
  }
}
.fae-nav__cta {
  margin-left: 0.5rem; /* ml-2 */
  padding-left: 1.5rem; /* px-6, overrides .fae-lime-button's default px-7 */
  padding-right: 1.5rem;
}

/* Mobile hamburger toggle — Base44:
   "mr-1 grid h-11 w-11 place-items-center rounded-full text-white md:hidden" */
.fae-nav__toggle {
  display: grid;
  margin-right: 0.25rem; /* mr-1 */
  height: 2.75rem; /* h-11 */
  width: 2.75rem;  /* w-11 */
  place-items: center;
  border-radius: var(--fae-radius-pill);
  border: none;
  background: transparent;
  color: var(--fae-color-white);
  cursor: pointer;
}
@media (min-width: 768px) {
  .fae-nav__toggle {
    display: none;
  }
}

/* Hamburger / close icon — CSS-drawn (no icon library dependency in WP theme).
   Two states via [aria-expanded] on the button, toggled by fae-main.js. */
.fae-nav__toggle-icon,
.fae-nav__toggle-icon::before,
.fae-nav__toggle-icon::after {
  display: block;
  position: relative;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.fae-nav__toggle-icon::before,
.fae-nav__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.fae-nav__toggle-icon::before {
  top: -6px;
}
.fae-nav__toggle-icon::after {
  top: 6px;
}
.fae-nav__toggle[aria-expanded="true"] .fae-nav__toggle-icon {
  background: transparent;
}
.fae-nav__toggle[aria-expanded="true"] .fae-nav__toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.fae-nav__toggle[aria-expanded="true"] .fae-nav__toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Mobile dropdown panel — Base44:
   "mx-auto mt-2 max-w-[1180px] rounded-[26px] border border-white/[0.08]
   bg-[#0f0f10]/95 p-3 backdrop-blur-xl md:hidden" */
.fae-mobile-nav {
  margin: 0.5rem auto 0; /* mt-2 */
  max-width: 1180px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(15, 15, 16, 0.95); /* #0f0f10 at 95% */
  padding: 0.75rem; /* p-3 */
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .fae-mobile-nav {
    display: none !important;
  }
}
.fae-mobile-nav[hidden] {
  display: none;
}

/* Mobile link — Base44:
   "flex min-h-11 items-center rounded-full px-4 text-sm text-[#c7c7ca]
   hover:bg-white/5 hover:text-white" */
.fae-mobile-nav__link {
  display: flex;
  min-height: 2.75rem; /* min-h-11 */
  align-items: center;
  border-radius: var(--fae-radius-pill);
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem;
  font-size: 0.875rem; /* text-sm */
  color: #c7c7ca;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.fae-mobile-nav__link:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--fae-color-white);
}

.fae-mobile-nav__cta {
  margin-top: 0.5rem; /* mt-2 */
  width: 100%;
}