/**
 * Shared Navigation Component Styles
 * Organizes navigation into logical groups for better UX
 * Enhanced with media.css responsive integration
 * 
 * CONSOLIDATED UNIVERSAL SELECTORS
 * Contains global resets and accessibility rules for consistent behavior
 * 
 * OPTIMIZATION UPDATES:
 * ✅ Standardized breakpoint system aligned with media.css (360px, 375px, 390px, 428px, 768px, 1024px, 1280px)
 * ✅ Centralized z-index layering system using CSS custom properties
 * ✅ Reduced !important usage where CSS specificity can be used instead
 * ✅ Maintained !important for necessary JavaScript override scenarios
 * ✅ Improved consistency in media query syntax with mobile-first approach
 * ✅ Integrated media.css responsive variables: --container-padding, --font-scale, --touch-target-min
 * ✅ Implemented responsive typography scaling with --font-scale multipliers
 * ✅ Unified container padding system across all responsive breakpoints
 * 
 * DEPENDENCIES:
 * This file depends on:
 * - media.css (responsive variables)
 * - settings-menu.css (settings dropdown styles)
 * - footer.css (footer component styles)
 * These dependencies are loaded via css-layers.css architecture
 */

/* stylelint-disable alpha-value-notation, color-function-alias-notation, color-function-notation, comment-empty-line-before, declaration-empty-line-before, media-feature-range-notation, media-feature-name-value-no-unknown, no-descending-specificity, property-no-vendor-prefix */

/* ARCHITECTURE NOTE:
   CSS layer order is declared in css-layers.css which loads first.
   This ensures proper layer hierarchy across the entire application. */

/* ===== COMPONENTS LAYER - Base Navigation Styles ===== */
@layer components {
  /* Header container layout: logo, nav toggle, and nav sit side-by-side */
  .header .header-container,
  #navigation-container .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    box-sizing: border-box;
  }

  /* Ensure logo never shrinks or overlaps links */
  .header .logo,
  #navigation-container .logo {
    display: flex;
    align-items: center;
    max-width: 100%;
  }

  /* Let the nav take remaining space cleanly */
  .header .main-nav,
  #navigation-container .main-nav {
    flex: 1 1 auto;
    min-width: 0; /* allows flex children to shrink without overflow */
  }

  /* Tighten spacing on small screens; increase on desktop */
  @media (min-width: 768px) {
    .header .header-container,
    #navigation-container .header-container {
      gap: var(--space-6);
    }
  }

  @media (min-width: 1024px) {
    .header .header-container,
    #navigation-container .header-container {
      gap: var(--space-8);
    }
  }
  /* Navigation container responsive sizing */
  #navigation-container {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* Ensure direct children and inner header container scale correctly */
  #navigation-container > * {
    width: 100%;
    box-sizing: border-box;
  }

  #navigation-container .header-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    box-sizing: border-box;
  }

  /* Tablet (≥768px): provide inner padding and center */
  @media (min-width: 768px) {
    #navigation-container {
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
      max-width: 100%;
    }

    #navigation-container .header-container {
      max-width: var(--content-width-normal); /* Tablet container width */
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
    }
  }

  /* Desktop (≥1024px): constrain width for better alignment */
  @media (min-width: 1024px) {
    #navigation-container {
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
      max-width: var(--container-xl);
    }

    #navigation-container .header-container {
      max-width: var(--container-xl); /* Desktop container width */
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
    }
  }
  /* Ensure navigation links are not affected by global content link styles */
  header a,
  .header a,
  nav a,
  .main-nav a,
  .nav-link {
    text-decoration: none;
    text-decoration-thickness: initial;
    text-underline-offset: initial;
  }

  header a:hover,
  .header a:hover,
  nav a:hover,
  .main-nav a:hover,
  .nav-link:hover {
    text-decoration: none;
  }
  /* ===== NAVIGATION COMPONENT CONFIGURATION ===== */
  /* All styling uses design tokens from design-tokens.css */
  /* Reference design-tokens.css for: */
  /* - Breakpoints: media queries use pixel values directly from design-tokens.css */
  /* - Z-index: use --z-* tokens from design-tokens.css */
  /* - Colors: use --theme-* and --color-* tokens */
  /* - Spacing: use --space-* tokens */
  /* - Typography: use --font-* tokens */
  /* - Transitions: use --duration-* and --ease-* tokens */

  /* Accessibility: Reduced motion support (component-scoped only) */
  @media (prefers-reduced-motion: reduce) {
    .animated,
    .fade,
    .slide,
    .mega-menu-item:hover,
    .mega-menu-item:focus {
      animation: none !important;
      transition: none !important;
      transform: none !important;
    }
  }

  /* Data saver mode: limit heavy visuals within navigation scope */
  @media (prefers-reduced-data: reduce) {
    .thumbnail,
    .hero-image,
    .background-image,
    .hero-demo::before {
      display: none;
    }
  }

  /* ===== SETTINGS NAVIGATION HOVER LOGIC ===== */
  /* Ensure #settings-nav dropdown stays open on hover and has highest z-index */
  #settings-nav {
    position: relative;
  }

  /* Settings dropdown container with highest z-index */
  .settings-menu {
    z-index: var(--z-dropdown-hover); /* Higher than all other elements */
    transition:
      opacity 0.2s ease,
      visibility 0.2s ease;
  }

  /* Keep settings menu open when hovering over trigger or menu */
  #settings-nav:hover + .settings-menu,
  .nav-item-dropdown:hover .settings-menu {
    display: block;
    visibility: visible;
    opacity: 1;
    z-index: var(--z-dropdown-hover);
  }

  /* Hover bridge to prevent gaps between trigger and dropdown
     This creates an invisible hoverable strip between the trigger and the
     absolutely-positioned dropdown so moving the cursor doesn't collapse it. */
  .nav-group-community .nav-item-dropdown {
    position: relative;
  }

  .nav-group-community .nav-item-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--space-2); /* match dropdown vertical gap */
    display: none; /* only active during hover */
  }

  .nav-group-community .nav-item-dropdown:hover::after,
  .nav-group-community .dropdown-menu:hover::after {
    display: block;
  }

  /* Ensure the entire nav-item-dropdown container maintains hover state */
  .nav-item-dropdown {
    position: relative;
  }

  .nav-item-dropdown:hover {
    z-index: var(
      --z-dropdown-hover
    ); /* Container gets even higher z-index when hovered */
  }

  /* ===== PROFILE NAVIGATION HOVER LOGIC (pointer/hover capable only) ===== */
  @media (hover: hover) and (pointer: fine) {
    /* Keep profile menu open when hovering over trigger or menu within auth group */
    .nav-group-auth .nav-item-dropdown:hover #profile-menu,
    .nav-group-auth #profile-nav:hover + #profile-menu {
      display: block;
      visibility: visible;
      opacity: 1;
      z-index: var(--z-dropdown-hover);
    }

    /* Ensure profile dropdown positions to the right under auth group */
    .nav-group-auth .nav-item-dropdown #profile-menu {
      position: absolute;
      top: calc(100% + var(--space-1));
      right: 0;
      left: auto;
      white-space: nowrap;
    }
  }

  /* Settings menu positioning block removed - merged into initial .settings-menu rule above */

  /* Force settings menu above floating tabs and other overlay elements */
  .nav-item-dropdown:hover .settings-menu,
  .nav-item-dropdown:focus-within .settings-menu {
    z-index: var(--z-dropdown-hover);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Mobile Navigation Open State - Handled in main mobile media query below */

  /* Enhanced Mobile Navigation for Smaller Viewports - Aligned with media.css */
  @media only screen and (width <= 1023px) {
    #main-navigation {
      right: -100%;
      transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  /* Extra Small Viewports - Even more compact - Aligned with media.css */
  @media only screen and (width <= 375px) {
    .main-nav.open,
    #main-navigation.open {
      width: 90%;
      max-width: var(--container-xs);
      padding: var(--space-8) var(--space-4);
    }

    /* Ensure navigation items are more compact */
    .main-nav .nav-group .nav-link {
      padding: 0.75rem;
      font-size: calc(0.95rem * var(--font-scale, 1));
    }
  }

  /* Very Small Viewports - Ultra compact - Aligned with media.css */
  @media only screen and (width <= 360px) {
    .main-nav.open,
    #main-navigation.open {
      width: 95%;
      padding: calc(1.5rem * var(--font-scale, 1))
        calc(0.75rem * var(--font-scale, 1));
    }

    .main-nav .nav-group .nav-link {
      padding: calc(0.5rem * var(--font-scale, 1));
      font-size: calc(0.9rem * var(--font-scale, 1));
    }
  }

  @media only screen and (width >= 1024px) {
    .main-nav.open,
    #main-navigation.open {
      position: static;
      width: auto;
      height: var(--header-h);
      background: transparent;
      box-shadow: none;
      display: flex;
      opacity: 1;
      visibility: visible;
      z-index: auto;
    }
  }

  /* Generic Force-Visible Utility Classes */
  .force-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Mobile Navigation Backdrop */
  .nav-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--theme-bg-overlay);
    z-index: calc(var(--z-navigation, var(--z-overlay)) - 1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
  }

  .nav-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Show backdrop when mobile nav is open */
  @media (width <= 1023px) {
    .main-nav.open ~ .nav-backdrop,
    #main-navigation.open ~ .nav-backdrop,
    body:has(.main-nav.open) .nav-backdrop,
    body:has(#main-navigation.open) .nav-backdrop {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }

  /* Enhanced mobile navigation close button */
  .mobile-nav-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--nav-text-color);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;
    z-index: var(--z-dropdown-hover);
  }

  .mobile-nav-close:hover {
    background-color: var(--theme-shadow-light);
  }

  .mobile-nav-close:focus-visible {
    outline: 2px solid var(--theme-border-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--theme-shadow-focus);
  }

  .mobile-nav-close:active {
    background-color: var(--theme-bg-interactive);
    transform: scale(0.95);
  }

  @media (width <= 375px) {
    .mobile-nav-close {
      top: 0.75rem;
      right: 0.75rem;
      font-size: 1.25rem;
      padding: 0.375rem;
    }
  }

  /* Landscape orientation adjustments for mobile devices */
  @media only screen and (max-height: var(--container-lg)) and (orientation: landscape) {
    .main-nav.open,
    #main-navigation.open {
      width: 60% !important;
      max-width: var(--container-md) !important;
      padding: var(--space-4) !important;
    }

    .nav-group .nav-link {
      padding: 0.5rem !important;
      font-size: 0.9rem !important;
      margin-bottom: 0.25rem !important;
    }

    .nav-group {
      gap: 0.5rem !important;
    }
  }

  /* Accessibility: Ensure proper focus states on small screens */
  @media (width <= 428px) {
    .nav-group .nav-link:focus {
      outline: var(--space-0-5) solid var(--nav-text-color);
      outline-offset: var(--space-0-5);
      background: var(--theme-accent-primary);
    }

    /* Improve touch targets */
    .nav-group .nav-link {
      min-height: var(--space-12); /* Ensure adequate touch target size */
    }
  }

  .force-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Modal and Overlay Override System */
  .modal.force-visible,
  .modal.js-open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: var(--modal-z, var(--z-modal)) !important;
  }

  .backdrop.force-visible,
  .backdrop.js-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Pre-launch modal specific - ensure navigation is behind the backdrop */
  .modal-backdrop:has(.pre-launch-modal) ~ header.header,
  .modal-backdrop:has(.pre-launch-modal) ~ .nav-item-dropdown,
  .modal-backdrop:has(.pre-launch-modal) ~ .settings-menu {
    z-index: 500 !important; /* Well below modal backdrop */
  }

  /* Alternative approach - when pre-launch modal is active, reduce header z-index */
  body:has(.pre-launch-modal.visible) header.header,
  body:has(.pre-launch-modal) header.header {
    z-index: 500 !important; /* Well below modal backdrop */
  }

  body:has(.pre-launch-modal.visible) .nav-item-dropdown,
  body:has(.pre-launch-modal) .nav-item-dropdown,
  body:has(.pre-launch-modal.visible) .settings-menu,
  body:has(.pre-launch-modal) .settings-menu {
    z-index: 500 !important; /* Well below modal backdrop */
  }

  /* Button Override System - Prevents element.style button conflicts */
  .btn.force-visible {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .btn.force-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: var(--space-0-5) solid var(--color-primary) !important;
  }

  /* Header Element - Consolidated Complete Styling with Responsive Integration */
  header.header {
    /* Layout and dimensions - Responsive scaling from media.css */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    height: var(--header-h);
    padding: var(--space-2) var(--space-4);

    /* Positioning and layering */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);

    /* Visual styling - Modern glass morphism effect */
    background: var(--theme-bg-secondary);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border-bottom: var(--border-width) solid var(--theme-border-primary);
    box-shadow:
      0 var(--border-width) var(--space-0-75) rgba(0, 0, 0, 0.05),
      0 var(--border-width) var(--space-0-5) var(--theme-shadow-light);

    /* Animations and effects */
    transform: translateY(0);
    transition:
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  /* Header Responsive Adjustments - Mobile First Approach */
  /* Extra small mobile devices (≤360px) - Samsung Galaxy S21 */
  @media only screen and (width <= 360px) {
    header.header {
      height: calc(var(--header-h) * 0.9);
      padding: var(--space-2) var(--space-3);
      gap: var(--space-1);
    }
  }

  /* Small mobile devices (375px) - iPhone SE */
  @media only screen and (width >= 375px) and (width <= 428px) {
    header.header {
      height: calc(var(--header-h) * 0.95);
      padding: var(--space-2) var(--space-3);
      gap: var(--space-2);
    }
  }

  /* Tablet devices (768px+) - iPad Mini and larger */
  @media only screen and (width >= 768px) {
    header.header {
      height: var(--header-h);
      padding: var(--space-3) var(--space-5);
      gap: var(--space-3);
    }
  }

  /* Desktop devices (1280px+) - Optimal header sizing */
  @media only screen and (width >= 1280px) {
    header.header {
      padding: var(--space-3) var(--space-6);
      gap: var(--space-4);
    }
  }

  /* Header Left Side - Groups logo and main navigation together */
  .header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    /* Ensure items stay on same row */
    flex-flow: row nowrap;
    min-width: 0; /* Prevent flex item overflow */
    /* Ensure logo comes first, then navigation */
  }

  /* Header Right Side - Settings, user menu, etc. */
  .header-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* Header Components Responsive Adjustments */
  @media only screen and (width <= 428px) {
    .header-left {
      gap: var(--space-2);
    }

    .header-right {
      gap: var(--space-2);
    }
  }

  @media only screen and (width >= 768px) {
    .header-left {
      gap: var(--space-4);
    }

    .header-right {
      gap: var(--space-3);
    }
  }

  /* ===== LOGO COMPONENT STYLES ===== */
  .logo {
    display: flex; /* Flex inside flex container for proper alignment */
    align-items: center;
    gap: var(--spacing-3);
    text-decoration: none;
    color: inherit;
    transition:
      opacity 0.3s ease,
      transform 0.2s ease;
    /* Ensure logo aligns properly with siblings in flex container */
    align-self: center;
    /* Ensure logo is positioned first in row */
    order: 1;
  }

  .logo:hover {
    opacity: var(--hover-opacity);
    transform: translateY(-var(--border-width));
  }

  .logo:focus-visible {
    outline: 2px solid var(--theme-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 4px var(--theme-shadow-focus);
  }

  .logo:active {
    transform: translateY(-var(--border-width)) scale(0.98);
  }

  .logo-image {
    width: var(--space-15);
    height: var(--space-15);
    transition: all 0.3s ease;
  }

  /* Responsive Logo System - Flexible Sizing */
  .logo-full {
    height: var(--space-15);
    width: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-right: var(--border-width) solid var(--theme-border-secondary);
    padding-right: var(--spacing-4);
    margin-right: var(--spacing-2);
    filter: drop-shadow(
      0 var(--border-width) var(--space-0-5) var(--theme-shadow-light)
    );
  }

  .logo-full:hover {
    filter: drop-shadow(var(--shadow-base));
    transform: scale(1.02);
  }

  .logo-compact {
    height: var(--space-11);
    width: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: none; /* Hidden by default */
    filter: drop-shadow(
      0 var(--border-width) var(--space-0-5) var(--theme-shadow-light)
    );
  }

  /* ===== BREADCRUMB NAVIGATION SYSTEM ===== */
  /* Modern breadcrumb navigation for deep page hierarchy */
  .breadcrumb-container {
    background: var(--theme-bg-secondary);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border-bottom: var(--border-width) solid var(--theme-border-secondary);
    padding: var(--space-3) 0;
    margin-top: var(--header-height);
    position: sticky;
    top: var(--header-height);
    z-index: var(--z-base);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .breadcrumb-wrapper {
    max-width: var(--container-md);
    margin: 0 auto;
    padding: 0 var(--space-6);
  }

  .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .breadcrumb-item {
    display: flex;
    align-items: center;
    color: var(--theme-text-secondary);
    font-weight: 400;
    position: relative;
  }

  .breadcrumb-item:not(:last-child)::after {
    content: "›";
    margin: 0 var(--space-2);
    color: var(--theme-text-muted);
    font-size: var(--space-4);
    font-weight: 300;
    transition: color 0.2s ease;
  }

  .breadcrumb-item a {
    color: var(--theme-text-secondary);
    text-decoration: none;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--space-8);
  }

  .breadcrumb-item a:hover {
    color: var(--theme-text-primary);
    background: var(--theme-bg-secondary);
    transform: translateY(-var(--border-width));
  }

  .breadcrumb-item a:focus {
    outline: var(--space-0-5) solid var(--theme-border-focus); /* Indigo-500 */
    outline-offset: var(--space-0-5);
  }

  /* Current page styling */
  .breadcrumb-item.active {
    color: var(--theme-text-primary);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
  }

  /* Breadcrumb icons */
  .breadcrumb-icon {
    font-size: 0.875rem;
    opacity: var(--hover-opacity);
    transition: opacity 0.2s ease;
  }

  .breadcrumb-item:hover .breadcrumb-icon {
    opacity: 1;
  }

  /* Home icon special styling */
  .breadcrumb-home {
    font-size: var(--space-4);
    color: var(--theme-text-secondary);
  }

  .breadcrumb-item a:hover .breadcrumb-home {
    color: var(--theme-text-primary);
  }

  /* Enhanced breadcrumb with action buttons */
  .breadcrumb-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
  }

  .breadcrumb-action {
    background: var(--theme-bg-primary);
    border: var(--border-width) solid var(--theme-border-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-3);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: var(--space-8);
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .breadcrumb-action:hover {
    background: var(--theme-bg-primary);
    border-color: var(--theme-border-focus); /* Indigo-500 */
    color: var(--theme-text-primary);
    transform: translateY(-var(--border-width));
    box-shadow: 0 var(--space-0-5) var(--space-2) var(--theme-shadow-light);
  }

  /* Breadcrumb with search integration */
  .breadcrumb-search {
    display: flex;
    align-items: center;
    background: var(--theme-bg-primary);
    border: var(--border-width) solid var(--theme-border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-1) var(--space-3);
    margin-left: var(--space-4);
    min-width: var(--content-width-xs, 20rem);
    max-width: var(--content-width-sm, 24rem);
    transition: all 0.2s ease;
  }

  .breadcrumb-search:focus-within {
    border-color: var(--theme-border-focus); /* Indigo-500 */
    box-shadow: 0 0 0 var(--space-0-75) var(--theme-accent-primary); /* Indigo-500 */
  }

  .breadcrumb-search input {
    background: transparent;
    border: none;
    outline: none;
    flex: 1;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
    padding: var(--space-1) 0;
  }

  .breadcrumb-search input::placeholder {
    color: var(--theme-text-secondary);
  }

  .breadcrumb-search-icon {
    color: var(--theme-text-secondary);
    font-size: 0.875rem;
    margin-right: var(--space-1);
  }

  /* Responsive breadcrumb behavior */
  @media (width <= 768px) {
    .breadcrumb-container {
      padding: var(--space-2) 0;
      position: static;
      margin-top: 0;
    }

    .breadcrumb-wrapper {
      padding: 0 var(--space-4);
    }

    .breadcrumb {
      font-size: 0.8rem;
      gap: var(--space-1);
    }

    .breadcrumb-item a {
      padding: var(--space-1);
      min-height: var(--space-8);
    }

    .breadcrumb-search {
      display: none;
    }

    .breadcrumb-actions {
      flex-wrap: wrap;
      gap: var(--space-1);
    }

    .breadcrumb-action {
      font-size: 0.8rem;
      padding: var(--space-1) var(--space-2);
      min-height: var(--space-8);
    }
  }

  /* Mobile breadcrumb overflow handling */
  @media (width <= 428px) {
    .breadcrumb {
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding-bottom: var(--space-1);
    }

    .breadcrumb::-webkit-scrollbar {
      display: none;
    }

    .breadcrumb-item {
      flex-shrink: 0;
      white-space: nowrap;
    }

    .breadcrumb-actions {
      display: none;
    }
  }

  /* Breadcrumb animation states */
  .breadcrumb-container.hidden {
    transform: translateY(-100%);
    opacity: 0;
  }

  .breadcrumb-container.visible {
    transform: translateY(0);
    opacity: 1;
  }

  /* Enhanced breadcrumb with progress indicator */
  .breadcrumb-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--space-0-5);
    background: linear-gradient(
      90deg,
      var(--color-primary) 0%,
      var(--color-primary-dark) 100%
    ); /* Indigo-500 to Indigo-600 */
    transition: width 0.3s ease;
    border-radius: var(--radius-none);
  }

  /* Breadcrumb variants */
  .breadcrumb-compact .breadcrumb-item:not(:first-child, :last-child) {
    display: none;
  }

  .breadcrumb-compact .breadcrumb-item:nth-last-child(2)::before {
    content: "...";
    margin: 0 var(--space-2);
    color: var(--theme-text-secondary);
  }

  /* ===== HEADER ACTIONS AND USER ELEMENTS ===== */
  .header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
  }

  .search-toggle {
    background: var(--theme-bg-secondary);
    border: none;
    color: var(--theme-text-secondary);
    padding: 0.75rem;
    border-radius: var(--radius-md, var(--space-1-5));
    cursor: var(--cursor-interactive, pointer);
    transition: var(--transition-fast, all 0.2s ease);
    font-size: 1.125rem;
    min-height: var(--touch-target-min, var(--space-11));
    min-width: var(--touch-target-min, var(--space-11));
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-toggle:hover {
    background: var(--nav-hover-surface, var(--interactive-bg-hover));
    color: var(--interactive-fg-hover, var(--theme-text-primary));
    box-shadow: var(--shadow-hover, 0 4px 12px rgb(0 0 0 / 10%));
  }

  .search-toggle:focus-visible {
    outline: 2px solid var(--theme-border-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--theme-shadow-focus);
  }

  .search-toggle:active {
    background: var(--nav-active-surface, var(--interactive-bg-active));
    transform: scale(var(--active-scale, 0.98));
    box-shadow: var(--shadow-active, 0 2px 6px rgb(0 0 0 / 12%));
  }

  .auth-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .user-avatar {
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-full);
    background: linear-gradient(
      135deg,
      var(--brand-primary-500),
      var(--brand-success-400)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-on-accent);
    font-weight: 600;
    font-size: var(--space-4);
    border: var(--space-0-5) solid var(--theme-bg-secondary);
    cursor: pointer;
    transition: var(--transition-fast, all 0.2s ease);
    min-height: var(--touch-target-min, var(--space-11));
    min-width: var(--touch-target-min, var(--space-11));
  }

  .user-avatar:hover {
    transform: scale(1.05);
    border-color: var(--accent-primary);
  }

  /* Navigation Search Component */
  .nav-search {
    background: var(--theme-bg-primary);
    border: var(--border-width) solid var(--theme-border-primary);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: var(--content-width-xs, 20rem);
    transition: all 0.2s ease;
  }

  .nav-search input {
    background: transparent;
    color: var(--theme-text-primary);
    border: none;
    outline: none;
    flex: 1;
    font-size: calc(0.9rem * var(--font-scale, 1));
    padding: 0.25rem;
  }

  .nav-search input::placeholder {
    color: var(--theme-text-muted, #666);
  }

  .nav-search-btn {
    color: var(--theme-text-secondary, #666);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
  }

  .nav-search-btn:hover {
    color: var(--theme-text-primary, #333);
  }

  /* Header State Classes - Consolidated for proper state management */
  .header.header-hidden {
    transform: translateY(-100%);
  }

  .header.header-visible {
    transform: translateY(0);
  }

  /* Enhanced scroll effects - combines with visibility states */
  .header.scrolled {
    height: var(--header-h); /* Ensure consistent height when scrolled */
    box-shadow: var(--shadow-lg);
    background: var(--theme-bg-secondary);
    backdrop-filter: blur(var(--blur-md));
    padding: var(--spacing-3) var(--spacing-6); /* Maintain consistent padding */
  }

  /* Combined state: scrolled AND visible - ensures proper layering */
  .header.scrolled.header-visible {
    transform: translateY(0);
    height: var(--header-h); /* Ensure consistent height */
    box-shadow: var(--shadow-lg);
    background: var(--theme-bg-secondary);
    backdrop-filter: blur(var(--blur-md));
    padding: var(--spacing-3) var(--spacing-6); /* Maintain consistent padding */
  }

  /* Ensure scroll-aware navbar works properly on mobile */
  @media (width <= 768px) {
    header.header {
      transition:
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.25s ease,
        background-color 0.25s ease;
    }

    /* Don't hide header when mobile nav is open */
    header.header:has(.main-nav.open),
    header.header:has(#main-navigation.open) {
      transform: translateY(0) !important;
    }

    /* Enhanced header-visible support for mobile */
    .header.header-visible {
      transform: translateY(0);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Combined mobile states for better scroll behavior */
    .header.scrolled.header-visible {
      transform: translateY(0);
      padding: calc(var(--space-4) * 0.35) var(--space-3); /* Responsive padding for mobile scrolled state */
      backdrop-filter: blur(
        var(--blur-md)
      ); /* Reduced blur for mobile performance */
    }

    /* Mobile-specific performance optimizations */
    /* Note: .header-hidden behavior inherited from top-level selector */
  }

  /* Enhanced support for very small viewports (428px and below) */
  @media only screen and (width <= 428px) {
    .header.header-visible {
      transform: translateY(0);
      padding: var(--spacing-2) var(--spacing-3); /* Compact padding for small screens */
      height: calc(
        var(--header-h) - var(--space-2-5)
      ); /* Slightly reduced height */
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .header.scrolled.header-visible {
      transform: translateY(0);
      padding: var(--spacing-1) var(--spacing-3); /* Even more compact when scrolled */
      height: calc(
        var(--header-h) - var(--space-1)
      ); /* Further reduced height when scrolled */
      backdrop-filter: blur(
        var(--space-1-5)
      ); /* Minimal blur for performance */
      box-shadow: 0 var(--space-0-5) var(--space-2) var(--theme-shadow-light); /* Lighter shadow */
    }

    /* Ensure navigation toggle is always accessible */
    .header.header-visible .nav-toggle {
      opacity: 1;
      pointer-events: auto;
      z-index: var(--z-banner); /* Above header */
    }

    /* Optimize logo sizing for small screens */
    .header.header-visible .logo-full {
      height: var(--space-12); /* Smaller logo */
    }

    .header.header-visible .logo-compact {
      height: var(--space-10); /* Even smaller compact logo */
    }
  }

  /* Support for extra small viewports (375px and below) */
  @media only screen and (width <= 375px) {
    .header.header-visible {
      padding: var(--spacing-1) var(--spacing-2); /* Minimal padding */
      height: calc(var(--header-h) - var(--space-1));
    }

    .header.scrolled.header-visible {
      padding: var(--spacing-1) var(--spacing-2);
      height: calc(var(--header-h) - 20px); /* Maximum compression */
    }

    /* Force compact logo on very small screens */
    .header.header-visible .logo-full {
      display: none;
    }

    .header.header-visible .logo-compact {
      display: block;
      height: var(--space-1-5); /* Minimal logo size */
    }
  }

  /* Support for small devices in landscape orientation */
  @media only screen and (max-height: var(--container-lg)) and (orientation: landscape) {
    .header.header-visible {
      height: calc(var(--header-h) - 20px); /* Compact height in landscape */
      padding: var(--spacing-1) var(--spacing-3);
      position: fixed; /* Ensure it stays at top */
      top: 0;
      z-index: 1000;
    }

    .header.scrolled.header-visible {
      height: calc(
        var(--header-h) - calc(2 * var(--space-1))
      ); /* Even more compact when scrolled */
      padding: var(--spacing-1) var(--spacing-2);
      backdrop-filter: blur(
        var(--blur-sm)
      ); /* Minimal blur for landscape performance */
    }

    /* Ensure mobile nav toggle is always accessible in landscape */
    .header.header-visible .nav-toggle {
      padding: var(--spacing-1);
      min-height: var(--space-1-5);
      min-width: var(--space-1-5);
    }
  }

  /* Accessibility and performance improvements for header-visible */
  @media (prefers-reduced-motion: reduce) {
    .header.header-visible {
      transition: none; /* Remove transitions for users who prefer reduced motion */
    }

    .header.scrolled.header-visible {
      transition: none;
    }
  }

  @media (prefers-contrast: high) {
    .header.header-visible {
      border-bottom: var(--space-0-5) solid currentcolor; /* High contrast border */
      backdrop-filter: none; /* Remove blur for better contrast */
      background: var(--theme-bg-primary); /* Solid background for contrast */
    }

    .header.scrolled.header-visible {
      box-shadow: 0 var(--space-0-5) 0 currentcolor; /* High contrast shadow */
    }
  }

  /* Navigation Group Organization */
  .main-nav {
    display: flex;
    align-items: center;
    gap: calc(0.5rem * var(--font-scale, 1));
    flex: 1 1 auto;
    padding: 0;
    /* Base properties that apply to all screen sizes */
    position: static;
    width: auto;
    height: var(--header-h); /* Match header height for consistent alignment */
    background: transparent;
    border: none;
    box-shadow: none;
    z-index: auto;
    transition: none;
    overflow-y: visible;
    /* Ensure navigation doesn't push logo to new line */
    flex-shrink: 1;
    min-width: 0;
    /* Ensure navigation comes after logo */
    order: 2;
  }

  /* Navigation Group Organization - Modern Flexbox Architecture */
  /* Note: .nav-items replaces legacy .nav-list naming for semantic clarity */
  .nav-group {
    display: flex;
    align-items: center;
  }

  .nav-group .nav-items {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    height: var(
      --header-h
    ); /* Match header and main-nav height for perfect alignment */
    gap: calc(0.5rem * var(--font-scale, 1));
  }

  /* Primary Navigation Group - Override general nav-items styles */
  .nav-group-primary {
    flex: 1;
  }

  .nav-group-primary .nav-items {
    gap: calc(var(--space-8) * var(--font-scale, 1));
    /* Override fixed height - use min-height for flexibility */
    height: auto !important;
    min-height: var(--header-h);
  }

  .nav-group-primary .nav-link {
    font-weight: 500;
    font-size: calc(0.95rem * var(--font-scale, 1));
    letter-spacing: -0.01em;
    min-height: var(--touch-target-min, var(--space-11));
    display: flex;
    align-items: center;
    padding: 0.75rem var(--space-4);
    border-radius: var(--radius-lg);
    transition: var(--transition-fast, all 0.15s ease-in-out);
    position: relative;
    color: var(--interactive-fg, var(--theme-text-secondary));
    text-decoration: none;
    cursor: var(--cursor-interactive, pointer);
  }

  /* Force readable primary nav text in light theme (stronger specificity) */
  html[data-theme="light"] .nav-group-primary .nav-link,
  body[data-theme="light"] .nav-group-primary .nav-link,
  body.theme-light .nav-group-primary .nav-link {
    color: var(--theme-text-primary);
  }

  .nav-group-primary .nav-link { 
    border: var(--border-width) solid transparent; 
  } 

  /* Lighter hover surfaces for nav lift (theme-scoped) */
  html[data-theme="light"] .header,
  body[data-theme="light"] .header,
  body.theme-light .header {
    --nav-hover-surface: #ffffff; /* lighter than gray-50 for subtle lift */
    --nav-active-surface: var(--gray-50); /* slightly off-white for active in light theme */
  }

  html[data-theme="dark"] .header,
  body[data-theme="dark"] .header,
  body.theme-dark .header,
  body.dark-mode .header {
    --nav-hover-surface: rgba(255, 255, 255, 0.10); /* lighten on dark surfaces */
    --nav-active-surface: rgba(255, 255, 255, 0.10); /* align active with dark overlay */
  }

  .nav-group-primary .nav-link:hover { 
    color: var(--interactive-fg-hover, var(--theme-text-primary)); 
    background: var(--nav-hover-surface, var(--interactive-bg-hover)); 
    box-shadow: var(--shadow-hover, 0 4px 12px rgb(0 0 0 / 10%)); 
    opacity: 1; 
    transform: translateY(var(--hover-translate-y, -1px));
  }

  .nav-group-primary .nav-link:active {
    background: var(--nav-active-surface, var(--interactive-bg-active));
    transform: scale(var(--active-scale, 0.98));
    box-shadow: var(--shadow-active, 0 2px 6px rgb(0 0 0 / 12%));
  }

  .nav-group-primary .nav-link:focus-visible {
    outline: var(--focus-outline-width, 2px) var(--focus-outline-style, solid)
      var(--focus-ring-color, var(--theme-border-focus));
    outline-offset: var(--focus-outline-offset, 2px);
  }

  /* Explicit dark-mode tune: slightly brighter than nav-hover-surface but keeps high contrast */
  html[data-theme="dark"] .nav-group-primary .nav-link:hover,
  body[data-theme="dark"] .nav-group-primary .nav-link:hover,
  body.theme-dark .nav-group-primary .nav-link:hover,
  body.dark-mode .nav-group-primary .nav-link:hover {
    background: var(--nav-hover-surface, var(--interactive-bg-hover));
    /* Ensure dark mode gets the same lift and elevation */
    transform: translateY(var(--hover-translate-y, -1px));
    box-shadow: var(--shadow-hover, 0 6px 18px rgb(0 0 0 / 40%));
  }

  .nav-group-primary .nav-link.active {
    color: var(--theme-text-primary);
    background: var(--nav-active-surface, var(--active-surface));
    font-weight: 600;
  }

  /* Dark-mode active state: ensure good contrast and avoid washout */
  html[data-theme="dark"] .nav-group-primary .nav-link.active,
  body[data-theme="dark"] .nav-group-primary .nav-link.active,
  body.theme-dark .nav-group-primary .nav-link.active,
  body.dark-mode .nav-group-primary .nav-link.active {
    background: #ffffff1a; /* rgba(255,255,255,0.10) */
    color: var(--theme-text-primary);
  }

  /* Community Navigation Group */
  .nav-group-community {
    position: relative;
    margin-inline-start: auto;
    flex: 0 0 auto;
  }

  .nav-group-community .nav-items {
    gap: calc(0.75rem * var(--font-scale, 1));
    flex-wrap: nowrap;
    align-items: center;
  }

  /* About & Actions Navigation Groups */
  .nav-group-about,
  .nav-group-actions {
    position: relative;
  }

  .nav-group-about .nav-items,
  .nav-group-actions .nav-items {
    gap: calc(0.75rem * var(--font-scale, 1));
  }

  /* Dropdown navigation links - ensure proper alignment for arrows */
  .nav-item-dropdown .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Specific positioning for actions group */
  .nav-group-actions {
    margin-left: auto;
  }

  /* Specific spacing override for actions items */
  .nav-group-actions .nav-items {
    gap: calc(0.5rem * var(--font-scale, 1));
  }

  .nav-group-actions .nav-link {
    padding: calc(0.5rem * var(--font-scale, 1))
      calc(var(--space-4) * var(--font-scale, 1));
    border-radius: var(--radius-md);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    min-height: var(--touch-target-min, var(--space-11));
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Blog and About top-level links: remove default underline in normal mode */
  .nav-group-blog .nav-link,
  .nav-group-about .nav-link {
    text-decoration: none;
  }

  /* Ensure About and Settings triggers have proper readable colors in light mode */
  .nav-group-about .nav-link,
  .nav-group-actions .nav-link {
    color: var(--interactive-fg, var(--theme-text-secondary));
    transition: var(--transition-fast, all 0.15s ease-in-out);
    cursor: var(--cursor-interactive, pointer);
  }
  .nav-group-about .nav-link:hover,
  .nav-group-actions .nav-link:hover {
    color: var(--interactive-fg-hover, var(--theme-text-primary));
    background: var(--nav-hover-surface, var(--interactive-bg-hover));
    transform: translateY(var(--hover-translate-y, -1px));
    box-shadow: var(--shadow-hover, 0 4px 12px rgb(0 0 0 / 10%));
  }

  .nav-group-about .nav-link:active,
  .nav-group-actions .nav-link:active {
    background: var(--nav-active-surface, var(--interactive-bg-active));
    transform: scale(var(--active-scale, 0.98));
    box-shadow: var(--shadow-active, 0 2px 6px rgb(0 0 0 / 12%));
  }

  .nav-group-about .nav-link:focus-visible,
  .nav-group-actions .nav-link:focus-visible {
    outline: var(--focus-outline-width, 2px) var(--focus-outline-style, solid)
      var(--focus-ring-color, var(--theme-border-focus));
    outline-offset: var(--focus-outline-offset, 2px);
  }

  .nav-group-blog .nav-link:hover,
  .nav-group-about .nav-link:hover {
    text-decoration: none;
  }

  .nav-group-blog .nav-link:focus,
  .nav-group-about .nav-link:focus {
    text-decoration: none;
  }

  /* Authentication Group */
  .nav-group-auth {
    margin-left: calc(1.5rem * var(--font-scale, 1));
    padding-left: calc(1.5rem * var(--font-scale, 1));
    border-left: var(--border-width) solid var(--theme-border-secondary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* prevent right-edge clipping */
    margin-right: calc(var(--space-4) * var(--font-scale, 1));
    padding-right: calc(0.25rem * var(--font-scale, 1));
  }

  .nav-group-auth .nav-link {
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-lg);
    font-weight: 500;
    font-size: calc(0.9rem * var(--font-scale, 1));
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: var(--touch-target-min, var(--space-11));
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width) solid transparent;
  }

  /* Sign In Button - Subtle */
  .nav-group-auth .nav-link:first-child {
    color: var(--theme-text-secondary);
    background: transparent;
  }

  .nav-group-auth .nav-link:first-child:hover {
    color: var(--theme-text-primary);
    background: var(--nav-hover-surface, var(--hover-surface));
    opacity: var(--hover-opacity);
  }

  /* Sign Up Button - Primary CTA */
  .nav-group-auth .nav-link:last-child {
    color: var(--theme-text-on-accent);
    background: var(--accent-primary);
    box-shadow: 0 var(--border-width) var(--space-0-75) var(--theme-shadow-focus);
  }

  .nav-group-auth .nav-link:last-child:hover {
    background: var(--accent-primary-hover);
    box-shadow: 0 var(--space-0-5) var(--space-2) var(--theme-shadow-focus);
    transform: translateY(-var(--border-width));
  }

  .nav-group-auth .nav-link:last-child:active {
    background: var(--accent-primary-active, var(--accent-primary));
  }

  /* Guest content alignment and right-edge spacing merged into primary .nav-group-auth block */

  .nav-group-auth [data-guest-content] {
    display: flex;
    align-items: center;
  }

  .nav-group-auth [data-guest-content] .nav-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center; /* center the button label */
    min-height: var(--touch-target-min, var(--space-11));
    padding: 0.625rem 1.25rem; /* match auth link sizing */
    border-radius: var(--radius-lg);
    white-space: nowrap; /* avoid wrapping that could cause clipping */
    max-width: 100%;
  }

  /* Profile dropdown positioning in auth group */
  .nav-group-auth .nav-item-dropdown {
    position: relative;
  }

  .nav-group-auth .nav-item-dropdown .dropdown-menu {
    left: auto;
    right: 0;
    min-width: var(--content-width-xs, 20rem);
  }

  .nav-group-auth .dropdown-item {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--nav-text-color, #334155);
    text-decoration: none;
  }

  .nav-group-auth .dropdown-item:hover {
    background: var(--nav-hover-surface, var(--hover-surface));
    opacity: var(--hover-opacity);
  }

  /* Dropdown Menu Styles */
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--theme-bg-primary);
    backdrop-filter: blur(var(--space-0-5));
    -webkit-backdrop-filter: blur(var(--space-0-5));
    border: var(--border-width) solid rgba(226, 232, 240, 0.5);
    border-radius: var(--radius-xl);
    box-shadow:
      0 var(--space-1) var(--space-1-5) -var(--border-width)
        var(--theme-shadow-light),
      0 var(--space-0-5) var(--space-1) -var(--border-width) rgba(0, 0, 0, 0.06),
      0 0 0 var(--border-width) rgba(255, 255, 255, 0.05);
    padding: 0.5rem 0;
    min-width: var(--content-width-xs, 20rem);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-var(--space-2)) scale(var(--active-scale));
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0.5rem;
  }

  .dropdown-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    box-shadow: var(--shadow-hover, 0 4px 12px rgb(0 0 0 / 10%));
  }

  /* Hover/focus functionality for nav-group-about dropdown */
  .nav-group-about .nav-item-dropdown:hover .dropdown-menu,
  .nav-group-about .nav-item-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    z-index: var(--z-dropdown-hover, 1051);
  }

  /* Keep dropdown open when hovering over the dropdown itself */
  .nav-group-about .dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  /* Ensure smooth transition when moving between trigger and dropdown */
  .nav-group-about .nav-item-dropdown {
    position: relative;
  }

  .nav-group-about .nav-item-dropdown:hover {
    z-index: var(--z-dropdown-hover, 1051);
  }

  .dropdown-item {
    padding: calc(0.75rem * var(--font-scale, 1))
      calc(var(--space-4) * var(--font-scale, 1));
    color: var(--theme-text-primary, #333);
    text-decoration: none;
    font-size: calc(0.9rem * var(--font-scale, 1));
    transition: var(--transition-fast, background-color 0.2s ease);
    min-height: var(--touch-target-min, var(--space-11));
    display: flex;
    align-items: center;
    cursor: var(--cursor-interactive, pointer);
  }

  .dropdown-item:hover {
    background-color: var(--hover-surface, var(--interactive-bg-hover));
    color: var(--interactive-fg-hover, var(--theme-text-primary));
    opacity: var(--hover-opacity);
    box-shadow: inset 0 0 0 var(--border-width, 1px)
      var(--interactive-border-hover, var(--theme-border-focus));
  }

  .dropdown-item:focus-visible {
    outline: 2px solid var(--theme-border-focus);
    outline-offset: -2px;
    background-color: var(--hover-surface);
    color: var(--theme-text-primary);
    box-shadow: inset 0 0 0 2px var(--theme-shadow-focus);
  }

  .dropdown-item:active {
    background-color: var(--active-surface, var(--interactive-bg-active));
    opacity: var(--active-opacity);
    transform: scale(var(--active-scale, 0.98));
  }

  /* Responsive Navigation - Using media.css breakpoints */
  @media (width <= 428px) {
    .nav-group-community,
    .nav-group-actions {
      display: none;
    }

    /* Keep About navigation visible on tablet/desktop */
    .nav-group-about {
      display: flex;
    }

    .nav-group-auth {
      margin-left: auto;
      border-left: none;
      padding-left: 0;
    }
  }

  /* ===== RESPONSIVE LOGO SIZING ===== */
  /* Extra Large Screens (1024px+) - Larger logo for desktop */
  @media (width >= 1024px) {
    .logo-image,
    .logo-full {
      height: var(--space-15);
      width: auto;
    }

    .logo-compact {
      height: var(--space-10);
      width: auto;
    }
  }

  /* Large Screens (1280px+) - Standard large size */
  @media (width >= 1280px) {
    .logo-image,
    .logo-full {
      height: var(--space-14);
      width: auto;
    }

    .logo-compact {
      height: var(--space-12);
      width: auto;
    }
  }

  /* Medium Screens (1024px - 1279px) - Default size */
  @media (width >= 1024px) and (width <= 1279px) {
    .logo-image,
    .logo-full {
      height: var(--space-12);
      width: auto;
    }

    .logo-compact {
      height: var(--space-11);
      width: auto;
    }
  }

  /* Small-Medium Screens (768px - 1023px) - Slightly smaller */
  @media (width >= 768px) and (width <= 1023px) {
    .logo-image,
    .logo-full {
      height: var(--space-11);
      width: auto;
    }

    .logo-compact {
      height: var(--space-10);
      width: auto;
    }
  }

  /* Switch to compact logo for constrained layouts */
  @media (width <= 1023px) {
    .logo-full {
      display: none;
    }

    .logo-compact {
      display: block;
    }
  }

  /* Small Screens (428px - 767px) - Compact logo, medium size */
  @media (width >= 428px) and (width <= 767px) {
    .logo-image,
    .logo-compact {
      height: var(--space-10);
      width: auto;
    }
  }

  /* Extra Small Screens (up to 427px) - Compact logo, smaller size */
  @media (width <= 427px) {
    .logo-image,
    .logo-compact {
      height: var(--space-8);
      width: auto;
    }
  }

  /* Fill the gap between mobile and tablet for header-container */
  @media only screen and (width >= 428px) and (width <= 768px) {
    .header-container {
      padding: 0 1.25rem; /* Between mobile and desktop padding */
      height: var(--header-h); /* Maintain consistent height */
      min-height: var(--header-h);
    }
  }

  @media only screen and (width <= 1023px) {
    .header-container {
      position: relative;
      height: var(--header-h); /* Maintain consistent height on mobile */
      min-height: var(--header-h);
      padding: 0 var(--space-4); /* Adjust padding for mobile */
    }

    /* Header Actions Mobile Adjustments */
    .header-actions {
      gap: 0.5rem;
    }

    .search-toggle {
      padding: 0.5rem;
      font-size: var(--space-4);
    }

    .nav-search {
      min-width: var(--space-12-5);
    }

    .user-avatar {
      width: var(--space-1-5);
      height: var(--space-1-5);
      font-size: 0.9rem;
    }

    .main-nav,
    #main-navigation {
      position: fixed;
      top: 0;
      right: -100%;
      width: 85%;
      max-width: var(--container-sm);
      height: 100vh;
      display: flex;
      background: var(--theme-bg-primary);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      flex-direction: column;
      align-items: stretch;
      padding: calc(3rem * var(--font-scale, 1))
        calc(var(--space-8) * var(--font-scale, 1));
      gap: calc(var(--space-8) * var(--font-scale, 1));
      transition:
        right 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 9999; /* Higher than backdrop */
      overflow-y: auto;
      transform: none; /* Remove extra transform */
      border-left: var(--border-width) solid rgba(226, 232, 240, 0.3);
      box-shadow: -var(--space-2) 0 var(--space-8) var(--theme-shadow-light);
      visibility: visible;
      opacity: 1;
    }

    /* When navigation is open, slide it in and apply all open state properties */
    .main-nav.open,
    #main-navigation.open {
      right: 0;
      position: fixed;
      top: 0;
      width: 85%;
      max-width: var(--container-sm);
      height: 100vh;
      display: flex;
      flex-direction: column;
      visibility: visible;
      opacity: 1;
      transform: none;
      background: var(--theme-bg-primary);
      z-index: 9999;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      align-items: stretch;
      padding: calc(3rem * var(--font-scale, 1))
        calc(var(--space-8) * var(--font-scale, 1));
      gap: calc(var(--space-8) * var(--font-scale, 1));
      overflow-y: auto;
      border-left: var(--border-width) solid rgba(226, 232, 240, 0.3);
      box-shadow: -var(--space-2) 0 var(--space-8) var(--theme-shadow-light);
    }

    /* Responsive adjustments for smaller mobile devices */
    @media only screen and (width <= 375px) {
      .main-nav.open,
      #main-navigation.open {
        width: 90%;
        max-width: var(--container-xs);
        padding: var(--space-8) var(--space-4);
      }
    }

    @media only screen and (width <= var(--container-sm)) {
      .main-nav.open,
      #main-navigation.open {
        width: 95%;
        max-width: var(--container-xs);
        padding: 1.5rem 0.75rem;
      }
    }

    /* Mobile navigation open state handled by consolidated override system above */
    /* .main-nav.nav-open unified state management system */

    .nav-group {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
    }

    .nav-group .nav-items {
      flex-direction: column;
      width: 100%;
      gap: 0;
    }

    .nav-group .nav-item {
      width: 100%;
    }

    /* ===== MOBILE NAVIGATION TYPOGRAPHY SYSTEM ===== */
    /* Design Intent: Create a hierarchical, trustworthy, and cognitively optimized navigation experience */
    .nav-group .nav-link {
      /* Advanced Typography Foundation */
      font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Inter,
        "SF Pro Display",
        sans-serif;
      font-size: 1.125rem; /* 1var(--space-2) - optimal for mobile reading and finger navigation */
      font-weight: 550; /* Semi-medium weight for clarity without heaviness */
      line-height: 1.4; /* Comfortable line height for multi-line labels */
      letter-spacing: -0.025em; /* Tight tracking for modern, cohesive feel */

      /* Typography Optimization */
      font-feature-settings:
        "kern" 1,
        "liga" 1,
        "calt" 1; /* Enable kerning, ligatures, contextual alternates */
      text-rendering: optimizelegibility; /* Better text rendering */
      -webkit-font-smoothing: antialiased; /* Smooth font rendering on WebKit */
      -moz-osx-font-smoothing: grayscale; /* Smooth font rendering on Firefox/macOS */

      /* Spacing and Layout */
      padding: calc(1.25rem * var(--font-scale, 1));
      border-bottom: var(--border-width) solid rgba(226, 232, 240, 0.5);
      text-align: left;
      min-height: var(--touch-target-min, var(--space-11));
      display: flex;
      align-items: center;

      /* Visual Polish */
      color: var(
        --theme-text-primary
      ); /* Darker color for better readability and trust */
      border-radius: var(--radius-xl);
      margin-bottom: 0.5rem;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;

      /* Cognitive Enhancement */
      word-spacing: 0.05em; /* Slight word spacing for better scanning */
      text-decoration: none;
      text-transform: none; /* Natural case for approachability */
    }

    /* ===== RESPONSIVE TYPOGRAPHY OPTIMIZATION ===== */
    /* Design Intent: Maintain readability and cognitive comfort while adapting to screen constraints */

    /* Small Mobile Devices (375px and below) - Focus on legibility over size */
    @media only screen and (width <= 375px) {
      .nav-group .nav-link {
        /* Optimized Typography for Small Screens */
        font-size: 1.0625rem; /* 17px - maintains readability without feeling cramped */
        font-weight: 575; /* Slightly heavier weight to compensate for smaller size */
        line-height: 1.35; /* Tighter line height for space efficiency */
        letter-spacing: -0.02em; /* Slightly tighter tracking */

        /* Adjusted Spacing */
        padding: 0.875rem; /* Reduced but still comfortable padding */
        margin-bottom: 0.375rem; /* Tighter vertical rhythm */

        /* Enhanced Touch Experience */
        min-height: var(--space-12); /* Maintain touch target standards */
      }
    }

    /* Very Small Mobile Devices (var(--container-sm) and below) - Compact but readable */
    @media only screen and (width <= var(--container-sm)) {
      .nav-group .nav-link {
        /* Minimal but Readable Typography */
        font-size: var(
          --space-4
        ); /* 1var(--space-1-5) - minimum recommended for mobile readability */
        font-weight: 600; /* Medium-bold to maintain presence at smaller size */
        line-height: 1.3; /* Compact line height for space efficiency */
        letter-spacing: -0.015em; /* Minimal tracking adjustment */

        /* Compact Spacing */
        padding: 0.75rem; /* Reduced padding while maintaining usability */
        margin-bottom: 0.25rem; /* Tighter spacing for compact layout */

        /* Optimized Touch Targets */
        min-height: var(--space-11); /* Minimum recommended touch target */
      }
    }

    /* ===== ENHANCED INTERACTION STATES ===== */
    /* Design Intent: Typography that responds meaningfully to user interaction */

  .nav-group .nav-link:hover {
      /* Enhanced Typography for Hover State */
      color: var(
        --theme-text-primary
      ); /* Deeper color for increased focus and attention */
      font-weight: 600; /* Slightly heavier weight to signal interactivity */
      letter-spacing: -0.03em; /* Tighter tracking for focused attention */

      /* Visual Enhancement */
    background: var(--nav-hover-surface, var(--hover-surface));
    /* Allow interactive lift unless reduced motion is requested */
    transform: translateY(var(--hover-translate-y, -1px));
      border-bottom-color: transparent;

      /* Text Shadow for Depth and Polish */
      text-shadow: 0 var(--border-width) var(--space-0-5) rgba(15, 23, 42, 0.1); /* Subtle depth */
    }

    .nav-group .nav-link:active {
      /* Typography for Active/Pressed State */
      color: var(
        --theme-text-primary
      ); /* Darkest color for maximum contrast during press */
      font-weight: 650; /* Heaviest weight for tactile feedback */
      letter-spacing: -0.035em; /* Tightest tracking for compression feel */

      /* Compressed Visual State */
      background: var(--theme-border-primary);
      transform: translateX(var(--space-0-75)) scale(0.98); /* Slight scale reduction for press feedback */

      /* Enhanced Text Shadow for Pressed State */
      text-shadow: 0 0 var(--border-width) rgba(2, 6, 23, 0.2);
    }

    /* ===== FOCUS STATE TYPOGRAPHY ===== */
    /* Design Intent: Clear, accessible focus indication with typographic enhancement */

    .nav-group .nav-link:focus {
      /* Enhanced Typography for Focus */
      color: var(--theme-text-primary);
      font-weight: 575; /* Balanced weight for focus without overwhelming */
      letter-spacing: -0.025em;

      /* Accessibility-First Focus Ring */
      outline: var(--space-0-5) solid var(--color-primary); /* Blue focus ring for accessibility */
      outline-offset: var(--space-0-5);
      background: var(--theme-accent-bg); /* Subtle blue background */

      /* Text Clarity Enhancement */
      text-shadow: none; /* Remove shadow for maximum clarity during focus */
    }

    /* ===== HIGH CONTRAST AND ACCESSIBILITY MODES ===== */
    /* Design Intent: Ensure typography remains effective in accessibility modes */

    @media (prefers-contrast: high) {
      .nav-group .nav-link {
        font-weight: 600; /* Heavier weight for high contrast environments */
        color: var(--theme-text-primary); /* Pure black for maximum contrast */
        text-shadow: none; /* Remove effects that might reduce contrast */
      }

      .nav-group .nav-link:hover {
        color: var(--theme-text-primary);
        font-weight: 700; /* Bold for high contrast hover */
        background: var(--nav-hover-surface, var(--hover-surface)); /* High contrast background */
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .nav-group .nav-link {
        transition: color 0.1s ease; /* Minimal transition for reduced motion users */
      }

      .nav-group .nav-link:hover,
      .nav-group .nav-link:active {
        transform: none; /* Remove movement for motion-sensitive users */
      }
    }

    /* ===== OVERRIDE NAV-ITEM CONFLICTS FROM ADVANCED-UI-COMPONENTS ===== */
    /* Design Intent: Prevent conflicts with advanced-ui-components.css nav-item styles */
    /* Ensure mobile navigation takes precedence over generic nav-item styles */

    .main-nav .nav-group .nav-item,
    .main-nav .nav-item {
      /* Reset any conflicting styles from advanced-ui-components.css */
      padding: 0 !important; /* Let nav-link handle padding */
      margin: 0 !important;
      border: none !important;
      background: transparent !important;
      transform: none !important;
      transition: none !important;

      /* Ensure nav-item wrapper doesn't interfere */
      display: block;
      width: 100%;
      position: relative;

      /* Override any hover states from advanced-ui-components */
      cursor: default;
    }

    .main-nav .nav-group .nav-item:hover,
    .main-nav .nav-item:hover {
      /* Disable hover effects on wrapper - let nav-link handle interactions */
      background: transparent !important;
      color: inherit !important;
      transform: none !important;
    }

    /* Ensure nav-link gets proper styling even inside nav-item */
    .main-nav .nav-group .nav-item .nav-link,
    .main-nav .nav-item .nav-link {
      /* Use higher specificity to override any generic nav-item styles */
      display: flex !important;
      align-items: center !important;
      width: 100% !important;
      text-decoration: none !important;
      cursor: pointer !important;

      /* Ensure our typography system takes precedence */
      font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        inter,
        "SF Pro Display",
        sans-serif !important;
      font-size: 1.125rem !important;
      font-weight: 550 !important;
      line-height: 1.4 !important;
      letter-spacing: -0.025em !important;
      color: var(--theme-text-primary) !important;
    }

    /* Show all groups in mobile */
    .nav-group-community,
    .nav-group-about,
    .nav-group-actions {
      display: flex;
    }

    /* ===== NAVIGATION GROUP HIERARCHY TYPOGRAPHY ===== */
    /* Design Intent: Create visual hierarchy through typography to guide user attention */

    /* Authentication Group - Special Emphasis */
    .nav-group-auth {
      margin-left: 0;
      border-left: none;
      padding-left: 0;
      border-top: var(--space-0-5) solid var(--border-color, #e0e0e0);
      padding-top: calc(var(--space-4) * var(--font-scale, 1));
    }

    /* Authentication Links - Enhanced Typography for Important Actions */
    .nav-group-auth .nav-link {
      /* Special Typography for Auth Actions */
      font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        inter,
        sans-serif;
      font-size: 1.0625rem; /* Slightly smaller than main nav for hierarchy */
      font-weight: 600; /* Medium-bold to emphasize importance */
      line-height: 1.3; /* Tighter for action-oriented text */
      letter-spacing: -0.02em; /* Tight tracking for urgency and focus */

      /* Action-Oriented Styling */
      color: var(--color-primary); /* Indigo-700 for authority and trust */
      background: var(--theme-bg-primary);
      border: var(--border-width) solid rgba(99, 102, 241, 0.2);
      border-radius: var(--radius-lg);
      text-align: center;

      /* Enhanced Spacing for Actions */
      padding: 0.875rem 1.25rem;
      margin: 0.25rem 0;

      /* Action Button Typography Enhancement */
      text-transform: none; /* Natural case for accessibility */
      font-feature-settings:
        "kern" 1,
        "liga" 1; /* Professional typography */
    }

    .nav-group-auth .nav-link:hover {
      /* Enhanced Hover State for Auth Actions */
      color: var(--color-primary-hover); /* Darker indigo for hover */
      font-weight: 650; /* Slightly heavier on hover */
      background: var(--nav-hover-surface, var(--hover-surface));
      border-color: var(--theme-border-focus);
      transform: translateY(
        -var(--border-width)
      ); /* Upward movement instead of sideways */

      /* Premium Feel with Subtle Shadow */
      box-shadow: 0 var(--space-0-5) var(--space-2) rgba(99, 102, 241, 0.15);
      text-shadow: 0 var(--border-width) var(--space-0-5) rgba(55, 48, 163, 0.1);
    }

    /* Primary Action Button (e.g., "Sign Up") */
    .nav-group-auth .nav-link.btn-primary {
      /* Primary Action Typography */
      color: var(--theme-text-contrast);
      background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-primary-dark)
      );
      border: none;
      font-weight: 650; /* Strong weight for primary actions */
      letter-spacing: -0.025em; /* Tighter for impact */

      /* Premium Typography Enhancement */
      text-shadow: 0 var(--border-width) var(--space-0-5)
        var(--theme-shadow-light);
    }

    .nav-group-auth .nav-link.btn-primary:hover {
      background: linear-gradient(
        135deg,
        var(--color-primary-dark),
        var(--color-primary)
      );
      color: var(--theme-text-contrast);
      font-weight: 700; /* Bold for primary hover */
      text-shadow: 0 var(--border-width) var(--space-0-75) rgba(0, 0, 0, 0.2);
    }

    /* ===== MOBILE DROPDOWN TYPOGRAPHY ENHANCEMENT ===== */
    /* Design Intent: Consistent typography hierarchy within dropdowns */

    /* Mobile dropdown adjustments */
    .dropdown-menu {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: none;
      background: var(--bg-secondary, #f8f9fa);
      margin-left: calc(var(--space-4) * var(--font-scale, 1));
    }

    /* Dropdown Menu Items - Subdued Typography */
    .dropdown-menu .nav-link {
      /* Hierarchical Typography for Dropdown Items */
      font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
      font-size: var(--space-4); /* Smaller than main nav to show hierarchy */
      font-weight: 500; /* Medium weight for secondary items */
      line-height: 1.4; /* Comfortable reading */
      letter-spacing: -0.015em; /* Slightly looser for secondary content */

      /* Subdued Styling */
      color: var(--theme-text-muted); /* Softer color for secondary hierarchy */
      padding: 0.75rem var(--space-4) 0.75rem var(--space-8); /* Extra left padding for indentation */

      /* Typography Enhancement */
      font-feature-settings: "kern" 1; /* Basic kerning for clean appearance */
      text-rendering: optimizelegibility;
    }

    

    .dropdown-menu .nav-link:active {
      background: var(--nav-active-surface, var(--active-surface));
    }

    .dropdown-menu.open {
      opacity: 1;
      visibility: visible;
    }

    .dropdown-menu:not(.open),
    .settings-menu:not(.open) {
      display: none;
    }

    /* Mobile mega menu styling */
    .mega-menu {
      position: static !important;
      display: none;
      width: 100% !important;
      max-width: none !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      transform: none !important;
      box-shadow: none !important;
      border: none !important;
      border-radius: 0 !important;
      margin: calc(0.5rem * var(--font-scale, 1)) 0 !important;
      padding: calc(var(--space-4) * var(--font-scale, 1)) !important;
      background: var(--bg-secondary, #f8f9fa) !important;
    }

    .mega-menu.open {
      visibility: visible;
      opacity: 1;
    }

    /* Make scenarios link functional in mobile */
    .nav-item-dropdown .nav-link[href="scenarios.html"] {
      pointer-events: auto !important;
    }

    /* Make other dropdown navigation links simple */
    .nav-item-dropdown .nav-link:not([href]) {
      pointer-events: auto;
    }
  }

  /* Navigation Toggle Button (Mobile) */
  .nav-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: calc(0.75rem * var(--font-scale, 1));
    width: calc(2.5rem * var(--font-scale, 1));
    height: calc(2.5rem * var(--font-scale, 1));
    justify-content: center;
    gap: var(--space-1);
    min-height: var(--touch-target-min, var(--space-11));
    min-width: var(--touch-target-min, var(--space-11));
    border-radius: var(--radius-lg);
    transition: background-color 0.2s ease;
  }

  .nav-toggle:hover {
    background: var(--theme-bg-secondary);
  }

  .nav-toggle:focus-visible {
    outline: 2px solid var(--theme-border-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--theme-shadow-focus);
  }

  .nav-toggle:active {
    background: var(--theme-bg-interactive);
    transform: scale(0.98);
  }

  .nav-toggle span {
    display: block;
    width: var(--space-5);
    height: var(--space-0-5, 0.125rem);
    background: var(--theme-text-secondary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--radius-none);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg)
      translate(var(--space-1-5, 0.375rem), var(--space-1-5, 0.375rem));
    background: var(--theme-text-primary);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg)
      translate(var(--space-1-5, 0.375rem), -var(--space-1-5, 0.375rem));
    background: var(--theme-text-primary);
  }

  @media only screen and (width <= 1023px) {
    .nav-toggle {
      display: flex;
    }

    /* Responsive toggle button for smaller screens */
    @media only screen and (width <= 375px) {
      .nav-toggle {
        padding: 0.5rem;
        width: var(--space-8);
        height: var(--space-8);
        min-width: var(--space-10);
        min-height: var(--space-10);
      }

      .nav-toggle span {
        width: var(--space-1-5, 0.375rem);
        height: var(--space-1);
      }
    }

    @media only screen and (width <= 640px) {
      .nav-toggle {
        padding: 0.375rem;
        width: 1.75rem;
        height: 1.75rem;
        min-width: calc(3 * var(--space-1-5, 0.375rem));
        min-height: calc(3 * var(--space-1-5, 0.375rem));
      }

      .nav-toggle span {
        width: var(--space-1);
        height: var(--border-width);
      }
    }
  }

  /* Navigation Backdrop (Mobile) - consolidated in earlier definition */

  /* Mega Menu Enhanced Styles */
  .mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: var(--border-width) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-xl);
    box-shadow: 0 var(--space-2) var(--space-8) rgb(0 0 0 / 10%);
    padding: calc(var(--space-8) * var(--font-scale, 1));
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    min-width: var(--container-lg);
    max-width: var(--container-xl);
  }

  .mega-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .mega-menu-content {
    display: flex;
    flex-direction: column;
    gap: calc(1.5rem * var(--font-scale, 1));
  }

  .mega-menu-header {
    text-align: center;
    border-bottom: var(--border-width) solid var(--border-color, #e0e0e0);
    padding-bottom: calc(var(--space-4) * var(--font-scale, 1));
  }

  .mega-menu-header h3 {
    margin: 0 0 calc(0.5rem * var(--font-scale, 1));
    font-size: calc(1.25rem * var(--font-scale, 1));
    color: var(--primary-color, #1a73e8);
  }

  .mega-menu-header p {
    margin: 0;
    color: var(--text-secondary, #666);
    font-size: calc(0.9rem * var(--font-scale, 1));
  }

  /* Initial mega-menu filter/search definitions removed; using consolidated versions below */

  .mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--container-xs), 1fr));
    gap: calc(var(--space-4) * var(--font-scale, 1));
  }

  .mega-menu-item {
    display: flex;
    align-items: center;
    gap: calc(var(--space-4) * var(--font-scale, 1));
    padding: calc(var(--space-4) * var(--font-scale, 1));
    border: var(--border-width) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    min-height: var(--touch-target-min, var(--space-11));
  }

  .mega-menu-item:hover,
  .mega-menu-item:focus {
    border-color: var(--primary-color, #1a73e8);
    box-shadow: 0 var(--space-0-5) var(--space-2) rgb(26 115 232 / 10%);
    transform: translateY(-var(--border-width));
  }

  .mega-menu-icon {
    font-size: calc(var(--space-8) * var(--font-scale, 1));
    flex-shrink: 0;
  }

  .mega-menu-text h4 {
    margin: 0 0 calc(0.25rem * var(--font-scale, 1));
    font-size: calc(var(--space-4) * var(--font-scale, 1));
    font-weight: 600;
  }

  .mega-menu-text p {
    margin: 0;
    font-size: calc(0.85rem * var(--font-scale, 1));
    color: var(--text-secondary, #666);
    line-height: 1.4;
  }

  /* ===== ADDITIONAL MEGA MENU COMPONENTS FROM MAIN.CSS ===== */
  /* Mega menu dropdown trigger behavior */
  .nav-item-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Mega menu search filter functionality */
  .mega-menu-filter {
    margin-top: calc(0.75rem * var(--font-scale, 1));
    display: none; /* Hidden by default, shown on mobile */
  }

  .mega-menu-search {
    width: 100%;
    padding: calc(0.5rem * var(--font-scale, 1))
      calc(0.75rem * var(--font-scale, 1));
    border: var(--border-width) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-md);
    font-size: calc(0.9rem * var(--font-scale, 1));
    background: white;
    transition: border-color 0.2s ease;
    min-height: var(--touch-target-min, var(--space-11));
  }

  .mega-menu-search:focus {
    outline: none;
    border-color: var(--primary-color, #1a73e8);
    box-shadow: 0 0 0 var(--space-0-75) rgb(26 115 232 / 10%);
  }

  .mega-menu-search::placeholder {
    color: var(--text-secondary, #666);
  }

  /* Show search filter on mobile */
  @media only screen and (width <= 767px) {
    .mega-menu-filter {
      display: block;
    }

    /* Detailed mobile mega menu responsive styles */
    .mega-menu {
      position: absolute;
      top: 100%;
      left: calc(0.75rem * var(--font-scale, 1));
      right: calc(0.75rem * var(--font-scale, 1));
      width: calc(
        var(--container-xs) - 2 * calc(0.75rem * var(--font-scale, 1))
      );
      max-width: calc(
        var(--container-xs) - 2 * calc(0.75rem * var(--font-scale, 1))
      );
      margin-left: calc(-1 * calc(0.75rem * var(--font-scale, 1)));

      background: white;
      border: var(--border-width) solid var(--border-color, #e0e0e0);
      border-radius: var(--radius-md);
      box-shadow: 0 var(--space-2) var(--space-8) rgb(0 0 0 / 10%);
      z-index: 1002; /* Above mobile nav */
      margin-top: calc(0.25rem * var(--font-scale, 1));
      display: block;
      max-height: 60vh;
      overflow: hidden auto;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;

      /* Mobile visibility */
      opacity: 0;
      visibility: hidden;
      transform: translateY(-var(--space-2-5));
      transition: all 0.3s ease;
    }

    /* Override desktop hover behavior on mobile */
    .nav-item-dropdown:hover .mega-menu {
      opacity: 0;
      visibility: hidden;
      transform: translateY(-var(--space-2-5));
    }

    /* Mobile open state */
    .nav-item-dropdown[aria-expanded="true"] .mega-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .mega-menu-content {
      padding: 0;
      display: block;
      box-sizing: border-box;
      overflow-x: hidden;
    }

    .mega-menu-header {
      padding: calc(var(--space-4) * var(--font-scale, 1))
        calc(0.75rem * var(--font-scale, 1))
        calc(0.75rem * var(--font-scale, 1));
      border-bottom: var(--border-width) solid var(--border-color, #e0e0e0);
      margin-bottom: calc(0.75rem * var(--font-scale, 1));
      box-sizing: border-box;
      text-align: left;
    }

    .mega-menu-header h3 {
      font-size: calc(1.125rem * var(--font-scale, 1));
      margin: 0 0 calc(0.5rem * var(--font-scale, 1));
      color: var(--text-color, #333);
      font-weight: 600;
    }

    .mega-menu-header p {
      font-size: calc(0.9rem * var(--font-scale, 1));
      margin: 0;
      color: var(--text-secondary, #666);
      line-height: 1.4;
    }

    .mega-menu-grid {
      display: block;
      max-height: none;
      overflow: visible;
      padding: 0;
    }

    .mega-menu-item {
      padding: calc(0.75rem * var(--font-scale, 1));
      border: none;
      border-bottom: var(--border-width) solid var(--border-color, #e0e0e0);
      margin: 0;
      border-radius: 0;
      background: white;
      transition: background-color 0.2s ease;
      text-decoration: none;
      color: var(--text-color, #333);
      min-height: var(--touch-target-min, var(--space-11));
      display: flex;
      align-items: center;
    }

    .mega-menu-item:last-child {
      border-bottom: none;
    }

    .mega-menu-item:hover,
    .mega-menu-item:focus {
      background: var(--nav-hover-surface, var(--hover-surface));
      color: var(--accent-primary);
      opacity: var(--hover-opacity);
    }

    .mega-menu-item:active {
      background: var(--nav-active-surface, var(--active-surface));
      opacity: var(--active-opacity);
      transform: scale(var(--active-scale));
    }

    .mega-menu-icon {
      display: inline-block;
      font-size: 1.2em;
      margin-right: calc(0.75rem * var(--font-scale, 1));
      vertical-align: middle;
      flex-shrink: 0;
    }

    .mega-menu-text {
      display: inline-block;
      vertical-align: middle;
      flex: 1;
    }

    .mega-menu-text h4 {
      font-size: calc(0.9rem * var(--font-scale, 1));
      margin: 0;
      font-weight: 500;
      color: inherit;
    }

    .mega-menu-text p {
      font-size: calc(0.8rem * var(--font-scale, 1));
      margin: 0;
      color: var(--text-secondary, #666);
      line-height: 1.3;
    }

    /* Ensure dropdown arrow is visible and rotates when open */
    .dropdown-arrow {
      transition: transform 0.2s ease;
    }

    .nav-item-dropdown[aria-expanded="true"] .dropdown-arrow {
      transform: rotate(180deg);
    }
  }

  /* Mega menu footer styles consolidated to footer.css for component ownership */
  /* .mega-menu-footer styles moved to footer.css */
  /* .mega-menu-view-all styles moved to footer.css */

  /* Mobile Mega Menu */
  @media only screen and (width <= 1023px) {
    .mega-menu {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: none;
      border-radius: 0;
      padding: calc(var(--space-4) * var(--font-scale, 1));
      min-width: auto;
      max-width: none;
      margin-left: calc(var(--space-4) * var(--font-scale, 1));
      background: var(--bg-secondary, #f8f9fa);
    }

    .mega-menu-grid {
      grid-template-columns: 1fr;
      gap: calc(0.5rem * var(--font-scale, 1));
    }

    .mega-menu-item {
      padding: calc(0.75rem * var(--font-scale, 1));
    }

    .mega-menu-icon {
      font-size: calc(1.5rem * var(--font-scale, 1));
    }
  }

  /* Tablet Navigation Enhancements */
  @media only screen and (width >= 768px) and (width <= 1279px) {
    .main-nav:not(.nav-open) {
      padding: 0 var(--space-4);
    }

    .nav-group-primary .nav-items {
      gap: calc(1.25rem * var(--font-scale));
    }

    .nav-group-about .nav-items,
    .nav-group-actions .nav-items {
      gap: calc(0.75rem * var(--font-scale));
    }

    .mega-menu {
      max-width: calc(90vw);
      left: 50%;
      transform: translateX(-50%) translateY(-20px);
    }

    .mega-menu.open {
      transform: translateX(-50%) translateY(0);
    }
  }

  /* Laptop/Desktop Navigation Enhancements */
  @media only screen and (width >= 1280px) {
    .main-nav:not(.nav-open) {
      flex: 1;
      justify-content: center;
      padding: 0 var(--space-4);
    }

    .nav-items {
      padding: 0;
      flex-direction: row;
      gap: var(--spacing-1, calc(1.5rem * var(--font-scale)));
      align-items: center;
    }

    .nav-backdrop {
      display: none; /* No backdrop needed on desktop */
    }

    .nav-link {
      padding: var(--spacing-2, calc(0.5rem * var(--font-scale)))
        var(--spacing-4, calc(var(--space-4) * var(--font-scale)));
    }

    .nav-link.active::before {
      display: none; /* Remove mobile indicator */
    }

    .nav-link.active {
      background-color: var(--theme-accent-bg);
      border-bottom: var(--space-0-5) solid var(--color-primary);
    }

    .nav-group-primary .nav-items {
      gap: calc(1.5rem * var(--font-scale));
    }

    .nav-group-about .nav-items,
    .nav-group-actions .nav-items {
      gap: calc(var(--space-4) * var(--font-scale));
    }

    .mega-menu {
      max-width: min(var(--content-width-xs, 20rem), calc(95vw));
    }
  }

  /* High Contrast Mode Support */
  @media (prefers-contrast: high) {
    .dropdown-menu,
    .settings-menu,
    .mega-menu {
      border-color: var(--theme-text-primary);
      box-shadow: 0 var(--space-1) 20px rgb(0 0 0 / 30%);
    }

    .mega-menu-item {
      border-color: var(--theme-text-primary);
    }

    .mega-menu-item:hover,
    .mega-menu-item:focus {
      border-color: var(--theme-text-primary);
      background-color: var(--theme-bg-secondary);
    }
  }

  /* Reduced Motion Support */
  @media (prefers-reduced-motion: reduce) {
    .dropdown-menu,
    .settings-menu,
    .mega-menu,
    .mega-menu-item,
    .nav-toggle span,
    .main-nav,
    .nav-backdrop {
      transition: none;
    }

    .mega-menu-item:hover,
    .mega-menu-item:focus {
      transform: none;
    }
  }

  /* ===== ENHANCED PROFILE NAVIGATION COMPONENTS ===== */
  /* Profile-specific header and navigation patterns */
  .header-container {
    display: flex;
    align-items: center;
    max-width: var(--container-md);
    margin: 0 auto;
    padding: 0 1.5rem;
    height: var(--header-h); /* Ensure consistent height with main header */
    min-height: var(--header-h); /* Prevent collapsing */
  }

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--space-20);
    gap: var(--space-8);
  }

  .logo-section {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .logo-link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .logo-link:hover {
    transform: translateY(-var(--border-width));
  }

  .logo-icon {
    width: var(--space-12);
    height: var(--space-12);
    font-size: 1.5rem;
    background: linear-gradient(
      135deg,
      var(--brand-primary-500),
      var(--brand-warning-400)
    );
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-on-accent);
    box-shadow: 0 var(--space-1) var(--space-1-5) rgb(0 0 0 / 10%);
  }

  .logo-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .logo-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0;
  }

  .logo-subtitle {
    font-size: 0.875rem;
    color: var(--theme-text-muted);
    font-weight: 500;
    margin: 0;
  }

  .header-nav {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
  }

  .nav-links {
    display: flex;
    gap: var(--space-8);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Enhanced nav-link styles for profile pages */
  .nav-links .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--theme-text-secondary);
    text-decoration: none;
    font-weight: 500;
    padding: 0.75rem var(--space-4);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    position: relative;
    min-height: var(--touch-target-min, var(--space-11));
  }

  .nav-links .nav-link:hover {
    color: var(--theme-text-primary);
    background: var(--nav-hover-surface, var(--hover-surface));
    transform: translateY(-var(--border-width));
  }

  .nav-links .nav-link:active {
    background: var(--nav-active-surface, var(--active-surface));
  }

  .nav-links .nav-link.active {
    color: var(--theme-text-primary);
    background: var(--nav-hover-surface, var(--hover-surface));
    transform: translateY(-var(--border-width));
  }

  .nav-links .nav-link::after {
    content: "";
    position: absolute;
    bottom: -var(--space-0-5);
    left: 50%;
    width: 0;
    height: var(--space-0-5);
    background: var(--accent-primary);
    transition: all 0.2s ease;
    transform: none;
  }

  .nav-links .nav-link:hover::after,
  .nav-links .nav-link.active::after {
    width: 80%;
  }

  /* Icon/link color harmonization */
  .nav-links .nav-link svg,
  .nav-links .nav-link .icon {
    color: currentColor;
    fill: currentColor;
  }

  /* Reduce hover cost on touch devices */
  @media (pointer: coarse) {
    .nav-links .nav-link:hover {
      background: transparent;
      transform: none;
    }
  }

  /* Accessible focus state */
  .nav-links .nav-link:focus-visible {
    outline: 2px solid var(--theme-border-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--theme-shadow-focus);
  }

  .nav-icon {
    font-size: var(--space-4);
  }

  /* ===== DARK MODE SUPPORT MOVED TO @layer overrides in css-layers.css ===== */

  /* High contrast mode moved to src/styles/css-layers.css @layer overrides */

  /* Navigation Toggle Positioning for Desktop */
  @media only screen and (width >= 1024px) {
    .nav-toggle {
      /* Hide toggle on desktop since nav is always visible */
      display: none;
    }
  }

  /* ===============================================
   SHARED NAVIGATION CONSOLIDATION COMPLETE
   ===============================================
   
   This file now contains ALL navigation-related styles:
   
   ✅ Main navigation (.header, .main-nav, .nav-link, etc.)
   ✅ Logo components (.logo, .logo-image, .logo-text, etc.)
   ✅ Mega menu system (.mega-menu, .mega-menu-item, etc.)
   ✅ Dropdown menus (.dropdown-menu, .dropdown-item, etc.)
   ✅ Mobile navigation (.nav-toggle, .nav-backdrop, etc.)
   ✅ Enhanced profile navigation (.header-content, .nav-links, etc.)
   ✅ Search components (.nav-search, .search-toggle, etc.)
   ✅ Dark mode support for all navigation elements
   ✅ High contrast mode support
   ✅ Mobile responsive patterns
   ✅ Force-visible override system
   ✅ Accessibility features
   
   Source consolidation from:
   - main.css (mega menu components, mobile styles)
   - enhanced-profile.css (profile navigation patterns)
   - appearance-settings.css (dark mode & high contrast styles)
   
   This establishes shared-navigation.css as the single source
   of truth for all navigation-related styling across the application.
*/

  /* ===== DROPDOWN ARROW ANIMATION ===== */
  /* Navigation dropdown arrow rotation for expanded state */
  .nav-item-dropdown[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
  }

  /* ===== NAVIGATION FOCUS STYLES ===== */
  /* Focus enhancement for navigation links for better keyboard navigation */
  .nav-link:focus-visible {
    outline: 2px solid var(--theme-border-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--theme-shadow-focus);
  }

  /* End of shared navigation components */
} /* End @layer components */

/* ===== JAVASCRIPT OVERRIDE LAYER ===== */
/* High-specificity overrides for JavaScript inline styles */
/* stylelint-enable alpha-value-notation, color-function-alias-notation, color-function-notation */

  /* Respect reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .nav-links .nav-link {
      transition: none;
    }
    .nav-links .nav-link:hover,
    .nav-links .nav-link.active,
    .header.header-visible {
      transform: none;
    }
  }


    .dropdown-menu .nav-link:focus-visible {
      outline: 2px solid var(--theme-border-focus);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px var(--theme-shadow-focus);
    }











  html[data-theme="dark"] .nav-group-primary .nav-link:hover {
    background: var(--nav-hover-surface, var(--interactive-bg-hover));
    color: var(--interactive-fg-hover, var(--theme-text-primary));
    transform: translateY(var(--hover-translate-y, -1px));
    box-shadow: var(--shadow-hover, 0 6px 18px rgb(0 0 0 / 40%));
  }

  html[data-theme="dark"] .nav-group .nav-link:hover {
    background: var(--nav-hover-surface, var(--interactive-bg-hover));
    /* Do not cancel transforms in dark mode; allow lift */
  }

  /* Final high-specificity safeguard: ensure dark-mode primary nav links lift with shadow */
  html[data-theme="dark"] .nav-group-primary .nav-link:hover, 
  body[data-theme="dark"] .nav-group-primary .nav-link:hover, 
  body.theme-dark .nav-group-primary .nav-link:hover, 
  body.dark-mode .nav-group-primary .nav-link:hover { 
    position: relative; 
    z-index: 1; 
    will-change: transform, box-shadow; 
    transform: translateY(var(--hover-translate-y, -1px)) !important; 
    box-shadow: var(--shadow-hover, 0 6px 18px rgb(0 0 0 / 40%)) !important; 
  } 

  /* Extend safeguard to all nav groups for consistent dark hover behavior */
  html[data-theme="dark"] .nav-group .nav-link:hover, 
  body[data-theme="dark"] .nav-group .nav-link:hover, 
  body.theme-dark .nav-group .nav-link:hover, 
  body.dark-mode .nav-group .nav-link:hover { 
    transform: translateY(var(--hover-translate-y, -1px)) !important; 
    box-shadow: var(--shadow-hover, 0 6px 18px rgb(0 0 0 / 40%)) !important; 
    position: relative; 
    z-index: 1; 
    will-change: transform, box-shadow; 
  }