/* ============================================================
   TECHCELER — nav.css  (shared navigation)
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: background 0.35s ease, box-shadow 0.35s ease,
    backdrop-filter 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}

.nav__inner {
  width: 100%;
  max-width: var(--maxw-wide);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Scrolled state — glass */
.nav.is-scrolled {
  /* More opaque so the dark logo + links stay readable over ANY content
     (busy images, dark sections) on every page */
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(123, 94, 167, 0.12);
  box-shadow: 0 6px 28px rgba(15, 23, 42, 0.08);
}

/* When over a dark hero, force light text until scrolled */
.nav.on-hero:not(.is-scrolled) .brand__word {
  color: #fff;
}
.nav.on-hero:not(.is-scrolled) .brand__tag {
  color: rgba(255, 255, 255, 0.6);
}
/* White links only on the DESKTOP bar over the hero — never the mobile panel */
.nav.on-hero:not(.is-scrolled) .nav__links .nav__link {
  color: rgba(255, 255, 255, 0.82);
}
.nav.on-hero:not(.is-scrolled) .nav__toggle span {
  background: #fff;
}

/* Brand sizing in nav */
.nav .brand__img {
  height: 30px;
}
/* Over the dark hero (before scroll) show the white wordmark */
.nav.on-hero:not(.is-scrolled) .brand__img--dark {
  display: none;
}
.nav.on-hero:not(.is-scrolled) .brand__img--light {
  display: block;
}
.nav .brand__icon {
  width: 34px;
  height: 34px;
}
.nav .brand__word {
  font-size: 1.3rem;
}
.nav .brand__tag {
  display: none;
}

/* Links */
.nav__links {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav__link {
  position: relative;
  padding: 8px 14px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 8px;
  transition: color 0.2s ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav__link:hover {
  color: var(--purple);
}
.nav.on-hero:not(.is-scrolled) .nav__links .nav__link:hover {
  color: #fff;
}
.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}
.nav__link.is-active {
  color: var(--purple);
}
.nav.on-hero:not(.is-scrolled) .nav__links .nav__link.is-active {
  color: #fff;
}

.nav__cta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav__cta .btn {
  padding: 11px 22px;
  min-height: 44px;
  font-size: 0.86rem;
}

/* Hamburger */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-primary);
  margin-inline: auto;
  transition: transform 0.3s ease, opacity 0.2s ease, background 0.3s ease;
}
.nav.is-open .nav__toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav.is-open .nav__toggle span:nth-child(2) {
  opacity: 0;
}
.nav.is-open .nav__toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile panel */
.nav__panel {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(123, 94, 167, 0.12);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
  padding: 16px clamp(20px, 5vw, 40px) 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 999;
}
.nav.is-open .nav__panel {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav__panel .nav__link {
  padding: 14px 8px;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
/* The panel always has a LIGHT background — keep links dark/readable
   regardless of the nav's over-hero (white-text) state. */
.nav__panel .nav__link,
.nav.on-hero:not(.is-scrolled) .nav__panel .nav__link {
  color: var(--text-secondary);
}
.nav__panel .nav__link:hover,
.nav.on-hero:not(.is-scrolled) .nav__panel .nav__link:hover,
.nav__panel .nav__link.is-active,
.nav.on-hero:not(.is-scrolled) .nav__panel .nav__link.is-active {
  color: var(--purple);
}
.nav__panel .nav__link::after {
  display: none;
}
.nav__panel .btn {
  margin-top: 18px;
}

@media (max-width: 980px) {
  .nav__links,
  .nav__cta .btn {
    display: none;
  }
  .nav__toggle {
    display: flex;
  }
}
@media (min-width: 981px) {
  .nav__panel {
    display: none;
  }
}