/**
 * NAVIGATION COMPONENT - SITE HEADER
 * 
 * SUMMARY:
 * Responsive navigation system featuring a mobile overlay menu that transforms into 
 * horizontal desktop navigation at 550px breakpoint. Uses modern CSS techniques for 
 * smooth transitions and accessibility.
 * 
 * LAYOUT PATTERNS:
 * Mobile (< 550px):
 * - Full-screen fixed overlay covering viewport
 * - Slide-in animation from right (transform: translateX)
 * - Close button positioned top-right
 * - Burger menu toggle in header
 * - Large touch-friendly text (2rem / 32px)
 * 
 * Desktop (≥ 550px):
 * - Static horizontal inline navigation
 * - No overlay, no animations
 * - Burger and close buttons hidden
 * - Links displayed inline with smaller text
 * 
 * HEADER STRUCTURE:
 * - Grid layout with two columns: logo (1fr) + secondary nav (auto)
 * - Primary nav: Logo + menu links (flexbox)
 * - Secondary nav: Icons + burger button (flexbox)
 * - Intentionally overrides .container max-width for full-width header
 * 
 * KEY FEATURES:
 * 1. Smooth slide-in/out animation with opacity fade for menu items
 * 2. Staggered transitions (transform → visibility → opacity)
 * 3. Desktop explicitly resets all mobile properties with transition: none
 * 4. Resize-safe: transitions disabled at breakpoint to prevent flash
 * 5. Z-index hierarchy: overlay menu (1000) above all content
 * 
 * ACCESSIBILITY:
 * - Semantic <nav> element (in HTML)
 * - aria-expanded on burger button (JS-controlled)
 * - visibility: hidden hides overlay from screen readers when closed
 * - pointer-events: none prevents interaction when closed
 * - Focus management (JS handles focus trap and restoration)
 * - Keyboard support: Escape closes menu, Tab navigates links
 * 
 * STATE MANAGEMENT:
 * - CSS controls layout and animations via .is-open class
 * - JavaScript toggles .is-open and manages aria-expanded
 * - matchMedia API syncs breakpoint behavior with CSS
 * 
 * APPLIED TO: <header class="header"> in index.html
 * RELATED FILES:
 * - main.js: Handles menu open/close, focus management, breakpoint detection
 * - main.css: Base link styles, icon styles, focus indicators
 * 
 * BROWSER COMPATIBILITY:
 * - inset shorthand (supported in all modern browsers)
 * - CSS custom properties (variables)
 * - transform, visibility, pointer-events
 * - No polyfills required for target browsers (modern evergreen)
 */

/* Header grid layout - Logo on left, secondary nav on right */
.header-layout {
  display: grid;
  grid-template-columns: 1fr auto; /* Logo takes available space, secondary nav sizes to content */
  max-width: 100%; /* Intentional override: allows full-width header (vs .container's 80rem constraint) */
  align-items: center;
  gap: var(--nav-section-gap); /* 1rem (16px) */
}

/* ==== Primary navigation: Logo + menu links ==== */

/* Main nav container - Houses logo and primary menu */
.main-nav {
  display: flex;
  align-items: center;
  gap: var(--nav-section-gap); /* 1rem (16px) */
}

/* ==== Secondary navigation: Icons + burger button ==== */

/* Secondary nav container - Always visible on right */
.secondary-nav {
  flex: 0 0 auto; /* Prevents shrinking/growing - maintains fixed size */
  justify-self: end; /* Aligns to right edge of grid cell */
  white-space: nowrap; /* Prevents icon wrapping */
}

/* Secondary nav list - Horizontal icon arrangement */
.secondary-nav-list {
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  gap: var(--nav-section-gap); /* 1rem (16px) */
}

/* ===== MOBILE OVERLAY MENU (< 550px) ===== */

@media (max-width: 549px) {
  /* Primary menu becomes full-screen overlay */
  #primary-menu.main-nav-list {
    position: fixed;
    inset: 0; /* Shorthand for top: 0; right: 0; bottom: 0; left: 0 - covers viewport */
    z-index: 1000; /* Above all other content */

    display: flex;
    flex-direction: column;
    gap: var(--spacing-section-medium); /* 2.5rem (40px) */
    align-items: center;

    margin: 0;
    padding: var(--spacing-section-large) 0; /* 4rem (64px) vertical padding */

    background-color: var(--color-background-page);
    color: var(--color-text-primary);

    /* Closed state - Menu slides off-screen to the right */
    transform: translateX(100%); /* Moves entire width to the right */
    visibility: hidden; /* Hides from screen readers when closed */
    pointer-events: none; /* Prevents interaction when closed */

    /* Staggered transition - Transform animates, then visibility changes */
    transition: transform var(--transition-speed) var(--transition-timing),
      visibility 0s var(--transition-speed); /* Visibility delay prevents flash */
  }

  /* Menu links fade out when closed */
  #primary-menu.main-nav-list > * {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
  }

  /* Open state - Menu slides in from right */
  #primary-menu.main-nav-list.is-open {
    transform: translateX(0); /* Returns to natural position */
    visibility: visible; /* Visible to screen readers */
    pointer-events: auto; /* Restores interaction */
    transition-delay: 0s; /* No delay on opening */
  }

  /* Menu links fade in after slide animation */
  #primary-menu.main-nav-list.is-open > * {
    opacity: 1;
    transition-delay: 0.2s; /* Waits for slide animation to nearly finish */
  }

  /* Larger text for mobile overlay */
  .nav-link {
    font-size: var(--font-size-mobile-menu); /* 2rem (32px) */
  }

  /* Close button - Fixed in top-right corner */
  .nav-close {
    position: absolute;
    top: var(--spacing-page); /* 0.65rem (10.4px) */
    right: var(--spacing-page); /* 0.65rem (10.4px) */
    font-size: var(--font-size-mobile-menu); /* 2rem (32px) */
    line-height: 1; /* Removes extra space around icon */
  }
}

/* ===== DESKTOP NAVIGATION (≥ 550px) ===== */

@media (min-width: 550px) {
  /* Primary menu returns to inline horizontal layout */
  #primary-menu.main-nav-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--nav-section-gap); /* 1rem (16px) */

    /* Reset mobile overlay properties */
    position: static; /* Returns to document flow */
    transform: none; /* Removes slide transform */
    visibility: visible;
    pointer-events: auto;
    opacity: 1;

    /* Disable transitions to prevent flash during resize */
    transition: none !important;
  }

  /* Ensure menu links are visible on desktop */
  #primary-menu.main-nav-list > * {
    opacity: 1;
    transition: none; /* No fade animation on desktop */
  }

  /* Hide mobile-only controls on desktop */
  .nav-toggle,
  .nav-close {
    display: none;
  }
}

@media (min-width: 768px) {
  .nav-link {
    font-size: var(--font-size-body-large); /* 1.125rem (18px) */
    padding-inline-end: var(--spacing-page); /* 0.65rem (10.4px) - Right padding for link spacing */
  }

  .header {
    padding-block: 0.3rem; /* 0.3rem (4.8px) - Subtle vertical padding for header breathing room */
  }
}