/* ==========================================================================
   navigation.css — Sticky header, scroll progress bar, hamburger menu,
                     compact header, and active-link styling
   --------------------------------------------------------------------------
   Depends on css/variables.css tokens: --header-height (64px),
   --header-height-compact (46px, >= 25% shorter), --brand, --brand-accent,
   --ring, --bg, --panel, --text, --on-brand, --z-header (50),
   --z-progress (60), --transition-med (300ms), --transition-fast (200ms),
   radii and spacing tokens.

   DOM hooks (index.html + js/navigation.js):
     header.site-header            sticky header; gets `.compact` past hero,
                                    `.nav-open` while the mobile menu is open
     .scroll-progress              fixed 3px progress bar (JS sets its width %)
     .container.nav                flex row: .brand | .nav-toggle | #nav-menu
     .brand > .dot                 brand mark (gradient dot)
     .nav-toggle > .nav-toggle-bar hamburger button + its 3 bars
     #nav-menu.nav-links           links + #theme.btn.theme-toggle; `.open`
                                   reveals the panel on < 768px
     .nav-links a.active           active section link (brand color)

   REQUIREMENTS
   --------------------------------------------------------------------------
     3.3   fixed, full-width, 3px, brand-colored scroll progress bar
     4.3   hamburger < 768px, keyboard-operable, slide/fade reveal <= 300ms
     4.4   compact header: >= 25% shorter + visible background blur
     10.4  hamburger button is a >= 44x44 touch target on mobile
   ========================================================================== */

/* ==========================================================================
   1. Scroll progress bar (Req 3.3)
   --------------------------------------------------------------------------
   Fixed to the very top of the viewport, spanning the full page width, 3px
   tall, filled with the brand color. Starts at width 0; navigation.js sets
   `style.width = '<pct>%'` from scrollProgress() as the visitor scrolls.
   Sits above the header (--z-progress > --z-header) so it is never covered.
   ========================================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;               /* JS drives this from 0 -> 100% */
  height: 3px;            /* Req 3.3 — 3px tall */
  background-color: var(--brand);
  z-index: var(--z-progress);
  will-change: width;
  pointer-events: none;
}

/* ==========================================================================
   2. Sticky header (Req 4.4 base state)
   --------------------------------------------------------------------------
   position: sticky keeps the bar pinned at the top as content scrolls under
   it. A translucent, blurred backdrop (color-mix of --bg) lets content show
   through while keeping the nav legible. Height, background and blur animate
   so the compact transition (below) stays within the 300ms budget.
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  background-color: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
  transition:
    height var(--transition-med) var(--ease-out),
    background-color var(--transition-med) var(--ease-out),
    box-shadow var(--transition-med) var(--ease-out),
    backdrop-filter var(--transition-med) var(--ease-out),
    -webkit-backdrop-filter var(--transition-med) var(--ease-out);
}

/* The nav row fills the header height and spreads brand | toggle | links. */
.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  height: 100%;
}

/* ==========================================================================
   3. Compact header (Req 4.4 / 4.5)
   --------------------------------------------------------------------------
   navigation.js adds `.compact` once the hero's bottom edge scrolls above the
   viewport top. --header-height-compact (46px) is 46/64 ≈ 0.72 of the default,
   i.e. >= 25% shorter. A stronger blur + shadow makes the compact state
   visibly distinct.
   ========================================================================== */
.site-header.compact {
  height: var(--header-height-compact);          /* >= 25% shorter (Req 4.4) */
  background-color: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(16px) saturate(160%);    /* visible background blur   */
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}

/* ==========================================================================
   4. Brand mark
   ========================================================================== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.brand .dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--brand), var(--brand-accent));
  box-shadow: 0 0 0 3px var(--ring);
}

/* ==========================================================================
   5. Navigation links — desktop (>= 768px, inline horizontal)
   ========================================================================== */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-links a {
  position: relative;
  color: var(--text);
  font-size: 0.95rem;
  padding: 6px 2px;
  transition: color var(--transition-fast) var(--ease-out);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--brand);
  text-decoration: none;
}

/* Active section link uses the brand color (Req 4.2). A thin underline gives
   a non-color-only cue as well. */
.nav-links a.active {
  color: var(--brand);
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--brand);
}

/* Theme toggle pill sits at the end of the links group. */
.nav-links .theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--text);
  font-size: 0.9rem;
  transition:
    background-color var(--transition-fast) var(--ease-out),
    color var(--transition-fast) var(--ease-out);
}

.nav-links .theme-toggle:hover,
.nav-links .theme-toggle:focus-visible {
  background-color: var(--brand);
  color: var(--on-brand);
}

/* ==========================================================================
   6. Hamburger toggle button (Req 4.3, 10.4)
   --------------------------------------------------------------------------
   Hidden at >= 768px (inline links are shown instead); revealed < 768px. The
   button is a 44x44 touch target (Req 10.4) whose three bars morph into an
   "X" when the menu is open (header carries `.nav-open`).
   ========================================================================== */
.nav-toggle {
  display: none;                 /* shown only < 768px (see media query) */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;                   /* Req 10.4 — >= 44x44 */
  height: 44px;
  padding: 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition:
    transform var(--transition-med) var(--ease-out),
    opacity var(--transition-med) var(--ease-out);
}

/* Open state: bars 1 & 3 rotate into an X (7px = bar gap 5px + height 2px),
   bar 2 fades out. */
.site-header.nav-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.nav-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.site-header.nav-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   7. Anchored-section scroll offset (Req 4.1 support)
   --------------------------------------------------------------------------
   Smooth-scrolled headings must clear the sticky header. scroll-margin-top
   reserves the header height (+ a little breathing room) above each anchored
   section so navigation.js's scrollInto()View does not tuck headings under
   the bar.
   ========================================================================== */
#about,
#publications,
#news,
#projects,
#teaching,
#contacts {
  scroll-margin-top: calc(var(--header-height) + var(--space-2));
}

/* ==========================================================================
   8. Mobile navigation — hamburger menu (Req 4.3)
   --------------------------------------------------------------------------
   Below 768px the inline links collapse into an expanding panel anchored under
   the header. It is hidden by default (translated up + faded out) and slides /
   fades into view within 300ms when navigation.js adds `.open`.
   ========================================================================== */
@media (max-width: 767px) {
  /* Reveal the hamburger; hide it again at >= 768px is the default above. */
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-2);
    background-color: color-mix(in srgb, var(--panel) 96%, transparent);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border-bottom: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);

    /* Collapsed (closed) state — slide up + fade out, non-interactive. */
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform var(--transition-med) var(--ease-out),
      opacity var(--transition-med) var(--ease-out),
      visibility var(--transition-med) var(--ease-out);
  }

  /* Open state (<= 300ms slide/fade in). */
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Follow the compact header's shorter height so the panel stays flush. */
  .site-header.compact .nav-links {
    top: var(--header-height-compact);
  }

  /* Full-width tap rows; the active underline is redundant when stacked. */
  .nav-links a {
    width: 100%;
    padding: 10px var(--space-2);
    border-radius: var(--radius-sm);
  }

  .nav-links a.active::after {
    display: none;
  }

  .nav-links .theme-toggle {
    width: 100%;
    justify-content: center;
    margin-top: var(--space-1);
  }
}

/* ==========================================================================
   9. Reduced motion (Req 3.4 / 8.5 alignment)
   --------------------------------------------------------------------------
   Collapse header, hamburger, and menu transitions to instant state changes
   for visitors who prefer reduced motion.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .nav-toggle-bar,
  .nav-links,
  .nav-links a,
  .nav-links .theme-toggle {
    transition-duration: 0.01ms !important;
  }
}