/* Custom alignments for site header elements */

/* Fixed header at top of viewport */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important; /* Ensure header stays above all other content */
  background-color: #fdfdfd !important; /* Match site background */
  border-bottom: 1px solid #e8e8e8 !important; /* Add subtle bottom border */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; /* Add subtle shadow for depth */
}

/* Add top padding to main content to compensate for fixed header */
.page-content {
  padding-top: 80px !important; /* Adjust based on header height */
}

/* Adjust post content spacing */
.post-content,
.home {
  margin-top: 0 !important;
}

.site-header .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 55.95px; /* equivalent to spacing-unit * 1.865 */
}

.site-title {
  float: none !important; /* Override the default float */
  margin: 0;
  align-self: center;
  flex-shrink: 0; /* Prevent title from shrinking */
}

.site-nav {
  float: none !important; /* Override the default float */
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Right align the navigation links */
  margin-left: auto; /* Push navigation to the right */
}

.site-nav .page-link {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  text-align: right;
}

/* Responsive behavior for narrow screens */
@media screen and (max-width: 600px) {
  .site-header .wrapper {
    flex-direction: row; /* Keep horizontal layout */
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap; /* Prevent wrapping */
    position: relative; /* Establish positioning context */
  }
  .site-title {
    /* Keep original font size on narrow screens */
    flex-shrink: 1; /* Allow title to shrink if needed */
    min-width: 0; /* Allow title to shrink below its content size */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 50px); /* Reserve space for menu button */
  }
  .site-nav {
    flex-shrink: 0; /* Navigation should not shrink */
    margin-left: 10px; /* Smaller margin on mobile */
    position: relative; /* Ensure proper stacking context */
    /* Remove default mobile menu styling that causes edge lines */
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  } /* Ensure the menu button stays in position */
  .site-nav label[for="nav-trigger"] {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 1002 !important; /* Ensure button stays on top of everything */
    /* Remove any background or border styling */
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
  /* Prevent content from affecting button position */
  .site-nav .trigger {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px; /* Ensure sufficient width for menu items */
    z-index: 1001; /* Ensure dropdown appears above fixed header */
  }
  .site-nav .page-link {
    font-size: 0.9rem; /* Smaller font for navigation */
    white-space: nowrap; /* Prevent text wrapping */
    /* Styling handled by enhanced animations above */
  }

  .site-nav .page-link:not(:last-child) {
    margin-right: 0;
  }
  /* Additional mobile menu stability improvements */
  .site-header {
    min-height: 55.95px;
    /* Keep fixed positioning on mobile - don't override with relative */
    z-index: 1000; /* Ensure consistent z-index with fixed header */
  }

  /* Prevent menu button from moving when toggled */
  .site-nav {
    position: absolute;
    top: 9px;
    right: 15px; /* spacing-unit * 0.5 */
  }

  /* Hide checkbox but maintain layout */
  .site-nav .nav-trigger {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  /* Enhanced menu button with hamburger transformation */
  .site-nav .menu-icon {
    display: block;
    width: 18px;
    height: 15px;
    position: relative;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }

  .site-nav .menu-icon svg {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
  }

  /* Hamburger icon transformation when menu is open */
  .site-nav input:checked ~ label .menu-icon {
    transform: rotate(45deg) scale(0.9);
  }

  .site-nav input:checked ~ label .menu-icon svg {
    transform: rotate(45deg) scale(1.1);
    opacity: 0.8;
  } /* Enhanced trigger area with coordinated animations */
  .site-nav .trigger {
    transform-origin: top right;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity, max-height, box-shadow;
    background-color: transparent;
    border-radius: 8px;
    padding: 0.5rem 0;
    margin-top: 8px;
  }

  /* Menu closed state */
  .site-nav .trigger {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) translateX(5px) scale(0.95);
    max-height: 0;
    overflow: hidden;
  }
  /* When menu is open, ensure button stays in place */
  .site-nav input:checked ~ label[for="nav-trigger"] {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 36px !important;
    height: 36px !important;
    /* Remove any background or border styling when open */
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  } /* Menu open state with coordinated animations */
  .site-nav input:checked ~ .trigger {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateX(0) scale(1);
    max-height: 400px;
    animation: menuExpandIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Remove border-top from open state */
    border-top: none !important;
    /* Add translucent white background mask */
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
  /* Enhanced menu animations matching site patterns */
  @keyframes menuExpandIn {
    0% {
      opacity: 0;
      transform: translateY(-15px) translateX(8px) scale(0.9);
      max-height: 0;
    }
    40% {
      opacity: 0.6;
      transform: translateY(-5px) translateX(3px) scale(0.95);
      max-height: 200px;
    }
    70% {
      opacity: 0.9;
      transform: translateY(2px) translateX(-1px) scale(1.02);
    }
    100% {
      opacity: 1;
      transform: translateY(0) translateX(0) scale(1);
      max-height: 400px;
    }
  }

  /* Staggered animation for menu items */
  .site-nav .page-link {
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
    padding: 8px 16px;
    margin: 2px 0;
    border-radius: 6px;
    display: block;
    position: relative;
  }
  .site-nav .page-link:hover {
    transform: translateX(3px) translateY(-1px);
  }

  .site-nav .page-link:active {
    transform: translateX(1px) translateY(1px);
  }

  /* Animate menu items in sequence when menu opens */
  .site-nav input:checked ~ .trigger .page-link {
    opacity: 1;
    transform: translateX(0);
  }

  .site-nav input:checked ~ .trigger .page-link:nth-child(1) {
    animation-delay: 0.1s;
  }
  .site-nav input:checked ~ .trigger .page-link:nth-child(2) {
    animation-delay: 0.15s;
  }
  .site-nav input:checked ~ .trigger .page-link:nth-child(3) {
    animation-delay: 0.2s;
  }
  .site-nav input:checked ~ .trigger .page-link:nth-child(4) {
    animation-delay: 0.25s;
  }
  .site-nav input:checked ~ .trigger .page-link:nth-child(5) {
    animation-delay: 0.3s;
  }

  .site-nav input:checked ~ .trigger .page-link {
    animation: menuItemSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }

  @keyframes menuItemSlideIn {
    from {
      opacity: 0;
      transform: translateX(15px) translateY(-3px);
    }
    to {
      opacity: 1;
      transform: translateX(0) translateY(0);
    }
  }
}

/* Prevent any flash of unstyled content on mobile */
@media screen and (max-width: 600px) {
  .site-nav {
    visibility: visible;
  }

  .site-nav .trigger {
    will-change: opacity, transform, max-height, box-shadow;
  }

  .site-nav label[for="nav-trigger"] {
    will-change: auto; /* Prevent unnecessary GPU layers */
  } /* Add backdrop overlay effect when menu is open */
  .site-nav input:checked ~ .trigger::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.2);
    z-index: -1;
    opacity: 0;
    animation: backdropFadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: none; /* Allow clicks to pass through to body */
  }

  /* Full screen overlay for better click detection */
  .site-nav input:checked ~ .trigger::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: -2;
    pointer-events: auto; /* Capture clicks for closing menu */
  }

  @keyframes backdropFadeIn {
    to {
      opacity: 1;
    }
  }

  /* Ensure smooth menu closure */
  .site-nav .trigger {
    transition-delay: 0s;
  }

  .site-nav input:not(:checked) ~ .trigger {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation: menuCollapseOut 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
      forwards;
  }

  @keyframes menuCollapseOut {
    0% {
      opacity: 1;
      transform: translateY(0) translateX(0) scale(1);
      max-height: 400px;
    }
    100% {
      opacity: 0;
      transform: translateY(-8px) translateX(3px) scale(0.96);
      max-height: 0;
    }
  } /* Remove outline from menu items when clicked/focused */
  .site-nav input:checked ~ .trigger .page-link:focus {
    outline: none;
  }

  /* Remove outline from menu items in all states */
  .site-nav .page-link:focus {
    outline: none;
  }
}

/* Extra small screens */
@media screen and (max-width: 480px) {
  .site-title {
    /* Keep original font size on extra small screens too */
    max-width: 60%; /* Limit title width */
  }
  .site-nav .page-link {
    font-size: 0.8rem;
    /* Enhanced styling handled by main animations */
  }
}