/* ============================================
   HEADER STYLES — HighFlowAI
   Styles for the navigation bar (header.html partial).

   IMPORTANT: depends on commonStyles.css for design tokens
   (--transition-base, --accent-soft, --text-headline, etc.).
   Always load commonStyles.css BEFORE this file.
   ============================================ */


/* ============================================
   1. NAVBAR — sticky, transparent → blurred on scroll

   The scrolled state is the most worked-on
   surface on the page (every section eventually
   slides behind it), so it gets the most polish:

     – Higher opacity backdrop (0.85 vs the
       previous 0.75) so text reads cleanly
       against busier sections that scroll
       under it.
     – Saturation bumped to 150% so colour
       sections (the warm hero, emerald
       services) don't lose their identity
       through the blur.
     – Bottom border becomes a horizontal-fade
       gradient (handled by the .nav::after
       below) instead of a solid line —
       matches the accent treatment used
       elsewhere (process rail, contact hero
       bottom accent).
     – Subtle drop shadow underneath gives
       the bar a "lifted off the page" feel.
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 18px 0;
  transition:
    background var(--transition-base),
    box-shadow var(--transition-base);
}

.nav.scrolled {
  background: rgba(5, 9, 8, 0.85);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.4);
}

/* Bottom accent line — invisible by default,
   fades in when .nav.scrolled is added. Same
   gradient treatment as the accent lines used
   on the process rail and contact hero. */
.nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(var(--accent-rgb), 0.3) 30%,
    rgba(var(--accent-rgb), 0.3) 70%,
    transparent
  );
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.nav.scrolled::after {
  opacity: 1;
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
}


/* ============================================
   1a. LOGO — header-specific size override + hover

   The .logo rule in commonStyles.css §6 is
   shared between header and footer at the base
   1.15rem text + 24px icon size. The footer
   wants that smaller, restrained scale — but
   in the header, the brand mark needs to read
   prominently against the bumped nav-link
   size below.

   Override scoped to .nav so it only affects
   the header instance. Both text and icon
   scale up proportionally — preserves the
   ~25% larger logo-vs-nav-link visual
   hierarchy that was already in place at the
   smaller sizes.

   Hover treatment: subtle icon scale (1.05×)
   on mouseover so the logo signals it's
   interactive without doing anything theatrical.

   Knock-on dials if this lands wrong:
     – Gap between icon and text inherits from
       commonStyles §6 (gap: 8px). If the
       bigger elements need more breathing
       room, override here as `gap: 10px` or
       `12px`.
     – Trademark superscript inside .logo-text
       is sized in `em` units, so it scales
       automatically with the parent font-
       size — no extra rule needed.
   ============================================ */
.nav .logo {
  font-size: 1.4rem;
}

.nav .logo-icon {
  width: 28px;
  height: 28px;
  transition: transform var(--transition-base);
}

.nav .logo:hover .logo-icon {
  transform: scale(1.05);
}


/* ============================================
   2. NAV LINKS (DESKTOP DEFAULT)

   margin-left: auto pushes the right-side group
   (links + CTA) all the way to the right edge.

   Hover/active indicator pattern: each link
   carries an ::after underline that's hidden
   by default (transform: scaleX(0)). Hover
   animates it to scaleX(1) from the centre.
   Active state holds scaleX(1) permanently.
   This gives the hover and active states a
   clear visual distinction — the previous
   approach used the same bg-pill for both,
   which made it hard to tell which page you
   were currently on while mousing through the
   nav.

   Spacing tightened slightly: gap between
   links bumped from 4px to 8px, link padding
   from 8/16 to 10/18 — both to give the
   bigger 1.1rem text more breathing room.
   ============================================ */
.nav-links {
  display: flex;
  gap: 8px;
  list-style: none;
  margin-left: auto;
}

.nav-links a {
  position: relative;
  padding: 10px 18px;
  font-size: 1.1rem;
  color: var(--text-mid);
  transition: color var(--transition-fast);
}

/* Underline indicator — hidden by default,
   grows from centre on hover, stays
   permanently visible when .active is set
   on the link (typically by JS that flags
   the current page in the nav). */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 4px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-base);
}

.nav-links a:hover {
  color: var(--text-headline);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

/* Active state: link colour shifts to headline
   white, underline stays at scaleX(1) and
   gains a small accent glow so the current
   page is unambiguously marked even at a
   glance. */
.nav-links a.active {
  color: var(--text-headline);
}

.nav-links a.active::after {
  transform: scaleX(1);
  box-shadow: 0 0 6px var(--accent-glow);
}


/* ============================================
   3. CTA BUTTON GROUP

   Small left margin gives the CTA visual
   breathing room from the nav links — keeps
   the eye registering it as a separate
   action rather than just another link.
   ============================================ */
.nav-cta {
  display: flex;
  align-items: center;
  margin-left: 8px;
}


/* ============================================
   4. HAMBURGER TOGGLE
   Hidden on desktop, shown on mobile.
   Three <span>s morph into an X when .active is added.
   common.js handles the toggle and the aria-expanded attr.
   ============================================ */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 101;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-headline);
  border-radius: 2px;
  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
  transform-origin: center;
}

/* X transformation when menu is open */
.menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ============================================
   5. RESPONSIVE — MOBILE NAV

   ⚠️ LOCKSTEP: The 880px breakpoint here MUST sit
   exactly one pixel below the (min-width: 881px)
   matchMedia query in common.js setupMenuToggle().
   If they drift apart, the viewport ends up with
   a one-pixel window where neither desktop nor
   mobile nav styles apply. Change one, change the
   other.

   Below 880px:
     - the hamburger appears (order: 99 → rightmost)
     - the CTA stays visible, pushed right by margin-left: auto
     - .nav-links becomes an absolute-positioned dropdown
       below the navbar, hidden until .active is added

   Mobile keeps a simpler treatment than desktop:
   the underline indicator pattern doesn't read
   well in a stacked vertical list (each link
   already gets its own row, divided by border-
   bottom), so the mobile dropdown uses an
   accent-colour shift on active/hover instead.
   ============================================ */
/* Lockstep with common.js setupMenuToggle (min-width: 881px) — see §5 header. */
   @media (max-width: 880px) {
  .menu-toggle {
    display: flex;
    order: 99;
  }

  .nav-cta {
    margin-left: auto;
  }

  .nav-cta .btn {
    padding: 10px 18px;
    font-size: 0.85rem;
  }

  /* Mobile dropdown — hidden by default */
  .nav-links {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 8px 24px 16px;
    flex-direction: column;
    gap: 0;

    background: rgba(5, 9, 8, 0.96);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);

    /* Closed state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity var(--transition-base),
      visibility var(--transition-base),
      transform var(--transition-base);
    pointer-events: none;
  }

  .nav-links.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-links li {
    width: 100%;
    border-bottom: 1px solid var(--border-subtle);
  }

  .nav-links li:last-child {
    border-bottom: none;
  }

  .nav-links a {
    display: block;
    padding: 16px 0;
    font-size: 1rem;
    color: var(--text-primary);
    background: transparent;
  }

  /* Suppress the desktop underline indicator
     on mobile — the row dividers already
     handle separation, and an underline inside
     a full-width tappable row reads as
     decoration rather than wayfinding. */
  .nav-links a::after {
    display: none;
  }

  .nav-links a:hover,
  .nav-links a.active {
    color: var(--accent);
    background: transparent;
  }
}