@layer layout {
  .header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-border);

    .header__container {
      display: flex;
      align-items: center;
      gap: var(--space-6);
      max-width: 80rem;
      margin: 0 auto;
      padding: var(--space-4) var(--space-6);
    }

    .header__logo {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-xl);
      font-weight: var(--font-bold);
      color: var(--color-text);
      text-decoration: none;
    }

    /* Desktop Navigation */
    .header__nav {
      display: flex;
      align-items: center;
      gap: var(--space-6);

      @media (max-width: 768px) {
        display: none;
      }
    }

    .header__nav-link {
      color: var(--color-primary-600);
      text-decoration: none;
      font-weight: 500;
      transition: color var(--transition-fast), text-decoration var(--transition-fast);

      &:hover {
        color: var(--color-primary-700);
        text-decoration: underline;
      }
    }

    .header__actions {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      margin-left: auto;

      @media (max-width: 768px) {
        display: none;
      }
    }

    /* Mobile Menu Toggle (Hamburger) */
    .header__toggle {
      display: none;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      margin-left: auto;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;
      color: var(--color-gray-600);
      transition: background-color var(--transition-fast), color var(--transition-fast);

      &:hover {
        background: var(--color-gray-100);
        color: var(--color-gray-800);
      }

      svg {
        width: 1.5rem;
        height: 1.5rem;
      }

      @media (max-width: 768px) {
        display: flex;
      }
    }

    /* Header Variants */
    &--transparent {
      position: absolute;
      width: 100%;
      background-color: transparent;
      border-bottom-color: transparent;
    }

    &--dark {
      background-color: var(--color-gray-900);
      border-bottom-color: var(--color-gray-800);

      .header__logo {
        color: white;
      }
    }
  }

  /* Mobile Menu (slide-in from left) */
  .header__mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    background-color: var(--color-background);
    border-right: 1px solid var(--color-border);
    box-shadow: var(--shadow-xl);
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    z-index: var(--z-modal);

    &.is-open {
      transform: translateX(0);
    }

    .header__mobile-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--space-6);
    }

    .header__mobile-close {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;
      color: var(--color-gray-500);

      &:hover {
        background: var(--color-gray-100);
        color: var(--color-gray-700);
      }

      svg {
        width: 1.5rem;
        height: 1.5rem;
      }
    }

    .header__mobile-nav {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      margin-bottom: var(--space-6);
    }

    .header__mobile-link {
      display: block;
      padding: var(--space-3);
      color: var(--color-primary-600);
      text-decoration: none;
      font-weight: 500;
      border-radius: var(--radius-md);
      transition: background-color var(--transition-fast), color var(--transition-fast), text-decoration var(--transition-fast);

      &:hover {
        background: var(--color-gray-100);
        color: var(--color-primary-700);
        text-decoration: underline;
      }
    }

    .header__mobile-actions {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      margin-top: auto;
    }
  }

  /* Mobile Menu Backdrop */
  .header__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    z-index: calc(var(--z-modal) - 1);

    &.is-visible {
      opacity: 1;
      visibility: visible;
    }

    @media (max-width: 768px) {
      display: block;
    }
  }
}